@univerjs/design 0.1.0-alpha.1

package/lib/index.css

@@ -0,0 +1,1833 @@
+/* temp_stylePlugin:src/components/avatar/index.module.less */
+.univer-avatar {
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+  color: rgb(var(--bg-color-secondary));
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  background: rgb(var(--grey-200));
+}
+.univer-avatar-square {
+  border-radius: var(--border-radius-base);
+}
+.univer-avatar-circle {
+  border-radius: 50%;
+}
+.univer-avatar-middle {
+  width: 34px;
+  height: 34px;
+  line-height: 34px;
+}
+.univer-avatar-small {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+}
+.univer-avatar-image {
+  background: transparent;
+}
+.univer-avatar-image > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* temp_stylePlugin:src/components/button/index.module.less */
+.univer-button {
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  border: 1px solid rgb(var(--border-color));
+  border-radius: var(--border-radius-base);
+  transition: all 0.15s;
+}
+.univer-button[disabled] {
+  cursor: not-allowed;
+  color: rgb(var(--grey-300));
+}
+.univer-button-default {
+  font-weight: 400;
+  color: rgb(var(--text-color));
+  background-color: rgb(var(--bg-color-secondary));
+}
+.univer-button-default[disabled]:hover {
+  color: rgb(var(--grey-300));
+  border-color: rgb(var(--border-color));
+}
+.univer-button-default:hover {
+  color: rgb(var(--primary-color));
+  border-color: rgb(var(--primary-color));
+}
+.univer-button-primary {
+  font-weight: 500;
+  color: rgb(var(--color-white));
+  background-color: rgb(var(--primary-color));
+  border-color: rgb(var(--primary-color));
+}
+.univer-button-primary[disabled] {
+  background-color: rgb(var(--bg-color-secondary));
+  border-color: rgb(var(--border-color));
+}
+.univer-button-primary[disabled]:hover {
+  color: rgb(var(--grey-300));
+  background-color: rgb(var(--bg-color-secondary));
+  border-color: rgb(var(--border-color));
+}
+.univer-button-primary:hover {
+  color: rgb(var(--color-white));
+  background-color: rgb(var(--primary-color-hover));
+  border-color: rgb(var(--primary-color-hover));
+}
+.univer-button-text {
+  color: rgb(var(--text-color));
+  background-color: transparent;
+  border-color: transparent;
+}
+.univer-button-text[disabled]:hover {
+  background-color: transparent;
+}
+.univer-button-text:hover {
+  background-color: rgb(var(--bg-color-hover));
+}
+.univer-button-link {
+  color: rgb(var(--primary-color));
+  background-color: transparent;
+  border-color: transparent;
+}
+.univer-button-link[disabled]:hover {
+  background-color: transparent;
+}
+.univer-button-link:hover {
+  background-color: rgb(var(--bg-color-hover));
+}
+.univer-button-small {
+  padding: 6px 8px;
+  font-size: var(--font-size-sm);
+}
+.univer-button-middle {
+  padding: 8px 12px;
+  font-size: var(--font-size-base);
+}
+.univer-button-large {
+  padding: 10px 20px;
+  font-size: var(--font-size-base);
+}
+.univer-button-block {
+  width: 100%;
+}
+
+/* temp_stylePlugin:src/components/cascader-list/index.module.less */
+.univer-cascader-list {
+  overflow-y: auto;
+  display: flex;
+  height: 100%;
+  max-height: 348px;
+  padding: var(--padding-sm);
+  color: rgb(var(--text-color));
+  border: 1px solid rgb(var(--border-color));
+  border-radius: var(--border-radius-base);
+}
+.univer-cascader-list-board {
+  overflow: auto;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.univer-cascader-list-board:not(:last-child) {
+  margin-right: var(--margin-xs);
+  padding-right: var(--padding-sm);
+  border-right: 1px solid rgb(var(--border-color));
+}
+.univer-cascader-list-board:first-child .univer-cascader-list-item-active {
+  color: rgb(var(--primary-color));
+}
+.univer-cascader-list-board:first-child .univer-cascader-list-option {
+  padding: var(--padding-xs) 0;
+}
+.univer-cascader-list-board:first-child .univer-cascader-list-check-mark {
+  display: none;
+}
+.univer-cascader-list-board:not(:first-child) .univer-cascader-list-item-active {
+  background-color: rgb(var(--bg-color-hover));
+}
+.univer-cascader-list-board:not(:first-child) .univer-cascader-list-option {
+  padding: var(--padding-xs) 28px;
+}
+.univer-cascader-list-item {
+  border-radius: var(--border-radius-base);
+}
+.univer-cascader-list-option {
+  cursor: pointer;
+  position: relative;
+  display: block;
+  font-size: var(--font-size-xs);
+}
+.univer-cascader-list-check-mark {
+  position: absolute;
+  top: 50%;
+  left: var(--margin-xs);
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-lg);
+  color: rgb(var(--primary-color));
+}
+.univer-cascader-list-empty {
+  padding-right: 120px;
+  font-size: var(--font-size-xs);
+  color: rgb(var(--text-color-secondary));
+}
+
+/* temp_stylePlugin:src/components/checkbox/index.module.less */
+.univer-checkbox {
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--margin-xs);
+  align-items: center;
+  box-sizing: border-box;
+  font-size: var(--font-size-sm);
+  color: var(--text-color);
+}
+.univer-checkbox:hover .univer-checkbox-target-input:checked + .univer-checkbox-target-inner {
+  background-color: rgb(var(--primary-color-hover));
+}
+.univer-checkbox:hover .univer-checkbox-target-inner {
+  border-color: rgb(var(--primary-color-hover));
+}
+.univer-checkbox-disabled {
+  cursor: not-allowed;
+  color: rgb(var(--grey-300));
+}
+.univer-checkbox-disabled .univer-checkbox-target-input:checked + .univer-checkbox-target-inner {
+  background-color: rgb(var(--grey-300));
+}
+.univer-checkbox-disabled .univer-checkbox-target-inner {
+  border-color: rgb(var(--grey-300));
+}
+.univer-checkbox-disabled:hover .univer-checkbox-target-input:checked + .univer-checkbox-target-inner {
+  background-color: rgb(var(--grey-300));
+}
+.univer-checkbox-disabled:hover .univer-checkbox-target-inner {
+  border-color: rgb(var(--grey-300));
+}
+.univer-checkbox-target {
+  position: relative;
+}
+.univer-checkbox-target-input {
+  position: absolute;
+  opacity: 0;
+}
+.univer-checkbox-target-input:checked + .univer-checkbox-target-inner {
+  background-color: rgb(var(--primary-color));
+}
+.univer-checkbox-target-input:checked + .univer-checkbox-target-inner::after {
+  transform: rotate(45deg) scale(1);
+  opacity: 1;
+  border-color: rgb(var(--bg-color-secondary));
+}
+.univer-checkbox-target-inner {
+  position: relative;
+  overflow: hidden;
+  display: block;
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  border: 1px solid rgb(var(--primary-color));
+  border-radius: var(--border-radius-base);
+  transition: all 0.15s;
+}
+.univer-checkbox-target-inner::after {
+  content: "";
+  position: absolute;
+  top: calc(50% - 5.5px);
+  left: calc(50% - 2.5px);
+  transform-origin: center center;
+  transform: rotate(45deg) scale(0);
+  display: block;
+  box-sizing: border-box;
+  width: calc(14px / 2.6);
+  height: calc(14px / 1.5);
+  opacity: 0;
+  border: 2px solid transparent;
+  border-top: 0;
+  border-left: 0;
+  transition: all 0.15s;
+}
+
+/* temp_stylePlugin:src/components/checkbox-group/index.module.less */
+.univer-checkbox-group {
+  display: flex;
+  gap: var(--margin-sm);
+}
+
+/* temp_stylePlugin:src/components/color-picker/index.module.less */
+.univer-color-picker {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  width: max-content;
+  min-width: 232px;
+  visibility: visible;
+}
+.univer-color-picker-hidden {
+  display: none;
+}
+.univer-color-picker-panel {
+  display: flex;
+  flex-direction: column;
+  width: 232px;
+  background-color: rgb(var(--white-color));
+  border-radius: 8px;
+}
+.univer-color-picker-panel-disabled {
+  cursor: not-allowed;
+}
+.univer-color-picker-select {
+  margin-bottom: var(--margin-xs);
+}
+.univer-color-picker-select .univer-color-picker-palette {
+  overflow: hidden;
+  min-height: 100px;
+  border-radius: 4px;
+}
+.univer-color-picker-select .univer-color-picker-palette > .univer-color-picker-gradient {
+  border-top-left-radius: 5px;
+}
+.univer-color-picker-saturation {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.univer-color-picker-handler {
+  transform: translateY(-1px);
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.06);
+}
+.univer-color-picker-slider {
+  width: 100%;
+}
+.univer-color-picker-slider .univer-color-picker-palette {
+  height: 8px;
+}
+.univer-color-picker-slider .univer-color-picker-gradient {
+  border-radius: 4px;
+}
+.univer-color-picker-color-blocks {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  grid-template-rows: repeat(9, 1fr);
+  gap: var(--margin-xxs);
+  width: 232px;
+  margin-bottom: var(--margin-xs);
+}
+.univer-color-picker-color-block {
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+}
+.univer-color-picker-color-block-inner {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgb(var(--grey-600));
+  border-radius: 4px;
+}
+.univer-color-picker-slider-container {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: var(--margin-sm);
+}
+.univer-color-picker-slider-container .univer-color-picker-slider-group {
+  flex: 1;
+}
+.univer-color-picker-slider-container .univer-color-picker-slider-group-disabled-alpha {
+  display: flex;
+  align-items: center;
+}
+.univer-color-picker-slider-container .univer-color-picker-slider-group-disabled-alpha .univer-color-picker-slider {
+  margin-bottom: 0;
+}
+
+/* temp_stylePlugin:src/components/dialog/index.module.less */
+.univer-dialog {
+  position: relative;
+  width: 640px;
+  margin: 10% auto;
+}
+.univer-dialog-wrap {
+  position: fixed;
+  z-index: 1050;
+  inset: 0;
+  overflow: auto;
+  outline: 0;
+  -webkit-overflow-scrolling: touch;
+}
+.univer-dialog-title {
+  margin: 0;
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+}
+.univer-dialog-content {
+  position: relative;
+  color: rgb(var(--text-color));
+  background-color: rgb(var(--bg-color-secondary));
+  background-clip: padding-box;
+  border: 1px solid rgb(var(--border-color));
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--box-shadow-base);
+}
+.univer-dialog-close {
+  cursor: pointer;
+  position: absolute;
+  top: 24px;
+  right: 28px;
+  padding: 0;
+  font-size: var(--font-size-base);
+  font-weight: 500;
+  line-height: 1;
+  color: rgb(var(--text-color));
+  text-decoration: none;
+  opacity: 0.2;
+  background: transparent;
+  border: 0;
+}
+.univer-dialog-close:hover {
+  text-decoration: none;
+  opacity: 1;
+}
+.univer-dialog-header {
+  box-sizing: border-box;
+  padding: 24px 28px 20px;
+  color: rgb(var(--text-color));
+  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+}
+.univer-dialog-body {
+  padding: 0 28px 20px;
+}
+.univer-dialog-footer {
+  padding: 0 28px 24px;
+  text-align: right;
+  border-radius: 0 0 5px 5px;
+}
+.univer-dialog-zoom-enter,
+.univer-dialog-zoom-appear {
+  opacity: 0;
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+}
+.univer-dialog-zoom-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.univer-dialog-zoom-enter.univer-dialog-zoom-enter-active,
+.univer-dialog-zoom-appear.univer-dialog-zoom-appear-active {
+  animation-name: univer-dialog-zoom-in;
+  animation-play-state: running;
+}
+.univer-dialog-zoom-leave.univer-dialog-zoom-leave-active {
+  animation-name: univer-dialog-zoom-out;
+  animation-play-state: running;
+}
+@keyframes univer-dialog-zoom-in {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes univer-dialog-zoom-out {
+  0% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+}
+.univer-dialog-mask {
+  position: fixed;
+  z-index: 1050;
+  inset: 0;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.univer-dialog-mask-hidden {
+  display: none;
+}
+.univer-dialog-fade-enter,
+.univer-dialog-fade-appear {
+  opacity: 0;
+  animation-duration: 0.3s;
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.univer-dialog-fade-leave {
+  animation-duration: 0.3s;
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.univer-dialog-fade-enter.univer-dialog-fade-enter-active,
+.univer-dialog-fade-appear.univer-dialog-fade-appear-active {
+  animation-name: univer-dialog-fade-in;
+  animation-play-state: running;
+}
+.univer-dialog-fade-leave.univer-dialog-fade-leave-active {
+  animation-name: univer-dialog-fade-out;
+  animation-play-state: running;
+}
+@keyframes univer-dialog-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes univer-dialog-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* temp_stylePlugin:src/components/confirm/index.module.less */
+.univer-confirm-footer {
+  display: flex;
+  gap: var(--margin-sm);
+  justify-content: flex-end;
+}
+
+/* temp_stylePlugin:src/components/dropdown/index.module.less */
+.univer-dropdown {
+  position: absolute;
+  z-index: 1070;
+  top: -9999px;
+  left: -9999px;
+  display: block;
+}
+.univer-dropdown-hidden {
+  display: none;
+}
+.univer-dropdown-slide-up-enter,
+.univer-dropdown-slide-up-appear {
+  transform-origin: 0 0;
+  display: block !important;
+  animation-duration: 0.15s;
+  animation-fill-mode: both;
+  opacity: 0;
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.univer-dropdown-slide-up-leave {
+  transform-origin: 0 0;
+  display: block !important;
+  animation-duration: 0.15s;
+  animation-fill-mode: both;
+  opacity: 1;
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-bottomLeft,
+.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-bottomLeft,
+.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-bottomCenter,
+.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-bottomCenter,
+.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-bottomRight,
+.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-bottomRight {
+  animation-name: univer-dropdown-slide-up-in;
+  animation-play-state: running;
+}
+.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-topLeft,
+.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-topLeft,
+.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-topCenter,
+.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-topCenter,
+.univer-dropdown-slide-up-enter.univer-dropdown-slide-up-enter-active.univer-dropdown-placement-topRight,
+.univer-dropdown-slide-up-appear.univer-dropdown-slide-up-appear-active.univer-dropdown-placement-topRight {
+  animation-name: univer-dropdown-slide-down-in;
+  animation-play-state: running;
+}
+.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-bottomLeft,
+.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-bottomCenter,
+.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-bottomRight {
+  animation-name: univer-dropdown-slide-up-out;
+  animation-play-state: running;
+}
+.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-topLeft,
+.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-topCenter,
+.univer-dropdown-slide-up-leave.univer-dropdown-slide-up-leave-active.univer-dropdown-placement-topRight {
+  animation-name: univer-dropdown-slide-down-out;
+  animation-play-state: running;
+}
+@keyframes univer-dropdown-slide-up-in {
+  0% {
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+@keyframes univer-dropdown-slide-up-out {
+  0% {
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+@keyframes univer-dropdown-slide-down-in {
+  0% {
+    transform-origin: 0% 100%;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0% 100%;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+@keyframes univer-dropdown-slide-down-out {
+  0% {
+    transform-origin: 0% 100%;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0% 100%;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+
+/* temp_stylePlugin:src/components/input/index.module.less */
+.univer-input {
+  box-sizing: border-box;
+  color: rgb(var(--text-color));
+}
+.univer-input::selection {
+  color: rgb(var(--color-white));
+  background-color: rgb(var(--primary-color));
+}
+.univer-input-affix-wrapper {
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid rgb(var(--border-color));
+  border-radius: var(--border-radius-base);
+  transition: all 0.15s;
+}
+.univer-input-affix-wrapper-mini {
+  padding: 2px var(--padding-lg);
+  font-size: var(--font-size-xs);
+}
+.univer-input-affix-wrapper-small {
+  padding: 6px var(--padding-lg);
+  font-size: var(--font-size-xs);
+}
+.univer-input-affix-wrapper-middle {
+  padding: 6px var(--padding-lg);
+  font-size: var(--font-size-sm);
+}
+.univer-input-affix-wrapper-large {
+  padding: 8px var(--padding-lg);
+  font-size: var(--font-size-sm);
+}
+.univer-input-affix-wrapper:hover,
+.univer-input-affix-wrapper:focus-within {
+  border-color: rgb(var(--primary-color));
+}
+.univer-input-affix-wrapper-disabled {
+  cursor: not-allowed;
+  border-color: rgb(var(--border-color));
+}
+.univer-input-affix-wrapper-disabled:hover {
+  border-color: rgb(var(--border-color));
+}
+.univer-input-affix-wrapper input {
+  padding: 0;
+  border: none;
+  outline: none;
+}
+.univer-input-affix-wrapper input[disabled] {
+  cursor: inherit;
+  color: rgb(var(--grey-200));
+  background-color: rgb(var(--bg-color-secondary));
+}
+.univer-input-suffix {
+  position: absolute;
+  top: 0;
+  right: 2px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 var(--padding-sm);
+  background-color: rgb(var(--bg-color-secondary));
+}
+.univer-input-clear-icon {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
+.univer-input-clear-icon-hidden {
+  display: none;
+}
+
+/* temp_stylePlugin:src/components/input-number/index.module.less */
+.univer-input-number {
+  display: inline-block;
+  height: 34px;
+  margin: 0;
+  padding: 0;
+  font-size: 12px;
+  line-height: 34px;
+  vertical-align: middle;
+  background-color: rgb(var(--bg-color-secondary));
+  border: 1px solid rgb(var(--border-color));
+  border-radius: var(--border-radius-base);
+  transition: all 0.3s;
+}
+.univer-input-number-focused,
+.univer-input-number:hover {
+  border-color: rgb(var(--primary-color));
+}
+.univer-input-number-focused .univer-input-number-handler-up,
+.univer-input-number:hover .univer-input-number-handler-up,
+.univer-input-number-focused .univer-input-number-handler-wrap,
+.univer-input-number:hover .univer-input-number-handler-wrap {
+  border-color: rgb(var(--primary-color));
+}
+.univer-input-number-handler {
+  touch-action: none;
+  cursor: pointer;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.univer-input-number-handler-up-inner,
+.univer-input-number-handler-down-inner {
+  user-select: none;
+  color: rgb(var(--text-color));
+}
+.univer-input-number-disabled:hover {
+  cursor: not-allowed;
+  border-color: rgb(var(--border-color));
+}
+.univer-input-number-disabled:hover .univer-input-number-handler-up,
+.univer-input-number-disabled:hover .univer-input-number-handler-wrap {
+  border-color: rgb(var(--border-color));
+}
+.univer-input-number-input-wrap {
+  overflow: hidden;
+  height: 100%;
+}
+.univer-input-number-input {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  line-height: 34px;
+  color: rgb(var(--text-color));
+  text-align: center;
+  border: 0;
+  border-radius: var(--border-radius-base);
+  outline: 0;
+  transition: all 0.15s;
+}
+.univer-input-number-handler-wrap {
+  float: right;
+  display: flex;
+  flex-direction: column;
+  width: 20px;
+  height: 34px;
+  border-left: 1px solid rgb(var(--border-color));
+  transition: all 0.3s;
+}
+.univer-input-number-handler-up {
+  border-bottom: 1px solid rgb(var(--border-color));
+  transition: all 0.15s;
+}
+.univer-input-number-handler-up-inner::after {
+  content: "+";
+}
+.univer-input-number-handler-down {
+  transition: all 0.15s;
+}
+.univer-input-number-handler-down-inner::after {
+  content: "-";
+}
+.univer-input-number-handler-down-disabled,
+.univer-input-number-handler-up-disabled {
+  opacity: 0.3;
+}
+.univer-input-number-handler-down-disabled:hover,
+.univer-input-number-handler-up-disabled:hover {
+  color: #999;
+  border-color: rgb(var(--grey-200));
+}
+.univer-input-number-disabled .univer-input-number-input {
+  cursor: not-allowed;
+}
+.univer-input-number-disabled .univer-input-number-handler {
+  opacity: 0.3;
+}
+.univer-input-number-disabled .univer-input-number-handler:hover {
+  color: #999;
+  border-color: rgb(var(--grey-200));
+}
+
+/* temp_stylePlugin:src/components/menu/index.module.less */
+.univer-menu {
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--padding-base);
+  font-size: var(--font-size-xs);
+  list-style: none;
+  background-color: rgb(var(--bg-color-secondary));
+  border: 1px solid rgb(var(--border-color));
+  border-radius: var(--border-radius-lg);
+  outline: none;
+  box-shadow: var(--box-shadow-base);
+}
+.univer-menu-vertical {
+  display: grid;
+  gap: var(--margin-xs);
+}
+.univer-menu-hidden,
+.univer-menu-submenu-hidden {
+  display: none;
+}
+.univer-menu-item-group:not(:last-child) {
+  padding-bottom: var(--padding-sm);
+  border-bottom: 1px solid rgb(var(--border-color));
+}
+.univer-menu-item-group-list {
+  display: grid;
+  gap: var(--margin-xxs);
+  margin: 0;
+  padding: 0;
+}
+.univer-menu-item-group-title {
+  color: rgb(var(--text-color));
+}
+.univer-menu-item-active,
+.univer-menu-submenu-active {
+  background-color: rgb(var(--bg-color-hover));
+}
+.univer-menu-item-selected {
+  transform: translateZ(0);
+  background-color: rgb(var(--bg-color-hover));
+}
+.univer-menu-submenu-selected {
+  background-color: rgb(var(--bg-color-hover));
+}
+.univer-menu > li.univer-menu-submenu {
+  padding: 0;
+}
+.univer-menu-horizontal.univer-menu-sub,
+.univer-menu-vertical.univer-menu-sub,
+.univer-menu-vertical-left.univer-menu-sub,
+.univer-menu-vertical-right.univer-menu-sub {
+  min-width: 160px;
+  margin-top: 0;
+}
+.univer-menu-item {
+  display: flex;
+  gap: var(--margin-xs);
+  align-items: center;
+}
+.univer-menu-item,
+.univer-menu-submenu {
+  cursor: pointer;
+  position: relative;
+  box-sizing: border-box;
+  min-height: 28px;
+  margin: 0;
+  padding: var(--padding-xs);
+  white-space: nowrap;
+  list-style: none;
+  border-radius: var(--border-radius-base);
+}
+.univer-menu-item.univer-menu-item-disabled,
+.univer-menu-submenu.univer-menu-item-disabled,
+.univer-menu-item.univer-menu-submenu-disabled,
+.univer-menu-submenu.univer-menu-submenu-disabled {
+  color: rgb(var(--grey-200)) !important;
+}
+.univer-menu-submenu-popup {
+  position: absolute;
+}
+.univer-menu-submenu-popup .univer-submenu-title-wrapper {
+  padding-right: 20px;
+}
+.univer-menu-submenu-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+}
+.univer-menu .univer-menu-submenu-title-more-icon,
+.univer-menu .univer-menu-item-more-icon {
+  margin-left: var(--margin-xs);
+  font-size: var(--font-size-sm);
+  color: rgb(var(--text-color));
+}
+.univer-menu-horizontal {
+  overflow: hidden;
+  white-space: nowrap;
+  border: none;
+  border-bottom: 1px solid rgb(var(--border-color));
+  box-shadow: none;
+}
+.univer-menu-horizontal > .univer-menu-item,
+.univer-menu-horizontal > .univer-menu-submenu > .univer-menu-submenu-title {
+  padding: 15px 20px;
+}
+.univer-menu-horizontal > .univer-menu-submenu,
+.univer-menu-horizontal > .univer-menu-item {
+  display: inline-block;
+  vertical-align: bottom;
+  border-bottom: 2px solid transparent;
+}
+.univer-menu-vertical > .univer-menu-item,
+.univer-menu-vertical-left > .univer-menu-item,
+.univer-menu-vertical-right > .univer-menu-item,
+.univer-menu-inline > .univer-menu-item,
+.univer-menu-vertical > .univer-menu-submenu > .univer-menu-submenu-title,
+.univer-menu-vertical-left > .univer-menu-submenu > .univer-menu-submenu-title,
+.univer-menu-vertical-right > .univer-menu-submenu > .univer-menu-submenu-title,
+.univer-menu-inline > .univer-menu-submenu > .univer-menu-submenu-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 28px;
+  padding: var(--padding-xs);
+}
+.univer-menu-vertical .univer-menu-submenu-arrow,
+.univer-menu-vertical-left .univer-menu-submenu-arrow,
+.univer-menu-vertical-right .univer-menu-submenu-arrow,
+.univer-menu-inline .univer-menu-submenu-arrow {
+  position: absolute;
+  right: 16px;
+  display: inline-block;
+  font-size: inherit;
+  line-height: 1.5em;
+  text-align: center;
+  text-transform: none;
+  text-rendering: auto;
+  vertical-align: baseline;
+}
+.univer-menu-sub.univer-menu-inline {
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+.univer-menu-sub.univer-menu-inline > .univer-menu-item,
+.univer-menu-sub.univer-menu-inline > .univer-menu-submenu > .univer-menu-submenu-title {
+  padding-top: 8px;
+  padding-right: 0;
+  padding-bottom: 8px;
+}
+.univer-menu-open-slide-up-enter,
+.univer-menu-open-slide-up-appear {
+  transform-origin: 0 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  opacity: 0;
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.univer-menu-open-slide-up-leave {
+  transform-origin: 0 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  opacity: 1;
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.univer-menu-open-slide-up-enter.univer-menu-open-slide-up-enter-active,
+.univer-menu-open-slide-up-appear.univer-menu-open-slide-up-appear-active {
+  animation-name: univer-menu-open-slide-up-in;
+  animation-play-state: running;
+}
+.univer-menu-open-slide-up-leave.univer-menu-open-slide-up-leave-active {
+  animation-name: univer-menu-open-slide-up-out;
+  animation-play-state: running;
+}
+@keyframes univer-menu-open-slide-up-in {
+  0% {
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+@keyframes univer-menu-open-slide-up-out {
+  0% {
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+.univer-menu-open-zoom-enter,
+.univer-menu-open-zoom-appear {
+  opacity: 0;
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+  transform-origin: 0 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+}
+.univer-menu-open-zoom-leave {
+  transform-origin: 0 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.univer-menu-open-zoom-enter.univer-menu-open-zoom-enter-active,
+.univer-menu-open-zoom-appear.univer-menu-open-zoom-appear-active {
+  animation-name: univer-menu-open-zoom-in;
+  animation-play-state: running;
+}
+.univer-menu-open-zoom-leave.univer-menu-open-zoom-leave-active {
+  animation-name: univer-menu-open-zoom-out;
+  animation-play-state: running;
+}
+@keyframes univer-menu-open-zoom-in {
+  0% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1, 1);
+    opacity: 1;
+  }
+}
+@keyframes univer-menu-open-zoom-out {
+  0% {
+    transform: scale(1, 1);
+  }
+  100% {
+    transform: scale(0, 0);
+    opacity: 0;
+  }
+}
+
+/* temp_stylePlugin:src/components/message/index.module.less */
+.univer-message {
+  position: fixed;
+  z-index: 1000;
+  top: var(--margin-sm);
+  left: 50%;
+  transform: translateX(-50%);
+  display: grid;
+  gap: var(--margin-sm);
+}
+.univer-message-item {
+  display: flex;
+  justify-content: center;
+  opacity: 0;
+  transition: all 0.2s cubic-bezier(0.1, 0.7, 1, 0.1);
+}
+.univer-message-item.univer-enter-active {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+.univer-message-item.univer-enter-done {
+  transform: translateY(0);
+  opacity: 1;
+}
+.univer-message-item.univer-exit {
+  transform: translateY(-20px);
+  margin-bottom: -40px;
+  opacity: 0;
+}
+.univer-message-item.univer-exit-active {
+  transform: translateY(-20px);
+  opacity: 0;
+}
+.univer-message-icon {
+  display: inline-flex;
+  align-items: center;
+}
+.univer-message-icon-success {
+  color: rgb(var(--success-color));
+}
+.univer-message-icon-warning {
+  color: rgb(var(--warning-color));
+}
+.univer-message-icon-error {
+  color: rgb(var(--error-color));
+}
+.univer-message-content {
+  display: inline-flex;
+  gap: var(--margin-xs);
+  align-items: center;
+  padding: var(--padding-base);
+  font-size: var(--font-size-base);
+  background-color: rgb(var(--color-white));
+  border-radius: var(--border-radius-base);
+  box-shadow: var(--box-shadow-lg);
+}
+
+/* temp_stylePlugin:src/components/popup/index.module.less */
+.univer-popup {
+  position: fixed;
+  z-index: 1070;
+  top: -9999px;
+  left: -9999px;
+}
+.univer-popup-enter {
+  transform-origin: 0 0;
+  animation-duration: 0.15s;
+  animation-fill-mode: both;
+  opacity: 0;
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.univer-popup-enter-active {
+  animation-name: univer-popup-slide-up-in;
+  animation-play-state: running;
+}
+.univer-popup-exit {
+  transform-origin: 0 0;
+  animation-duration: 0.15s;
+  animation-fill-mode: both;
+  opacity: 1;
+  animation-name: univer-popup-slide-up-out;
+  animation-play-state: running;
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.univer-popup-exit-active {
+  display: none;
+}
+@keyframes univer-popup-slide-up-in {
+  0% {
+    transform-origin: 0 0;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+@keyframes univer-popup-slide-up-out {
+  0% {
+    transform-origin: 0 0;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0 0;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+
+/* temp_stylePlugin:src/components/radio/index.module.less */
+.univer-radio {
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--margin-xs);
+  align-items: center;
+  box-sizing: border-box;
+  font-size: var(--font-size-sm);
+  color: var(--text-color);
+}
+.univer-radio:hover .univer-radio-target-input:checked + .univer-radio-target-inner::after {
+  background-color: rgb(var(--primary-color-hover));
+}
+.univer-radio:hover .univer-radio-target-inner {
+  border-color: rgb(var(--primary-color-hover));
+}
+.univer-radio-disabled {
+  cursor: not-allowed;
+  color: rgb(var(--grey-300));
+}
+.univer-radio-disabled .univer-radio-target-input:checked + .univer-radio-target-inner::after {
+  background-color: rgb(var(--grey-300));
+}
+.univer-radio-disabled .univer-radio-target-inner {
+  border-color: rgb(var(--grey-300));
+}
+.univer-radio-disabled:hover .univer-radio-target-input:checked + .univer-radio-target-inner::after {
+  background-color: rgb(var(--grey-300));
+}
+.univer-radio-disabled:hover .univer-radio-target-inner {
+  border-color: rgb(var(--grey-300));
+}
+.univer-radio-target {
+  position: relative;
+}
+.univer-radio-target-input {
+  position: absolute;
+  opacity: 0;
+}
+.univer-radio-target-input:checked + .univer-radio-target-inner::after {
+  transform: scale(1);
+  box-sizing: border-box;
+  opacity: 1;
+  background-color: rgb(var(--primary-color));
+}
+.univer-radio-target-inner {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  border: 1px solid rgb(var(--primary-color));
+  border-radius: 50%;
+  transition: all 0.15s;
+}
+.univer-radio-target-inner::after {
+  content: "";
+  transform-origin: center center;
+  transform: scale(0);
+  display: block;
+  box-sizing: border-box;
+  width: 8px;
+  height: 8px;
+  opacity: 0;
+  background-color: rgb(var(--bg-color-secondary));
+  border-radius: 50%;
+  transition: all 0.15s;
+}
+
+/* temp_stylePlugin:src/components/radio-group/index.module.less */
+.univer-radio-group {
+  display: flex;
+  gap: var(--margin-sm);
+}
+
+/* temp_stylePlugin:src/components/scrollbar/index.module.less */
+.univer-scrollbar-container {
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+}
+.univer-scrollbar-bar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+}
+.univer-scrollbar-bar:hover .univer-scrollbar-bar-thumb:not(:active) {
+  background-color: rgb(var(--scrollbar-color-hover));
+}
+.univer-scrollbar-bar-thumb {
+  position: absolute;
+  width: 100%;
+  background-color: rgb(var(--scrollbar-color));
+  border-radius: var(--border-radius-lg);
+}
+.univer-scrollbar-bar-thumb:active {
+  background-color: rgb(var(--scrollbar-color-active));
+}
+.univer-scrollbar-content {
+  scrollbar-width: none;
+  overflow: auto;
+  box-sizing: border-box;
+  height: 100%;
+  padding-right: 8px;
+}
+.univer-scrollbar-content::-webkit-scrollbar {
+  display: none;
+}
+
+/* temp_stylePlugin:src/components/select/index.module.less */
+.univer-select {
+  position: relative;
+  display: inline-block;
+}
+.univer-select-disabled,
+.univer-select-disabled input {
+  cursor: not-allowed;
+}
+.univer-select-disabled .univer-select-selector {
+  opacity: 0.3;
+}
+.univer-select-show-arrow.univer-select-loading .univer-select-arrow-icon::after {
+  transform: none;
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  margin-top: 4px;
+  border: 2px solid #999;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-radius: 100%;
+  animation: univer-select-loading-icon 0.5s infinite;
+}
+.univer-select .univer-select-selection-placeholder {
+  pointer-events: none;
+  opacity: 0.4;
+}
+.univer-select .univer-select-selection-search-input {
+  font-size: var(--font-size-sm);
+  color: rgb(var(--text-color));
+  appearance: none;
+}
+.univer-select .univer-select-selection-search-input::-webkit-search-cancel-button {
+  display: none;
+  appearance: none;
+}
+.univer-select-single .univer-select-selector {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  padding: var(--padding-sm) var(--padding-lg);
+  transition: all 0.15s;
+}
+.univer-select-single .univer-select-selector .univer-select-selection-search {
+  width: 100%;
+  line-height: 0;
+}
+.univer-select-single .univer-select-selector .univer-select-selection-search-input {
+  width: 100%;
+}
+.univer-select-single .univer-select-selector .univer-select-selection-item,
+.univer-select-single .univer-select-selector .univer-select-selection-placeholder {
+  pointer-events: none;
+  position: absolute;
+  top: 6px;
+  left: 16px;
+  font-size: var(--font-size-sm);
+}
+.univer-select-single:not(.univer-select-customize-input) .univer-select-selector {
+  border: 1px solid rgb(var(--border-color));
+  border-radius: var(--border-radius-base);
+}
+.univer-select-single:not(.univer-select-customize-input) .univer-select-selector .univer-select-selection-search-input {
+  width: 100%;
+  padding: 0;
+  border: none;
+  outline: none;
+}
+.univer-select-multiple .univer-select-selector {
+  display: flex;
+  flex-wrap: wrap;
+  border: 1px solid rgb(var(--border-color));
+  border-radius: var(--border-radius-base);
+}
+.univer-select-multiple .univer-select-selector .univer-select-selection-item {
+  flex: none;
+  margin-right: 2px;
+  padding: 0 8px;
+  background: #bbb;
+  border-radius: 4px;
+}
+.univer-select-multiple .univer-select-selector .univer-select-selection-item-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.univer-select-multiple .univer-select-selector .univer-select-selection-overflow {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+.univer-select-multiple .univer-select-selector .univer-select-selection-overflow-item {
+  flex: none;
+  max-width: 100%;
+}
+.univer-select-multiple .univer-select-selector .univer-select-selection-search {
+  position: relative;
+  max-width: 100%;
+}
+.univer-select-multiple .univer-select-selector .univer-select-selection-search-input,
+.univer-select-multiple .univer-select-selector .univer-select-selection-search-mirror {
+  box-sizing: border-box;
+  padding: var(--padding-xs) var(--padding-sm);
+}
+.univer-select-multiple .univer-select-selector .univer-select-selection-search-mirror {
+  position: none;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  white-space: nowrap;
+  visibility: hidden;
+}
+.univer-select-multiple .univer-select-selector .univer-select-selection-search-input {
+  width: 100%;
+  padding: 0;
+  border: none;
+  outline: none;
+}
+.univer-select-allow-clear.univer-select-multiple .univer-select-selector {
+  padding-right: 20px;
+}
+.univer-select-allow-clear .univer-select-clear {
+  position: absolute;
+  top: 0;
+  right: 20px;
+}
+.univer-select-show-arrow.univer-select-multiple .univer-select-selector {
+  padding-right: 20px;
+}
+.univer-select-show-arrow .univer-select-arrow {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  right: var(--margin-sm);
+  display: flex;
+  align-items: center;
+  height: 100%;
+  font-size: var(--font-size-xxs);
+  color: rgb(var(--text-color-secondary));
+}
+.univer-select-show-arrow .univer-select-arrow-icon::after {
+  content: "";
+  transform: translateY(5px);
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-top-color: #999;
+}
+.univer-select-focused .univer-select-selector,
+.univer-select:hover .univer-select-selector {
+  border-color: rgb(var(--primary-color)) !important;
+}
+.univer-select-dropdown {
+  position: absolute;
+  min-height: 100px;
+  background: rgb(var(--bg-color-secondary));
+  border: 1px solid rgb(var(--border-color));
+  border-radius: var(--border-radius-base);
+  box-shadow: var(--box-shadow-base);
+}
+.univer-select-dropdown-hidden {
+  display: none;
+}
+.univer-select-item {
+  cursor: pointer;
+  padding: var(--padding-sm) var(--padding-base);
+  font-size: var(--font-size-sm);
+}
+.univer-select-item-group {
+  padding: 0;
+}
+.univer-select-item-group:not(:first-child) {
+  border-top: 1px solid rgb(var(--border-color));
+}
+.univer-select-item-option {
+  position: relative;
+  transition: all 0.15s;
+}
+.univer-select-item-option .univer-select-item-option-state {
+  pointer-events: none;
+  position: absolute;
+  top: 4px;
+  right: 0;
+}
+.univer-select-item-option-active {
+  background: #ddd;
+}
+.univer-select-item-option-disabled {
+  color: #999;
+}
+.univer-select-item-empty {
+  color: #999;
+  text-align: center;
+}
+.univer-select-selection__choice-zoom {
+  transition: all 0.3s;
+}
+.univer-select-selection__choice-zoom-appear {
+  transform: scale(0.5);
+  opacity: 0;
+}
+.univer-select-selection__choice-zoom-appear.univer-select-selection__choice-zoom-appear-active {
+  transform: scale(1);
+  opacity: 1;
+}
+.univer-select-selection__choice-zoom-leave {
+  transform: scale(1);
+  opacity: 1;
+}
+.univer-select-selection__choice-zoom-leave.univer-select-selection__choice-zoom-leave-active {
+  transform: scale(0.5);
+  opacity: 0;
+}
+.univer-select-dropdown-slide-up-enter,
+.univer-select-dropdown-slide-up-appear {
+  transform-origin: 0 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  opacity: 0;
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.univer-select-dropdown-slide-up-leave {
+  transform-origin: 0 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  opacity: 1;
+  animation-play-state: paused;
+  animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+}
+.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-bottomLeft,
+.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-bottomLeft,
+.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-bottomRight,
+.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-bottomRight {
+  animation-name: univer-select-dropdown-slide-up-in;
+  animation-play-state: running;
+}
+.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-bottomLeft,
+.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-bottomRight {
+  animation-name: univer-select-dropdown-slide-up-out;
+  animation-play-state: running;
+}
+.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-topLeft,
+.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-topLeft,
+.univer-select-dropdown-slide-up-enter.univer-select-dropdown-slide-up-enter-active.univer-select-dropdown-placement-topRight,
+.univer-select-dropdown-slide-up-appear.univer-select-dropdown-slide-up-appear-active.univer-select-dropdown-placement-topRight {
+  animation-name: univer-select-dropdown-slide-down-in;
+  animation-play-state: running;
+}
+.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-topLeft,
+.univer-select-dropdown-slide-up-leave.univer-select-dropdown-slide-up-leave-active.univer-select-dropdown-placement-topRight {
+  animation-name: univer-select-dropdown-slide-down-out;
+  animation-play-state: running;
+}
+@keyframes univer-select-dropdown-slide-up-in {
+  0% {
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+@keyframes univer-select-dropdown-slide-up-out {
+  0% {
+    transform-origin: 0% 0%;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 0% 0%;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+@keyframes univer-select-dropdown-slide-down-in {
+  0% {
+    transform-origin: 100% 100%;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+  100% {
+    transform-origin: 100% 100%;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+@keyframes univer-select-dropdown-slide-down-out {
+  0% {
+    transform-origin: 100% 100%;
+    transform: scaleY(1);
+    opacity: 1;
+  }
+  100% {
+    transform-origin: 100% 100%;
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+@keyframes univer-select-loading-icon {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* temp_stylePlugin:src/components/select-list/index.module.less */
+.univer-select-list {
+  overflow-y: auto;
+  display: grid;
+  gap: var(--margin-xs);
+  max-height: 348px;
+  margin: 0;
+  padding: var(--padding-lg) var(--padding-base);
+  list-style: none;
+  border: 1px solid rgb(var(--border-color));
+  border-radius: var(--border-radius-base);
+}
+.univer-select-list-item {
+  font-size: var(--font-size-sm);
+}
+.univer-select-list-item > a {
+  cursor: pointer;
+  position: relative;
+  display: block;
+  padding: var(--padding-xs) 28px;
+  border-radius: var(--border-radius-base);
+  transition: all 0.15s;
+}
+.univer-select-list-item > a:hover {
+  background-color: rgb(var(--bg-color-hover));
+}
+.univer-select-list-item-icon {
+  position: absolute;
+  top: 50%;
+  left: var(--margin-xxs);
+  transform: translateY(-50%);
+  display: inline-flex;
+  font-size: var(--font-size-lg);
+  color: rgb(var(--success-color));
+}
+.univer-select-list-item-select > a {
+  background-color: rgb(var(--bg-color));
+}
+
+/* temp_stylePlugin:src/components/tooltip/index.module.less */
+.univer-tooltip {
+  position: absolute;
+  z-index: 10;
+  display: block;
+  font-size: var(--font-size-base);
+  visibility: visible;
+}
+.univer-tooltip-hidden {
+  display: none;
+}
+.univer-tooltip-placement-top {
+  padding: 5px 0;
+}
+.univer-tooltip-placement-right {
+  padding: 0 5px;
+}
+.univer-tooltip-placement-bottom {
+  padding: 5px;
+}
+.univer-tooltip-placement-left {
+  padding: 0 5px;
+}
+.univer-tooltip-placement-top .univer-tooltip-arrow,
+.univer-tooltip-placement-topLeft .univer-tooltip-arrow,
+.univer-tooltip-placement-topRight .univer-tooltip-arrow {
+  bottom: 0;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  border-top-color: rgb(var(--color-black));
+}
+.univer-tooltip-placement-top .univer-tooltip-arrow {
+  left: 50%;
+}
+.univer-tooltip-placement-right .univer-tooltip-arrow {
+  left: 0;
+  margin-top: -5px;
+  border-width: 5px 5px 5px 0;
+  border-right-color: rgb(var(--color-black));
+}
+.univer-tooltip-placement-right .univer-tooltip-arrow {
+  top: 50%;
+}
+.univer-tooltip-placement-left .univer-tooltip-arrow {
+  right: 0;
+  margin-top: -5px;
+  border-width: 5px 0 5px 5px;
+  border-left-color: rgb(var(--color-black));
+}
+.univer-tooltip-placement-left .univer-tooltip-arrow {
+  top: 50%;
+}
+.univer-tooltip-placement-bottom .univer-tooltip-arrow {
+  top: 0;
+  margin-left: -5px;
+  border-width: 0 5px 5px;
+  border-bottom-color: rgb(var(--color-black));
+}
+.univer-tooltip-placement-bottom .univer-tooltip-arrow {
+  left: 50%;
+}
+.univer-tooltip-inner {
+  padding: var(--padding-xs) var(--padding-lg);
+  color: rgb(var(--color-white));
+  text-align: left;
+  text-decoration: none;
+  background-color: rgb(var(--color-black));
+  border-radius: var(--border-radius-base);
+}
+.univer-tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+/* temp_stylePlugin:src/components/slider/index.module.less */
+.univer-slider {
+  display: flex;
+  gap: var(--margin-xxs);
+  align-items: center;
+}
+.univer-slider-rail {
+  position: relative;
+  width: 116px;
+  height: 2px;
+  padding: 0 6px;
+  background-color: rgb(var(--text-color-secondary));
+  border-radius: 15px;
+}
+.univer-slider-inner-rail {
+  position: relative;
+  height: 2px;
+}
+.univer-slider-handle {
+  cursor: pointer;
+  position: absolute;
+  top: calc(50% - 12px / 2);
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background-color: rgb(var(--color-white));
+  border-radius: 50%;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
+  transition: background 0.2s;
+}
+.univer-slider-handle:hover {
+  background-color: rgb(var(--border-color));
+  box-shadow: none;
+}
+.univer-slider-reset-point {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  width: 4px;
+  height: 2px;
+  background-color: rgb(var(--color-white));
+  border-radius: 50%;
+}
+.univer-slider-value {
+  cursor: pointer;
+  width: 55px;
+  height: 28px;
+  font-size: var(--font-size-xs);
+  line-height: 2;
+  color: rgb(var(--text-color-secondary));
+  text-align: center;
+  border-radius: var(--border-radius-base);
+  transition: all 0.2s;
+}
+.univer-slider-value:hover {
+  background-color: rgb(var(--border-color));
+}
+.univer-slider-value.univer-dropdown-open {
+  background-color: rgb(var(--border-color));
+}
+.univer-slider-shortcuts {
+  transform: translateX(-27.5px);
+  display: grid;
+  gap: var(--margin-xxs);
+  align-items: center;
+  box-sizing: border-box;
+  width: 128px;
+  padding: var(--padding-sm);
+  font-size: var(--font-size-xs);
+  background-color: rgb(var(--color-white));
+  border: 1px solid rgb(var(--border-color));
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--box-shadow-lg);
+}
+.univer-slider-shortcut {
+  cursor: pointer;
+  position: relative;
+  box-sizing: border-box;
+  padding: var(--padding-xs) 0 var(--padding-xs) 36px;
+  color: rgb(var(--text-color));
+  border-radius: var(--border-radius-base);
+  transition: background 0.2s;
+}
+.univer-slider-shortcut:hover {
+  background-color: rgb(var(--bg-color-hover));
+}
+.univer-slider-shortcut-icon {
+  position: absolute;
+  top: 50%;
+  left: var(--padding-xs);
+  transform: translateY(-50%);
+}
+.univer-slider-shortcut-active {
+  background-color: rgb(var(--bg-color-hover));
+}
+
+/* temp_stylePlugin:src/themes/default.module.less */
+
+/* temp_stylePlugin:src/themes/green.module.less */
+
+/* temp_stylePlugin:src/themes/theme-root.module.less */
+.univer-theme {
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    "PingFang SC",
+    "Hiragino Sans GB",
+    "noto sans",
+    "Microsoft YaHei",
+    "Helvetica Neue",
+    Helvetica,
+    Arial,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+}