From fe7cba601bdefe6c6edcde0b3e51c2d0ef542312 Mon Sep 17 00:00:00 2001
From: insekkei <1183448115@qq.com>
Date: Fri, 29 Mar 2024 08:32:24 +0800
Subject: [PATCH 01/20] feat(typography): typography finished

---
 .vscode/settings.json                         |   2 +-
 package.json                                  |   5 +
 site/site.config.mjs                          |   8 +
 src/_common                                   |   2 +-
 .../__snapshots__/vitest-guide.test.jsx.snap  |   6 +-
 src/index.ts                                  |   1 +
 src/typography/Ellipsis.tsx                   |  99 ++++
 src/typography/Paragraph.tsx                  |  38 ++
 src/typography/Text.tsx                       | 166 +++++++
 src/typography/Title.tsx                      |  39 ++
 src/typography/Truncate.tsx                   | 429 ++++++++++++++++++
 src/typography/__tests__/typography.test.tsx  | 117 +++++
 src/typography/_example/base.jsx              |  47 ++
 src/typography/_example/copyable.jsx          |  36 ++
 src/typography/_example/ellipsis.jsx          |  59 +++
 src/typography/_example/text.jsx              |  25 +
 src/typography/_example/title.jsx             |  17 +
 src/typography/api.md                         |   3 +
 src/typography/defaultProps.ts                |  22 +
 src/typography/index.ts                       |  17 +
 src/typography/style/css.js                   |   1 +
 src/typography/style/index.js                 |   1 +
 src/typography/type.ts                        | 156 +++++++
 src/typography/typography.en-US.md            |  62 +++
 src/typography/typography.md                  |  62 +++
 src/typography/useEllipsis.tsx                |  65 +++
 26 files changed, 1480 insertions(+), 5 deletions(-)
 create mode 100644 src/typography/Ellipsis.tsx
 create mode 100644 src/typography/Paragraph.tsx
 create mode 100644 src/typography/Text.tsx
 create mode 100644 src/typography/Title.tsx
 create mode 100644 src/typography/Truncate.tsx
 create mode 100644 src/typography/__tests__/typography.test.tsx
 create mode 100644 src/typography/_example/base.jsx
 create mode 100644 src/typography/_example/copyable.jsx
 create mode 100644 src/typography/_example/ellipsis.jsx
 create mode 100644 src/typography/_example/text.jsx
 create mode 100644 src/typography/_example/title.jsx
 create mode 100644 src/typography/api.md
 create mode 100644 src/typography/defaultProps.ts
 create mode 100644 src/typography/index.ts
 create mode 100644 src/typography/style/css.js
 create mode 100644 src/typography/style/index.js
 create mode 100644 src/typography/type.ts
 create mode 100644 src/typography/typography.en-US.md
 create mode 100644 src/typography/typography.md
 create mode 100644 src/typography/useEllipsis.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e500d7a72..4ca63e8b9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -22,7 +22,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "cSpell.words": ["activable", "actived", "borderless", "Cascader", "Popconfirm", "Swiper", "tdesign"]
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 5e899cd03..3b38305d4 100644
--- a/package.json
+++ b/package.json
@@ -203,13 +203,18 @@
     "@types/tinycolor2": "^1.4.3",
     "@types/validator": "^13.1.3",
     "classnames": "~2.3.1",
+    "copy-to-clipboard": "^3.3.3",
     "dayjs": "~1.11.4",
     "hoist-non-react-statics": "~3.3.2",
+    "install": "^0.13.0",
     "lodash": "~4.17.15",
     "mitt": "^3.0.0",
+    "npm": "^10.5.0",
     "raf": "~3.4.1",
     "react-is": "^18.2.0",
+    "react-lines-ellipsis": "^0.15.4",
     "react-popper": "~2.3.0",
+    "react-show-more-text": "^1.7.1",
     "react-transition-group": "~4.4.1",
     "sortablejs": "^1.15.0",
     "tdesign-icons-react": "^0.3.0",
diff --git a/site/site.config.mjs b/site/site.config.mjs
index 48fe71275..1834e6222 100644
--- a/site/site.config.mjs
+++ b/site/site.config.mjs
@@ -561,6 +561,14 @@ export const docs = [
         component: () => import('tdesign-react/tooltip/tooltip.md'),
         componentEn: () => import('tdesign-react/tooltip/tooltip.en-US.md'),
       },
+      {
+        title: 'Typography 排版',
+        titleEn: 'Typography',
+        name: 'typography',
+        path: '/react/components/typography',
+        component: () => import('tdesign-react/typography/typography.md'),
+        componentEn: () => import('tdesign-react/typography/typography.en-US.md'),
+      },
       {
         title: 'Tree 树',
         titleEn: 'Tree',
diff --git a/src/_common b/src/_common
index 742a90e47..27dd7faa1 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 742a90e47eed782f9d09ab7f981f60a950846c48
+Subproject commit 27dd7faa1436f53ff4a65c4fa9e1a6f83db13317
diff --git a/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap b/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
index 7f42bdb14..63e07e880 100644
--- a/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
+++ b/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
@@ -921,7 +921,7 @@ exports[`Guide Component > GuideStep.placement is equal to bottom-left 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear appear-active"
+    class="t-portal-wrapper appear-done enter-done"
   >
     <div
       class="t-popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -1092,7 +1092,7 @@ exports[`Guide Component > GuideStep.stepOverlayClass is equal to t-test-guide-s
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear appear-active"
+    class="t-portal-wrapper appear-done enter-done"
   >
     <div
       class="t-popup t-test-guide-step-overlay t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -1263,7 +1263,7 @@ exports[`Guide Component > GuideStep.title works fine 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear appear-active"
+    class="t-portal-wrapper appear-done enter-done"
   >
     <div
       class="t-popup t-popup--animation-enter-active t-popup--animation-enter-to"
diff --git a/src/index.ts b/src/index.ts
index 2b8142ca9..b6101a916 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -66,3 +66,4 @@ export * from './guide';
 export * from './back-top';
 export * from './statistic';
 export * from './descriptions';
+export * from './typography';
diff --git a/src/typography/Ellipsis.tsx b/src/typography/Ellipsis.tsx
new file mode 100644
index 000000000..25c03bb9a
--- /dev/null
+++ b/src/typography/Ellipsis.tsx
@@ -0,0 +1,99 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+import Truncate from './Truncate';
+import useConfig from '../hooks/useConfig';
+
+type TdEllipsis = {
+  className?: string;
+  children: ReactNode;
+  lines: number;
+  ellipsisClassName: string;
+  ellipsisPrefix: ReactNode;
+  onToggleExpand?: (isExpanded: boolean, e: Event) => void;
+  width: number;
+  onTruncate?: (truncated: boolean) => void;
+  component: string;
+  collapsible: boolean;
+  expandable: boolean;
+  more: ReactNode;
+  less: ReactNode;
+};
+
+const Ellipsis = ({
+  className,
+  children,
+  lines = 1,
+  ellipsisClassName,
+  ellipsisPrefix = '...',
+  onToggleExpand,
+  width = 0,
+  onTruncate,
+  component: Component = 'div',
+  collapsible = false,
+  expandable = false,
+  more,
+  less,
+  ...rest
+}: TdEllipsis) => {
+  const { classPrefix } = useConfig();
+  const symbolClassName = ellipsisClassName || `${classPrefix}-typography-ellipsis-symbol`;
+
+  const isMountRef = useRef(false);
+  useEffect(() => {
+    isMountRef.current = true;
+  }, []);
+
+  const [isExpanded, setIsExpanded] = useState(false);
+  const handleToggleExpand = (e) => {
+    if (!expandable) return;
+
+    if (isMountRef.current) {
+      setIsExpanded(!isExpanded);
+      onToggleExpand?.(!isExpanded, e);
+    }
+  };
+
+  const truncateRef = useRef();
+  const [isTruncated, setTruncated] = useState(false);
+  const handleTruncate = (truncated) => {
+    if (isMountRef.current && truncated !== isTruncated) {
+      setTruncated(truncated);
+
+      if (truncated) {
+        truncateRef.current?.onResize();
+      }
+      onTruncate?.(truncated);
+    }
+  };
+
+  return (
+    <Component className={className} {...rest}>
+      <Truncate
+        width={width}
+        lines={!isExpanded && lines}
+        className={`${classPrefix}-typography-ellipsis`}
+        ellipsis={
+          <span className={`${classPrefix}-typography-ellipsis-symbol-wrapper`}>
+            {ellipsisPrefix}
+            <span className={symbolClassName} onClick={handleToggleExpand}>
+              {more}
+            </span>
+          </span>
+        }
+        onTruncate={handleTruncate}
+        ref={truncateRef}
+        lineClassName={`${classPrefix}-typography-ellipsis-line`}
+      >
+        {children}
+      </Truncate>
+      {!isTruncated && collapsible && isExpanded && (
+        <span className={classNames(symbolClassName, `${symbolClassName}--expanded`)} onClick={handleToggleExpand}>
+          {less}
+        </span>
+      )}
+    </Component>
+  );
+};
+
+export default Ellipsis;
diff --git a/src/typography/Paragraph.tsx b/src/typography/Paragraph.tsx
new file mode 100644
index 000000000..48670c503
--- /dev/null
+++ b/src/typography/Paragraph.tsx
@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import Ellipsis from './Ellipsis';
+import { TdParagraphProps } from './type';
+import { paragraphDefaultProps } from './defaultProps';
+import useConfig from '../hooks/useConfig';
+import useEllipsis from './useEllipsis';
+
+export type TypographyParagraphProps = TdParagraphProps;
+
+const ParagraphFunction = (props: TypographyParagraphProps, ref: React.Ref<HTMLDivElement>) => {
+  const { classPrefix } = useConfig();
+  const { ellipsis, children, className, ...rest } = props;
+  const prefixCls = `${classPrefix}-typography`;
+
+  const { ellipsisProps } = useEllipsis(ellipsis);
+
+  if (!ellipsis) {
+    return (
+      <div className={classNames(className, prefixCls)} ref={ref} {...rest}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <Ellipsis {...ellipsisProps} className={classNames(className, prefixCls)} ref={ref} {...rest}>
+      {children}
+    </Ellipsis>
+  );
+};
+
+export const Paragraph = forwardRef(ParagraphFunction);
+
+Paragraph.displayName = 'Paragraph';
+Paragraph.defaultProps = paragraphDefaultProps;
+
+export default Paragraph;
diff --git a/src/typography/Text.tsx b/src/typography/Text.tsx
new file mode 100644
index 000000000..3ff74d434
--- /dev/null
+++ b/src/typography/Text.tsx
@@ -0,0 +1,166 @@
+import React, { forwardRef, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { CheckIcon, CopyIcon } from 'tdesign-icons-react';
+import copy from 'copy-to-clipboard';
+
+import Ellipsis from './Ellipsis';
+import { TdTextProps } from './type';
+import { titleDefaultProps } from './defaultProps';
+import useConfig from '../hooks/useConfig';
+import useEllipsis from './useEllipsis';
+import Button from '../button/Button';
+import Tooltip from '../tooltip';
+import { useLocaleReceiver } from '../locale/LocalReceiver';
+
+export type TypographyTextProps = TdTextProps;
+
+const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement>) => {
+  const { classPrefix } = useConfig();
+  const prefixCls = `${classPrefix}-typography`;
+
+  const [local, t] = useLocaleReceiver('typography');
+  const copiedText = t(local.copied);
+
+  const {
+    theme,
+    disabled,
+    className,
+    copyable,
+    strong,
+    mark,
+    code,
+    keyboard,
+    underline,
+    delete: deleteProp,
+    italic,
+    children,
+    ellipsis,
+    ...rest
+  } = props;
+  const getComponent = () => {
+    const componentMap = {
+      strong: !!strong,
+      mark: !!mark,
+      code: !!code,
+      kbd: !!keyboard,
+      u: !!underline,
+      del: !!deleteProp,
+      i: !!italic,
+    };
+    return Object.entries(componentMap).find(([, condition]) => !!condition)?.[0];
+  };
+
+  const currentRef = useRef();
+  const { ellipsisProps } = useEllipsis(ellipsis);
+  const Component = getComponent();
+
+  const textEllipsisProps = {
+    ...ellipsisProps,
+  };
+
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyProps =
+    typeof copyable === 'boolean'
+      ? {
+          text: children.toString(),
+          onCopy: Function.prototype,
+          tooltipProps: isCopied
+            ? {
+                content: copiedText,
+              }
+            : null,
+        }
+      : {
+          text: copyable?.text || children.toString(),
+          onCopy: copyable?.onCopy?.(),
+          tooltipProps: {
+            ...copyable?.tooltipProps,
+            content: isCopied ? copiedText : copyable?.tooltipProps?.content,
+          },
+          suffix: copyable?.suffix,
+        };
+
+  const handleCopy = () => {
+    copy(copyProps?.text);
+    setIsCopied(true);
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 1500);
+    copyProps.onCopy?.();
+  };
+
+  const renderContent = (withChildren: boolean) => {
+    const { tooltipProps } = copyProps;
+    const wrapWithTooltip = (wrapContent) =>
+      tooltipProps ? <Tooltip {...tooltipProps}>{wrapContent}</Tooltip> : wrapContent;
+
+    const getSuffix = () => {
+      if (typeof copyProps?.suffix === 'function') {
+        return copyProps.suffix({ copied: isCopied });
+      }
+      return isCopied ? <CheckIcon /> : <CopyIcon />;
+    };
+
+    return (
+      <>
+        {withChildren ? children : null}
+        {copyable
+          ? wrapWithTooltip(
+              <Button shape="circle" theme="primary" variant="text" icon={getSuffix()} onClick={handleCopy} />,
+            )
+          : null}
+      </>
+    );
+  };
+
+  if (!ellipsis) {
+    return Component ? (
+      <span className={classNames(className, prefixCls)} ref={ref || currentRef} {...rest}>
+        <Component>{renderContent(true)}</Component>
+      </span>
+    ) : (
+      <span
+        className={classNames(className, {
+          [`${prefixCls}--${theme}`]: theme,
+          [`${prefixCls}--disabled`]: disabled,
+        })}
+        {...rest}
+      >
+        {renderContent(true)}
+      </span>
+    );
+  }
+
+  return (
+    <>
+      {Component ? (
+        <span className={classNames(className, prefixCls)} ref={ref || currentRef} {...rest}>
+          <Ellipsis {...textEllipsisProps} component={Component}>
+            {children}
+          </Ellipsis>
+        </span>
+      ) : (
+        <Ellipsis
+          {...textEllipsisProps}
+          className={classNames(className, {
+            [`${prefixCls}--${theme}`]: theme,
+            [`${prefixCls}--disabled`]: disabled,
+          })}
+          text={children}
+          {...rest}
+        >
+          {children}
+        </Ellipsis>
+      )}
+      {renderContent(false)}
+    </>
+  );
+};
+
+export const Text = forwardRef(TextFunction);
+
+Text.displayName = 'Text';
+Text.defaultProps = titleDefaultProps;
+
+export default Text;
diff --git a/src/typography/Title.tsx b/src/typography/Title.tsx
new file mode 100644
index 000000000..c7bf863ce
--- /dev/null
+++ b/src/typography/Title.tsx
@@ -0,0 +1,39 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import Ellipsis from './Ellipsis';
+
+import { TdTitleProps } from './type';
+import { titleDefaultProps } from './defaultProps';
+import useConfig from '../hooks/useConfig';
+import useEllipsis from './useEllipsis';
+
+export type TypographyTitleProps = TdTitleProps;
+
+const TitleFunction = (props: TypographyTitleProps, ref: React.Ref<HTMLDivElement>) => {
+  const { classPrefix } = useConfig();
+  const { level: Component = 'h1', children, className, ellipsis, ...rest } = props;
+  const prefixCls = `${classPrefix}-typography`;
+
+  const { ellipsisProps } = useEllipsis(ellipsis);
+
+  if (!ellipsis) {
+    return (
+      <Component className={classNames(className, prefixCls)} ref={ref} {...rest}>
+        {children}
+      </Component>
+    );
+  }
+
+  return (
+    <Ellipsis className={classNames(className, prefixCls)} {...ellipsisProps} ref={ref} component={Component} {...rest}>
+      {children}
+    </Ellipsis>
+  );
+};
+
+export const Title = forwardRef(TitleFunction);
+
+Title.displayName = 'Title';
+Title.defaultProps = titleDefaultProps;
+
+export default Title;
diff --git a/src/typography/Truncate.tsx b/src/typography/Truncate.tsx
new file mode 100644
index 000000000..3ba3d5321
--- /dev/null
+++ b/src/typography/Truncate.tsx
@@ -0,0 +1,429 @@
+/* eslint-disable no-param-reassign */
+/**
+ * LICENSE
+ * https://github.com/pablosichert/react-truncate/blob/master/LICENSE.md
+ *
+ * ISC License
+Copyright (c) 2016, One.com
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is
+hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE
+INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE
+FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE,
+DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
+CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+// Initial version of react-truncate module (v2.4.0)
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class Truncate extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    ellipsis: PropTypes.node,
+    lines: PropTypes.oneOfType([PropTypes.oneOf([false]), PropTypes.number]),
+    trimWhitespace: PropTypes.bool,
+    width: PropTypes.number,
+    onTruncate: PropTypes.func,
+    lineClassName: PropTypes.string,
+  };
+
+  static defaultProps = {
+    children: '',
+    ellipsis: '…',
+    lines: 1,
+    trimWhitespace: false,
+    width: 0,
+    lineClassName: 'truncate-line',
+  };
+
+  state = {};
+
+  constructor(...args) {
+    super(...args);
+
+    this.elements = {};
+    this.replacedLinks = [];
+    this.calcedEllipsisWidth = false;
+  }
+
+  componentDidMount() {
+    const {
+      elements: { text },
+      calcTargetWidth,
+      onResize,
+    } = this;
+
+    const canvas = document.createElement('canvas');
+    this.canvasContext = canvas.getContext('2d');
+
+    calcTargetWidth(() => {
+      // Node not needed in document tree to read its content
+      if (text && text.parentNode) {
+        text.parentNode.removeChild(text);
+      }
+    });
+
+    window.addEventListener('resize', onResize);
+  }
+
+  componentDidUpdate(prevProps) {
+    // Render was based on outdated refs and needs to be rerun
+    if (this.props.children !== prevProps.children) {
+      this.forceUpdate();
+    }
+
+    // If the width prop has changed, recalculate size of contents
+    if (this.props.width !== prevProps.width) {
+      this.calcTargetWidth();
+    }
+  }
+
+  componentWillUnmount() {
+    const {
+      elements: { ellipsis },
+      onResize,
+      timeout,
+    } = this;
+
+    if (ellipsis.parentNode && this.calcedEllipsisWidth) {
+      ellipsis.parentNode.removeChild(ellipsis);
+    }
+
+    window.removeEventListener('resize', onResize);
+    window.cancelAnimationFrame(timeout);
+  }
+
+  extractReplaceLinksKeys = (content) => {
+    const i = 0;
+    this.replacedLinks = [];
+
+    content.replace(/(<a[\s]+([^>]+)>((?:.(?!<\/a>))*.)<\/a>)/g, (...rest) => {
+      const item = Array.prototype.slice.call(rest, 1, 4);
+      item.key = `[${'@'.repeat(item[2].length - 1)}=${i + 1}]`;
+      this.replacedLinks.push(item);
+
+      content = content.replace(item[0], item.key);
+    });
+
+    return content;
+  };
+
+  restoreReplacedLinks = (content) => {
+    this.replacedLinks.forEach((item) => {
+      // eslint-disable-next-line no-param-reassign
+      content = content.replace(item.key, item[0]);
+    });
+
+    return this.createMarkup(content);
+  };
+
+  // Shim innerText to consistently break lines at <br/> but not at \n
+  innerText = (node) => {
+    const div = document.createElement('div');
+    const contentKey = 'innerText' in window.HTMLElement.prototype ? 'innerText' : 'textContent';
+
+    const content = node.innerHTML.replace(/\r\n|\r|\n/g, ' ');
+    div.innerHTML = this.extractReplaceLinksKeys(content);
+
+    let text = div[contentKey];
+
+    const test = document.createElement('div');
+    test.innerHTML = 'foo<br/>bar';
+
+    if (test[contentKey].replace(/\r\n|\r/g, '\n') !== 'foo\nbar') {
+      div.innerHTML = div.innerHTML.replace(/<br.*?[/]?>/gi, '\n');
+      text = div[contentKey];
+    }
+
+    return text;
+  };
+
+  onResize = () => {
+    this.calcTargetWidth();
+  };
+
+  onTruncate = (didTruncate) => {
+    const { onTruncate } = this.props;
+
+    if (typeof onTruncate === 'function') {
+      this.timeout = window.requestAnimationFrame(() => {
+        onTruncate(didTruncate);
+      });
+    }
+  };
+
+  calcTargetWidth = (callback) => {
+    const {
+      elements: { target },
+      calcTargetWidth,
+      canvasContext,
+      props: { width },
+    } = this;
+
+    // Calculation is no longer relevant, since node has been removed
+    if (!target) {
+      return;
+    }
+
+    const targetWidth =
+      width ||
+      // Floor the result to deal with browser subpixel precision
+      Math.floor(target.parentNode.getBoundingClientRect().width);
+
+    // Delay calculation until parent node is inserted to the document
+    // Mounting order in React is ChildComponent, ParentComponent
+    if (!targetWidth) {
+      return window.requestAnimationFrame(() => calcTargetWidth(callback));
+    }
+
+    const style = window.getComputedStyle(target);
+
+    const font = [style['font-weight'], style['font-style'], style['font-size'], style['font-family']].join(' ');
+
+    canvasContext.font = font;
+
+    this.setState(
+      {
+        targetWidth,
+      },
+      callback,
+    );
+  };
+
+  measureWidth = (text) => this.canvasContext.measureText(text).width;
+
+  ellipsisWidth = (node) => {
+    this.calcedEllipsisWidth = true;
+    return node.offsetWidth;
+  };
+
+  trimRight = (text) => text.replace(/\s+$/, '');
+
+  createMarkup = (str) => <span className={this.props.lineClassName} dangerouslySetInnerHTML={{ __html: str }} />;
+
+  getLines = () => {
+    const {
+      elements,
+      props: { lines: numLines, ellipsis, trimWhitespace, lineClassName },
+      state: { targetWidth },
+      innerText,
+      measureWidth,
+      onTruncate,
+      trimRight,
+      renderLine,
+      restoreReplacedLinks,
+    } = this;
+
+    const lines = [];
+    const text = innerText(elements.text);
+
+    const textLines = text.split('\n').map((line) => line.split(' '));
+    let didTruncate = true;
+    const ellipsisWidth = this.ellipsisWidth(this.elements.ellipsis);
+
+    for (let line = 1; line <= numLines; line++) {
+      const textWords = textLines[0];
+
+      // Handle newline
+      if (textWords.length === 0) {
+        lines.push();
+        textLines.shift();
+        line -= 1;
+        continue;
+      }
+
+      let resultLine = textWords.join(' ');
+      if (measureWidth(resultLine) <= targetWidth) {
+        if (textLines.length === 1) {
+          // Line is end of text and fits without truncating
+          didTruncate = false;
+
+          resultLine = restoreReplacedLinks(resultLine);
+          lines.push(resultLine);
+
+          break;
+        }
+      }
+
+      if (line === numLines) {
+        // Binary search determining the longest possible line inluding truncate string
+        const textRest = textWords.join(' ');
+
+        let lower = 0;
+        let upper = textRest.length - 1;
+
+        while (lower <= upper) {
+          const middle = Math.floor((lower + upper) / 2);
+
+          const testLine = textRest.slice(0, middle + 1);
+
+          if (measureWidth(testLine) + ellipsisWidth <= targetWidth) {
+            lower = middle + 1;
+          } else {
+            upper = middle - 1;
+          }
+        }
+
+        let lastLineText = textRest.slice(0, lower);
+
+        if (trimWhitespace) {
+          lastLineText = trimRight(lastLineText);
+
+          // Remove blank lines from the end of text
+          while (!lastLineText.length && lines.length) {
+            const prevLine = lines.pop();
+
+            lastLineText = trimRight(prevLine);
+          }
+        }
+
+        if (lastLineText.substr(lastLineText.length - 2) === '][') {
+          lastLineText = lastLineText.substring(0, lastLineText.length - 1);
+        }
+
+        lastLineText = lastLineText.replace(/\[@+$/, '');
+        lastLineText = restoreReplacedLinks(lastLineText);
+
+        resultLine = (
+          <span className={`${lineClassName}-with-symbol`}>
+            {lastLineText}
+            {ellipsis}
+          </span>
+        );
+      } else {
+        // Binary search determining when the line breaks
+        let lower = 0;
+        let upper = textWords.length - 1;
+
+        while (lower <= upper) {
+          const middle = Math.floor((lower + upper) / 2);
+
+          const testLine = textWords.slice(0, middle + 1).join(' ');
+
+          if (measureWidth(testLine) <= targetWidth) {
+            lower = middle + 1;
+          } else {
+            upper = middle - 1;
+          }
+        }
+
+        // The first word of this line is too long to fit it
+        if (lower === 0) {
+          // Jump to processing of last line
+          line = numLines - 1;
+          continue;
+        }
+
+        resultLine = textWords.slice(0, lower).join(' ');
+
+        resultLine = restoreReplacedLinks(resultLine);
+
+        textLines[0].splice(0, lower);
+      }
+
+      lines.push(resultLine);
+    }
+
+    onTruncate(didTruncate);
+
+    return lines.map(renderLine);
+  };
+
+  renderLine = (line, i, arr) => {
+    const { lineClassName } = this.props;
+
+    if (i === arr.length - 1) {
+      return (
+        <span className={`${lineClassName}-wrapper`} key={i}>
+          {line}
+        </span>
+      );
+    }
+    const br = <br key={`${i}br`} />;
+    if (line) {
+      return [
+        <span className={`${lineClassName}-wrapper`} key={i}>
+          {line}
+        </span>,
+        br,
+      ];
+    }
+    return br;
+  };
+
+  render() {
+    const {
+      elements: { target },
+      props: { children, ellipsis, lines, ...spanProps },
+      state: { targetWidth },
+      getLines,
+      onTruncate,
+    } = this;
+
+    let text;
+
+    const mounted = !!(target && targetWidth);
+
+    if (typeof window !== 'undefined' && mounted) {
+      if (lines > 0) {
+        text = getLines();
+      } else {
+        text = children;
+
+        onTruncate(false);
+      }
+    }
+
+    delete spanProps.onTruncate;
+    delete spanProps.trimWhitespace;
+    delete spanProps.lineClassName;
+    delete spanProps.width;
+
+    return (
+      <span
+        {...spanProps}
+        ref={(targetEl) => {
+          this.elements.target = targetEl;
+        }}
+      >
+        <span
+          style={{
+            display: 'block',
+            maxWidth: spanProps.width > 0 ? `${spanProps.width}px` : 'unset',
+          }}
+        >
+          {text}
+        </span>
+        <span
+          ref={(textEl) => {
+            this.elements.text = textEl;
+          }}
+        >
+          {children}
+        </span>
+        <span
+          ref={(ellipsisEl) => {
+            this.elements.ellipsis = ellipsisEl;
+          }}
+          style={this.styles.ellipsis}
+        >
+          {ellipsis}
+        </span>
+      </span>
+    );
+  }
+
+  styles = {
+    ellipsis: {
+      position: 'fixed',
+      visibility: 'hidden',
+      top: 0,
+      left: 0,
+    },
+  };
+}
diff --git a/src/typography/__tests__/typography.test.tsx b/src/typography/__tests__/typography.test.tsx
new file mode 100644
index 000000000..7e3eda766
--- /dev/null
+++ b/src/typography/__tests__/typography.test.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { render, fireEvent, vi, mockDelay } from '@test/utils';
+import { AngryIcon, SmileIcon } from 'tdesign-icons-react';
+import { Text, Title, Paragraph } from '..';
+
+const longTextString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
+
+const shortText = 'TDesign was founded with the principles of open-source collaboration from the beginning.';
+
+describe('Typography 组件测试', () => {
+  const mockGetCanvasContext = vi.spyOn(HTMLCanvasElement.prototype, 'getContext');
+  const mockGetCanvasToDataURL = vi.spyOn(HTMLCanvasElement.prototype, 'toDataURL');
+
+  beforeAll(() => {
+    mockGetCanvasContext.mockReturnValue({
+      font: vi.fn(),
+      measureText: vi.fn(),
+    });
+    mockGetCanvasToDataURL.mockReturnValue('test');
+  });
+
+  test('title 测试', async () => {
+    const { container } = render(<Title>{shortText}</Title>);
+    expect(container.firstChild.innerHTML).toBe(shortText);
+  });
+
+  test('paragraph 测试', async () => {
+    const { container } = render(<Paragraph>{shortText}</Paragraph>);
+    expect(container.firstChild.innerHTML).toBe(shortText);
+  });
+
+  test('text 测试', async () => {
+    const { container } = render(<Text>{shortText}</Text>);
+    expect(container.firstChild.innerHTML).toBe(shortText);
+  });
+
+  test('text code 测试', async () => {
+    const { container } = render(<Text code>{shortText}</Text>);
+    expect(container.querySelector('code').innerHTML).toBe(shortText);
+  });
+
+  window.innerWidth = 1280;
+  test('ellipsis 测试', async () => {
+    const { container } = render(<Paragraph ellipsis>{longTextString}</Paragraph>);
+    expect(container.querySelector('.t-typography-ellipsis-symbol-wrapper')).toHaveTextContent('...');
+  });
+
+  test('text strong ellipsis 测试', async () => {
+    const { container } = render(
+      <Text strong ellipsis>
+        {longTextString}
+      </Text>,
+    );
+    expect(container.querySelector('.t-typography-ellipsis-symbol-wrapper')).toHaveTextContent('...');
+    expect(container.querySelectorAll('strong')).toHaveLength(1);
+  });
+
+  test('title ellipsis 测试', async () => {
+    const { container } = render(<Title ellipsis>{longTextString}</Title>);
+    expect(container.querySelector('.t-typography-ellipsis-symbol-wrapper')).toHaveTextContent('...');
+    expect(container.querySelectorAll('h1')).toHaveLength(1);
+  });
+
+  test('ellipsis expand 测试', async () => {
+    const handleExpand = vi.fn();
+    const { container } = render(
+      <Paragraph ellipsis={{ collapsible: true, onExpand: handleExpand, expandable: true }}>
+        {longTextString}
+      </Paragraph>,
+    );
+    expect(container.querySelector('.t-typography-ellipsis-symbol')).toBeInTheDocument();
+    expect(container.querySelector('.t-typography-ellipsis-symbol').innerHTML).toBe('展开');
+
+    fireEvent.click(container.querySelector('.t-typography-ellipsis-symbol'));
+    expect(handleExpand).toHaveBeenCalled();
+    expect(container.querySelector('.t-typography-ellipsis-symbol').innerHTML).toBe('收起');
+  });
+
+  test('ellipsis expand hover 测试', async () => {
+    const handleExpand = vi.fn();
+    const { container } = render(
+      <Paragraph
+        ellipsis={{
+          collapsible: true,
+          onExpand: handleExpand,
+          expandable: true,
+          tooltipProps: { content: '点击展开' },
+        }}
+      >
+        {longTextString}
+      </Paragraph>,
+    );
+
+    // 模拟鼠标进入
+    fireEvent.mouseEnter(container.querySelector('.t-trigger'));
+    await mockDelay(600);
+    expect(container.querySelector('.t-popup-open')).toBeTruthy();
+  });
+
+  test('copiable 测试', async () => {
+    const handleCopy = vi.fn();
+    const { container } = render(<Text copyable={{ onCopy: handleCopy }}>{shortText}</Text>);
+
+    fireEvent.click(container.querySelector('.t-button'));
+    expect(handleCopy).toHaveBeenCalled();
+  });
+
+  test('copiable suffix 测试', async () => {
+    const { container } = render(
+      <Text copyable={{ suffix: ({ copied }) => (copied ? <SmileIcon /> : <AngryIcon />) }}>{shortText}</Text>,
+    );
+
+    expect(container.querySelector('.t-icon-angry')).toBeTruthy();
+    fireEvent.click(container.querySelector('.t-button'));
+    expect(container.querySelector('.t-icon-smile')).toBeTruthy();
+  });
+});
diff --git a/src/typography/_example/base.jsx b/src/typography/_example/base.jsx
new file mode 100644
index 000000000..9a6cfdbcb
--- /dev/null
+++ b/src/typography/_example/base.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Typography from '../index';
+
+const {Title, Text, Paragraph} = Typography;
+
+export default function BasicTypography() {
+  return (
+    <>
+      <Title>
+        What is TDesign
+      </Title>
+      <Text mark>
+        TDesign is an enterprise-level design system accumulated by Tencent's various business teams.
+      </Text>
+      <Paragraph>
+        <Text strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</Text> Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.
+      </Paragraph>
+      <Title level="h2">
+        Comprehensive
+      </Title>
+      <Paragraph>
+        TDesign Support <Text code>Vue 2</Text>, <Text code>Vue 3</Text>, <Text code>React</Text>, components for Desktop Application and <Text code>Vue 3</Text>, <Text code>Wechat MiniProgram</Text> components for Mobile Application.
+      </Paragraph>
+      <ul>
+        <li>Features</li>
+        <li>Comprehensive
+          <ul>
+            <li>Consistency</li>
+            <li>Usability</li>
+          </ul>
+        </li>
+        <li>Join TDesign </li>
+      </ul>
+
+      <ol>
+        <li>Features</li>
+        <li>Comprehensive
+          <ol type="a">
+            <li>Consistency</li>
+            <li>Usability</li>
+          </ol>
+        </li>
+        <li>Join TDesign</li>
+      </ol>
+    </>
+  );
+}
diff --git a/src/typography/_example/copyable.jsx b/src/typography/_example/copyable.jsx
new file mode 100644
index 000000000..88220a0e0
--- /dev/null
+++ b/src/typography/_example/copyable.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { AngryIcon, SmileIcon } from 'tdesign-icons-react';
+import Typography from '../index';
+
+const textString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
+
+export default function BasicTypography() {
+  return (
+    <>
+      <Typography.Text copyable>
+        This is a copyable text.
+      </Typography.Text>
+      <br />
+      <Typography.Text
+        ellipsis
+        copyable={{
+          text: textString,
+          tooltipProps: {
+            content: 'click to copy'
+          },
+        }}
+        style={{display: 'inline-block', width: '50%'}}
+      >
+        This is a copyable long text. {textString}
+      </Typography.Text>
+      <br />
+      <Typography.Text
+        copyable={{
+          suffix: ({copied}) => copied ? <SmileIcon /> : <AngryIcon />
+        }}
+      >
+        This is a copyable long text with custom suffix.
+      </Typography.Text>
+    </>
+  );
+}
diff --git a/src/typography/_example/ellipsis.jsx b/src/typography/_example/ellipsis.jsx
new file mode 100644
index 000000000..ed8bf01eb
--- /dev/null
+++ b/src/typography/_example/ellipsis.jsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-react';
+import { Paragraph, Text } from '../index';
+import Button from '../../button';
+
+const textString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
+
+const EllipsisExample = () => {
+  const [isExpanded, setIsexpanded] = useState(false);
+  const handleExpand = () => {
+    setIsexpanded(true);
+  }
+
+  return (
+    <>
+      <Paragraph ellipsis>{textString}</Paragraph>
+      <Paragraph
+        ellipsis={{
+          row: 2,
+          suffix: (expaned) => <><Button theme="primary" variant="text" style={{padding: 0, height: '1em'}}>{expaned ? 'less' : 'more'}</Button></>,
+          expandable: true,
+          collapsible: true
+        }}
+      >
+        {textString}
+      </Paragraph>
+      <Text
+        ellipsis={{
+          suffix: (expaned) => expaned ? 'less' : 'more',
+          expandable: false,
+          tooltipProps: {
+            content: 'long long long text'
+          },
+          onExpand: handleExpand,
+        }}
+        style={{width: isExpanded ? '100%' : 300, display: 'block'}}
+      >
+        {textString}
+      </Text>
+      <Text
+        ellipsis
+        strong
+        style={{width: 300, display: 'block'}}
+      >
+        {textString}
+      </Text>
+      <Paragraph
+        ellipsis={{
+          suffix: (expaned) => <span>{expaned ? <ChevronUpIcon /> : <ChevronDownIcon />}</span>,
+          expandable: true,
+        }}
+      >
+        {textString}
+      </Paragraph>
+    </>
+  )
+};
+
+export default EllipsisExample;
diff --git a/src/typography/_example/text.jsx b/src/typography/_example/text.jsx
new file mode 100644
index 000000000..b70324b3d
--- /dev/null
+++ b/src/typography/_example/text.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Space } from 'tdesign-react';
+import Typography from '../index';
+
+const { Text } = Typography;
+
+export default function TextExample() {
+  return (
+    <Space direction="vertical">
+      <Text theme="primary">TDesign (primary)</Text>
+      <Text theme="secondary">TDesign (secondary)</Text>
+      <Text disabled>TDesign (disabled)</Text>
+      <Text theme="success">TDesign (success)</Text>
+      <Text theme="warning">TDesign (warning)</Text>
+      <Text theme="error">TDesign (error)</Text>
+      <Text mark="pink">TDesign (mark)</Text>
+      <Text code>TDesign (code)</Text>
+      <Text keyboard>TDesign (keyboard)</Text>
+      <Text underline>TDesign (underline)</Text>
+      <Text delete>TDesign (delete)</Text>
+      <Text strong>TDesign (strong)</Text>
+      <Text italic>TDesign (italic)</Text>
+    </Space>
+  );
+}
diff --git a/src/typography/_example/title.jsx b/src/typography/_example/title.jsx
new file mode 100644
index 000000000..c44cc7b7d
--- /dev/null
+++ b/src/typography/_example/title.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import Typography from '../index';
+
+const {Title} = Typography;
+
+const TitleExample = () => (
+    <>
+      <Title level="h1">h1. TDesign</Title>
+      <Title level="h2">h2. TDesign</Title>
+      <Title level="h3">h3. TDesign</Title>
+      <Title level="h4">h4. TDesign</Title>
+      <Title level="h5">h5. TDesign</Title>
+      <Title level="h6">h6. TDesign</Title>
+    </>
+  )
+
+export default TitleExample;
diff --git a/src/typography/api.md b/src/typography/api.md
new file mode 100644
index 000000000..420f17e19
--- /dev/null
+++ b/src/typography/api.md
@@ -0,0 +1,3 @@
+### Typography Props
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
diff --git a/src/typography/defaultProps.ts b/src/typography/defaultProps.ts
new file mode 100644
index 000000000..2a427dc0d
--- /dev/null
+++ b/src/typography/defaultProps.ts
@@ -0,0 +1,22 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdTextProps, TdTitleProps, TdParagraphProps } from './type';
+
+export const textDefaultProps: TdTextProps = {
+  code: false,
+  copyable: false,
+  delete: false,
+  disabled: false,
+  ellipsis: false,
+  italic: false,
+  keyboard: false,
+  mark: false,
+  strong: false,
+  underline: false,
+};
+
+export const titleDefaultProps: TdTitleProps = { ellipsis: false, level: 'h1' };
+
+export const paragraphDefaultProps: TdParagraphProps = { ellipsis: false };
diff --git a/src/typography/index.ts b/src/typography/index.ts
new file mode 100644
index 000000000..714105884
--- /dev/null
+++ b/src/typography/index.ts
@@ -0,0 +1,17 @@
+import _Paragraph from './Paragraph';
+import _Text from './Text';
+import _Title from './Title';
+
+import './style/index.js';
+
+export * from './type';
+
+export const Paragraph = _Paragraph;
+export const Text = _Text;
+export const Title = _Title;
+
+export default {
+  Paragraph,
+  Text,
+  Title,
+};
diff --git a/src/typography/style/css.js b/src/typography/style/css.js
new file mode 100644
index 000000000..6a9a4b132
--- /dev/null
+++ b/src/typography/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/typography/style/index.js b/src/typography/style/index.js
new file mode 100644
index 000000000..df223430b
--- /dev/null
+++ b/src/typography/style/index.js
@@ -0,0 +1 @@
+import '../../_common/style/web/components/typography/_index.less';
diff --git a/src/typography/type.ts b/src/typography/type.ts
new file mode 100644
index 000000000..51b33d6b6
--- /dev/null
+++ b/src/typography/type.ts
@@ -0,0 +1,156 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TooltipProps } from '../tooltip';
+import { TNode } from '../common';
+
+export interface TdTextProps {
+  /**
+   * 文本内容，同content
+   */
+  children?: TNode;
+  /**
+   * 是否添加代码样式
+   * @default false
+   */
+  code?: boolean;
+  /**
+   * 是否可复制，可通过配置参数自定义复制操作的具体功能和样式
+   * @default false
+   */
+  copyable?: boolean | TypographyCopyable;
+  /**
+   * 是否添加删除线样式
+   * @default false
+   */
+  delete?: boolean;
+  /**
+   * 是否添加不可用样式
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式
+   * @default false
+   */
+  ellipsis?: boolean | TypographyEllipsis;
+  /**
+   * 文本是否为斜体
+   * @default false
+   */
+  italic?: boolean;
+  /**
+   * 是否添加键盘样式
+   * @default false
+   */
+  keyboard?: boolean;
+  /**
+   * 是否添加标记样式，默认为黄色，可通过配置颜色修改标记样式，如#0052D9
+   * @default false
+   */
+  mark?: string | boolean;
+  /**
+   * 文本是否加粗
+   * @default false
+   */
+  strong?: boolean;
+  /**
+   * 主题
+   */
+  theme?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+  /**
+   * 是否添加下划线样式
+   * @default false
+   */
+  underline?: boolean;
+}
+
+export interface TdTitleProps {
+  /**
+   * 段落内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 段落内容
+   */
+  content?: TNode;
+  /**
+   * 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式
+   * @default false
+   */
+  ellipsis?: boolean | TypographyEllipsis;
+  /**
+   * 标题等级
+   * @default h1
+   */
+  level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+export interface TdParagraphProps {
+  /**
+   * 段落内容，同 content
+   */
+  children?: TNode;
+  /**
+   * 段落内容
+   */
+  content?: TNode;
+  /**
+   * 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式
+   * @default false
+   */
+  ellipsis?: boolean | TypographyEllipsis;
+}
+
+export interface TypographyEllipsis {
+  /**
+   * 展开后是否可以重新收起
+   * @default true
+   */
+  collapsible?: boolean;
+  /**
+   * 是否可展开
+   * @default true
+   */
+  expandable?: boolean;
+  /**
+   * 省略配置默认展示行数
+   * @default 1
+   */
+  row?: number;
+  /**
+   * 自定义省略触发元素，一般用于自定义折叠图标
+   */
+  suffix?: TNode<{ expanded: boolean }>;
+  /**
+   * 光标在省略图标上出现的tooltip的配置
+   */
+  tooltipProps?: TooltipProps;
+  /**
+   * 点击省略按钮的回调
+   */
+  onExpand?: (expanded: boolean) => void;
+}
+
+export interface TypographyCopyable {
+  /**
+   * 复制的文本内容，默认为全部文本
+   * @default ''
+   */
+  text?: string;
+  /**
+   * 自定义复制触发元素，一般用于自定义复制图标
+   */
+  suffix?: TNode<{ copied: boolean }>;
+  /**
+   * 光标在复制图标上出现的tooltip的配置
+   */
+  tooltipProps?: TooltipProps;
+  /**
+   * 点击复制按钮的回调
+   */
+  onCopy?: () => void;
+}
diff --git a/src/typography/typography.en-US.md b/src/typography/typography.en-US.md
new file mode 100644
index 000000000..27477926c
--- /dev/null
+++ b/src/typography/typography.en-US.md
@@ -0,0 +1,62 @@
+:: BASE_DOC ::
+
+## API
+### Text Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+children | TNode | - | children of text。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+code | Boolean | false | add code style | N
+copyable | Boolean / Object | false | add copyable style。Typescript：`boolean \| TypographyCopyable` | N
+delete | Boolean | false | add delete line style | N
+disabled | Boolean | false | add disabled style | N
+ellipsis | Boolean / Object | false | add ellipsis style。Typescript：`boolean \| TypographyEllipsis` | N
+italic | Boolean | false | add italic style | N
+keyboard | Boolean | false | add keyboard style | N
+mark | String / Boolean | false | add mark style | N
+strong | Boolean | false | add bold style | N
+theme | String | - | theme of text。options: primary/secondary/success/warning/error | N
+underline | Boolean | false | add underline style | N
+
+### Title Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+children | TNode | - | children of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+content | TNode | - | content of title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+ellipsis | Boolean / Object | false | add ellipsis style。Typescript：`boolean \| TypographyEllipsis` | N
+level | String | h1 | level of title。options: h1/h2/h3/h4/h5/h6 | N
+
+### Paragraph Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+children | TNode | - | children of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+content | TNode | - | content of paragraph。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+ellipsis | Boolean / Object | false | add ellipsis style。Typescript：`boolean \| TypographyEllipsis` | N
+
+### TypographyEllipsis
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+collapsible | Boolean | true | collapsible after expanding | N
+expandable | Boolean | true | expandable | N
+row | Number | 1 | default row number of ellipsis  | N
+suffix | TElement | - | custom element configuration for ellipsis and collapse icon。Typescript：`TNode<{ expanded: boolean }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+tooltipProps | Object | - | Configuration of the tooltip that appears on the ellipsis icon when the cursor is over it.。Typescript：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N
+onExpand | Function |  | Typescript：`(expanded:boolean) => void`<br/> | N
+
+### TypographyCopyable
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+ text | String | - | copied content | N
+suffix | TElement | - | custom element configuration for copy icon。Typescript：`TNode<{ copied: boolean }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+tooltipProps | Object | - | Configuration of the tooltip that appears on the copy icon when the cursor is over it.。Typescript：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N
+onCopy | Function |  | Typescript：`() => void`<br/> | N
\ No newline at end of file
diff --git a/src/typography/typography.md b/src/typography/typography.md
new file mode 100644
index 000000000..21a5a5a1a
--- /dev/null
+++ b/src/typography/typography.md
@@ -0,0 +1,62 @@
+:: BASE_DOC ::
+
+## API
+### Text Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+children | TNode | - | 文本内容，同content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+code | Boolean | false | 是否添加代码样式 | N
+copyable | Boolean / Object | false | 是否可复制，可通过配置参数自定义复制操作的具体功能和样式。TS 类型：`boolean \| TypographyCopyable` | N
+delete | Boolean | false | 是否添加删除线样式 | N
+disabled | Boolean | false | 是否添加不可用样式 | N
+ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis` | N
+italic | Boolean | false | 文本是否为斜体 | N
+keyboard | Boolean | false | 是否添加键盘样式 | N
+mark | String / Boolean | false | 是否添加标记样式，默认为黄色，可通过配置颜色修改标记样式，如#0052D9 | N
+strong | Boolean | false | 文本是否加粗 | N
+theme | String | - | 主题。可选项：primary/secondary/success/warning/error | N
+underline | Boolean | false | 是否添加下划线样式 | N
+
+### Title Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+children | TNode | - | 段落内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+content | TNode | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis` | N
+level | String | h1 | 标题等级。可选项：h1/h2/h3/h4/h5/h6 | N
+
+### Paragraph Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+children | TNode | - | 段落内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+content | TNode | - | 段落内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+ellipsis | Boolean / Object | false | 是否省略展示，可通过配置参数自定义省略操作的具体功能和样式。TS 类型：`boolean \| TypographyEllipsis` | N
+
+### TypographyEllipsis
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+collapsible | Boolean | true | 展开后是否可以重新收起 | N
+expandable | Boolean | true | 是否可展开 | N
+row | Number | 1 | 省略配置默认展示行数 | N
+suffix | TElement | - | 自定义省略触发元素，一般用于自定义折叠图标。TS 类型：`TNode<{ expanded: boolean }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+tooltipProps | Object | - | 光标在省略图标上出现的tooltip的配置。TS 类型：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N
+onExpand | Function |  | TS 类型：`(expanded:boolean) => void`<br/>点击省略按钮的回调 | N
+
+### TypographyCopyable
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+ text | String | - | 复制的文本内容，默认为全部文本 | N
+suffix | TElement | - | 自定义复制触发元素，一般用于自定义复制图标。TS 类型：`TNode<{ copied: boolean }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+tooltipProps | Object | - | 光标在复制图标上出现的tooltip的配置。TS 类型：`tooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/typography/type.ts) | N
+onCopy | Function |  | TS 类型：`() => void`<br/>点击复制按钮的回调 | N
\ No newline at end of file
diff --git a/src/typography/useEllipsis.tsx b/src/typography/useEllipsis.tsx
new file mode 100644
index 000000000..d4c04c8ed
--- /dev/null
+++ b/src/typography/useEllipsis.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable no-nested-ternary */
+import React, { useState } from 'react';
+
+import { TypographyEllipsis } from './type';
+import Tooltip from '../tooltip';
+import { useLocaleReceiver } from '../locale/LocalReceiver';
+
+export default function useEllipsis(ellipsis: boolean | TypographyEllipsis) {
+  const [local, t] = useLocaleReceiver('typography');
+  const expandText = t(local.expand);
+  const collapseText = t(local.collapse);
+
+  let formattedEllipsis: TypographyEllipsis = {};
+  if (ellipsis) {
+    formattedEllipsis =
+      ellipsis === true
+        ? {
+            row: 1,
+            expandable: false,
+            tooltipProps: null,
+            suffix: () => '',
+            collapsible: true,
+          }
+        : {
+            row: ellipsis.row || 1,
+            expandable: ellipsis.expandable ?? false,
+            tooltipProps: ellipsis.tooltipProps || null,
+            // eslint-disable-next-line no-nested-ternary
+            suffix: (expanded) =>
+              typeof ellipsis?.suffix === 'function'
+                ? ellipsis?.suffix(expanded)
+                : expanded
+                ? collapseText
+                : ellipsis?.expandable
+                ? `${expandText}`
+                : '...',
+            collapsible: ellipsis?.collapsible ?? false,
+          };
+  }
+
+  const [isClamped, setIsClamped] = useState(true);
+  const handleExpand = (expanded: boolean) => {
+    if (typeof expanded !== 'boolean') return;
+    setIsClamped(!expanded);
+    (ellipsis as TypographyEllipsis).onExpand?.(!expanded);
+  };
+
+  const getEllipsisSuffix = () => {
+    if (formattedEllipsis?.tooltipProps) {
+      return <Tooltip {...formattedEllipsis?.tooltipProps}>{formattedEllipsis.suffix?.(!isClamped)}</Tooltip>;
+    }
+    return formattedEllipsis.suffix?.(!isClamped);
+  };
+
+  const ellipsisProps = {
+    lines: formattedEllipsis.row,
+    more: getEllipsisSuffix(),
+    less: getEllipsisSuffix(),
+    onToggleExpand: handleExpand,
+    expandable: formattedEllipsis.expandable,
+    collapsible: formattedEllipsis.collapsible,
+  };
+
+  return { ellipsisProps };
+}

From 7fb11b678f585e89ba3d89f605f30578f38ffd39 Mon Sep 17 00:00:00 2001
From: insekkei <1183448115@qq.com>
Date: Fri, 29 Mar 2024 10:30:49 +0800
Subject: [PATCH 02/20] feat(typography): lint change

---
 src/typography/Ellipsis.tsx    | 21 +++++++++++++--------
 src/typography/Text.tsx        | 17 +++++++++++------
 src/typography/Truncate.tsx    |  3 ++-
 src/typography/useEllipsis.tsx |  1 -
 4 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/typography/Ellipsis.tsx b/src/typography/Ellipsis.tsx
index 25c03bb9a..ce0595bcb 100644
--- a/src/typography/Ellipsis.tsx
+++ b/src/typography/Ellipsis.tsx
@@ -8,12 +8,12 @@ type TdEllipsis = {
   className?: string;
   children: ReactNode;
   lines: number;
-  ellipsisClassName: string;
-  ellipsisPrefix: ReactNode;
+  ellipsisClassName?: string;
+  ellipsisPrefix?: ReactNode;
   onToggleExpand?: (isExpanded: boolean, e: Event) => void;
-  width: number;
+  width?: number;
   onTruncate?: (truncated: boolean) => void;
-  component: string;
+  component: keyof HTMLElementTagNameMap;
   collapsible: boolean;
   expandable: boolean;
   more: ReactNode;
@@ -54,21 +54,26 @@ const Ellipsis = ({
     }
   };
 
-  const truncateRef = useRef();
+  const truncateRef = useRef<Truncate>();
   const [isTruncated, setTruncated] = useState(false);
   const handleTruncate = (truncated) => {
     if (isMountRef.current && truncated !== isTruncated) {
       setTruncated(truncated);
 
-      if (truncated) {
-        truncateRef.current?.onResize();
+      if (truncated && truncateRef.current) {
+        truncateRef.current.onResize?.();
       }
       onTruncate?.(truncated);
     }
   };
 
+  const componentProps = {
+    className,
+    ...rest,
+  };
+
   return (
-    <Component className={className} {...rest}>
+    <Component {...componentProps}>
       <Truncate
         width={width}
         lines={!isExpanded && lines}
diff --git a/src/typography/Text.tsx b/src/typography/Text.tsx
index 3ff74d434..25d7e25d4 100644
--- a/src/typography/Text.tsx
+++ b/src/typography/Text.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useState } from 'react';
+import React, { ReactElement, forwardRef, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { CheckIcon, CopyIcon } from 'tdesign-icons-react';
 import copy from 'copy-to-clipboard';
@@ -47,7 +47,7 @@ const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement
       del: !!deleteProp,
       i: !!italic,
     };
-    return Object.entries(componentMap).find(([, condition]) => !!condition)?.[0];
+    return Object.entries(componentMap).find(([, condition]) => !!condition)?.[0] as keyof HTMLElementTagNameMap;
   };
 
   const currentRef = useRef();
@@ -95,9 +95,9 @@ const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement
     const wrapWithTooltip = (wrapContent) =>
       tooltipProps ? <Tooltip {...tooltipProps}>{wrapContent}</Tooltip> : wrapContent;
 
-    const getSuffix = () => {
+    const getSuffix = (): ReactElement => {
       if (typeof copyProps?.suffix === 'function') {
-        return copyProps.suffix({ copied: isCopied });
+        return copyProps.suffix({ copied: isCopied }) as ReactElement;
       }
       return isCopied ? <CheckIcon /> : <CopyIcon />;
     };
@@ -107,7 +107,13 @@ const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement
         {withChildren ? children : null}
         {copyable
           ? wrapWithTooltip(
-              <Button shape="circle" theme="primary" variant="text" icon={getSuffix()} onClick={handleCopy} />,
+              <Button
+                shape="circle"
+                theme="primary"
+                variant="text"
+                icon={getSuffix() as ReactElement}
+                onClick={handleCopy}
+              />,
             )
           : null}
       </>
@@ -147,7 +153,6 @@ const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement
             [`${prefixCls}--${theme}`]: theme,
             [`${prefixCls}--disabled`]: disabled,
           })}
-          text={children}
           {...rest}
         >
           {children}
diff --git a/src/typography/Truncate.tsx b/src/typography/Truncate.tsx
index a79469438..a4088758c 100644
--- a/src/typography/Truncate.tsx
+++ b/src/typography/Truncate.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable no-param-reassign */
+
 /**
  * LICENSE
  * https://github.com/pablosichert/react-truncate/blob/master/LICENSE.md
@@ -29,6 +30,7 @@ export default class Truncate extends React.Component {
     trimWhitespace: PropTypes.bool,
     width: PropTypes.number,
     onTruncate: PropTypes.func,
+    className: PropTypes.string,
     lineClassName: PropTypes.string,
   };
 
@@ -382,7 +384,6 @@ export default class Truncate extends React.Component {
     delete spanProps.onTruncate;
     delete spanProps.trimWhitespace;
     delete spanProps.lineClassName;
-    delete spanProps.width;
 
     return (
       <span
diff --git a/src/typography/useEllipsis.tsx b/src/typography/useEllipsis.tsx
index d4c04c8ed..75294543d 100644
--- a/src/typography/useEllipsis.tsx
+++ b/src/typography/useEllipsis.tsx
@@ -25,7 +25,6 @@ export default function useEllipsis(ellipsis: boolean | TypographyEllipsis) {
             row: ellipsis.row || 1,
             expandable: ellipsis.expandable ?? false,
             tooltipProps: ellipsis.tooltipProps || null,
-            // eslint-disable-next-line no-nested-ternary
             suffix: (expanded) =>
               typeof ellipsis?.suffix === 'function'
                 ? ellipsis?.suffix(expanded)

From 39381c4f2c24dcfc5e8f088a92e7cf355d383dd4 Mon Sep 17 00:00:00 2001
From: insekkei <1183448115@qq.com>
Date: Fri, 29 Mar 2024 12:36:04 +0800
Subject: [PATCH 03/20] feat(typography): lint change

---
 src/typography/{Truncate.tsx => Truncate.jsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/typography/{Truncate.tsx => Truncate.jsx} (100%)

diff --git a/src/typography/Truncate.tsx b/src/typography/Truncate.jsx
similarity index 100%
rename from src/typography/Truncate.tsx
rename to src/typography/Truncate.jsx

From cb5f7356a93db261b047e7a2ee99c78ac35be1c2 Mon Sep 17 00:00:00 2001
From: insekkei <1183448115@qq.com>
Date: Mon, 1 Apr 2024 18:55:50 +0800
Subject: [PATCH 04/20] feat(typography lint ignore): typography

---
 src/typography/Ellipsis.tsx                   | 1 +
 src/typography/Paragraph.tsx                  | 1 +
 src/typography/Text.tsx                       | 1 +
 src/typography/Title.tsx                      | 1 +
 src/typography/{Truncate.jsx => Truncate.tsx} | 4 ++--
 src/typography/_example/ellipsis.jsx          | 1 +
 src/typography/useEllipsis.tsx                | 1 +
 7 files changed, 8 insertions(+), 2 deletions(-)
 rename src/typography/{Truncate.jsx => Truncate.tsx} (99%)

diff --git a/src/typography/Ellipsis.tsx b/src/typography/Ellipsis.tsx
index ce0595bcb..d8753a622 100644
--- a/src/typography/Ellipsis.tsx
+++ b/src/typography/Ellipsis.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
diff --git a/src/typography/Paragraph.tsx b/src/typography/Paragraph.tsx
index 48670c503..b00202656 100644
--- a/src/typography/Paragraph.tsx
+++ b/src/typography/Paragraph.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import Ellipsis from './Ellipsis';
diff --git a/src/typography/Text.tsx b/src/typography/Text.tsx
index 25d7e25d4..e143e2fbb 100644
--- a/src/typography/Text.tsx
+++ b/src/typography/Text.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { ReactElement, forwardRef, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { CheckIcon, CopyIcon } from 'tdesign-icons-react';
diff --git a/src/typography/Title.tsx b/src/typography/Title.tsx
index c7bf863ce..dee3a6917 100644
--- a/src/typography/Title.tsx
+++ b/src/typography/Title.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import Ellipsis from './Ellipsis';
diff --git a/src/typography/Truncate.jsx b/src/typography/Truncate.tsx
similarity index 99%
rename from src/typography/Truncate.jsx
rename to src/typography/Truncate.tsx
index a4088758c..2186e9bf3 100644
--- a/src/typography/Truncate.jsx
+++ b/src/typography/Truncate.tsx
@@ -1,5 +1,4 @@
-/* eslint-disable no-param-reassign */
-
+// @ts-nocheck
 /**
  * LICENSE
  * https://github.com/pablosichert/react-truncate/blob/master/LICENSE.md
@@ -109,6 +108,7 @@ export default class Truncate extends React.Component {
       item.key = `[${'@'.repeat(item[2].length - 1)}=${i + 1}]`;
       this.replacedLinks.push(item);
 
+      // eslint-disable-next-line no-param-reassign
       content = content.replace(item[0], item.key);
     });
 
diff --git a/src/typography/_example/ellipsis.jsx b/src/typography/_example/ellipsis.jsx
index 24892e44f..8218c6ae3 100644
--- a/src/typography/_example/ellipsis.jsx
+++ b/src/typography/_example/ellipsis.jsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React, { useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-react';
 import { Paragraph, Text } from '../index';
diff --git a/src/typography/useEllipsis.tsx b/src/typography/useEllipsis.tsx
index 75294543d..83c23220d 100644
--- a/src/typography/useEllipsis.tsx
+++ b/src/typography/useEllipsis.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 /* eslint-disable no-nested-ternary */
 import React, { useState } from 'react';
 

From 87477f41fb41a78eabe2f6db71d56e15a0871912 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Mon, 1 Apr 2024 23:48:21 +0800
Subject: [PATCH 05/20] chore: update snapshot

---
 src/_common                                   |    2 +-
 .../__snapshots__/vitest-guide.test.jsx.snap  |    6 +-
 test/snap/__snapshots__/csr.test.jsx.snap     | 1503 +++++++++++++++++
 test/snap/__snapshots__/ssr.test.jsx.snap     |   10 +
 4 files changed, 1517 insertions(+), 4 deletions(-)

diff --git a/src/_common b/src/_common
index 7f457a58a..de804ca25 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 7f457a58ab20afc09a235b7f48784a3c8532cd91
+Subproject commit de804ca255c994ed6d58c7d1e661e248bd11a4b5
diff --git a/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap b/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
index d24171f6d..ea4c0291a 100644
--- a/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
+++ b/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
@@ -925,7 +925,7 @@ exports[`Guide Component > GuideStep.placement is equal to bottom-left 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear-done enter-done"
+    class="t-portal-wrapper appear appear-active"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -1096,7 +1096,7 @@ exports[`Guide Component > GuideStep.stepOverlayClass is equal to t-test-guide-s
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear-done enter-done"
+    class="t-portal-wrapper appear appear-active"
   >
     <div
       class="t-popup t-guide__popup t-test-guide-step-overlay t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -1267,7 +1267,7 @@ exports[`Guide Component > GuideStep.title works fine 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear-done enter-done"
+    class="t-portal-wrapper appear appear-active"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 6d21b1447..5c3f497c5 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -298248,6 +298248,1499 @@ exports[`csr snapshot test > csr test src/tree-select/_example/valuetype.jsx 1`]
 }
 `;
 
+exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.2.0/fonts/index.js"
+    />
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/default-demo/index.js"
+    />
+    <div>
+      <h1
+        class="t-typography"
+      >
+        What is TDesign
+      </h1>
+      <span
+        class="t-typography"
+        level="h1"
+      >
+        <mark>
+          TDesign is an enterprise-level design system accumulated by Tencent's various business teams.
+        </mark>
+      </span>
+      <div
+        class="t-typography"
+      >
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <strong>
+            TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.
+          </strong>
+        </span>
+         Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.
+      </div>
+      <h2
+        class="t-typography"
+      >
+        Comprehensive
+      </h2>
+      <div
+        class="t-typography"
+      >
+        TDesign Support 
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <code>
+            Vue 2
+          </code>
+        </span>
+        , 
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <code>
+            Vue 3
+          </code>
+        </span>
+        , 
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <code>
+            React
+          </code>
+        </span>
+        , components for Desktop Application and 
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <code>
+            Vue 3
+          </code>
+        </span>
+        , 
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <code>
+            Wechat MiniProgram
+          </code>
+        </span>
+         components for Mobile Application.
+      </div>
+      <ul>
+        <li>
+          Features
+        </li>
+        <li>
+          Comprehensive
+          <ul>
+            <li>
+              Consistency
+            </li>
+            <li>
+              Usability
+            </li>
+          </ul>
+        </li>
+        <li>
+          Join TDesign 
+        </li>
+      </ul>
+      <ol>
+        <li>
+          Features
+        </li>
+        <li>
+          Comprehensive
+          <ol
+            type="a"
+          >
+            <li>
+              Consistency
+            </li>
+            <li>
+              Usability
+            </li>
+          </ol>
+        </li>
+        <li>
+          Join TDesign
+        </li>
+      </ol>
+    </div>
+  </body>,
+  "container": <div>
+    <h1
+      class="t-typography"
+    >
+      What is TDesign
+    </h1>
+    <span
+      class="t-typography"
+      level="h1"
+    >
+      <mark>
+        TDesign is an enterprise-level design system accumulated by Tencent's various business teams.
+      </mark>
+    </span>
+    <div
+      class="t-typography"
+    >
+      <span
+        class="t-typography"
+        level="h1"
+      >
+        <strong>
+          TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.
+        </strong>
+      </span>
+       Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.
+    </div>
+    <h2
+      class="t-typography"
+    >
+      Comprehensive
+    </h2>
+    <div
+      class="t-typography"
+    >
+      TDesign Support 
+      <span
+        class="t-typography"
+        level="h1"
+      >
+        <code>
+          Vue 2
+        </code>
+      </span>
+      , 
+      <span
+        class="t-typography"
+        level="h1"
+      >
+        <code>
+          Vue 3
+        </code>
+      </span>
+      , 
+      <span
+        class="t-typography"
+        level="h1"
+      >
+        <code>
+          React
+        </code>
+      </span>
+      , components for Desktop Application and 
+      <span
+        class="t-typography"
+        level="h1"
+      >
+        <code>
+          Vue 3
+        </code>
+      </span>
+      , 
+      <span
+        class="t-typography"
+        level="h1"
+      >
+        <code>
+          Wechat MiniProgram
+        </code>
+      </span>
+       components for Mobile Application.
+    </div>
+    <ul>
+      <li>
+        Features
+      </li>
+      <li>
+        Comprehensive
+        <ul>
+          <li>
+            Consistency
+          </li>
+          <li>
+            Usability
+          </li>
+        </ul>
+      </li>
+      <li>
+        Join TDesign 
+      </li>
+    </ul>
+    <ol>
+      <li>
+        Features
+      </li>
+      <li>
+        Comprehensive
+        <ol
+          type="a"
+        >
+          <li>
+            Consistency
+          </li>
+          <li>
+            Usability
+          </li>
+        </ol>
+      </li>
+      <li>
+        Join TDesign
+      </li>
+    </ol>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/typography/_example/copyable.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.2.0/fonts/index.js"
+    />
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/default-demo/index.js"
+    />
+    <div>
+      <span
+        class=""
+        level="h1"
+      >
+        This is a copyable text.
+        <button
+          class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+          type="button"
+        >
+          <svg
+            class="t-icon t-icon-copy"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </span>
+      <br />
+      <div
+        class=""
+        level="h1"
+        style="display: inline-block; width: 50%;"
+      >
+        <span
+          class="t-typography-ellipsis"
+          width="0"
+        >
+          <span
+            style="display: block; max-width: unset;"
+          />
+          <span>
+            This is a copyable long text. 
+            TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+          </span>
+          <span
+            style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+          >
+            <span
+              class="t-typography-ellipsis-symbol-wrapper"
+            >
+              ...
+              <span
+                class="t-typography-ellipsis-symbol"
+              />
+            </span>
+          </span>
+        </span>
+      </div>
+      <button
+        class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+        type="button"
+      >
+        <svg
+          class="t-icon t-icon-copy"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+      <br />
+      <span
+        class=""
+        level="h1"
+      >
+        This is a copyable long text with custom suffix.
+        <button
+          class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+          type="button"
+        >
+          <svg
+            class="t-icon t-icon-angry"
+            fill="none"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span
+      class=""
+      level="h1"
+    >
+      This is a copyable text.
+      <button
+        class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+        type="button"
+      >
+        <svg
+          class="t-icon t-icon-copy"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+    </span>
+    <br />
+    <div
+      class=""
+      level="h1"
+      style="display: inline-block; width: 50%;"
+    >
+      <span
+        class="t-typography-ellipsis"
+        width="0"
+      >
+        <span
+          style="display: block; max-width: unset;"
+        />
+        <span>
+          This is a copyable long text. 
+          TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+        </span>
+        <span
+          style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+        >
+          <span
+            class="t-typography-ellipsis-symbol-wrapper"
+          >
+            ...
+            <span
+              class="t-typography-ellipsis-symbol"
+            />
+          </span>
+        </span>
+      </span>
+    </div>
+    <button
+      class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+      type="button"
+    >
+      <svg
+        class="t-icon t-icon-copy"
+        fill="none"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z"
+          fill="currentColor"
+        />
+      </svg>
+    </button>
+    <br />
+    <span
+      class=""
+      level="h1"
+    >
+      This is a copyable long text with custom suffix.
+      <button
+        class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+        type="button"
+      >
+        <svg
+          class="t-icon t-icon-angry"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+    </span>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/typography/_example/ellipsis.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.2.0/fonts/index.js"
+    />
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/default-demo/index.js"
+    />
+    <div>
+      <div
+        class="t-typography"
+      >
+        <span
+          class="t-typography-ellipsis"
+          width="0"
+        >
+          <span
+            style="display: block; max-width: unset;"
+          />
+          <span>
+            TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+          </span>
+          <span
+            style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+          >
+            <span
+              class="t-typography-ellipsis-symbol-wrapper"
+            >
+              ...
+              <span
+                class="t-typography-ellipsis-symbol"
+              />
+            </span>
+          </span>
+        </span>
+      </div>
+      <div
+        class="t-typography"
+      >
+        <span
+          class="t-typography-ellipsis"
+          width="0"
+        >
+          <span
+            style="display: block; max-width: unset;"
+          />
+          <span>
+            TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+          </span>
+          <span
+            style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+          >
+            <span
+              class="t-typography-ellipsis-symbol-wrapper"
+            >
+              ...
+              <span
+                class="t-typography-ellipsis-symbol"
+              >
+                <button
+                  class="t-button t-button--theme-primary t-button--variant-text"
+                  style="padding: 0px; height: 1em;"
+                  type="button"
+                >
+                  <span
+                    class="t-button__text"
+                  >
+                    more
+                  </span>
+                </button>
+              </span>
+            </span>
+          </span>
+        </span>
+      </div>
+      <div
+        class=""
+        level="h1"
+        style="width: 300px; display: block;"
+      >
+        <span
+          class="t-typography-ellipsis"
+          width="0"
+        >
+          <span
+            style="display: block; max-width: unset;"
+          />
+          <span>
+            TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+          </span>
+          <span
+            style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+          >
+            <span
+              class="t-typography-ellipsis-symbol-wrapper"
+            >
+              ...
+              <span
+                class="t-typography-ellipsis-symbol"
+              >
+                <span
+                  class="t-trigger"
+                >
+                  more
+                </span>
+              </span>
+            </span>
+          </span>
+        </span>
+      </div>
+      <span
+        class="t-typography"
+        level="h1"
+        style="width: 300px; display: block;"
+      >
+        <strong>
+          <span
+            class="t-typography-ellipsis"
+            width="0"
+          >
+            <span
+              style="display: block; max-width: unset;"
+            />
+            <span>
+              TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+            </span>
+            <span
+              style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+            >
+              <span
+                class="t-typography-ellipsis-symbol-wrapper"
+              >
+                ...
+                <span
+                  class="t-typography-ellipsis-symbol"
+                />
+              </span>
+            </span>
+          </span>
+        </strong>
+      </span>
+      <div
+        class="t-typography"
+      >
+        <span
+          class="t-typography-ellipsis"
+          width="0"
+        >
+          <span
+            style="display: block; max-width: unset;"
+          />
+          <span>
+            TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+          </span>
+          <span
+            style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+          >
+            <span
+              class="t-typography-ellipsis-symbol-wrapper"
+            >
+              ...
+              <span
+                class="t-typography-ellipsis-symbol"
+              >
+                <span>
+                  <svg
+                    class="t-icon t-icon-chevron-down"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </span>
+          </span>
+        </span>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="t-typography"
+    >
+      <span
+        class="t-typography-ellipsis"
+        width="0"
+      >
+        <span
+          style="display: block; max-width: unset;"
+        />
+        <span>
+          TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+        </span>
+        <span
+          style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+        >
+          <span
+            class="t-typography-ellipsis-symbol-wrapper"
+          >
+            ...
+            <span
+              class="t-typography-ellipsis-symbol"
+            />
+          </span>
+        </span>
+      </span>
+    </div>
+    <div
+      class="t-typography"
+    >
+      <span
+        class="t-typography-ellipsis"
+        width="0"
+      >
+        <span
+          style="display: block; max-width: unset;"
+        />
+        <span>
+          TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+        </span>
+        <span
+          style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+        >
+          <span
+            class="t-typography-ellipsis-symbol-wrapper"
+          >
+            ...
+            <span
+              class="t-typography-ellipsis-symbol"
+            >
+              <button
+                class="t-button t-button--theme-primary t-button--variant-text"
+                style="padding: 0px; height: 1em;"
+                type="button"
+              >
+                <span
+                  class="t-button__text"
+                >
+                  more
+                </span>
+              </button>
+            </span>
+          </span>
+        </span>
+      </span>
+    </div>
+    <div
+      class=""
+      level="h1"
+      style="width: 300px; display: block;"
+    >
+      <span
+        class="t-typography-ellipsis"
+        width="0"
+      >
+        <span
+          style="display: block; max-width: unset;"
+        />
+        <span>
+          TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+        </span>
+        <span
+          style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+        >
+          <span
+            class="t-typography-ellipsis-symbol-wrapper"
+          >
+            ...
+            <span
+              class="t-typography-ellipsis-symbol"
+            >
+              <span
+                class="t-trigger"
+              >
+                more
+              </span>
+            </span>
+          </span>
+        </span>
+      </span>
+    </div>
+    <span
+      class="t-typography"
+      level="h1"
+      style="width: 300px; display: block;"
+    >
+      <strong>
+        <span
+          class="t-typography-ellipsis"
+          width="0"
+        >
+          <span
+            style="display: block; max-width: unset;"
+          />
+          <span>
+            TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+          </span>
+          <span
+            style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+          >
+            <span
+              class="t-typography-ellipsis-symbol-wrapper"
+            >
+              ...
+              <span
+                class="t-typography-ellipsis-symbol"
+              />
+            </span>
+          </span>
+        </span>
+      </strong>
+    </span>
+    <div
+      class="t-typography"
+    >
+      <span
+        class="t-typography-ellipsis"
+        width="0"
+      >
+        <span
+          style="display: block; max-width: unset;"
+        />
+        <span>
+          TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
+        </span>
+        <span
+          style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
+        >
+          <span
+            class="t-typography-ellipsis-symbol-wrapper"
+          >
+            ...
+            <span
+              class="t-typography-ellipsis-symbol"
+            >
+              <span>
+                <svg
+                  class="t-icon t-icon-chevron-down"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </span>
+          </span>
+        </span>
+      </span>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.2.0/fonts/index.js"
+    />
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/default-demo/index.js"
+    />
+    <div>
+      <div
+        class="t-space t-space-vertical"
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography--primary"
+            level="h1"
+          >
+            TDesign (primary)
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography--secondary"
+            level="h1"
+          >
+            TDesign (secondary)
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography--disabled"
+            level="h1"
+          >
+            TDesign (disabled)
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography--success"
+            level="h1"
+          >
+            TDesign (success)
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography--warning"
+            level="h1"
+          >
+            TDesign (warning)
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography--error"
+            level="h1"
+          >
+            TDesign (error)
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography"
+            level="h1"
+          >
+            <mark>
+              TDesign (mark)
+            </mark>
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography"
+            level="h1"
+          >
+            <code>
+              TDesign (code)
+            </code>
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography"
+            level="h1"
+          >
+            <kbd>
+              TDesign (keyboard)
+            </kbd>
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography"
+            level="h1"
+          >
+            <u>
+              TDesign (underline)
+            </u>
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography"
+            level="h1"
+          >
+            <del>
+              TDesign (delete)
+            </del>
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography"
+            level="h1"
+          >
+            <strong>
+              TDesign (strong)
+            </strong>
+          </span>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <span
+            class="t-typography"
+            level="h1"
+          >
+            <i>
+              TDesign (italic)
+            </i>
+          </span>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="t-space t-space-vertical"
+      style="gap: 16px;"
+    >
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography--primary"
+          level="h1"
+        >
+          TDesign (primary)
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography--secondary"
+          level="h1"
+        >
+          TDesign (secondary)
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography--disabled"
+          level="h1"
+        >
+          TDesign (disabled)
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography--success"
+          level="h1"
+        >
+          TDesign (success)
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography--warning"
+          level="h1"
+        >
+          TDesign (warning)
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography--error"
+          level="h1"
+        >
+          TDesign (error)
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <mark>
+            TDesign (mark)
+          </mark>
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <code>
+            TDesign (code)
+          </code>
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <kbd>
+            TDesign (keyboard)
+          </kbd>
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <u>
+            TDesign (underline)
+          </u>
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <del>
+            TDesign (delete)
+          </del>
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <strong>
+            TDesign (strong)
+          </strong>
+        </span>
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <span
+          class="t-typography"
+          level="h1"
+        >
+          <i>
+            TDesign (italic)
+          </i>
+        </span>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/typography/_example/title.jsx 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/0.2.0/fonts/index.js"
+    />
+    <script
+      class="t-svg-js-stylesheet--unique-class"
+      src="https://tdesign.gtimg.com/icon/default-demo/index.js"
+    />
+    <div>
+      <h1
+        class="t-typography"
+      >
+        h1. TDesign
+      </h1>
+      <h2
+        class="t-typography"
+      >
+        h2. TDesign
+      </h2>
+      <h3
+        class="t-typography"
+      >
+        h3. TDesign
+      </h3>
+      <h4
+        class="t-typography"
+      >
+        h4. TDesign
+      </h4>
+      <h5
+        class="t-typography"
+      >
+        h5. TDesign
+      </h5>
+      <h6
+        class="t-typography"
+      >
+        h6. TDesign
+      </h6>
+    </div>
+  </body>,
+  "container": <div>
+    <h1
+      class="t-typography"
+    >
+      h1. TDesign
+    </h1>
+    <h2
+      class="t-typography"
+    >
+      h2. TDesign
+    </h2>
+    <h3
+      class="t-typography"
+    >
+      h3. TDesign
+    </h3>
+    <h4
+      class="t-typography"
+    >
+      h4. TDesign
+    </h4>
+    <h5
+      class="t-typography"
+    >
+      h5. TDesign
+    </h5>
+    <h6
+      class="t-typography"
+    >
+      h6. TDesign
+    </h6>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`csr snapshot test > csr test src/upload/_example/base.jsx 1`] = `
 {
   "asFragment": [Function],
@@ -304429,6 +305922,16 @@ exports[`ssr snapshot test > ssr test src/tree-select/_example/valuedisplay.jsx
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/valuetype.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"深圳市\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"深圳市\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"深圳市\\">深圳市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol>"`;
+
+exports[`ssr snapshot test > ssr test src/typography/_example/copyable.jsx 1`] = `"<span class=\\"\\" level=\\"h1\\">This is a copyable text.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button></span><br/><div class=\\"\\" style=\\"display:inline-block;width:50%\\" level=\\"h1\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>This is a copyable long text. <!-- -->TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button><br/><span class=\\"\\" level=\\"h1\\">This is a copyable long text with custom suffix.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-angry\\"><path fill=\\"currentColor\\" d=\\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z\\"></path></svg></button></span>"`;
+
+exports[`ssr snapshot test > ssr test src/typography/_example/ellipsis.jsx 1`] = `"<div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><button style=\\"padding:0;height:1em\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">more</span></button></span></span></span></span></div><div class=\\"\\" style=\\"width:300px;display:block\\" level=\\"h1\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span class=\\"t-trigger\\">more</span></span></span></span></span></div><span class=\\"t-typography\\" style=\\"width:300px;display:block\\" level=\\"h1\\"><strong><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></strong></span><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></span></span></span></span></div>"`;
+
+exports[`ssr snapshot test > ssr test src/typography/_example/text.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><span class=\\"t-typography--primary\\" level=\\"h1\\">TDesign (primary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--secondary\\" level=\\"h1\\">TDesign (secondary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--disabled\\" level=\\"h1\\">TDesign (disabled)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--success\\" level=\\"h1\\">TDesign (success)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--warning\\" level=\\"h1\\">TDesign (warning)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--error\\" level=\\"h1\\">TDesign (error)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign (mark)</mark></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><code>TDesign (code)</code></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><kbd>TDesign (keyboard)</kbd></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><u>TDesign (underline)</u></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><del>TDesign (delete)</del></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign (strong)</strong></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><i>TDesign (italic)</i></span></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/typography/_example/title.jsx 1`] = `"<h1 class=\\"t-typography\\">h1. TDesign</h1><h2 class=\\"t-typography\\">h2. TDesign</h2><h3 class=\\"t-typography\\">h3. TDesign</h3><h4 class=\\"t-typography\\">h4. TDesign</h4><h5 class=\\"t-typography\\">h5. TDesign</h5><h6 class=\\"t-typography\\">h6. TDesign</h6>"`;
+
 exports[`ssr snapshot test > ssr test src/upload/_example/base.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"false\\" checked=\\"\\" value=\\"0\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">单文件上传</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"true\\" value=\\"1\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">多文件上传</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">禁用状态</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">自动上传</span></label></div></div></div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">Upload</span></button></div><small class=\\"t-upload__tips t-size-s t-upload__placeholder\\">要求文件大小在 1M 以内</small></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-upload\\" style=\\"margin-left:40px\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">ReUpload</span></button></div><div class=\\"t-upload__single-display-text t-upload__display-text--margin\\"><a target=\\"_blank\\" href=\\"https://tdesign.gtimg.com/site/source/figma-pc.png\\" class=\\"t-upload__single-name t-link t-link--theme-default t-size-s t-link--hover-color\\">这是一个默认文件</a><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-upload__icon-delete\\"><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></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-upload\\" style=\\"margin-left:60px\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">Upload</span></button></div><small class=\\"t-upload__tips t-size-s t-upload__placeholder\\">文件上传失败示例</small></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/upload/_example/custom-drag.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-cloud-upload\\"><path fill=\\"currentColor\\" d=\\"M4.6 6.28a7.5 7.5 0 0114.8 0 6.5 6.5 0 011.06 12.01l-.9.46-.9-1.78.88-.46a4.5 4.5 0 00-1.23-8.44l-.77-.14-.05-.78a5.5 5.5 0 00-10.98 0l-.05.78-.77.14a4.5 4.5 0 00-1.23 8.44l.89.46-.91 1.78-.9-.46a6.5 6.5 0 011.06-12zm7.4 3.3L17.41 15 16 16.41l-3-3V23h-2v-9.59l-3 3L6.59 15 12 9.59z\\"></path></svg><span class=\\"t-button__text\\">点击上传</span></button></div><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__dragger t-upload__dragger-center\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">自定义拖拽区域</span></button><br/><br/></div></div></div></div></div>"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 5f22005ef..ca2f7565e 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -1166,6 +1166,16 @@ exports[`ssr snapshot test > ssr test src/tree-select/_example/valuedisplay.jsx
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/valuetype.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"深圳市\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"深圳市\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"深圳市\\">深圳市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
+exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol>"`;
+
+exports[`ssr snapshot test > ssr test src/typography/_example/copyable.jsx 1`] = `"<span class=\\"\\" level=\\"h1\\">This is a copyable text.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button></span><br/><div class=\\"\\" style=\\"display:inline-block;width:50%\\" level=\\"h1\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>This is a copyable long text. <!-- -->TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button><br/><span class=\\"\\" level=\\"h1\\">This is a copyable long text with custom suffix.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-angry\\"><path fill=\\"currentColor\\" d=\\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z\\"></path></svg></button></span>"`;
+
+exports[`ssr snapshot test > ssr test src/typography/_example/ellipsis.jsx 1`] = `"<div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><button style=\\"padding:0;height:1em\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">more</span></button></span></span></span></span></div><div class=\\"\\" style=\\"width:300px;display:block\\" level=\\"h1\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span class=\\"t-trigger\\">more</span></span></span></span></span></div><span class=\\"t-typography\\" style=\\"width:300px;display:block\\" level=\\"h1\\"><strong><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></strong></span><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></span></span></span></span></div>"`;
+
+exports[`ssr snapshot test > ssr test src/typography/_example/text.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><span class=\\"t-typography--primary\\" level=\\"h1\\">TDesign (primary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--secondary\\" level=\\"h1\\">TDesign (secondary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--disabled\\" level=\\"h1\\">TDesign (disabled)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--success\\" level=\\"h1\\">TDesign (success)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--warning\\" level=\\"h1\\">TDesign (warning)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--error\\" level=\\"h1\\">TDesign (error)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign (mark)</mark></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><code>TDesign (code)</code></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><kbd>TDesign (keyboard)</kbd></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><u>TDesign (underline)</u></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><del>TDesign (delete)</del></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign (strong)</strong></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><i>TDesign (italic)</i></span></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/typography/_example/title.jsx 1`] = `"<h1 class=\\"t-typography\\">h1. TDesign</h1><h2 class=\\"t-typography\\">h2. TDesign</h2><h3 class=\\"t-typography\\">h3. TDesign</h3><h4 class=\\"t-typography\\">h4. TDesign</h4><h5 class=\\"t-typography\\">h5. TDesign</h5><h6 class=\\"t-typography\\">h6. TDesign</h6>"`;
+
 exports[`ssr snapshot test > ssr test src/upload/_example/base.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"false\\" checked=\\"\\" value=\\"0\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">单文件上传</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"true\\" value=\\"1\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">多文件上传</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">禁用状态</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">自动上传</span></label></div></div></div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">Upload</span></button></div><small class=\\"t-upload__tips t-size-s t-upload__placeholder\\">要求文件大小在 1M 以内</small></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-upload\\" style=\\"margin-left:40px\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">ReUpload</span></button></div><div class=\\"t-upload__single-display-text t-upload__display-text--margin\\"><a target=\\"_blank\\" href=\\"https://tdesign.gtimg.com/site/source/figma-pc.png\\" class=\\"t-upload__single-name t-link t-link--theme-default t-size-s t-link--hover-color\\">这是一个默认文件</a><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-upload__icon-delete\\"><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></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-upload\\" style=\\"margin-left:60px\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">Upload</span></button></div><small class=\\"t-upload__tips t-size-s t-upload__placeholder\\">文件上传失败示例</small></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/upload/_example/custom-drag.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-cloud-upload\\"><path fill=\\"currentColor\\" d=\\"M4.6 6.28a7.5 7.5 0 0114.8 0 6.5 6.5 0 011.06 12.01l-.9.46-.9-1.78.88-.46a4.5 4.5 0 00-1.23-8.44l-.77-.14-.05-.78a5.5 5.5 0 00-10.98 0l-.05.78-.77.14a4.5 4.5 0 00-1.23 8.44l.89.46-.91 1.78-.9-.46a6.5 6.5 0 011.06-12zm7.4 3.3L17.41 15 16 16.41l-3-3V23h-2v-9.59l-3 3L6.59 15 12 9.59z\\"></path></svg><span class=\\"t-button__text\\">点击上传</span></button></div><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__dragger t-upload__dragger-center\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">自定义拖拽区域</span></button><br/><br/></div></div></div></div></div>"`;

From 72f6a185fa02d926a42af0499cc484567f1c64b2 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Mon, 1 Apr 2024 23:56:36 +0800
Subject: [PATCH 06/20] chore: fix build site

---
 package.json                | 2 --
 src/table/_example/base.jsx | 1 -
 2 files changed, 3 deletions(-)

diff --git a/package.json b/package.json
index 545420680..b44f5166e 100644
--- a/package.json
+++ b/package.json
@@ -206,10 +206,8 @@
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "~1.11.4",
     "hoist-non-react-statics": "~3.3.2",
-    "install": "^0.13.0",
     "lodash": "~4.17.15",
     "mitt": "^3.0.0",
-    "npm": "^10.5.0",
     "raf": "~3.4.1",
     "react-is": "^18.2.0",
     "react-lines-ellipsis": "^0.15.4",
diff --git a/src/table/_example/base.jsx b/src/table/_example/base.jsx
index dcbface2e..4353f1dd2 100644
--- a/src/table/_example/base.jsx
+++ b/src/table/_example/base.jsx
@@ -70,7 +70,6 @@ export default function TableBasic() {
       rowClassName={({ rowIndex }) => `${rowIndex}-class`}
       cellEmptyContent={'-'}
       resizable
-      bordered
       // 与pagination对齐
       pagination={{
         defaultCurrent: 2,

From 345e27ea9e0a970e511b92bea9617a8aa7397f83 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Wed, 10 Apr 2024 20:21:36 +0800
Subject: [PATCH 07/20] chore: adjust router list

---
 site/site.config.mjs  | 16 ++++++++--------
 src/_common           |  2 +-
 src/typography/api.md |  3 ---
 3 files changed, 9 insertions(+), 12 deletions(-)
 delete mode 100644 src/typography/api.md

diff --git a/site/site.config.mjs b/site/site.config.mjs
index 1834e6222..b0631bb30 100644
--- a/site/site.config.mjs
+++ b/site/site.config.mjs
@@ -97,6 +97,14 @@ export const docs = [
         component: () => import('tdesign-react/link/link.md'),
         componentEn: () => import('tdesign-react/link/link.en-US.md'),
       },
+      {
+        title: 'Typography 排版',
+        titleEn: 'Typography',
+        name: 'typography',
+        path: '/react/components/typography',
+        component: () => import('tdesign-react/typography/typography.md'),
+        componentEn: () => import('tdesign-react/typography/typography.en-US.md'),
+      },
     ],
   },
   {
@@ -561,14 +569,6 @@ export const docs = [
         component: () => import('tdesign-react/tooltip/tooltip.md'),
         componentEn: () => import('tdesign-react/tooltip/tooltip.en-US.md'),
       },
-      {
-        title: 'Typography 排版',
-        titleEn: 'Typography',
-        name: 'typography',
-        path: '/react/components/typography',
-        component: () => import('tdesign-react/typography/typography.md'),
-        componentEn: () => import('tdesign-react/typography/typography.en-US.md'),
-      },
       {
         title: 'Tree 树',
         titleEn: 'Tree',
diff --git a/src/_common b/src/_common
index de804ca25..78a589aea 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit de804ca255c994ed6d58c7d1e661e248bd11a4b5
+Subproject commit 78a589aea1301c99fab72de56d4439744a897afb
diff --git a/src/typography/api.md b/src/typography/api.md
deleted file mode 100644
index 420f17e19..000000000
--- a/src/typography/api.md
+++ /dev/null
@@ -1,3 +0,0 @@
-### Typography Props
-名称 | 类型 | 默认值 | 说明 | 必传
--- | -- | -- | -- | --

From 84b3d898eab12d9da7097c4e014c198c5b1de3b4 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Wed, 10 Apr 2024 20:24:19 +0800
Subject: [PATCH 08/20] chore: update snapshot

---
 test/snap/__snapshots__/csr.test.jsx.snap | 34 +++++++++++------------
 test/snap/__snapshots__/ssr.test.jsx.snap |  6 ++--
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 7d2c60d9f..877481cfb 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -84136,7 +84136,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/quarter.jsx 1`] =
                   />
                   <input
                     class="t-input__inner"
-                    placeholder="please enter"
+                    placeholder="select quarter"
                     type="text"
                     value=""
                   />
@@ -84185,7 +84185,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/quarter.jsx 1`] =
                     >
                       <input
                         class="t-input__inner"
-                        placeholder="请输入内容"
+                        placeholder="select quarter"
                         type="text"
                         value=""
                       />
@@ -84204,7 +84204,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/quarter.jsx 1`] =
                     >
                       <input
                         class="t-input__inner"
-                        placeholder="请输入内容"
+                        placeholder="select quarter"
                         type="text"
                         value=""
                       />
@@ -84260,7 +84260,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/quarter.jsx 1`] =
                 />
                 <input
                   class="t-input__inner"
-                  placeholder="please enter"
+                  placeholder="select quarter"
                   type="text"
                   value=""
                 />
@@ -84309,7 +84309,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/quarter.jsx 1`] =
                   >
                     <input
                       class="t-input__inner"
-                      placeholder="请输入内容"
+                      placeholder="select quarter"
                       type="text"
                       value=""
                     />
@@ -84328,7 +84328,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/quarter.jsx 1`] =
                   >
                     <input
                       class="t-input__inner"
-                      placeholder="请输入内容"
+                      placeholder="select quarter"
                       type="text"
                       value=""
                     />
@@ -84445,7 +84445,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = `
                   />
                   <input
                     class="t-input__inner"
-                    placeholder="please enter"
+                    placeholder="select week"
                     type="text"
                     value=""
                   />
@@ -84494,7 +84494,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = `
                     >
                       <input
                         class="t-input__inner"
-                        placeholder="请输入内容"
+                        placeholder="select week"
                         type="text"
                         value=""
                       />
@@ -84513,7 +84513,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = `
                     >
                       <input
                         class="t-input__inner"
-                        placeholder="请输入内容"
+                        placeholder="select week"
                         type="text"
                         value=""
                       />
@@ -84569,7 +84569,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = `
                 />
                 <input
                   class="t-input__inner"
-                  placeholder="please enter"
+                  placeholder="select week"
                   type="text"
                   value=""
                 />
@@ -84618,7 +84618,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = `
                   >
                     <input
                       class="t-input__inner"
-                      placeholder="请输入内容"
+                      placeholder="select week"
                       type="text"
                       value=""
                     />
@@ -84637,7 +84637,7 @@ exports[`csr snapshot test > csr test src/date-picker/_example/week.jsx 1`] = `
                   >
                     <input
                       class="t-input__inner"
-                      placeholder="请输入内容"
+                      placeholder="select week"
                       type="text"
                       value=""
                     />
@@ -198542,7 +198542,7 @@ exports[`csr snapshot test > csr test src/table/_example/base.jsx 1`] = `
           class="t-space-item"
         >
           <div
-            class="t-table t-vertical-align-top t-table--bordered t-table--column-resizable"
+            class="t-table t-vertical-align-top t-table--column-resizable"
             style="position: relative;"
           >
             <div
@@ -199296,7 +199296,7 @@ exports[`csr snapshot test > csr test src/table/_example/base.jsx 1`] = `
         class="t-space-item"
       >
         <div
-          class="t-table t-vertical-align-top t-table--bordered t-table--column-resizable"
+          class="t-table t-vertical-align-top t-table--column-resizable"
           style="position: relative;"
         >
           <div
@@ -303664,9 +303664,9 @@ exports[`ssr snapshot test > ssr test src/date-picker/_example/month.jsx 1`] = `
 
 exports[`ssr snapshot test > ssr test src/date-picker/_example/panel.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"border:1px solid var(--td-border-level-2-color);width:fit-content;border-radius:3px\\"><div class=\\"t-date-picker__panel\\"><div class=\\"t-date-picker__panel-content\\"><div class=\\"t-date-picker__panel-date\\"><div class=\\"t-date-picker__header\\"><div class=\\"t-date-picker__header-controller\\"><div class=\\"t-select__wrap t-date-picker__header-controller-month\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-select__wrap t-date-picker__header-controller-year\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination-mini\\"><button title=\\"Last Month\\" type=\\"button\\" class=\\"t-pagination-mini__prev t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></button><button title=\\"Now\\" type=\\"button\\" class=\\"t-pagination-mini__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-round\\"><path fill=\\"currentColor\\" d=\\"M12 6a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1116 0 8 8 0 01-16 0z\\"></path></svg></button><button title=\\"Next Month\\" type=\\"button\\" class=\\"t-pagination-mini__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></button></div></div><div class=\\"t-date-picker__table\\"><table><thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead><tbody><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--first-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">11</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">12</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">13</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">14</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">15</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">16</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">17</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">18</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">19</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">20</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">21</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">22</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">23</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">24</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">25</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">26</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">27</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--now\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--last-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td></tr></tbody></table></div></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"border:1px solid var(--td-border-level-2-color);width:fit-content;border-radius:3px\\"><div class=\\"t-date-picker__panel\\"><div class=\\"t-date-picker__panel-content\\"><div class=\\"t-date-picker__panel-date\\"><div class=\\"t-date-picker__header\\"><div class=\\"t-date-picker__header-controller\\"><div class=\\"t-select__wrap t-date-picker__header-controller-month\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-select__wrap t-date-picker__header-controller-year\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination-mini\\"><button title=\\"Last Month\\" type=\\"button\\" class=\\"t-pagination-mini__prev t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></button><button title=\\"Now\\" type=\\"button\\" class=\\"t-pagination-mini__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-round\\"><path fill=\\"currentColor\\" d=\\"M12 6a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1116 0 8 8 0 01-16 0z\\"></path></svg></button><button title=\\"Next Month\\" type=\\"button\\" class=\\"t-pagination-mini__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></button></div></div><div class=\\"t-date-picker__table\\"><table><thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead><tbody><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--first-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">11</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">12</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">13</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">14</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">15</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">16</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">17</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">18</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">19</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">20</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">21</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">22</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">23</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">24</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">25</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">26</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">27</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--now\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--last-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td></tr></tbody></table></div></div><div class=\\"t-date-picker__panel-time\\"><div class=\\"t-date-picker__panel-time-viewer\\">00:00:00</div><div class=\\"t-time-picker__panel\\"><div class=\\"t-time-picker__panel-section-body\\"><div class=\\"t-time-picker__panel-body\\"><div class=\\"t-time-picker__panel-body-active-mask\\"></div></div></div></div></div></div><div class=\\"t-date-picker__footer t-date-picker__footer--bottom\\"><div class=\\"t-date-picker__presets\\"></div><div type=\\"button\\" disabled=\\"\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-is-disabled t-size-s\\"><span class=\\"t-button__text\\">Confirm</span></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"border:1px solid var(--td-border-level-2-color);width:fit-content;border-radius:3px\\"><div class=\\"t-date-range-picker__panel\\"><div class=\\"t-date-range-picker__panel-content-wrapper\\"><div class=\\"t-date-picker__panel-content\\"><div class=\\"t-date-picker__panel-date\\"><div class=\\"t-date-picker__header\\"><div class=\\"t-date-picker__header-controller\\"><div class=\\"t-select__wrap t-date-picker__header-controller-month\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-select__wrap t-date-picker__header-controller-year\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination-mini\\"><button title=\\"Last Month\\" type=\\"button\\" class=\\"t-pagination-mini__prev t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></button><button title=\\"Now\\" type=\\"button\\" class=\\"t-pagination-mini__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-round\\"><path fill=\\"currentColor\\" d=\\"M12 6a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1116 0 8 8 0 01-16 0z\\"></path></svg></button><button title=\\"Next Month\\" type=\\"button\\" class=\\"t-pagination-mini__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></button></div></div><div class=\\"t-date-picker__table\\"><table><thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead><tbody><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--first-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">11</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">12</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">13</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">14</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">15</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">16</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">17</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">18</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">19</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">20</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">21</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">22</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">23</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">24</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">25</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">26</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">27</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--now\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--last-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td></tr></tbody></table></div></div></div><div class=\\"t-date-picker__panel-content\\"><div class=\\"t-date-picker__panel-date\\"><div class=\\"t-date-picker__header\\"><div class=\\"t-date-picker__header-controller\\"><div class=\\"t-select__wrap t-date-picker__header-controller-month\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-select__wrap t-date-picker__header-controller-year\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination-mini\\"><button title=\\"Last Month\\" type=\\"button\\" class=\\"t-pagination-mini__prev t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></button><button title=\\"Now\\" type=\\"button\\" class=\\"t-pagination-mini__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-round\\"><path fill=\\"currentColor\\" d=\\"M12 6a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1116 0 8 8 0 01-16 0z\\"></path></svg></button><button title=\\"Next Month\\" type=\\"button\\" class=\\"t-pagination-mini__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></button></div></div><div class=\\"t-date-picker__table\\"><table><thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead><tbody><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--first-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">11</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">12</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">13</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">14</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">15</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">16</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">17</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">18</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">19</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">20</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">21</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">22</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">23</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">24</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">25</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">26</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">27</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--last-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td></tr></tbody></table></div></div></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"border:1px solid var(--td-border-level-2-color);width:fit-content;border-radius:3px\\"><div class=\\"t-date-range-picker__panel\\"><div class=\\"t-date-range-picker__panel-content-wrapper\\"><div class=\\"t-date-picker__panel-content\\"><div class=\\"t-date-picker__panel-date\\"><div class=\\"t-date-picker__header\\"><div class=\\"t-date-picker__header-controller\\"><div class=\\"t-select__wrap t-date-picker__header-controller-month\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-select__wrap t-date-picker__header-controller-year\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination-mini\\"><button title=\\"Last Month\\" type=\\"button\\" class=\\"t-pagination-mini__prev t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></button><button title=\\"Now\\" type=\\"button\\" class=\\"t-pagination-mini__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-round\\"><path fill=\\"currentColor\\" d=\\"M12 6a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1116 0 8 8 0 01-16 0z\\"></path></svg></button><button title=\\"Next Month\\" type=\\"button\\" class=\\"t-pagination-mini__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></button></div></div><div class=\\"t-date-picker__table\\"><table><thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead><tbody><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--first-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">11</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">12</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">13</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">14</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">15</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">16</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">17</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">18</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">19</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">20</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">21</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">22</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">23</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">24</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">25</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">26</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">27</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--now\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--last-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td></tr></tbody></table></div></div><div class=\\"t-date-picker__panel-time\\"><div class=\\"t-date-picker__panel-time-viewer\\">00:00:00</div><div class=\\"t-time-picker__panel\\"><div class=\\"t-time-picker__panel-section-body\\"><div class=\\"t-time-picker__panel-body\\"><div class=\\"t-time-picker__panel-body-active-mask\\"></div></div></div></div></div></div></div><div class=\\"t-date-picker__footer t-date-picker__footer--bottom\\"><div class=\\"t-date-picker__presets\\"></div><div type=\\"button\\" disabled=\\"\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-is-disabled t-size-s\\"><span class=\\"t-button__text\\">Confirm</span></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/date-picker/_example/quarter.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please enter\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-is-default t-range-input--suffix\\" value=\\"\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\"> ~ </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/date-picker/_example/quarter.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"select quarter\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-is-default t-range-input--suffix\\" value=\\"\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select quarter\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\"> ~ </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select quarter\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/date-picker/_example/week.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please enter\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-is-default t-range-input--suffix\\" value=\\"\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\"> ~ </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/date-picker/_example/week.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"select week\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-is-default t-range-input--suffix\\" value=\\"\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select week\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\"> ~ </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select week\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/date-picker/_example/year.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"select year\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-is-default t-range-input--suffix\\" value=\\"\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select year\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\"> ~ </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select year\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div></div>"`;
 
@@ -304290,7 +304290,7 @@ exports[`ssr snapshot test > ssr test src/table/_example/affix.jsx 1`] = `"<div
 
 exports[`ssr snapshot test > ssr test src/table/_example/async-loading.jsx 1`] = `"<div><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;load-more&#x27;\\" value=\\"load-more\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">加载更多</span></label><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;loading&#x27;\\" checked=\\"\\" value=\\"loading\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">加载中</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;loading-custom&#x27;\\" value=\\"loading-custom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">自定义加载更多</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;&#x27;\\" value=\\"\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">加载完成</span></label></div><div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:100px\\"/><col style=\\"width:150px\\"/><col style=\\"width:120px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"t-table__row--full t-table__last-full-row\\"><td colSpan=\\"5\\"><div class=\\"\\"><div class=\\"t-table__row-full-element\\"><div class=\\"t-table__async-loading t-is-loading\\"><div class=\\"t-loading t-loading--center t-size-s\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 12 12\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"0\\" y=\\"0\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg><div class=\\"t-loading__text\\">loading...</div></div></div></div></div></td></tr></tbody></table></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/table/_example/base.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">小尺寸</span></label><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">中尺寸</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">大尺寸</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示斑马纹</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示表格边框</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示悬浮效果</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">宽度自适应</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"true\\" value=\\"1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示表头</span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-vertical-align-top t-table--bordered t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:100px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"0-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"1-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"2-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"3-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"4-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"5-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"6-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"7-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"8-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"9-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"10-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"11-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"12-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"13-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"14-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"15-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"16-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"17-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"18-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"19-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"20-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"21-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"22-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"23-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"24-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"25-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"26-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"27-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr></tbody></table></div><div class=\\"t-table__pagination-wrap\\" style=\\"opacity:1\\"><div class=\\"t-table__pagination\\"><div class=\\"t-pagination\\"><div class=\\"t-pagination__total\\">Total 28 items</div><div class=\\"t-pagination__select\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination__btn t-pagination__btn-prev\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></div><ul class=\\"t-pagination__pager\\"><li class=\\"t-pagination__number\\">1</li><li class=\\"t-pagination__number t-is-current\\">2</li><li class=\\"t-pagination__number\\">3</li><li class=\\"t-pagination__number\\">4</li><li class=\\"t-pagination__number\\">5</li><li class=\\"t-pagination__number\\">6</li></ul><div class=\\"t-pagination__btn t-pagination__btn-next\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></div><div class=\\"t-pagination__jump\\">jump to<div class=\\"t-input-adornment\\"><div class=\\"t-input-number t-size-m t-input-number--normal t-pagination__input\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" autoComplete=\\"off\\" value=\\"\\"/></div></div></div><span class=\\"t-input-adornment__append\\"><span class=\\"t-input-adornment__text\\">/ 6 </span></span></div></div></div></div></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/table/_example/base.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">小尺寸</span></label><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">中尺寸</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">大尺寸</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示斑马纹</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示表格边框</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示悬浮效果</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">宽度自适应</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"true\\" value=\\"1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示表头</span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-vertical-align-top t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:100px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"0-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"1-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"2-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"3-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"4-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"5-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"6-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"7-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"8-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"9-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"10-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"11-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"12-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"13-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"14-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"15-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"16-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"17-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"18-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"19-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"20-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"21-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"22-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"23-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"24-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"25-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"26-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"27-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr></tbody></table></div><div class=\\"t-table__pagination-wrap\\" style=\\"opacity:1\\"><div class=\\"t-table__pagination\\"><div class=\\"t-pagination\\"><div class=\\"t-pagination__total\\">Total 28 items</div><div class=\\"t-pagination__select\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination__btn t-pagination__btn-prev\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></div><ul class=\\"t-pagination__pager\\"><li class=\\"t-pagination__number\\">1</li><li class=\\"t-pagination__number t-is-current\\">2</li><li class=\\"t-pagination__number\\">3</li><li class=\\"t-pagination__number\\">4</li><li class=\\"t-pagination__number\\">5</li><li class=\\"t-pagination__number\\">6</li></ul><div class=\\"t-pagination__btn t-pagination__btn-next\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></div><div class=\\"t-pagination__jump\\">jump to<div class=\\"t-input-adornment\\"><div class=\\"t-input-number t-size-m t-input-number--normal t-pagination__input\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" autoComplete=\\"off\\" value=\\"\\"/></div></div></div><span class=\\"t-input-adornment__append\\"><span class=\\"t-input-adornment__text\\">/ 6 </span></span></div></div></div></div></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/table/_example/custom-cell.jsx 1`] = `"<div class=\\"t-table t-table--bordered\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:120px\\"/><col style=\\"width:120px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\"><span style=\\"display:flex;align-items:center\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\" style=\\"margin-right:5px\\"><path fill=\\"currentColor\\" d=\\"M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z\\"></path></svg>申请人</span></div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">审批状态</div></th><th data-colkey=\\"matters\\" class=\\"t-table__th-matters\\"><div class=\\"t-table__th-cell-inner\\">申请事项</div></th><th data-colkey=\\"email\\" class=\\"t-table__th-email\\"><div class=\\"t-table__th-cell-inner\\">邮箱地址</div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\"><div>宣传物料制作费用</div></td><td class=\\"\\"><div>w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\"><div>algolia 服务报销</div></td><td class=\\"\\"><div>r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\"><div>相关周边制作费</div></td><td class=\\"\\"><div>p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\"><div>激励奖品快递费</div></td><td class=\\"\\"><div>w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\"><div>宣传物料制作费用</div></td><td class=\\"\\"><div>r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr></tbody></table></div></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 8b96ad31a..7d49a5363 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -296,9 +296,9 @@ exports[`ssr snapshot test > ssr test src/date-picker/_example/month.jsx 1`] = `
 
 exports[`ssr snapshot test > ssr test src/date-picker/_example/panel.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"border:1px solid var(--td-border-level-2-color);width:fit-content;border-radius:3px\\"><div class=\\"t-date-picker__panel\\"><div class=\\"t-date-picker__panel-content\\"><div class=\\"t-date-picker__panel-date\\"><div class=\\"t-date-picker__header\\"><div class=\\"t-date-picker__header-controller\\"><div class=\\"t-select__wrap t-date-picker__header-controller-month\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-select__wrap t-date-picker__header-controller-year\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination-mini\\"><button title=\\"Last Month\\" type=\\"button\\" class=\\"t-pagination-mini__prev t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></button><button title=\\"Now\\" type=\\"button\\" class=\\"t-pagination-mini__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-round\\"><path fill=\\"currentColor\\" d=\\"M12 6a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1116 0 8 8 0 01-16 0z\\"></path></svg></button><button title=\\"Next Month\\" type=\\"button\\" class=\\"t-pagination-mini__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></button></div></div><div class=\\"t-date-picker__table\\"><table><thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead><tbody><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--first-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">11</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">12</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">13</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">14</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">15</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">16</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">17</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">18</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">19</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">20</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">21</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">22</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">23</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">24</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">25</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">26</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">27</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--now\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--last-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td></tr></tbody></table></div></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"border:1px solid var(--td-border-level-2-color);width:fit-content;border-radius:3px\\"><div class=\\"t-date-picker__panel\\"><div class=\\"t-date-picker__panel-content\\"><div class=\\"t-date-picker__panel-date\\"><div class=\\"t-date-picker__header\\"><div class=\\"t-date-picker__header-controller\\"><div class=\\"t-select__wrap t-date-picker__header-controller-month\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-select__wrap t-date-picker__header-controller-year\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination-mini\\"><button title=\\"Last Month\\" type=\\"button\\" class=\\"t-pagination-mini__prev t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></button><button title=\\"Now\\" type=\\"button\\" class=\\"t-pagination-mini__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-round\\"><path fill=\\"currentColor\\" d=\\"M12 6a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1116 0 8 8 0 01-16 0z\\"></path></svg></button><button title=\\"Next Month\\" type=\\"button\\" class=\\"t-pagination-mini__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></button></div></div><div class=\\"t-date-picker__table\\"><table><thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead><tbody><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--first-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">11</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">12</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">13</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">14</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">15</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">16</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">17</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">18</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">19</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">20</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">21</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">22</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">23</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">24</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">25</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">26</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">27</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--now\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--last-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td></tr></tbody></table></div></div><div class=\\"t-date-picker__panel-time\\"><div class=\\"t-date-picker__panel-time-viewer\\">00:00:00</div><div class=\\"t-time-picker__panel\\"><div class=\\"t-time-picker__panel-section-body\\"><div class=\\"t-time-picker__panel-body\\"><div class=\\"t-time-picker__panel-body-active-mask\\"></div></div></div></div></div></div><div class=\\"t-date-picker__footer t-date-picker__footer--bottom\\"><div class=\\"t-date-picker__presets\\"></div><div type=\\"button\\" disabled=\\"\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-is-disabled t-size-s\\"><span class=\\"t-button__text\\">Confirm</span></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"border:1px solid var(--td-border-level-2-color);width:fit-content;border-radius:3px\\"><div class=\\"t-date-range-picker__panel\\"><div class=\\"t-date-range-picker__panel-content-wrapper\\"><div class=\\"t-date-picker__panel-content\\"><div class=\\"t-date-picker__panel-date\\"><div class=\\"t-date-picker__header\\"><div class=\\"t-date-picker__header-controller\\"><div class=\\"t-select__wrap t-date-picker__header-controller-month\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-select__wrap t-date-picker__header-controller-year\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination-mini\\"><button title=\\"Last Month\\" type=\\"button\\" class=\\"t-pagination-mini__prev t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></button><button title=\\"Now\\" type=\\"button\\" class=\\"t-pagination-mini__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-round\\"><path fill=\\"currentColor\\" d=\\"M12 6a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1116 0 8 8 0 01-16 0z\\"></path></svg></button><button title=\\"Next Month\\" type=\\"button\\" class=\\"t-pagination-mini__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></button></div></div><div class=\\"t-date-picker__table\\"><table><thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead><tbody><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--first-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">11</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">12</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">13</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">14</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">15</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">16</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">17</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">18</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">19</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">20</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">21</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">22</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">23</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">24</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">25</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">26</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">27</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--now\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--last-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td></tr></tbody></table></div></div></div><div class=\\"t-date-picker__panel-content\\"><div class=\\"t-date-picker__panel-date\\"><div class=\\"t-date-picker__header\\"><div class=\\"t-date-picker__header-controller\\"><div class=\\"t-select__wrap t-date-picker__header-controller-month\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-select__wrap t-date-picker__header-controller-year\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination-mini\\"><button title=\\"Last Month\\" type=\\"button\\" class=\\"t-pagination-mini__prev t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></button><button title=\\"Now\\" type=\\"button\\" class=\\"t-pagination-mini__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-round\\"><path fill=\\"currentColor\\" d=\\"M12 6a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1116 0 8 8 0 01-16 0z\\"></path></svg></button><button title=\\"Next Month\\" type=\\"button\\" class=\\"t-pagination-mini__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></button></div></div><div class=\\"t-date-picker__table\\"><table><thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead><tbody><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--first-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">11</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">12</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">13</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">14</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">15</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">16</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">17</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">18</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">19</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">20</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">21</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">22</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">23</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">24</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">25</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">26</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">27</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--last-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td></tr></tbody></table></div></div></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"border:1px solid var(--td-border-level-2-color);width:fit-content;border-radius:3px\\"><div class=\\"t-date-range-picker__panel\\"><div class=\\"t-date-range-picker__panel-content-wrapper\\"><div class=\\"t-date-picker__panel-content\\"><div class=\\"t-date-picker__panel-date\\"><div class=\\"t-date-picker__header\\"><div class=\\"t-date-picker__header-controller\\"><div class=\\"t-select__wrap t-date-picker__header-controller-month\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-select__wrap t-date-picker__header-controller-year\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination-mini\\"><button title=\\"Last Month\\" type=\\"button\\" class=\\"t-pagination-mini__prev t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></button><button title=\\"Now\\" type=\\"button\\" class=\\"t-pagination-mini__current t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-round\\"><path fill=\\"currentColor\\" d=\\"M12 6a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1116 0 8 8 0 01-16 0z\\"></path></svg></button><button title=\\"Next Month\\" type=\\"button\\" class=\\"t-pagination-mini__next t-button t-button--theme-default t-button--variant-text t-button--shape-square t-size-s\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></button></div></div><div class=\\"t-date-picker__table\\"><table><thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead><tbody><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--first-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">11</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">12</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">13</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">14</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">15</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">16</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">17</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">18</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">19</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">20</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">21</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">22</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">23</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">24</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">25</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">26</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">27</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--now\\"><div class=\\"t-date-picker__cell-inner\\">28</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">29</div></td><td class=\\"t-date-picker__cell\\"><div class=\\"t-date-picker__cell-inner\\">30</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--last-day-of-month\\"><div class=\\"t-date-picker__cell-inner\\">31</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">1</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">2</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">3</div></td></tr><tr class=\\"t-date-picker__table-date-row\\"><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">4</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">5</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">6</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">7</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">8</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">9</div></td><td class=\\"t-date-picker__cell t-date-picker__cell--additional\\"><div class=\\"t-date-picker__cell-inner\\">10</div></td></tr></tbody></table></div></div><div class=\\"t-date-picker__panel-time\\"><div class=\\"t-date-picker__panel-time-viewer\\">00:00:00</div><div class=\\"t-time-picker__panel\\"><div class=\\"t-time-picker__panel-section-body\\"><div class=\\"t-time-picker__panel-body\\"><div class=\\"t-time-picker__panel-body-active-mask\\"></div></div></div></div></div></div></div><div class=\\"t-date-picker__footer t-date-picker__footer--bottom\\"><div class=\\"t-date-picker__presets\\"></div><div type=\\"button\\" disabled=\\"\\" class=\\"t-button t-button--theme-primary t-button--variant-base t-is-disabled t-size-s\\"><span class=\\"t-button__text\\">Confirm</span></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/date-picker/_example/quarter.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please enter\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-is-default t-range-input--suffix\\" value=\\"\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\"> ~ </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/date-picker/_example/quarter.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"select quarter\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-is-default t-range-input--suffix\\" value=\\"\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select quarter\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\"> ~ </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select quarter\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/date-picker/_example/week.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please enter\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-is-default t-range-input--suffix\\" value=\\"\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\"> ~ </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"请输入内容\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/date-picker/_example/week.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"select week\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-is-default t-range-input--suffix\\" value=\\"\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select week\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\"> ~ </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select week\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/date-picker/_example/year.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-date-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"select year\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-date-range-picker\\"><div class=\\"t-range-input-popup t-range-input-popup\\"><div class=\\"t-range-input t-is-default t-range-input--suffix\\" value=\\"\\"><div class=\\"t-range-input__inner\\"><div class=\\"t-input__wrap t-range-input__inner-left\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select year\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><div class=\\"t-range-input__inner-separator\\"> ~ </div><div class=\\"t-input__wrap t-range-input__inner-right\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"select year\\" type=\\"text\\" class=\\"t-input__inner\\" value=\\"\\"/></div></div><span class=\\"t-range-input__suffix t-range-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-calendar\\"><path fill=\\"currentColor\\" d=\\"M6 4V1.5h2V4h8V1.5h2V4h4v18H2V4h4zM4 6v3h16V6H4zm16 5H4v9h16v-9z\\"></path></svg></span></div></div></div></div></div></div>"`;
 
@@ -922,7 +922,7 @@ exports[`ssr snapshot test > ssr test src/table/_example/affix.jsx 1`] = `"<div
 
 exports[`ssr snapshot test > ssr test src/table/_example/async-loading.jsx 1`] = `"<div><div class=\\"t-radio-group t-size-m t-radio-group__outline\\"><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;load-more&#x27;\\" value=\\"load-more\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">加载更多</span></label><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;loading&#x27;\\" checked=\\"\\" value=\\"loading\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">加载中</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;loading-custom&#x27;\\" value=\\"loading-custom\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">自定义加载更多</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;&#x27;\\" value=\\"\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">加载完成</span></label></div><div class=\\"t-table\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:100px\\"/><col style=\\"width:150px\\"/><col style=\\"width:120px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"t-table__row--full t-table__last-full-row\\"><td colSpan=\\"5\\"><div class=\\"\\"><div class=\\"t-table__row-full-element\\"><div class=\\"t-table__async-loading t-is-loading\\"><div class=\\"t-loading t-loading--center t-size-s\\"><svg class=\\"t-loading__gradient t-icon-loading\\" viewBox=\\"0 0 12 12\\" version=\\"1.1\\" width=\\"1em\\" height=\\"1em\\" xmlns=\\"http://www.w3.org/2000/svg\\"><foreignObject x=\\"0\\" y=\\"0\\" width=\\"12\\" height=\\"12\\"><div class=\\"t-loading__gradient-conic\\"></div></foreignObject></svg><div class=\\"t-loading__text\\">loading...</div></div></div></div></div></td></tr></tbody></table></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/table/_example/base.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">小尺寸</span></label><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">中尺寸</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">大尺寸</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示斑马纹</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示表格边框</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示悬浮效果</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">宽度自适应</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"true\\" value=\\"1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示表头</span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-vertical-align-top t-table--bordered t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:100px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"0-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"1-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"2-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"3-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"4-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"5-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"6-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"7-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"8-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"9-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"10-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"11-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"12-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"13-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"14-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"15-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"16-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"17-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"18-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"19-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"20-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"21-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"22-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"23-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"24-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"25-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"26-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"27-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr></tbody></table></div><div class=\\"t-table__pagination-wrap\\" style=\\"opacity:1\\"><div class=\\"t-table__pagination\\"><div class=\\"t-pagination\\"><div class=\\"t-pagination__total\\">Total 28 items</div><div class=\\"t-pagination__select\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination__btn t-pagination__btn-prev\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></div><ul class=\\"t-pagination__pager\\"><li class=\\"t-pagination__number\\">1</li><li class=\\"t-pagination__number t-is-current\\">2</li><li class=\\"t-pagination__number\\">3</li><li class=\\"t-pagination__number\\">4</li><li class=\\"t-pagination__number\\">5</li><li class=\\"t-pagination__number\\">6</li></ul><div class=\\"t-pagination__btn t-pagination__btn-next\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></div><div class=\\"t-pagination__jump\\">jump to<div class=\\"t-input-adornment\\"><div class=\\"t-input-number t-size-m t-input-number--normal t-pagination__input\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" autoComplete=\\"off\\" value=\\"\\"/></div></div></div><span class=\\"t-input-adornment__append\\"><span class=\\"t-input-adornment__text\\">/ 6 </span></span></div></div></div></div></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/table/_example/base.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;small&#x27;\\" value=\\"small\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">小尺寸</span></label><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;medium&#x27;\\" checked=\\"\\" value=\\"medium\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">中尺寸</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"&#x27;large&#x27;\\" value=\\"large\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">大尺寸</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示斑马纹</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示表格边框</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示悬浮效果</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"false\\" value=\\"0\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">宽度自适应</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" data-value=\\"true\\" value=\\"1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">显示表头</span></label></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-table t-vertical-align-top t-table--column-resizable\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:100px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\">申请人</div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">申请状态</div></th><th data-colkey=\\"channel\\" class=\\"t-table__th-channel\\"><div class=\\"t-table__th-cell-inner\\">签署方式</div></th><th data-colkey=\\"detail.email\\" class=\\"t-table__th-detail.email\\"><div class=\\"t-table__th-cell-inner\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">邮箱地址</div></div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"0-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"1-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"2-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"3-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"4-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"5-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"6-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"7-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"8-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"9-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"10-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"11-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"12-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"13-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"14-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"15-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"16-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"17-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"18-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"19-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"20-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"21-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"22-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"23-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"24-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"25-class\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"26-class\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\">纸质签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"27-class\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\">电子签署</td><td class=\\"t-table-td--ellipsis\\"><div class=\\"t-table__ellipsis t-text-ellipsis\\">w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr></tbody></table></div><div class=\\"t-table__pagination-wrap\\" style=\\"opacity:1\\"><div class=\\"t-table__pagination\\"><div class=\\"t-pagination\\"><div class=\\"t-pagination__total\\">Total 28 items</div><div class=\\"t-pagination__select\\"><div class=\\"t-select__wrap\\"><div class=\\"t-select t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap t-input--auto-width\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"please select\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"\\"/><span class=\\"t-input__input-pre\\">please select</span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow t-select__right-icon\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div><div class=\\"t-pagination__btn t-pagination__btn-prev\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-left\\"><path fill=\\"currentColor\\" d=\\"M15.91 17.5l-5.5-5.5 5.5-5.5-1.41-1.41L7.59 12l6.91 6.91 1.41-1.41z\\"></path></svg></div><ul class=\\"t-pagination__pager\\"><li class=\\"t-pagination__number\\">1</li><li class=\\"t-pagination__number t-is-current\\">2</li><li class=\\"t-pagination__number\\">3</li><li class=\\"t-pagination__number\\">4</li><li class=\\"t-pagination__number\\">5</li><li class=\\"t-pagination__number\\">6</li></ul><div class=\\"t-pagination__btn t-pagination__btn-next\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-right\\"><path fill=\\"currentColor\\" d=\\"M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z\\"></path></svg></div><div class=\\"t-pagination__jump\\">jump to<div class=\\"t-input-adornment\\"><div class=\\"t-input-number t-size-m t-input-number--normal t-pagination__input\\"><div class=\\"t-input__wrap\\" value=\\"\\"><div class=\\"t-input t-align-left\\"><input placeholder=\\"\\" type=\\"text\\" class=\\"t-input__inner\\" autoComplete=\\"off\\" value=\\"\\"/></div></div></div><span class=\\"t-input-adornment__append\\"><span class=\\"t-input-adornment__text\\">/ 6 </span></span></div></div></div></div></div><div class=\\"t-table__resize-line\\" style=\\"display:none;left:10px;height:10px;bottom:0\\"></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/table/_example/custom-cell.jsx 1`] = `"<div class=\\"t-table t-table--bordered\\" style=\\"position:relative\\"><div class=\\"t-table__content\\"><table class=\\"t-table--layout-fixed\\"><colgroup><col style=\\"width:120px\\"/><col style=\\"width:120px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/><col style=\\"min-width:80px\\"/></colgroup><thead class=\\"t-table__header\\"><tr><th data-colkey=\\"applicant\\" class=\\"t-table__th-applicant\\"><div class=\\"t-table__th-cell-inner\\"><span style=\\"display:flex;align-items:center\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-user\\" style=\\"margin-right:5px\\"><path fill=\\"currentColor\\" d=\\"M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z\\"></path></svg>申请人</span></div></th><th data-colkey=\\"status\\" class=\\"t-table__th-status\\"><div class=\\"t-table__th-cell-inner\\">审批状态</div></th><th data-colkey=\\"matters\\" class=\\"t-table__th-matters\\"><div class=\\"t-table__th-cell-inner\\">申请事项</div></th><th data-colkey=\\"email\\" class=\\"t-table__th-email\\"><div class=\\"t-table__th-cell-inner\\">邮箱地址</div></th><th data-colkey=\\"createTime\\" class=\\"t-table__th-createTime\\"><div class=\\"t-table__th-cell-inner\\">申请时间</div></th></tr></thead><tbody class=\\"t-table__body\\"><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\"><div>宣传物料制作费用</div></td><td class=\\"\\"><div>w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-01-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\"><div>algolia 服务报销</div></td><td class=\\"\\"><div>r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-02-01</td></tr><tr class=\\"\\"><td class=\\"\\">王芳</td><td class=\\"\\"><div class=\\"t-tag t-tag--warning t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z\\"></path></svg><span title=\\"审批过期\\">审批过期</span></div></td><td class=\\"\\"><div>相关周边制作费</div></td><td class=\\"\\"><div>p.cumx@rampblpa.ru</div></td><td class=\\"\\">2022-03-01</td></tr><tr class=\\"\\"><td class=\\"\\">贾明</td><td class=\\"\\"><div class=\\"t-tag t-tag--success t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z\\"></path></svg><span title=\\"审批通过\\">审批通过</span></div></td><td class=\\"\\"><div>激励奖品快递费</div></td><td class=\\"\\"><div>w.cezkdudy@lhll.au</div></td><td class=\\"\\">2022-04-01</td></tr><tr class=\\"\\"><td class=\\"\\">张三</td><td class=\\"\\"><div class=\\"t-tag t-tag--danger t-tag--light-outline t-tag--round\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close-circle-filled\\"><path fill=\\"currentColor\\" d=\\"M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 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.18 10.6 12 7.4 8.82 8.82 7.4z\\"></path></svg><span title=\\"审批失败\\">审批失败</span></div></td><td class=\\"\\"><div>宣传物料制作费用</div></td><td class=\\"\\"><div>r.nmgw@peurezgn.sl</div></td><td class=\\"\\">2022-01-01</td></tr></tbody></table></div></div>"`;
 

From d322b319aabed4c5fa71fb7f51fc94903b1939a1 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Wed, 10 Apr 2024 20:37:22 +0800
Subject: [PATCH 09/20] chore: update snapshot

---
 src/typography/_example/base.jsx          | 34 ++++++++++++-----------
 src/typography/_example/copyable.jsx      | 20 ++++++-------
 src/typography/_example/ellipsis.jsx      | 34 +++++++++++------------
 src/typography/_example/text.jsx          |  5 +---
 src/typography/_example/title.jsx         | 22 +++++++--------
 src/typography/index.ts                   |  6 ----
 test/snap/__snapshots__/csr.test.jsx.snap |  8 ++++--
 test/snap/__snapshots__/ssr.test.jsx.snap |  2 +-
 8 files changed, 61 insertions(+), 70 deletions(-)

diff --git a/src/typography/_example/base.jsx b/src/typography/_example/base.jsx
index 9a6cfdbcb..735c83bf5 100644
--- a/src/typography/_example/base.jsx
+++ b/src/typography/_example/base.jsx
@@ -1,29 +1,30 @@
 import React from 'react';
-import Typography from '../index';
-
-const {Title, Text, Paragraph} = Typography;
+import { Title, Text, Paragraph } from 'tdesign-react';
 
 export default function BasicTypography() {
   return (
     <>
-      <Title>
-        What is TDesign
-      </Title>
-      <Text mark>
-        TDesign is an enterprise-level design system accumulated by Tencent's various business teams.
-      </Text>
+      <Title>What is TDesign</Title>
+      <Text mark>TDesign is an enterprise-level design system accumulated by Tencent's various business teams.</Text>
       <Paragraph>
-        <Text strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</Text> Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.
+        <Text strong>
+          TDesign features a unified design values, consistent design language, and visual style, helping users form
+          continuous and coherent perceptions of the experience.
+        </Text>{' '}
+        Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets,
+        elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates
+        easy extension on top of TDesign, enabling a better alignment with business requirements.
       </Paragraph>
-      <Title level="h2">
-        Comprehensive
-      </Title>
+      <Title level="h2">Comprehensive</Title>
       <Paragraph>
-        TDesign Support <Text code>Vue 2</Text>, <Text code>Vue 3</Text>, <Text code>React</Text>, components for Desktop Application and <Text code>Vue 3</Text>, <Text code>Wechat MiniProgram</Text> components for Mobile Application.
+        TDesign Support <Text code>Vue 2</Text>, <Text code>Vue 3</Text>, <Text code>React</Text>, components for
+        Desktop Application and <Text code>Vue 3</Text>, <Text code>Wechat MiniProgram</Text> components for Mobile
+        Application.
       </Paragraph>
       <ul>
         <li>Features</li>
-        <li>Comprehensive
+        <li>
+          Comprehensive
           <ul>
             <li>Consistency</li>
             <li>Usability</li>
@@ -34,7 +35,8 @@ export default function BasicTypography() {
 
       <ol>
         <li>Features</li>
-        <li>Comprehensive
+        <li>
+          Comprehensive
           <ol type="a">
             <li>Consistency</li>
             <li>Usability</li>
diff --git a/src/typography/_example/copyable.jsx b/src/typography/_example/copyable.jsx
index 88220a0e0..b24461a01 100644
--- a/src/typography/_example/copyable.jsx
+++ b/src/typography/_example/copyable.jsx
@@ -1,36 +1,34 @@
 import React from 'react';
 import { AngryIcon, SmileIcon } from 'tdesign-icons-react';
-import Typography from '../index';
+import { Text } from 'tdesign-react';
 
 const textString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
 
 export default function BasicTypography() {
   return (
     <>
-      <Typography.Text copyable>
-        This is a copyable text.
-      </Typography.Text>
+      <Text copyable>This is a copyable text.</Text>
       <br />
-      <Typography.Text
+      <Text
         ellipsis
         copyable={{
           text: textString,
           tooltipProps: {
-            content: 'click to copy'
+            content: 'click to copy',
           },
         }}
-        style={{display: 'inline-block', width: '50%'}}
+        style={{ display: 'inline-block', width: '50%' }}
       >
         This is a copyable long text. {textString}
-      </Typography.Text>
+      </Text>
       <br />
-      <Typography.Text
+      <Text
         copyable={{
-          suffix: ({copied}) => copied ? <SmileIcon /> : <AngryIcon />
+          suffix: ({ copied }) => (copied ? <SmileIcon /> : <AngryIcon />),
         }}
       >
         This is a copyable long text with custom suffix.
-      </Typography.Text>
+      </Text>
     </>
   );
 }
diff --git a/src/typography/_example/ellipsis.jsx b/src/typography/_example/ellipsis.jsx
index 8218c6ae3..7bf7c2471 100644
--- a/src/typography/_example/ellipsis.jsx
+++ b/src/typography/_example/ellipsis.jsx
@@ -1,16 +1,14 @@
-// @ts-nocheck
 import React, { useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-react';
-import { Paragraph, Text } from '../index';
-import Button from '../../button';
+import { Button, Paragraph, Text } from 'tdesign-react';
 
 const textString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
 
 const EllipsisExample = () => {
-  const [isExpanded, setIsexpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
   const handleExpand = () => {
-    setIsexpanded(true);
-  }
+    setIsExpanded(true);
+  };
 
   return (
     <>
@@ -18,31 +16,33 @@ const EllipsisExample = () => {
       <Paragraph
         ellipsis={{
           row: 2,
-          suffix: (expanded) => <><Button theme="primary" variant="text" style={{padding: 0, height: '1em'}}>{expanded ? 'less' : 'more'}</Button></>,
+          suffix: (expanded) => (
+            <>
+              <Button theme="primary" variant="text" style={{ padding: 0, height: '1em' }}>
+                {expanded ? 'less' : 'more'}
+              </Button>
+            </>
+          ),
           expandable: true,
-          collapsible: true
+          collapsible: true,
         }}
       >
         {textString}
       </Paragraph>
       <Text
         ellipsis={{
-          suffix: (expanded) => expanded ? 'less' : 'more',
+          suffix: (expanded) => (expanded ? 'less' : 'more'),
           expandable: false,
           tooltipProps: {
-            content: 'long long long text'
+            content: 'long long long text',
           },
           onExpand: handleExpand,
         }}
-        style={{width: isExpanded ? '100%' : 300, display: 'block'}}
+        style={{ width: isExpanded ? '100%' : 300, display: 'block' }}
       >
         {textString}
       </Text>
-      <Text
-        ellipsis
-        strong
-        style={{width: 300, display: 'block'}}
-      >
+      <Text ellipsis strong style={{ width: 300, display: 'block' }}>
         {textString}
       </Text>
       <Paragraph
@@ -54,7 +54,7 @@ const EllipsisExample = () => {
         {textString}
       </Paragraph>
     </>
-  )
+  );
 };
 
 export default EllipsisExample;
diff --git a/src/typography/_example/text.jsx b/src/typography/_example/text.jsx
index b70324b3d..e4541afd9 100644
--- a/src/typography/_example/text.jsx
+++ b/src/typography/_example/text.jsx
@@ -1,8 +1,5 @@
 import React from 'react';
-import { Space } from 'tdesign-react';
-import Typography from '../index';
-
-const { Text } = Typography;
+import { Text, Space } from 'tdesign-react';
 
 export default function TextExample() {
   return (
diff --git a/src/typography/_example/title.jsx b/src/typography/_example/title.jsx
index c44cc7b7d..d31fbb22d 100644
--- a/src/typography/_example/title.jsx
+++ b/src/typography/_example/title.jsx
@@ -1,17 +1,15 @@
 import React from 'react';
-import Typography from '../index';
-
-const {Title} = Typography;
+import { Title } from 'tdesign-react';
 
 const TitleExample = () => (
-    <>
-      <Title level="h1">h1. TDesign</Title>
-      <Title level="h2">h2. TDesign</Title>
-      <Title level="h3">h3. TDesign</Title>
-      <Title level="h4">h4. TDesign</Title>
-      <Title level="h5">h5. TDesign</Title>
-      <Title level="h6">h6. TDesign</Title>
-    </>
-  )
+  <>
+    <Title level="h1">h1. TDesign</Title>
+    <Title level="h2">h2. TDesign</Title>
+    <Title level="h3">h3. TDesign</Title>
+    <Title level="h4">h4. TDesign</Title>
+    <Title level="h5">h5. TDesign</Title>
+    <Title level="h6">h6. TDesign</Title>
+  </>
+);
 
 export default TitleExample;
diff --git a/src/typography/index.ts b/src/typography/index.ts
index 714105884..073c473eb 100644
--- a/src/typography/index.ts
+++ b/src/typography/index.ts
@@ -9,9 +9,3 @@ export * from './type';
 export const Paragraph = _Paragraph;
 export const Text = _Text;
 export const Title = _Title;
-
-export default {
-  Paragraph,
-  Text,
-  Title,
-};
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 877481cfb..f7fbe9d06 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -296897,7 +296897,8 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
             TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.
           </strong>
         </span>
-         Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.
+         
+        Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.
       </div>
       <h2
         class="t-typography"
@@ -297021,7 +297022,8 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
           TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.
         </strong>
       </span>
-       Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.
+       
+      Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.
     </div>
     <h2
       class="t-typography"
@@ -304534,7 +304536,7 @@ exports[`ssr snapshot test > ssr test src/tree-select/_example/valuedisplay.jsx
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/valuetype.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"深圳市\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"深圳市\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"深圳市\\">深圳市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> <!-- -->Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol>"`;
 
 exports[`ssr snapshot test > ssr test src/typography/_example/copyable.jsx 1`] = `"<span class=\\"\\" level=\\"h1\\">This is a copyable text.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button></span><br/><div class=\\"\\" style=\\"display:inline-block;width:50%\\" level=\\"h1\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>This is a copyable long text. <!-- -->TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button><br/><span class=\\"\\" level=\\"h1\\">This is a copyable long text with custom suffix.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-angry\\"><path fill=\\"currentColor\\" d=\\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z\\"></path></svg></button></span>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 7d49a5363..ef0a1e419 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -1166,7 +1166,7 @@ exports[`ssr snapshot test > ssr test src/tree-select/_example/valuedisplay.jsx
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/valuetype.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"深圳市\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"深圳市\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"深圳市\\">深圳市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> <!-- -->Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol>"`;
 
 exports[`ssr snapshot test > ssr test src/typography/_example/copyable.jsx 1`] = `"<span class=\\"\\" level=\\"h1\\">This is a copyable text.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button></span><br/><div class=\\"\\" style=\\"display:inline-block;width:50%\\" level=\\"h1\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>This is a copyable long text. <!-- -->TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button><br/><span class=\\"\\" level=\\"h1\\">This is a copyable long text with custom suffix.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-angry\\"><path fill=\\"currentColor\\" d=\\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z\\"></path></svg></button></span>"`;
 

From ee15abaf1c9bef621bffb1e9e11af94b4f5e2096 Mon Sep 17 00:00:00 2001
From: insekkei <1183448115@qq.com>
Date: Tue, 16 Apr 2024 08:40:03 +0800
Subject: [PATCH 10/20] feat(typography): new component

---
 .../__snapshots__/vitest-guide.test.jsx.snap  |  8 +--
 src/typography/Text.tsx                       |  6 +--
 src/typography/_example/base.jsx              | 49 ++++++++++---------
 src/typography/_example/ellipsis.jsx          |  8 ++-
 src/typography/_example/text.jsx              |  2 +-
 src/typography/_example/title.jsx             | 12 ++---
 6 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap b/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
index ea4c0291a..a1fe9649d 100644
--- a/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
+++ b/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
@@ -285,7 +285,7 @@ exports[`Guide Component > GuideStep.children works fine 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear appear-active"
+    class="t-portal-wrapper appear-done enter-done"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -420,7 +420,7 @@ exports[`Guide Component > GuideStep.content works fine 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear appear-active"
+    class="t-portal-wrapper appear-done enter-done"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -562,7 +562,7 @@ exports[`Guide Component > GuideStep.highlightContent works fine 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear appear-active"
+    class="t-portal-wrapper appear-done enter-done"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -1096,7 +1096,7 @@ exports[`Guide Component > GuideStep.stepOverlayClass is equal to t-test-guide-s
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear appear-active"
+    class="t-portal-wrapper appear-done enter-done"
   >
     <div
       class="t-popup t-guide__popup t-test-guide-step-overlay t-popup--animation-enter-active t-popup--animation-enter-to"
diff --git a/src/typography/Text.tsx b/src/typography/Text.tsx
index e143e2fbb..fdee54627 100644
--- a/src/typography/Text.tsx
+++ b/src/typography/Text.tsx
@@ -6,7 +6,7 @@ import copy from 'copy-to-clipboard';
 
 import Ellipsis from './Ellipsis';
 import { TdTextProps } from './type';
-import { titleDefaultProps } from './defaultProps';
+import { textDefaultProps } from './defaultProps';
 import useConfig from '../hooks/useConfig';
 import useEllipsis from './useEllipsis';
 import Button from '../button/Button';
@@ -109,7 +109,7 @@ const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement
         {copyable
           ? wrapWithTooltip(
               <Button
-                shape="circle"
+                shape="square"
                 theme="primary"
                 variant="text"
                 icon={getSuffix() as ReactElement}
@@ -167,6 +167,6 @@ const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement
 export const Text = forwardRef(TextFunction);
 
 Text.displayName = 'Text';
-Text.defaultProps = titleDefaultProps;
+Text.defaultProps = textDefaultProps;
 
 export default Text;
diff --git a/src/typography/_example/base.jsx b/src/typography/_example/base.jsx
index 735c83bf5..5449d841c 100644
--- a/src/typography/_example/base.jsx
+++ b/src/typography/_example/base.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Title, Text, Paragraph } from 'tdesign-react';
+import { Title, Text, Paragraph, Space } from 'tdesign-react';
 
 export default function BasicTypography() {
   return (
@@ -21,29 +21,32 @@ export default function BasicTypography() {
         Desktop Application and <Text code>Vue 3</Text>, <Text code>Wechat MiniProgram</Text> components for Mobile
         Application.
       </Paragraph>
-      <ul>
-        <li>Features</li>
-        <li>
-          Comprehensive
-          <ul>
-            <li>Consistency</li>
-            <li>Usability</li>
-          </ul>
-        </li>
-        <li>Join TDesign </li>
-      </ul>
 
-      <ol>
-        <li>Features</li>
-        <li>
-          Comprehensive
-          <ol type="a">
-            <li>Consistency</li>
-            <li>Usability</li>
-          </ol>
-        </li>
-        <li>Join TDesign</li>
-      </ol>
+      <Space direction="vertical" size={12}>
+        <ul>
+          <li>Features</li>
+          <li>
+            Comprehensive
+            <ul>
+              <li>Consistency</li>
+              <li>Usability</li>
+            </ul>
+          </li>
+          <li>Join TDesign </li>
+        </ul>
+
+        <ol>
+          <li>Features</li>
+          <li>
+            Comprehensive
+            <ol type="a">
+              <li>Consistency</li>
+              <li>Usability</li>
+            </ol>
+          </li>
+          <li>Join TDesign</li>
+        </ol>
+      </Space>
     </>
   );
 }
diff --git a/src/typography/_example/ellipsis.jsx b/src/typography/_example/ellipsis.jsx
index 7bf7c2471..16271ce84 100644
--- a/src/typography/_example/ellipsis.jsx
+++ b/src/typography/_example/ellipsis.jsx
@@ -31,7 +31,7 @@ const EllipsisExample = () => {
       </Paragraph>
       <Text
         ellipsis={{
-          suffix: (expanded) => (expanded ? 'less' : 'more'),
+          suffix: () => '',
           expandable: false,
           tooltipProps: {
             content: 'long long long text',
@@ -42,12 +42,10 @@ const EllipsisExample = () => {
       >
         {textString}
       </Text>
-      <Text ellipsis strong style={{ width: 300, display: 'block' }}>
-        {textString}
-      </Text>
+
       <Paragraph
         ellipsis={{
-          suffix: (expanded) => <span>{expanded ? <ChevronUpIcon /> : <ChevronDownIcon />}</span>,
+          suffix: (expanded) => <span>{expanded ? <ChevronUpIcon size={16} style={{marginLeft: 4}} /> : <ChevronDownIcon style={{marginLeft: 4}} size={16} />}</span>,
           expandable: true,
         }}
       >
diff --git a/src/typography/_example/text.jsx b/src/typography/_example/text.jsx
index e4541afd9..cd50bac5f 100644
--- a/src/typography/_example/text.jsx
+++ b/src/typography/_example/text.jsx
@@ -3,7 +3,7 @@ import { Text, Space } from 'tdesign-react';
 
 export default function TextExample() {
   return (
-    <Space direction="vertical">
+    <Space direction="vertical" size={12}>
       <Text theme="primary">TDesign (primary)</Text>
       <Text theme="secondary">TDesign (secondary)</Text>
       <Text disabled>TDesign (disabled)</Text>
diff --git a/src/typography/_example/title.jsx b/src/typography/_example/title.jsx
index d31fbb22d..23aac9a2b 100644
--- a/src/typography/_example/title.jsx
+++ b/src/typography/_example/title.jsx
@@ -3,12 +3,12 @@ import { Title } from 'tdesign-react';
 
 const TitleExample = () => (
   <>
-    <Title level="h1">h1. TDesign</Title>
-    <Title level="h2">h2. TDesign</Title>
-    <Title level="h3">h3. TDesign</Title>
-    <Title level="h4">h4. TDesign</Title>
-    <Title level="h5">h5. TDesign</Title>
-    <Title level="h6">h6. TDesign</Title>
+    <Title level="h1">H1. TDesign</Title>
+    <Title level="h2">H2. TDesign</Title>
+    <Title level="h3">H3. TDesign</Title>
+    <Title level="h4">H4. TDesign</Title>
+    <Title level="h5">H5. TDesign</Title>
+    <Title level="h6">H6. TDesign</Title>
   </>
 );
 

From bde692a32a2e9dabcc063181672368772e0cb178 Mon Sep 17 00:00:00 2001
From: insekkei <1183448115@qq.com>
Date: Mon, 22 Apr 2024 18:54:00 +0800
Subject: [PATCH 11/20] feat(typography): realize typography

---
 src/typography/useEllipsis.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/typography/useEllipsis.tsx b/src/typography/useEllipsis.tsx
index 83c23220d..dcbbf7205 100644
--- a/src/typography/useEllipsis.tsx
+++ b/src/typography/useEllipsis.tsx
@@ -46,14 +46,24 @@ export default function useEllipsis(ellipsis: boolean | TypographyEllipsis) {
   };
 
   const getEllipsisSuffix = () => {
-    if (formattedEllipsis?.tooltipProps) {
+    const moreOrLess = formattedEllipsis.suffix?.(!isClamped);
+    if (formattedEllipsis?.tooltipProps && !!moreOrLess) {
       return <Tooltip {...formattedEllipsis?.tooltipProps}>{formattedEllipsis.suffix?.(!isClamped)}</Tooltip>;
     }
     return formattedEllipsis.suffix?.(!isClamped);
   };
 
+  const getEllipsisPrefix = () => {
+    const moreOrLess = formattedEllipsis.suffix?.(!isClamped);
+    if (formattedEllipsis?.tooltipProps && !moreOrLess) {
+      return <Tooltip {...formattedEllipsis?.tooltipProps}>...</Tooltip>;
+    }
+    return '...';
+  };
+
   const ellipsisProps = {
     lines: formattedEllipsis.row,
+    ellipsisPrefix: getEllipsisPrefix(),
     more: getEllipsisSuffix(),
     less: getEllipsisSuffix(),
     onToggleExpand: handleExpand,

From f7b8873443918b8c19133b94a0e427cd5673d1cd Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Tue, 23 Apr 2024 10:46:26 +0800
Subject: [PATCH 12/20] chore: update snapshot

---
 .../__snapshots__/vitest-guide.test.jsx.snap  |   8 +-
 test/snap/__snapshots__/csr.test.jsx.snap     | 328 +++++++-----------
 test/snap/__snapshots__/ssr.test.jsx.snap     |  10 +-
 3 files changed, 130 insertions(+), 216 deletions(-)

diff --git a/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap b/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
index a1fe9649d..ea4c0291a 100644
--- a/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
+++ b/src/guide/__tests__/__snapshots__/vitest-guide.test.jsx.snap
@@ -285,7 +285,7 @@ exports[`Guide Component > GuideStep.children works fine 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear-done enter-done"
+    class="t-portal-wrapper appear appear-active"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -420,7 +420,7 @@ exports[`Guide Component > GuideStep.content works fine 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear-done enter-done"
+    class="t-portal-wrapper appear appear-active"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -562,7 +562,7 @@ exports[`Guide Component > GuideStep.highlightContent works fine 1`] = `
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear-done enter-done"
+    class="t-portal-wrapper appear appear-active"
   >
     <div
       class="t-popup t-guide__popup t-popup--animation-enter-active t-popup--animation-enter-to"
@@ -1096,7 +1096,7 @@ exports[`Guide Component > GuideStep.stepOverlayClass is equal to t-test-guide-s
     style="width: 16px; height: 16px; top: -8px; left: -8px;"
   />
   <div
-    class="t-portal-wrapper appear-done enter-done"
+    class="t-portal-wrapper appear appear-active"
   >
     <div
       class="t-popup t-guide__popup t-test-guide-step-overlay t-popup--animation-enter-active t-popup--animation-enter-to"
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index f7fbe9d06..d9d1fb73d 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -296880,7 +296880,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
       </h1>
       <span
         class="t-typography"
-        level="h1"
       >
         <mark>
           TDesign is an enterprise-level design system accumulated by Tencent's various business teams.
@@ -296891,7 +296890,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
       >
         <span
           class="t-typography"
-          level="h1"
         >
           <strong>
             TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.
@@ -296911,7 +296909,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
         TDesign Support 
         <span
           class="t-typography"
-          level="h1"
         >
           <code>
             Vue 2
@@ -296920,7 +296917,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
         , 
         <span
           class="t-typography"
-          level="h1"
         >
           <code>
             Vue 3
@@ -296929,7 +296925,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
         , 
         <span
           class="t-typography"
-          level="h1"
         >
           <code>
             React
@@ -296938,7 +296933,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
         , components for Desktop Application and 
         <span
           class="t-typography"
-          level="h1"
         >
           <code>
             Vue 3
@@ -296947,7 +296941,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
         , 
         <span
           class="t-typography"
-          level="h1"
         >
           <code>
             Wechat MiniProgram
@@ -296955,46 +296948,59 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
         </span>
          components for Mobile Application.
       </div>
-      <ul>
-        <li>
-          Features
-        </li>
-        <li>
-          Comprehensive
+      <div
+        class="t-space t-space-vertical"
+        style="gap: 12px;"
+      >
+        <div
+          class="t-space-item"
+        >
           <ul>
             <li>
-              Consistency
+              Features
             </li>
             <li>
-              Usability
+              Comprehensive
+              <ul>
+                <li>
+                  Consistency
+                </li>
+                <li>
+                  Usability
+                </li>
+              </ul>
+            </li>
+            <li>
+              Join TDesign 
             </li>
           </ul>
-        </li>
-        <li>
-          Join TDesign 
-        </li>
-      </ul>
-      <ol>
-        <li>
-          Features
-        </li>
-        <li>
-          Comprehensive
-          <ol
-            type="a"
-          >
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <ol>
             <li>
-              Consistency
+              Features
+            </li>
+            <li>
+              Comprehensive
+              <ol
+                type="a"
+              >
+                <li>
+                  Consistency
+                </li>
+                <li>
+                  Usability
+                </li>
+              </ol>
             </li>
             <li>
-              Usability
+              Join TDesign
             </li>
           </ol>
-        </li>
-        <li>
-          Join TDesign
-        </li>
-      </ol>
+        </div>
+      </div>
     </div>
   </body>,
   "container": <div>
@@ -297005,7 +297011,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
     </h1>
     <span
       class="t-typography"
-      level="h1"
     >
       <mark>
         TDesign is an enterprise-level design system accumulated by Tencent's various business teams.
@@ -297016,7 +297021,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
     >
       <span
         class="t-typography"
-        level="h1"
       >
         <strong>
           TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.
@@ -297036,7 +297040,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
       TDesign Support 
       <span
         class="t-typography"
-        level="h1"
       >
         <code>
           Vue 2
@@ -297045,7 +297048,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
       , 
       <span
         class="t-typography"
-        level="h1"
       >
         <code>
           Vue 3
@@ -297054,7 +297056,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
       , 
       <span
         class="t-typography"
-        level="h1"
       >
         <code>
           React
@@ -297063,7 +297064,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
       , components for Desktop Application and 
       <span
         class="t-typography"
-        level="h1"
       >
         <code>
           Vue 3
@@ -297072,7 +297072,6 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
       , 
       <span
         class="t-typography"
-        level="h1"
       >
         <code>
           Wechat MiniProgram
@@ -297080,46 +297079,59 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
       </span>
        components for Mobile Application.
     </div>
-    <ul>
-      <li>
-        Features
-      </li>
-      <li>
-        Comprehensive
+    <div
+      class="t-space t-space-vertical"
+      style="gap: 12px;"
+    >
+      <div
+        class="t-space-item"
+      >
         <ul>
           <li>
-            Consistency
+            Features
           </li>
           <li>
-            Usability
+            Comprehensive
+            <ul>
+              <li>
+                Consistency
+              </li>
+              <li>
+                Usability
+              </li>
+            </ul>
+          </li>
+          <li>
+            Join TDesign 
           </li>
         </ul>
-      </li>
-      <li>
-        Join TDesign 
-      </li>
-    </ul>
-    <ol>
-      <li>
-        Features
-      </li>
-      <li>
-        Comprehensive
-        <ol
-          type="a"
-        >
+      </div>
+      <div
+        class="t-space-item"
+      >
+        <ol>
           <li>
-            Consistency
+            Features
           </li>
           <li>
-            Usability
+            Comprehensive
+            <ol
+              type="a"
+            >
+              <li>
+                Consistency
+              </li>
+              <li>
+                Usability
+              </li>
+            </ol>
+          </li>
+          <li>
+            Join TDesign
           </li>
         </ol>
-      </li>
-      <li>
-        Join TDesign
-      </li>
-    </ol>
+      </div>
+    </div>
   </div>,
   "debug": [Function],
   "findAllByAltText": [Function],
@@ -297190,11 +297202,10 @@ exports[`csr snapshot test > csr test src/typography/_example/copyable.jsx 1`] =
     <div>
       <span
         class=""
-        level="h1"
       >
         This is a copyable text.
         <button
-          class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+          class="t-button t-button--theme-primary t-button--variant-text t-button--shape-square"
           type="button"
         >
           <svg
@@ -297214,7 +297225,6 @@ exports[`csr snapshot test > csr test src/typography/_example/copyable.jsx 1`] =
       <br />
       <div
         class=""
-        level="h1"
         style="display: inline-block; width: 50%;"
       >
         <span
@@ -297243,7 +297253,7 @@ exports[`csr snapshot test > csr test src/typography/_example/copyable.jsx 1`] =
         </span>
       </div>
       <button
-        class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+        class="t-button t-button--theme-primary t-button--variant-text t-button--shape-square"
         type="button"
       >
         <svg
@@ -297262,11 +297272,10 @@ exports[`csr snapshot test > csr test src/typography/_example/copyable.jsx 1`] =
       <br />
       <span
         class=""
-        level="h1"
       >
         This is a copyable long text with custom suffix.
         <button
-          class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+          class="t-button t-button--theme-primary t-button--variant-text t-button--shape-square"
           type="button"
         >
           <svg
@@ -297288,11 +297297,10 @@ exports[`csr snapshot test > csr test src/typography/_example/copyable.jsx 1`] =
   "container": <div>
     <span
       class=""
-      level="h1"
     >
       This is a copyable text.
       <button
-        class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+        class="t-button t-button--theme-primary t-button--variant-text t-button--shape-square"
         type="button"
       >
         <svg
@@ -297312,7 +297320,6 @@ exports[`csr snapshot test > csr test src/typography/_example/copyable.jsx 1`] =
     <br />
     <div
       class=""
-      level="h1"
       style="display: inline-block; width: 50%;"
     >
       <span
@@ -297341,7 +297348,7 @@ exports[`csr snapshot test > csr test src/typography/_example/copyable.jsx 1`] =
       </span>
     </div>
     <button
-      class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+      class="t-button t-button--theme-primary t-button--variant-text t-button--shape-square"
       type="button"
     >
       <svg
@@ -297360,11 +297367,10 @@ exports[`csr snapshot test > csr test src/typography/_example/copyable.jsx 1`] =
     <br />
     <span
       class=""
-      level="h1"
     >
       This is a copyable long text with custom suffix.
       <button
-        class="t-button t-button--theme-primary t-button--variant-text t-button--shape-circle"
+        class="t-button t-button--theme-primary t-button--variant-text t-button--shape-square"
         type="button"
       >
         <svg
@@ -297517,7 +297523,6 @@ exports[`csr snapshot test > csr test src/typography/_example/ellipsis.jsx 1`] =
       </div>
       <div
         class=""
-        level="h1"
         style="width: 300px; display: block;"
       >
         <span
@@ -297536,51 +297541,18 @@ exports[`csr snapshot test > csr test src/typography/_example/ellipsis.jsx 1`] =
             <span
               class="t-typography-ellipsis-symbol-wrapper"
             >
-              ...
               <span
-                class="t-typography-ellipsis-symbol"
+                class="t-trigger"
               >
-                <span
-                  class="t-trigger"
-                >
-                  more
-                </span>
+                ...
               </span>
+              <span
+                class="t-typography-ellipsis-symbol"
+              />
             </span>
           </span>
         </span>
       </div>
-      <span
-        class="t-typography"
-        level="h1"
-        style="width: 300px; display: block;"
-      >
-        <strong>
-          <span
-            class="t-typography-ellipsis"
-            width="0"
-          >
-            <span
-              style="display: block; max-width: unset;"
-            />
-            <span>
-              TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
-            </span>
-            <span
-              style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
-            >
-              <span
-                class="t-typography-ellipsis-symbol-wrapper"
-              >
-                ...
-                <span
-                  class="t-typography-ellipsis-symbol"
-                />
-              </span>
-            </span>
-          </span>
-        </strong>
-      </span>
       <div
         class="t-typography"
       >
@@ -297609,6 +297581,7 @@ exports[`csr snapshot test > csr test src/typography/_example/ellipsis.jsx 1`] =
                     class="t-icon t-icon-chevron-down"
                     fill="none"
                     height="1em"
+                    style="margin-left: 4px; font-size: 16px;"
                     viewBox="0 0 24 24"
                     width="1em"
                   >
@@ -297694,7 +297667,6 @@ exports[`csr snapshot test > csr test src/typography/_example/ellipsis.jsx 1`] =
     </div>
     <div
       class=""
-      level="h1"
       style="width: 300px; display: block;"
     >
       <span
@@ -297713,51 +297685,18 @@ exports[`csr snapshot test > csr test src/typography/_example/ellipsis.jsx 1`] =
           <span
             class="t-typography-ellipsis-symbol-wrapper"
           >
-            ...
             <span
-              class="t-typography-ellipsis-symbol"
+              class="t-trigger"
             >
-              <span
-                class="t-trigger"
-              >
-                more
-              </span>
+              ...
             </span>
+            <span
+              class="t-typography-ellipsis-symbol"
+            />
           </span>
         </span>
       </span>
     </div>
-    <span
-      class="t-typography"
-      level="h1"
-      style="width: 300px; display: block;"
-    >
-      <strong>
-        <span
-          class="t-typography-ellipsis"
-          width="0"
-        >
-          <span
-            style="display: block; max-width: unset;"
-          />
-          <span>
-            TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.
-          </span>
-          <span
-            style="position: fixed; visibility: hidden; top: 0px; left: 0px;"
-          >
-            <span
-              class="t-typography-ellipsis-symbol-wrapper"
-            >
-              ...
-              <span
-                class="t-typography-ellipsis-symbol"
-              />
-            </span>
-          </span>
-        </span>
-      </strong>
-    </span>
     <div
       class="t-typography"
     >
@@ -297786,6 +297725,7 @@ exports[`csr snapshot test > csr test src/typography/_example/ellipsis.jsx 1`] =
                   class="t-icon t-icon-chevron-down"
                   fill="none"
                   height="1em"
+                  style="margin-left: 4px; font-size: 16px;"
                   viewBox="0 0 24 24"
                   width="1em"
                 >
@@ -297870,14 +297810,13 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
     <div>
       <div
         class="t-space t-space-vertical"
-        style="gap: 16px;"
+        style="gap: 12px;"
       >
         <div
           class="t-space-item"
         >
           <span
             class="t-typography--primary"
-            level="h1"
           >
             TDesign (primary)
           </span>
@@ -297887,7 +297826,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography--secondary"
-            level="h1"
           >
             TDesign (secondary)
           </span>
@@ -297897,7 +297835,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography--disabled"
-            level="h1"
           >
             TDesign (disabled)
           </span>
@@ -297907,7 +297844,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography--success"
-            level="h1"
           >
             TDesign (success)
           </span>
@@ -297917,7 +297853,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography--warning"
-            level="h1"
           >
             TDesign (warning)
           </span>
@@ -297927,7 +297862,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography--error"
-            level="h1"
           >
             TDesign (error)
           </span>
@@ -297937,7 +297871,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography"
-            level="h1"
           >
             <mark>
               TDesign (mark)
@@ -297949,7 +297882,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography"
-            level="h1"
           >
             <code>
               TDesign (code)
@@ -297961,7 +297893,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography"
-            level="h1"
           >
             <kbd>
               TDesign (keyboard)
@@ -297973,7 +297904,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography"
-            level="h1"
           >
             <u>
               TDesign (underline)
@@ -297985,7 +297915,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography"
-            level="h1"
           >
             <del>
               TDesign (delete)
@@ -297997,7 +297926,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography"
-            level="h1"
           >
             <strong>
               TDesign (strong)
@@ -298009,7 +297937,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
         >
           <span
             class="t-typography"
-            level="h1"
           >
             <i>
               TDesign (italic)
@@ -298022,14 +297949,13 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
   "container": <div>
     <div
       class="t-space t-space-vertical"
-      style="gap: 16px;"
+      style="gap: 12px;"
     >
       <div
         class="t-space-item"
       >
         <span
           class="t-typography--primary"
-          level="h1"
         >
           TDesign (primary)
         </span>
@@ -298039,7 +297965,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography--secondary"
-          level="h1"
         >
           TDesign (secondary)
         </span>
@@ -298049,7 +297974,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography--disabled"
-          level="h1"
         >
           TDesign (disabled)
         </span>
@@ -298059,7 +297983,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography--success"
-          level="h1"
         >
           TDesign (success)
         </span>
@@ -298069,7 +297992,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography--warning"
-          level="h1"
         >
           TDesign (warning)
         </span>
@@ -298079,7 +298001,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography--error"
-          level="h1"
         >
           TDesign (error)
         </span>
@@ -298089,7 +298010,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography"
-          level="h1"
         >
           <mark>
             TDesign (mark)
@@ -298101,7 +298021,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography"
-          level="h1"
         >
           <code>
             TDesign (code)
@@ -298113,7 +298032,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography"
-          level="h1"
         >
           <kbd>
             TDesign (keyboard)
@@ -298125,7 +298043,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography"
-          level="h1"
         >
           <u>
             TDesign (underline)
@@ -298137,7 +298054,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography"
-          level="h1"
         >
           <del>
             TDesign (delete)
@@ -298149,7 +298065,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography"
-          level="h1"
         >
           <strong>
             TDesign (strong)
@@ -298161,7 +298076,6 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
       >
         <span
           class="t-typography"
-          level="h1"
         >
           <i>
             TDesign (italic)
@@ -298240,32 +298154,32 @@ exports[`csr snapshot test > csr test src/typography/_example/title.jsx 1`] = `
       <h1
         class="t-typography"
       >
-        h1. TDesign
+        H1. TDesign
       </h1>
       <h2
         class="t-typography"
       >
-        h2. TDesign
+        H2. TDesign
       </h2>
       <h3
         class="t-typography"
       >
-        h3. TDesign
+        H3. TDesign
       </h3>
       <h4
         class="t-typography"
       >
-        h4. TDesign
+        H4. TDesign
       </h4>
       <h5
         class="t-typography"
       >
-        h5. TDesign
+        H5. TDesign
       </h5>
       <h6
         class="t-typography"
       >
-        h6. TDesign
+        H6. TDesign
       </h6>
     </div>
   </body>,
@@ -298273,32 +298187,32 @@ exports[`csr snapshot test > csr test src/typography/_example/title.jsx 1`] = `
     <h1
       class="t-typography"
     >
-      h1. TDesign
+      H1. TDesign
     </h1>
     <h2
       class="t-typography"
     >
-      h2. TDesign
+      H2. TDesign
     </h2>
     <h3
       class="t-typography"
     >
-      h3. TDesign
+      H3. TDesign
     </h3>
     <h4
       class="t-typography"
     >
-      h4. TDesign
+      H4. TDesign
     </h4>
     <h5
       class="t-typography"
     >
-      h5. TDesign
+      H5. TDesign
     </h5>
     <h6
       class="t-typography"
     >
-      h6. TDesign
+      H6. TDesign
     </h6>
   </div>,
   "debug": [Function],
@@ -304536,15 +304450,15 @@ exports[`ssr snapshot test > ssr test src/tree-select/_example/valuedisplay.jsx
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/valuetype.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"深圳市\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"深圳市\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"深圳市\\">深圳市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> <!-- -->Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> <!-- -->Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><div style=\\"gap:12px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul></div><div class=\\"t-space-item\\"><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/copyable.jsx 1`] = `"<span class=\\"\\" level=\\"h1\\">This is a copyable text.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button></span><br/><div class=\\"\\" style=\\"display:inline-block;width:50%\\" level=\\"h1\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>This is a copyable long text. <!-- -->TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button><br/><span class=\\"\\" level=\\"h1\\">This is a copyable long text with custom suffix.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-angry\\"><path fill=\\"currentColor\\" d=\\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z\\"></path></svg></button></span>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/copyable.jsx 1`] = `"<span class=\\"\\">This is a copyable text.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button></span><br/><div class=\\"\\" style=\\"display:inline-block;width:50%\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>This is a copyable long text. <!-- -->TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button><br/><span class=\\"\\">This is a copyable long text with custom suffix.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-angry\\"><path fill=\\"currentColor\\" d=\\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z\\"></path></svg></button></span>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/ellipsis.jsx 1`] = `"<div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><button style=\\"padding:0;height:1em\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">more</span></button></span></span></span></span></div><div class=\\"\\" style=\\"width:300px;display:block\\" level=\\"h1\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span class=\\"t-trigger\\">more</span></span></span></span></span></div><span class=\\"t-typography\\" style=\\"width:300px;display:block\\" level=\\"h1\\"><strong><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></strong></span><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></span></span></span></span></div>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/ellipsis.jsx 1`] = `"<div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><button style=\\"padding:0;height:1em\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">more</span></button></span></span></span></span></div><div class=\\"\\" style=\\"width:300px;display:block\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\"><span class=\\"t-trigger\\">...</span><span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\" style=\\"margin-left:4px;font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></span></span></span></span></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/text.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><span class=\\"t-typography--primary\\" level=\\"h1\\">TDesign (primary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--secondary\\" level=\\"h1\\">TDesign (secondary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--disabled\\" level=\\"h1\\">TDesign (disabled)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--success\\" level=\\"h1\\">TDesign (success)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--warning\\" level=\\"h1\\">TDesign (warning)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--error\\" level=\\"h1\\">TDesign (error)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign (mark)</mark></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><code>TDesign (code)</code></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><kbd>TDesign (keyboard)</kbd></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><u>TDesign (underline)</u></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><del>TDesign (delete)</del></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign (strong)</strong></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><i>TDesign (italic)</i></span></div></div>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/text.jsx 1`] = `"<div style=\\"gap:12px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><span class=\\"t-typography--primary\\">TDesign (primary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--secondary\\">TDesign (secondary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--disabled\\">TDesign (disabled)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--success\\">TDesign (success)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--warning\\">TDesign (warning)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--error\\">TDesign (error)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><mark>TDesign (mark)</mark></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><code>TDesign (code)</code></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><kbd>TDesign (keyboard)</kbd></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><u>TDesign (underline)</u></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><del>TDesign (delete)</del></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><strong>TDesign (strong)</strong></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><i>TDesign (italic)</i></span></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/title.jsx 1`] = `"<h1 class=\\"t-typography\\">h1. TDesign</h1><h2 class=\\"t-typography\\">h2. TDesign</h2><h3 class=\\"t-typography\\">h3. TDesign</h3><h4 class=\\"t-typography\\">h4. TDesign</h4><h5 class=\\"t-typography\\">h5. TDesign</h5><h6 class=\\"t-typography\\">h6. TDesign</h6>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/title.jsx 1`] = `"<h1 class=\\"t-typography\\">H1. TDesign</h1><h2 class=\\"t-typography\\">H2. TDesign</h2><h3 class=\\"t-typography\\">H3. TDesign</h3><h4 class=\\"t-typography\\">H4. TDesign</h4><h5 class=\\"t-typography\\">H5. TDesign</h5><h6 class=\\"t-typography\\">H6. TDesign</h6>"`;
 
 exports[`ssr snapshot test > ssr test src/upload/_example/base.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"false\\" checked=\\"\\" value=\\"0\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">单文件上传</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"true\\" value=\\"1\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">多文件上传</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">禁用状态</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">自动上传</span></label></div></div></div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">Upload</span></button></div><small class=\\"t-upload__tips t-size-s t-upload__placeholder\\">要求文件大小在 1M 以内</small></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-upload\\" style=\\"margin-left:40px\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">ReUpload</span></button></div><div class=\\"t-upload__single-display-text t-upload__display-text--margin\\"><a target=\\"_blank\\" href=\\"https://tdesign.gtimg.com/site/source/figma-pc.png\\" class=\\"t-upload__single-name t-link t-link--theme-default t-size-s t-link--hover-color\\">这是一个默认文件</a><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-upload__icon-delete\\"><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></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-upload\\" style=\\"margin-left:60px\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">Upload</span></button></div><small class=\\"t-upload__tips t-size-s t-upload__placeholder\\">文件上传失败示例</small></div></div></div></div></div></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index ef0a1e419..cbd90998e 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -1166,15 +1166,15 @@ exports[`ssr snapshot test > ssr test src/tree-select/_example/valuedisplay.jsx
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/valuetype.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"深圳市\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"深圳市\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"深圳市\\">深圳市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> <!-- -->Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\" level=\\"h1\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\" level=\\"h1\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> <!-- -->Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><div style=\\"gap:12px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul></div><div class=\\"t-space-item\\"><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/copyable.jsx 1`] = `"<span class=\\"\\" level=\\"h1\\">This is a copyable text.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button></span><br/><div class=\\"\\" style=\\"display:inline-block;width:50%\\" level=\\"h1\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>This is a copyable long text. <!-- -->TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button><br/><span class=\\"\\" level=\\"h1\\">This is a copyable long text with custom suffix.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-circle\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-angry\\"><path fill=\\"currentColor\\" d=\\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z\\"></path></svg></button></span>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/copyable.jsx 1`] = `"<span class=\\"\\">This is a copyable text.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button></span><br/><div class=\\"\\" style=\\"display:inline-block;width:50%\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>This is a copyable long text. <!-- -->TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button><br/><span class=\\"\\">This is a copyable long text with custom suffix.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-angry\\"><path fill=\\"currentColor\\" d=\\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z\\"></path></svg></button></span>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/ellipsis.jsx 1`] = `"<div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><button style=\\"padding:0;height:1em\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">more</span></button></span></span></span></span></div><div class=\\"\\" style=\\"width:300px;display:block\\" level=\\"h1\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span class=\\"t-trigger\\">more</span></span></span></span></span></div><span class=\\"t-typography\\" style=\\"width:300px;display:block\\" level=\\"h1\\"><strong><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></strong></span><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></span></span></span></span></div>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/ellipsis.jsx 1`] = `"<div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><button style=\\"padding:0;height:1em\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">more</span></button></span></span></span></span></div><div class=\\"\\" style=\\"width:300px;display:block\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\"><span class=\\"t-trigger\\">...</span><span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\" style=\\"margin-left:4px;font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></span></span></span></span></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/text.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><span class=\\"t-typography--primary\\" level=\\"h1\\">TDesign (primary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--secondary\\" level=\\"h1\\">TDesign (secondary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--disabled\\" level=\\"h1\\">TDesign (disabled)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--success\\" level=\\"h1\\">TDesign (success)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--warning\\" level=\\"h1\\">TDesign (warning)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--error\\" level=\\"h1\\">TDesign (error)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><mark>TDesign (mark)</mark></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><code>TDesign (code)</code></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><kbd>TDesign (keyboard)</kbd></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><u>TDesign (underline)</u></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><del>TDesign (delete)</del></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><strong>TDesign (strong)</strong></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\" level=\\"h1\\"><i>TDesign (italic)</i></span></div></div>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/text.jsx 1`] = `"<div style=\\"gap:12px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><span class=\\"t-typography--primary\\">TDesign (primary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--secondary\\">TDesign (secondary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--disabled\\">TDesign (disabled)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--success\\">TDesign (success)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--warning\\">TDesign (warning)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--error\\">TDesign (error)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><mark>TDesign (mark)</mark></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><code>TDesign (code)</code></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><kbd>TDesign (keyboard)</kbd></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><u>TDesign (underline)</u></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><del>TDesign (delete)</del></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><strong>TDesign (strong)</strong></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><i>TDesign (italic)</i></span></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/title.jsx 1`] = `"<h1 class=\\"t-typography\\">h1. TDesign</h1><h2 class=\\"t-typography\\">h2. TDesign</h2><h3 class=\\"t-typography\\">h3. TDesign</h3><h4 class=\\"t-typography\\">h4. TDesign</h4><h5 class=\\"t-typography\\">h5. TDesign</h5><h6 class=\\"t-typography\\">h6. TDesign</h6>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/title.jsx 1`] = `"<h1 class=\\"t-typography\\">H1. TDesign</h1><h2 class=\\"t-typography\\">H2. TDesign</h2><h3 class=\\"t-typography\\">H3. TDesign</h3><h4 class=\\"t-typography\\">H4. TDesign</h4><h5 class=\\"t-typography\\">H5. TDesign</h5><h6 class=\\"t-typography\\">H6. TDesign</h6>"`;
 
 exports[`ssr snapshot test > ssr test src/upload/_example/base.jsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-radio-group t-size-m t-radio-group--filled\\"><label tabindex=\\"0\\" class=\\"t-radio-button t-is-checked\\" checked=\\"\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"false\\" checked=\\"\\" value=\\"0\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">单文件上传</span></label><label tabindex=\\"0\\" class=\\"t-radio-button\\"><input type=\\"radio\\" class=\\"t-radio-button__former\\" tabindex=\\"-1\\" data-value=\\"true\\" value=\\"1\\"/><span class=\\"t-radio-button__input\\"></span><span class=\\"t-radio-button__label\\">多文件上传</span></label><div class=\\"t-radio-group__bg-block\\"></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">禁用状态</span></label></div><div class=\\"t-space-item\\"><label tabindex=\\"0\\" class=\\"t-checkbox t-is-checked\\" checked=\\"\\"><input type=\\"checkbox\\" class=\\"t-checkbox__former\\" tabindex=\\"-1\\" checked=\\"\\"/><span class=\\"t-checkbox__input\\"></span><span class=\\"t-checkbox__label\\">自动上传</span></label></div></div></div><div class=\\"t-space-item\\"><br/></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div class=\\"t-upload\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">Upload</span></button></div><small class=\\"t-upload__tips t-size-s t-upload__placeholder\\">要求文件大小在 1M 以内</small></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-upload\\" style=\\"margin-left:40px\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">ReUpload</span></button></div><div class=\\"t-upload__single-display-text t-upload__display-text--margin\\"><a target=\\"_blank\\" href=\\"https://tdesign.gtimg.com/site/source/figma-pc.png\\" class=\\"t-upload__single-name t-link t-link--theme-default t-size-s t-link--hover-color\\">这是一个默认文件</a><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-upload__icon-delete\\"><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></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-upload\\" style=\\"margin-left:60px\\"><input type=\\"file\\" hidden=\\"\\"/><div class=\\"t-upload__single t-upload__single-file\\"><div class=\\"t-upload__trigger\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-upload\\"><path fill=\\"currentColor\\" d=\\"M12 2.59l5.91 5.91-1.41 1.41-3.5-3.5V16h-2V6.41l-3.5 3.5L6.09 8.5 12 2.59zM4.5 14v5h15v-5h2v7h-19v-7h2z\\"></path></svg><span class=\\"t-button__text\\">Upload</span></button></div><small class=\\"t-upload__tips t-size-s t-upload__placeholder\\">文件上传失败示例</small></div></div></div></div></div></div>"`;
 

From fa46617b0390f45b8d0ca4e46ebae965e348e4ea Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Tue, 23 Apr 2024 11:29:30 +0800
Subject: [PATCH 13/20] chore: update demo

---
 src/typography/Typography.tsx        | 19 +++++++++++++++++++
 src/typography/_example/base.jsx     |  4 +++-
 src/typography/_example/copyable.jsx |  4 +++-
 src/typography/_example/ellipsis.jsx | 14 ++++++++++++--
 src/typography/_example/text.jsx     |  4 +++-
 src/typography/_example/title.jsx    |  4 +++-
 src/typography/index.ts              |  9 +++------
 7 files changed, 46 insertions(+), 12 deletions(-)
 create mode 100644 src/typography/Typography.tsx

diff --git a/src/typography/Typography.tsx b/src/typography/Typography.tsx
new file mode 100644
index 000000000..3c8fe6410
--- /dev/null
+++ b/src/typography/Typography.tsx
@@ -0,0 +1,19 @@
+import Text from './Text';
+import Title from './Title';
+import Paragraph from './Paragraph';
+
+const Typography: {
+  Text: typeof Text;
+  Title: typeof Title;
+  Paragraph: typeof Paragraph;
+} = () => null;
+
+Typography.Text = Text;
+Typography.Title = Title;
+Typography.Paragraph = Paragraph;
+
+Text.displayName = 'Text';
+Paragraph.displayName = 'Paragraph';
+Title.displayName = 'Title';
+
+export default Typography;
diff --git a/src/typography/_example/base.jsx b/src/typography/_example/base.jsx
index 5449d841c..0cc41f485 100644
--- a/src/typography/_example/base.jsx
+++ b/src/typography/_example/base.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { Title, Text, Paragraph, Space } from 'tdesign-react';
+import { Typography, Space } from 'tdesign-react';
+
+const { Title, Text, Paragraph } = Typography;
 
 export default function BasicTypography() {
   return (
diff --git a/src/typography/_example/copyable.jsx b/src/typography/_example/copyable.jsx
index b24461a01..84c666b3d 100644
--- a/src/typography/_example/copyable.jsx
+++ b/src/typography/_example/copyable.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { AngryIcon, SmileIcon } from 'tdesign-icons-react';
-import { Text } from 'tdesign-react';
+import { Typography } from 'tdesign-react';
+
+const { Text } = Typography;
 
 const textString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
 
diff --git a/src/typography/_example/ellipsis.jsx b/src/typography/_example/ellipsis.jsx
index 16271ce84..1e77bd635 100644
--- a/src/typography/_example/ellipsis.jsx
+++ b/src/typography/_example/ellipsis.jsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-react';
-import { Button, Paragraph, Text } from 'tdesign-react';
+import { Button, Typography } from 'tdesign-react';
+
+const { Text, Paragraph } = Typography;
 
 const textString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
 
@@ -45,7 +47,15 @@ const EllipsisExample = () => {
 
       <Paragraph
         ellipsis={{
-          suffix: (expanded) => <span>{expanded ? <ChevronUpIcon size={16} style={{marginLeft: 4}} /> : <ChevronDownIcon style={{marginLeft: 4}} size={16} />}</span>,
+          suffix: (expanded) => (
+            <span>
+              {expanded ? (
+                <ChevronUpIcon size={16} style={{ marginLeft: 4 }} />
+              ) : (
+                <ChevronDownIcon style={{ marginLeft: 4 }} size={16} />
+              )}
+            </span>
+          ),
           expandable: true,
         }}
       >
diff --git a/src/typography/_example/text.jsx b/src/typography/_example/text.jsx
index cd50bac5f..b98f1dd33 100644
--- a/src/typography/_example/text.jsx
+++ b/src/typography/_example/text.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { Text, Space } from 'tdesign-react';
+import { Typography, Space } from 'tdesign-react';
+
+const { Text } = Typography;
 
 export default function TextExample() {
   return (
diff --git a/src/typography/_example/title.jsx b/src/typography/_example/title.jsx
index 23aac9a2b..3cbfeeb19 100644
--- a/src/typography/_example/title.jsx
+++ b/src/typography/_example/title.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { Title } from 'tdesign-react';
+import { Typography } from 'tdesign-react';
+
+const { Title } = Typography;
 
 const TitleExample = () => (
   <>
diff --git a/src/typography/index.ts b/src/typography/index.ts
index 073c473eb..7bd6e333b 100644
--- a/src/typography/index.ts
+++ b/src/typography/index.ts
@@ -1,11 +1,8 @@
-import _Paragraph from './Paragraph';
-import _Text from './Text';
-import _Title from './Title';
+import _Typography from './Typography';
 
 import './style/index.js';
 
 export * from './type';
 
-export const Paragraph = _Paragraph;
-export const Text = _Text;
-export const Title = _Title;
+export const Typography = _Typography;
+export default Typography;

From 3e4c8383929a50b4243ff65f717dec420146af93 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Tue, 23 Apr 2024 11:42:02 +0800
Subject: [PATCH 14/20] chore: update demo

---
 src/typography/__tests__/typography.test.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/typography/__tests__/typography.test.tsx b/src/typography/__tests__/typography.test.tsx
index 7e3eda766..13b94f8d9 100644
--- a/src/typography/__tests__/typography.test.tsx
+++ b/src/typography/__tests__/typography.test.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import { render, fireEvent, vi, mockDelay } from '@test/utils';
 import { AngryIcon, SmileIcon } from 'tdesign-icons-react';
-import { Text, Title, Paragraph } from '..';
+import { Typography } from '..';
+
+const { Text, Title, Paragraph } = Typography;
 
 const longTextString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
 

From d242bb9e3102f5d3f79efd592a9a2e50c56623ea Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Tue, 23 Apr 2024 20:12:32 +0800
Subject: [PATCH 15/20] fix: fix type

---
 package.json                                 |  1 -
 src/_common                                  |  2 +-
 src/config-provider/config-provider.en-US.md |  8 +++++
 src/config-provider/config-provider.md       |  9 +++++
 src/config-provider/type.ts                  | 22 ++++++++++++
 src/typography/Ellipsis.tsx                  | 12 +++----
 src/typography/Paragraph.tsx                 | 28 +++++++++------
 src/typography/Text.tsx                      | 37 +++++++++++---------
 src/typography/Title.tsx                     | 29 ++++++++-------
 src/typography/_example/text.jsx             |  2 +-
 src/typography/useEllipsis.tsx               | 20 +++++++----
 11 files changed, 113 insertions(+), 57 deletions(-)

diff --git a/package.json b/package.json
index ac82fa5fc..0b30ab639 100644
--- a/package.json
+++ b/package.json
@@ -203,7 +203,6 @@
     "@types/tinycolor2": "^1.4.3",
     "@types/validator": "^13.1.3",
     "classnames": "~2.3.1",
-    "copy-to-clipboard": "^3.3.3",
     "dayjs": "~1.11.4",
     "hoist-non-react-statics": "~3.3.2",
     "lodash": "~4.17.15",
diff --git a/src/_common b/src/_common
index 78a589aea..1d0df6ee8 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 78a589aea1301c99fab72de56d4439744a897afb
+Subproject commit 1d0df6ee8ddee26c3f8543504a598c3edc466f06
diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md
index 4504d00c2..becaa7bcf 100644
--- a/src/config-provider/config-provider.en-US.md
+++ b/src/config-provider/config-provider.en-US.md
@@ -320,3 +320,11 @@ finishButtonProps | Object | - | finish button in last step. `{ content: 'Finish
 nextButtonProps | Object | - | next step button. `{ content: 'Next Button', theme: 'primary' }`。Typescript：`ButtonProps` | N
 prevButtonProps | Object | - | previous step button. `{ content: 'Previous Step', theme: 'default' }`。Typescript：`ButtonProps` | N
 skipButtonProps | Object | - | skip button. `{ content: 'Skip', theme: 'default' }`。Typescript：`ButtonProps` | N
+
+### TypographyConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+collapseText | String | - | collapse text | N
+expandText | String | - | expand text | N
+copiedText | String | - | copied text | N
\ No newline at end of file
diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md
index bd97571d7..c73e8635d 100644
--- a/src/config-provider/config-provider.md
+++ b/src/config-provider/config-provider.md
@@ -63,6 +63,7 @@ timePicker | Object | - | 时间选择器全局配置。TS 类型：`TimePickerC
 transfer | Object | - | 穿梭框全局配置。TS 类型：`TransferConfig` | N
 tree | Object | - | 树组件全局配置。TS 类型：`TreeConfig` | N
 treeSelect | Object | - | 树选择器组件全局配置。TS 类型：`TreeSelectConfig` | N
+typography | Object | - | 排版组件全局配置。TS 类型：`TypographyConfig` | N
 upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N
 
 ### InputConfig
@@ -350,3 +351,11 @@ finishButtonProps | Object | - | 最后一步中的完成按钮，示例：`{ co
 nextButtonProps | Object | - | 下一步按钮，示例：`{ content: '下一步', theme: 'primary' }`。TS 类型：`ButtonProps` | N
 prevButtonProps | Object | - | 上一步按钮，示例：`{ content: '上一步', theme: 'default' }`。TS 类型：`ButtonProps` | N
 skipButtonProps | Object | - | 跳过按钮，示例：`{ content: '跳过', theme: 'default' }`。TS 类型：`ButtonProps` | N
+
+### TypographyConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+collapseText | String | - | 语言配置，“收起”描述文本 | N
+expandText | String | - | 语言配置，“展开”描述文本 | N
+copiedText | String | - | 语言配置，“复制成功”描述文本 | N
\ No newline at end of file
diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts
index f25337dbc..17de983e3 100644
--- a/src/config-provider/type.ts
+++ b/src/config-provider/type.ts
@@ -126,6 +126,10 @@ export interface GlobalConfigProvider {
    * 树选择器组件全局配置
    */
   treeSelect?: TreeSelectConfig;
+  /**
+   * 排版全局配置
+   */
+  typography?: TypographyConfig;
   /**
    * 上传组件全局配置
    */
@@ -886,6 +890,24 @@ export interface GuideConfig {
   skipButtonProps?: ButtonProps;
 }
 
+export interface TypographyConfig {
+  /**
+   * 语言配置，“收起”描述文本
+   * @default ''
+   */
+  collapseText?: string;
+  /**
+   * 语言配置，“展开”描述文本
+   * @default ''
+   */
+  expandText?: string;
+  /**
+   * 语言配置，“复制成功”描述文本
+   * @default ''
+   */
+  copiedText?: string;
+}
+
 export type AnimationType = 'ripple' | 'expand' | 'fade';
 
 export type IconConfig = GlobalIconConfig;
diff --git a/src/typography/Ellipsis.tsx b/src/typography/Ellipsis.tsx
index d8753a622..346b6a21e 100644
--- a/src/typography/Ellipsis.tsx
+++ b/src/typography/Ellipsis.tsx
@@ -1,20 +1,20 @@
-// @ts-nocheck
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
+
 import Truncate from './Truncate';
 import useConfig from '../hooks/useConfig';
 
-type TdEllipsis = {
+export type TdEllipsis = {
   className?: string;
   children: ReactNode;
   lines: number;
   ellipsisClassName?: string;
   ellipsisPrefix?: ReactNode;
-  onToggleExpand?: (isExpanded: boolean, e: Event) => void;
+  onToggleExpand?: (isExpanded: boolean, e: React.MouseEvent) => void;
   width?: number;
   onTruncate?: (truncated: boolean) => void;
-  component: keyof HTMLElementTagNameMap;
+  component?: keyof HTMLElementTagNameMap;
   collapsible: boolean;
   expandable: boolean;
   more: ReactNode;
@@ -36,7 +36,7 @@ const Ellipsis = ({
   more,
   less,
   ...rest
-}: TdEllipsis) => {
+}: TdEllipsis & { children: React.ReactNode }) => {
   const { classPrefix } = useConfig();
   const symbolClassName = ellipsisClassName || `${classPrefix}-typography-ellipsis-symbol`;
 
@@ -46,7 +46,7 @@ const Ellipsis = ({
   }, []);
 
   const [isExpanded, setIsExpanded] = useState(false);
-  const handleToggleExpand = (e) => {
+  const handleToggleExpand = (e: React.MouseEvent) => {
     if (!expandable) return;
 
     if (isMountRef.current) {
diff --git a/src/typography/Paragraph.tsx b/src/typography/Paragraph.tsx
index b00202656..7d3c7f840 100644
--- a/src/typography/Paragraph.tsx
+++ b/src/typography/Paragraph.tsx
@@ -1,17 +1,25 @@
-// @ts-nocheck
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import Ellipsis from './Ellipsis';
-import { TdParagraphProps } from './type';
 import { paragraphDefaultProps } from './defaultProps';
+
 import useConfig from '../hooks/useConfig';
 import useEllipsis from './useEllipsis';
+import useDefaultProps from '../hooks/useDefaultProps';
+
+import type { StyledProps } from '../common';
+import type { TdParagraphProps } from './type';
 
-export type TypographyParagraphProps = TdParagraphProps;
+export type TypographyParagraphProps = TdParagraphProps &
+  StyledProps & {
+    children: React.ReactNode;
+  };
 
-const ParagraphFunction = (props: TypographyParagraphProps, ref: React.Ref<HTMLDivElement>) => {
+const Paragraph = forwardRef<HTMLDivElement, TypographyParagraphProps>((originalProps, ref) => {
   const { classPrefix } = useConfig();
-  const { ellipsis, children, className, ...rest } = props;
+  const props = useDefaultProps<TypographyParagraphProps>(originalProps, paragraphDefaultProps);
+
+  const { ellipsis, children, className, content, ...rest } = props;
   const prefixCls = `${classPrefix}-typography`;
 
   const { ellipsisProps } = useEllipsis(ellipsis);
@@ -19,19 +27,17 @@ const ParagraphFunction = (props: TypographyParagraphProps, ref: React.Ref<HTMLD
   if (!ellipsis) {
     return (
       <div className={classNames(className, prefixCls)} ref={ref} {...rest}>
-        {children}
+        {children || content}
       </div>
     );
   }
 
   return (
-    <Ellipsis {...ellipsisProps} className={classNames(className, prefixCls)} ref={ref} {...rest}>
-      {children}
+    <Ellipsis {...ellipsisProps} className={classNames(className, prefixCls)} {...rest}>
+      {children || content}
     </Ellipsis>
   );
-};
-
-export const Paragraph = forwardRef(ParagraphFunction);
+});
 
 Paragraph.displayName = 'Paragraph';
 Paragraph.defaultProps = paragraphDefaultProps;
diff --git a/src/typography/Text.tsx b/src/typography/Text.tsx
index fdee54627..aba6b7645 100644
--- a/src/typography/Text.tsx
+++ b/src/typography/Text.tsx
@@ -1,26 +1,33 @@
-// @ts-nocheck
-import React, { ReactElement, forwardRef, useRef, useState } from 'react';
+import React, { ReactElement, useRef, forwardRef, useState } from 'react';
 import classNames from 'classnames';
 import { CheckIcon, CopyIcon } from 'tdesign-icons-react';
-import copy from 'copy-to-clipboard';
 
 import Ellipsis from './Ellipsis';
-import { TdTextProps } from './type';
-import { textDefaultProps } from './defaultProps';
 import useConfig from '../hooks/useConfig';
 import useEllipsis from './useEllipsis';
 import Button from '../button/Button';
 import Tooltip from '../tooltip';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { textDefaultProps } from './defaultProps';
+import copyText from '../_util/copyText';
 
-export type TypographyTextProps = TdTextProps;
+import type { StyledProps } from '../common';
+import type { TdTextProps } from './type';
+
+export type TypographyTextProps = TdTextProps &
+  StyledProps & {
+    children: React.ReactNode;
+  };
 
-const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement>) => {
+const Text = forwardRef<HTMLSpanElement, TypographyTextProps>((originalProps, ref) => {
   const { classPrefix } = useConfig();
+  const props = useDefaultProps<TypographyTextProps>(originalProps, textDefaultProps);
+
   const prefixCls = `${classPrefix}-typography`;
 
   const [local, t] = useLocaleReceiver('typography');
-  const copiedText = t(local.copied);
+  const copiedText = t(local.copiedText);
 
   const {
     theme,
@@ -38,6 +45,7 @@ const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement
     ellipsis,
     ...rest
   } = props;
+
   const getComponent = () => {
     const componentMap = {
       strong: !!strong,
@@ -83,17 +91,17 @@ const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement
         };
 
   const handleCopy = () => {
-    copy(copyProps?.text);
+    copyText(copyProps?.text);
     setIsCopied(true);
     setTimeout(() => {
       setIsCopied(false);
     }, 1500);
-    copyProps.onCopy?.();
+    if (typeof copyProps.onCopy === 'function') copyProps.onCopy();
   };
 
   const renderContent = (withChildren: boolean) => {
     const { tooltipProps } = copyProps;
-    const wrapWithTooltip = (wrapContent) =>
+    const wrapWithTooltip = (wrapContent: React.ReactNode) =>
       tooltipProps ? <Tooltip {...tooltipProps}>{wrapContent}</Tooltip> : wrapContent;
 
     const getSuffix = (): ReactElement => {
@@ -162,11 +170,6 @@ const TextFunction = (props: TypographyTextProps, ref: React.Ref<HTMLSpanElement
       {renderContent(false)}
     </>
   );
-};
-
-export const Text = forwardRef(TextFunction);
-
-Text.displayName = 'Text';
-Text.defaultProps = textDefaultProps;
+});
 
 export default Text;
diff --git a/src/typography/Title.tsx b/src/typography/Title.tsx
index dee3a6917..aeb0205a3 100644
--- a/src/typography/Title.tsx
+++ b/src/typography/Title.tsx
@@ -1,18 +1,26 @@
-// @ts-nocheck
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import Ellipsis from './Ellipsis';
 
 import { TdTitleProps } from './type';
 import { titleDefaultProps } from './defaultProps';
+
 import useConfig from '../hooks/useConfig';
 import useEllipsis from './useEllipsis';
+import useDefaultProps from '../hooks/useDefaultProps';
+
+import type { StyledProps } from '../common';
 
-export type TypographyTitleProps = TdTitleProps;
+export type TypographyTitleProps = TdTitleProps &
+  StyledProps & {
+    children: React.ReactNode;
+  };
 
-const TitleFunction = (props: TypographyTitleProps, ref: React.Ref<HTMLDivElement>) => {
+export const Title = forwardRef<HTMLHeadingElement, TypographyTitleProps>((originalProps, ref) => {
   const { classPrefix } = useConfig();
-  const { level: Component = 'h1', children, className, ellipsis, ...rest } = props;
+  const props = useDefaultProps<TypographyTitleProps>(originalProps, titleDefaultProps);
+
+  const { level: Component = 'h1', children, className, content, ellipsis, ...rest } = props;
   const prefixCls = `${classPrefix}-typography`;
 
   const { ellipsisProps } = useEllipsis(ellipsis);
@@ -20,21 +28,16 @@ const TitleFunction = (props: TypographyTitleProps, ref: React.Ref<HTMLDivElemen
   if (!ellipsis) {
     return (
       <Component className={classNames(className, prefixCls)} ref={ref} {...rest}>
-        {children}
+        {children || content}
       </Component>
     );
   }
 
   return (
-    <Ellipsis className={classNames(className, prefixCls)} {...ellipsisProps} ref={ref} component={Component} {...rest}>
-      {children}
+    <Ellipsis className={classNames(className, prefixCls)} {...ellipsisProps} component={Component} {...rest}>
+      {children || content}
     </Ellipsis>
   );
-};
-
-export const Title = forwardRef(TitleFunction);
-
-Title.displayName = 'Title';
-Title.defaultProps = titleDefaultProps;
+});
 
 export default Title;
diff --git a/src/typography/_example/text.jsx b/src/typography/_example/text.jsx
index b98f1dd33..8bc3ec8b4 100644
--- a/src/typography/_example/text.jsx
+++ b/src/typography/_example/text.jsx
@@ -5,7 +5,7 @@ const { Text } = Typography;
 
 export default function TextExample() {
   return (
-    <Space direction="vertical" size={12}>
+    <Space direction="vertical" className="vertical-demo" size={12}>
       <Text theme="primary">TDesign (primary)</Text>
       <Text theme="secondary">TDesign (secondary)</Text>
       <Text disabled>TDesign (disabled)</Text>
diff --git a/src/typography/useEllipsis.tsx b/src/typography/useEllipsis.tsx
index dcbbf7205..37b9f83bf 100644
--- a/src/typography/useEllipsis.tsx
+++ b/src/typography/useEllipsis.tsx
@@ -1,6 +1,6 @@
-// @ts-nocheck
 /* eslint-disable no-nested-ternary */
 import React, { useState } from 'react';
+import isFunction from 'lodash/isFunction';
 
 import { TypographyEllipsis } from './type';
 import Tooltip from '../tooltip';
@@ -8,8 +8,8 @@ import { useLocaleReceiver } from '../locale/LocalReceiver';
 
 export default function useEllipsis(ellipsis: boolean | TypographyEllipsis) {
   const [local, t] = useLocaleReceiver('typography');
-  const expandText = t(local.expand);
-  const collapseText = t(local.collapse);
+  const expandText = t(local.expandText);
+  const collapseText = t(local.collapseText);
 
   let formattedEllipsis: TypographyEllipsis = {};
   if (ellipsis) {
@@ -46,15 +46,21 @@ export default function useEllipsis(ellipsis: boolean | TypographyEllipsis) {
   };
 
   const getEllipsisSuffix = () => {
-    const moreOrLess = formattedEllipsis.suffix?.(!isClamped);
+    let moreOrLess: React.ReactNode;
+    if (isFunction(formattedEllipsis.suffix)) moreOrLess = formattedEllipsis.suffix?.({ expanded: !isClamped });
+    else moreOrLess = formattedEllipsis.suffix;
+
     if (formattedEllipsis?.tooltipProps && !!moreOrLess) {
-      return <Tooltip {...formattedEllipsis?.tooltipProps}>{formattedEllipsis.suffix?.(!isClamped)}</Tooltip>;
+      return <Tooltip {...formattedEllipsis?.tooltipProps}>{moreOrLess}</Tooltip>;
     }
-    return formattedEllipsis.suffix?.(!isClamped);
+    return moreOrLess;
   };
 
   const getEllipsisPrefix = () => {
-    const moreOrLess = formattedEllipsis.suffix?.(!isClamped);
+    let moreOrLess: React.ReactNode;
+    if (isFunction(formattedEllipsis.suffix)) moreOrLess = formattedEllipsis.suffix?.({ expanded: !isClamped });
+    else moreOrLess = formattedEllipsis.suffix;
+
     if (formattedEllipsis?.tooltipProps && !moreOrLess) {
       return <Tooltip {...formattedEllipsis?.tooltipProps}>...</Tooltip>;
     }

From 147e8b09c921a2d38afc2399f551d8fcac4a9966 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Tue, 23 Apr 2024 20:16:49 +0800
Subject: [PATCH 16/20] fix: fix type

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

diff --git a/package.json b/package.json
index 2c479190a..c8f082e45 100644
--- a/package.json
+++ b/package.json
@@ -209,9 +209,7 @@
     "mitt": "^3.0.0",
     "raf": "~3.4.1",
     "react-is": "^18.2.0",
-    "react-lines-ellipsis": "^0.15.4",
     "react-popper": "~2.3.0",
-    "react-show-more-text": "^1.7.1",
     "react-transition-group": "~4.4.1",
     "sortablejs": "^1.15.0",
     "tdesign-icons-react": "^0.3.0",

From 1c08c049667b895734bd0119aff2ad0cee131c12 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Tue, 23 Apr 2024 20:27:32 +0800
Subject: [PATCH 17/20] chore: fix build

---
 src/_util/copyText.ts                        |   6 +-
 src/typography/Ellipsis.tsx                  |   1 +
 src/typography/Text.tsx                      |   1 +
 src/typography/__tests__/typography.test.tsx |   4 +-
 src/typography/_example/base.jsx             |  48 ++---
 src/typography/_example/copyable.jsx         |   2 +-
 src/typography/_example/ellipsis.jsx         |   4 +-
 src/typography/useEllipsis.tsx               |   4 +-
 test/snap/__snapshots__/csr.test.jsx.snap    | 184 +++++++++----------
 test/snap/__snapshots__/ssr.test.jsx.snap    |   4 +-
 10 files changed, 133 insertions(+), 125 deletions(-)

diff --git a/src/_util/copyText.ts b/src/_util/copyText.ts
index dfa4e44e1..4a1a26529 100644
--- a/src/_util/copyText.ts
+++ b/src/_util/copyText.ts
@@ -1,4 +1,8 @@
+import { canUseDocument } from './dom';
+
 export default function copyText(text: string) {
+  if (!canUseDocument) return;
+
   if ('clipboard' in navigator) {
     navigator.clipboard.writeText(text);
     return;
@@ -16,7 +20,7 @@ export default function copyText(text: string) {
   selection.removeAllRanges();
   selection.addRange(range);
 
-  document.execCommand('copy');
+  document.execCommand?.('copy');
   selection.removeAllRanges();
   document.body.removeChild(textarea);
 }
diff --git a/src/typography/Ellipsis.tsx b/src/typography/Ellipsis.tsx
index 346b6a21e..f42aef4cd 100644
--- a/src/typography/Ellipsis.tsx
+++ b/src/typography/Ellipsis.tsx
@@ -74,6 +74,7 @@ const Ellipsis = ({
   };
 
   return (
+    // @ts-ignore
     <Component {...componentProps}>
       <Truncate
         width={width}
diff --git a/src/typography/Text.tsx b/src/typography/Text.tsx
index aba6b7645..b5e5d9432 100644
--- a/src/typography/Text.tsx
+++ b/src/typography/Text.tsx
@@ -132,6 +132,7 @@ const Text = forwardRef<HTMLSpanElement, TypographyTextProps>((originalProps, re
   if (!ellipsis) {
     return Component ? (
       <span className={classNames(className, prefixCls)} ref={ref || currentRef} {...rest}>
+        {/* @ts-ignore */}
         <Component>{renderContent(true)}</Component>
       </span>
     ) : (
diff --git a/src/typography/__tests__/typography.test.tsx b/src/typography/__tests__/typography.test.tsx
index 13b94f8d9..f2193917d 100644
--- a/src/typography/__tests__/typography.test.tsx
+++ b/src/typography/__tests__/typography.test.tsx
@@ -99,7 +99,7 @@ describe('Typography 组件测试', () => {
     expect(container.querySelector('.t-popup-open')).toBeTruthy();
   });
 
-  test('copiable 测试', async () => {
+  test('copyable 测试', async () => {
     const handleCopy = vi.fn();
     const { container } = render(<Text copyable={{ onCopy: handleCopy }}>{shortText}</Text>);
 
@@ -107,7 +107,7 @@ describe('Typography 组件测试', () => {
     expect(handleCopy).toHaveBeenCalled();
   });
 
-  test('copiable suffix 测试', async () => {
+  test('copyable suffix 测试', async () => {
     const { container } = render(
       <Text copyable={{ suffix: ({ copied }) => (copied ? <SmileIcon /> : <AngryIcon />) }}>{shortText}</Text>,
     );
diff --git a/src/typography/_example/base.jsx b/src/typography/_example/base.jsx
index 0cc41f485..4f2da60dd 100644
--- a/src/typography/_example/base.jsx
+++ b/src/typography/_example/base.jsx
@@ -3,7 +3,7 @@ import { Typography, Space } from 'tdesign-react';
 
 const { Title, Text, Paragraph } = Typography;
 
-export default function BasicTypography() {
+export default function BasicExample() {
   return (
     <>
       <Title>What is TDesign</Title>
@@ -25,29 +25,31 @@ export default function BasicTypography() {
       </Paragraph>
 
       <Space direction="vertical" size={12}>
-        <ul>
-          <li>Features</li>
-          <li>
-            Comprehensive
-            <ul>
-              <li>Consistency</li>
-              <li>Usability</li>
-            </ul>
-          </li>
-          <li>Join TDesign </li>
-        </ul>
+        <Paragraph>
+          <ul>
+            <li>Features</li>
+            <li>
+              Comprehensive
+              <ul>
+                <li>Consistency</li>
+                <li>Usability</li>
+              </ul>
+            </li>
+            <li>Join TDesign </li>
+          </ul>
 
-        <ol>
-          <li>Features</li>
-          <li>
-            Comprehensive
-            <ol type="a">
-              <li>Consistency</li>
-              <li>Usability</li>
-            </ol>
-          </li>
-          <li>Join TDesign</li>
-        </ol>
+          <ol>
+            <li>Features</li>
+            <li>
+              Comprehensive
+              <ol type="a">
+                <li>Consistency</li>
+                <li>Usability</li>
+              </ol>
+            </li>
+            <li>Join TDesign</li>
+          </ol>
+        </Paragraph>
       </Space>
     </>
   );
diff --git a/src/typography/_example/copyable.jsx b/src/typography/_example/copyable.jsx
index 84c666b3d..22499dbc7 100644
--- a/src/typography/_example/copyable.jsx
+++ b/src/typography/_example/copyable.jsx
@@ -6,7 +6,7 @@ const { Text } = Typography;
 
 const textString = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;
 
-export default function BasicTypography() {
+export default function CopyableExample() {
   return (
     <>
       <Text copyable>This is a copyable text.</Text>
diff --git a/src/typography/_example/ellipsis.jsx b/src/typography/_example/ellipsis.jsx
index 1e77bd635..ab288ad17 100644
--- a/src/typography/_example/ellipsis.jsx
+++ b/src/typography/_example/ellipsis.jsx
@@ -18,7 +18,7 @@ const EllipsisExample = () => {
       <Paragraph
         ellipsis={{
           row: 2,
-          suffix: (expanded) => (
+          suffix: ({ expanded }) => (
             <>
               <Button theme="primary" variant="text" style={{ padding: 0, height: '1em' }}>
                 {expanded ? 'less' : 'more'}
@@ -47,7 +47,7 @@ const EllipsisExample = () => {
 
       <Paragraph
         ellipsis={{
-          suffix: (expanded) => (
+          suffix: ({ expanded }) => (
             <span>
               {expanded ? (
                 <ChevronUpIcon size={16} style={{ marginLeft: 4 }} />
diff --git a/src/typography/useEllipsis.tsx b/src/typography/useEllipsis.tsx
index 37b9f83bf..654b99a48 100644
--- a/src/typography/useEllipsis.tsx
+++ b/src/typography/useEllipsis.tsx
@@ -26,9 +26,9 @@ export default function useEllipsis(ellipsis: boolean | TypographyEllipsis) {
             row: ellipsis.row || 1,
             expandable: ellipsis.expandable ?? false,
             tooltipProps: ellipsis.tooltipProps || null,
-            suffix: (expanded) =>
+            suffix: ({ expanded }) =>
               typeof ellipsis?.suffix === 'function'
-                ? ellipsis?.suffix(expanded)
+                ? ellipsis?.suffix({ expanded })
                 : expanded
                 ? collapseText
                 : ellipsis?.expandable
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index d9d1fb73d..cfc27de02 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -296955,50 +296955,50 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
         <div
           class="t-space-item"
         >
-          <ul>
-            <li>
-              Features
-            </li>
-            <li>
-              Comprehensive
-              <ul>
-                <li>
-                  Consistency
-                </li>
-                <li>
-                  Usability
-                </li>
-              </ul>
-            </li>
-            <li>
-              Join TDesign 
-            </li>
-          </ul>
-        </div>
-        <div
-          class="t-space-item"
-        >
-          <ol>
-            <li>
-              Features
-            </li>
-            <li>
-              Comprehensive
-              <ol
-                type="a"
-              >
-                <li>
-                  Consistency
-                </li>
-                <li>
-                  Usability
-                </li>
-              </ol>
-            </li>
-            <li>
-              Join TDesign
-            </li>
-          </ol>
+          <div
+            class="t-typography"
+          >
+            <ul>
+              <li>
+                Features
+              </li>
+              <li>
+                Comprehensive
+                <ul>
+                  <li>
+                    Consistency
+                  </li>
+                  <li>
+                    Usability
+                  </li>
+                </ul>
+              </li>
+              <li>
+                Join TDesign 
+              </li>
+            </ul>
+            <ol>
+              <li>
+                Features
+              </li>
+              <li>
+                Comprehensive
+                <ol
+                  type="a"
+                >
+                  <li>
+                    Consistency
+                  </li>
+                  <li>
+                    Usability
+                  </li>
+                </ol>
+              </li>
+              <li>
+                Join TDesign
+              </li>
+            </ol>
+          </div>
         </div>
       </div>
     </div>
@@ -297086,50 +297086,50 @@ exports[`csr snapshot test > csr test src/typography/_example/base.jsx 1`] = `
       <div
         class="t-space-item"
       >
-        <ul>
-          <li>
-            Features
-          </li>
-          <li>
-            Comprehensive
-            <ul>
-              <li>
-                Consistency
-              </li>
-              <li>
-                Usability
-              </li>
-            </ul>
-          </li>
-          <li>
-            Join TDesign 
-          </li>
-        </ul>
-      </div>
-      <div
-        class="t-space-item"
-      >
-        <ol>
-          <li>
-            Features
-          </li>
-          <li>
-            Comprehensive
-            <ol
-              type="a"
-            >
-              <li>
-                Consistency
-              </li>
-              <li>
-                Usability
-              </li>
-            </ol>
-          </li>
-          <li>
-            Join TDesign
-          </li>
-        </ol>
+        <div
+          class="t-typography"
+        >
+          <ul>
+            <li>
+              Features
+            </li>
+            <li>
+              Comprehensive
+              <ul>
+                <li>
+                  Consistency
+                </li>
+                <li>
+                  Usability
+                </li>
+              </ul>
+            </li>
+            <li>
+              Join TDesign 
+            </li>
+          </ul>
+          <ol>
+            <li>
+              Features
+            </li>
+            <li>
+              Comprehensive
+              <ol
+                type="a"
+              >
+                <li>
+                  Consistency
+                </li>
+                <li>
+                  Usability
+                </li>
+              </ol>
+            </li>
+            <li>
+              Join TDesign
+            </li>
+          </ol>
+        </div>
       </div>
     </div>
   </div>,
@@ -297809,7 +297809,7 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
     />
     <div>
       <div
-        class="t-space t-space-vertical"
+        class="t-space vertical-demo t-space-vertical"
         style="gap: 12px;"
       >
         <div
@@ -297948,7 +297948,7 @@ exports[`csr snapshot test > csr test src/typography/_example/text.jsx 1`] = `
   </body>,
   "container": <div>
     <div
-      class="t-space t-space-vertical"
+      class="t-space vertical-demo t-space-vertical"
       style="gap: 12px;"
     >
       <div
@@ -304450,13 +304450,13 @@ exports[`ssr snapshot test > ssr test src/tree-select/_example/valuedisplay.jsx
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/valuetype.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"深圳市\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"深圳市\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"深圳市\\">深圳市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> <!-- -->Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><div style=\\"gap:12px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul></div><div class=\\"t-space-item\\"><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol></div></div>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> <!-- -->Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><div style=\\"gap:12px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-typography\\"><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/typography/_example/copyable.jsx 1`] = `"<span class=\\"\\">This is a copyable text.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button></span><br/><div class=\\"\\" style=\\"display:inline-block;width:50%\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>This is a copyable long text. <!-- -->TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button><br/><span class=\\"\\">This is a copyable long text with custom suffix.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-angry\\"><path fill=\\"currentColor\\" d=\\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z\\"></path></svg></button></span>"`;
 
 exports[`ssr snapshot test > ssr test src/typography/_example/ellipsis.jsx 1`] = `"<div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><button style=\\"padding:0;height:1em\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">more</span></button></span></span></span></span></div><div class=\\"\\" style=\\"width:300px;display:block\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\"><span class=\\"t-trigger\\">...</span><span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\" style=\\"margin-left:4px;font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></span></span></span></span></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/text.jsx 1`] = `"<div style=\\"gap:12px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><span class=\\"t-typography--primary\\">TDesign (primary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--secondary\\">TDesign (secondary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--disabled\\">TDesign (disabled)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--success\\">TDesign (success)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--warning\\">TDesign (warning)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--error\\">TDesign (error)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><mark>TDesign (mark)</mark></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><code>TDesign (code)</code></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><kbd>TDesign (keyboard)</kbd></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><u>TDesign (underline)</u></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><del>TDesign (delete)</del></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><strong>TDesign (strong)</strong></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><i>TDesign (italic)</i></span></div></div>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/text.jsx 1`] = `"<div style=\\"gap:12px\\" class=\\"t-space vertical-demo t-space-vertical\\"><div class=\\"t-space-item\\"><span class=\\"t-typography--primary\\">TDesign (primary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--secondary\\">TDesign (secondary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--disabled\\">TDesign (disabled)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--success\\">TDesign (success)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--warning\\">TDesign (warning)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--error\\">TDesign (error)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><mark>TDesign (mark)</mark></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><code>TDesign (code)</code></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><kbd>TDesign (keyboard)</kbd></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><u>TDesign (underline)</u></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><del>TDesign (delete)</del></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><strong>TDesign (strong)</strong></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><i>TDesign (italic)</i></span></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/typography/_example/title.jsx 1`] = `"<h1 class=\\"t-typography\\">H1. TDesign</h1><h2 class=\\"t-typography\\">H2. TDesign</h2><h3 class=\\"t-typography\\">H3. TDesign</h3><h4 class=\\"t-typography\\">H4. TDesign</h4><h5 class=\\"t-typography\\">H5. TDesign</h5><h6 class=\\"t-typography\\">H6. TDesign</h6>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index cbd90998e..d948b385c 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -1166,13 +1166,13 @@ exports[`ssr snapshot test > ssr test src/tree-select/_example/valuedisplay.jsx
 
 exports[`ssr snapshot test > ssr test src/tree-select/_example/valuetype.jsx 1`] = `"<div style=\\"width:300px;gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input\\"><div class=\\"t-input__wrap\\" value=\\"深圳市\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input placeholder=\\"请选择\\" type=\\"text\\" class=\\"t-input__inner\\" readonly=\\"\\" value=\\"深圳市\\"/><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div><div class=\\"t-space-item\\"><div class=\\"t-tree-select t-select-input t-select-input--multiple\\"><div class=\\"t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag\\" value=\\"\\"><div class=\\"t-input t-is-readonly t-align-left t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"广州市\\">广州市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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><div class=\\"t-tag t-tag--default t-tag--dark\\"><span title=\\"深圳市\\">深圳市</span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-tag__icon-close\\"><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></div><span class=\\"t-input__input-pre\\"></span><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg class=\\"t-fake-arrow\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M3.75 5.7998L7.99274 10.0425L12.2361 5.79921\\" stroke=\\"black\\" stroke-opacity=\\"0.9\\" stroke-width=\\"1.3\\"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> <!-- -->Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><div style=\\"gap:12px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul></div><div class=\\"t-space-item\\"><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol></div></div>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/base.jsx 1`] = `"<h1 class=\\"t-typography\\">What is TDesign</h1><span class=\\"t-typography\\"><mark>TDesign is an enterprise-level design system accumulated by Tencent&#x27;s various business teams.</mark></span><div class=\\"t-typography\\"><span class=\\"t-typography\\"><strong>TDesign features a unified design values, consistent design language, and visual style, helping users form continuous and coherent perceptions of the experience.</strong></span> <!-- -->Based on this, TDesign offers out-of-the-box UI component libraries, design guidelines, and design assets, elegantly and efficiently freeing design and development from repetitive tasks. Simultaneously, it facilitates easy extension on top of TDesign, enabling a better alignment with business requirements.</div><h2 class=\\"t-typography\\">Comprehensive</h2><div class=\\"t-typography\\">TDesign Support <span class=\\"t-typography\\"><code>Vue 2</code></span>, <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>React</code></span>, components for Desktop Application and <span class=\\"t-typography\\"><code>Vue 3</code></span>, <span class=\\"t-typography\\"><code>Wechat MiniProgram</code></span> components for Mobile Application.</div><div style=\\"gap:12px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div class=\\"t-typography\\"><ul><li>Features</li><li>Comprehensive<ul><li>Consistency</li><li>Usability</li></ul></li><li>Join TDesign </li></ul><ol><li>Features</li><li>Comprehensive<ol type=\\"a\\"><li>Consistency</li><li>Usability</li></ol></li><li>Join TDesign</li></ol></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/typography/_example/copyable.jsx 1`] = `"<span class=\\"\\">This is a copyable text.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button></span><br/><div class=\\"\\" style=\\"display:inline-block;width:50%\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>This is a copyable long text. <!-- -->TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-copy\\"><path fill=\\"currentColor\\" d=\\"M2 2h13v5.5h-2V4H4v9h3.5v2H2V2zm7 7h13v13H9V9zm2 2v9h9v-9h-9z\\"></path></svg></button><br/><span class=\\"\\">This is a copyable long text with custom suffix.<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text t-button--shape-square\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-angry\\"><path fill=\\"currentColor\\" d=\\"M12 3a9 9 0 100 18 9 9 0 000-18zM1 12a11 11 0 1122 0 11 11 0 01-22 0zm5.77-3.87l3.46 2-1 1.74-3.46-2 1-1.74zm11.46 1.74l-3.46 2-1-1.74 3.46-2 1 1.74zM7.67 15.5a5 5 0 018.66 0l.5.86-1.73 1-.5-.86a3 3 0 00-5.2 0l-.5.87-1.73-1 .5-.87z\\"></path></svg></button></span>"`;
 
 exports[`ssr snapshot test > ssr test src/typography/_example/ellipsis.jsx 1`] = `"<div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><button style=\\"padding:0;height:1em\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-text\\"><span class=\\"t-button__text\\">more</span></button></span></span></span></span></div><div class=\\"\\" style=\\"width:300px;display:block\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\"><span class=\\"t-trigger\\">...</span><span class=\\"t-typography-ellipsis-symbol\\"></span></span></span></span></div><div class=\\"t-typography\\"><span width=\\"0\\" class=\\"t-typography-ellipsis\\"><span style=\\"display:block;max-width:unset\\"></span><span>TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants&#x27; roles.</span><span style=\\"position:fixed;visibility:hidden;top:0;left:0\\"><span class=\\"t-typography-ellipsis-symbol-wrapper\\">...<span class=\\"t-typography-ellipsis-symbol\\"><span><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-chevron-down\\" style=\\"margin-left:4px;font-size:16px\\"><path fill=\\"currentColor\\" d=\\"M17.5 8.09l-5.5 5.5-5.5-5.5L5.09 9.5 12 16.41l6.91-6.91-1.41-1.41z\\"></path></svg></span></span></span></span></span></div>"`;
 
-exports[`ssr snapshot test > ssr test src/typography/_example/text.jsx 1`] = `"<div style=\\"gap:12px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><span class=\\"t-typography--primary\\">TDesign (primary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--secondary\\">TDesign (secondary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--disabled\\">TDesign (disabled)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--success\\">TDesign (success)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--warning\\">TDesign (warning)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--error\\">TDesign (error)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><mark>TDesign (mark)</mark></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><code>TDesign (code)</code></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><kbd>TDesign (keyboard)</kbd></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><u>TDesign (underline)</u></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><del>TDesign (delete)</del></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><strong>TDesign (strong)</strong></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><i>TDesign (italic)</i></span></div></div>"`;
+exports[`ssr snapshot test > ssr test src/typography/_example/text.jsx 1`] = `"<div style=\\"gap:12px\\" class=\\"t-space vertical-demo t-space-vertical\\"><div class=\\"t-space-item\\"><span class=\\"t-typography--primary\\">TDesign (primary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--secondary\\">TDesign (secondary)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--disabled\\">TDesign (disabled)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--success\\">TDesign (success)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--warning\\">TDesign (warning)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography--error\\">TDesign (error)</span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><mark>TDesign (mark)</mark></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><code>TDesign (code)</code></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><kbd>TDesign (keyboard)</kbd></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><u>TDesign (underline)</u></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><del>TDesign (delete)</del></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><strong>TDesign (strong)</strong></span></div><div class=\\"t-space-item\\"><span class=\\"t-typography\\"><i>TDesign (italic)</i></span></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/typography/_example/title.jsx 1`] = `"<h1 class=\\"t-typography\\">H1. TDesign</h1><h2 class=\\"t-typography\\">H2. TDesign</h2><h3 class=\\"t-typography\\">H3. TDesign</h3><h4 class=\\"t-typography\\">H4. TDesign</h4><h5 class=\\"t-typography\\">H5. TDesign</h5><h6 class=\\"t-typography\\">H6. TDesign</h6>"`;
 

From 9ce66e0ec2ac8dd50506b08a00d73571f5ab85dd Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Wed, 24 Apr 2024 12:14:09 +0800
Subject: [PATCH 18/20] chore: optimize dir

---
 src/typography/Paragraph.tsx                  |  4 +-
 src/typography/Text.tsx                       |  4 +-
 src/typography/Title.tsx                      |  4 +-
 src/typography/{ => ellipsis}/Ellipsis.tsx    |  2 +-
 src/typography/{ => ellipsis}/Truncate.tsx    | 99 +++++++++++--------
 src/typography/ellipsis/style/css.js          |  1 +
 src/typography/ellipsis/style/index.js        |  1 +
 src/typography/{ => ellipsis}/useEllipsis.tsx |  6 +-
 8 files changed, 69 insertions(+), 52 deletions(-)
 rename src/typography/{ => ellipsis}/Ellipsis.tsx (98%)
 rename src/typography/{ => ellipsis}/Truncate.tsx (84%)
 create mode 100644 src/typography/ellipsis/style/css.js
 create mode 100644 src/typography/ellipsis/style/index.js
 rename src/typography/{ => ellipsis}/useEllipsis.tsx (94%)

diff --git a/src/typography/Paragraph.tsx b/src/typography/Paragraph.tsx
index 7d3c7f840..239084038 100644
--- a/src/typography/Paragraph.tsx
+++ b/src/typography/Paragraph.tsx
@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import Ellipsis from './Ellipsis';
+import Ellipsis from './ellipsis/Ellipsis';
 import { paragraphDefaultProps } from './defaultProps';
 
 import useConfig from '../hooks/useConfig';
-import useEllipsis from './useEllipsis';
+import useEllipsis from './ellipsis/useEllipsis';
 import useDefaultProps from '../hooks/useDefaultProps';
 
 import type { StyledProps } from '../common';
diff --git a/src/typography/Text.tsx b/src/typography/Text.tsx
index b5e5d9432..ddb1595af 100644
--- a/src/typography/Text.tsx
+++ b/src/typography/Text.tsx
@@ -2,9 +2,9 @@ import React, { ReactElement, useRef, forwardRef, useState } from 'react';
 import classNames from 'classnames';
 import { CheckIcon, CopyIcon } from 'tdesign-icons-react';
 
-import Ellipsis from './Ellipsis';
+import Ellipsis from './ellipsis/Ellipsis';
 import useConfig from '../hooks/useConfig';
-import useEllipsis from './useEllipsis';
+import useEllipsis from './ellipsis/useEllipsis';
 import Button from '../button/Button';
 import Tooltip from '../tooltip';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
diff --git a/src/typography/Title.tsx b/src/typography/Title.tsx
index aeb0205a3..b8f5c6c09 100644
--- a/src/typography/Title.tsx
+++ b/src/typography/Title.tsx
@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import Ellipsis from './Ellipsis';
+import Ellipsis from './ellipsis/Ellipsis';
 
 import { TdTitleProps } from './type';
 import { titleDefaultProps } from './defaultProps';
 
 import useConfig from '../hooks/useConfig';
-import useEllipsis from './useEllipsis';
+import useEllipsis from './ellipsis/useEllipsis';
 import useDefaultProps from '../hooks/useDefaultProps';
 
 import type { StyledProps } from '../common';
diff --git a/src/typography/Ellipsis.tsx b/src/typography/ellipsis/Ellipsis.tsx
similarity index 98%
rename from src/typography/Ellipsis.tsx
rename to src/typography/ellipsis/Ellipsis.tsx
index f42aef4cd..d0416252e 100644
--- a/src/typography/Ellipsis.tsx
+++ b/src/typography/ellipsis/Ellipsis.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 
 import Truncate from './Truncate';
-import useConfig from '../hooks/useConfig';
+import useConfig from '../../hooks/useConfig';
 
 export type TdEllipsis = {
   className?: string;
diff --git a/src/typography/Truncate.tsx b/src/typography/ellipsis/Truncate.tsx
similarity index 84%
rename from src/typography/Truncate.tsx
rename to src/typography/ellipsis/Truncate.tsx
index 2186e9bf3..ce83aae48 100644
--- a/src/typography/Truncate.tsx
+++ b/src/typography/ellipsis/Truncate.tsx
@@ -1,11 +1,9 @@
-// @ts-nocheck
 /**
  * LICENSE
  * https://github.com/pablosichert/react-truncate/blob/master/LICENSE.md
  *
  * ISC License
-Copyright (c) 2016, One.com
-
+ * 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is
 hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
 
@@ -15,13 +13,25 @@ FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATS
 DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
 CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
  */
-
-// Initial version of react-truncate module (v2.4.0)
-
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default class Truncate extends React.Component {
+export type TruncateProps = {
+  children: React.ReactNode;
+  ellipsis: React.ReactNode;
+  onTruncate: (truncated: boolean) => void;
+  lines: number;
+  trimWhitespace: boolean;
+  width: number;
+  className: string;
+  lineClassName: string;
+};
+
+export type TruncateState = {
+  targetWidth?: number;
+};
+
+export default class Truncate extends React.Component<TruncateProps, TruncateState> {
   static propTypes = {
     children: PropTypes.node,
     ellipsis: PropTypes.node,
@@ -35,21 +45,32 @@ export default class Truncate extends React.Component {
 
   static defaultProps = {
     children: '',
-    ellipsis: '…',
+    ellipsis: '...',
     lines: 1,
     trimWhitespace: false,
     width: 0,
     lineClassName: 'truncate-line',
   };
 
-  state = {};
+  elements: Record<string, HTMLElement>;
+
+  replacedLinks: Array<Record<string, string>>;
+
+  calculatedEllipsisWidth: boolean;
+
+  canvasContext: CanvasRenderingContext2D;
+
+  timeout: number;
 
-  constructor(...args) {
-    super(...args);
+  state: TruncateState = {};
+
+  constructor(props: TruncateProps) {
+    super(props);
 
     this.elements = {};
     this.replacedLinks = [];
-    this.calcedEllipsisWidth = false;
+    this.calculatedEllipsisWidth = false;
+    this.canvasContext;
   }
 
   componentDidMount() {
@@ -72,7 +93,7 @@ export default class Truncate extends React.Component {
     window.addEventListener('resize', onResize);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: TruncateProps) {
     // Render was based on outdated refs and needs to be rerun
     if (this.props.children !== prevProps.children) {
       this.forceUpdate();
@@ -91,7 +112,7 @@ export default class Truncate extends React.Component {
       timeout,
     } = this;
 
-    if (ellipsis.parentNode && this.calcedEllipsisWidth) {
+    if (ellipsis.parentNode && this.calculatedEllipsisWidth) {
       ellipsis.parentNode.removeChild(ellipsis);
     }
 
@@ -115,17 +136,17 @@ export default class Truncate extends React.Component {
     return content;
   };
 
-  restoreReplacedLinks = (content) => {
+  restoreReplacedLinks = (content: string) => {
     this.replacedLinks.forEach((item) => {
       // eslint-disable-next-line no-param-reassign
       content = content.replace(item.key, item[0]);
     });
 
-    return this.createMarkup(content);
+    return this.createMarkup(content) as unknown as string;
   };
 
   // Shim innerText to consistently break lines at <br/> but not at \n
-  innerText = (node) => {
+  innerText = (node: HTMLElement) => {
     const div = document.createElement('div');
     const contentKey = 'innerText' in window.HTMLElement.prototype ? 'innerText' : 'textContent';
 
@@ -149,7 +170,7 @@ export default class Truncate extends React.Component {
     this.calcTargetWidth();
   };
 
-  onTruncate = (didTruncate) => {
+  onTruncate = (didTruncate: boolean) => {
     const { onTruncate } = this.props;
 
     if (typeof onTruncate === 'function') {
@@ -159,7 +180,7 @@ export default class Truncate extends React.Component {
     }
   };
 
-  calcTargetWidth = (callback) => {
+  calcTargetWidth = (callback?: () => void) => {
     const {
       elements: { target },
       calcTargetWidth,
@@ -175,7 +196,7 @@ export default class Truncate extends React.Component {
     const targetWidth =
       width ||
       // Floor the result to deal with browser subpixel precision
-      Math.floor(target.parentNode.getBoundingClientRect().width);
+      Math.floor(target.parentElement.getBoundingClientRect().width);
 
     // Delay calculation until parent node is inserted to the document
     // Mounting order in React is ChildComponent, ParentComponent
@@ -197,16 +218,18 @@ export default class Truncate extends React.Component {
     );
   };
 
-  measureWidth = (text) => this.canvasContext.measureText(text).width;
+  measureWidth = (text: string) => this.canvasContext.measureText(text).width;
 
-  ellipsisWidth = (node) => {
-    this.calcedEllipsisWidth = true;
+  ellipsisWidth = (node: HTMLElement) => {
+    this.calculatedEllipsisWidth = true;
     return node.offsetWidth;
   };
 
-  trimRight = (text) => text.replace(/\s+$/, '');
+  trimRight = (text: string) => text.replace(/\s+$/, '');
 
-  createMarkup = (str) => <span className={this.props.lineClassName} dangerouslySetInnerHTML={{ __html: str }} />;
+  createMarkup = (str: string) => (
+    <span className={this.props.lineClassName} dangerouslySetInnerHTML={{ __html: str }} />
+  );
 
   getLines = () => {
     const {
@@ -239,7 +262,7 @@ export default class Truncate extends React.Component {
         continue;
       }
 
-      let resultLine = textWords.join(' ');
+      let resultLine: string | React.JSX.Element = textWords.join(' ');
       if (measureWidth(resultLine) <= targetWidth) {
         if (textLines.length === 1) {
           // Line is end of text and fits without truncating
@@ -336,7 +359,7 @@ export default class Truncate extends React.Component {
     return lines.map(renderLine);
   };
 
-  renderLine = (line, i, arr) => {
+  renderLine = (line: React.ReactNode, i: number, arr: Array<string>) => {
     const { lineClassName } = this.props;
 
     if (i === arr.length - 1) {
@@ -367,7 +390,7 @@ export default class Truncate extends React.Component {
       onTruncate,
     } = this;
 
-    let text;
+    let text: React.ReactNode;
 
     const mounted = !!(target && targetWidth);
 
@@ -381,10 +404,6 @@ export default class Truncate extends React.Component {
       }
     }
 
-    delete spanProps.onTruncate;
-    delete spanProps.trimWhitespace;
-    delete spanProps.lineClassName;
-
     return (
       <span
         {...spanProps}
@@ -411,20 +430,16 @@ export default class Truncate extends React.Component {
           ref={(ellipsisEl) => {
             this.elements.ellipsis = ellipsisEl;
           }}
-          style={this.styles.ellipsis}
+          style={{
+            position: 'fixed',
+            visibility: 'hidden',
+            top: 0,
+            left: 0,
+          }}
         >
           {ellipsis}
         </span>
       </span>
     );
   }
-
-  styles = {
-    ellipsis: {
-      position: 'fixed',
-      visibility: 'hidden',
-      top: 0,
-      left: 0,
-    },
-  };
 }
diff --git a/src/typography/ellipsis/style/css.js b/src/typography/ellipsis/style/css.js
new file mode 100644
index 000000000..f388879ac
--- /dev/null
+++ b/src/typography/ellipsis/style/css.js
@@ -0,0 +1 @@
+import '../../style/index.css';
diff --git a/src/typography/ellipsis/style/index.js b/src/typography/ellipsis/style/index.js
new file mode 100644
index 000000000..4a2e7d583
--- /dev/null
+++ b/src/typography/ellipsis/style/index.js
@@ -0,0 +1 @@
+import '../../style/index.js';
diff --git a/src/typography/useEllipsis.tsx b/src/typography/ellipsis/useEllipsis.tsx
similarity index 94%
rename from src/typography/useEllipsis.tsx
rename to src/typography/ellipsis/useEllipsis.tsx
index 654b99a48..37188347e 100644
--- a/src/typography/useEllipsis.tsx
+++ b/src/typography/ellipsis/useEllipsis.tsx
@@ -2,9 +2,9 @@
 import React, { useState } from 'react';
 import isFunction from 'lodash/isFunction';
 
-import { TypographyEllipsis } from './type';
-import Tooltip from '../tooltip';
-import { useLocaleReceiver } from '../locale/LocalReceiver';
+import { TypographyEllipsis } from '../type';
+import Tooltip from '../../tooltip';
+import { useLocaleReceiver } from '../../locale/LocalReceiver';
 
 export default function useEllipsis(ellipsis: boolean | TypographyEllipsis) {
   const [local, t] = useLocaleReceiver('typography');

From 12b46bcdae720f308c27cdb40e98663e98ff985a Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Wed, 24 Apr 2024 12:16:01 +0800
Subject: [PATCH 19/20] chore: update coverage

---
 site/test-coverage.js | 56 ++++++++++++++++++++++++-------------------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/site/test-coverage.js b/site/test-coverage.js
index 5a8d2a648..7f84f6181 100644
--- a/site/test-coverage.js
+++ b/site/test-coverage.js
@@ -1,9 +1,9 @@
 module.exports = {
   "Util": {
-    "statements": "61.53%",
-    "branches": "48.77%",
+    "statements": "61.88%",
+    "branches": "48.57%",
     "functions": "69.29%",
-    "lines": "63.26%"
+    "lines": "63.77%"
   },
   "affix": {
     "statements": "84.84%",
@@ -18,10 +18,10 @@ module.exports = {
     "lines": "100%"
   },
   "anchor": {
-    "statements": "92.98%",
+    "statements": "93.85%",
     "branches": "69.56%",
     "functions": "88%",
-    "lines": "97.08%"
+    "lines": "98.05%"
   },
   "autoComplete": {
     "statements": "96.17%",
@@ -114,10 +114,10 @@ module.exports = {
     "lines": "68.75%"
   },
   "datePicker": {
-    "statements": "62.47%",
-    "branches": "43.3%",
-    "functions": "60%",
-    "lines": "66.16%"
+    "statements": "62.55%",
+    "branches": "44.05%",
+    "functions": "60.6%",
+    "lines": "66.24%"
   },
   "descriptions": {
     "statements": "98.82%",
@@ -127,7 +127,7 @@ module.exports = {
   },
   "dialog": {
     "statements": "85%",
-    "branches": "71.42%",
+    "branches": "71.92%",
     "functions": "85%",
     "lines": "87.24%"
   },
@@ -162,10 +162,10 @@ module.exports = {
     "lines": "84.21%"
   },
   "guide": {
-    "statements": "100%",
-    "branches": "94.2%",
+    "statements": "99.32%",
+    "branches": "92.85%",
     "functions": "100%",
-    "lines": "100%"
+    "lines": "99.31%"
   },
   "hooks": {
     "statements": "55.22%",
@@ -174,10 +174,10 @@ module.exports = {
     "lines": "55.19%"
   },
   "image": {
-    "statements": "88.76%",
+    "statements": "88.88%",
     "branches": "82.53%",
     "functions": "80%",
-    "lines": "91.76%"
+    "lines": "91.86%"
   },
   "imageViewer": {
     "statements": "77.85%",
@@ -186,10 +186,10 @@ module.exports = {
     "lines": "77.62%"
   },
   "input": {
-    "statements": "93.78%",
+    "statements": "93.82%",
     "branches": "92.24%",
     "functions": "89.47%",
-    "lines": "94.11%"
+    "lines": "94.15%"
   },
   "inputAdornment": {
     "statements": "86.95%",
@@ -204,10 +204,10 @@ module.exports = {
     "lines": "80.16%"
   },
   "layout": {
-    "statements": "91.3%",
+    "statements": "91.48%",
     "branches": "41.66%",
     "functions": "85.71%",
-    "lines": "91.3%"
+    "lines": "91.48%"
   },
   "link": {
     "statements": "100%",
@@ -240,9 +240,9 @@ module.exports = {
     "lines": "90.51%"
   },
   "message": {
-    "statements": "88.31%",
+    "statements": "88.96%",
     "branches": "86.66%",
-    "functions": "68.18%",
+    "functions": "70.45%",
     "lines": "94.28%"
   },
   "notification": {
@@ -282,10 +282,10 @@ module.exports = {
     "lines": "83.58%"
   },
   "rangeInput": {
-    "statements": "75%",
-    "branches": "67.44%",
+    "statements": "74.02%",
+    "branches": "62.79%",
     "functions": "48.14%",
-    "lines": "74.66%"
+    "lines": "73.68%"
   },
   "rate": {
     "statements": "96.22%",
@@ -355,7 +355,7 @@ module.exports = {
   },
   "tabs": {
     "statements": "90.96%",
-    "branches": "78.64%",
+    "branches": "79.04%",
     "functions": "86.36%",
     "lines": "91.17%"
   },
@@ -413,6 +413,12 @@ module.exports = {
     "functions": "97.61%",
     "lines": "97.22%"
   },
+  "typography": {
+    "statements": "95.58%",
+    "branches": "76.31%",
+    "functions": "81.81%",
+    "lines": "98.46%"
+  },
   "upload": {
     "statements": "96.66%",
     "branches": "95.65%",

From 9242679761d3fd5d17a2919e6368a44d4ef5950c Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Wed, 24 Apr 2024 12:25:33 +0800
Subject: [PATCH 20/20] chore: fix test

---
 src/typography/ellipsis/Truncate.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/typography/ellipsis/Truncate.tsx b/src/typography/ellipsis/Truncate.tsx
index ce83aae48..42c758ef9 100644
--- a/src/typography/ellipsis/Truncate.tsx
+++ b/src/typography/ellipsis/Truncate.tsx
@@ -14,6 +14,7 @@ DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS
 CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
  */
 import React from 'react';
+import omit from 'lodash/omit';
 import PropTypes from 'prop-types';
 
 export type TruncateProps = {
@@ -406,7 +407,7 @@ export default class Truncate extends React.Component<TruncateProps, TruncateSta
 
     return (
       <span
-        {...spanProps}
+        {...omit(spanProps, ['onTruncate', 'trimWhitespace', 'lineClassName'])}
         ref={(targetEl) => {
           this.elements.target = targetEl;
         }}