tdesign-react 0.34.3 → 0.34.5-alpha.1

package/dist/tdesign.css

@@ -11193,411 +11193,758 @@ a.t-menu__item:active {
   color: var(--td-text-color-primary);
 }
 
-.range-input-disabled.t-range-input.t-is-disabled {
-  color: var(--td-text-color-disabled);
-  background-color: var(--td-bg-color-component-disabled);
-}
-.range-input-disabled.t-range-input.t-is-disabled:hover {
-  border-color: var(--td-border-level-2-color);
-}
-.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner {
-  cursor: not-allowed;
-  color: var(--td-text-color-disabled);
-}
-.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner::-webkit-input-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner::-moz-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner:-ms-input-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner::-ms-input-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner::placeholder {
-  color: var(--td-text-color-disabled);
-}
-.range-input-disabled.t-range-input.t-is-disabled > .t-range-input__prefix .t-icon,
-.range-input-disabled.t-range-input.t-is-disabled > .t-range-input__suffix .t-icon {
-  color: var(--td-text-color-disabled);
-}
-.t-range-input {
-  width: -webkit-max-content;
-  width: -moz-max-content;
-  width: max-content;
-  position: relative;
-  height: 32px;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3px;
-  border-color: var(--td-border-level-2-color);
-  padding: 4px 8px 4px 4px;
-  background-color: var(--td-bg-color-specialcomponent);
-  color: var(--td-text-color-primary);
-  font-size: 14px;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
-  transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  overflow: hidden;
-}
-.t-range-input:hover {
-  border-color: var(--td-brand-color);
+.t-upload .t-size-s {
+  display: block;
+  color: var(--td-text-color-placeholder);
+  font-size: 12px;
+  line-height: 20px;
 }
-.t-range-input.t-is-success {
-  border-color: var(--td-success-color);
+.t-upload .t-is-bordered {
+  border: 1px solid var(--td-component-border);
 }
-.t-range-input.t-is-success:focus {
-  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
-          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+.t-upload .t-upload__trigger {
+  display: inline-block;
 }
-.t-range-input.t-is-success.t-range-input--focused {
-  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
-          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+.t-upload .t-icon {
+  font-size: 16px;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
-.t-range-input.t-is-success > .t-range-input__extra {
+.t-upload .t-icon-check-circle-filled {
   color: var(--td-success-color);
 }
-.t-range-input.t-is-warning {
-  border-color: var(--td-warning-color);
-}
-.t-range-input.t-is-warning:focus {
-  -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus);
-          box-shadow: 0 0 0 2px var(--td-warning-color-focus);
-}
-.t-range-input.t-is-warning.t-range-input--focused {
-  -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus);
-          box-shadow: 0 0 0 2px var(--td-warning-color-focus);
-}
-.t-range-input.t-is-warning > .t-range-input__extra {
-  color: var(--td-warning-color);
-}
-.t-range-input.t-is-error {
-  border-color: var(--td-error-color);
-}
-.t-range-input.t-is-error:focus {
-  -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus);
-          box-shadow: 0 0 0 2px var(--td-error-color-focus);
-}
-.t-range-input.t-is-error.t-range-input--focused {
-  -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus);
-          box-shadow: 0 0 0 2px var(--td-error-color-focus);
-}
-.t-range-input.t-is-error > .t-range-input__extra {
+.t-upload .t-icon-error-circle-filled {
   color: var(--td-error-color);
 }
-.t-range-input.t-range-input.t-is-disabled {
-  color: var(--td-text-color-disabled);
-  background-color: var(--td-bg-color-component-disabled);
-}
-.t-range-input.t-range-input.t-is-disabled:hover {
-  border-color: var(--td-border-level-2-color);
-}
-.t-range-input.t-range-input.t-is-disabled .t-range-input__inner {
-  cursor: not-allowed;
-  color: var(--td-text-color-disabled);
-}
-.t-range-input.t-range-input.t-is-disabled .t-range-input__inner::-webkit-input-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-range-input.t-range-input.t-is-disabled .t-range-input__inner::-moz-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-range-input.t-range-input.t-is-disabled .t-range-input__inner:-ms-input-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-range-input.t-range-input.t-is-disabled .t-range-input__inner::-ms-input-placeholder {
-  color: var(--td-text-color-disabled);
+.t-upload .t-icon-loading {
+  color: var(--td-brand-color);
 }
-.t-range-input.t-range-input.t-is-disabled .t-range-input__inner::placeholder {
-  color: var(--td-text-color-disabled);
+.t-upload .t-icon-time-filled {
+  color: var(--td-text-color-placeholder);
 }
-.t-range-input.t-range-input.t-is-disabled > .t-range-input__prefix .t-icon,
-.t-range-input.t-range-input.t-is-disabled > .t-range-input__suffix .t-icon {
-  color: var(--td-text-color-disabled);
+.t-upload .t-icon-add {
+  color: var(--td-text-color-primary);
 }
-.t-range-input.t-range-input--prefix > .t-range-input__prefix-icon {
-  padding-right: 8px;
+.t-upload .t-upload__icon-delete {
+  color: var(--td-text-color-secondary);
+  cursor: pointer;
 }
-.t-range-input.t-range-input--prefix > .t-range-input__prefix {
-  z-index: 2;
-  height: 100%;
-  text-align: center;
+.t-upload__list-file {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  font-size: 14px;
-}
-.t-range-input.t-range-input--prefix > .t-range-input__prefix-icon {
-  font-size: 16px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 100px;
+  height: 100px;
+  margin-right: 12px;
+  overflow: hidden;
 }
-.t-range-input.t-range-input--suffix > .t-range-input__suffix-icon {
-  padding-left: 8px;
+.t-upload__list-file .t-icon {
+  font-size: 40px;
+  color: var(--td-brand-color);
 }
-.t-range-input.t-range-input--suffix > .t-range-input__suffix {
-  z-index: 2;
-  height: 100%;
-  text-align: center;
+.t-upload__list-item {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  margin-top: 12px;
+  width: 496px;
+  height: 124px;
+  padding: 12px;
+  border: 1px solid var(--td-component-border);
+  border-radius: 3px;
   font-size: 14px;
 }
-.t-range-input.t-range-input--suffix > .t-range-input__suffix-icon {
-  font-size: 16px;
-}
-.t-range-input.t-size-l {
-  height: 40px;
-  line-height: 40px;
-  font-size: 16px;
-}
-.t-range-input.t-size-l .t-input {
-  padding: 0 8px;
-}
-.t-range-input.t-size-s {
-  padding: 2px 4px;
-  height: 24px;
-  line-height: 24px;
-  font-size: 12px;
+.t-upload__list-item.t-is--error .t-upload__list-name {
+  color: var(--td-error-color);
 }
-.t-range-input.t-is-focused {
-  z-index: 1;
-  border-color: var(--td-brand-color);
-  -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
-          box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+.t-upload__list-item.t-is--error .t-upload__list-file .t-icon {
+  color: var(--td-error-color);
 }
-.t-range-input__inner {
-  height: 100%;
+.t-upload__list-content {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  gap: 8px;
 }
-.t-range-input__inner .t-input__wrap {
-  height: 100%;
+.t-upload-list__control {
+  cursor: pointer;
 }
-.t-range-input__inner .t-input {
-  padding: 0 4px;
-  height: 100%;
-  border: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  font-size: inherit;
+.t-upload-list__control:hover {
+  color: var(--td-error-color);
 }
-.t-range-input__inner .t-input:hover {
-  background-color: var(--td-bg-color-container-hover);
+.t-upload__list-img {
+  -o-object-fit: cover;
+     object-fit: cover;
+  max-width: 100%;
+  max-height: 100%;
+  cursor: pointer;
 }
-.t-range-input__inner .t-input__inner {
-  height: 100%;
+.t-upload__list-name {
+  max-width: 200px;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.t-range-input__inner .t-input.t-is-focused {
-  background-color: var(--td-bg-color-component);
+.t-upload--highlight {
+  color: var(--td-text-color-brand);
 }
-.t-range-input__extra {
+.t-upload__single-name {
+  margin-right: 8px;
+}
+.t-upload__card {
   font-size: 12px;
-  color: var(--td-text-color-placeholder);
+  line-height: 20px;
+  overflow: hidden;
+  width: 100%;
+  margin: 0;
+  padding: 0;
 }
-.t-range-input__status {
-  position: absolute;
-  right: -24px;
-  top: 0;
-}
-.t-range-input.t-range-input--suffix .t-input__clear {
-  opacity: 0;
-  visibility: hidden;
-  -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
-  transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
-}
-.t-range-input.t-range-input--suffix:hover .t-input__clear {
-  opacity: 1;
-  visibility: visible;
+.t-upload__card .t-is-disabled :hover {
+  cursor: not-allowed;
 }
-.t-range-input .t-range-input__suffix-clear {
+.t-upload__card-item {
+  margin: 0 8px 0 0;
+  float: left;
   cursor: pointer;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  list-style: none;
 }
-.t-range-input__prefix .t-icon,
-.t-range-input__suffix .t-icon {
-  -webkit-transition: color 0.2s linear;
-  transition: color 0.2s linear;
-  font-size: 16px;
-  color: var(--td-text-color-placeholder);
-}
-.t-range-input-popup--visible .t-range-input {
-  border-color: var(--td-brand-color);
-  -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
-          box-shadow: 0 0 0 2px var(--td-brand-color-focus);
-}
-.t-range-input-popup--visible .t-range-input .t-icon-time,
-.t-range-input-popup--visible .t-range-input .t-icon-calendar {
-  color: var(--td-brand-color);
+.t-upload__card-item::after {
+  content: "";
+  display: block;
 }
-.t-range-input-popup--visible .t-range-input .t-input.t-is-focused {
-  background-color: var(--td-bg-color-component);
+.t-upload__card-item:hover .t-upload__card-mask {
+  opacity: 1;
+  -webkit-transition: opacity 0.2s linear;
+  transition: opacity 0.2s linear;
 }
-
-.t-form {
-  font-size: 14px;
+.t-upload__card-item.t-is--error .t-icon-warning_fill {
+  color: var(--td-error-color);
+  margin-bottom: 10px;
 }
-.t-form:not(.t-form-inline) .t-form__item:last-of-type {
-  margin: 0;
+.t-upload__card-item.t-is--error .t-upload__card-status {
+  color: var(--td-error-color);
 }
-.t-form__item {
-  margin-bottom: 24px;
+.t-upload__card-item.t-is--background {
+  -webkit-transition: border-color 0.2s linear;
+  transition: border-color 0.2s linear;
 }
-.t-form__item.t-form__item-with-help {
-  margin-bottom: 4px;
+.t-upload__card-item.t-is--background:hover {
+  border-color: var(--td-brand-color);
 }
-.t-form__item.t-form__item-with-extra {
-  margin-bottom: 24px;
+.t-upload__card .t-icon-loading {
+  margin-bottom: 10px;
 }
-.t-form__label {
-  float: left;
-  padding-right: 24px;
-  vertical-align: middle;
-  line-height: 32px;
+.t-upload__card-name {
+  max-width: 100%;
+  margin-top: 8px;
   color: var(--td-text-color-primary);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
   white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.t-form__label--top {
-  float: none;
-  min-height: 32px;
-}
-.t-form__label--left {
-  text-align: left;
-}
-.t-form__label--right {
-  text-align: right;
-}
-.t-form__label--required label::before {
-  display: inline-block;
-  margin-right: 4px;
-  color: var(--td-error-color);
-  line-height: 22px;
-  content: "*";
-}
-.t-form__label--colon label::after {
-  content: ":";
-  position: relative;
-  margin: 0 8px 0 2px;
-}
-.t-form__controls {
-  min-height: 32px;
-  display: flow-root;
+.t-upload__card-content {
   position: relative;
-}
-.t-form__controls-content {
+  width: 112px;
+  height: 112px;
+  overflow: hidden;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  min-height: 32px;
-}
-.t-form__controls .t-form__item {
-  margin-right: 24px;
-}
-.t-form__controls.t-is-success .t-form__status .t-icon {
-  color: var(--td-success-color);
-}
-.t-form__controls.t-is-success .t-input__extra {
-  color: var(--td-success-color);
-}
-.t-form__controls.t-form--success-border.t-is-success .t-input__extra {
-  color: var(--td-success-color);
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  background-color: var(--td-bg-color-secondarycontainer);
+  border: 1px dashed var(--td-component-border);
+  padding: 8px;
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner {
-  border-color: var(--td-success-color);
+.t-upload__card-container {
+  width: 110px;
+  height: 110px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  background-color: var(--td-bg-color-secondarycontainer);
+  border: 1px dashed var(--td-component-border);
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input--focused,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select--focused,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button--focused,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader--focused,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner--focused {
-  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
-          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+.t-upload__card-container > .t-icon,
+.t-upload__card-container .t-loading {
+  font-size: 24px;
+  margin-bottom: 8px;
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-icon,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-icon,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-icon,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-icon,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-icon,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-fake-arrow,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-fake-arrow,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-fake-arrow,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-fake-arrow,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-fake-arrow {
-  color: var(--td-success-color);
+.t-upload__card-container > p {
+  color: var(--td-text-color-placeholder);
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-input,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-input {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+.t-upload__card-status-wrap {
+  text-align: center;
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
-  color: var(--td-success-color);
+.t-upload__card-status-wrap > svg {
+  margin-bottom: 6px;
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner.t-is-focused {
-  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
-          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+.t-upload__card-status-wrap .t-icon,
+.t-upload__card-status-wrap .t-loading {
+  font-size: 20px;
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader.t-is-active,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select.t-is-active {
-  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
-          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+.t-upload__card-image {
+  max-width: 100%;
+  max-height: 100%;
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-form__status .t-icon {
-  color: var(--td-success-color);
+.t-upload__card-status {
+  color: var(--td-text-color-disabled);
+  font-size: 12px;
 }
-.t-form__status {
+.t-upload__card-mask {
+  background-color: var(--td-text-color-secondary);
+  color: var(--td-bg-color-container);
+  -webkit-transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  will-change: transform;
+  opacity: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  margin-left: 8px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
-.t-form__status > .t-icon {
-  font-size: 20px;
+.t-upload__card-mask-item-divider {
+  margin: 0 16px;
+  border-left: 1px var(--td-bg-color-container) solid;
+  height: 16px;
 }
-.t-form__status-without-icon {
-  width: 25px;
-  height: 25px;
+.t-upload__card-mask-item > .t-icon {
+  cursor: pointer;
+  font-size: 16px;
 }
-.t-form__status button {
-  width: 32px;
+.t-upload__dialog .t-dialog {
+  max-width: 80%;
 }
-.t-form__status button + button {
-  margin-left: 8px;
+.t-upload__dialog .t-dialog--default {
+  padding: 32px;
 }
-.t-form-inline {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+.t-upload__dialog .t-dialog-body {
+  padding-bottom: 0;
+}
+.t-upload__dialog .t-dialog-body-img-box img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+}
+.t-upload__dragger {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 336px;
+  height: 144px;
+  border: 1px dashed var(--td-component-border);
+  border-radius: 2px;
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+  cursor: pointer;
+  padding: 16px;
+  position: relative;
+  overflow: auto;
+  -webkit-transition: border-color 0.2s linear;
+  transition: border-color 0.2s linear;
+}
+.t-upload__dragger.t-is--active {
+  background-color: var(--td-bg-color-container-active);
+  border-color: var(--td-brand-color);
+}
+.t-upload__dragger:hover {
+  border-color: var(--td-brand-color);
+}
+.t-upload__dragger-btns {
+  position: absolute;
+  bottom: 8px;
+}
+.t-upload__dragger-center {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-upload__dragger-error {
+  border-color: var(--td-error-color);
+}
+.t-upload__dragger-error:hover {
+  border-color: var(--td-error-color);
+}
+.t-upload__dragger-text {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--td-text-color-primary);
+  margin-bottom: 8px;
+  max-width: 304px;
+}
+.t-upload__dragger-text .t-upload__single-name {
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-upload__tips {
+  margin-top: 8px;
+}
+.t-upload__tips.t-upload__tips-error {
+  color: var(--td-error-color);
+}
+.t-upload__placeholder {
+  color: var(--td-text-color-placeholder);
+}
+.t-upload__display-text--margin {
+  margin-top: 10px;
+}
+.t-upload__single-display-text {
+  color: var(--td-text-color-secondary);
+  font-size: 12px;
+  line-height: 20px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-icon-clear-circle-filled {
+  color: var(--td-text-color-placeholder);
+  margin-top: 2px;
+  -webkit-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+}
+.t-icon-clear-circle-filled:hover {
+  color: var(--td-text-color-secondary);
+  cursor: pointer;
+}
+.t-upload__single-percent {
+  margin-left: 8px;
+}
+.t-upload__single-progress {
+  color: var(--td-brand-color);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-upload__single-progress .t-loading {
+  font-size: 16px;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.t-upload__single-input-delete {
+  margin-left: 16px;
+  font-size: 14px;
+  color: var(--td-brand-color);
+  line-height: 22px;
+  cursor: pointer;
+}
+.t-upload__single-input-preview {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  max-width: calc(100% - 162px);
+}
+.t-upload__single-input-text {
+  display: block;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-upload__single-file-input {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-upload__single-file-input .t-upload__trigger {
+  margin-left: 16px;
+}
+.t-upload__single-file-input .t-upload__trigger .t-button {
+  margin-left: 8px;
+}
+.t-upload__single-file-input .t-upload__single-progress {
+  white-space: nowrap;
+}
+.t-upload__single-file-input .t-input__inner {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.t-upload__dragger-progress {
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.t-upload__dragger-progress .t-icon,
+.t-upload__dragger-progress .t-loading {
+  font-size: 16px;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.t-upload__dragger-img-wrap {
+  width: 112px;
+  height: 112px;
+  background-color: var(--td-bg-color-secondarycontainer);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.t-upload__dragger-img-wrap > img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.t-upload__dragger-img-wrap + .t-upload__dragger-progress-info {
+  margin-left: 16px;
+  max-width: 176px;
+}
+.t-upload__dragger-progress-info {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.t-upload__dragger-progress-info .t-upload__single-display-text {
+  margin-bottom: 8px;
+}
+.t-upload__dragger-progress-info .t-button:hover {
+  background-color: transparent;
+}
+.t-upload__dragger-progress-cancel {
+  padding: 0;
+}
+.t-upload__flow-image-flow {
+  width: 498px;
+}
+.t-upload__flow {
+  min-width: 496px;
+  max-width: 960px;
+}
+.t-upload__flow-placeholder {
+  display: inline-block;
+  margin-left: 16px;
+}
+.t-upload__flow-op {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-upload__flow-bottom {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  margin-top: 24px;
+}
+.t-upload__flow-bottom .t-button + .t-button {
+  margin-left: 8px;
+}
+.t-upload__flow-empty {
+  width: 100%;
+  height: 210px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  color: var(--td-text-color-placeholder);
+}
+.t-upload__flow-table {
+  width: 100%;
+  border: 1px dashed var(--td-component-border);
+  margin-top: 24px;
+  border-collapse: collapse;
+}
+.t-upload__flow-table > thead > tr,
+.t-upload__flow-table > tbody > tr,
+.t-upload__flow-table > tfoot > tr,
+.t-upload__flow-table > tr {
+  border-top: 1px solid var(--td-component-border);
+}
+.t-upload__flow-table > thead > tr > th,
+.t-upload__flow-table > tbody > tr > th,
+.t-upload__flow-table > tfoot > tr > th,
+.t-upload__flow-table > tr > th {
+  color: var(--td-text-color-placeholder);
+  font-weight: normal;
+  border: 1px solid var(--td-component-border);
+  text-align: left;
+  background-color: var(--td-bg-color-container);
+}
+.t-upload__flow-table > thead > tr > td,
+.t-upload__flow-table > tbody > tr > td,
+.t-upload__flow-table > tfoot > tr > td,
+.t-upload__flow-table > tr > td {
+  color: var(--td-text-color-primary);
+}
+.t-upload__flow-table > thead > tr > td,
+.t-upload__flow-table > tbody > tr > td,
+.t-upload__flow-table > tfoot > tr > td,
+.t-upload__flow-table > tr > td,
+.t-upload__flow-table > thead > tr > th,
+.t-upload__flow-table > tbody > tr > th,
+.t-upload__flow-table > tfoot > tr > th,
+.t-upload__flow-table > tr > th {
+  padding: 10px 24px;
+}
+.t-upload__flow-table__batch-row {
+  border-left: 1px solid var(--td-component-border);
+}
+.t-upload__flow-button {
+  color: var(--td-text-color-placeholder);
+  cursor: pointer;
+  -webkit-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+}
+.t-upload__flow-button:hover {
+  color: var(--td-text-color-secondary);
+}
+.t-upload__flow-status {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-upload__flow-status .t-icon,
+.t-upload__flow-status .t-loading {
+  margin-right: 8px;
+  font-size: 16px;
+}
+.t-upload__flow-card-area {
+  border: 1px dashed var(--td-component-border);
+  padding: 12px;
+  margin-top: 24px;
+  width: 100%;
+}
+
+.t-form {
+  font-size: 14px;
+}
+.t-form:not(.t-form-inline) .t-form__item:last-of-type {
+  margin: 0;
+}
+.t-form__item {
+  margin-bottom: 24px;
+}
+.t-form__item.t-form__item-with-help {
+  margin-bottom: 4px;
+}
+.t-form__item.t-form__item-with-extra {
+  margin-bottom: 24px;
+}
+.t-form__label {
+  float: left;
+  padding-right: 24px;
+  vertical-align: middle;
+  line-height: 32px;
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  white-space: nowrap;
+}
+.t-form__label--top {
+  float: none;
+  min-height: 32px;
+}
+.t-form__label--left {
+  text-align: left;
+}
+.t-form__label--right {
+  text-align: right;
+}
+.t-form__label--required label::before {
+  display: inline-block;
+  margin-right: 4px;
+  color: var(--td-error-color);
+  line-height: 22px;
+  content: "*";
+}
+.t-form__label--colon label::after {
+  content: ":";
+  position: relative;
+  margin: 0 8px 0 2px;
+}
+.t-form__controls {
+  min-height: 32px;
+  display: flow-root;
+  position: relative;
+}
+.t-form__controls-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 32px;
+}
+.t-form__controls .t-form__item {
+  margin-right: 24px;
+}
+.t-form__controls.t-is-success .t-form__status .t-icon {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-is-success .t-input__extra {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-input__extra {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner {
+  border-color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input--focused,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select--focused,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button--focused,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader--focused,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner--focused {
+  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
+          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-fake-arrow {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-input,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner.t-is-focused {
+  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
+          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader.t-is-active,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select.t-is-active {
+  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
+          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-form__status .t-icon {
+  color: var(--td-success-color);
+}
+.t-form__status {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 8px;
+}
+.t-form__status > .t-icon {
+  font-size: 20px;
+}
+.t-form__status-without-icon {
+  width: 25px;
+  height: 25px;
+}
+.t-form__status button {
+  width: 32px;
+}
+.t-form__status button + button {
+  margin-left: 8px;
+}
+.t-form-inline {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
   row-gap: 16px;
 }
 .t-form-inline .t-form__item {
@@ -12255,1572 +12602,1097 @@ a.t-menu__item:active {
 .t-textarea__tips--success {
   color: var(--td-success-color);
 }
-.t-textarea__tips--warning {
-  color: var(--td-warning-color);
-}
-.t-textarea__tips--error {
-  color: var(--td-error-color);
-}
-
-@-webkit-keyframes changeColor {
-  from {
-    color: var(--td-brand-color-hover);
-  }
-  to {
-    color: var(--td-brand-color-active);
-  }
-}
-@keyframes changeColor {
-  from {
-    color: var(--td-brand-color-hover);
-  }
-  to {
-    color: var(--td-brand-color-active);
-  }
-}
-.t-breadcrumb {
-  font-size: 14px;
-  line-height: 22px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-.t-breadcrumb__separator {
-  margin: 0 4px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-.t-breadcrumb__item {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  color: var(--td-text-color-placeholder);
-  text-decoration: none;
-}
-.t-breadcrumb__item.t-is-current {
-  color: var(--td-text-color-primary);
-}
-.t-breadcrumb__item.t-is-current .t-icon {
-  color: var(--td-text-color-placeholder);
-}
-.t-breadcrumb__item:last-child {
-  color: var(--td-text-color-primary);
-}
-.t-breadcrumb__item:last-child .t-breadcrumb__separator {
-  display: none;
-}
-.t-breadcrumb__item .t-icon {
-  font-size: 16px;
-}
-.t-breadcrumb__item .t-link {
-  color: inherit;
-  text-decoration: none;
-}
-.t-breadcrumb__item .t-link:hover {
-  color: var(--td-brand-color);
-}
-.t-breadcrumb__item .t-is-disabled {
-  cursor: not-allowed;
-}
-.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner {
-  color: var(--td-text-color-disabled);
-}
-.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:hover {
-  color: var(--td-text-color-disabled);
-  cursor: not-allowed;
-}
-.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:active {
-  -webkit-animation: none;
-          animation: none;
-}
-.t-breadcrumb__item--arrow {
-  margin: 0 4px;
-  line-height: 0;
-  color: var(--td-text-color-placeholder);
-  display: inline-block;
-  vertical-align: middle;
-}
-.t-breadcrumb__item--slash {
-  margin: 0 4px;
-  line-height: 0;
-  color: var(--td-text-color-placeholder);
-  display: inline-block;
-  vertical-align: middle;
-}
-.t-breadcrumb__inner {
-  font-size: 14px;
-  word-break: break-all;
-  display: inline-block;
-  vertical-align: middle;
-}
-.t-breadcrumb__inner .t-icon {
-  margin: 0 4px;
-}
-.t-breadcrumb__select {
-  position: relative;
-}
-.t-breadcrumb__select:hover .t-breadcrumb__option {
-  display: block;
-}
-.t-breadcrumb__select-item:hover .t-icon {
-  color: var(--td-brand-color);
-}
-.t-breadcrumb__option {
-  display: none;
-  position: absolute;
-  top: 28px;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  max-width: 120px;
-  background: var(--td-bg-color-container);
-  -webkit-box-shadow: var(--td-shadow-2);
-          box-shadow: var(--td-shadow-2);
-  z-index: 20;
-}
-.t-breadcrumb__option-item {
-  padding: 8px;
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--td-text-color-primary);
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.t-breadcrumb__option-item:hover {
-  color: var(--td-brand-color);
-}
-.t-breadcrumb__option-item.t-is-active {
-  color: var(--td-brand-color);
-}
-.t-breadcrumb__inner-msg {
-  display: none;
-  position: absolute;
-  left: 50%;
-  bottom: 30px;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  width: 300px;
-  padding: 8px;
-  color: var(--td-text-color-primary);
-  background: var(--td-bg-color-container);
-  border-radius: 1.5px;
-  -webkit-box-shadow: var(--td-shadow-2);
-          box-shadow: var(--td-shadow-2);
-  z-index: 20;
-}
-.t-breadcrumb__inner-msg::before {
-  content: "";
-  position: absolute;
-  bottom: -8px;
-  left: 50%;
-  margin-left: -4px;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 8px 6px 0;
-  border-color: var(--td-bg-color-container) transparent transparent transparent;
-  z-index: 20;
-}
-.t-breadcrumb--text-overflow {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-.t-breadcrumb--text-overflow:hover .t-breadcrumb__inner-msg {
-  display: block;
-}
-.t-breadcrumb--text-overflow .t-breadcrumb__inner {
-  max-width: 120px;
-  display: inline-block;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.t-breadcrumb--text-overflow .t-breadcrumb__inner .t-icon {
-  vertical-align: text-bottom;
-}
-.t-breadcrumb--text-overflow .t-breadcrumb__inner:hover {
-  color: var(--td-brand-color);
-  -webkit-transition: color 0.2s linear;
-  transition: color 0.2s linear;
-  cursor: pointer;
-}
-.t-breadcrumb--text-overflow .t-breadcrumb__inner:active {
-  -webkit-animation: 0.2s linear changeColor;
-          animation: 0.2s linear changeColor;
-}
-
-.t-dropdown {
-  background-color: var(--td-bg-color-container);
-  position: relative;
-  border-radius: 3px;
-  padding: 0;
-}
-.t-dropdown__menu {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
-}
-.t-dropdown__menu-column {
-  font-size: 14px;
-  color: var(--td-text-color-primary);
-  text-align: left;
-  overflow-y: auto;
-}
-.t-dropdown__menu-column:not(:first-child) {
-  border-left: solid 1px var(--td-border-level-1-color);
-}
-.t-dropdown__menu .t-divider {
-  margin: 4px 0;
-}
-.t-dropdown__item {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  cursor: pointer;
-  border-radius: 3px;
-  color: var(--td-text-color-primary);
-  padding: 9px 8px;
-  margin: 4px 8px;
-  -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
-  transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
-  --ripple-color: var(--td-bg-color-container-active);
-}
-.t-dropdown__item:first-child,
-.t-dropdown__item:last-child {
-  margin: 8px;
+.t-textarea__tips--warning {
+  color: var(--td-warning-color);
 }
-.t-dropdown__item:hover {
-  background-color: var(--td-bg-color-container-hover);
+.t-textarea__tips--error {
+  color: var(--td-error-color);
 }
-.t-dropdown__item.t-is-active {
-  color: var(--td-brand-color);
-  background-color: var(--td-brand-color-light);
+
+@-webkit-keyframes changeColor {
+  from {
+    color: var(--td-brand-color-hover);
+  }
+  to {
+    color: var(--td-brand-color-active);
+  }
 }
-.t-dropdown__item.t-is-disabled {
-  color: var(--td-text-color-disabled);
-  cursor: not-allowed;
+@keyframes changeColor {
+  from {
+    color: var(--td-brand-color-hover);
+  }
+  to {
+    color: var(--td-brand-color-active);
+  }
 }
-.t-dropdown__item-content {
+.t-breadcrumb {
+  font-size: 14px;
+  line-height: 22px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  max-width: 100%;
-}
-.t-dropdown__item-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.t-dropdown__item.t-dropdown--suffix .t-dropdown__item-content {
-  max-width: calc(100% - 16px - 8px);
-}
-.t-dropdown__item.t-dropdown--suffix .t-dropdown__item-icon {
-  color: currentcolor;
-  font-size: 16px;
-  margin-left: 8px;
 }
-
-.t-slider__input-container {
+.t-breadcrumb__separator {
+  margin: 0 4px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin-left: 24px;
-}
-.t-slider__input-container.is-vertical {
-  padding-top: 16px;
-  margin-left: 0px;
-}
-.t-slider__input-container .t-slider__center-line {
-  width: 8px;
-  height: 1px;
-  background: rgba(0, 0, 0, 0.9);
-  margin: 0 8px;
-}
-.t-slider {
-  height: 18px;
-  width: 100%;
-  position: relative;
-  padding: 7px 0;
 }
-.t-slider__input.is-range {
-  margin-left: 12px;
-}
-.t-slider__container {
-  width: 100%;
+.t-breadcrumb__item {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  color: var(--td-text-color-placeholder);
+  text-decoration: none;
 }
-.t-slider__container.is-vertical {
-  height: 100%;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+.t-breadcrumb__item.t-is-current {
+  color: var(--td-text-color-primary);
 }
-.t-slider__rail {
-  position: absolute;
-  width: 100%;
-  height: 4px;
-  background-color: var(--td-bg-color-component);
-  -webkit-transition: background-color 0.3s;
-  transition: background-color 0.3s;
-  border-radius: 4px;
+.t-breadcrumb__item.t-is-current .t-icon {
+  color: var(--td-text-color-placeholder);
 }
-.t-slider__rail:hover {
-  background-color: var(--td-bg-color-component-hover);
+.t-breadcrumb__item:last-child {
+  color: var(--td-text-color-primary);
 }
-.t-slider__track {
-  position: absolute;
-  height: 4px;
-  background-color: var(--td-brand-color);
-  right: auto;
-  border-radius: 4px;
+.t-breadcrumb__item:last-child .t-breadcrumb__separator {
+  display: none;
 }
-.t-slider__step {
-  position: absolute;
-  width: 100%;
-  height: 4px;
-  cursor: pointer;
+.t-breadcrumb__item .t-icon {
+  font-size: 16px;
 }
-.t-slider__button {
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--td-brand-color);
-  background-color: #fff;
-  border-radius: 50%;
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+.t-breadcrumb__item .t-link {
+  color: inherit;
+  text-decoration: none;
 }
-.t-slider__button--dragging {
-  -webkit-box-shadow: 0 0 0px 2px var(--td-brand-color-focus);
-          box-shadow: 0 0 0px 2px var(--td-brand-color-focus);
+.t-breadcrumb__item .t-link:hover {
+  color: var(--td-brand-color);
 }
-.t-slider__button:hover {
-  background-color: var(--td-gray-color-1);
+.t-breadcrumb__item .t-is-disabled {
+  cursor: not-allowed;
 }
-.t-slider__button-wrapper {
-  position: absolute;
-  z-index: 2;
-  top: 50%;
-  -webkit-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-  background-color: transparent;
-  text-align: center;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  line-height: normal;
-  outline: none;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner {
+  color: var(--td-text-color-disabled);
 }
-.t-slider__stop {
-  position: absolute;
-  width: 1px;
-  height: 6px;
-  background-color: var(--td-bg-color-component);
-  top: 4px;
+.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:hover {
+  color: var(--td-text-color-disabled);
+  cursor: not-allowed;
 }
-.t-slider__mark {
-  position: absolute;
-  top: 2px;
-  left: 0;
-  width: 100%;
+.t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:active {
+  -webkit-animation: none;
+          animation: none;
 }
-.t-slider__mark-text {
-  position: absolute;
+.t-breadcrumb__item--arrow {
+  margin: 0 4px;
+  line-height: 0;
+  color: var(--td-text-color-placeholder);
   display: inline-block;
-  font-size: 12px;
-  color: var(--td-text-color-primary);
-  top: 13px;
-  line-height: 20px;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  margin-top: 4px;
-  cursor: pointer;
-}
-.t-slider__mark-text:first-child {
-  -webkit-transform: translateX(0%);
-          transform: translateX(0%);
-}
-.t-slider__mark-text:last-child {
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
-}
-.t-slider--vertical {
-  height: 100%;
-  padding: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-}
-.t-slider--vertical .t-slider__rail {
-  width: 4px;
-  height: 100%;
-}
-.t-slider--vertical .t-slider__track {
-  width: 4px;
-  top: auto;
-}
-.t-slider--vertical .t-slider__step {
-  width: 4px;
-  height: 100%;
+  vertical-align: middle;
 }
-.t-slider--vertical .t-slider__handle {
-  margin-top: -6px;
-  margin-left: -5px;
-  top: auto;
-  -webkit-transform: translateY(50%);
-          transform: translateY(50%);
+.t-breadcrumb__item--slash {
+  margin: 0 4px;
+  line-height: 0;
+  color: var(--td-text-color-placeholder);
+  display: inline-block;
+  vertical-align: middle;
 }
-.t-slider--vertical .t-slider__mark {
-  top: 0;
-  left: 12px;
-  width: 18px;
-  height: 100%;
+.t-breadcrumb__inner {
+  font-size: 14px;
+  word-break: break-all;
+  display: inline-block;
+  vertical-align: middle;
 }
-.t-slider--vertical .t-slider__stop {
-  width: 6px;
-  height: 1px;
-  left: 4px;
-  background-color: var(--td-bg-color-component);
+.t-breadcrumb__inner .t-icon {
+  margin: 0 4px;
 }
-.t-slider--vertical .t-slider__mark-text {
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  margin-top: 0;
-  margin-left: 2px;
+.t-breadcrumb__select {
+  position: relative;
 }
-.t-slider--vertical .t-slider__button-wrapper {
-  top: auto;
-  left: -14px;
-  -webkit-transform: translate(50%, 50%);
-          transform: translate(50%, 50%);
+.t-breadcrumb__select:hover .t-breadcrumb__option {
+  display: block;
 }
-.t-is-disabled {
-  cursor: not-allowed;
+.t-breadcrumb__select-item:hover .t-icon {
+  color: var(--td-brand-color);
 }
-.t-is-disabled .t-slider__track {
-  background-color: var(--td-brand-color-disabled);
+.t-breadcrumb__option {
+  display: none;
+  position: absolute;
+  top: 28px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  max-width: 120px;
+  background: var(--td-bg-color-container);
+  -webkit-box-shadow: var(--td-shadow-2);
+          box-shadow: var(--td-shadow-2);
+  z-index: 20;
 }
-.t-is-disabled .t-slider__rail {
-  background-color: var(--td-bg-color-component-disabled);
+.t-breadcrumb__option-item {
+  padding: 8px;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--td-text-color-primary);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
-.t-is-disabled .t-slider__handle {
-  border: 2px solid var(--td-brand-color-disabled);
+.t-breadcrumb__option-item:hover {
+  color: var(--td-brand-color);
 }
-.t-is-disabled .t-slider__button {
-  border-color: var(--td-brand-color-disabled);
-  outline: none;
+.t-breadcrumb__option-item.t-is-active {
+  color: var(--td-brand-color);
 }
-.t-is-disabled .t-slider__mark-text {
-  color: var(--td-text-color-disabled);
-  cursor: not-allowed;
+.t-breadcrumb__inner-msg {
+  display: none;
+  position: absolute;
+  left: 50%;
+  bottom: 30px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 300px;
+  padding: 8px;
+  color: var(--td-text-color-primary);
+  background: var(--td-bg-color-container);
+  border-radius: 1.5px;
+  -webkit-box-shadow: var(--td-shadow-2);
+          box-shadow: var(--td-shadow-2);
+  z-index: 20;
 }
-.t-is-disabled .t-slider__button-wrapper {
-  cursor: not-allowed;
+.t-breadcrumb__inner-msg::before {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  margin-left: -4px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 8px 6px 0;
+  border-color: var(--td-bg-color-container) transparent transparent transparent;
+  z-index: 20;
 }
-
-.t-cascader {
+.t-breadcrumb--text-overflow {
   position: relative;
-  border: 1px solid var(--td-border-level-2-color);
-  border-radius: 3px;
-  padding: 0px 26px 0px 4px;
-  background-color: transparent;
-  vertical-align: middle;
-  cursor: default;
-  color: var(--td-text-color-primary);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  overflow: hidden;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-transition: border-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
-  transition: border-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
 }
-.t-cascader:hover:not(.t-is-disabled) {
-  cursor: pointer;
-  border-color: var(--td-brand-color);
+.t-breadcrumb--text-overflow:hover .t-breadcrumb__inner-msg {
+  display: block;
 }
-.t-cascader:hover:not(.t-is-disabled) > .t-icon {
-  color: var(--td-text-color-placeholder);
+.t-breadcrumb--text-overflow .t-breadcrumb__inner {
+  max-width: 120px;
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
-.t-cascader__popup {
-  width: 100%;
+.t-breadcrumb--text-overflow .t-breadcrumb__inner .t-icon {
+  vertical-align: text-bottom;
 }
-.t-cascader__placeholder {
-  color: var(--td-text-color-placeholder);
-  margin-left: 4px;
+.t-breadcrumb--text-overflow .t-breadcrumb__inner:hover {
+  color: var(--td-brand-color);
+  -webkit-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+  cursor: pointer;
 }
-.t-cascader__content {
-  margin-left: 4px;
-  color: var(--td-text-color-primary);
-  white-space: nowrap;
-  word-wrap: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.t-breadcrumb--text-overflow .t-breadcrumb__inner:active {
+  -webkit-animation: 0.2s linear changeColor;
+          animation: 0.2s linear changeColor;
 }
-.t-cascader__dropdown {
-  margin: 10px 0 5px 0;
-  -webkit-box-shadow: var(--td-shadow-2);
-          box-shadow: var(--td-shadow-2);
+
+.t-dropdown {
+  background-color: var(--td-bg-color-container);
+  position: relative;
   border-radius: 3px;
-  cursor: default;
   padding: 0;
 }
-.t-cascader__panel {
+.t-dropdown__menu {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  height: 100%;
-}
-.t-cascader__panel.t-cascader--normal {
-  height: 200px;
-}
-.t-cascader__panel.t-cascader--multiple {
-  height: 280px;
-}
-.t-cascader__panel.t-cascader--tip {
-  height: 40px;
-}
-.t-cascader__panel--empty {
-  width: 100%;
-  height: 40px;
-  line-height: 40px;
-  color: var(--td-text-color-disabled);
-  margin: 8px;
-  text-align: center;
-  padding-left: 0;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
 }
-.t-cascader__panel--empty:hover {
-  background: none;
-  cursor: default;
+.t-dropdown__menu-column {
+  font-size: 14px;
+  color: var(--td-text-color-primary);
+  text-align: left;
+  overflow-y: auto;
 }
-.t-cascader__menu {
-  width: 148px;
-  overflow: auto;
-  -webkit-box-sizing: content-box;
-          box-sizing: content-box;
-  padding: 8px;
-  background: var(--td-bg-color-container);
+.t-dropdown__menu-column:not(:first-child) {
+  border-left: solid 1px var(--td-border-level-1-color);
 }
-.t-cascader__menu--segment {
-  border-right: 0.5px solid var(--td-component-stroke);
+.t-dropdown__menu .t-divider {
+  margin: 4px 0;
 }
-.t-cascader__item {
+.t-dropdown__item {
   position: relative;
-  height: 40px;
-  line-height: 40px;
-  color: var(--td-text-color-primary);
-  padding: 0 8px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  cursor: pointer;
   border-radius: 3px;
-  margin-top: 4px;
+  color: var(--td-text-color-primary);
+  padding: 9px 8px;
+  margin: 4px 8px;
   -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
   transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
   --ripple-color: var(--td-bg-color-container-active);
 }
-.t-cascader__item.t-size-s {
-  height: 32px;
-  line-height: 32px;
-  font-size: 12px;
-}
-.t-cascader__item.t-size-l {
-  height: 40px;
-  line-height: 40px;
-  font-size: 16px;
-  padding: 0 12px;
-}
-.t-cascader__item.t-is-disabled {
-  color: var(--td-text-color-disabled);
-  background-color: transparent;
-  cursor: not-allowed;
-}
-.t-cascader__item.t-is-expanded {
-  background: var(--td-brand-color-light);
-  color: var(--td-text-color-brand);
-}
-.t-cascader__item.t-is-expanded .t-icon-chevron-right {
-  color: var(--td-text-color-brand);
-}
-.t-cascader__item.t-is-expanded:hover {
-  cursor: pointer;
-}
-.t-cascader__item:first-child {
-  margin-top: 0;
-}
-.t-cascader__item-icon {
-  color: var(--td-text-color-secondary);
-  position: absolute;
-  height: 100%;
-  right: 0;
-  top: 0;
-  background: transparent;
-  margin: 0 8px;
-  font-size: 16px;
-}
-.t-cascader__item-icon .t-icon-loading {
-  color: var(--td-text-color-brand);
-}
-.t-cascader__item .t-checkbox {
-  max-width: 100%;
-}
-.t-cascader__item .t-checkbox .t-checkbox__input {
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+.t-dropdown__item:first-child,
+.t-dropdown__item:last-child {
+  margin: 8px;
 }
-.t-cascader__item .t-checkbox .t-checkbox__label {
-  display: block;
-  white-space: nowrap;
-  word-wrap: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.t-dropdown__item:hover {
+  background-color: var(--td-bg-color-container-hover);
 }
-.t-cascader__item .t-checkbox .t-checkbox__label .t-cascader__item__label--filter {
-  color: var(--td-text-color-brand);
+.t-dropdown__item.t-is-active {
+  color: var(--td-brand-color);
+  background-color: var(--td-brand-color-light);
 }
-.t-cascader__item--with-icon {
-  padding: 0 22px 0 8px;
+.t-dropdown__item.t-is-disabled {
+  color: var(--td-text-color-disabled);
+  cursor: not-allowed;
 }
-.t-cascader__item--leaf .t-checkbox {
-  width: 100%;
+.t-dropdown__item-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  max-width: 100%;
 }
-.t-cascader__item-label {
-  display: block;
-  position: relative;
-  white-space: nowrap;
-  word-wrap: normal;
+.t-dropdown__item-text {
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.t-cascader__item-label--ellipsis {
-  width: 100%;
-  height: 24px;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  opacity: 0;
-  overflow: hidden;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
+.t-dropdown__item.t-dropdown--suffix .t-dropdown__item-content {
+  max-width: calc(100% - 16px - 8px);
 }
-.t-cascader__item-label--ellipsis .t-popup__reference {
-  width: 100%;
-  height: 100%;
+.t-dropdown__item.t-dropdown--suffix .t-dropdown__item-icon {
+  color: currentcolor;
+  font-size: 16px;
+  margin-left: 8px;
 }
-.t-cascader__item-label--ellipsis .t-popup__reference .t-trigger {
-  width: 100%;
-  height: 100%;
-  display: block;
+
+.t-slider__input-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: 24px;
 }
-.t-cascader__item-label--filter {
-  color: var(--td-text-color-brand);
+.t-slider__input-container.is-vertical {
+  padding-top: 16px;
+  margin-left: 0px;
 }
-.t-cascader__item:hover:not(.t-is-expanded) {
-  background: var(--td-bg-color-container-hover);
-  cursor: pointer;
+.t-slider__input-container .t-slider__center-line {
+  width: 8px;
+  height: 1px;
+  background: rgba(0, 0, 0, 0.9);
+  margin: 0 8px;
 }
-.t-cascader__item.t-is-selected {
-  color: var(--td-brand-color);
+.t-slider {
+  height: 18px;
+  width: 100%;
+  position: relative;
+  padding: 7px 0;
 }
-.t-cascader__item.t-is-selected .t-checkbox__label {
-  color: var(--td-brand-color);
+.t-slider__input.is-range {
+  margin-left: 12px;
 }
-.t-cascader__search-input {
+.t-slider__container {
   width: 100%;
-  border: 0;
-  background: transparent;
-}
-.t-cascader__icon {
-  color: var(--td-text-color-placeholder);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  position: absolute;
-  height: 100%;
-  right: 0;
-  top: 0;
-  background: transparent;
-  margin: 0 8px;
-  font-size: 16px;
-}
-.t-cascader__icon.t-is-expanded,
-.t-cascader__icon.t-is-selected,
-.t-cascader__icon.t-is-loading {
-  background: transparent;
-  color: var(--td-text-color-brand);
-}
-.t-cascader--multiple {
-  padding: 1px 28px 1px 3px;
-}
-.t-cascader--multiple.t-size-s {
-  padding: 0px 28px 0px 1px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
-.t-cascader .t-input {
-  border: 0;
-  padding: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  margin-left: 4px;
+.t-slider__container.is-vertical {
+  height: 100%;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
-.t-cascader .t-input:hover,
-.t-cascader .t-input:focus {
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  border-color: transparent;
+.t-slider__rail {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background-color: var(--td-bg-color-component);
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+  border-radius: 4px;
 }
-.t-cascader .t-tag {
-  margin: 2px 4px 2px 0;
+.t-slider__rail:hover {
+  background-color: var(--td-bg-color-component-hover);
 }
-.t-cascader.t-is-disabled {
-  cursor: not-allowed;
-  background-color: var(--td-bg-color-component-disabled);
-  color: var(--td-text-color-disabled);
-  border-color: var(--td-border-level-2-color);
+.t-slider__track {
+  position: absolute;
+  height: 4px;
+  background-color: var(--td-brand-color);
+  right: auto;
+  border-radius: 4px;
 }
-.t-cascader.t-is-disabled > .t-cascader__placeholder,
-.t-cascader.t-is-disabled .t-cascader__icon {
-  color: var(--td-text-color-disabled);
+.t-slider__step {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  cursor: pointer;
 }
-.t-cascader.t-is-disabled .t-cascader__content {
-  color: var(--td-text-color-disabled);
+.t-slider__button {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--td-brand-color);
+  background-color: #fff;
+  border-radius: 50%;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
-.t-cascader.t-is-active {
-  border-color: var(--td-brand-color);
+.t-slider__button--dragging {
   -webkit-box-shadow: 0 0 0px 2px var(--td-brand-color-focus);
           box-shadow: 0 0 0px 2px var(--td-brand-color-focus);
-  -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.82, 0, 1, 0.9);
-  transition: -webkit-box-shadow 0.2s cubic-bezier(0.82, 0, 1, 0.9);
-  transition: box-shadow 0.2s cubic-bezier(0.82, 0, 1, 0.9);
-  transition: box-shadow 0.2s cubic-bezier(0.82, 0, 1, 0.9), -webkit-box-shadow 0.2s cubic-bezier(0.82, 0, 1, 0.9);
 }
-.t-cascader.t-is-active .t-fake-arrow {
-  color: var(--td-text-color-brand);
-}
-.t-cascader.t-size-l {
-  height: 40px;
-  font-size: 16px;
-  min-height: 40px;
+.t-slider__button:hover {
+  background-color: var(--td-gray-color-1);
 }
-.t-cascader.t-size-l.t-cascader-item--with-icon {
-  padding: 0 22px 0 12px;
+.t-slider__button-wrapper {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  background-color: transparent;
+  text-align: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  line-height: normal;
+  outline: none;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
-.t-cascader.t-size-m {
-  min-height: 32px;
-  font-size: 14px;
+.t-slider__stop {
+  position: absolute;
+  width: 1px;
+  height: 6px;
+  background-color: var(--td-bg-color-component);
+  top: 4px;
 }
-.t-cascader.t-size-m .t-input {
-  height: 28px;
-  line-height: 28px;
+.t-slider__mark {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  width: 100%;
 }
-.t-cascader.t-size-s {
-  height: 24px;
-  line-height: calc(24px - 2px);
+.t-slider__mark-text {
+  position: absolute;
+  display: inline-block;
   font-size: 12px;
-  min-height: 24px;
-}
-.t-cascader.t-size-s .t-input {
-  height: calc(24px - 2px);
-  line-height: calc(32px - 4px);
+  color: var(--td-text-color-primary);
+  top: 13px;
+  line-height: 20px;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  margin-top: 4px;
+  cursor: pointer;
 }
-.t-cascader.t-size-s .t-tag {
-  margin: 1px 1px 1px 0;
+.t-slider__mark-text:first-child {
+  -webkit-transform: translateX(0%);
+          transform: translateX(0%);
 }
-.t-cascader .t-is-popup {
-  border: 1px solid var(--td-text-color-brand);
+.t-slider__mark-text:last-child {
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
 }
-
-.flex-center {
+.t-slider--vertical {
+  height: 100%;
+  padding: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
-.t-time-picker {
-  width: 240px;
-  background: transparent;
-  display: inline-block;
-  position: relative;
-  font-size: 14px;
-  color: var(--td-text-color-primary);
-}
-.t-time-picker.t-is-disabled {
-  cursor: not-allowed;
-}
-.t-time-picker > *:focus,
-.t-time-picker > *:active {
-  outline: 0;
-}
-.t-time-picker__group {
-  position: relative;
-}
-.t-time-picker__group.t-is-focused .t-input__suffix .t-icon:not(.t-input__suffix-clear) {
-  color: var(--td-brand-color);
-}
-.t-time-picker__group.active {
-  border: 1px solid var(--td-brand-color);
-  -webkit-box-shadow: 0 0 2px 2px var(--td-brand-color-focus);
-          box-shadow: 0 0 2px 2px var(--td-brand-color-focus);
+.t-slider--vertical .t-slider__rail {
+  width: 4px;
+  height: 100%;
 }
-.t-time-picker__group.active + .t-time-picker__icon-wrap > .t-time-picker__icon-clear {
-  display: block;
+.t-slider--vertical .t-slider__track {
+  width: 4px;
+  top: auto;
 }
-.t-time-picker__group-text {
-  color: var(--td-text-color-primary);
+.t-slider--vertical .t-slider__step {
+  width: 4px;
+  height: 100%;
 }
-.t-time-picker__group input {
-  cursor: pointer;
+.t-slider--vertical .t-slider__handle {
+  margin-top: -6px;
+  margin-left: -5px;
+  top: auto;
+  -webkit-transform: translateY(50%);
+          transform: translateY(50%);
 }
-.t-time-picker__input {
-  position: absolute;
+.t-slider--vertical .t-slider__mark {
   top: 0;
+  left: 12px;
+  width: 18px;
   height: 100%;
-  padding: 0 8px 0 4px;
-  z-index: 1;
-  border-radius: 3px;
-  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-  font-size: 14px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
 }
-.t-time-picker__input:hover {
-  border-color: var(--td-brand-color);
+.t-slider--vertical .t-slider__stop {
+  width: 6px;
+  height: 1px;
+  left: 4px;
+  background-color: var(--td-bg-color-component);
 }
-.t-time-picker__input-placeholder {
-  margin-left: 8px;
-  color: var(--td-text-color-placeholder);
+.t-slider--vertical .t-slider__mark-text {
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  margin-top: 0;
+  margin-left: 2px;
 }
-.t-time-picker__input-item {
-  height: 22px;
+.t-slider--vertical .t-slider__button-wrapper {
+  top: auto;
+  left: -14px;
+  -webkit-transform: translate(50%, 50%);
+          transform: translate(50%, 50%);
 }
-.t-time-picker__input-item-disabled {
-  color: var(--td-text-color-disabled);
+.t-is-disabled {
+  cursor: not-allowed;
 }
-.t-time-picker__input-item-input {
-  margin: 0 2px;
-  color: inherit;
-  background: none;
-  cursor: pointer;
-  height: inherit;
-  outline: none;
-  width: 28px;
-  text-align: center;
-  border-radius: 3px;
-  border: 0;
-  line-height: 22px;
+.t-is-disabled .t-slider__track {
+  background-color: var(--td-brand-color-disabled);
 }
-.t-time-picker__input-item-input-meridiem {
-  width: 36px;
+.t-is-disabled .t-slider__rail {
+  background-color: var(--td-bg-color-component-disabled);
 }
-.t-time-picker__input-item-input:focus {
-  border-color: var(--td-bg-color-page);
-  background-color: var(--td-bg-color-container-hover);
+.t-is-disabled .t-slider__handle {
+  border: 2px solid var(--td-brand-color-disabled);
 }
-.t-time-picker__input-disabled {
-  border: 1px solid var(--td-border-level-2-color);
-  background-color: var(--td-bg-color-container-hover);
+.t-is-disabled .t-slider__button {
+  border-color: var(--td-brand-color-disabled);
+  outline: none;
 }
-.t-time-picker__input-disabled-placeholder {
+.t-is-disabled .t-slider__mark-text {
   color: var(--td-text-color-disabled);
+  cursor: not-allowed;
 }
-.t-time-picker__input-disabled-item-input {
-  pointer-events: none;
-}
-.t-time-picker__panel {
-  width: 264px;
-  background: transparent;
-  border-radius: 3px;
-  display: inline-block;
-  position: relative;
-  font-size: 14px;
+.t-is-disabled .t-slider__button-wrapper {
+  cursor: not-allowed;
 }
-.t-time-picker__panel-body {
-  width: 100%;
-  height: 216px;
+
+.t-cascader {
   position: relative;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  margin: 16px 0;
+  border: 1px solid var(--td-border-level-2-color);
+  border-radius: 3px;
+  padding: 0px 26px 0px 4px;
+  background-color: transparent;
+  vertical-align: middle;
+  cursor: default;
+  color: var(--td-text-color-primary);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  overflow: hidden;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-transition: border-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
+  transition: border-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
 }
-.t-time-picker__panel-body-active-mask {
-  position: absolute;
-  top: 50%;
-  height: 24px;
+.t-cascader:hover:not(.t-is-disabled) {
+  cursor: pointer;
+  border-color: var(--td-brand-color);
+}
+.t-cascader:hover:not(.t-is-disabled) > .t-icon {
+  color: var(--td-text-color-placeholder);
+}
+.t-cascader__popup {
   width: 100%;
+}
+.t-cascader__placeholder {
+  color: var(--td-text-color-placeholder);
+  margin-left: 4px;
+}
+.t-cascader__content {
+  margin-left: 4px;
+  color: var(--td-text-color-primary);
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-cascader__dropdown {
+  margin: 10px 0 5px 0;
+  -webkit-box-shadow: var(--td-shadow-2);
+          box-shadow: var(--td-shadow-2);
+  border-radius: 3px;
+  cursor: default;
+  padding: 0;
+}
+.t-cascader__panel {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  height: 100%;
 }
-.t-time-picker__panel-body-active-mask > div {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  -webkit-transform: translateY(-15px);
-          transform: translateY(-15px);
-  height: 24px;
-  background-color: var(--td-brand-color-light);
-  margin: 6px 4px;
-  border-radius: 3px;
+.t-cascader__panel.t-cascader--normal {
+  height: 200px;
 }
-.t-time-picker__panel-body-scroll {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  height: 100%;
-  overflow-y: scroll;
+.t-cascader__panel.t-cascader--multiple {
+  height: 280px;
+}
+.t-cascader__panel.t-cascader--tip {
+  height: 40px;
+}
+.t-cascader__panel--empty {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  color: var(--td-text-color-disabled);
+  margin: 8px;
   text-align: center;
-  position: relative;
-  list-style: none;
-  padding: 0;
-  margin: 0;
+  padding-left: 0;
 }
-.t-time-picker__panel-body-scroll::-webkit-scrollbar {
-  width: 0;
+.t-cascader__panel--empty:hover {
+  background: none;
+  cursor: default;
 }
-.t-time-picker__panel-body-scroll::after,
-.t-time-picker__panel-body-scroll::before {
-  display: block;
-  height: 50%;
-  content: "";
+.t-cascader__menu {
+  width: 148px;
+  overflow: auto;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  padding: 8px;
+  background: var(--td-bg-color-container);
 }
-.t-time-picker__panel-body-scroll:last-child {
-  border-right: 0;
+.t-cascader__menu--segment {
+  border-right: 0.5px solid var(--td-component-stroke);
 }
-.t-time-picker__panel-body-scroll-item {
-  height: 24px;
-  font-size: 14px;
-  line-height: 24px;
-  color: var(--td-text-color-secondary);
-  margin: 6px 4px;
+.t-cascader__item {
+  position: relative;
+  height: 40px;
+  line-height: 40px;
+  color: var(--td-text-color-primary);
+  padding: 0 8px;
   border-radius: 3px;
-  text-align: center;
-  cursor: pointer;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
+  margin-top: 4px;
+  -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
+  transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
+  --ripple-color: var(--td-bg-color-container-active);
 }
-.t-time-picker__panel-body-scroll-item:not(.t-time-picker__panel-body-scroll-item.t-is-current):not(.t-time-picker__panel-body-scroll-item.t-is-disabled):hover {
-  color: var(--td-text-color-primary);
+.t-cascader__item.t-size-s {
+  height: 32px;
+  line-height: 32px;
+  font-size: 12px;
 }
-.t-time-picker__panel-body-scroll-item:not(.t-time-picker__panel-body-scroll-item.t-is-current):not(.t-time-picker__panel-body-scroll-item.t-is-disabled):active {
-  background-color: var(--td-bg-color-container-hover);
+.t-cascader__item.t-size-l {
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  padding: 0 12px;
 }
-.t-time-picker__panel-body-scroll-item.t-is-disabled {
+.t-cascader__item.t-is-disabled {
   color: var(--td-text-color-disabled);
+  background-color: transparent;
   cursor: not-allowed;
 }
-.t-time-picker__panel-body-scroll-item.t-is-hidden {
-  display: none;
-  cursor: not-allowed;
+.t-cascader__item.t-is-expanded {
+  background: var(--td-brand-color-light);
+  color: var(--td-text-color-brand);
 }
-.t-time-picker__panel-body-scroll-item.t-is-current {
-  color: var(--td-brand-color);
+.t-cascader__item.t-is-expanded .t-icon-chevron-right {
+  color: var(--td-text-color-brand);
 }
-.t-time-picker__panel-section-footer {
-  width: 100%;
-  height: 48px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-      -ms-flex-direction: row-reverse;
-          flex-direction: row-reverse;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  background-color: transparent;
-  position: relative;
-  border-top: 1px solid var(--td-border-level-1-color);
+.t-cascader__item.t-is-expanded:hover {
+  cursor: pointer;
 }
-
-.t-date-picker {
-  width: 240px;
+.t-cascader__item:first-child {
+  margin-top: 0;
 }
-.t-date-picker__panel-container,
-.t-date-range-picker__panel-container {
-  padding: 0;
-  min-width: 280px;
+.t-cascader__item-icon {
+  color: var(--td-text-color-secondary);
+  position: absolute;
+  height: 100%;
+  right: 0;
+  top: 0;
+  background: transparent;
+  margin: 0 8px;
+  font-size: 16px;
 }
-.t-date-picker__panel-container .t-select__dropdown,
-.t-date-range-picker__panel-container .t-select__dropdown {
-  max-height: 160px;
+.t-cascader__item-icon .t-icon-loading {
+  color: var(--td-text-color-brand);
 }
-.t-date-picker__panel,
-.t-date-range-picker__panel {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+.t-cascader__item .t-checkbox {
+  max-width: 100%;
 }
-.t-date-picker__panel--direction-row,
-.t-date-range-picker__panel--direction-row {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+.t-cascader__item .t-checkbox .t-checkbox__input {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
 }
-.t-date-picker__panel .t-time-picker__panel,
-.t-date-range-picker__panel .t-time-picker__panel {
-  width: 216px;
+.t-cascader__item .t-checkbox .t-checkbox__label {
+  display: block;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.t-date-picker__panel .t-time-picker__panel-section-body,
-.t-date-range-picker__panel .t-time-picker__panel-section-body {
-  padding: 0;
+.t-cascader__item .t-checkbox .t-checkbox__label .t-cascader__item__label--filter {
+  color: var(--td-text-color-brand);
 }
-.t-date-picker__panel .t-time-picker__panel-body,
-.t-date-range-picker__panel .t-time-picker__panel-body {
-  margin: 0;
+.t-cascader__item--with-icon {
+  padding: 0 22px 0 8px;
 }
-.t-date-picker__panel--content,
-.t-date-range-picker__panel--content,
-.t-date-range-picker__panel--content-wrapper {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+.t-cascader__item--leaf .t-checkbox {
+  width: 100%;
 }
-.t-date-range-picker__panel--content-wrapper {
-  gap: 6px;
+.t-cascader__item-label {
+  display: block;
+  position: relative;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.t-date-picker__header {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  gap: 12px;
+.t-cascader__item-label--ellipsis {
   width: 100%;
+  height: 24px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  opacity: 0;
+  overflow: hidden;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
 }
-.t-date-picker__header-controller {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  gap: 8px;
+.t-cascader__item-label--ellipsis .t-popup__reference {
+  width: 100%;
+  height: 100%;
 }
-.t-date-picker__header-controller--month {
-  width: 80px;
+.t-cascader__item-label--ellipsis .t-popup__reference .t-trigger {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
-.t-date-picker__header-controller--year {
-  width: 78px;
+.t-cascader__item-label--filter {
+  color: var(--td-text-color-brand);
 }
-.t-date-picker__table table {
+.t-cascader__item:hover:not(.t-is-expanded) {
+  background: var(--td-bg-color-container-hover);
+  cursor: pointer;
+}
+.t-cascader__item.t-is-selected {
+  color: var(--td-brand-color);
+}
+.t-cascader__item.t-is-selected .t-checkbox__label {
+  color: var(--td-brand-color);
+}
+.t-cascader__search-input {
   width: 100%;
-  border-collapse: collapse;
+  border: 0;
+  background: transparent;
 }
-.t-date-picker__table th {
-  text-align: center;
-  color: var(--td-text-color-secondary);
-  font-weight: 400;
+.t-cascader__icon {
+  color: var(--td-text-color-placeholder);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: absolute;
+  height: 100%;
+  right: 0;
+  top: 0;
+  background: transparent;
+  margin: 0 8px;
+  font-size: 16px;
 }
-.t-date-picker__table td {
-  text-align: center;
-  font-weight: 500;
+.t-cascader__icon.t-is-expanded,
+.t-cascader__icon.t-is-selected,
+.t-cascader__icon.t-is-loading {
+  background: transparent;
+  color: var(--td-text-color-brand);
+}
+.t-cascader--multiple {
+  padding: 1px 28px 1px 3px;
+}
+.t-cascader--multiple.t-size-s {
+  padding: 0px 28px 0px 1px;
+}
+.t-cascader .t-input {
+  border: 0;
+  padding: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  margin-left: 4px;
 }
-.t-date-picker__table thead::after {
-  content: "-";
-  display: block;
-  line-height: 3px;
-  color: transparent;
+.t-cascader .t-input:hover,
+.t-cascader .t-input:focus {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border-color: transparent;
 }
-.t-date-picker__footer {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  padding: 12px;
-  gap: 8px;
+.t-cascader .t-tag {
+  margin: 2px 4px 2px 0;
 }
-.t-date-picker__footer--bottom {
-  border-top: 1px solid var(--td-gray-color-3);
+.t-cascader.t-is-disabled {
+  cursor: not-allowed;
+  background-color: var(--td-bg-color-component-disabled);
+  color: var(--td-text-color-disabled);
+  border-color: var(--td-border-level-2-color);
 }
-.t-date-picker__footer--top {
-  border-bottom: 1px solid var(--td-gray-color-3);
+.t-cascader.t-is-disabled > .t-cascader__placeholder,
+.t-cascader.t-is-disabled .t-cascader__icon {
+  color: var(--td-text-color-disabled);
 }
-.t-date-picker__footer--left {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  border-right: 1px solid var(--td-gray-color-3);
+.t-cascader.t-is-disabled .t-cascader__content {
+  color: var(--td-text-color-disabled);
 }
-.t-date-picker__footer--right {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  border-left: 1px solid var(--td-gray-color-3);
+.t-cascader.t-is-active {
+  border-color: var(--td-brand-color);
+  -webkit-box-shadow: 0 0 0px 2px var(--td-brand-color-focus);
+          box-shadow: 0 0 0px 2px var(--td-brand-color-focus);
+  -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.82, 0, 1, 0.9);
+  transition: -webkit-box-shadow 0.2s cubic-bezier(0.82, 0, 1, 0.9);
+  transition: box-shadow 0.2s cubic-bezier(0.82, 0, 1, 0.9);
+  transition: box-shadow 0.2s cubic-bezier(0.82, 0, 1, 0.9), -webkit-box-shadow 0.2s cubic-bezier(0.82, 0, 1, 0.9);
 }
-.t-date-picker__presets {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 8px;
-  white-space: nowrap;
-  min-width: 100px;
+.t-cascader.t-is-active .t-fake-arrow {
+  color: var(--td-text-color-brand);
 }
-.t-date-picker__presets .t-button {
-  cursor: pointer;
+.t-cascader.t-size-l {
+  height: 40px;
+  font-size: 16px;
+  min-height: 40px;
 }
-.t-date-picker__presets a {
-  color: var(--td-brand-color);
+.t-cascader.t-size-l.t-cascader-item--with-icon {
+  padding: 0 22px 0 12px;
 }
-.t-date-picker__presets a:hover {
-  color: var(--td-brand-color-hover);
+.t-cascader.t-size-m {
+  min-height: 32px;
+  font-size: 14px;
 }
-.t-date-picker__panel--time,
-.t-date-range-picker__panel--time {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  gap: 2px;
-  padding: 12px;
-  border-left: 1px solid var(--td-gray-color-3);
+.t-cascader.t-size-m .t-input {
+  height: 28px;
+  line-height: 28px;
 }
-.t-date-picker__panel--time-viewer,
-.t-date-range-picker__panel--time-viewer {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 32px;
-  line-height: 22px;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  color: var(--td-text-color-primary);
+.t-cascader.t-size-s {
+  height: 24px;
+  line-height: calc(24px - 2px);
+  font-size: 12px;
+  min-height: 24px;
 }
-.t-date-picker__panel--time .t-time-picker__panel-body,
-.t-date-range-picker__panel--time .t-time-picker__panel-body {
-  margin: 0;
+.t-cascader.t-size-s .t-input {
+  height: calc(24px - 2px);
+  line-height: calc(32px - 4px);
 }
-.t-date-picker__panel--year,
-.t-date-picker__panel--month,
-.t-date-picker__panel--date {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  width: 100%;
-  padding: 12px;
-  gap: 12px;
-  max-width: 280px;
+.t-cascader.t-size-s .t-tag {
+  margin: 1px 1px 1px 0;
 }
-.t-date-picker__panel--year .t-date-picker__header-controller--year,
-.t-date-picker__panel--month .t-date-picker__header-controller--year {
-  width: 130px;
+.t-cascader .t-is-popup {
+  border: 1px solid var(--td-text-color-brand);
 }
-.t-date-picker__panel--year .t-date-picker__table table tbody,
-.t-date-picker__panel--month .t-date-picker__table table tbody {
-  width: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  gap: 16px;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+
+.range-input-disabled.t-range-input.t-is-disabled {
+  color: var(--td-text-color-disabled);
+  background-color: var(--td-bg-color-component-disabled);
 }
-.t-date-picker__panel--year .t-date-picker__table table tbody tr,
-.t-date-picker__panel--month .t-date-picker__table table tbody tr {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+.range-input-disabled.t-range-input.t-is-disabled:hover {
+  border-color: var(--td-border-level-2-color);
 }
-.t-date-picker__panel--year .t-date-picker__cell:nth-child(1),
-.t-date-picker__panel--month .t-date-picker__cell:nth-child(1) {
-  text-align: left;
+.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner {
+  cursor: not-allowed;
+  color: var(--td-text-color-disabled);
 }
-.t-date-picker__panel--year .t-date-picker__cell:nth-child(3),
-.t-date-picker__panel--month .t-date-picker__cell:nth-child(3) {
-  text-align: right;
+.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner::-webkit-input-placeholder {
+  color: var(--td-text-color-disabled);
 }
-.t-date-picker__panel--year .t-date-picker__cell-inner,
-.t-date-picker__panel--month .t-date-picker__cell-inner {
-  width: 48px;
+.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner::-moz-placeholder {
+  color: var(--td-text-color-disabled);
 }
-.t-date-picker__cell {
-  cursor: pointer;
-  position: relative;
-  padding: 0;
+.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner:-ms-input-placeholder {
+  color: var(--td-text-color-disabled);
 }
-.t-date-picker__cell::before,
-.t-date-picker__cell::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  right: 0;
-  left: 0;
-  z-index: 1;
-  height: 24px;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
-  transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner::-ms-input-placeholder {
+  color: var(--td-text-color-disabled);
 }
-.t-date-picker__cell:hover .t-date-picker__cell-inner {
-  -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color);
-          box-shadow: inset 0 0 0 1px var(--td-brand-color);
+.range-input-disabled.t-range-input.t-is-disabled .t-range-input__inner::placeholder {
+  color: var(--td-text-color-disabled);
 }
-.t-date-picker__cell-inner {
+.range-input-disabled.t-range-input.t-is-disabled > .t-range-input__prefix .t-icon,
+.range-input-disabled.t-range-input.t-is-disabled > .t-range-input__suffix .t-icon {
+  color: var(--td-text-color-disabled);
+}
+.t-range-input {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
   position: relative;
-  z-index: 5;
+  height: 32px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 3px;
+  border-color: var(--td-border-level-2-color);
+  padding: 4px 8px 4px 4px;
+  background-color: var(--td-bg-color-specialcomponent);
+  color: var(--td-text-color-primary);
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
+  transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  width: 24px;
-  height: 24px;
-  margin: 3px;
-  border-radius: 3px;
-  -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
-  transition: background-color 0.2s linear, border-color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
-  transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear;
-  transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
-}
-.t-date-picker__cell--now .t-date-picker__cell-inner {
-  color: var(--td-brand-color);
-  background: var(--td-brand-color-light);
-}
-.t-date-picker__cell--hover-highlight::after {
-  background-color: var(--td-brand-color-light);
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  overflow: hidden;
 }
-.t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::after {
-  left: -28px;
+.t-range-input:hover {
+  border-color: var(--td-brand-color);
 }
-.t-date-picker__cell--highlight + .t-date-picker__cell--highlight::before {
-  left: -28px;
+.t-range-input.t-is-success {
+  border-color: var(--td-success-color);
 }
-.t-date-picker__cell--highlight::before {
-  background-color: var(--td-brand-color-light);
+.t-range-input.t-is-success:focus {
+  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
+          box-shadow: 0 0 0 2px var(--td-success-color-focus);
 }
-.t-date-picker__cell--highlight.t-date-picker__cell--hover-highlight::after {
-  background-color: rgba(0, 0, 0, 0.04);
+.t-range-input.t-is-success.t-range-input--focused {
+  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
+          box-shadow: 0 0 0 2px var(--td-success-color-focus);
 }
-.t-date-picker__cell--additional:hover .t-date-picker__cell-inner {
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  border-color: var(--td-bg-color-container-hover);
-  background-color: var(--td-bg-color-container-hover);
+.t-range-input.t-is-success > .t-range-input__extra {
+  color: var(--td-success-color);
 }
-.t-date-picker__cell--additional .t-date-picker__cell-inner {
-  color: var(--td-text-color-disabled);
+.t-range-input.t-is-warning {
+  border-color: var(--td-warning-color);
 }
-.t-date-picker__cell--active .t-date-picker__cell-inner {
-  color: var(--td-text-color-anti);
-  background-color: var(--td-brand-color);
+.t-range-input.t-is-warning:focus {
+  -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus);
+          box-shadow: 0 0 0 2px var(--td-warning-color-focus);
 }
-.t-date-picker__cell--active-start::before {
-  left: 6px;
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
+.t-range-input.t-is-warning.t-range-input--focused {
+  -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus);
+          box-shadow: 0 0 0 2px var(--td-warning-color-focus);
 }
-.t-date-picker__cell--active-end::before {
-  right: 6px;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
+.t-range-input.t-is-warning > .t-range-input__extra {
+  color: var(--td-warning-color);
 }
-.t-date-picker__cell--disabled:hover .t-date-picker__cell-inner {
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  background-color: var(--td-gray-color-2);
+.t-range-input.t-is-error {
+  border-color: var(--td-error-color);
 }
-.t-date-picker__cell--disabled .t-date-picker__cell-inner {
-  cursor: not-allowed;
-  color: var(--td-text-color-disabled);
-  background-color: var(--td-gray-color-2);
+.t-range-input.t-is-error:focus {
+  -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus);
+          box-shadow: 0 0 0 2px var(--td-error-color-focus);
 }
-.t-date-picker__cell--disabled + .t-date-picker__cell--disabled::before {
-  left: -32px;
-  right: 12px;
-  background-color: var(--td-gray-color-2);
+.t-range-input.t-is-error.t-range-input--focused {
+  -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus);
+          box-shadow: 0 0 0 2px var(--td-error-color-focus);
 }
-.t-date-picker__input--placeholder input {
-  color: var(--td-text-color-placeholder);
+.t-range-input.t-is-error > .t-range-input__extra {
+  color: var(--td-error-color);
 }
-
-.t-upload .t-size-s {
-  display: block;
-  color: var(--td-text-color-placeholder);
-  font-size: 12px;
-  line-height: 20px;
+.t-range-input.t-range-input.t-is-disabled {
+  color: var(--td-text-color-disabled);
+  background-color: var(--td-bg-color-component-disabled);
 }
-.t-upload .t-is-bordered {
-  border: 1px solid var(--td-component-border);
+.t-range-input.t-range-input.t-is-disabled:hover {
+  border-color: var(--td-border-level-2-color);
 }
-.t-upload .t-upload__trigger {
-  display: inline-block;
+.t-range-input.t-range-input.t-is-disabled .t-range-input__inner {
+  cursor: not-allowed;
+  color: var(--td-text-color-disabled);
 }
-.t-upload .t-icon {
-  font-size: 16px;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+.t-range-input.t-range-input.t-is-disabled .t-range-input__inner::-webkit-input-placeholder {
+  color: var(--td-text-color-disabled);
 }
-.t-upload .t-icon-check-circle-filled {
-  color: var(--td-success-color);
+.t-range-input.t-range-input.t-is-disabled .t-range-input__inner::-moz-placeholder {
+  color: var(--td-text-color-disabled);
 }
-.t-upload .t-icon-error-circle-filled {
-  color: var(--td-error-color);
+.t-range-input.t-range-input.t-is-disabled .t-range-input__inner:-ms-input-placeholder {
+  color: var(--td-text-color-disabled);
 }
-.t-upload .t-icon-loading {
-  color: var(--td-brand-color);
+.t-range-input.t-range-input.t-is-disabled .t-range-input__inner::-ms-input-placeholder {
+  color: var(--td-text-color-disabled);
 }
-.t-upload .t-icon-time-filled {
-  color: var(--td-text-color-placeholder);
+.t-range-input.t-range-input.t-is-disabled .t-range-input__inner::placeholder {
+  color: var(--td-text-color-disabled);
 }
-.t-upload .t-icon-add {
-  color: var(--td-text-color-primary);
+.t-range-input.t-range-input.t-is-disabled > .t-range-input__prefix .t-icon,
+.t-range-input.t-range-input.t-is-disabled > .t-range-input__suffix .t-icon {
+  color: var(--td-text-color-disabled);
 }
-.t-upload .t-upload__icon-delete {
-  color: var(--td-text-color-secondary);
-  cursor: pointer;
+.t-range-input.t-range-input--prefix > .t-range-input__prefix-icon {
+  padding-right: 8px;
 }
-.t-upload__list-file {
+.t-range-input.t-range-input--prefix > .t-range-input__prefix {
+  z-index: 2;
+  height: 100%;
+  text-align: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  width: 100px;
-  height: 100px;
-  margin-right: 12px;
-  overflow: hidden;
+  font-size: 14px;
 }
-.t-upload__list-file .t-icon {
-  font-size: 40px;
-  color: var(--td-brand-color);
+.t-range-input.t-range-input--prefix > .t-range-input__prefix-icon {
+  font-size: 16px;
 }
-.t-upload__list-item {
+.t-range-input.t-range-input--suffix > .t-range-input__suffix-icon {
+  padding-left: 8px;
+}
+.t-range-input.t-range-input--suffix > .t-range-input__suffix {
+  z-index: 2;
+  height: 100%;
+  text-align: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  margin-top: 12px;
-  width: 496px;
-  height: 124px;
-  padding: 12px;
-  border: 1px solid var(--td-component-border);
-  border-radius: 3px;
   font-size: 14px;
 }
-.t-upload__list-item.t-is--error .t-upload__list-name {
-  color: var(--td-error-color);
+.t-range-input.t-range-input--suffix > .t-range-input__suffix-icon {
+  font-size: 16px;
 }
-.t-upload__list-item.t-is--error .t-upload__list-file .t-icon {
-  color: var(--td-error-color);
+.t-range-input.t-size-l {
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
 }
-.t-upload__list-content {
+.t-range-input.t-size-l .t-input {
+  padding: 0 8px;
+}
+.t-range-input.t-size-s {
+  padding: 2px 4px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+}
+.t-range-input.t-is-focused {
+  z-index: 1;
+  border-color: var(--td-brand-color);
+  -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+          box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+}
+.t-range-input__inner {
+  height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  gap: 8px;
 }
-.t-upload-list__control {
-  cursor: pointer;
-}
-.t-upload-list__control:hover {
-  color: var(--td-error-color);
+.t-range-input__inner .t-input__wrap {
+  height: 100%;
 }
-.t-upload__list-img {
-  -o-object-fit: cover;
-     object-fit: cover;
-  max-width: 100%;
-  max-height: 100%;
-  cursor: pointer;
+.t-range-input__inner .t-input {
+  padding: 0 4px;
+  height: 100%;
+  border: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  font-size: inherit;
 }
-.t-upload__list-name {
-  max-width: 200px;
-  white-space: nowrap;
-  word-wrap: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.t-range-input__inner .t-input:hover {
+  background-color: var(--td-bg-color-container-hover);
 }
-.t-upload--highlight {
-  color: var(--td-text-color-brand);
+.t-range-input__inner .t-input__inner {
+  height: 100%;
 }
-.t-upload__single-name {
-  margin-right: 8px;
+.t-range-input__inner .t-input.t-is-focused {
+  background-color: var(--td-bg-color-component);
 }
-.t-upload__card {
+.t-range-input__extra {
   font-size: 12px;
-  line-height: 20px;
-  overflow: hidden;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-.t-upload__card .t-is-disabled :hover {
-  cursor: not-allowed;
+  color: var(--td-text-color-placeholder);
 }
-.t-upload__card-item {
-  margin: 0 8px 0 0;
-  float: left;
-  cursor: pointer;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  list-style: none;
+.t-range-input__status {
+  position: absolute;
+  right: -24px;
+  top: 0;
 }
-.t-upload__card-item::after {
-  content: "";
-  display: block;
+.t-range-input.t-range-input--suffix .t-input__clear {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
+  transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s;
 }
-.t-upload__card-item:hover .t-upload__card-mask {
+.t-range-input.t-range-input--suffix:hover .t-input__clear {
   opacity: 1;
-  -webkit-transition: opacity 0.2s linear;
-  transition: opacity 0.2s linear;
-}
-.t-upload__card-item.t-is--error .t-icon-warning_fill {
-  color: var(--td-error-color);
-  margin-bottom: 10px;
+  visibility: visible;
 }
-.t-upload__card-item.t-is--error .t-upload__card-status {
-  color: var(--td-error-color);
+.t-range-input .t-range-input__suffix-clear {
+  cursor: pointer;
 }
-.t-upload__card-item.t-is--background {
-  -webkit-transition: border-color 0.2s linear;
-  transition: border-color 0.2s linear;
+.t-range-input__prefix .t-icon,
+.t-range-input__suffix .t-icon {
+  -webkit-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+  font-size: 16px;
+  color: var(--td-text-color-placeholder);
 }
-.t-upload__card-item.t-is--background:hover {
+.t-range-input-popup--visible .t-range-input {
   border-color: var(--td-brand-color);
+  -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+          box-shadow: 0 0 0 2px var(--td-brand-color-focus);
 }
-.t-upload__card .t-icon-loading {
-  margin-bottom: 10px;
+.t-range-input-popup--visible .t-range-input .t-icon-time,
+.t-range-input-popup--visible .t-range-input .t-icon-calendar {
+  color: var(--td-brand-color);
 }
-.t-upload__card-name {
-  max-width: 100%;
-  margin-top: 8px;
-  color: var(--td-text-color-primary);
-  white-space: nowrap;
-  word-wrap: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.t-range-input-popup--visible .t-range-input .t-input.t-is-focused {
+  background-color: var(--td-bg-color-component);
 }
-.t-upload__card-content {
-  position: relative;
-  width: 112px;
-  height: 112px;
-  overflow: hidden;
+
+.flex-center {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -13830,15 +13702,52 @@ a.t-menu__item:active {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  background-color: var(--td-bg-color-secondarycontainer);
-  border: 1px dashed var(--td-component-border);
-  padding: 8px;
 }
-.t-upload__card-container {
-  width: 110px;
-  height: 110px;
+.t-time-picker {
+  width: 240px;
+  background: transparent;
+  display: inline-block;
+  position: relative;
+  font-size: 14px;
+  color: var(--td-text-color-primary);
+}
+.t-time-picker.t-is-disabled {
+  cursor: not-allowed;
+}
+.t-time-picker > *:focus,
+.t-time-picker > *:active {
+  outline: 0;
+}
+.t-time-picker__group {
+  position: relative;
+}
+.t-time-picker__group.t-is-focused .t-input__suffix .t-icon:not(.t-input__suffix-clear) {
+  color: var(--td-brand-color);
+}
+.t-time-picker__group.active {
+  border: 1px solid var(--td-brand-color);
+  -webkit-box-shadow: 0 0 2px 2px var(--td-brand-color-focus);
+          box-shadow: 0 0 2px 2px var(--td-brand-color-focus);
+}
+.t-time-picker__group.active + .t-time-picker__icon-wrap > .t-time-picker__icon-clear {
+  display: block;
+}
+.t-time-picker__group-text {
+  color: var(--td-text-color-primary);
+}
+.t-time-picker__group input {
+  cursor: pointer;
+}
+.t-time-picker__input {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  padding: 0 8px 0 4px;
+  z-index: 1;
+  border-radius: 3px;
+  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  font-size: 14px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -13848,46 +13757,67 @@ a.t-menu__item:active {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  background-color: var(--td-bg-color-secondarycontainer);
-  border: 1px dashed var(--td-component-border);
 }
-.t-upload__card-container > .t-icon,
-.t-upload__card-container .t-loading {
-  font-size: 24px;
-  margin-bottom: 8px;
+.t-time-picker__input:hover {
+  border-color: var(--td-brand-color);
 }
-.t-upload__card-container > p {
+.t-time-picker__input-placeholder {
+  margin-left: 8px;
   color: var(--td-text-color-placeholder);
 }
-.t-upload__card-status-wrap {
+.t-time-picker__input-item {
+  height: 22px;
+}
+.t-time-picker__input-item-disabled {
+  color: var(--td-text-color-disabled);
+}
+.t-time-picker__input-item-input {
+  margin: 0 2px;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  height: inherit;
+  outline: none;
+  width: 28px;
   text-align: center;
+  border-radius: 3px;
+  border: 0;
+  line-height: 22px;
 }
-.t-upload__card-status-wrap > svg {
-  margin-bottom: 6px;
+.t-time-picker__input-item-input-meridiem {
+  width: 36px;
 }
-.t-upload__card-status-wrap .t-icon,
-.t-upload__card-status-wrap .t-loading {
-  font-size: 20px;
+.t-time-picker__input-item-input:focus {
+  border-color: var(--td-bg-color-page);
+  background-color: var(--td-bg-color-container-hover);
 }
-.t-upload__card-image {
-  max-width: 100%;
-  max-height: 100%;
+.t-time-picker__input-disabled {
+  border: 1px solid var(--td-border-level-2-color);
+  background-color: var(--td-bg-color-container-hover);
 }
-.t-upload__card-status {
+.t-time-picker__input-disabled-placeholder {
   color: var(--td-text-color-disabled);
-  font-size: 12px;
 }
-.t-upload__card-mask {
-  background-color: var(--td-text-color-secondary);
-  color: var(--td-bg-color-container);
-  -webkit-transition: opacity 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  will-change: transform;
-  opacity: 0;
+.t-time-picker__input-disabled-item-input {
+  pointer-events: none;
+}
+.t-time-picker__panel {
+  width: 264px;
+  background: transparent;
+  border-radius: 3px;
+  display: inline-block;
+  position: relative;
+  font-size: 14px;
+}
+.t-time-picker__panel-body {
+  width: 100%;
+  height: 216px;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  margin: 16px 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -13897,190 +13827,153 @@ a.t-menu__item:active {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-.t-upload__card-mask-item-divider {
-  margin: 0 16px;
-  border-left: 1px var(--td-bg-color-container) solid;
-  height: 16px;
 }
-.t-upload__card-mask-item > .t-icon {
-  cursor: pointer;
-  font-size: 16px;
-}
-.t-upload__dialog .t-dialog {
-  max-width: 80%;
-}
-.t-upload__dialog .t-dialog--default {
-  padding: 32px;
-}
-.t-upload__dialog .t-dialog-body {
-  padding-bottom: 0;
-}
-.t-upload__dialog .t-dialog-body-img-box img {
-  display: block;
-  max-width: 100%;
-  max-height: 100%;
-}
-.t-upload__dragger {
+.t-time-picker__panel-body-active-mask {
+  position: absolute;
+  top: 50%;
+  height: 24px;
+  width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  width: 336px;
-  height: 144px;
-  border: 1px dashed var(--td-component-border);
-  border-radius: 2px;
-  font-size: 14px;
-  color: var(--td-text-color-secondary);
-  cursor: pointer;
-  padding: 16px;
-  position: relative;
-  overflow: auto;
-  -webkit-transition: border-color 0.2s linear;
-  transition: border-color 0.2s linear;
-}
-.t-upload__dragger.t-is--active {
-  background-color: var(--td-bg-color-container-active);
-  border-color: var(--td-brand-color);
 }
-.t-upload__dragger:hover {
-  border-color: var(--td-brand-color);
+.t-time-picker__panel-body-active-mask > div {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  -webkit-transform: translateY(-15px);
+          transform: translateY(-15px);
+  height: 24px;
+  background-color: var(--td-brand-color-light);
+  margin: 6px 4px;
+  border-radius: 3px;
 }
-.t-upload__dragger-btns {
-  position: absolute;
-  bottom: 8px;
+.t-time-picker__panel-body-scroll {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  height: 100%;
+  overflow-y: scroll;
+  text-align: center;
+  position: relative;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
-.t-upload__dragger-center {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+.t-time-picker__panel-body-scroll::-webkit-scrollbar {
+  width: 0;
 }
-.t-upload__dragger-error {
-  border-color: var(--td-error-color);
+.t-time-picker__panel-body-scroll::after,
+.t-time-picker__panel-body-scroll::before {
+  display: block;
+  height: 50%;
+  content: "";
 }
-.t-upload__dragger-error:hover {
-  border-color: var(--td-error-color);
+.t-time-picker__panel-body-scroll:last-child {
+  border-right: 0;
 }
-.t-upload__dragger-text {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+.t-time-picker__panel-body-scroll-item {
+  height: 24px;
   font-size: 14px;
-  line-height: 22px;
-  color: var(--td-text-color-primary);
-  margin-bottom: 8px;
-  max-width: 304px;
+  line-height: 24px;
+  color: var(--td-text-color-secondary);
+  margin: 6px 4px;
+  border-radius: 3px;
+  text-align: center;
+  cursor: pointer;
+  -webkit-transition: background-color 0.2s;
+  transition: background-color 0.2s;
 }
-.t-upload__dragger-text .t-upload__single-name {
-  white-space: nowrap;
-  word-wrap: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.t-time-picker__panel-body-scroll-item:not(.t-time-picker__panel-body-scroll-item.t-is-current):not(.t-time-picker__panel-body-scroll-item.t-is-disabled):hover {
+  color: var(--td-text-color-primary);
 }
-.t-upload__tips {
-  margin-top: 8px;
+.t-time-picker__panel-body-scroll-item:not(.t-time-picker__panel-body-scroll-item.t-is-current):not(.t-time-picker__panel-body-scroll-item.t-is-disabled):active {
+  background-color: var(--td-bg-color-container-hover);
 }
-.t-upload__tips.t-upload__tips-error {
-  color: var(--td-error-color);
+.t-time-picker__panel-body-scroll-item.t-is-disabled {
+  color: var(--td-text-color-disabled);
+  cursor: not-allowed;
 }
-.t-upload__placeholder {
-  color: var(--td-text-color-placeholder);
+.t-time-picker__panel-body-scroll-item.t-is-hidden {
+  display: none;
+  cursor: not-allowed;
 }
-.t-upload__display-text--margin {
-  margin-top: 10px;
+.t-time-picker__panel-body-scroll-item.t-is-current {
+  color: var(--td-brand-color);
 }
-.t-upload__single-display-text {
-  color: var(--td-text-color-secondary);
-  font-size: 12px;
-  line-height: 20px;
+.t-time-picker__panel-section-footer {
+  width: 100%;
+  height: 48px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: row-reverse;
+          flex-direction: row-reverse;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  background-color: transparent;
+  position: relative;
+  border-top: 1px solid var(--td-border-level-1-color);
 }
-.t-icon-clear-circle-filled {
-  color: var(--td-text-color-placeholder);
-  margin-top: 2px;
-  -webkit-transition: color 0.2s linear;
-  transition: color 0.2s linear;
+
+.t-date-picker {
+  width: 240px;
 }
-.t-icon-clear-circle-filled:hover {
-  color: var(--td-text-color-secondary);
-  cursor: pointer;
+.t-date-picker__panel-container,
+.t-date-range-picker__panel-container {
+  padding: 0;
+  min-width: 280px;
 }
-.t-upload__single-percent {
-  margin-left: 8px;
+.t-date-picker__panel-container .t-select__dropdown,
+.t-date-range-picker__panel-container .t-select__dropdown {
+  max-height: 160px;
 }
-.t-upload__single-progress {
-  color: var(--td-brand-color);
+.t-date-picker__panel,
+.t-date-range-picker__panel {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
-.t-upload__single-progress .t-loading {
-  font-size: 16px;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+.t-date-picker__panel--direction-row,
+.t-date-range-picker__panel--direction-row {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
 }
-.t-upload__single-input-delete {
-  margin-left: 16px;
-  font-size: 14px;
-  color: var(--td-brand-color);
-  line-height: 22px;
-  cursor: pointer;
+.t-date-picker__panel .t-time-picker__panel,
+.t-date-range-picker__panel .t-time-picker__panel {
+  width: 216px;
 }
-.t-upload__single-input-preview {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  max-width: calc(100% - 162px);
+.t-date-picker__panel .t-time-picker__panel-section-body,
+.t-date-range-picker__panel .t-time-picker__panel-section-body {
+  padding: 0;
 }
-.t-upload__single-input-text {
-  display: block;
-  white-space: nowrap;
-  word-wrap: normal;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.t-date-picker__panel .t-time-picker__panel-body,
+.t-date-range-picker__panel .t-time-picker__panel-body {
+  margin: 0;
 }
-.t-upload__single-file-input {
+.t-date-picker__panel--content,
+.t-date-range-picker__panel--content,
+.t-date-range-picker__panel--content-wrapper {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-.t-upload__single-file-input .t-upload__trigger {
-  margin-left: 16px;
 }
-.t-upload__single-file-input .t-upload__trigger .t-button {
-  margin-left: 8px;
-}
-.t-upload__single-file-input .t-upload__single-progress {
-  white-space: nowrap;
+.t-date-range-picker__panel--content-wrapper {
+  gap: 6px;
 }
-.t-upload__single-file-input .t-input__inner {
+.t-date-picker__header {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -14090,170 +13983,277 @@ a.t-menu__item:active {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
+  gap: 12px;
+  width: 100%;
 }
-.t-upload__dragger-progress {
+.t-date-picker__header-controller {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  gap: 8px;
+}
+.t-date-picker__header-controller--month {
+  width: 80px;
+}
+.t-date-picker__header-controller--year {
+  width: 78px;
+}
+.t-date-picker__table table {
   width: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  border-collapse: collapse;
 }
-.t-upload__dragger-progress .t-icon,
-.t-upload__dragger-progress .t-loading {
-  font-size: 16px;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+.t-date-picker__table th {
+  text-align: center;
+  color: var(--td-text-color-secondary);
+  font-weight: 400;
 }
-.t-upload__dragger-img-wrap {
-  width: 112px;
-  height: 112px;
-  background-color: var(--td-bg-color-secondarycontainer);
+.t-date-picker__table td {
+  text-align: center;
+  font-weight: 500;
+}
+.t-date-picker__table thead::after {
+  content: "-";
+  display: block;
+  line-height: 3px;
+  color: transparent;
+}
+.t-date-picker__footer {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  padding: 12px;
+  gap: 8px;
 }
-.t-upload__dragger-img-wrap > img {
-  max-width: 100%;
-  max-height: 100%;
+.t-date-picker__footer--bottom {
+  border-top: 1px solid var(--td-gray-color-3);
 }
-.t-upload__dragger-img-wrap + .t-upload__dragger-progress-info {
-  margin-left: 16px;
-  max-width: 176px;
+.t-date-picker__footer--top {
+  border-bottom: 1px solid var(--td-gray-color-3);
 }
-.t-upload__dragger-progress-info {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+.t-date-picker__footer--left {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  border-right: 1px solid var(--td-gray-color-3);
 }
-.t-upload__dragger-progress-info .t-upload__single-display-text {
-  margin-bottom: 8px;
+.t-date-picker__footer--right {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  border-left: 1px solid var(--td-gray-color-3);
 }
-.t-upload__dragger-progress-info .t-button:hover {
-  background-color: transparent;
+.t-date-picker__presets {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  white-space: nowrap;
+  min-width: 100px;
 }
-.t-upload__dragger-progress-cancel {
-  padding: 0;
+.t-date-picker__presets .t-button {
+  cursor: pointer;
 }
-.t-upload__flow-image-flow {
-  width: 498px;
+.t-date-picker__presets a {
+  color: var(--td-brand-color);
 }
-.t-upload__flow {
-  min-width: 496px;
-  max-width: 960px;
+.t-date-picker__presets a:hover {
+  color: var(--td-brand-color-hover);
 }
-.t-upload__flow-placeholder {
-  display: inline-block;
-  margin-left: 16px;
+.t-date-picker__panel--time,
+.t-date-range-picker__panel--time {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 2px;
+  padding: 12px;
+  border-left: 1px solid var(--td-gray-color-3);
 }
-.t-upload__flow-op {
+.t-date-picker__panel--time-viewer,
+.t-date-range-picker__panel--time-viewer {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  height: 32px;
+  line-height: 22px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  color: var(--td-text-color-primary);
 }
-.t-upload__flow-bottom {
+.t-date-picker__panel--time .t-time-picker__panel-body,
+.t-date-range-picker__panel--time .t-time-picker__panel-body {
+  margin: 0;
+}
+.t-date-picker__panel--year,
+.t-date-picker__panel--month,
+.t-date-picker__panel--date {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
-  margin-top: 24px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: 100%;
+  padding: 12px;
+  gap: 12px;
+  max-width: 280px;
 }
-.t-upload__flow-bottom .t-button + .t-button {
-  margin-left: 8px;
+.t-date-picker__panel--year .t-date-picker__header-controller--year,
+.t-date-picker__panel--month .t-date-picker__header-controller--year {
+  width: 130px;
 }
-.t-upload__flow-empty {
+.t-date-picker__panel--year .t-date-picker__table table tbody,
+.t-date-picker__panel--month .t-date-picker__table table tbody {
   width: 100%;
-  height: 210px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  gap: 16px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.t-date-picker__panel--year .t-date-picker__table table tbody tr,
+.t-date-picker__panel--month .t-date-picker__table table tbody tr {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+.t-date-picker__panel--year .t-date-picker__cell:nth-child(1),
+.t-date-picker__panel--month .t-date-picker__cell:nth-child(1) {
+  text-align: left;
+}
+.t-date-picker__panel--year .t-date-picker__cell:nth-child(3),
+.t-date-picker__panel--month .t-date-picker__cell:nth-child(3) {
+  text-align: right;
+}
+.t-date-picker__panel--year .t-date-picker__cell-inner,
+.t-date-picker__panel--month .t-date-picker__cell-inner {
+  width: 48px;
+}
+.t-date-picker__cell {
+  cursor: pointer;
+  position: relative;
+  padding: 0;
+}
+.t-date-picker__cell::before,
+.t-date-picker__cell::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: 24px;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+}
+.t-date-picker__cell:hover .t-date-picker__cell-inner {
+  -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color);
+          box-shadow: inset 0 0 0 1px var(--td-brand-color);
+}
+.t-date-picker__cell-inner {
+  position: relative;
+  z-index: 5;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  color: var(--td-text-color-placeholder);
+  width: 24px;
+  height: 24px;
+  margin: 3px;
+  border-radius: 3px;
+  -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: background-color 0.2s linear, border-color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear;
+  transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1);
 }
-.t-upload__flow-table {
-  width: 100%;
-  border: 1px dashed var(--td-component-border);
-  margin-top: 24px;
-  border-collapse: collapse;
+.t-date-picker__cell--now .t-date-picker__cell-inner {
+  color: var(--td-brand-color);
+  background: var(--td-brand-color-light);
 }
-.t-upload__flow-table > thead > tr,
-.t-upload__flow-table > tbody > tr,
-.t-upload__flow-table > tfoot > tr,
-.t-upload__flow-table > tr {
-  border-top: 1px solid var(--td-component-border);
+.t-date-picker__cell--hover-highlight::after {
+  background-color: var(--td-brand-color-light);
 }
-.t-upload__flow-table > thead > tr > th,
-.t-upload__flow-table > tbody > tr > th,
-.t-upload__flow-table > tfoot > tr > th,
-.t-upload__flow-table > tr > th {
-  color: var(--td-text-color-placeholder);
-  font-weight: normal;
-  border: 1px solid var(--td-component-border);
-  text-align: left;
-  background-color: var(--td-bg-color-container);
+.t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::after {
+  left: -28px;
 }
-.t-upload__flow-table > thead > tr > td,
-.t-upload__flow-table > tbody > tr > td,
-.t-upload__flow-table > tfoot > tr > td,
-.t-upload__flow-table > tr > td {
-  color: var(--td-text-color-primary);
+.t-date-picker__cell--highlight + .t-date-picker__cell--highlight::before {
+  left: -28px;
 }
-.t-upload__flow-table > thead > tr > td,
-.t-upload__flow-table > tbody > tr > td,
-.t-upload__flow-table > tfoot > tr > td,
-.t-upload__flow-table > tr > td,
-.t-upload__flow-table > thead > tr > th,
-.t-upload__flow-table > tbody > tr > th,
-.t-upload__flow-table > tfoot > tr > th,
-.t-upload__flow-table > tr > th {
-  padding: 10px 24px;
+.t-date-picker__cell--highlight::before {
+  background-color: var(--td-brand-color-light);
 }
-.t-upload__flow-table__batch-row {
-  border-left: 1px solid var(--td-component-border);
+.t-date-picker__cell--highlight.t-date-picker__cell--hover-highlight::after {
+  background-color: rgba(0, 0, 0, 0.04);
 }
-.t-upload__flow-button {
-  color: var(--td-text-color-placeholder);
-  cursor: pointer;
-  -webkit-transition: color 0.2s linear;
-  transition: color 0.2s linear;
+.t-date-picker__cell--additional:hover .t-date-picker__cell-inner {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border-color: var(--td-bg-color-container-hover);
+  background-color: var(--td-bg-color-container-hover);
 }
-.t-upload__flow-button:hover {
-  color: var(--td-text-color-secondary);
+.t-date-picker__cell--additional .t-date-picker__cell-inner {
+  color: var(--td-text-color-disabled);
 }
-.t-upload__flow-status {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+.t-date-picker__cell--active .t-date-picker__cell-inner {
+  color: var(--td-text-color-anti);
+  background-color: var(--td-brand-color);
 }
-.t-upload__flow-status .t-icon,
-.t-upload__flow-status .t-loading {
-  margin-right: 8px;
-  font-size: 16px;
+.t-date-picker__cell--active-start::before {
+  left: 6px;
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
 }
-.t-upload__flow-card-area {
-  border: 1px dashed var(--td-component-border);
-  padding: 12px;
-  margin-top: 24px;
-  width: 100%;
+.t-date-picker__cell--active-end::before {
+  right: 6px;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.t-date-picker__cell--disabled:hover .t-date-picker__cell-inner {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  background-color: var(--td-gray-color-2);
+}
+.t-date-picker__cell--disabled .t-date-picker__cell-inner {
+  cursor: not-allowed;
+  color: var(--td-text-color-disabled);
+  background-color: var(--td-gray-color-2);
+}
+.t-date-picker__cell--disabled + .t-date-picker__cell--disabled::before {
+  left: -32px;
+  right: 12px;
+  background-color: var(--td-gray-color-2);
+}
+.t-date-picker__input--placeholder input {
+  color: var(--td-text-color-placeholder);
 }
 
 /* Swiper */