tdesign-react 0.45.6-alpha.1 → 0.45.6-alpha.2

package/es/image-viewer/style/index.css

@@ -1 +1,599 @@
-.t-image-viewer__img-error{height:440px;width:440px;background-color:var(--td-bg-color-component-disabled);border-radius:4px;color:#000;cursor:inherit;position:absolute}.t-image-viewer__img-error .t-image-viewer__img-error-content{position:absolute;height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;font:var(--td-font-body-medium)}.t-image-viewer__img-error .t-image-viewer__img-error-content .t-image-viewer__img-error-text{margin-top:var(--td-comp-margin-s)}@-webkit-keyframes modal-image-hide{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(0);transform:scale(0)}}@keyframes modal-image-hide{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(0);transform:scale(0)}}@-webkit-keyframes modal-mask-show{0%{opacity:0}to{opacity:1}}@keyframes modal-mask-show{0%{opacity:0}to{opacity:1}}@-webkit-keyframes modal-mask-hide{0%{opacity:1}to{opacity:0}}@keyframes modal-mask-hide{0%{opacity:1}to{opacity:0}}.t-image-viewer-preview-image{position:fixed;top:0;bottom:0;left:0;right:0;z-index:3000;overflow:hidden;-webkit-animation:modal-mask-show .2s cubic-bezier(.82,0,1,.9);animation:modal-mask-show .2s cubic-bezier(.82,0,1,.9)}.t-image-viewer-preview-image.t-is-hide{-webkit-animation:modal-mask-hide .2s cubic-bezier(0,0,.15,1);animation:modal-mask-hide .2s cubic-bezier(0,0,.15,1)}.t-image-viewer-preview-image.t-is-hide .t-image-viewer__modal-pic .t-image-viewer__modal-box{-webkit-animation:modal-image-hide .2s cubic-bezier(0,0,.15,1);animation:modal-image-hide .2s cubic-bezier(0,0,.15,1)}.t-image-viewer-preview-image .t-image-viewer__modal-index{text-align:center;font-size:var(--td-font-size-body-medium);color:var(--td-text-color-anti);position:absolute;top:92px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:rgba(0,0,0,.4);border-radius:var(--td-radius-default);padding:var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s);z-index:1}.t-image-viewer-preview-image .t-image-viewer__modal-mask{position:fixed;top:0;bottom:0;left:0;right:0;background-color:var(--td-mask-active);height:100%;width:100%;-webkit-transition:all .2s ease;transition:all .2s ease;opacity:1}.t-image-viewer-preview-image .t-image-viewer__modal-pic{height:0;width:0;position:absolute;top:50%;left:50%}.t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box{width:100%;height:100%;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;-webkit-animation:modal-image-show .2s cubic-bezier(.38,0,.24,1);animation:modal-image-show .2s cubic-bezier(.38,0,.24,1)}.t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image{display:block;max-width:min(90vw,1000px);max-height:min(90vh,800px);-webkit-transition:all .2s cubic-bezier(.38,0,.24,1);transition:all .2s cubic-bezier(.38,0,.24,1);-webkit-transform:rotate(0deg);transform:rotate(0deg);-o-object-fit:contain;object-fit:contain}.t-image-viewer-preview-image .t-image-viewer__modal-header{width:100%;position:absolute;top:0;z-index:1;height:auto;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;background-color:var(--td-bg-color-container);padding:0 0 12px}.t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show{padding:12px 0}@-webkit-keyframes preview-icon-range{0%{-webkit-transform:translate(-50%,50%) rotate(0);transform:translate(-50%,50%) rotate(0)}to{-webkit-transform:translate(-50%,50%) rotate(-180deg);transform:translate(-50%,50%) rotate(-180deg)}}@keyframes preview-icon-range{0%{-webkit-transform:translate(-50%,50%) rotate(0);transform:translate(-50%,50%) rotate(0)}to{-webkit-transform:translate(-50%,50%) rotate(-180deg);transform:translate(-50%,50%) rotate(-180deg)}}@-webkit-keyframes preview-icon-unrange{0%{-webkit-transform:translate(-50%,50%) rotate(-180deg);transform:translate(-50%,50%) rotate(-180deg)}to{-webkit-transform:translate(-50%,50%) rotate(0);transform:translate(-50%,50%) rotate(0)}}@keyframes preview-icon-unrange{0%{-webkit-transform:translate(-50%,50%) rotate(-180deg);transform:translate(-50%,50%) rotate(-180deg)}to{-webkit-transform:translate(-50%,50%) rotate(0);transform:translate(-50%,50%) rotate(0)}}.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt{width:var(--td-comp-size-xxs);height:var(--td-comp-size-xxs);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;position:absolute;left:50%;bottom:0;-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%);background-color:var(--td-bg-color-container);color:var(--td-text-color-primary);border-radius:50%;-webkit-box-shadow:var(--td-shadow-inset-top),var(--td-shadow-inset-right),var(--td-shadow-inset-bottom),var(--td-shadow-inset-left);box-shadow:var(--td-shadow-inset-top),var(--td-shadow-inset-right),var(--td-shadow-inset-bottom),var(--td-shadow-inset-left);-webkit-animation:preview-icon-unrange .2s cubic-bezier(.38,0,.24,1) 0s 1 normal forwards running;animation:preview-icon-unrange .2s cubic-bezier(.38,0,.24,1) 0s 1 normal forwards running}.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt .t-icon{font-size:var(--td-font-size-body-large)}.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt:hover{background-color:inherit}@-webkit-keyframes preview-image-show{0%{height:0}to{height:40px}}@keyframes preview-image-show{0%{height:0}to{height:40px}}@-webkit-keyframes preview-image-hide{0%{height:40px}to{height:0}}@keyframes preview-image-hide{0%{height:40px}to{height:0}}.t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-prev{-webkit-animation:preview-image-show .2s cubic-bezier(.38,0,.24,1) 0s 1 normal forwards running;animation:preview-image-show .2s cubic-bezier(.38,0,.24,1) 0s 1 normal forwards running}.t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-pre-bt{-webkit-animation:preview-icon-range .2s cubic-bezier(.38,0,.24,1) 0s 1 normal forwards running;animation:preview-icon-range .2s cubic-bezier(.38,0,.24,1) 0s 1 normal forwards running}.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev{width:521.77778px;-webkit-animation:preview-image-hide .2s cubic-bezier(.38,0,.24,1) 0s 1 normal forwards running;animation:preview-image-hide .2s cubic-bezier(.38,0,.24,1) 0s 1 normal forwards running;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;overflow:hidden}.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev:after,.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev:before{content:"";position:absolute;height:100%;z-index:1;width:71.11111px;pointer-events:none}.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev:before{left:0;background-image:-webkit-gradient(linear,left top, right top,from(var(--td-bg-color-container)),to(hsla(0,0%,100%,0)));background-image:linear-gradient(90deg,var(--td-bg-color-container),hsla(0,0%,100%,0))}.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev:after{right:0;background-image:-webkit-gradient(linear,left top, right top,from(hsla(0,0%,100%,0)),to(var(--td-bg-color-container)));background-image:linear-gradient(90deg,hsla(0,0%,100%,0),var(--td-bg-color-container))}.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev .t-image-viewer__header-trans{height:100%;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s, -webkit-transform .2s;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;gap:4px;margin-left:225.33333px}.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev .t-image-viewer__header-trans .t-image-viewer__header-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:71.11111px;height:40px;-webkit-transition:.2s;transition:.2s;overflow:hidden;border-radius:var(--td-radius-default);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;border:1px solid transparent;background-color:var(--td-bg-color-secondarycontainer)}.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev .t-image-viewer__header-trans .t-image-viewer__header-box .t-image-viewer__header-img{width:auto;height:100%}.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev .t-image-viewer__header-trans .t-image-viewer__header-box.t-is-active,.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev .t-image-viewer__header-trans .t-image-viewer__header-box:hover{border-color:var(--td-brand-color)}.t-image-viewer-preview-image .t-image-viewer__modal-icon{cursor:pointer;color:var(--td-text-color-primary);border-radius:var(--td-radius-default);-webkit-transition:.2s;transition:.2s}.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt{top:100px;right:40px}.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt,.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt{left:40px}.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt{right:40px}.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt,.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt,.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt{position:fixed;z-index:10;color:var(--td-text-color-anti);background-color:rgba(0,0,0,.4);border-radius:50%;width:var(--td-comp-size-xl);height:var(--td-comp-size-xl);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}.t-image-viewer-preview-image .t-image-viewer__modal-icon .t-image-viewer__modal-icon-label{margin-left:2px}.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled{color:hsla(0,0%,100%,.22)}.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled:hover{background-color:rgba(0,0,0,.4)}.t-image-viewer-preview-image .t-image-viewer__modal-icon:hover{background-color:rgba(0,0,0,.2)}.t-image-viewer__mask{width:100vh;height:100vh;left:0;top:0;z-index:99;position:fixed;background-color:transparent}.t-image-viewer__utils{width:100%;position:absolute;bottom:32px;z-index:1;height:auto;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;color:var(--td-text-color-primary);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.t-image-viewer__utils .t-image-viewer__utils-content{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:50px;line-height:100%;background:var(--td-bg-color-container);border-radius:var(--td-radius-medium);padding:0 var(--td-comp-paddingLR-xs)}.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon{margin:0 var(--td-comp-margin-xs);width:var(--td-comp-size-m);height:var(--td-comp-size-m);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;border-radius:var(--td-radius-default);-webkit-transition:.2s;transition:.2s}.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon:hover{background-color:var(--td-bg-color-container-hover)}.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale{width:var(--td-comp-size-xl);text-align:center;cursor:inherit}.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale:hover{background-color:var(--td-bg-color-container)}.t-image-viewer-mini__footer .t-image-viewer__utils{position:inherit}.t-image-viewer-mini__content{max-width:min(90vw,1000px);max-height:min(90vh,800px)}@-webkit-keyframes modal-image-show{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes modal-image-show{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}.t-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box{width:100%;height:100%;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}.t-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image{display:block;max-width:min(80vw,800px);max-height:min(80vh,600px);-webkit-transition:all .2s ease;transition:all .2s ease;-webkit-transform:rotate(0deg);transform:rotate(0deg);-o-object-fit:contain;object-fit:contain}.t-image-viewer__dialog.t-dialog__ctx--fixed{z-index:3000}.t-image-viewer__dialog .t-dialog__header{padding:0 var(--td-comp-paddingLR-s);pointer-events:none}.t-image-viewer__dialog .t-dialog__header .t-image-viewer__dialog-title{pointer-events:all}.t-image-viewer__dialog .t-dialog__header .t-dialog__close{pointer-events:auto}.t-image-viewer__dialog .t-dialog{border-color:var(--td-component-border);overflow:hidden;padding:0;-webkit-box-shadow:var(--td-shadow-3);box-shadow:var(--td-shadow-3)}.t-image-viewer__dialog .t-dialog__header{height:40px;width:100%;font-size:var(--td-font-size-body-medium);background-color:var(--td-bg-color-secondarycontainer)}.t-image-viewer__dialog .t-dialog__header-content{margin-left:32px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.t-image-viewer__dialog .t-dialog__close:hover{background-color:var(--td-bg-color-secondarycontainer-hover)}
+.t-image-viewer__img-error {
+  height: 440px;
+  width: 440px;
+  background-color: var(--td-bg-color-component-disabled);
+  border-radius: 4px;
+  color: #000000;
+  cursor: inherit;
+  position: absolute;
+}
+.t-image-viewer__img-error .t-image-viewer__img-error-content {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-line-pack: center;
+      align-content: center;
+  font: var(--td-font-body-medium);
+}
+.t-image-viewer__img-error .t-image-viewer__img-error-content .t-image-viewer__img-error-text {
+  margin-top: var(--td-comp-margin-s);
+}
+@-webkit-keyframes modal-image-show {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes modal-image-show {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@-webkit-keyframes modal-image-hide {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  to {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+}
+@keyframes modal-image-hide {
+  0% {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+  to {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+}
+@-webkit-keyframes modal-mask-show {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes modal-mask-show {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-webkit-keyframes modal-mask-hide {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes modal-mask-hide {
+  0% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.t-image-viewer-preview-image {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 3000;
+  overflow: hidden;
+  -webkit-animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show;
+          animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show;
+}
+.t-image-viewer-preview-image.t-is-hide {
+  -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide;
+          animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide;
+}
+.t-image-viewer-preview-image.t-is-hide .t-image-viewer__modal-pic .t-image-viewer__modal-box {
+  -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide;
+          animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-index {
+  text-align: center;
+  font-size: var(--td-font-size-body-medium);
+  color: var(--td-text-color-anti);
+  position: absolute;
+  top: 92px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: var(--td-radius-default);
+  padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s);
+  z-index: 1;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--td-mask-active);
+  height: 100%;
+  width: 100%;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  opacity: 1;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-pic {
+  height: 0;
+  width: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box {
+  width: 100%;
+  height: 100%;
+  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;
+  -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show;
+          animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image {
+  display: block;
+  max-width: min(90vw, 1000px);
+  max-height: min(90vh, 800px);
+  -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);
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  height: auto;
+  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;
+  background-color: var(--td-bg-color-container);
+  padding: 0 0 12px 0;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show {
+  padding: 12px 0;
+}
+@-webkit-keyframes preview-icon-range {
+  0% {
+    -webkit-transform: translate(-50%, 50%) rotateZ(0);
+            transform: translate(-50%, 50%) rotateZ(0);
+  }
+  to {
+    -webkit-transform: translate(-50%, 50%) rotateZ(-180deg);
+            transform: translate(-50%, 50%) rotateZ(-180deg);
+  }
+}
+@keyframes preview-icon-range {
+  0% {
+    -webkit-transform: translate(-50%, 50%) rotateZ(0);
+            transform: translate(-50%, 50%) rotateZ(0);
+  }
+  to {
+    -webkit-transform: translate(-50%, 50%) rotateZ(-180deg);
+            transform: translate(-50%, 50%) rotateZ(-180deg);
+  }
+}
+@-webkit-keyframes preview-icon-unrange {
+  0% {
+    -webkit-transform: translate(-50%, 50%) rotateZ(-180deg);
+            transform: translate(-50%, 50%) rotateZ(-180deg);
+  }
+  to {
+    -webkit-transform: translate(-50%, 50%) rotateZ(0);
+            transform: translate(-50%, 50%) rotateZ(0);
+  }
+}
+@keyframes preview-icon-unrange {
+  0% {
+    -webkit-transform: translate(-50%, 50%) rotateZ(-180deg);
+            transform: translate(-50%, 50%) rotateZ(-180deg);
+  }
+  to {
+    -webkit-transform: translate(-50%, 50%) rotateZ(0);
+            transform: translate(-50%, 50%) rotateZ(0);
+  }
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt {
+  width: var(--td-comp-size-xxs);
+  height: var(--td-comp-size-xxs);
+  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;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  -webkit-transform: translate(-50%, 50%);
+          transform: translate(-50%, 50%);
+  background-color: var(--td-bg-color-container);
+  color: var(--td-text-color-primary);
+  border-radius: 50%;
+  -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
+          box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
+  -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange;
+          animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt .t-icon {
+  font-size: var(--td-font-size-body-large);
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt:hover {
+  background-color: inherit;
+}
+@-webkit-keyframes preview-image-show {
+  0% {
+    height: 0;
+  }
+  to {
+    height: 40px;
+  }
+}
+@keyframes preview-image-show {
+  0% {
+    height: 0;
+  }
+  to {
+    height: 40px;
+  }
+}
+@-webkit-keyframes preview-image-hide {
+  0% {
+    height: 40px;
+  }
+  to {
+    height: 0;
+  }
+}
+@keyframes preview-image-hide {
+  0% {
+    height: 40px;
+  }
+  to {
+    height: 0;
+  }
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-prev {
+  -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show;
+          animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-pre-bt {
+  -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range;
+          animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev {
+  width: calc(40px / 9 * 16 * 7 + 4px * 6);
+  -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide;
+          animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::before,
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::after {
+  content: "";
+  position: absolute;
+  height: 100%;
+  z-index: 1;
+  width: calc(40px / 9 * 16);
+  pointer-events: none;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::before {
+  left: 0;
+  background-image: -webkit-gradient(linear, left top, right top, from(var(--td-bg-color-container)), to(rgba(255, 255, 255, 0)));
+  background-image: linear-gradient(to right, var(--td-bg-color-container), rgba(255, 255, 255, 0));
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::after {
+  right: 0;
+  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--td-bg-color-container)));
+  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--td-bg-color-container));
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev .t-image-viewer__header-trans {
+  height: 100%;
+  -webkit-transition: -webkit-transform 0.2s;
+  transition: -webkit-transform 0.2s;
+  transition: transform 0.2s;
+  transition: transform 0.2s, -webkit-transform 0.2s;
+  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;
+  gap: 4px;
+  margin-left: calc(40px / 9 * 16 * 3 + 4px * 3);
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev .t-image-viewer__header-trans .t-image-viewer__header-box {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: calc(40px / 9 * 16);
+  height: 40px;
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+  overflow: hidden;
+  border-radius: var(--td-radius-default);
+  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;
+  border: 1px solid transparent;
+  background-color: var(--td-bg-color-secondarycontainer);
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev .t-image-viewer__header-trans .t-image-viewer__header-box .t-image-viewer__header-img {
+  width: auto;
+  height: 100%;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev .t-image-viewer__header-trans .t-image-viewer__header-box:hover,
+.t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev .t-image-viewer__header-trans .t-image-viewer__header-box.t-is-active {
+  border-color: var(--td-brand-color);
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-icon {
+  cursor: pointer;
+  color: var(--td-text-color-primary);
+  border-radius: var(--td-radius-default);
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt {
+  top: 100px;
+  right: 40px;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt,
+.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt {
+  left: 40px;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt {
+  right: 40px;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt,
+.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt,
+.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt {
+  position: fixed;
+  z-index: 10;
+  color: var(--td-text-color-anti);
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 50%;
+  width: var(--td-comp-size-xl);
+  height: var(--td-comp-size-xl);
+  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;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-icon .t-image-viewer__modal-icon-label {
+  margin-left: 2px;
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled {
+  color: rgba(255, 255, 255, 0.22);
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled:hover {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.t-image-viewer-preview-image .t-image-viewer__modal-icon:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.t-image-viewer__mask {
+  width: 100vh;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  z-index: 99;
+  position: fixed;
+  background-color: transparent;
+}
+.t-image-viewer__utils {
+  width: 100%;
+  position: absolute;
+  bottom: 32px;
+  z-index: 1;
+  height: auto;
+  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;
+  color: var(--td-text-color-primary);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.t-image-viewer__utils .t-image-viewer__utils-content {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  height: 50px;
+  line-height: 100%;
+  background: var(--td-bg-color-container);
+  border-radius: var(--td-radius-medium);
+  padding: 0 var(--td-comp-paddingLR-xs);
+}
+.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon {
+  margin: 0 var(--td-comp-margin-xs);
+  width: var(--td-comp-size-m);
+  height: var(--td-comp-size-m);
+  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;
+  border-radius: var(--td-radius-default);
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+}
+.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon:hover {
+  background-color: var(--td-bg-color-container-hover);
+}
+.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale {
+  width: var(--td-comp-size-xl);
+  text-align: center;
+  cursor: inherit;
+}
+.t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale:hover {
+  background-color: var(--td-bg-color-container);
+}
+.t-image-viewer-mini__footer .t-image-viewer__utils {
+  position: inherit;
+}
+.t-image-viewer-mini__content {
+  max-width: min(90vw, 1000px);
+  max-height: min(90vh, 800px);
+}
+@keyframes modal-image-show {
+  0% {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+.t-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box {
+  width: 100%;
+  height: 100%;
+  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;
+}
+.t-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image {
+  display: block;
+  max-width: min(80vw, 800px);
+  max-height: min(80vh, 600px);
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.t-image-viewer__dialog.t-dialog__ctx--fixed {
+  z-index: 3000;
+}
+.t-image-viewer__dialog .t-dialog__header {
+  padding: 0 var(--td-comp-paddingLR-s);
+  pointer-events: none;
+}
+.t-image-viewer__dialog .t-dialog__header .t-image-viewer__dialog-title {
+  pointer-events: all;
+}
+.t-image-viewer__dialog .t-dialog__header .t-dialog__close {
+  pointer-events: auto;
+}
+.t-image-viewer__dialog .t-dialog {
+  border-color: var(--td-component-border);
+  overflow: hidden;
+  padding: 0;
+  -webkit-box-shadow: var(--td-shadow-3);
+          box-shadow: var(--td-shadow-3);
+}
+.t-image-viewer__dialog .t-dialog__header {
+  height: 40px;
+  width: 100%;
+  font-size: var(--td-font-size-body-medium);
+  background-color: var(--td-bg-color-secondarycontainer);
+}
+.t-image-viewer__dialog .t-dialog__header-content {
+  margin-left: 32px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.t-image-viewer__dialog .t-dialog__close:hover {
+  background-color: var(--td-bg-color-secondarycontainer-hover);
+}

package/es/index.js

@@ -631,7 +631,7 @@ import './_common/js/utils/injectStyle.js';
 import './watermark/defaultProps.js';
 import './watermark/type.js';
 import './image-viewer/ImageViewer.js';
-import './_chunks/dep-cbdff25e.js';
+import './_chunks/dep-1b6b0225.js';
 import './image-viewer/utils.js';
 import './image-viewer/hooks/useMirror.js';
 import './image-viewer/hooks/usePosition.js';