From 7e8b511b28c1878f8ee279a574cd05bfe83d9a7a Mon Sep 17 00:00:00 2001
From: v_luopinluo <173308582@qq.com>
Date: Wed, 23 Sep 2026 10:46:51 +0800
Subject: [PATCH 1/7] feat(cascader): add filterable

---
 src/_common                              |   2 +-
 src/cascader/Cascader.tsx                | 472 ++++++++++++++++++-----
 src/cascader/__tests__/cascader.test.tsx | 128 ++++++
 src/cascader/_example/filterable.tsx     | 123 ++++++
 src/cascader/_example/index.tsx          |   4 +
 5 files changed, 628 insertions(+), 101 deletions(-)
 create mode 100644 src/cascader/_example/filterable.tsx

diff --git a/src/_common b/src/_common
index 3877b3252..00e50af65 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 3877b3252de69cdef86172f14e35d63bad3a0960
+Subproject commit 00e50af65dd5d1a983cbfdb649faa77524330f01
diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
index b1c0a50cf..ed9683bd3 100644
--- a/src/cascader/Cascader.tsx
+++ b/src/cascader/Cascader.tsx
@@ -1,11 +1,12 @@
 import { useDeepCompareEffect } from 'ahooks';
 import classNames from 'classnames';
 import last from 'lodash-es/last';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CloseIcon, ChevronRightIcon } from 'tdesign-icons-react';
 import useDefault from '../_util/useDefault';
 import { Popup } from '../popup';
 import { RadioGroup } from '../radio';
+import { Search } from '../search';
 import Tabs from '../tabs';
 import { StyledProps, TreeOptionData } from '../common';
 import { usePrefixClass } from '../hooks/useClass';
@@ -13,10 +14,98 @@ import useConfig from '../hooks/useConfig';
 import useDefaultProps from '../hooks/useDefaultProps';
 import parseTNode from '../_util/parseTNode';
 import { cascaderDefaultProps } from './defaultProps';
-import { CascaderTriggerSource, TdCascaderProps } from './type';
+import { CascaderFilterFunction, CascaderTriggerSource, TdCascaderProps } from './type';
+
+type OptionsType = TreeOptionData[];
+
+type FlatPath = {
+  key: string;
+  path: TreeOptionData[];
+  indexes: number[];
+  labels: string[];
+  text: string;
+  disabled: boolean;
+};
+
+type ResultFragment = { id: number; text: string; highlight: boolean };
+
+type FilterResult = {
+  key: string;
+  indexes: number[];
+  disabled: boolean;
+  fragments: ResultFragment[];
+};
 
 export interface CascaderProps extends TdCascaderProps, StyledProps {}
 
+function flattenPaths(
+  options: OptionsType,
+  keys: { label: string; value: string; children: string; disabled: string },
+): FlatPath[] {
+  const result: FlatPath[] = [];
+
+  const walk = (list: TreeOptionData[], path: TreeOptionData[], indexes: number[]) => {
+    list.forEach((item, idx) => {
+      const nextPath = [...path, item];
+      const nextIndexes = [...indexes, idx];
+      const children = item[keys.children];
+      if (Array.isArray(children) && children.length > 0) {
+        walk(children as TreeOptionData[], nextPath, nextIndexes);
+      } else {
+        const labels = nextPath.map((node) => String(node[keys.label] ?? ''));
+        const text = [labels.join(''), String(item?.text ?? '')].filter(Boolean).join('');
+        result.push({
+          key: nextPath.map((node) => String(node[keys.value] ?? '')).join('/'),
+          path: nextPath,
+          indexes: nextIndexes,
+          labels,
+          text,
+          disabled: nextPath.some((node) => node[keys.disabled]),
+        });
+      }
+    });
+  };
+
+  walk(options || [], [], []);
+  return result;
+}
+
+function buildFragments(labels: string[], keyword: string): ResultFragment[] {
+  const joined = labels.join(' / ');
+  const push = (acc: ResultFragment[], text: string, highlight: boolean) => {
+    if (!text) return;
+    acc.push({ id: acc.length, text, highlight });
+  };
+
+  if (!keyword) return [{ id: 0, text: joined, highlight: false }];
+
+  const fragments: ResultFragment[] = [];
+  const haystack = joined.toLowerCase();
+  const needle = keyword.toLowerCase();
+  let cursor = 0;
+  while (cursor < joined.length) {
+    const hit = haystack.indexOf(needle, cursor);
+    if (hit === -1) {
+      push(fragments, joined.slice(cursor), false);
+      break;
+    }
+    push(fragments, joined.slice(cursor, hit), false);
+    push(fragments, joined.slice(hit, hit + needle.length), true);
+    cursor = hit + needle.length;
+  }
+  return fragments.length ? fragments : [{ id: 0, text: joined, highlight: false }];
+}
+
+function defaultFilter(keyword: string, _option: TreeOptionData, path: TreeOptionData[], labelKey: string): boolean {
+  const lower = keyword.toLowerCase();
+  const joined = path
+    .map((node) => String(node?.[labelKey] ?? ''))
+    .join('')
+    .toLowerCase();
+  const text = String(path[path.length - 1]?.text ?? '').toLowerCase();
+  return joined.includes(lower) || (!!text && text.includes(lower));
+}
+
 const Cascader: React.FC<CascaderProps> = (props) => {
   const cascaderClass = usePrefixClass('cascader');
   const globalConfig = useConfig();
@@ -39,18 +128,29 @@ const Cascader: React.FC<CascaderProps> = (props) => {
     checkStrictly,
     closeBtn,
     load,
+    filter,
+    filterPlaceholder,
+    filterable,
     onChange,
     onClose,
     onPick,
   } = useDefaultProps<CascaderProps>(props, cascaderDefaultProps);
 
   const placeholderText = placeholder ?? globalConfig?.cascader?.placeholder;
+  const filterPlaceholderText = filterPlaceholder ?? globalConfig?.cascader?.filterPlaceholder;
 
   const [internalValue, setInternalValue] = useDefault(value, defaultValue, onChange);
   const [internalVisible, setInternalVisible] = useDefault(visible, false, () => ({}));
   const [internalSelectedValues, setInternalSelectedValues] = useState<CascaderProps['value'][]>([]);
   const [stepIndex, setStepIndex] = useState(0);
 
+  // 搜索相关状态
+  const [filterKeyword, setFilterKeyword] = useState('');
+  const [filterResults, setFilterResults] = useState<FilterResult[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const filterDebouncedRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const flatPathsRef = useRef<FlatPath[]>([]);
+
   const normalizedKeys = useMemo(
     () => ({
       label: keys?.label ?? 'label',
@@ -157,6 +257,132 @@ const Cascader: React.FC<CascaderProps> = (props) => {
     [onClose, normalizedKeys, optionsList, setInternalValue, setInternalVisible],
   );
 
+  // 搜索相关函数
+  const ensureFlatPaths = useCallback(() => {
+    if (flatPathsRef.current.length === 0) {
+      flatPathsRef.current = flattenPaths(inputOptions, normalizedKeys);
+    }
+    return flatPathsRef.current;
+  }, [inputOptions, normalizedKeys]);
+
+  const resetFilter = useCallback(() => {
+    setFilterKeyword('');
+    setFilterResults([]);
+    setIsSearching(false);
+  }, []);
+
+  const applyFilter = useCallback(
+    (rawKeyword: string) => {
+      const keyword = String(rawKeyword ?? '').trim();
+      if (!keyword) {
+        resetFilter();
+        return;
+      }
+
+      const userFilter = filter as CascaderFilterFunction | null;
+      const flat = ensureFlatPaths();
+      const results: FilterResult[] = [];
+
+      flat.forEach((entry: FlatPath) => {
+        const leaf = entry.path[entry.path.length - 1];
+        const matched =
+          typeof userFilter === 'function'
+            ? !!userFilter(keyword, leaf, entry.path)
+            : defaultFilter(keyword, leaf, entry.path, normalizedKeys.label);
+        if (matched) {
+          results.push({
+            key: entry.key,
+            indexes: entry.indexes,
+            disabled: entry.disabled,
+            fragments: buildFragments(entry.labels, keyword),
+          });
+        }
+      });
+
+      setFilterKeyword(rawKeyword);
+      setFilterResults(results);
+      setIsSearching(true);
+    },
+    [filter, normalizedKeys, ensureFlatPaths, resetFilter],
+  );
+
+  const handleFilterChange = useCallback(
+    (value: string) => {
+      if (filterDebouncedRef.current) {
+        clearTimeout(filterDebouncedRef.current);
+      }
+      filterDebouncedRef.current = setTimeout(() => {
+        applyFilter(value);
+      }, 200);
+    },
+    [applyFilter],
+  );
+
+  const handleFilterClear = useCallback(() => {
+    if (filterDebouncedRef.current) {
+      clearTimeout(filterDebouncedRef.current);
+    }
+    resetFilter();
+  }, [resetFilter]);
+
+  const handleFilterResultTap = useCallback(
+    (result: FilterResult) => {
+      if (result.disabled) return;
+
+      const { indexes } = result;
+      const selectedValues: CascaderProps['value'][] = [];
+      const selectedOptions: { [key: string]: any }[] = [];
+      const labelKey = normalizedKeys.label;
+      const valueKey = normalizedKeys.value;
+      const childrenKey = normalizedKeys.children;
+
+      let current: TreeOptionData[] = inputOptions;
+      for (let i = 0; i < indexes.length; i++) {
+        const index = indexes[i];
+        const next = current[index];
+        selectedValues.push(next[valueKey]);
+        selectedOptions.push({
+          [labelKey]: next[labelKey],
+          [valueKey]: next[valueKey],
+        });
+        const children = next[childrenKey];
+        if (Array.isArray(children) && children.length > 0) {
+          current = children as TreeOptionData[];
+        }
+      }
+
+      resetFilter();
+      setInternalValue(last(selectedValues), selectedOptions as any);
+      setInternalVisible(false);
+      onClose?.('finish');
+    },
+    [normalizedKeys, inputOptions, setInternalValue, setInternalVisible, onClose, resetFilter],
+  );
+
+  // 清理防抖定时器
+  useEffect(
+    () => () => {
+      if (filterDebouncedRef.current) {
+        clearTimeout(filterDebouncedRef.current);
+      }
+    },
+    [],
+  );
+
+  // visible 变化时重置搜索状态
+  useEffect(() => {
+    if (!internalVisible) {
+      resetFilter();
+    }
+  }, [internalVisible, resetFilter]);
+
+  // filterable 关闭时重置搜索状态
+  useEffect(() => {
+    if (!filterable && isSearching) {
+      resetFilter();
+    }
+  }, [filterable, isSearching, resetFilter]);
+
   return (
     <Popup
       visible={internalVisible}
@@ -184,109 +410,155 @@ const Cascader: React.FC<CascaderProps> = (props) => {
         </div>
         {parseTNode(header)}
         <div className={`${cascaderClass}__content`}>
-          {labelList.length > 0 && (
-            <div>
-              {theme === 'step' ? (
-                <div className={`${cascaderClass}__steps`}>
-                  {labelList.map((labelItem, index) => (
-                    <div key={index} className={`${cascaderClass}__step`} onClick={() => setStepIndex(index)}>
-                      <div
-                        className={classNames(`${cascaderClass}__step-dot`, {
-                          [`${cascaderClass}__step-dot--active`]: !labelItem.isPlaceholder,
-                          [`${cascaderClass}__step-dot--last`]: index === labelList.length - 1,
-                        })}
-                      />
-                      <div
-                        className={classNames(`${cascaderClass}__step-label`, {
-                          [`${cascaderClass}__step-label--active`]: index === stepIndex,
-                        })}
-                      >
-                        {parseTNode(labelItem.label)}
-                      </div>
-                      <ChevronRightIcon size={22} className={`${cascaderClass}__step-arrow`} />
+          {/* 搜索框 */}
+          {filterable && (
+            <div className={`${cascaderClass}__filter`}>
+              <Search
+                value={filterKeyword}
+                placeholder={filterPlaceholderText}
+                clearable
+                onChange={handleFilterChange}
+                onClear={handleFilterClear}
+              />
+            </div>
+          )}
+
+          {!isSearching ? (
+            <>
+              {labelList.length > 0 && (
+                <div>
+                  {theme === 'step' ? (
+                    <div className={`${cascaderClass}__steps`}>
+                      {labelList.map((labelItem, index) => (
+                        <div key={index} className={`${cascaderClass}__step`} onClick={() => setStepIndex(index)}>
+                          <div
+                            className={classNames(`${cascaderClass}__step-dot`, {
+                              [`${cascaderClass}__step-dot--active`]: !labelItem.isPlaceholder,
+                              [`${cascaderClass}__step-dot--last`]: index === labelList.length - 1,
+                            })}
+                          />
+                          <div
+                            className={classNames(`${cascaderClass}__step-label`, {
+                              [`${cascaderClass}__step-label--active`]: index === stepIndex,
+                            })}
+                          >
+                            {parseTNode(labelItem.label)}
+                          </div>
+                          <ChevronRightIcon size={22} className={`${cascaderClass}__step-arrow`} />
+                        </div>
+                      ))}
                     </div>
-                  ))}
+                  ) : null}
+                  {theme === 'tab' && internalVisible ? (
+                    <Tabs
+                      list={labelList.map((item, index) => ({
+                        label: item.label,
+                        value: index,
+                      }))}
+                      spaceEvenly={false}
+                      value={stepIndex}
+                      onChange={(nextValue: number) => {
+                        setStepIndex(nextValue);
+                      }}
+                    />
+                  ) : null}
                 </div>
+              )}
+              {parseTNode(middleContent)}
+              {subTitles[stepIndex] ? (
+                <div className={`${cascaderClass}__options-title`}>{subTitles[stepIndex]}</div>
               ) : null}
-              {theme === 'tab' && internalVisible ? (
-                <Tabs
-                  list={labelList.map((item, index) => ({
-                    label: item.label,
-                    value: index,
-                  }))}
-                  spaceEvenly={false}
-                  value={stepIndex}
-                  onChange={(nextValue: number) => {
-                    setStepIndex(nextValue);
-                  }}
-                />
-              ) : null}
-            </div>
-          )}
-          {parseTNode(middleContent)}
-          {subTitles[stepIndex] ? (
-            <div className={`${cascaderClass}__options-title`}>{subTitles[stepIndex]}</div>
-          ) : null}
-          <div
-            className={`${cascaderClass}__options-container`}
-            style={{
-              width: `${optionsList.length}00vw`,
-              transform: `translateX(-${stepIndex}00vw)`,
-            }}
-          >
-            {optionsList.map((currentOptions, index) => (
-              <div className={`${cascaderClass}__options`} key={index}>
-                <div className={`${cascaderClass}-radio-group-${index}`}>
-                  <RadioGroup
-                    placement="right"
-                    icon="line"
-                    borderless
-                    value={internalSelectedValues[index]}
-                    options={currentOptions}
-                    onChange={(nextValue: string | number) => {
-                      const targetIndex = currentOptions.findIndex((item) => item.value === nextValue);
-                      const target = currentOptions[targetIndex];
-                      const selectedValues = [...internalSelectedValues.slice(0, index), nextValue];
-
-                      setInternalSelectedValues(selectedValues);
-                      onPick?.({
-                        value: nextValue,
-                        label: String(target?.label || ''),
-                        index: targetIndex,
-                        level: index,
-                      });
-
-                      if (target?.children === true && load) {
-                        load({ data: target.data, value: target.value, label: target.label })
-                          .then((loadedChildren) => {
-                            setOptionsList((prev) => [
-                              ...prev.slice(0, index + 1),
-                              normalizeOptionsByKeys(loadedChildren),
-                            ]);
-                            setStepIndex(index + 1);
-                          })
-                          .catch((error) => {
-                            console.error('Load children failed:', error);
+              <div
+                className={`${cascaderClass}__options-container`}
+                style={{
+                  width: `${optionsList.length}00vw`,
+                  transform: `translateX(-${stepIndex}00vw)`,
+                }}
+              >
+                {optionsList.map((currentOptions, index) => (
+                  <div className={`${cascaderClass}__options`} key={index}>
+                    <div className={`${cascaderClass}-radio-group-${index}`}>
+                      <RadioGroup
+                        placement="right"
+                        icon="line"
+                        borderless
+                        value={internalSelectedValues[index]}
+                        options={currentOptions}
+                        onChange={(nextValue: string | number) => {
+                          const targetIndex = currentOptions.findIndex((item) => item.value === nextValue);
+                          const target = currentOptions[targetIndex];
+                          const selectedValues = [...internalSelectedValues.slice(0, index), nextValue];
+
+                          setInternalSelectedValues(selectedValues);
+                          onPick?.({
+                            value: nextValue,
+                            label: String(target?.label || ''),
+                            index: targetIndex,
+                            level: index,
                           });
-                        return;
-                      }
-
-                      if (target && Array.isArray(target.children) && target.children.length > 0) {
-                        const children = target.children as TreeOptionData[];
-                        setOptionsList((prev) => [...prev.slice(0, index + 1), children]);
-                        setStepIndex(index + 1);
-                        return;
-                      }
-
-                      setOptionsList((prev) => prev.slice(0, index + 1));
-                      setStepIndex(index);
-                      onFinish(selectedValues);
-                    }}
-                  />
-                </div>
+
+                          if (target?.children === true && load) {
+                            load({ data: target.data, value: target.value, label: target.label })
+                              .then((loadedChildren) => {
+                                setOptionsList((prev) => [
+                                  ...prev.slice(0, index + 1),
+                                  normalizeOptionsByKeys(loadedChildren),
+                                ]);
+                                setStepIndex(index + 1);
+                              })
+                              .catch((error) => {
+                                console.error('Load children failed:', error);
+                              });
+                            return;
+                          }
+
+                          if (target && Array.isArray(target.children) && target.children.length > 0) {
+                            const children = target.children as TreeOptionData[];
+                            setOptionsList((prev) => [...prev.slice(0, index + 1), children]);
+                            setStepIndex(index + 1);
+                            return;
+                          }
+
+                          setOptionsList((prev) => prev.slice(0, index + 1));
+                          setStepIndex(index);
+                          onFinish(selectedValues);
+                        }}
+                      />
+                    </div>
+                  </div>
+                ))}
               </div>
-            ))}
-          </div>
+            </>
+          ) : (
+            <>
+              {filterResults.length > 0 ? (
+                <div className={`${cascaderClass}__filter-result`}>
+                  {filterResults.map((result) => (
+                    <div
+                      key={result.key}
+                      className={classNames(`${cascaderClass}__filter-result-item`, {
+                        [`${cascaderClass}__filter-result-item--disabled`]: result.disabled,
+                      })}
+                      onClick={() => handleFilterResultTap(result)}
+                    >
+                      {result.fragments.map((frag) => (
+                        <span
+                          key={frag.id}
+                          className={classNames({
+                            [`${cascaderClass}__filter-highlight`]: frag.highlight,
+                          })}
+                        >
+                          {frag.text}
+                        </span>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className={`${cascaderClass}__filter-empty`}>{globalConfig.cascader.empty}</div>
+              )}
+            </>
+          )}
         </div>
       </div>
     </Popup>
diff --git a/src/cascader/__tests__/cascader.test.tsx b/src/cascader/__tests__/cascader.test.tsx
index 5d6467d65..3d145bc70 100644
--- a/src/cascader/__tests__/cascader.test.tsx
+++ b/src/cascader/__tests__/cascader.test.tsx
@@ -409,6 +409,134 @@ describe('Cascader', () => {
 
       expect(onClose).toHaveBeenCalledWith('finish');
     });
+
+    it(': filterable', async () => {
+      const filterableOptions = [
+        {
+          label: '北京市',
+          value: '110000',
+          children: [
+            {
+              label: '北京市',
+              value: '110100',
+              children: [
+                { label: '海淀区', value: '110108' },
+                { label: '朝阳区', value: '110105' },
+              ],
+            },
+          ],
+        },
+        {
+          label: '上海市',
+          value: '310000',
+          children: [{ label: '上海市', value: '310100', children: [{ label: '浦东新区', value: '310115' }] }],
+        },
+        {
+          label: '广东省',
+          value: '440000',
+          children: [{ label: '珠海市', value: '440400' }],
+        },
+      ];
+
+      const renderCascader = (overrides = {}) => {
+        const props: CascaderProps = {
+          visible: true,
+          filterable: true,
+          options: filterableOptions,
+          ...overrides,
+        };
+        return render(<Cascader {...props} />);
+      };
+
+      const typeInSearch = (value: string) => {
+        const searchInput = document.querySelector('.t-search input') as HTMLInputElement;
+        fireEvent.input(searchInput, { target: { value } });
+      };
+
+      // renders search input
+      renderCascader();
+      expect(document.querySelector('.t-search')).toBeTruthy();
+
+      // default filter matches full-path label
+      typeInSearch('海');
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+      const results = document.querySelectorAll(`${name}__filter-result-item`);
+      expect(results.length).toBeGreaterThan(0);
+
+      // shows empty state when no match
+      typeInSearch('xxxxx');
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+      expect(document.querySelector(`${name}__filter-empty`)).toBeTruthy();
+    });
+
+    it(': filterable - custom filter function', async () => {
+      const filterableOptions = [
+        {
+          label: '北京市',
+          value: '110000',
+          children: [
+            {
+              label: '北京市',
+              value: '110100',
+              children: [{ label: '海淀区', value: '110108' }],
+            },
+          ],
+        },
+        {
+          label: '上海市',
+          value: '310000',
+          children: [{ label: '上海市', value: '310100', children: [{ label: '浦东新区', value: '310115' }] }],
+        },
+      ];
+
+      const customFilter = vi.fn((keyword: string, option: any) => option.label === keyword);
+      render(<Cascader visible filterable options={filterableOptions} filter={customFilter} />);
+
+      const searchInput = document.querySelector('.t-search input') as HTMLInputElement;
+      fireEvent.input(searchInput, { target: { value: '浦东新区' } });
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+
+      expect(customFilter).toHaveBeenCalled();
+    });
+
+    it(': filterable - selecting result closes cascader', async () => {
+      const filterableOptions = [
+        {
+          label: '北京市',
+          value: '110000',
+          children: [
+            {
+              label: '北京市',
+              value: '110100',
+              children: [{ label: '海淀区', value: '110108' }],
+            },
+          ],
+        },
+      ];
+
+      const onChange = vi.fn();
+      const onClose = vi.fn();
+      render(<Cascader visible filterable options={filterableOptions} onChange={onChange} onClose={onClose} />);
+
+      const searchInput = document.querySelector('.t-search input') as HTMLInputElement;
+      fireEvent.input(searchInput, { target: { value: '海淀' } });
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+
+      const resultItem = document.querySelector(`${name}__filter-result-item`);
+      expect(resultItem).toBeTruthy();
+
+      fireEvent.click(resultItem);
+      expect(onChange).toHaveBeenCalled();
+      expect(onClose).toHaveBeenCalledWith('finish');
+    });
   });
 
   it(': lazy demo unlocks after loading and allows selection', async () => {
diff --git a/src/cascader/_example/filterable.tsx b/src/cascader/_example/filterable.tsx
new file mode 100644
index 000000000..235fbf187
--- /dev/null
+++ b/src/cascader/_example/filterable.tsx
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+
+import { Cascader, Cell } from 'tdesign-mobile-react';
+
+const data = {
+  areaList: [
+    {
+      label: '北京市',
+      value: '110000',
+      children: [
+        {
+          value: '110100',
+          label: '北京市',
+          children: [
+            { value: '110101', label: '东城区' },
+            { value: '110102', label: '西城区' },
+            { value: '110105', label: '朝阳区' },
+            { value: '110106', label: '丰台区' },
+            { value: '110107', label: '石景山区' },
+            { value: '110108', label: '海淀区' },
+            { value: '110109', label: '门头沟区' },
+            { value: '110111', label: '房山区' },
+            { value: '110112', label: '通州区' },
+            { value: '110113', label: '顺义区' },
+            { value: '110114', label: '昌平区' },
+            { value: '110115', label: '大兴区' },
+            { value: '110116', label: '怀柔区' },
+            { value: '110117', label: '平谷区' },
+            { value: '110118', label: '密云区' },
+            { value: '110119', label: '延庆区' },
+          ],
+        },
+      ],
+    },
+    {
+      label: '上海市',
+      value: '310000',
+      children: [
+        {
+          value: '310100',
+          label: '上海市',
+          children: [
+            { value: '310101', label: '黄浦区' },
+            { value: '310104', label: '徐汇区' },
+            { value: '310105', label: '长宁区' },
+            { value: '310106', label: '静安区' },
+            { value: '310107', label: '普陀区' },
+            { value: '310109', label: '虹口区' },
+            { value: '310110', label: '杨浦区' },
+            { value: '310112', label: '闵行区' },
+            { value: '310113', label: '宝山区' },
+            { value: '310114', label: '嘉定区' },
+            { value: '310115', label: '浦东新区' },
+          ],
+        },
+      ],
+    },
+    {
+      label: '广东省',
+      value: '440000',
+      children: [
+        {
+          value: '440100',
+          label: '广州市',
+          children: [
+            { value: '440103', label: '荔湾区' },
+            { value: '440104', label: '越秀区' },
+            { value: '440105', label: '海珠区' },
+            { value: '440106', label: '天河区' },
+            { value: '440111', label: '白云区' },
+          ],
+        },
+        {
+          value: '440300',
+          label: '深圳市',
+          children: [
+            { value: '440303', label: '罗湖区' },
+            { value: '440304', label: '福田区' },
+            { value: '440305', label: '南山区' },
+            { value: '440306', label: '宝安区' },
+            { value: '440307', label: '龙岗区' },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export default function FilterableDemo() {
+  const [visible, setVisible] = useState(false);
+
+  const [note, setNote] = useState('请选择地址');
+
+  const [value, setValue] = useState<string | number | undefined>();
+
+  return (
+    <>
+      <Cell
+        title="地址"
+        note={note}
+        arrow
+        onClick={() => {
+          setVisible(true);
+        }}
+      />
+      <Cascader
+        title="请选择地址"
+        value={value}
+        visible={visible}
+        options={data.areaList}
+        filterable
+        filterPlaceholder="搜索省/市/区"
+        onChange={(value, selectedOptions) => {
+          setNote((selectedOptions as any).map((item) => item.label).join('/') || '');
+          setValue(value);
+        }}
+        onClose={() => {
+          setVisible(false);
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/cascader/_example/index.tsx b/src/cascader/_example/index.tsx
index e0630c4eb..9f90d6214 100644
--- a/src/cascader/_example/index.tsx
+++ b/src/cascader/_example/index.tsx
@@ -3,6 +3,7 @@ import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
 import BaseDemo from './base';
 import CheckStrictlyDemo from './check-strictly';
+import FilterableDemo from './filterable';
 import KeysDemo from './keys';
 import LazyDemo from './lazy';
 import ThemeTabDemo from './theme-tab';
@@ -36,6 +37,9 @@ export default function CascaderDemo() {
       <TDemoBlock summary="选择任意一项">
         <CheckStrictlyDemo />
       </TDemoBlock>
+      <TDemoBlock summary="支持搜索">
+        <FilterableDemo />
+      </TDemoBlock>
     </div>
   );
 }

From 805bd9fccf3259cb599a943676240768518c4b72 Mon Sep 17 00:00:00 2001
From: v_luopinluo <173308582@qq.com>
Date: Wed, 23 Sep 2026 16:58:44 +0800
Subject: [PATCH 2/7] =?UTF-8?q?fix(cascder):=20=E6=96=87=E6=A1=A3=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cascader/cascader.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md
index ce6d2b44e..c3c609c30 100644
--- a/src/cascader/cascader.md
+++ b/src/cascader/cascader.md
@@ -10,9 +10,9 @@ className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
 closeBtn | TNode | true | 关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-filter | Function | - |  【开发中】自定义过滤函数。返回 true 表示匹配，未设置时使用内置匹配规则：对路径中所有 label 拼接后做大小写不敏感的 includes 匹配。TS 类型：`CascaderFilterFunction ` `type CascaderFilterFunction<CascaderOption extends TreeOptionData = TreeOptionData> = (keyword: string, option: CascaderOption, path: CascaderOption[]) => boolean`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts) | N
-filterPlaceholder | String | - | 【开发中】搜索框占位符描述文本 | N
-filterable | Boolean | false | 【开发中】是否可搜索，开启后顶部会展示一个搜索框  | N
+filter | Function | - |  自定义过滤函数。返回 true 表示匹配，未设置时使用内置匹配规则：对路径中所有 label 拼接后做大小写不敏感的 includes 匹配。TS 类型：`CascaderFilterFunction ` `type CascaderFilterFunction<CascaderOption extends TreeOptionData = TreeOptionData> = (keyword: string, option: CascaderOption, path: CascaderOption[]) => boolean`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts) | N
+filterPlaceholder | String | - | 搜索框占位符描述文本 | N
+filterable | Boolean | false | 是否可搜索，开启后顶部会展示一个搜索框  | N
 header | TElement | - | `0.21.2`。头部。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `type CascaderKeysType = TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts) | N
 load | Function | - | 加载子树数据的方法（仅当节点 children 为 true 时生效）。TS 类型：`(node: CascaderOption) => Promise<Array<CascaderOption>>` | N

From 6d1f488ee610e639bd02f1b2605f311e814e444f Mon Sep 17 00:00:00 2001
From: v_luopinluo <173308582@qq.com>
Date: Wed, 23 Sep 2026 17:09:39 +0800
Subject: [PATCH 3/7] =?UTF-8?q?fix(cascader):=20config-provider=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config-provider/config-provider.en-US.md |  2 ++
 src/config-provider/config-provider.md       |  2 ++
 src/config-provider/type.ts                  | 10 ++++++++++
 3 files changed, 14 insertions(+)

diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md
index a707b8e79..15842d946 100644
--- a/src/config-provider/config-provider.en-US.md
+++ b/src/config-provider/config-provider.en-US.md
@@ -50,6 +50,8 @@ weekdays | Array | - | Typescript: `string[]` | N
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+empty | String | - | \- | N
+filterPlaceholder | String | - | \- | N
 placeholder | String | - | \- | N
 title | String | - | \- | N
 
diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md
index aacb5a48f..ba7959640 100644
--- a/src/config-provider/config-provider.md
+++ b/src/config-provider/config-provider.md
@@ -50,6 +50,8 @@ weekdays | Array | - | 星期文本描述，默认值：['日', '一', '二', '
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
+empty | String | - | 语言配置，“暂无数据”描述文本 | N
+filterPlaceholder | String | - | 语言配置，“搜索框”占位描述文本 | N
 placeholder | String | - | 语言配置，未选中时的提示文案“选择选项”描述文本 | N
 title | String | - | 语言配置，组件标题“选择地址”描述文本 | N
 
diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts
index f7f72e787..0bf632b1d 100644
--- a/src/config-provider/type.ts
+++ b/src/config-provider/type.ts
@@ -122,6 +122,16 @@ export interface CalendarConfig {
 }
 
 export interface CascaderConfig {
+  /**
+   * 语言配置，“暂无数据”描述文本
+   * @default ''
+   */
+  empty?: string;
+  /**
+   * 语言配置，“搜索框”占位描述文本
+   * @default ''
+   */
+  filterPlaceholder?: string;
   /**
    * 语言配置，未选中时的提示文案“选择选项”描述文本
    * @default ''

From 705472b54b422a29eb001dcba31c74b8ef042a03 Mon Sep 17 00:00:00 2001
From: v_luopinluo <173308582@qq.com>
Date: Thu, 24 Sep 2026 11:18:52 +0800
Subject: [PATCH 4/7] =?UTF-8?q?fix(cascader):=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E5=BF=AB=E7=85=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/snap/__snapshots__/csr.test.jsx.snap | 1456 +++++++++++++++------
 test/snap/__snapshots__/ssr.test.jsx.snap |    4 +-
 2 files changed, 1080 insertions(+), 380 deletions(-)

diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 3ddca6eba..73e1a6cf3 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -118,7 +118,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] =
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-bookmark-instance-_r_12v_-overlap-fill1"
+                        id="t-icon-bookmark-instance-_r_137_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -149,7 +149,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] =
                         d="M5 4H19V21L12 16L5 21V4Z"
                         fill="transparent"
                         id="fill1"
-                        mask="url(#t-icon-bookmark-instance-_r_12v_-overlap-fill1)"
+                        mask="url(#t-icon-bookmark-instance-_r_137_-overlap-fill1)"
                       />
                       <path
                         d="M5 4H19V21L12 16L5 21V4Z"
@@ -195,7 +195,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] =
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-pin-instance-_r_130_-overlap-fill1"
+                        id="t-icon-pin-instance-_r_138_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -226,7 +226,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] =
                         d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
                         fill="transparent"
                         id="fill1"
-                        mask="url(#t-icon-pin-instance-_r_130_-overlap-fill1)"
+                        mask="url(#t-icon-pin-instance-_r_138_-overlap-fill1)"
                       />
                       <path
                         d="M2.16016 21.8358L8.52412 15.4718M17.7197 2.04004L21.9621 6.28235L15.5973 14.0555L17.7185 16.1768L13.4738 20.4215L3.57431 10.522L7.81905 6.27728L9.94043 8.39867L17.7197 2.04004Z"
@@ -404,7 +404,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] =
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-bookmark-instance-_r_133_-overlap-fill1"
+                        id="t-icon-bookmark-instance-_r_13b_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -435,7 +435,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] =
                         d="M5 4H19V21L12 16L5 21V4Z"
                         fill="transparent"
                         id="fill1"
-                        mask="url(#t-icon-bookmark-instance-_r_133_-overlap-fill1)"
+                        mask="url(#t-icon-bookmark-instance-_r_13b_-overlap-fill1)"
                       />
                       <path
                         d="M5 4H19V21L12 16L5 21V4Z"
@@ -481,7 +481,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] =
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-pin-instance-_r_134_-overlap-fill1"
+                        id="t-icon-pin-instance-_r_13c_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -512,7 +512,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/align.tsx 1`] =
                         d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
                         fill="transparent"
                         id="fill1"
-                        mask="url(#t-icon-pin-instance-_r_134_-overlap-fill1)"
+                        mask="url(#t-icon-pin-instance-_r_13c_-overlap-fill1)"
                       />
                       <path
                         d="M2.16016 21.8358L8.52412 15.4718M17.7197 2.04004L21.9621 6.28235L15.5973 14.0555L17.7185 16.1768L13.4738 20.4215L3.57431 10.522L7.81905 6.27728L9.94043 8.39867L17.7197 2.04004Z"
@@ -920,7 +920,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-share-instance-_r_12c_-overlap-fill1"
+                              id="t-icon-share-instance-_r_12k_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -949,7 +949,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           >
                             <g
                               id="fill1"
-                              mask="url(#t-icon-share-instance-_r_12c_-overlap-fill1)"
+                              mask="url(#t-icon-share-instance-_r_12k_-overlap-fill1)"
                             >
                               <path
                                 d="M19.4907 7.09662C20.9256 6.2682 21.4172 4.43343 20.5888 2.99855C19.7604 1.56367 17.9256 1.07204 16.4907 1.90047C15.0559 2.7289 14.5642 4.56367 15.3927 5.99855C16.2211 7.43342 18.0559 7.92505 19.4907 7.09662Z"
@@ -1009,7 +1009,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-star-instance-_r_12d_-overlap-fill1"
+                              id="t-icon-star-instance-_r_12l_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -1040,7 +1040,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                               d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-star-instance-_r_12d_-overlap-fill1)"
+                              mask="url(#t-icon-star-instance-_r_12l_-overlap-fill1)"
                             />
                             <path
                               d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
@@ -1131,7 +1131,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-edit-1-instance-_r_12f_-overlap-fill1"
+                              id="t-icon-edit-1-instance-_r_12n_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -1155,7 +1155,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                             </mask>
                             <mask
                               height="24"
-                              id="t-icon-edit-1-instance-_r_12f_-overlap-fill2"
+                              id="t-icon-edit-1-instance-_r_12n_-overlap-fill2"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -1185,13 +1185,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                               d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-edit-1-instance-_r_12f_-overlap-fill1)"
+                              mask="url(#t-icon-edit-1-instance-_r_12n_-overlap-fill1)"
                             />
                             <path
                               d="M21.5 7L17 2.5L13 6.5L17.5 11L21.5 7Z"
                               fill="transparent"
                               id="fill2"
-                              mask="url(#t-icon-edit-1-instance-_r_12f_-overlap-fill2)"
+                              mask="url(#t-icon-edit-1-instance-_r_12n_-overlap-fill2)"
                             />
                             <path
                               d="M12.9999 6.5L3 16.5L3 20.9999L7.4999 20.9999L17.4999 11M12.9999 6.5L17.4999 11M12.9999 6.5L16.9999 2.5L21.4999 7L17.4999 11"
@@ -1520,7 +1520,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-share-instance-_r_12g_-overlap-fill1"
+                              id="t-icon-share-instance-_r_12o_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -1549,7 +1549,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           >
                             <g
                               id="fill1"
-                              mask="url(#t-icon-share-instance-_r_12g_-overlap-fill1)"
+                              mask="url(#t-icon-share-instance-_r_12o_-overlap-fill1)"
                             >
                               <path
                                 d="M19.4907 7.09662C20.9256 6.2682 21.4172 4.43343 20.5888 2.99855C19.7604 1.56367 17.9256 1.07204 16.4907 1.90047C15.0559 2.7289 14.5642 4.56367 15.3927 5.99855C16.2211 7.43342 18.0559 7.92505 19.4907 7.09662Z"
@@ -1609,7 +1609,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-star-instance-_r_12h_-overlap-fill1"
+                              id="t-icon-star-instance-_r_12p_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -1640,7 +1640,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                               d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-star-instance-_r_12h_-overlap-fill1)"
+                              mask="url(#t-icon-star-instance-_r_12p_-overlap-fill1)"
                             />
                             <path
                               d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
@@ -1731,7 +1731,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-edit-1-instance-_r_12j_-overlap-fill1"
+                              id="t-icon-edit-1-instance-_r_12r_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -1755,7 +1755,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                             </mask>
                             <mask
                               height="24"
-                              id="t-icon-edit-1-instance-_r_12j_-overlap-fill2"
+                              id="t-icon-edit-1-instance-_r_12r_-overlap-fill2"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -1785,13 +1785,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                               d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-edit-1-instance-_r_12j_-overlap-fill1)"
+                              mask="url(#t-icon-edit-1-instance-_r_12r_-overlap-fill1)"
                             />
                             <path
                               d="M21.5 7L17 2.5L13 6.5L17.5 11L21.5 7Z"
                               fill="transparent"
                               id="fill2"
-                              mask="url(#t-icon-edit-1-instance-_r_12j_-overlap-fill2)"
+                              mask="url(#t-icon-edit-1-instance-_r_12r_-overlap-fill2)"
                             />
                             <path
                               d="M12.9999 6.5L3 16.5L3 20.9999L7.4999 20.9999L17.4999 11M12.9999 6.5L17.4999 11M12.9999 6.5L16.9999 2.5L21.4999 7L17.4999 11"
@@ -2182,7 +2182,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-share-instance-_r_12k_-overlap-fill1"
+                              id="t-icon-share-instance-_r_12s_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -2211,7 +2211,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           >
                             <g
                               id="fill1"
-                              mask="url(#t-icon-share-instance-_r_12k_-overlap-fill1)"
+                              mask="url(#t-icon-share-instance-_r_12s_-overlap-fill1)"
                             >
                               <path
                                 d="M19.4907 7.09662C20.9256 6.2682 21.4172 4.43343 20.5888 2.99855C19.7604 1.56367 17.9256 1.07204 16.4907 1.90047C15.0559 2.7289 14.5642 4.56367 15.3927 5.99855C16.2211 7.43342 18.0559 7.92505 19.4907 7.09662Z"
@@ -2271,7 +2271,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-star-instance-_r_12l_-overlap-fill1"
+                              id="t-icon-star-instance-_r_12t_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -2302,7 +2302,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                               d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-star-instance-_r_12l_-overlap-fill1)"
+                              mask="url(#t-icon-star-instance-_r_12t_-overlap-fill1)"
                             />
                             <path
                               d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
@@ -2393,7 +2393,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-edit-1-instance-_r_12n_-overlap-fill1"
+                              id="t-icon-edit-1-instance-_r_12v_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -2417,7 +2417,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                             </mask>
                             <mask
                               height="24"
-                              id="t-icon-edit-1-instance-_r_12n_-overlap-fill2"
+                              id="t-icon-edit-1-instance-_r_12v_-overlap-fill2"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -2447,13 +2447,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
                               d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-edit-1-instance-_r_12n_-overlap-fill1)"
+                              mask="url(#t-icon-edit-1-instance-_r_12v_-overlap-fill1)"
                             />
                             <path
                               d="M21.5 7L17 2.5L13 6.5L17.5 11L21.5 7Z"
                               fill="transparent"
                               id="fill2"
-                              mask="url(#t-icon-edit-1-instance-_r_12n_-overlap-fill2)"
+                              mask="url(#t-icon-edit-1-instance-_r_12v_-overlap-fill2)"
                             />
                             <path
                               d="M12.9999 6.5L3 16.5L3 20.9999L7.4999 20.9999L17.4999 11M12.9999 6.5L17.4999 11M12.9999 6.5L16.9999 2.5L21.4999 7L17.4999 11"
@@ -2803,7 +2803,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-share-instance-_r_12o_-overlap-fill1"
+                              id="t-icon-share-instance-_r_130_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -2832,7 +2832,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                           >
                             <g
                               id="fill1"
-                              mask="url(#t-icon-share-instance-_r_12o_-overlap-fill1)"
+                              mask="url(#t-icon-share-instance-_r_130_-overlap-fill1)"
                             >
                               <path
                                 d="M19.4907 7.09662C20.9256 6.2682 21.4172 4.43343 20.5888 2.99855C19.7604 1.56367 17.9256 1.07204 16.4907 1.90047C15.0559 2.7289 14.5642 4.56367 15.3927 5.99855C16.2211 7.43342 18.0559 7.92505 19.4907 7.09662Z"
@@ -2892,7 +2892,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-star-instance-_r_12p_-overlap-fill1"
+                              id="t-icon-star-instance-_r_131_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -2923,7 +2923,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                               d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-star-instance-_r_12p_-overlap-fill1)"
+                              mask="url(#t-icon-star-instance-_r_131_-overlap-fill1)"
                             />
                             <path
                               d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
@@ -3014,7 +3014,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-edit-1-instance-_r_12r_-overlap-fill1"
+                              id="t-icon-edit-1-instance-_r_133_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -3038,7 +3038,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                             </mask>
                             <mask
                               height="24"
-                              id="t-icon-edit-1-instance-_r_12r_-overlap-fill2"
+                              id="t-icon-edit-1-instance-_r_133_-overlap-fill2"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -3068,13 +3068,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                               d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-edit-1-instance-_r_12r_-overlap-fill1)"
+                              mask="url(#t-icon-edit-1-instance-_r_133_-overlap-fill1)"
                             />
                             <path
                               d="M21.5 7L17 2.5L13 6.5L17.5 11L21.5 7Z"
                               fill="transparent"
                               id="fill2"
-                              mask="url(#t-icon-edit-1-instance-_r_12r_-overlap-fill2)"
+                              mask="url(#t-icon-edit-1-instance-_r_133_-overlap-fill2)"
                             />
                             <path
                               d="M12.9999 6.5L3 16.5L3 20.9999L7.4999 20.9999L17.4999 11M12.9999 6.5L17.4999 11M12.9999 6.5L16.9999 2.5L21.4999 7L17.4999 11"
@@ -3130,7 +3130,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-image-instance-_r_12s_-overlap-fill1"
+                              id="t-icon-image-instance-_r_134_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -3154,7 +3154,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                             </mask>
                             <mask
                               height="24"
-                              id="t-icon-image-instance-_r_12s_-overlap-fill2"
+                              id="t-icon-image-instance-_r_134_-overlap-fill2"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -3186,14 +3186,14 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                               d="M3 21H20L9 10L3 16V21Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-image-instance-_r_12s_-overlap-fill1)"
+                              mask="url(#t-icon-image-instance-_r_134_-overlap-fill1)"
                             />
                             <circle
                               cx="15.75"
                               cy="8.25"
                               fill="transparent"
                               id="fill2"
-                              mask="url(#t-icon-image-instance-_r_12s_-overlap-fill2)"
+                              mask="url(#t-icon-image-instance-_r_134_-overlap-fill2)"
                               r="2"
                             />
                             <path
@@ -3244,7 +3244,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-image-instance-_r_12t_-overlap-fill1"
+                              id="t-icon-image-instance-_r_135_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -3268,7 +3268,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                             </mask>
                             <mask
                               height="24"
-                              id="t-icon-image-instance-_r_12t_-overlap-fill2"
+                              id="t-icon-image-instance-_r_135_-overlap-fill2"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -3300,14 +3300,14 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid-multiple.ts
                               d="M3 21H20L9 10L3 16V21Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-image-instance-_r_12t_-overlap-fill1)"
+                              mask="url(#t-icon-image-instance-_r_135_-overlap-fill1)"
                             />
                             <circle
                               cx="15.75"
                               cy="8.25"
                               fill="transparent"
                               id="fill2"
-                              mask="url(#t-icon-image-instance-_r_12t_-overlap-fill2)"
+                              mask="url(#t-icon-image-instance-_r_135_-overlap-fill2)"
                               r="2"
                             />
                             <path
@@ -3796,7 +3796,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-bookmark-instance-_r_11b_-overlap-fill1"
+                              id="t-icon-bookmark-instance-_r_11j_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -3827,7 +3827,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                               d="M5 4H19V21L12 16L5 21V4Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-bookmark-instance-_r_11b_-overlap-fill1)"
+                              mask="url(#t-icon-bookmark-instance-_r_11j_-overlap-fill1)"
                             />
                             <path
                               d="M5 4H19V21L12 16L5 21V4Z"
@@ -3873,7 +3873,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-pin-instance-_r_11c_-overlap-fill1"
+                              id="t-icon-pin-instance-_r_11k_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -3904,7 +3904,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                               d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-pin-instance-_r_11c_-overlap-fill1)"
+                              mask="url(#t-icon-pin-instance-_r_11k_-overlap-fill1)"
                             />
                             <path
                               d="M2.16016 21.8358L8.52412 15.4718M17.7197 2.04004L21.9621 6.28235L15.5973 14.0555L17.7185 16.1768L13.4738 20.4215L3.57431 10.522L7.81905 6.27728L9.94043 8.39867L17.7197 2.04004Z"
@@ -4510,7 +4510,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-share-instance-_r_11e_-overlap-fill1"
+                                    id="t-icon-share-instance-_r_11m_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -4539,7 +4539,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 >
                                   <g
                                     id="fill1"
-                                    mask="url(#t-icon-share-instance-_r_11e_-overlap-fill1)"
+                                    mask="url(#t-icon-share-instance-_r_11m_-overlap-fill1)"
                                   >
                                     <path
                                       d="M19.4907 7.09662C20.9256 6.2682 21.4172 4.43343 20.5888 2.99855C19.7604 1.56367 17.9256 1.07204 16.4907 1.90047C15.0559 2.7289 14.5642 4.56367 15.3927 5.99855C16.2211 7.43342 18.0559 7.92505 19.4907 7.09662Z"
@@ -4599,7 +4599,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-star-instance-_r_11f_-overlap-fill1"
+                                    id="t-icon-star-instance-_r_11n_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -4630,7 +4630,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                     d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
                                     fill="transparent"
                                     id="fill1"
-                                    mask="url(#t-icon-star-instance-_r_11f_-overlap-fill1)"
+                                    mask="url(#t-icon-star-instance-_r_11n_-overlap-fill1)"
                                   />
                                   <path
                                     d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
@@ -4721,7 +4721,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-edit-1-instance-_r_11h_-overlap-fill1"
+                                    id="t-icon-edit-1-instance-_r_11p_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -4745,7 +4745,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                   </mask>
                                   <mask
                                     height="24"
-                                    id="t-icon-edit-1-instance-_r_11h_-overlap-fill2"
+                                    id="t-icon-edit-1-instance-_r_11p_-overlap-fill2"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -4775,13 +4775,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                     d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
                                     fill="transparent"
                                     id="fill1"
-                                    mask="url(#t-icon-edit-1-instance-_r_11h_-overlap-fill1)"
+                                    mask="url(#t-icon-edit-1-instance-_r_11p_-overlap-fill1)"
                                   />
                                   <path
                                     d="M21.5 7L17 2.5L13 6.5L17.5 11L21.5 7Z"
                                     fill="transparent"
                                     id="fill2"
-                                    mask="url(#t-icon-edit-1-instance-_r_11h_-overlap-fill2)"
+                                    mask="url(#t-icon-edit-1-instance-_r_11p_-overlap-fill2)"
                                   />
                                   <path
                                     d="M12.9999 6.5L3 16.5L3 20.9999L7.4999 20.9999L17.4999 11M12.9999 6.5L17.4999 11M12.9999 6.5L16.9999 2.5L21.4999 7L17.4999 11"
@@ -5110,7 +5110,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-share-instance-_r_11i_-overlap-fill1"
+                                    id="t-icon-share-instance-_r_11q_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -5139,7 +5139,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 >
                                   <g
                                     id="fill1"
-                                    mask="url(#t-icon-share-instance-_r_11i_-overlap-fill1)"
+                                    mask="url(#t-icon-share-instance-_r_11q_-overlap-fill1)"
                                   >
                                     <path
                                       d="M19.4907 7.09662C20.9256 6.2682 21.4172 4.43343 20.5888 2.99855C19.7604 1.56367 17.9256 1.07204 16.4907 1.90047C15.0559 2.7289 14.5642 4.56367 15.3927 5.99855C16.2211 7.43342 18.0559 7.92505 19.4907 7.09662Z"
@@ -5199,7 +5199,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-star-instance-_r_11j_-overlap-fill1"
+                                    id="t-icon-star-instance-_r_11r_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -5230,7 +5230,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                     d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
                                     fill="transparent"
                                     id="fill1"
-                                    mask="url(#t-icon-star-instance-_r_11j_-overlap-fill1)"
+                                    mask="url(#t-icon-star-instance-_r_11r_-overlap-fill1)"
                                   />
                                   <path
                                     d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
@@ -5321,7 +5321,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-edit-1-instance-_r_11l_-overlap-fill1"
+                                    id="t-icon-edit-1-instance-_r_11t_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -5345,7 +5345,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                   </mask>
                                   <mask
                                     height="24"
-                                    id="t-icon-edit-1-instance-_r_11l_-overlap-fill2"
+                                    id="t-icon-edit-1-instance-_r_11t_-overlap-fill2"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -5375,13 +5375,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                     d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
                                     fill="transparent"
                                     id="fill1"
-                                    mask="url(#t-icon-edit-1-instance-_r_11l_-overlap-fill1)"
+                                    mask="url(#t-icon-edit-1-instance-_r_11t_-overlap-fill1)"
                                   />
                                   <path
                                     d="M21.5 7L17 2.5L13 6.5L17.5 11L21.5 7Z"
                                     fill="transparent"
                                     id="fill2"
-                                    mask="url(#t-icon-edit-1-instance-_r_11l_-overlap-fill2)"
+                                    mask="url(#t-icon-edit-1-instance-_r_11t_-overlap-fill2)"
                                   />
                                   <path
                                     d="M12.9999 6.5L3 16.5L3 20.9999L7.4999 20.9999L17.4999 11M12.9999 6.5L17.4999 11M12.9999 6.5L16.9999 2.5L21.4999 7L17.4999 11"
@@ -5772,7 +5772,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-share-instance-_r_11m_-overlap-fill1"
+                                    id="t-icon-share-instance-_r_11u_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -5801,7 +5801,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 >
                                   <g
                                     id="fill1"
-                                    mask="url(#t-icon-share-instance-_r_11m_-overlap-fill1)"
+                                    mask="url(#t-icon-share-instance-_r_11u_-overlap-fill1)"
                                   >
                                     <path
                                       d="M19.4907 7.09662C20.9256 6.2682 21.4172 4.43343 20.5888 2.99855C19.7604 1.56367 17.9256 1.07204 16.4907 1.90047C15.0559 2.7289 14.5642 4.56367 15.3927 5.99855C16.2211 7.43342 18.0559 7.92505 19.4907 7.09662Z"
@@ -5861,7 +5861,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-star-instance-_r_11n_-overlap-fill1"
+                                    id="t-icon-star-instance-_r_11v_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -5892,7 +5892,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                     d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
                                     fill="transparent"
                                     id="fill1"
-                                    mask="url(#t-icon-star-instance-_r_11n_-overlap-fill1)"
+                                    mask="url(#t-icon-star-instance-_r_11v_-overlap-fill1)"
                                   />
                                   <path
                                     d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
@@ -5983,7 +5983,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-edit-1-instance-_r_11p_-overlap-fill1"
+                                    id="t-icon-edit-1-instance-_r_121_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -6007,7 +6007,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                   </mask>
                                   <mask
                                     height="24"
-                                    id="t-icon-edit-1-instance-_r_11p_-overlap-fill2"
+                                    id="t-icon-edit-1-instance-_r_121_-overlap-fill2"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -6037,13 +6037,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                     d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
                                     fill="transparent"
                                     id="fill1"
-                                    mask="url(#t-icon-edit-1-instance-_r_11p_-overlap-fill1)"
+                                    mask="url(#t-icon-edit-1-instance-_r_121_-overlap-fill1)"
                                   />
                                   <path
                                     d="M21.5 7L17 2.5L13 6.5L17.5 11L21.5 7Z"
                                     fill="transparent"
                                     id="fill2"
-                                    mask="url(#t-icon-edit-1-instance-_r_11p_-overlap-fill2)"
+                                    mask="url(#t-icon-edit-1-instance-_r_121_-overlap-fill2)"
                                   />
                                   <path
                                     d="M12.9999 6.5L3 16.5L3 20.9999L7.4999 20.9999L17.4999 11M12.9999 6.5L17.4999 11M12.9999 6.5L16.9999 2.5L21.4999 7L17.4999 11"
@@ -6388,7 +6388,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-share-instance-_r_11q_-overlap-fill1"
+                                    id="t-icon-share-instance-_r_122_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -6417,7 +6417,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 >
                                   <g
                                     id="fill1"
-                                    mask="url(#t-icon-share-instance-_r_11q_-overlap-fill1)"
+                                    mask="url(#t-icon-share-instance-_r_122_-overlap-fill1)"
                                   >
                                     <path
                                       d="M19.4907 7.09662C20.9256 6.2682 21.4172 4.43343 20.5888 2.99855C19.7604 1.56367 17.9256 1.07204 16.4907 1.90047C15.0559 2.7289 14.5642 4.56367 15.3927 5.99855C16.2211 7.43342 18.0559 7.92505 19.4907 7.09662Z"
@@ -6477,7 +6477,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-star-instance-_r_11r_-overlap-fill1"
+                                    id="t-icon-star-instance-_r_123_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -6508,7 +6508,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                     d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
                                     fill="transparent"
                                     id="fill1"
-                                    mask="url(#t-icon-star-instance-_r_11r_-overlap-fill1)"
+                                    mask="url(#t-icon-star-instance-_r_123_-overlap-fill1)"
                                   />
                                   <path
                                     d="M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z"
@@ -6599,7 +6599,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-edit-1-instance-_r_11t_-overlap-fill1"
+                                    id="t-icon-edit-1-instance-_r_125_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -6623,7 +6623,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                   </mask>
                                   <mask
                                     height="24"
-                                    id="t-icon-edit-1-instance-_r_11t_-overlap-fill2"
+                                    id="t-icon-edit-1-instance-_r_125_-overlap-fill2"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -6653,13 +6653,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                     d="M3.0001 20.9999L7.5 20.9999L17.5 11L13 6.5L3.0001 16.5L3.0001 20.9999Z"
                                     fill="transparent"
                                     id="fill1"
-                                    mask="url(#t-icon-edit-1-instance-_r_11t_-overlap-fill1)"
+                                    mask="url(#t-icon-edit-1-instance-_r_125_-overlap-fill1)"
                                   />
                                   <path
                                     d="M21.5 7L17 2.5L13 6.5L17.5 11L21.5 7Z"
                                     fill="transparent"
                                     id="fill2"
-                                    mask="url(#t-icon-edit-1-instance-_r_11t_-overlap-fill2)"
+                                    mask="url(#t-icon-edit-1-instance-_r_125_-overlap-fill2)"
                                   />
                                   <path
                                     d="M12.9999 6.5L3 16.5L3 20.9999L7.4999 20.9999L17.4999 11M12.9999 6.5L17.4999 11M12.9999 6.5L16.9999 2.5L21.4999 7L17.4999 11"
@@ -6715,7 +6715,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-image-instance-_r_11u_-overlap-fill1"
+                                    id="t-icon-image-instance-_r_126_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -6739,7 +6739,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                   </mask>
                                   <mask
                                     height="24"
-                                    id="t-icon-image-instance-_r_11u_-overlap-fill2"
+                                    id="t-icon-image-instance-_r_126_-overlap-fill2"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -6771,14 +6771,14 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                     d="M3 21H20L9 10L3 16V21Z"
                                     fill="transparent"
                                     id="fill1"
-                                    mask="url(#t-icon-image-instance-_r_11u_-overlap-fill1)"
+                                    mask="url(#t-icon-image-instance-_r_126_-overlap-fill1)"
                                   />
                                   <circle
                                     cx="15.75"
                                     cy="8.25"
                                     fill="transparent"
                                     id="fill2"
-                                    mask="url(#t-icon-image-instance-_r_11u_-overlap-fill2)"
+                                    mask="url(#t-icon-image-instance-_r_126_-overlap-fill2)"
                                     r="2"
                                   />
                                   <path
@@ -6829,7 +6829,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                 <defs>
                                   <mask
                                     height="24"
-                                    id="t-icon-image-instance-_r_11v_-overlap-fill1"
+                                    id="t-icon-image-instance-_r_127_-overlap-fill1"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -6853,7 +6853,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                   </mask>
                                   <mask
                                     height="24"
-                                    id="t-icon-image-instance-_r_11v_-overlap-fill2"
+                                    id="t-icon-image-instance-_r_127_-overlap-fill2"
                                     mask-type="luminance"
                                     maskContentUnits="userSpaceOnUse"
                                     maskUnits="userSpaceOnUse"
@@ -6885,14 +6885,14 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                                     d="M3 21H20L9 10L3 16V21Z"
                                     fill="transparent"
                                     id="fill1"
-                                    mask="url(#t-icon-image-instance-_r_11v_-overlap-fill1)"
+                                    mask="url(#t-icon-image-instance-_r_127_-overlap-fill1)"
                                   />
                                   <circle
                                     cx="15.75"
                                     cy="8.25"
                                     fill="transparent"
                                     id="fill2"
-                                    mask="url(#t-icon-image-instance-_r_11v_-overlap-fill2)"
+                                    mask="url(#t-icon-image-instance-_r_127_-overlap-fill2)"
                                     r="2"
                                   />
                                   <path
@@ -7090,7 +7090,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-bookmark-instance-_r_121_-overlap-fill1"
+                              id="t-icon-bookmark-instance-_r_129_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -7121,7 +7121,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                               d="M5 4H19V21L12 16L5 21V4Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-bookmark-instance-_r_121_-overlap-fill1)"
+                              mask="url(#t-icon-bookmark-instance-_r_129_-overlap-fill1)"
                             />
                             <path
                               d="M5 4H19V21L12 16L5 21V4Z"
@@ -7168,7 +7168,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-pin-instance-_r_122_-overlap-fill1"
+                              id="t-icon-pin-instance-_r_12a_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -7199,7 +7199,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                               d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-pin-instance-_r_122_-overlap-fill1)"
+                              mask="url(#t-icon-pin-instance-_r_12a_-overlap-fill1)"
                             />
                             <path
                               d="M2.16016 21.8358L8.52412 15.4718M17.7197 2.04004L21.9621 6.28235L15.5973 14.0555L17.7185 16.1768L13.4738 20.4215L3.57431 10.522L7.81905 6.27728L9.94043 8.39867L17.7197 2.04004Z"
@@ -7431,7 +7431,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-bookmark-instance-_r_125_-overlap-fill1"
+                              id="t-icon-bookmark-instance-_r_12d_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -7462,7 +7462,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                               d="M5 4H19V21L12 16L5 21V4Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-bookmark-instance-_r_125_-overlap-fill1)"
+                              mask="url(#t-icon-bookmark-instance-_r_12d_-overlap-fill1)"
                             />
                             <path
                               d="M5 4H19V21L12 16L5 21V4Z"
@@ -7508,7 +7508,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-pin-instance-_r_126_-overlap-fill1"
+                              id="t-icon-pin-instance-_r_12e_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -7539,7 +7539,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                               d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-pin-instance-_r_126_-overlap-fill1)"
+                              mask="url(#t-icon-pin-instance-_r_12e_-overlap-fill1)"
                             />
                             <path
                               d="M2.16016 21.8358L8.52412 15.4718M17.7197 2.04004L21.9621 6.28235L15.5973 14.0555L17.7185 16.1768L13.4738 20.4215L3.57431 10.522L7.81905 6.27728L9.94043 8.39867L17.7197 2.04004Z"
@@ -7717,7 +7717,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-bookmark-instance-_r_129_-overlap-fill1"
+                              id="t-icon-bookmark-instance-_r_12h_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -7748,7 +7748,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                               d="M5 4H19V21L12 16L5 21V4Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-bookmark-instance-_r_129_-overlap-fill1)"
+                              mask="url(#t-icon-bookmark-instance-_r_12h_-overlap-fill1)"
                             />
                             <path
                               d="M5 4H19V21L12 16L5 21V4Z"
@@ -7794,7 +7794,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-pin-instance-_r_12a_-overlap-fill1"
+                              id="t-icon-pin-instance-_r_12i_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -7825,7 +7825,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
                               d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-pin-instance-_r_12a_-overlap-fill1)"
+                              mask="url(#t-icon-pin-instance-_r_12i_-overlap-fill1)"
                             />
                             <path
                               d="M2.16016 21.8358L8.52412 15.4718M17.7197 2.04004L21.9621 6.28235L15.5973 14.0555L17.7185 16.1768L13.4738 20.4215L3.57431 10.522L7.81905 6.27728L9.94043 8.39867L17.7197 2.04004Z"
@@ -8303,7 +8303,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/list.tsx 1`] = `
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-bookmark-instance-_r_117_-overlap-fill1"
+                        id="t-icon-bookmark-instance-_r_11f_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -8334,7 +8334,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/list.tsx 1`] = `
                         d="M5 4H19V21L12 16L5 21V4Z"
                         fill="transparent"
                         id="fill1"
-                        mask="url(#t-icon-bookmark-instance-_r_117_-overlap-fill1)"
+                        mask="url(#t-icon-bookmark-instance-_r_11f_-overlap-fill1)"
                       />
                       <path
                         d="M5 4H19V21L12 16L5 21V4Z"
@@ -8380,7 +8380,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/list.tsx 1`] = `
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-pin-instance-_r_118_-overlap-fill1"
+                        id="t-icon-pin-instance-_r_11g_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -8411,7 +8411,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/list.tsx 1`] = `
                         d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
                         fill="transparent"
                         id="fill1"
-                        mask="url(#t-icon-pin-instance-_r_118_-overlap-fill1)"
+                        mask="url(#t-icon-pin-instance-_r_11g_-overlap-fill1)"
                       />
                       <path
                         d="M2.16016 21.8358L8.52412 15.4718M17.7197 2.04004L21.9621 6.28235L15.5973 14.0555L17.7185 16.1768L13.4738 20.4215L3.57431 10.522L7.81905 6.27728L9.94043 8.39867L17.7197 2.04004Z"
@@ -8801,7 +8801,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/status.tsx 1`] =
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-bookmark-instance-_r_113_-overlap-fill1"
+                        id="t-icon-bookmark-instance-_r_11b_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -8832,7 +8832,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/status.tsx 1`] =
                         d="M5 4H19V21L12 16L5 21V4Z"
                         fill="transparent"
                         id="fill1"
-                        mask="url(#t-icon-bookmark-instance-_r_113_-overlap-fill1)"
+                        mask="url(#t-icon-bookmark-instance-_r_11b_-overlap-fill1)"
                       />
                       <path
                         d="M5 4H19V21L12 16L5 21V4Z"
@@ -8879,7 +8879,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/status.tsx 1`] =
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-pin-instance-_r_114_-overlap-fill1"
+                        id="t-icon-pin-instance-_r_11c_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -8910,7 +8910,7 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/status.tsx 1`] =
                         d="M21.962 6.28235L17.7197 2.04004L9.94034 8.39867L7.81896 6.27728L3.57422 10.522L13.4737 20.4215L17.7185 16.1768L15.5972 14.0555L21.962 6.28235Z"
                         fill="transparent"
                         id="fill1"
-                        mask="url(#t-icon-pin-instance-_r_114_-overlap-fill1)"
+                        mask="url(#t-icon-pin-instance-_r_11c_-overlap-fill1)"
                       />
                       <path
                         d="M2.16016 21.8358L8.52412 15.4718M17.7197 2.04004L21.9621 6.28235L15.5973 14.0555L17.7185 16.1768L13.4738 20.4215L3.57431 10.522L7.81905 6.27728L9.94043 8.39867L17.7197 2.04004Z"
@@ -9319,7 +9319,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/action.tsx 1`] = `
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-user-add-instance-_r_111_-overlap-fill1"
+                        id="t-icon-user-add-instance-_r_119_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -9350,7 +9350,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/action.tsx 1`] = `
                         d="M16 7.5C16 9.98528 13.9853 12 11.5 12C9.01472 12 7 9.98528 7 7.5C7 5.01472 9.01472 3 11.5 3C13.9853 3 16 5.01472 16 7.5Z"
                         fill="transparent"
                         id="fill1"
-                        mask="url(#t-icon-user-add-instance-_r_111_-overlap-fill1)"
+                        mask="url(#t-icon-user-add-instance-_r_119_-overlap-fill1)"
                       />
                       <path
                         d="M11 15H8C5.23858 15 3 17.2386 3 20V21H11.0508M16 7.5C16 9.98528 13.9853 12 11.5 12C9.01472 12 7 9.98528 7 7.5C7 5.01472 9.01472 3 11.5 3C13.9853 3 16 5.01472 16 7.5Z"
@@ -9507,7 +9507,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/badge-avatar.tsx 1`] =
                   <defs>
                     <mask
                       height="24"
-                      id="t-icon-user-instance-_r_110_-overlap-fill1"
+                      id="t-icon-user-instance-_r_118_-overlap-fill1"
                       mask-type="luminance"
                       maskContentUnits="userSpaceOnUse"
                       maskUnits="userSpaceOnUse"
@@ -9538,7 +9538,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/badge-avatar.tsx 1`] =
                   >
                     <g
                       id="fill1"
-                      mask="url(#t-icon-user-instance-_r_110_-overlap-fill1)"
+                      mask="url(#t-icon-user-instance-_r_118_-overlap-fill1)"
                     >
                       <path
                         d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -9979,7 +9979,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/icon-avatar.tsx 1`] =
                   <defs>
                     <mask
                       height="24"
-                      id="t-icon-user-instance-_r_10u_-overlap-fill1"
+                      id="t-icon-user-instance-_r_116_-overlap-fill1"
                       mask-type="luminance"
                       maskContentUnits="userSpaceOnUse"
                       maskUnits="userSpaceOnUse"
@@ -10010,7 +10010,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/icon-avatar.tsx 1`] =
                   >
                     <g
                       id="fill1"
-                      mask="url(#t-icon-user-instance-_r_10u_-overlap-fill1)"
+                      mask="url(#t-icon-user-instance-_r_116_-overlap-fill1)"
                     >
                       <path
                         d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -10068,7 +10068,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/icon-avatar.tsx 1`] =
                   <defs>
                     <mask
                       height="24"
-                      id="t-icon-user-instance-_r_10v_-overlap-fill1"
+                      id="t-icon-user-instance-_r_117_-overlap-fill1"
                       mask-type="luminance"
                       maskContentUnits="userSpaceOnUse"
                       maskUnits="userSpaceOnUse"
@@ -10099,7 +10099,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/icon-avatar.tsx 1`] =
                   >
                     <g
                       id="fill1"
-                      mask="url(#t-icon-user-instance-_r_10v_-overlap-fill1)"
+                      mask="url(#t-icon-user-instance-_r_117_-overlap-fill1)"
                     >
                       <path
                         d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -10516,7 +10516,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                         <defs>
                           <mask
                             height="24"
-                            id="t-icon-user-instance-_r_10n_-overlap-fill1"
+                            id="t-icon-user-instance-_r_10v_-overlap-fill1"
                             mask-type="luminance"
                             maskContentUnits="userSpaceOnUse"
                             maskUnits="userSpaceOnUse"
@@ -10547,7 +10547,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                         >
                           <g
                             id="fill1"
-                            mask="url(#t-icon-user-instance-_r_10n_-overlap-fill1)"
+                            mask="url(#t-icon-user-instance-_r_10v_-overlap-fill1)"
                           >
                             <path
                               d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -10605,7 +10605,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                         <defs>
                           <mask
                             height="24"
-                            id="t-icon-user-instance-_r_10o_-overlap-fill1"
+                            id="t-icon-user-instance-_r_110_-overlap-fill1"
                             mask-type="luminance"
                             maskContentUnits="userSpaceOnUse"
                             maskUnits="userSpaceOnUse"
@@ -10636,7 +10636,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                         >
                           <g
                             id="fill1"
-                            mask="url(#t-icon-user-instance-_r_10o_-overlap-fill1)"
+                            mask="url(#t-icon-user-instance-_r_110_-overlap-fill1)"
                           >
                             <path
                               d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -10809,7 +10809,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                         <defs>
                           <mask
                             height="24"
-                            id="t-icon-user-instance-_r_10p_-overlap-fill1"
+                            id="t-icon-user-instance-_r_111_-overlap-fill1"
                             mask-type="luminance"
                             maskContentUnits="userSpaceOnUse"
                             maskUnits="userSpaceOnUse"
@@ -10840,7 +10840,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                         >
                           <g
                             id="fill1"
-                            mask="url(#t-icon-user-instance-_r_10p_-overlap-fill1)"
+                            mask="url(#t-icon-user-instance-_r_111_-overlap-fill1)"
                           >
                             <path
                               d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -11537,7 +11537,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-user-add-instance-_r_10q_-overlap-fill1"
+                              id="t-icon-user-add-instance-_r_112_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -11568,7 +11568,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                               d="M16 7.5C16 9.98528 13.9853 12 11.5 12C9.01472 12 7 9.98528 7 7.5C7 5.01472 9.01472 3 11.5 3C13.9853 3 16 5.01472 16 7.5Z"
                               fill="transparent"
                               id="fill1"
-                              mask="url(#t-icon-user-add-instance-_r_10q_-overlap-fill1)"
+                              mask="url(#t-icon-user-add-instance-_r_112_-overlap-fill1)"
                             />
                             <path
                               d="M11 15H8C5.23858 15 3 17.2386 3 20V21H11.0508M16 7.5C16 9.98528 13.9853 12 11.5 12C9.01472 12 7 9.98528 7 7.5C7 5.01472 9.01472 3 11.5 3C13.9853 3 16 5.01472 16 7.5Z"
@@ -11727,7 +11727,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-user-instance-_r_10r_-overlap-fill1"
+                              id="t-icon-user-instance-_r_113_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -11758,7 +11758,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                           >
                             <g
                               id="fill1"
-                              mask="url(#t-icon-user-instance-_r_10r_-overlap-fill1)"
+                              mask="url(#t-icon-user-instance-_r_113_-overlap-fill1)"
                             >
                               <path
                                 d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -11896,7 +11896,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-user-instance-_r_10s_-overlap-fill1"
+                              id="t-icon-user-instance-_r_114_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -11927,7 +11927,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                           >
                             <g
                               id="fill1"
-                              mask="url(#t-icon-user-instance-_r_10s_-overlap-fill1)"
+                              mask="url(#t-icon-user-instance-_r_114_-overlap-fill1)"
                             >
                               <path
                                 d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -12065,7 +12065,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                           <defs>
                             <mask
                               height="24"
-                              id="t-icon-user-instance-_r_10t_-overlap-fill1"
+                              id="t-icon-user-instance-_r_115_-overlap-fill1"
                               mask-type="luminance"
                               maskContentUnits="userSpaceOnUse"
                               maskUnits="userSpaceOnUse"
@@ -12096,7 +12096,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
                           >
                             <g
                               id="fill1"
-                              mask="url(#t-icon-user-instance-_r_10t_-overlap-fill1)"
+                              mask="url(#t-icon-user-instance-_r_115_-overlap-fill1)"
                             >
                               <path
                                 d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -12246,7 +12246,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.tsx 1`] = `
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-user-instance-_r_10k_-overlap-fill1"
+                        id="t-icon-user-instance-_r_10s_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -12277,7 +12277,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.tsx 1`] = `
                     >
                       <g
                         id="fill1"
-                        mask="url(#t-icon-user-instance-_r_10k_-overlap-fill1)"
+                        mask="url(#t-icon-user-instance-_r_10s_-overlap-fill1)"
                       >
                         <path
                           d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -12415,7 +12415,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.tsx 1`] = `
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-user-instance-_r_10l_-overlap-fill1"
+                        id="t-icon-user-instance-_r_10t_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -12446,7 +12446,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.tsx 1`] = `
                     >
                       <g
                         id="fill1"
-                        mask="url(#t-icon-user-instance-_r_10l_-overlap-fill1)"
+                        mask="url(#t-icon-user-instance-_r_10t_-overlap-fill1)"
                       >
                         <path
                           d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -12584,7 +12584,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.tsx 1`] = `
                     <defs>
                       <mask
                         height="24"
-                        id="t-icon-user-instance-_r_10m_-overlap-fill1"
+                        id="t-icon-user-instance-_r_10u_-overlap-fill1"
                         mask-type="luminance"
                         maskContentUnits="userSpaceOnUse"
                         maskUnits="userSpaceOnUse"
@@ -12615,7 +12615,7 @@ exports[`csr snapshot test > csr test src/avatar/_example/size.tsx 1`] = `
                     >
                       <g
                         id="fill1"
-                        mask="url(#t-icon-user-instance-_r_10m_-overlap-fill1)"
+                        mask="url(#t-icon-user-instance-_r_10u_-overlap-fill1)"
                       >
                         <path
                           d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -13010,7 +13010,7 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
           <defs>
             <mask
               height="24"
-              id="t-icon-notification-instance-_r_10h_-overlap-fill1"
+              id="t-icon-notification-instance-_r_10p_-overlap-fill1"
               mask-type="luminance"
               maskContentUnits="userSpaceOnUse"
               maskUnits="userSpaceOnUse"
@@ -13037,7 +13037,7 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
             </mask>
             <mask
               height="24"
-              id="t-icon-notification-instance-_r_10h_-overlap-fill2"
+              id="t-icon-notification-instance-_r_10p_-overlap-fill2"
               mask-type="luminance"
               maskContentUnits="userSpaceOnUse"
               maskUnits="userSpaceOnUse"
@@ -13070,13 +13070,13 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
               d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
               fill="transparent"
               id="fill1"
-              mask="url(#t-icon-notification-instance-_r_10h_-overlap-fill1)"
+              mask="url(#t-icon-notification-instance-_r_10p_-overlap-fill1)"
             />
             <path
               d="M12 22.5C13.933 22.5 15.5 20.933 15.5 19H8.5C8.5 20.933 10.067 22.5 12 22.5Z"
               fill="transparent"
               id="fill2"
-              mask="url(#t-icon-notification-instance-_r_10h_-overlap-fill2)"
+              mask="url(#t-icon-notification-instance-_r_10p_-overlap-fill2)"
             />
             <g
               id="stroke1"
@@ -13177,7 +13177,7 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
           <defs>
             <mask
               height="24"
-              id="t-icon-notification-instance-_r_10i_-overlap-fill1"
+              id="t-icon-notification-instance-_r_10q_-overlap-fill1"
               mask-type="luminance"
               maskContentUnits="userSpaceOnUse"
               maskUnits="userSpaceOnUse"
@@ -13204,7 +13204,7 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
             </mask>
             <mask
               height="24"
-              id="t-icon-notification-instance-_r_10i_-overlap-fill2"
+              id="t-icon-notification-instance-_r_10q_-overlap-fill2"
               mask-type="luminance"
               maskContentUnits="userSpaceOnUse"
               maskUnits="userSpaceOnUse"
@@ -13237,13 +13237,13 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
               d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
               fill="transparent"
               id="fill1"
-              mask="url(#t-icon-notification-instance-_r_10i_-overlap-fill1)"
+              mask="url(#t-icon-notification-instance-_r_10q_-overlap-fill1)"
             />
             <path
               d="M12 22.5C13.933 22.5 15.5 20.933 15.5 19H8.5C8.5 20.933 10.067 22.5 12 22.5Z"
               fill="transparent"
               id="fill2"
-              mask="url(#t-icon-notification-instance-_r_10i_-overlap-fill2)"
+              mask="url(#t-icon-notification-instance-_r_10q_-overlap-fill2)"
             />
             <g
               id="stroke1"
@@ -13330,7 +13330,7 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
             <defs>
               <mask
                 height="24"
-                id="t-icon-notification-instance-_r_10j_-overlap-fill1"
+                id="t-icon-notification-instance-_r_10r_-overlap-fill1"
                 mask-type="luminance"
                 maskContentUnits="userSpaceOnUse"
                 maskUnits="userSpaceOnUse"
@@ -13357,7 +13357,7 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
               </mask>
               <mask
                 height="24"
-                id="t-icon-notification-instance-_r_10j_-overlap-fill2"
+                id="t-icon-notification-instance-_r_10r_-overlap-fill2"
                 mask-type="luminance"
                 maskContentUnits="userSpaceOnUse"
                 maskUnits="userSpaceOnUse"
@@ -13390,13 +13390,13 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
                 d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
                 fill="transparent"
                 id="fill1"
-                mask="url(#t-icon-notification-instance-_r_10j_-overlap-fill1)"
+                mask="url(#t-icon-notification-instance-_r_10r_-overlap-fill1)"
               />
               <path
                 d="M12 22.5C13.933 22.5 15.5 20.933 15.5 19H8.5C8.5 20.933 10.067 22.5 12 22.5Z"
                 fill="transparent"
                 id="fill2"
-                mask="url(#t-icon-notification-instance-_r_10j_-overlap-fill2)"
+                mask="url(#t-icon-notification-instance-_r_10r_-overlap-fill2)"
               />
               <g
                 id="stroke1"
@@ -13506,7 +13506,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                 <defs>
                   <mask
                     height="24"
-                    id="t-icon-notification-instance-_r_109_-overlap-fill1"
+                    id="t-icon-notification-instance-_r_10h_-overlap-fill1"
                     mask-type="luminance"
                     maskContentUnits="userSpaceOnUse"
                     maskUnits="userSpaceOnUse"
@@ -13533,7 +13533,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                   </mask>
                   <mask
                     height="24"
-                    id="t-icon-notification-instance-_r_109_-overlap-fill2"
+                    id="t-icon-notification-instance-_r_10h_-overlap-fill2"
                     mask-type="luminance"
                     maskContentUnits="userSpaceOnUse"
                     maskUnits="userSpaceOnUse"
@@ -13566,13 +13566,13 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                     d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
                     fill="transparent"
                     id="fill1"
-                    mask="url(#t-icon-notification-instance-_r_109_-overlap-fill1)"
+                    mask="url(#t-icon-notification-instance-_r_10h_-overlap-fill1)"
                   />
                   <path
                     d="M12 22.5C13.933 22.5 15.5 20.933 15.5 19H8.5C8.5 20.933 10.067 22.5 12 22.5Z"
                     fill="transparent"
                     id="fill2"
-                    mask="url(#t-icon-notification-instance-_r_109_-overlap-fill2)"
+                    mask="url(#t-icon-notification-instance-_r_10h_-overlap-fill2)"
                   />
                   <g
                     id="stroke1"
@@ -13673,7 +13673,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                 <defs>
                   <mask
                     height="24"
-                    id="t-icon-notification-instance-_r_10a_-overlap-fill1"
+                    id="t-icon-notification-instance-_r_10i_-overlap-fill1"
                     mask-type="luminance"
                     maskContentUnits="userSpaceOnUse"
                     maskUnits="userSpaceOnUse"
@@ -13700,7 +13700,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                   </mask>
                   <mask
                     height="24"
-                    id="t-icon-notification-instance-_r_10a_-overlap-fill2"
+                    id="t-icon-notification-instance-_r_10i_-overlap-fill2"
                     mask-type="luminance"
                     maskContentUnits="userSpaceOnUse"
                     maskUnits="userSpaceOnUse"
@@ -13733,13 +13733,13 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                     d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
                     fill="transparent"
                     id="fill1"
-                    mask="url(#t-icon-notification-instance-_r_10a_-overlap-fill1)"
+                    mask="url(#t-icon-notification-instance-_r_10i_-overlap-fill1)"
                   />
                   <path
                     d="M12 22.5C13.933 22.5 15.5 20.933 15.5 19H8.5C8.5 20.933 10.067 22.5 12 22.5Z"
                     fill="transparent"
                     id="fill2"
-                    mask="url(#t-icon-notification-instance-_r_10a_-overlap-fill2)"
+                    mask="url(#t-icon-notification-instance-_r_10i_-overlap-fill2)"
                   />
                   <g
                     id="stroke1"
@@ -13826,7 +13826,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                   <defs>
                     <mask
                       height="24"
-                      id="t-icon-notification-instance-_r_10b_-overlap-fill1"
+                      id="t-icon-notification-instance-_r_10j_-overlap-fill1"
                       mask-type="luminance"
                       maskContentUnits="userSpaceOnUse"
                       maskUnits="userSpaceOnUse"
@@ -13853,7 +13853,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                     </mask>
                     <mask
                       height="24"
-                      id="t-icon-notification-instance-_r_10b_-overlap-fill2"
+                      id="t-icon-notification-instance-_r_10j_-overlap-fill2"
                       mask-type="luminance"
                       maskContentUnits="userSpaceOnUse"
                       maskUnits="userSpaceOnUse"
@@ -13886,13 +13886,13 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                       d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
                       fill="transparent"
                       id="fill1"
-                      mask="url(#t-icon-notification-instance-_r_10b_-overlap-fill1)"
+                      mask="url(#t-icon-notification-instance-_r_10j_-overlap-fill1)"
                     />
                     <path
                       d="M12 22.5C13.933 22.5 15.5 20.933 15.5 19H8.5C8.5 20.933 10.067 22.5 12 22.5Z"
                       fill="transparent"
                       id="fill2"
-                      mask="url(#t-icon-notification-instance-_r_10b_-overlap-fill2)"
+                      mask="url(#t-icon-notification-instance-_r_10j_-overlap-fill2)"
                     />
                     <g
                       id="stroke1"
@@ -13962,7 +13962,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                 <defs>
                   <mask
                     height="24"
-                    id="t-icon-notification-instance-_r_10c_-overlap-fill1"
+                    id="t-icon-notification-instance-_r_10k_-overlap-fill1"
                     mask-type="luminance"
                     maskContentUnits="userSpaceOnUse"
                     maskUnits="userSpaceOnUse"
@@ -13989,7 +13989,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                   </mask>
                   <mask
                     height="24"
-                    id="t-icon-notification-instance-_r_10c_-overlap-fill2"
+                    id="t-icon-notification-instance-_r_10k_-overlap-fill2"
                     mask-type="luminance"
                     maskContentUnits="userSpaceOnUse"
                     maskUnits="userSpaceOnUse"
@@ -14022,13 +14022,13 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                     d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
                     fill="transparent"
                     id="fill1"
-                    mask="url(#t-icon-notification-instance-_r_10c_-overlap-fill1)"
+                    mask="url(#t-icon-notification-instance-_r_10k_-overlap-fill1)"
                   />
                   <path
                     d="M12 22.5C13.933 22.5 15.5 20.933 15.5 19H8.5C8.5 20.933 10.067 22.5 12 22.5Z"
                     fill="transparent"
                     id="fill2"
-                    mask="url(#t-icon-notification-instance-_r_10c_-overlap-fill2)"
+                    mask="url(#t-icon-notification-instance-_r_10k_-overlap-fill2)"
                   />
                   <g
                     id="stroke1"
@@ -14080,7 +14080,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                 <defs>
                   <mask
                     height="24"
-                    id="t-icon-notification-instance-_r_10d_-overlap-fill1"
+                    id="t-icon-notification-instance-_r_10l_-overlap-fill1"
                     mask-type="luminance"
                     maskContentUnits="userSpaceOnUse"
                     maskUnits="userSpaceOnUse"
@@ -14107,7 +14107,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                   </mask>
                   <mask
                     height="24"
-                    id="t-icon-notification-instance-_r_10d_-overlap-fill2"
+                    id="t-icon-notification-instance-_r_10l_-overlap-fill2"
                     mask-type="luminance"
                     maskContentUnits="userSpaceOnUse"
                     maskUnits="userSpaceOnUse"
@@ -14140,13 +14140,13 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                     d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
                     fill="transparent"
                     id="fill1"
-                    mask="url(#t-icon-notification-instance-_r_10d_-overlap-fill1)"
+                    mask="url(#t-icon-notification-instance-_r_10l_-overlap-fill1)"
                   />
                   <path
                     d="M12 22.5C13.933 22.5 15.5 20.933 15.5 19H8.5C8.5 20.933 10.067 22.5 12 22.5Z"
                     fill="transparent"
                     id="fill2"
-                    mask="url(#t-icon-notification-instance-_r_10d_-overlap-fill2)"
+                    mask="url(#t-icon-notification-instance-_r_10l_-overlap-fill2)"
                   />
                   <g
                     id="stroke1"
@@ -14203,7 +14203,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                   <defs>
                     <mask
                       height="24"
-                      id="t-icon-shop-instance-_r_10e_-overlap-fill1"
+                      id="t-icon-shop-instance-_r_10m_-overlap-fill1"
                       mask-type="luminance"
                       maskContentUnits="userSpaceOnUse"
                       maskUnits="userSpaceOnUse"
@@ -14234,7 +14234,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                       d="M4 8H20V22H4V8Z"
                       fill="transparent"
                       id="fill1"
-                      mask="url(#t-icon-shop-instance-_r_10e_-overlap-fill1)"
+                      mask="url(#t-icon-shop-instance-_r_10m_-overlap-fill1)"
                     />
                     <path
                       d="M15.5 11V5.5C15.5 3.567 13.933 2 12 2C10.067 2 8.5 3.567 8.5 5.5V11M4 8H20V22H4V8Z"
@@ -14468,7 +14468,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                         <defs>
                           <mask
                             height="24"
-                            id="t-icon-user-instance-_r_10f_-overlap-fill1"
+                            id="t-icon-user-instance-_r_10n_-overlap-fill1"
                             mask-type="luminance"
                             maskContentUnits="userSpaceOnUse"
                             maskUnits="userSpaceOnUse"
@@ -14499,7 +14499,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                         >
                           <g
                             id="fill1"
-                            mask="url(#t-icon-user-instance-_r_10f_-overlap-fill1)"
+                            mask="url(#t-icon-user-instance-_r_10n_-overlap-fill1)"
                           >
                             <path
                               d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -14576,7 +14576,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                         <defs>
                           <mask
                             height="24"
-                            id="t-icon-user-instance-_r_10g_-overlap-fill1"
+                            id="t-icon-user-instance-_r_10o_-overlap-fill1"
                             mask-type="luminance"
                             maskContentUnits="userSpaceOnUse"
                             maskUnits="userSpaceOnUse"
@@ -14607,7 +14607,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
                         >
                           <g
                             id="fill1"
-                            mask="url(#t-icon-user-instance-_r_10g_-overlap-fill1)"
+                            mask="url(#t-icon-user-instance-_r_10o_-overlap-fill1)"
                           >
                             <path
                               d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -14692,7 +14692,7 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
                   <defs>
                     <mask
                       height="24"
-                      id="t-icon-user-instance-_r_107_-overlap-fill1"
+                      id="t-icon-user-instance-_r_10f_-overlap-fill1"
                       mask-type="luminance"
                       maskContentUnits="userSpaceOnUse"
                       maskUnits="userSpaceOnUse"
@@ -14723,7 +14723,7 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
                   >
                     <g
                       id="fill1"
-                      mask="url(#t-icon-user-instance-_r_107_-overlap-fill1)"
+                      mask="url(#t-icon-user-instance-_r_10f_-overlap-fill1)"
                     >
                       <path
                         d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -14800,7 +14800,7 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
                   <defs>
                     <mask
                       height="24"
-                      id="t-icon-user-instance-_r_108_-overlap-fill1"
+                      id="t-icon-user-instance-_r_10g_-overlap-fill1"
                       mask-type="luminance"
                       maskContentUnits="userSpaceOnUse"
                       maskUnits="userSpaceOnUse"
@@ -14831,7 +14831,7 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
                   >
                     <g
                       id="fill1"
-                      mask="url(#t-icon-user-instance-_r_108_-overlap-fill1)"
+                      mask="url(#t-icon-user-instance-_r_10g_-overlap-fill1)"
                     >
                       <path
                         d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"
@@ -14901,7 +14901,7 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
           <defs>
             <mask
               height="24"
-              id="t-icon-notification-instance-_r_104_-overlap-fill1"
+              id="t-icon-notification-instance-_r_10c_-overlap-fill1"
               mask-type="luminance"
               maskContentUnits="userSpaceOnUse"
               maskUnits="userSpaceOnUse"
@@ -14928,7 +14928,7 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
             </mask>
             <mask
               height="24"
-              id="t-icon-notification-instance-_r_104_-overlap-fill2"
+              id="t-icon-notification-instance-_r_10c_-overlap-fill2"
               mask-type="luminance"
               maskContentUnits="userSpaceOnUse"
               maskUnits="userSpaceOnUse"
@@ -14961,13 +14961,13 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
               d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
               fill="transparent"
               id="fill1"
-              mask="url(#t-icon-notification-instance-_r_104_-overlap-fill1)"
+              mask="url(#t-icon-notification-instance-_r_10c_-overlap-fill1)"
             />
             <path
               d="M12 22.5C13.933 22.5 15.5 20.933 15.5 19H8.5C8.5 20.933 10.067 22.5 12 22.5Z"
               fill="transparent"
               id="fill2"
-              mask="url(#t-icon-notification-instance-_r_104_-overlap-fill2)"
+              mask="url(#t-icon-notification-instance-_r_10c_-overlap-fill2)"
             />
             <g
               id="stroke1"
@@ -15019,7 +15019,7 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
           <defs>
             <mask
               height="24"
-              id="t-icon-notification-instance-_r_105_-overlap-fill1"
+              id="t-icon-notification-instance-_r_10d_-overlap-fill1"
               mask-type="luminance"
               maskContentUnits="userSpaceOnUse"
               maskUnits="userSpaceOnUse"
@@ -15046,7 +15046,7 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
             </mask>
             <mask
               height="24"
-              id="t-icon-notification-instance-_r_105_-overlap-fill2"
+              id="t-icon-notification-instance-_r_10d_-overlap-fill2"
               mask-type="luminance"
               maskContentUnits="userSpaceOnUse"
               maskUnits="userSpaceOnUse"
@@ -15079,13 +15079,13 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
               d="M3 19H21V16L19 13V8C19 4.13401 15.866 1 12 1C8.13401 1 5 4.13401 5 8V13L3 16V19Z"
               fill="transparent"
               id="fill1"
-              mask="url(#t-icon-notification-instance-_r_105_-overlap-fill1)"
+              mask="url(#t-icon-notification-instance-_r_10d_-overlap-fill1)"
             />
             <path
               d="M12 22.5C13.933 22.5 15.5 20.933 15.5 19H8.5C8.5 20.933 10.067 22.5 12 22.5Z"
               fill="transparent"
               id="fill2"
-              mask="url(#t-icon-notification-instance-_r_105_-overlap-fill2)"
+              mask="url(#t-icon-notification-instance-_r_10d_-overlap-fill2)"
             />
             <g
               id="stroke1"
@@ -15142,7 +15142,7 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
             <defs>
               <mask
                 height="24"
-                id="t-icon-shop-instance-_r_106_-overlap-fill1"
+                id="t-icon-shop-instance-_r_10e_-overlap-fill1"
                 mask-type="luminance"
                 maskContentUnits="userSpaceOnUse"
                 maskUnits="userSpaceOnUse"
@@ -15173,7 +15173,7 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
                 d="M4 8H20V22H4V8Z"
                 fill="transparent"
                 id="fill1"
-                mask="url(#t-icon-shop-instance-_r_106_-overlap-fill1)"
+                mask="url(#t-icon-shop-instance-_r_10e_-overlap-fill1)"
               />
               <path
                 d="M15.5 11V5.5C15.5 3.567 13.933 2 12 2C10.067 2 8.5 3.567 8.5 5.5V11M4 8H20V22H4V8Z"
@@ -15549,7 +15549,7 @@ exports[`csr snapshot test > csr test src/button/_example/icon.tsx 1`] = `
         <defs>
           <mask
             height="24"
-            id="t-icon-app-instance-_r_102_-overlap-fill1"
+            id="t-icon-app-instance-_r_10a_-overlap-fill1"
             mask-type="luminance"
             maskContentUnits="userSpaceOnUse"
             maskUnits="userSpaceOnUse"
@@ -15575,7 +15575,7 @@ exports[`csr snapshot test > csr test src/button/_example/icon.tsx 1`] = `
           </mask>
           <mask
             height="24"
-            id="t-icon-app-instance-_r_102_-overlap-fill2"
+            id="t-icon-app-instance-_r_10a_-overlap-fill2"
             mask-type="luminance"
             maskContentUnits="userSpaceOnUse"
             maskUnits="userSpaceOnUse"
@@ -15603,7 +15603,7 @@ exports[`csr snapshot test > csr test src/button/_example/icon.tsx 1`] = `
         >
           <g
             id="fill1"
-            mask="url(#t-icon-app-instance-_r_102_-overlap-fill1)"
+            mask="url(#t-icon-app-instance-_r_10a_-overlap-fill1)"
           >
             <path
               d="M3 3H10V10H3V3Z"
@@ -15622,7 +15622,7 @@ exports[`csr snapshot test > csr test src/button/_example/icon.tsx 1`] = `
             d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z"
             fill="transparent"
             id="fill2"
-            mask="url(#t-icon-app-instance-_r_102_-overlap-fill2)"
+            mask="url(#t-icon-app-instance-_r_10a_-overlap-fill2)"
           />
           <g
             id="stroke1"
@@ -15664,7 +15664,7 @@ exports[`csr snapshot test > csr test src/button/_example/icon.tsx 1`] = `
         <defs>
           <mask
             height="24"
-            id="t-icon-app-instance-_r_103_-overlap-fill1"
+            id="t-icon-app-instance-_r_10b_-overlap-fill1"
             mask-type="luminance"
             maskContentUnits="userSpaceOnUse"
             maskUnits="userSpaceOnUse"
@@ -15690,7 +15690,7 @@ exports[`csr snapshot test > csr test src/button/_example/icon.tsx 1`] = `
           </mask>
           <mask
             height="24"
-            id="t-icon-app-instance-_r_103_-overlap-fill2"
+            id="t-icon-app-instance-_r_10b_-overlap-fill2"
             mask-type="luminance"
             maskContentUnits="userSpaceOnUse"
             maskUnits="userSpaceOnUse"
@@ -15718,7 +15718,7 @@ exports[`csr snapshot test > csr test src/button/_example/icon.tsx 1`] = `
         >
           <g
             id="fill1"
-            mask="url(#t-icon-app-instance-_r_103_-overlap-fill1)"
+            mask="url(#t-icon-app-instance-_r_10b_-overlap-fill1)"
           >
             <path
               d="M3 3H10V10H3V3Z"
@@ -15737,7 +15737,7 @@ exports[`csr snapshot test > csr test src/button/_example/icon.tsx 1`] = `
             d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z"
             fill="transparent"
             id="fill2"
-            mask="url(#t-icon-app-instance-_r_103_-overlap-fill2)"
+            mask="url(#t-icon-app-instance-_r_10b_-overlap-fill2)"
           />
           <g
             id="stroke1"
@@ -15943,7 +15943,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
               <defs>
                 <mask
                   height="24"
-                  id="t-icon-app-instance-_r_vu_-overlap-fill1"
+                  id="t-icon-app-instance-_r_106_-overlap-fill1"
                   mask-type="luminance"
                   maskContentUnits="userSpaceOnUse"
                   maskUnits="userSpaceOnUse"
@@ -15969,7 +15969,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
                 </mask>
                 <mask
                   height="24"
-                  id="t-icon-app-instance-_r_vu_-overlap-fill2"
+                  id="t-icon-app-instance-_r_106_-overlap-fill2"
                   mask-type="luminance"
                   maskContentUnits="userSpaceOnUse"
                   maskUnits="userSpaceOnUse"
@@ -15997,7 +15997,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
               >
                 <g
                   id="fill1"
-                  mask="url(#t-icon-app-instance-_r_vu_-overlap-fill1)"
+                  mask="url(#t-icon-app-instance-_r_106_-overlap-fill1)"
                 >
                   <path
                     d="M3 3H10V10H3V3Z"
@@ -16016,7 +16016,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
                   d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z"
                   fill="transparent"
                   id="fill2"
-                  mask="url(#t-icon-app-instance-_r_vu_-overlap-fill2)"
+                  mask="url(#t-icon-app-instance-_r_106_-overlap-fill2)"
                 />
                 <g
                   id="stroke1"
@@ -16058,7 +16058,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
               <defs>
                 <mask
                   height="24"
-                  id="t-icon-app-instance-_r_vv_-overlap-fill1"
+                  id="t-icon-app-instance-_r_107_-overlap-fill1"
                   mask-type="luminance"
                   maskContentUnits="userSpaceOnUse"
                   maskUnits="userSpaceOnUse"
@@ -16084,7 +16084,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
                 </mask>
                 <mask
                   height="24"
-                  id="t-icon-app-instance-_r_vv_-overlap-fill2"
+                  id="t-icon-app-instance-_r_107_-overlap-fill2"
                   mask-type="luminance"
                   maskContentUnits="userSpaceOnUse"
                   maskUnits="userSpaceOnUse"
@@ -16112,7 +16112,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
               >
                 <g
                   id="fill1"
-                  mask="url(#t-icon-app-instance-_r_vv_-overlap-fill1)"
+                  mask="url(#t-icon-app-instance-_r_107_-overlap-fill1)"
                 >
                   <path
                     d="M3 3H10V10H3V3Z"
@@ -16131,7 +16131,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
                   d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z"
                   fill="transparent"
                   id="fill2"
-                  mask="url(#t-icon-app-instance-_r_vv_-overlap-fill2)"
+                  mask="url(#t-icon-app-instance-_r_107_-overlap-fill2)"
                 />
                 <g
                   id="stroke1"
@@ -16539,7 +16539,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
               <defs>
                 <mask
                   height="24"
-                  id="t-icon-app-instance-_r_100_-overlap-fill1"
+                  id="t-icon-app-instance-_r_108_-overlap-fill1"
                   mask-type="luminance"
                   maskContentUnits="userSpaceOnUse"
                   maskUnits="userSpaceOnUse"
@@ -16565,7 +16565,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
                 </mask>
                 <mask
                   height="24"
-                  id="t-icon-app-instance-_r_100_-overlap-fill2"
+                  id="t-icon-app-instance-_r_108_-overlap-fill2"
                   mask-type="luminance"
                   maskContentUnits="userSpaceOnUse"
                   maskUnits="userSpaceOnUse"
@@ -16593,7 +16593,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
               >
                 <g
                   id="fill1"
-                  mask="url(#t-icon-app-instance-_r_100_-overlap-fill1)"
+                  mask="url(#t-icon-app-instance-_r_108_-overlap-fill1)"
                 >
                   <path
                     d="M3 3H10V10H3V3Z"
@@ -16612,7 +16612,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
                   d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z"
                   fill="transparent"
                   id="fill2"
-                  mask="url(#t-icon-app-instance-_r_100_-overlap-fill2)"
+                  mask="url(#t-icon-app-instance-_r_108_-overlap-fill2)"
                 />
                 <g
                   id="stroke1"
@@ -16661,7 +16661,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
               <defs>
                 <mask
                   height="24"
-                  id="t-icon-app-instance-_r_101_-overlap-fill1"
+                  id="t-icon-app-instance-_r_109_-overlap-fill1"
                   mask-type="luminance"
                   maskContentUnits="userSpaceOnUse"
                   maskUnits="userSpaceOnUse"
@@ -16687,7 +16687,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
                 </mask>
                 <mask
                   height="24"
-                  id="t-icon-app-instance-_r_101_-overlap-fill2"
+                  id="t-icon-app-instance-_r_109_-overlap-fill2"
                   mask-type="luminance"
                   maskContentUnits="userSpaceOnUse"
                   maskUnits="userSpaceOnUse"
@@ -16715,7 +16715,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
               >
                 <g
                   id="fill1"
-                  mask="url(#t-icon-app-instance-_r_101_-overlap-fill1)"
+                  mask="url(#t-icon-app-instance-_r_109_-overlap-fill1)"
                 >
                   <path
                     d="M3 3H10V10H3V3Z"
@@ -16734,7 +16734,7 @@ exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = `
                   d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z"
                   fill="transparent"
                   id="fill2"
-                  mask="url(#t-icon-app-instance-_r_101_-overlap-fill2)"
+                  mask="url(#t-icon-app-instance-_r_109_-overlap-fill2)"
                 />
                 <g
                   id="stroke1"
@@ -16988,7 +16988,7 @@ exports[`csr snapshot test > csr test src/button/_example/shape.tsx 1`] = `
         <defs>
           <mask
             height="24"
-            id="t-icon-app-instance-_r_vs_-overlap-fill1"
+            id="t-icon-app-instance-_r_104_-overlap-fill1"
             mask-type="luminance"
             maskContentUnits="userSpaceOnUse"
             maskUnits="userSpaceOnUse"
@@ -17014,7 +17014,7 @@ exports[`csr snapshot test > csr test src/button/_example/shape.tsx 1`] = `
           </mask>
           <mask
             height="24"
-            id="t-icon-app-instance-_r_vs_-overlap-fill2"
+            id="t-icon-app-instance-_r_104_-overlap-fill2"
             mask-type="luminance"
             maskContentUnits="userSpaceOnUse"
             maskUnits="userSpaceOnUse"
@@ -17042,7 +17042,7 @@ exports[`csr snapshot test > csr test src/button/_example/shape.tsx 1`] = `
         >
           <g
             id="fill1"
-            mask="url(#t-icon-app-instance-_r_vs_-overlap-fill1)"
+            mask="url(#t-icon-app-instance-_r_104_-overlap-fill1)"
           >
             <path
               d="M3 3H10V10H3V3Z"
@@ -17061,7 +17061,7 @@ exports[`csr snapshot test > csr test src/button/_example/shape.tsx 1`] = `
             d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z"
             fill="transparent"
             id="fill2"
-            mask="url(#t-icon-app-instance-_r_vs_-overlap-fill2)"
+            mask="url(#t-icon-app-instance-_r_104_-overlap-fill2)"
           />
           <g
             id="stroke1"
@@ -17110,7 +17110,7 @@ exports[`csr snapshot test > csr test src/button/_example/shape.tsx 1`] = `
         <defs>
           <mask
             height="24"
-            id="t-icon-app-instance-_r_vt_-overlap-fill1"
+            id="t-icon-app-instance-_r_105_-overlap-fill1"
             mask-type="luminance"
             maskContentUnits="userSpaceOnUse"
             maskUnits="userSpaceOnUse"
@@ -17136,7 +17136,7 @@ exports[`csr snapshot test > csr test src/button/_example/shape.tsx 1`] = `
           </mask>
           <mask
             height="24"
-            id="t-icon-app-instance-_r_vt_-overlap-fill2"
+            id="t-icon-app-instance-_r_105_-overlap-fill2"
             mask-type="luminance"
             maskContentUnits="userSpaceOnUse"
             maskUnits="userSpaceOnUse"
@@ -17164,7 +17164,7 @@ exports[`csr snapshot test > csr test src/button/_example/shape.tsx 1`] = `
         >
           <g
             id="fill1"
-            mask="url(#t-icon-app-instance-_r_vt_-overlap-fill1)"
+            mask="url(#t-icon-app-instance-_r_105_-overlap-fill1)"
           >
             <path
               d="M3 3H10V10H3V3Z"
@@ -17183,7 +17183,7 @@ exports[`csr snapshot test > csr test src/button/_example/shape.tsx 1`] = `
             d="M21.5 6.5C21.5 8.70914 19.7091 10.5 17.5 10.5C15.2909 10.5 13.5 8.70914 13.5 6.5C13.5 4.29086 15.2909 2.5 17.5 2.5C19.7091 2.5 21.5 4.29086 21.5 6.5Z"
             fill="transparent"
             id="fill2"
-            mask="url(#t-icon-app-instance-_r_vt_-overlap-fill2)"
+            mask="url(#t-icon-app-instance-_r_105_-overlap-fill2)"
           />
           <g
             id="stroke1"
@@ -29132,6 +29132,348 @@ exports[`csr snapshot test > csr test src/cascader/_example/check-strictly.tsx 1
 </div>
 `;
 
+exports[`csr snapshot test > csr test src/cascader/_example/filterable.tsx 1`] = `
+<div>
+  <div
+    class="t-cell"
+  >
+    <div
+      class="t-cell__left"
+    />
+    <div
+      class="t-cell__title"
+    >
+      <div
+        class="t-cell__title-text"
+      >
+        地址
+      </div>
+    </div>
+    <div
+      class="t-cell__note"
+    >
+      请选择地址
+    </div>
+    <div
+      class="t-cell__right t-cell__right--middle"
+    >
+      <div
+        class="t-cell__right-icon"
+      >
+        <svg
+          class="t-icon t-icon-chevron-right"
+          fill="none"
+          height="1em"
+          style="fill: none;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <g
+            id="chevron-right"
+          >
+            <path
+              d="M9.5 17.5L15 12L9.5 6.5"
+              id="stroke1"
+              stroke="currentColor"
+              stroke-linecap="square"
+              stroke-width="2"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div
+    class="t-popup t-popup--bottom"
+    style="display: none; animation-fill-mode: forwards;"
+  >
+    <div
+      class="t-cascader"
+    >
+      <div
+        class="t-cascader__title"
+      >
+        请选择地址
+      </div>
+      <div
+        class="t-cascader__close-btn"
+      >
+        <svg
+          class="t-icon t-icon-close"
+          fill="none"
+          height="1em"
+          style="fill: none; font-size: 24px;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <g
+            id="close"
+          >
+            <path
+              d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029"
+              id="stroke1"
+              stroke="currentColor"
+              stroke-linecap="square"
+              stroke-width="2"
+            />
+          </g>
+        </svg>
+      </div>
+      <div
+        class="t-cascader__content"
+      >
+        <div
+          class="t-cascader__filter"
+        >
+          <div>
+            <div
+              class="t-search"
+            >
+              <div
+                class="t-search__input-box t-search__input-box--square"
+              >
+                <svg
+                  class="t-icon t-icon-search"
+                  fill="none"
+                  height="1em"
+                  style="fill: none;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <defs>
+                    <mask
+                      height="24"
+                      id="t-icon-search-instance-_r_ul_-overlap-fill1"
+                      mask-type="luminance"
+                      maskContentUnits="userSpaceOnUse"
+                      maskUnits="userSpaceOnUse"
+                      width="24"
+                      x="0"
+                      y="0"
+                    >
+                      <rect
+                        fill="#fff"
+                        height="24"
+                        width="24"
+                        x="0"
+                        y="0"
+                      />
+                      <path
+                        d="M15.8027 15.8037L21.106 21.107"
+                        fill="none"
+                        stroke="#000"
+                        stroke-linecap="square"
+                        stroke-width="2"
+                      />
+                      <path
+                        d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z"
+                        fill="none"
+                        stroke="#000"
+                        stroke-linecap="square"
+                        stroke-width="2"
+                      />
+                    </mask>
+                    <mask
+                      height="24"
+                      id="t-icon-search-instance-_r_ul_-overlap-stroke2"
+                      mask-type="luminance"
+                      maskContentUnits="userSpaceOnUse"
+                      maskUnits="userSpaceOnUse"
+                      width="24"
+                      x="0"
+                      y="0"
+                    >
+                      <rect
+                        fill="#fff"
+                        height="24"
+                        width="24"
+                        x="0"
+                        y="0"
+                      />
+                      <path
+                        d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z"
+                        fill="none"
+                        stroke="#000"
+                        stroke-linecap="square"
+                        stroke-width="2"
+                      />
+                    </mask>
+                  </defs>
+                  <g
+                    id="search"
+                  >
+                    <path
+                      d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z"
+                      fill="transparent"
+                      id="fill1"
+                      mask="url(#t-icon-search-instance-_r_ul_-overlap-fill1)"
+                    />
+                    <path
+                      d="M15.8027 15.8037L21.106 21.107"
+                      id="stroke2"
+                      mask="url(#t-icon-search-instance-_r_ul_-overlap-stroke2)"
+                      stroke="currentColor"
+                      stroke-linecap="square"
+                      stroke-width="2"
+                    />
+                    <path
+                      d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z"
+                      id="stroke1"
+                      stroke="currentColor"
+                      stroke-linecap="square"
+                      stroke-width="2"
+                    />
+                  </g>
+                </svg>
+                <input
+                  class="t-input__keyword"
+                  placeholder="搜索省/市/区"
+                  type="search"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="t-cascader__steps"
+          >
+            <div
+              class="t-cascader__step"
+            >
+              <div
+                class="t-cascader__step-dot t-cascader__step-dot--last"
+              />
+              <div
+                class="t-cascader__step-label t-cascader__step-label--active"
+              >
+                选择选项
+              </div>
+              <svg
+                class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                fill="none"
+                height="1em"
+                style="fill: none; font-size: 22px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <g
+                  id="chevron-right"
+                >
+                  <path
+                    d="M9.5 17.5L15 12L9.5 6.5"
+                    id="stroke1"
+                    stroke="currentColor"
+                    stroke-linecap="square"
+                    stroke-width="2"
+                  />
+                </g>
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-cascader__options-container"
+          style="width: 100vw; transform: translateX(-000vw);"
+        >
+          <div
+            class="t-cascader__options"
+          >
+            <div
+              class="t-cascader-radio-group-0"
+            >
+              <div
+                class="t-radio-group"
+              >
+                <div
+                  class="t-radio t-radio--right t-radio--block"
+                >
+                  <input
+                    class="t-radio__original"
+                    type="radio"
+                    value="110000"
+                  />
+                  <div
+                    class="t-radio__icon t-radio__icon--right"
+                  >
+                    <div
+                      class="placeholder"
+                    />
+                  </div>
+                  <div
+                    class="t-radio__content"
+                  >
+                    <span
+                      class="t-radio__title"
+                      style="-webkit-line-clamp: 3;"
+                    >
+                      北京市
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="t-radio t-radio--right t-radio--block"
+                >
+                  <input
+                    class="t-radio__original"
+                    type="radio"
+                    value="310000"
+                  />
+                  <div
+                    class="t-radio__icon t-radio__icon--right"
+                  >
+                    <div
+                      class="placeholder"
+                    />
+                  </div>
+                  <div
+                    class="t-radio__content"
+                  >
+                    <span
+                      class="t-radio__title"
+                      style="-webkit-line-clamp: 3;"
+                    >
+                      上海市
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="t-radio t-radio--right t-radio--block"
+                >
+                  <input
+                    class="t-radio__original"
+                    type="radio"
+                    value="440000"
+                  />
+                  <div
+                    class="t-radio__icon t-radio__icon--right"
+                  >
+                    <div
+                      class="placeholder"
+                    />
+                  </div>
+                  <div
+                    class="t-radio__content"
+                  >
+                    <span
+                      class="t-radio__title"
+                      style="-webkit-line-clamp: 3;"
+                    >
+                      广东省
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test src/cascader/_example/index.tsx 1`] = `
 <div>
   <div
@@ -31530,7 +31872,509 @@ exports[`csr snapshot test > csr test src/cascader/_example/index.tsx 1`] = `
                         <input
                           class="t-radio__original"
                           type="radio"
-                          value="440300"
+                          value="440300"
+                        />
+                        <div
+                          class="t-radio__icon t-radio__icon--right"
+                        >
+                          <div
+                            class="placeholder"
+                          />
+                        </div>
+                        <div
+                          class="t-radio__content"
+                        >
+                          <span
+                            class="t-radio__title"
+                            style="-webkit-line-clamp: 3;"
+                          >
+                            深圳市
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <p
+          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        >
+          选择任意一项
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="t-cell"
+        >
+          <div
+            class="t-cell__left"
+          />
+          <div
+            class="t-cell__title"
+          >
+            <div
+              class="t-cell__title-text"
+            >
+              地址
+            </div>
+          </div>
+          <div
+            class="t-cell__note"
+          >
+            请选择地址
+          </div>
+          <div
+            class="t-cell__right t-cell__right--middle"
+          >
+            <div
+              class="t-cell__right-icon"
+            >
+              <svg
+                class="t-icon t-icon-chevron-right"
+                fill="none"
+                height="1em"
+                style="fill: none;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <g
+                  id="chevron-right"
+                >
+                  <path
+                    d="M9.5 17.5L15 12L9.5 6.5"
+                    id="stroke1"
+                    stroke="currentColor"
+                    stroke-linecap="square"
+                    stroke-width="2"
+                  />
+                </g>
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-popup t-popup--bottom"
+          style="display: none; animation-fill-mode: forwards;"
+        >
+          <div
+            class="t-cascader"
+          >
+            <div
+              class="t-cascader__title"
+            >
+              选择地址
+            </div>
+            <div
+              class="t-cascader__close-btn"
+            >
+              <span
+                style="color: rgb(0, 82, 217);"
+              >
+                确定
+              </span>
+            </div>
+            <div
+              class="t-cascader__content"
+            >
+              <div>
+                <div
+                  class="t-cascader__steps"
+                >
+                  <div
+                    class="t-cascader__step"
+                  >
+                    <div
+                      class="t-cascader__step-dot t-cascader__step-dot--last"
+                    />
+                    <div
+                      class="t-cascader__step-label t-cascader__step-label--active"
+                    >
+                      选择选项
+                    </div>
+                    <svg
+                      class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                      fill="none"
+                      height="1em"
+                      style="fill: none; font-size: 22px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <g
+                        id="chevron-right"
+                      >
+                        <path
+                          d="M9.5 17.5L15 12L9.5 6.5"
+                          id="stroke1"
+                          stroke="currentColor"
+                          stroke-linecap="square"
+                          stroke-width="2"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="t-cascader__options-container"
+                style="width: 100vw; transform: translateX(-000vw);"
+              >
+                <div
+                  class="t-cascader__options"
+                >
+                  <div
+                    class="t-cascader-radio-group-0"
+                  >
+                    <div
+                      class="t-radio-group"
+                    >
+                      <div
+                        class="t-radio t-radio--right t-radio--block"
+                      >
+                        <input
+                          class="t-radio__original"
+                          type="radio"
+                          value="110000"
+                        />
+                        <div
+                          class="t-radio__icon t-radio__icon--right"
+                        >
+                          <div
+                            class="placeholder"
+                          />
+                        </div>
+                        <div
+                          class="t-radio__content"
+                        >
+                          <span
+                            class="t-radio__title"
+                            style="-webkit-line-clamp: 3;"
+                          >
+                            北京市
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        class="t-radio t-radio--right t-radio--block"
+                      >
+                        <input
+                          class="t-radio__original"
+                          type="radio"
+                          value="120000"
+                        />
+                        <div
+                          class="t-radio__icon t-radio__icon--right"
+                        >
+                          <div
+                            class="placeholder"
+                          />
+                        </div>
+                        <div
+                          class="t-radio__content"
+                        >
+                          <span
+                            class="t-radio__title"
+                            style="-webkit-line-clamp: 3;"
+                          >
+                            天津市
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <p
+          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        >
+          支持搜索
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="t-cell"
+        >
+          <div
+            class="t-cell__left"
+          />
+          <div
+            class="t-cell__title"
+          >
+            <div
+              class="t-cell__title-text"
+            >
+              地址
+            </div>
+          </div>
+          <div
+            class="t-cell__note"
+          >
+            请选择地址
+          </div>
+          <div
+            class="t-cell__right t-cell__right--middle"
+          >
+            <div
+              class="t-cell__right-icon"
+            >
+              <svg
+                class="t-icon t-icon-chevron-right"
+                fill="none"
+                height="1em"
+                style="fill: none;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <g
+                  id="chevron-right"
+                >
+                  <path
+                    d="M9.5 17.5L15 12L9.5 6.5"
+                    id="stroke1"
+                    stroke="currentColor"
+                    stroke-linecap="square"
+                    stroke-width="2"
+                  />
+                </g>
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div
+          class="t-popup t-popup--bottom"
+          style="display: none; animation-fill-mode: forwards;"
+        >
+          <div
+            class="t-cascader"
+          >
+            <div
+              class="t-cascader__title"
+            >
+              请选择地址
+            </div>
+            <div
+              class="t-cascader__close-btn"
+            >
+              <svg
+                class="t-icon t-icon-close"
+                fill="none"
+                height="1em"
+                style="fill: none; font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <g
+                  id="close"
+                >
+                  <path
+                    d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029"
+                    id="stroke1"
+                    stroke="currentColor"
+                    stroke-linecap="square"
+                    stroke-width="2"
+                  />
+                </g>
+              </svg>
+            </div>
+            <div
+              class="t-cascader__content"
+            >
+              <div
+                class="t-cascader__filter"
+              >
+                <div>
+                  <div
+                    class="t-search"
+                  >
+                    <div
+                      class="t-search__input-box t-search__input-box--square"
+                    >
+                      <svg
+                        class="t-icon t-icon-search"
+                        fill="none"
+                        height="1em"
+                        style="fill: none;"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <defs>
+                          <mask
+                            height="24"
+                            id="t-icon-search-instance-_r_u7_-overlap-fill1"
+                            mask-type="luminance"
+                            maskContentUnits="userSpaceOnUse"
+                            maskUnits="userSpaceOnUse"
+                            width="24"
+                            x="0"
+                            y="0"
+                          >
+                            <rect
+                              fill="#fff"
+                              height="24"
+                              width="24"
+                              x="0"
+                              y="0"
+                            />
+                            <path
+                              d="M15.8027 15.8037L21.106 21.107"
+                              fill="none"
+                              stroke="#000"
+                              stroke-linecap="square"
+                              stroke-width="2"
+                            />
+                            <path
+                              d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z"
+                              fill="none"
+                              stroke="#000"
+                              stroke-linecap="square"
+                              stroke-width="2"
+                            />
+                          </mask>
+                          <mask
+                            height="24"
+                            id="t-icon-search-instance-_r_u7_-overlap-stroke2"
+                            mask-type="luminance"
+                            maskContentUnits="userSpaceOnUse"
+                            maskUnits="userSpaceOnUse"
+                            width="24"
+                            x="0"
+                            y="0"
+                          >
+                            <rect
+                              fill="#fff"
+                              height="24"
+                              width="24"
+                              x="0"
+                              y="0"
+                            />
+                            <path
+                              d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z"
+                              fill="none"
+                              stroke="#000"
+                              stroke-linecap="square"
+                              stroke-width="2"
+                            />
+                          </mask>
+                        </defs>
+                        <g
+                          id="search"
+                        >
+                          <path
+                            d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z"
+                            fill="transparent"
+                            id="fill1"
+                            mask="url(#t-icon-search-instance-_r_u7_-overlap-fill1)"
+                          />
+                          <path
+                            d="M15.8027 15.8037L21.106 21.107"
+                            id="stroke2"
+                            mask="url(#t-icon-search-instance-_r_u7_-overlap-stroke2)"
+                            stroke="currentColor"
+                            stroke-linecap="square"
+                            stroke-width="2"
+                          />
+                          <path
+                            d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z"
+                            id="stroke1"
+                            stroke="currentColor"
+                            stroke-linecap="square"
+                            stroke-width="2"
+                          />
+                        </g>
+                      </svg>
+                      <input
+                        class="t-input__keyword"
+                        placeholder="搜索省/市/区"
+                        type="search"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <div
+                  class="t-cascader__steps"
+                >
+                  <div
+                    class="t-cascader__step"
+                  >
+                    <div
+                      class="t-cascader__step-dot t-cascader__step-dot--last"
+                    />
+                    <div
+                      class="t-cascader__step-label t-cascader__step-label--active"
+                    >
+                      选择选项
+                    </div>
+                    <svg
+                      class="t-icon t-icon-chevron-right t-cascader__step-arrow"
+                      fill="none"
+                      height="1em"
+                      style="fill: none; font-size: 22px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <g
+                        id="chevron-right"
+                      >
+                        <path
+                          d="M9.5 17.5L15 12L9.5 6.5"
+                          id="stroke1"
+                          stroke="currentColor"
+                          stroke-linecap="square"
+                          stroke-width="2"
+                        />
+                      </g>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="t-cascader__options-container"
+                style="width: 100vw; transform: translateX(-000vw);"
+              >
+                <div
+                  class="t-cascader__options"
+                >
+                  <div
+                    class="t-cascader-radio-group-0"
+                  >
+                    <div
+                      class="t-radio-group"
+                    >
+                      <div
+                        class="t-radio t-radio--right t-radio--block"
+                      >
+                        <input
+                          class="t-radio__original"
+                          type="radio"
+                          value="110000"
                         />
                         <div
                           class="t-radio__icon t-radio__icon--right"
@@ -31546,165 +32390,17 @@ exports[`csr snapshot test > csr test src/cascader/_example/index.tsx 1`] = `
                             class="t-radio__title"
                             style="-webkit-line-clamp: 3;"
                           >
-                            深圳市
+                            北京市
                           </span>
                         </div>
                       </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
-    >
-      <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        <p
-          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-        >
-          选择任意一项
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot"
-      >
-        <div
-          class="t-cell"
-        >
-          <div
-            class="t-cell__left"
-          />
-          <div
-            class="t-cell__title"
-          >
-            <div
-              class="t-cell__title-text"
-            >
-              地址
-            </div>
-          </div>
-          <div
-            class="t-cell__note"
-          >
-            请选择地址
-          </div>
-          <div
-            class="t-cell__right t-cell__right--middle"
-          >
-            <div
-              class="t-cell__right-icon"
-            >
-              <svg
-                class="t-icon t-icon-chevron-right"
-                fill="none"
-                height="1em"
-                style="fill: none;"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <g
-                  id="chevron-right"
-                >
-                  <path
-                    d="M9.5 17.5L15 12L9.5 6.5"
-                    id="stroke1"
-                    stroke="currentColor"
-                    stroke-linecap="square"
-                    stroke-width="2"
-                  />
-                </g>
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div
-          class="t-popup t-popup--bottom"
-          style="display: none; animation-fill-mode: forwards;"
-        >
-          <div
-            class="t-cascader"
-          >
-            <div
-              class="t-cascader__title"
-            >
-              选择地址
-            </div>
-            <div
-              class="t-cascader__close-btn"
-            >
-              <span
-                style="color: rgb(0, 82, 217);"
-              >
-                确定
-              </span>
-            </div>
-            <div
-              class="t-cascader__content"
-            >
-              <div>
-                <div
-                  class="t-cascader__steps"
-                >
-                  <div
-                    class="t-cascader__step"
-                  >
-                    <div
-                      class="t-cascader__step-dot t-cascader__step-dot--last"
-                    />
-                    <div
-                      class="t-cascader__step-label t-cascader__step-label--active"
-                    >
-                      选择选项
-                    </div>
-                    <svg
-                      class="t-icon t-icon-chevron-right t-cascader__step-arrow"
-                      fill="none"
-                      height="1em"
-                      style="fill: none; font-size: 22px;"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                    >
-                      <g
-                        id="chevron-right"
-                      >
-                        <path
-                          d="M9.5 17.5L15 12L9.5 6.5"
-                          id="stroke1"
-                          stroke="currentColor"
-                          stroke-linecap="square"
-                          stroke-width="2"
-                        />
-                      </g>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="t-cascader__options-container"
-                style="width: 100vw; transform: translateX(-000vw);"
-              >
-                <div
-                  class="t-cascader__options"
-                >
-                  <div
-                    class="t-cascader-radio-group-0"
-                  >
-                    <div
-                      class="t-radio-group"
-                    >
                       <div
                         class="t-radio t-radio--right t-radio--block"
                       >
                         <input
                           class="t-radio__original"
                           type="radio"
-                          value="110000"
+                          value="310000"
                         />
                         <div
                           class="t-radio__icon t-radio__icon--right"
@@ -31720,7 +32416,7 @@ exports[`csr snapshot test > csr test src/cascader/_example/index.tsx 1`] = `
                             class="t-radio__title"
                             style="-webkit-line-clamp: 3;"
                           >
-                            北京市
+                            上海市
                           </span>
                         </div>
                       </div>
@@ -31730,7 +32426,7 @@ exports[`csr snapshot test > csr test src/cascader/_example/index.tsx 1`] = `
                         <input
                           class="t-radio__original"
                           type="radio"
-                          value="120000"
+                          value="440000"
                         />
                         <div
                           class="t-radio__icon t-radio__icon--right"
@@ -31746,7 +32442,7 @@ exports[`csr snapshot test > csr test src/cascader/_example/index.tsx 1`] = `
                             class="t-radio__title"
                             style="-webkit-line-clamp: 3;"
                           >
-                            天津市
+                            广东省
                           </span>
                         </div>
                       </div>
@@ -165747,7 +166443,9 @@ exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.tsx 1`] = `"<div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><span style="color:#0052d9">确定</span></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cascader 级联选择器</h1><p class="tdesign-mobile-demo-header__summary">用于多层级数据的逐级选择。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">垂直级联选择器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平级联选择器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 进阶</h2><p class="tdesign-mobile-demo-block__summary">带初始值</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">自定义 keys</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">使用次级标题</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-title">请选择省份</div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">异步加载</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="440300"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">深圳市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">选择任意一项</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><span style="color:#0052d9">确定</span></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/filterable.tsx 1`] = `"<div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">请选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div class="t-cascader__filter"><div><div class="t-search"><div class="t-search__input-box t-search__input-box--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-search" style="fill:none"><defs><mask id="t-icon-search-instance-_R_1apa_-overlap-fill1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" mask-type="luminance" x="0" y="0" width="24" height="24"><rect x="0" y="0" width="24" height="24" fill="#fff"></rect><path stroke="#000" d="M15.8027 15.8037L21.106 21.107" stroke-linecap="square" stroke-width="2" fill="none"></path><path stroke="#000" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2" fill="none"></path></mask><mask id="t-icon-search-instance-_R_1apa_-overlap-stroke2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" mask-type="luminance" x="0" y="0" width="24" height="24"><rect x="0" y="0" width="24" height="24" fill="#fff"></rect><path stroke="#000" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2" fill="none"></path></mask></defs><g id="search"><path id="fill1" fill="transparent" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" mask="url(#t-icon-search-instance-_R_1apa_-overlap-fill1)"></path><path id="stroke2" stroke="currentColor" d="M15.8027 15.8037L21.106 21.107" stroke-linecap="square" stroke-width="2" mask="url(#t-icon-search-instance-_R_1apa_-overlap-stroke2)"></path><path id="stroke1" stroke="currentColor" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2"></path></g></svg><input type="search" class="t-input__keyword" placeholder="搜索省/市/区" value=""/></div></div></div></div><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="310000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">上海市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="440000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">广东省</span></div></div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cascader 级联选择器</h1><p class="tdesign-mobile-demo-header__summary">用于多层级数据的逐级选择。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">垂直级联选择器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平级联选择器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 进阶</h2><p class="tdesign-mobile-demo-block__summary">带初始值</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">自定义 keys</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">使用次级标题</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-title">请选择省份</div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">异步加载</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="440300"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">深圳市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">选择任意一项</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><span style="color:#0052d9">确定</span></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">支持搜索</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">请选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div class="t-cascader__filter"><div><div class="t-search"><div class="t-search__input-box t-search__input-box--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-search" style="fill:none"><defs><mask id="t-icon-search-instance-_R_2lil9_-overlap-fill1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" mask-type="luminance" x="0" y="0" width="24" height="24"><rect x="0" y="0" width="24" height="24" fill="#fff"></rect><path stroke="#000" d="M15.8027 15.8037L21.106 21.107" stroke-linecap="square" stroke-width="2" fill="none"></path><path stroke="#000" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2" fill="none"></path></mask><mask id="t-icon-search-instance-_R_2lil9_-overlap-stroke2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" mask-type="luminance" x="0" y="0" width="24" height="24"><rect x="0" y="0" width="24" height="24" fill="#fff"></rect><path stroke="#000" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2" fill="none"></path></mask></defs><g id="search"><path id="fill1" fill="transparent" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" mask="url(#t-icon-search-instance-_R_2lil9_-overlap-fill1)"></path><path id="stroke2" stroke="currentColor" d="M15.8027 15.8037L21.106 21.107" stroke-linecap="square" stroke-width="2" mask="url(#t-icon-search-instance-_R_2lil9_-overlap-stroke2)"></path><path id="stroke1" stroke="currentColor" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2"></path></g></svg><input type="search" class="t-input__keyword" placeholder="搜索省/市/区" value=""/></div></div></div></div><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="310000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">上海市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="440000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">广东省</span></div></div></div></div></div></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `"<div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></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 06b96a04c..4f41112a6 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -88,7 +88,9 @@ exports[`ssr snapshot test > ssr test src/cascader/_example/base.tsx 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test src/cascader/_example/check-strictly.tsx 1`] = `"<div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><span style="color:#0052d9">确定</span></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cascader 级联选择器</h1><p class="tdesign-mobile-demo-header__summary">用于多层级数据的逐级选择。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">垂直级联选择器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平级联选择器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 进阶</h2><p class="tdesign-mobile-demo-block__summary">带初始值</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">自定义 keys</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">使用次级标题</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-title">请选择省份</div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">异步加载</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="440300"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">深圳市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">选择任意一项</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><span style="color:#0052d9">确定</span></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cascader/_example/filterable.tsx 1`] = `"<div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">请选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div class="t-cascader__filter"><div><div class="t-search"><div class="t-search__input-box t-search__input-box--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-search" style="fill:none"><defs><mask id="t-icon-search-instance-_R_1apa_-overlap-fill1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" mask-type="luminance" x="0" y="0" width="24" height="24"><rect x="0" y="0" width="24" height="24" fill="#fff"></rect><path stroke="#000" d="M15.8027 15.8037L21.106 21.107" stroke-linecap="square" stroke-width="2" fill="none"></path><path stroke="#000" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2" fill="none"></path></mask><mask id="t-icon-search-instance-_R_1apa_-overlap-stroke2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" mask-type="luminance" x="0" y="0" width="24" height="24"><rect x="0" y="0" width="24" height="24" fill="#fff"></rect><path stroke="#000" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2" fill="none"></path></mask></defs><g id="search"><path id="fill1" fill="transparent" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" mask="url(#t-icon-search-instance-_R_1apa_-overlap-fill1)"></path><path id="stroke2" stroke="currentColor" d="M15.8027 15.8037L21.106 21.107" stroke-linecap="square" stroke-width="2" mask="url(#t-icon-search-instance-_R_1apa_-overlap-stroke2)"></path><path id="stroke1" stroke="currentColor" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2"></path></g></svg><input type="search" class="t-input__keyword" placeholder="搜索省/市/区" value=""/></div></div></div></div><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="310000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">上海市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="440000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">广东省</span></div></div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/cascader/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cascader 级联选择器</h1><p class="tdesign-mobile-demo-header__summary">用于多层级数据的逐级选择。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">垂直级联选择器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">水平级联选择器</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 进阶</h2><p class="tdesign-mobile-demo-block__summary">带初始值</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">自定义 keys</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">使用次级标题</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-title">请选择省份</div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">异步加载</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="440300"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">深圳市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">选择任意一项</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><span style="color:#0052d9">确定</span></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">支持搜索</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">请选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div class="t-cascader__filter"><div><div class="t-search"><div class="t-search__input-box t-search__input-box--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-search" style="fill:none"><defs><mask id="t-icon-search-instance-_R_2lil9_-overlap-fill1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" mask-type="luminance" x="0" y="0" width="24" height="24"><rect x="0" y="0" width="24" height="24" fill="#fff"></rect><path stroke="#000" d="M15.8027 15.8037L21.106 21.107" stroke-linecap="square" stroke-width="2" fill="none"></path><path stroke="#000" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2" fill="none"></path></mask><mask id="t-icon-search-instance-_R_2lil9_-overlap-stroke2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" mask-type="luminance" x="0" y="0" width="24" height="24"><rect x="0" y="0" width="24" height="24" fill="#fff"></rect><path stroke="#000" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2" fill="none"></path></mask></defs><g id="search"><path id="fill1" fill="transparent" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" mask="url(#t-icon-search-instance-_R_2lil9_-overlap-fill1)"></path><path id="stroke2" stroke="currentColor" d="M15.8027 15.8037L21.106 21.107" stroke-linecap="square" stroke-width="2" mask="url(#t-icon-search-instance-_R_2lil9_-overlap-stroke2)"></path><path id="stroke1" stroke="currentColor" d="M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z" stroke-linecap="square" stroke-width="2"></path></g></svg><input type="search" class="t-input__keyword" placeholder="搜索省/市/区" value=""/></div></div></div></div><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="310000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">上海市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="440000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">广东省</span></div></div></div></div></div></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cascader/_example/keys.tsx 1`] = `"<div class="t-cell"><div class="t-cell__left"></div><div class="t-cell__title"><div class="t-cell__title-text">地址</div></div><div class="t-cell__note">请选择地址</div><div class="t-cell__right t-cell__right--middle"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-popup t-popup--bottom" style="display:none;animation-fill-mode:forwards"><div class="t-cascader"><div class="t-cascader__title">选择地址</div><div class="t-cascader__close-btn"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close" style="fill:none;font-size:24px"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-cascader__content"><div><div class="t-cascader__steps"><div class="t-cascader__step"><div class="t-cascader__step-dot t-cascader__step-dot--last"></div><div class="t-cascader__step-label t-cascader__step-label--active">选择选项</div><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right t-cascader__step-arrow" style="fill:none;font-size:22px"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div></div><div class="t-cascader__options-container" style="width:100vw;transform:translateX(-000vw)"><div class="t-cascader__options"><div class="t-cascader-radio-group-0"><div class="t-radio-group"><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="110000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">北京市</span></div></div><div class="t-radio t-radio--right t-radio--block"><input type="radio" class="t-radio__original" value="120000"/><div class="t-radio__icon t-radio__icon--right"><div class="placeholder"></div></div><div class="t-radio__content"><span class="t-radio__title" style="-webkit-line-clamp:3">天津市</span></div></div></div></div></div></div></div></div></div>"`;
 

From a8cdbe9c558d7c3a07617a68f5208cf3c8cec939 Mon Sep 17 00:00:00 2001
From: v_luopinluo <173308582@qq.com>
Date: Thu, 15 Oct 2026 14:51:12 +0800
Subject: [PATCH 5/7] =?UTF-8?q?fix(cascader):=20commont=E4=B8=AD=E6=8F=90?=
 =?UTF-8?q?=E5=87=BA=E7=9A=84=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_common               |  2 +-
 src/cascader/Cascader.tsx | 67 ++++++++++++++++++++++++++++-----------
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/_common b/src/_common
index 00e50af65..63f984912 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 00e50af65dd5d1a983cbfdb649faa77524330f01
+Subproject commit 63f984912ad4182736353a786a9951a55b4a7770
diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
index ed9683bd3..ab5528a77 100644
--- a/src/cascader/Cascader.tsx
+++ b/src/cascader/Cascader.tsx
@@ -149,7 +149,6 @@ const Cascader: React.FC<CascaderProps> = (props) => {
   const [filterResults, setFilterResults] = useState<FilterResult[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const filterDebouncedRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const flatPathsRef = useRef<FlatPath[]>([]);
 
   const normalizedKeys = useMemo(
     () => ({
@@ -258,12 +257,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
   );
 
   // 搜索相关函数
-  const ensureFlatPaths = useCallback(() => {
-    if (flatPathsRef.current.length === 0) {
-      flatPathsRef.current = flattenPaths(inputOptions, normalizedKeys);
-    }
-    return flatPathsRef.current;
-  }, [inputOptions, normalizedKeys]);
+  const flatPaths = useMemo(() => flattenPaths(inputOptions, normalizedKeys), [inputOptions, normalizedKeys]);
 
   const resetFilter = useCallback(() => {
     setFilterKeyword('');
@@ -280,10 +274,9 @@ const Cascader: React.FC<CascaderProps> = (props) => {
       }
 
       const userFilter = filter as CascaderFilterFunction | null;
-      const flat = ensureFlatPaths();
       const results: FilterResult[] = [];
 
-      flat.forEach((entry: FlatPath) => {
+      flatPaths.forEach((entry: FlatPath) => {
         const leaf = entry.path[entry.path.length - 1];
         const matched =
           typeof userFilter === 'function'
@@ -299,20 +292,21 @@ const Cascader: React.FC<CascaderProps> = (props) => {
         }
       });
 
-      setFilterKeyword(rawKeyword);
       setFilterResults(results);
       setIsSearching(true);
     },
-    [filter, normalizedKeys, ensureFlatPaths, resetFilter],
+    [filter, normalizedKeys, flatPaths, resetFilter],
   );
 
   const handleFilterChange = useCallback(
     (value: string) => {
+      const trimmed = String(value ?? '').trim();
+      setFilterKeyword(trimmed);
       if (filterDebouncedRef.current) {
         clearTimeout(filterDebouncedRef.current);
       }
       filterDebouncedRef.current = setTimeout(() => {
-        applyFilter(value);
+        applyFilter(trimmed);
       }, 200);
     },
     [applyFilter],
@@ -327,16 +321,20 @@ const Cascader: React.FC<CascaderProps> = (props) => {
 
   const handleFilterResultTap = useCallback(
     (result: FilterResult) => {
-      if (result.disabled) return;
+      if (result.disabled || result.indexes.length === 0) return;
 
       const { indexes } = result;
-      const selectedValues: CascaderProps['value'][] = [];
-      const selectedOptions: { [key: string]: any }[] = [];
       const labelKey = normalizedKeys.label;
       const valueKey = normalizedKeys.value;
       const childrenKey = normalizedKeys.children;
 
+      // 遍历路径，找到最终节点及其层级
       let current: TreeOptionData[] = inputOptions;
+      let finalNode: TreeOptionData | undefined;
+      let finalLevel = 0;
+      const selectedValues: CascaderProps['value'][] = [];
+      const selectedOptions: { [key: string]: any }[] = [];
+
       for (let i = 0; i < indexes.length; i++) {
         const index = indexes[i];
         const next = current[index];
@@ -345,18 +343,51 @@ const Cascader: React.FC<CascaderProps> = (props) => {
           [labelKey]: next[labelKey],
           [valueKey]: next[valueKey],
         });
+        finalNode = next;
+        finalLevel = i;
+
         const children = next[childrenKey];
         if (Array.isArray(children) && children.length > 0) {
           current = children as TreeOptionData[];
         }
       }
 
+      onPick?.({
+        value: finalNode[valueKey],
+        label: String(finalNode[labelKey] || ''),
+        index: indexes[indexes.length - 1],
+        level: finalLevel,
+      });
+
+      if (finalNode && finalNode[childrenKey] === true && load) {
+        load({ data: finalNode, value: finalNode[valueKey], label: finalNode[labelKey] })
+          .then((loadedChildren) => {
+            setInternalSelectedValues(selectedValues);
+            setOptionsList((prev) => [...prev.slice(0, finalLevel + 1), normalizeOptionsByKeys(loadedChildren)]);
+            setStepIndex(finalLevel + 1);
+          })
+          .catch((error) => {
+            console.error('Load children failed:', error);
+          });
+        return;
+      }
+
       resetFilter();
       setInternalValue(last(selectedValues), selectedOptions as any);
       setInternalVisible(false);
       onClose?.('finish');
     },
-    [normalizedKeys, inputOptions, setInternalValue, setInternalVisible, onClose, resetFilter],
+    [
+      normalizedKeys,
+      inputOptions,
+      setInternalValue,
+      setInternalVisible,
+      onClose,
+      resetFilter,
+      onPick,
+      load,
+      normalizeOptionsByKeys,
+    ],
   );
 
   // 清理防抖定时器
@@ -535,7 +566,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
                 <div className={`${cascaderClass}__filter-result`}>
                   {filterResults.map((result) => (
                     <div
-                      key={result.key}
+                      key={result.indexes.join('-')}
                       className={classNames(`${cascaderClass}__filter-result-item`, {
                         [`${cascaderClass}__filter-result-item--disabled`]: result.disabled,
                       })}
@@ -555,7 +586,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
                   ))}
                 </div>
               ) : (
-                <div className={`${cascaderClass}__filter-empty`}>{globalConfig.cascader.empty}</div>
+                <div className={`${cascaderClass}__filter-empty`}>{globalConfig?.cascader?.empty}</div>
               )}
             </>
           )}

From efb53d4345399ef51edbc2f272c5eb7aecc8660e Mon Sep 17 00:00:00 2001
From: "Y." <anly_yaw@163.com>
Date: Thu, 15 Oct 2026 19:49:47 +0800
Subject: [PATCH 6/7] fix: fix cr

---
 src/_common                              |  2 +-
 src/cascader/Cascader.tsx                | 52 ++++++++-----
 src/cascader/__tests__/cascader.test.tsx | 97 ++++++++++++++++++++++++
 3 files changed, 131 insertions(+), 20 deletions(-)

diff --git a/src/_common b/src/_common
index 63f984912..27d155da6 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 63f984912ad4182736353a786a9951a55b4a7770
+Subproject commit 27d155da6cfd8d29f0987563fbff55d13e288475
diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
index ab5528a77..ab1cdb026 100644
--- a/src/cascader/Cascader.tsx
+++ b/src/cascader/Cascader.tsx
@@ -12,6 +12,7 @@ import { StyledProps, TreeOptionData } from '../common';
 import { usePrefixClass } from '../hooks/useClass';
 import useConfig from '../hooks/useConfig';
 import useDefaultProps from '../hooks/useDefaultProps';
+import useLatest from '../hooks/useLatest';
 import parseTNode from '../_util/parseTNode';
 import { cascaderDefaultProps } from './defaultProps';
 import { CascaderFilterFunction, CascaderTriggerSource, TdCascaderProps } from './type';
@@ -19,18 +20,16 @@ import { CascaderFilterFunction, CascaderTriggerSource, TdCascaderProps } from '
 type OptionsType = TreeOptionData[];
 
 type FlatPath = {
-  key: string;
   path: TreeOptionData[];
   indexes: number[];
   labels: string[];
-  text: string;
   disabled: boolean;
+  isLeaf: boolean;
 };
 
 type ResultFragment = { id: number; text: string; highlight: boolean };
 
 type FilterResult = {
-  key: string;
   indexes: number[];
   disabled: boolean;
   fragments: ResultFragment[];
@@ -49,19 +48,19 @@ function flattenPaths(
       const nextPath = [...path, item];
       const nextIndexes = [...indexes, idx];
       const children = item[keys.children];
-      if (Array.isArray(children) && children.length > 0) {
+      // checkStrictly 下父节点也可被搜索选中，因此父节点同样生成一条路径并标记 isLeaf
+      const isLeaf = !(Array.isArray(children) && children.length > 0);
+
+      result.push({
+        path: nextPath,
+        indexes: nextIndexes,
+        labels: nextPath.map((node) => String(node[keys.label] ?? '')),
+        disabled: nextPath.some((node) => node[keys.disabled]),
+        isLeaf,
+      });
+
+      if (!isLeaf) {
         walk(children as TreeOptionData[], nextPath, nextIndexes);
-      } else {
-        const labels = nextPath.map((node) => String(node[keys.label] ?? ''));
-        const text = [labels.join(''), String(item?.text ?? '')].filter(Boolean).join('');
-        result.push({
-          key: nextPath.map((node) => String(node[keys.value] ?? '')).join('/'),
-          path: nextPath,
-          indexes: nextIndexes,
-          labels,
-          text,
-          disabled: nextPath.some((node) => node[keys.disabled]),
-        });
       }
     });
   };
@@ -277,6 +276,9 @@ const Cascader: React.FC<CascaderProps> = (props) => {
       const results: FilterResult[] = [];
 
       flatPaths.forEach((entry: FlatPath) => {
+        // 非 checkStrictly 仅保留叶子节点，checkStrictly 时父节点也可被搜索选中
+        if (!checkStrictly && !entry.isLeaf) return;
+
         const leaf = entry.path[entry.path.length - 1];
         const matched =
           typeof userFilter === 'function'
@@ -284,7 +286,6 @@ const Cascader: React.FC<CascaderProps> = (props) => {
             : defaultFilter(keyword, leaf, entry.path, normalizedKeys.label);
         if (matched) {
           results.push({
-            key: entry.key,
             indexes: entry.indexes,
             disabled: entry.disabled,
             fragments: buildFragments(entry.labels, keyword),
@@ -295,9 +296,19 @@ const Cascader: React.FC<CascaderProps> = (props) => {
       setFilterResults(results);
       setIsSearching(true);
     },
-    [filter, normalizedKeys, flatPaths, resetFilter],
+    [filter, normalizedKeys, flatPaths, resetFilter, checkStrictly],
   );
 
+  const applyFilterLatest = useLatest(applyFilter);
+
+  // options 变化时，若处于搜索态，基于最新数据重新过滤，避免结果过期
+  useEffect(() => {
+    if (isSearching) {
+      applyFilter(filterKeyword);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flatPaths]);
+
   const handleFilterChange = useCallback(
     (value: string) => {
       const trimmed = String(value ?? '').trim();
@@ -306,10 +317,10 @@ const Cascader: React.FC<CascaderProps> = (props) => {
         clearTimeout(filterDebouncedRef.current);
       }
       filterDebouncedRef.current = setTimeout(() => {
-        applyFilter(trimmed);
+        applyFilterLatest.current(trimmed);
       }, 200);
     },
-    [applyFilter],
+    [applyFilterLatest],
   );
 
   const handleFilterClear = useCallback(() => {
@@ -338,6 +349,8 @@ const Cascader: React.FC<CascaderProps> = (props) => {
       for (let i = 0; i < indexes.length; i++) {
         const index = indexes[i];
         const next = current[index];
+        // options 可能已变化，索引失效时直接终止，避免访问越界
+        if (!next) return;
         selectedValues.push(next[valueKey]);
         selectedOptions.push({
           [labelKey]: next[labelKey],
@@ -365,6 +378,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
             setInternalSelectedValues(selectedValues);
             setOptionsList((prev) => [...prev.slice(0, finalLevel + 1), normalizeOptionsByKeys(loadedChildren)]);
             setStepIndex(finalLevel + 1);
+            resetFilter();
           })
           .catch((error) => {
             console.error('Load children failed:', error);
diff --git a/src/cascader/__tests__/cascader.test.tsx b/src/cascader/__tests__/cascader.test.tsx
index 3d145bc70..7057779d0 100644
--- a/src/cascader/__tests__/cascader.test.tsx
+++ b/src/cascader/__tests__/cascader.test.tsx
@@ -537,6 +537,103 @@ describe('Cascader', () => {
       expect(onChange).toHaveBeenCalled();
       expect(onClose).toHaveBeenCalledWith('finish');
     });
+
+    it(': filterable - checkStrictly matches parent nodes', async () => {
+      const filterableOptions = [
+        {
+          label: '广东省',
+          value: '440000',
+          children: [
+            {
+              label: '深圳市',
+              value: '440300',
+              children: [{ label: '福田区', value: '440304' }],
+            },
+          ],
+        },
+      ];
+
+      const onChange = vi.fn();
+      const onClose = vi.fn();
+      const { rerender } = await render(
+        <Cascader visible filterable checkStrictly options={filterableOptions} onChange={onChange} onClose={onClose} />,
+      );
+
+      const typeInSearch = (value: string) => {
+        const searchInput = document.querySelector('.t-search input') as HTMLInputElement;
+        fireEvent.input(searchInput, { target: { value } });
+      };
+
+      // checkStrictly 下父节点“深圳市”与叶子“福田区”路径均含“深圳”，均可命中
+      typeInSearch('深圳');
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+      const results = document.querySelectorAll(`${name}__filter-result-item`);
+      expect(results.length).toBe(2);
+
+      // 点击中间父节点结果，selectedOptions 返回从根到该节点的完整路径（与非搜索态一致）
+      fireEvent.click(results[0]);
+      expect(onChange).toHaveBeenCalledWith('440300', [
+        { label: '广东省', value: '440000' },
+        { label: '深圳市', value: '440300' },
+      ]);
+      expect(onClose).toHaveBeenCalledWith('finish');
+
+      // 非 checkStrictly 下仅叶子节点命中，父节点被排除
+      rerender(<Cascader visible filterable checkStrictly={false} options={filterableOptions} />);
+      typeInSearch('深圳');
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+      const leafOnlyResults = document.querySelectorAll(`${name}__filter-result-item`);
+      expect(leafOnlyResults.length).toBe(1);
+    });
+
+    it(': filterable - selecting lazy node triggers load and exits search', async () => {
+      const option = { value: '440000', label: '广东省', children: true };
+      const children = [
+        { value: '440300', label: '深圳市', children: [] },
+        { value: '440400', label: '珠海市', children: [] },
+      ];
+      const load = vi.fn().mockResolvedValue(children);
+      const onPick = vi.fn();
+      const onChange = vi.fn();
+      const onClose = vi.fn();
+
+      render(
+        <Cascader
+          visible
+          filterable
+          options={[option]}
+          load={load}
+          onPick={onPick}
+          onChange={onChange}
+          onClose={onClose}
+        />,
+      );
+
+      const searchInput = document.querySelector('.t-search input') as HTMLInputElement;
+      fireEvent.input(searchInput, { target: { value: '广东' } });
+      await act(async () => {
+        vi.advanceTimersByTime(300);
+      });
+
+      const resultItem = document.querySelector(`${name}__filter-result-item`);
+      expect(resultItem).toBeTruthy();
+
+      await act(async () => {
+        fireEvent.click(resultItem);
+      });
+
+      expect(onPick).toHaveBeenCalledWith({ value: '440000', label: '广东省', index: 0, level: 0 });
+      expect(load).toHaveBeenCalledWith({ data: option, value: option.value, label: option.label });
+      // 加载完成后退出搜索态，展示加载出的子级
+      expect(document.querySelector(`${name}__filter-result`)).toBeNull();
+      expect(document.querySelectorAll(`${name}__options`)).toHaveLength(2);
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onClose).not.toHaveBeenCalled();
+    });
   });
 
   it(': lazy demo unlocks after loading and allows selection', async () => {

From e70bf1dd7f67618169374c4ccab91130d81e32bb Mon Sep 17 00:00:00 2001
From: "Y." <anly_yaw@163.com>
Date: Thu, 15 Oct 2026 20:24:49 +0800
Subject: [PATCH 7/7] =?UTF-8?q?fix(Input):=20=E4=BF=AE=E6=AD=A3=20maxlengt?=
 =?UTF-8?q?h=20demo=20=E6=96=87=E4=BB=B6=E5=90=8D=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=E5=86=99=E4=B8=8E=20develop=20=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/input/_example/{maxLength.tsx => maxlength.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/input/_example/{maxLength.tsx => maxlength.tsx} (100%)

diff --git a/src/input/_example/maxLength.tsx b/src/input/_example/maxlength.tsx
similarity index 100%
rename from src/input/_example/maxLength.tsx
rename to src/input/_example/maxlength.tsx