@univerjs/design 0.2.6 → 0.2.7

package/lib/es/index.js

@@ -650,7 +650,7 @@ const checkbox = "univer-checkbox", checkboxTargetInput = "univer-checkbox-targe
   checkboxTarget
 };
 function Checkbox(props) {
-  const { children, className, style: style2, checked = !1, indeterminate = !1, value, disabled = !1, onChange } = props, inputRef = useRef(null);
+  const { children, className, style: style2, checked = !1, indeterminate = !1, value, disabled = !1, onChange, contentClassName } = props, inputRef = useRef(null);
   function handleChange(e2) {
     var _a3, _b;
     if (e2.stopPropagation(), !(!onChange || disabled))
@@ -676,7 +676,7 @@ function Checkbox(props) {
       disabled,
       onChange: handleChange
     }
-  ), /* @__PURE__ */ React__default.createElement("span", { className: styles$q.checkboxTargetInner })), /* @__PURE__ */ React__default.createElement("span", null, children));
+  ), /* @__PURE__ */ React__default.createElement("span", { className: styles$q.checkboxTargetInner })), /* @__PURE__ */ React__default.createElement("span", { className: contentClassName }, children));
 }
 __name(Checkbox, "Checkbox");
 const checkboxGroup = "univer-checkbox-group", checkboxGroupDirectionVertical = "univer-checkbox-group-direction-vertical", styles$p = {
@@ -910,6 +910,7 @@ function _objectWithoutProperties$1(e2, t2) {
   return i;
 }
 __name(_objectWithoutProperties$1, "_objectWithoutProperties$1");
+const round = Math.round;
 function splitColorStr(str, parseNum) {
   const match2 = str.replace(/^[^(]*\((.*)/, "$1").replace(/\).*/, "").match(/\d*\.?\d+%?/g) || [], numList = match2.map((item) => parseFloat(item));
   for (let i = 0; i < 3; i += 1)
@@ -917,67 +918,128 @@ function splitColorStr(str, parseNum) {
   return match2[3] ? numList[3] = match2[3].includes("%") ? numList[3] / 100 : numList[3] : numList[3] = 1, numList;
 }
 __name(splitColorStr, "splitColorStr");
-function inRange(val, max = 255, min = 0) {
-  return typeof val == "number" && val >= min && val <= max;
+const parseHSVorHSL = /* @__PURE__ */ __name((num, _, index2) => index2 === 0 ? num : num / 100, "parseHSVorHSL");
+function limitRange(value, max) {
+  const mergedMax = max || 255;
+  return value > mergedMax ? mergedMax : value < 0 ? 0 : value;
 }
-__name(inRange, "inRange");
-const parseHSVorHSL = /* @__PURE__ */ __name((num, _, index2) => index2 === 0 ? num : num / 100, "parseHSVorHSL"), _FastColor = class _FastColor {
+__name(limitRange, "limitRange");
+const _FastColor = class _FastColor {
   constructor(input2) {
-    if (_defineProperty$b(this, "r", void 0), _defineProperty$b(this, "g", void 0), _defineProperty$b(this, "b", void 0), _defineProperty$b(this, "a", void 0), _defineProperty$b(this, "_h", void 0), _defineProperty$b(this, "_s", void 0), _defineProperty$b(this, "_l", void 0), _defineProperty$b(this, "_v", void 0), _defineProperty$b(this, "_max", void 0), _defineProperty$b(this, "_min", void 0), _defineProperty$b(this, "_brightness", void 0), !input2)
-      this.r = 0, this.g = 0, this.b = 0, this.a = 1;
-    else if (typeof input2 == "string") {
+    /**
+     * All FastColor objects are valid. So isValid is always true. This property is kept to be compatible with TinyColor.
+     */
+    __publicField(this, "isValid");
+    /**
+     * Red, R in RGB
+     */
+    __publicField(this, "r", 0);
+    /**
+     * Green, G in RGB
+     */
+    __publicField(this, "g", 0);
+    /**
+     * Blue, B in RGB
+     */
+    __publicField(this, "b", 0);
+    /**
+     * Alpha/Opacity, A in RGBA/HSLA
+     */
+    __publicField(this, "a", 1);
+    // HSV privates
+    __publicField(this, "_h");
+    __publicField(this, "_s");
+    __publicField(this, "_l");
+    __publicField(this, "_v");
+    // intermediate variables to calculate HSL/HSV
+    __publicField(this, "_max");
+    __publicField(this, "_min");
+    __publicField(this, "_brightness");
+    function matchFormat(str) {
+      return str[0] in input2 && str[1] in input2 && str[2] in input2;
+    }
+    if (__name(matchFormat, "matchFormat"), input2) if (typeof input2 == "string") {
       let matchPrefix = function(prefix) {
         return trimStr.startsWith(prefix);
       };
       __name(matchPrefix, "matchPrefix");
       const trimStr = input2.trim();
       /^#?[A-F\d]{3,8}$/i.test(trimStr) ? this.fromHexString(trimStr) : matchPrefix("rgb") ? this.fromRgbString(trimStr) : matchPrefix("hsl") ? this.fromHslString(trimStr) : (matchPrefix("hsv") || matchPrefix("hsb")) && this.fromHsvString(trimStr);
-    } else if ("r" in input2 && "g" in input2 && "b" in input2)
-      this.r = input2.r, this.g = input2.g, this.b = input2.b, this.a = typeof input2.a == "number" ? input2.a : 1;
-    else if ("l" in input2 && "h" in input2 && "s" in input2)
+    } else if (input2 instanceof _FastColor)
+      this.r = input2.r, this.g = input2.g, this.b = input2.b, this.a = input2.a, this._h = input2._h, this._s = input2._s, this._l = input2._l, this._v = input2._v;
+    else if (matchFormat("rgb"))
+      this.r = limitRange(input2.r), this.g = limitRange(input2.g), this.b = limitRange(input2.b), this.a = typeof input2.a == "number" ? limitRange(input2.a, 1) : 1;
+    else if (matchFormat("hsl"))
       this.fromHsl(input2);
-    else if ("v" in input2 && "h" in input2 && "s" in input2)
+    else if (matchFormat("hsv"))
       this.fromHsv(input2);
     else
       throw new Error("@ant-design/fast-color: unsupported input " + JSON.stringify(input2));
   }
-  /**
-   * Hue, H in HSL/HSV
-   */
-  get h() {
-    return this.getHue();
+  // ======================= Setter =======================
+  setR(value) {
+    return this._sc("r", value);
   }
-  /**
-   * Saturation, S in HSL/HSV
-   */
-  get s() {
-    return this.getSaturation();
+  setG(value) {
+    return this._sc("g", value);
   }
-  /**
-   * Lightness, L in HSL
-   */
-  get l() {
-    return this.getLightness();
+  setB(value) {
+    return this._sc("b", value);
+  }
+  setA(value) {
+    return this._sc("a", value, 1);
   }
+  setHue(value) {
+    const hsv = this.toHsv();
+    return hsv.h = value, this._c(hsv);
+  }
+  // ======================= Getter =======================
   /**
-   * Value, V in HSV
+   * Returns the perceived luminance of a color, from 0-1.
+   * @see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
    */
-  get v() {
-    return this.getValue();
+  getLuminance() {
+    function adjustGamma(raw) {
+      const val = raw / 255;
+      return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+    }
+    __name(adjustGamma, "adjustGamma");
+    const R = adjustGamma(this.r), G = adjustGamma(this.g), B = adjustGamma(this.b);
+    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
   }
-  get isValid() {
-    return inRange(this.r) && inRange(this.g) && inRange(this.b) && inRange(this.a, 1);
+  getHue() {
+    if (typeof this._h > "u") {
+      const delta = this.getMax() - this.getMin();
+      delta === 0 ? this._h = 0 : this._h = round(60 * (this.r === this.getMax() ? (this.g - this.b) / delta + (this.g < this.b ? 6 : 0) : this.g === this.getMax() ? (this.b - this.r) / delta + 2 : (this.r - this.g) / delta + 4));
+    }
+    return this._h;
   }
-  clone() {
-    return new _FastColor(this);
+  getSaturation() {
+    if (typeof this._s > "u") {
+      const delta = this.getMax() - this.getMin();
+      delta === 0 ? this._s = 0 : this._s = delta / this.getMax();
+    }
+    return this._s;
   }
-  equals(other) {
-    return this.r === other.r && this.g === other.g && this.b === other.b && this.a === other.a;
+  getLightness() {
+    return typeof this._l > "u" && (this._l = (this.getMax() + this.getMin()) / 510), this._l;
+  }
+  getValue() {
+    return typeof this._v > "u" && (this._v = this.getMax() / 255), this._v;
+  }
+  /**
+   * Returns the perceived brightness of the color, from 0-255.
+   * Note: this is not the b of HSB
+   * @see http://www.w3.org/TR/AERT#color-contrast
+   */
+  getBrightness() {
+    return typeof this._brightness > "u" && (this._brightness = (this.r * 299 + this.g * 587 + this.b * 114) / 1e3), this._brightness;
   }
+  // ======================== Func ========================
   darken(amount = 10) {
     const h2 = this.getHue(), s = this.getSaturation();
     let l2 = this.getLightness() - amount / 100;
-    return l2 < 0 && (l2 = 0), new _FastColor({
+    return l2 < 0 && (l2 = 0), this._c({
       h: h2,
       s,
       l: l2,
@@ -987,13 +1049,26 @@ const parseHSVorHSL = /* @__PURE__ */ __name((num, _, index2) => index2 === 0 ?
   lighten(amount = 10) {
     const h2 = this.getHue(), s = this.getSaturation();
     let l2 = this.getLightness() + amount / 100;
-    return l2 > 1 && (l2 = 1), new _FastColor({
+    return l2 > 1 && (l2 = 1), this._c({
       h: h2,
       s,
       l: l2,
       a: this.a
     });
   }
+  /**
+   * Mix the current color a given amount with another color, from 0 to 100.
+   * 0 means no mixing (return current color).
+   */
+  mix(input2, amount = 50) {
+    const color = this._c(input2), p2 = amount / 100, calc = /* @__PURE__ */ __name((key) => (color[key] - this[key]) * p2 + this[key], "calc"), rgba = {
+      r: round(calc("r")),
+      g: round(calc("g")),
+      b: round(calc("b")),
+      a: round(calc("a") * 100) / 100
+    };
+    return this._c(rgba);
+  }
   /**
    * Mix the color with pure white, from 0 to 100.
    * Providing 0 will do nothing, providing 100 will always return white.
@@ -1018,76 +1093,30 @@ const parseHSVorHSL = /* @__PURE__ */ __name((num, _, index2) => index2 === 0 ?
       a: 1
     }, amount);
   }
-  /**
-   * Mix the current color a given amount with another color, from 0 to 100.
-   * 0 means no mixing (return current color).
-   */
-  mix(color, amount = 50) {
-    const rgb1 = this.toRgb(), rgb2 = new _FastColor(color).toRgb(), p2 = amount / 100, rgba = {
-      r: (rgb2.r - rgb1.r) * p2 + rgb1.r,
-      g: (rgb2.g - rgb1.g) * p2 + rgb1.g,
-      b: (rgb2.b - rgb1.b) * p2 + rgb1.b,
-      a: (rgb2.a - rgb1.a) * p2 + rgb1.a
-    };
-    return new _FastColor(rgba);
-  }
-  getAlpha() {
-    return this.a;
-  }
-  /**
-   * Returns the perceived luminance of a color, from 0-1.
-   * @see http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-   */
-  getLuminance() {
-    let R, G, B;
-    const RsRGB = this.r / 255, GsRGB = this.g / 255, BsRGB = this.b / 255;
-    return RsRGB <= 0.03928 ? R = RsRGB / 12.92 : R = Math.pow((RsRGB + 0.055) / 1.055, 2.4), GsRGB <= 0.03928 ? G = GsRGB / 12.92 : G = Math.pow((GsRGB + 0.055) / 1.055, 2.4), BsRGB <= 0.03928 ? B = BsRGB / 12.92 : B = Math.pow((BsRGB + 0.055) / 1.055, 2.4), 0.2126 * R + 0.7152 * G + 0.0722 * B;
-  }
-  getHue() {
-    if (typeof this._h > "u") {
-      const delta = this.max - this.min;
-      delta === 0 ? this._h = 0 : this._h = Math.round(60 * (this.r === this.max ? (this.g - this.b) / delta + (this.g < this.b ? 6 : 0) : this.g === this.max ? (this.b - this.r) / delta + 2 : (this.r - this.g) / delta + 4));
-    }
-    return this._h;
-  }
-  getSaturation() {
-    if (typeof this._s > "u") {
-      const delta = this.max - this.min;
-      delta === 0 ? this._s = 0 : this._s = delta / this.max;
-    }
-    return this._s;
-  }
-  getLightness() {
-    return typeof this._l > "u" && (this._l = (this.max + this.min) / 510), this._l;
-  }
-  getValue() {
-    return typeof this._v > "u" && (this._v = this.max / 255), this._v;
+  onBackground(background) {
+    const bg = this._c(background), alpha = this.a + bg.a * (1 - this.a), calc = /* @__PURE__ */ __name((key) => round((this[key] * this.a + bg[key] * bg.a * (1 - this.a)) / alpha), "calc");
+    return this._c({
+      r: calc("r"),
+      g: calc("g"),
+      b: calc("b"),
+      a: alpha
+    });
   }
+  // ======================= Status =======================
   isDark() {
     return this.getBrightness() < 128;
   }
   isLight() {
     return this.getBrightness() >= 128;
   }
-  /**
-   * Returns the perceived brightness of the color, from 0-255.
-   * @see http://www.w3.org/TR/AERT#color-contrast
-   */
-  getBrightness() {
-    return typeof this._brightness > "u" && (this._brightness = (this.r * 299 + this.g * 587 + this.b * 114) / 1e3), this._brightness;
-  }
-  onBackground(background) {
-    const bg = new _FastColor(background), alpha = this.a + bg.a * (1 - this.a);
-    return new _FastColor({
-      r: Math.round((this.r * this.a + bg.r * bg.a * (1 - this.a)) / alpha),
-      g: Math.round((this.g * this.a + bg.g * bg.a * (1 - this.a)) / alpha),
-      b: Math.round((this.b * this.a + bg.b * bg.a * (1 - this.a)) / alpha),
-      a: alpha
-    });
+  // ======================== MISC ========================
+  equals(other) {
+    return this.r === other.r && this.g === other.g && this.b === other.b && this.a === other.a;
   }
-  setAlpha(alpha) {
-    return this.a = alpha, this;
+  clone() {
+    return this._c(this);
   }
+  // ======================= Format =======================
   toHexString() {
     let hex = "#";
     const rHex = (this.r || 0).toString(16);
@@ -1096,28 +1125,31 @@ const parseHSVorHSL = /* @__PURE__ */ __name((num, _, index2) => index2 === 0 ?
     hex += gHex.length === 2 ? gHex : "0" + gHex;
     const bHex = (this.b || 0).toString(16);
     if (hex += bHex.length === 2 ? bHex : "0" + bHex, typeof this.a == "number" && this.a >= 0 && this.a < 1) {
-      const aHex = Math.round(this.a * 255).toString(16);
+      const aHex = round(this.a * 255).toString(16);
       hex += aHex.length === 2 ? aHex : "0" + aHex;
     }
     return hex;
   }
+  /** CSS support color pattern */
   toHsl() {
     return {
-      h: this.h,
-      s: this.s,
-      l: this.l,
+      h: this.getHue(),
+      s: this.getSaturation(),
+      l: this.getLightness(),
       a: this.a
     };
   }
+  /** CSS support color pattern */
   toHslString() {
-    const h2 = this.h, s = Math.round(this.s * 100), l2 = Math.round(this.l * 100);
+    const h2 = this.getHue(), s = round(this.getSaturation() * 100), l2 = round(this.getLightness() * 100);
     return this.a !== 1 ? `hsla(${h2},${s}%,${l2}%,${this.a})` : `hsl(${h2},${s}%,${l2}%)`;
   }
+  /** Same as toHsb */
   toHsv() {
     return {
-      h: this.h,
-      s: this.s,
-      v: this.v,
+      h: this.getHue(),
+      s: this.getSaturation(),
+      v: this.getValue(),
       a: this.a
     };
   }
@@ -1135,10 +1167,19 @@ const parseHSVorHSL = /* @__PURE__ */ __name((num, _, index2) => index2 === 0 ?
   toString() {
     return this.toRgbString();
   }
-  get max() {
+  // ====================== Privates ======================
+  /** Return a new FastColor object with one channel changed */
+  _sc(rgb, value, max) {
+    const clone = this.clone();
+    return clone[rgb] = limitRange(value, max), clone;
+  }
+  _c(input2) {
+    return new this.constructor(input2);
+  }
+  getMax() {
     return typeof this._max > "u" && (this._max = Math.max(this.r, this.g, this.b)), this._max;
   }
-  get min() {
+  getMin() {
     return typeof this._min > "u" && (this._min = Math.min(this.r, this.g, this.b)), this._min;
   }
   fromHexString(trimStr) {
@@ -1155,13 +1196,14 @@ const parseHSVorHSL = /* @__PURE__ */ __name((num, _, index2) => index2 === 0 ?
     a
   }) {
     if (this._h = h2 % 360, this._s = s, this._l = l2, this.a = typeof a == "number" ? a : 1, s <= 0) {
-      const rgb = Math.round(l2 * 255);
+      const rgb = round(l2 * 255);
       this.r = rgb, this.g = rgb, this.b = rgb;
     }
+    let r = 0, g2 = 0, b2 = 0;
     const huePrime = h2 / 60, chroma = (1 - Math.abs(2 * l2 - 1)) * s, secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
-    this.r = 0, this.g = 0, this.b = 0, huePrime >= 0 && huePrime < 1 ? (this.r = chroma, this.g = secondComponent) : huePrime >= 1 && huePrime < 2 ? (this.r = secondComponent, this.g = chroma) : huePrime >= 2 && huePrime < 3 ? (this.g = chroma, this.b = secondComponent) : huePrime >= 3 && huePrime < 4 ? (this.g = secondComponent, this.b = chroma) : huePrime >= 4 && huePrime < 5 ? (this.r = secondComponent, this.b = chroma) : huePrime >= 5 && huePrime < 6 && (this.r = chroma, this.b = secondComponent);
+    huePrime >= 0 && huePrime < 1 ? (r = chroma, g2 = secondComponent) : huePrime >= 1 && huePrime < 2 ? (r = secondComponent, g2 = chroma) : huePrime >= 2 && huePrime < 3 ? (g2 = chroma, b2 = secondComponent) : huePrime >= 3 && huePrime < 4 ? (g2 = secondComponent, b2 = chroma) : huePrime >= 4 && huePrime < 5 ? (r = secondComponent, b2 = chroma) : huePrime >= 5 && huePrime < 6 && (r = chroma, b2 = secondComponent);
     const lightnessModification = l2 - chroma / 2;
-    this.r = Math.round((this.r + lightnessModification) * 255), this.g = Math.round((this.g + lightnessModification) * 255), this.b = Math.round((this.b + lightnessModification) * 255);
+    this.r = round((r + lightnessModification) * 255), this.g = round((g2 + lightnessModification) * 255), this.b = round((b2 + lightnessModification) * 255);
   }
   fromHsv({
     h: h2,
@@ -1170,10 +1212,10 @@ const parseHSVorHSL = /* @__PURE__ */ __name((num, _, index2) => index2 === 0 ?
     a
   }) {
     this._h = h2 % 360, this._s = s, this._v = v2, this.a = typeof a == "number" ? a : 1;
-    const vv = Math.round(v2 * 255);
+    const vv = round(v2 * 255);
     if (this.r = vv, this.g = vv, this.b = vv, s <= 0)
       return;
-    const hh = h2 / 60, i = Math.floor(hh), ff = hh - i, p2 = Math.round(v2 * (1 - s) * 255), q2 = Math.round(v2 * (1 - s * ff) * 255), t2 = Math.round(v2 * (1 - s * (1 - ff)) * 255);
+    const hh = h2 / 60, i = Math.floor(hh), ff = hh - i, p2 = round(v2 * (1 - s) * 255), q2 = round(v2 * (1 - s * ff) * 255), t2 = round(v2 * (1 - s * (1 - ff)) * 255);
     switch (i) {
       case 0:
         this.g = t2, this.b = p2;
@@ -1196,8 +1238,8 @@ const parseHSVorHSL = /* @__PURE__ */ __name((num, _, index2) => index2 === 0 ?
         break;
     }
   }
-  fromHsvString(trimed) {
-    const cells = splitColorStr(trimed, parseHSVorHSL);
+  fromHsvString(trimStr) {
+    const cells = splitColorStr(trimStr, parseHSVorHSL);
     this.fromHsv({
       h: cells[0],
       s: cells[1],
@@ -1205,8 +1247,8 @@ const parseHSVorHSL = /* @__PURE__ */ __name((num, _, index2) => index2 === 0 ?
       a: cells[3]
     });
   }
-  fromHslString(trimed) {
-    const cells = splitColorStr(trimed, parseHSVorHSL);
+  fromHslString(trimStr) {
+    const cells = splitColorStr(trimStr, parseHSVorHSL);
     this.fromHsl({
       h: cells[0],
       s: cells[1],
@@ -1214,10 +1256,10 @@ const parseHSVorHSL = /* @__PURE__ */ __name((num, _, index2) => index2 === 0 ?
       a: cells[3]
     });
   }
-  fromRgbString(trimed) {
-    const cells = splitColorStr(trimed, (num, txt) => (
+  fromRgbString(trimStr) {
+    const cells = splitColorStr(trimStr, (num, txt) => (
       // Convert percentage to number. e.g. 50% -> 128
-      txt.includes("%") ? Math.round(num / 100 * 255) : num
+      txt.includes("%") ? round(num / 100 * 255) : num
     ));
     this.r = cells[0], this.g = cells[1], this.b = cells[2], this.a = cells[3];
   }
@@ -1279,28 +1321,26 @@ var _excluded$x = ["b"], _excluded2$7 = ["v"], getRoundNumber = /* @__PURE__ */
     b: bright >= 1 ? 1 : bright,
     a: hsb.a
   });
-}, "calculateColor"), calculateOffset = /* @__PURE__ */ __name(function(containerRef, targetRef, color, type2) {
-  var _containerRef$current2 = containerRef.current.getBoundingClientRect(), width2 = _containerRef$current2.width, height2 = _containerRef$current2.height, _targetRef$current$ge2 = targetRef.current.getBoundingClientRect(), targetWidth = _targetRef$current$ge2.width, targetHeight = _targetRef$current$ge2.height, centerOffsetX = targetWidth / 2, centerOffsetY = targetHeight / 2, hsb = color.toHsb();
-  if (!(targetWidth === 0 && targetHeight === 0 || targetWidth !== targetHeight)) {
-    if (type2)
-      switch (type2) {
-        case "hue":
-          return {
-            x: hsb.h / 360 * width2 - centerOffsetX,
-            y: -centerOffsetY / 3
-          };
-        case "alpha":
-          return {
-            x: hsb.a / 1 * width2 - centerOffsetX,
-            y: -centerOffsetY / 3
-          };
-      }
-    return {
-      x: hsb.s * width2 - centerOffsetX,
-      y: (1 - hsb.b) * height2 - centerOffsetY
-    };
+}, "calculateColor"), calcOffset = /* @__PURE__ */ __name(function(color, type2) {
+  var hsb = color.toHsb();
+  switch (type2) {
+    case "hue":
+      return {
+        x: hsb.h / 360 * 100,
+        y: 50
+      };
+    case "alpha":
+      return {
+        x: color.a * 100,
+        y: 50
+      };
+    default:
+      return {
+        x: hsb.s * 100,
+        y: (1 - hsb.b) * 100
+      };
   }
-}, "calculateOffset"), classnames = { exports: {} };
+}, "calcOffset"), classnames = { exports: {} };
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see
@@ -1362,36 +1402,31 @@ function getPosition(e2) {
 }
 __name(getPosition, "getPosition");
 function useColorDrag(props) {
-  var offset2 = props.offset, targetRef = props.targetRef, containerRef = props.containerRef, direction = props.direction, onDragChange = props.onDragChange, onDragChangeComplete = props.onDragChangeComplete, calculate = props.calculate, color = props.color, disabledDrag = props.disabledDrag, _useState = useState(offset2 || {
+  var targetRef = props.targetRef, containerRef = props.containerRef, direction = props.direction, onDragChange = props.onDragChange, onDragChangeComplete = props.onDragChangeComplete, calculate = props.calculate, color = props.color, disabledDrag = props.disabledDrag, _useState = useState({
     x: 0,
     y: 0
-  }), _useState2 = _slicedToArray$1(_useState, 2), offsetValue = _useState2[0], setOffsetValue = _useState2[1], mouseMoveRef = useRef(null), mouseUpRef = useRef(null), dragRef = useRef({
-    flag: !1
-  });
+  }), _useState2 = _slicedToArray$1(_useState, 2), offsetValue = _useState2[0], setOffsetValue = _useState2[1], mouseMoveRef = useRef(null), mouseUpRef = useRef(null);
   useEffect(function() {
-    if (dragRef.current.flag === !1) {
-      var calcOffset = calculate == null ? void 0 : calculate(containerRef);
-      calcOffset && setOffsetValue(calcOffset);
-    }
-  }, [color, containerRef]), useEffect(function() {
+    setOffsetValue(calculate());
+  }, [color]), useEffect(function() {
     return function() {
       document.removeEventListener("mousemove", mouseMoveRef.current), document.removeEventListener("mouseup", mouseUpRef.current), document.removeEventListener("touchmove", mouseMoveRef.current), document.removeEventListener("touchend", mouseUpRef.current), mouseMoveRef.current = null, mouseUpRef.current = null;
     };
   }, []);
   var updateOffset = /* @__PURE__ */ __name(function(e2) {
-    var _getPosition = getPosition(e2), pageX = _getPosition.pageX, pageY = _getPosition.pageY, _containerRef$current = containerRef.current.getBoundingClientRect(), rectX = _containerRef$current.x, rectY = _containerRef$current.y, width2 = _containerRef$current.width, height2 = _containerRef$current.height, _targetRef$current$ge = targetRef.current.getBoundingClientRect(), targetWidth = _targetRef$current$ge.width, targetHeight = _targetRef$current$ge.height, centerOffsetX = targetWidth / 2, centerOffsetY = targetHeight / 2, offsetX = Math.max(0, Math.min(pageX - rectX, width2)) - centerOffsetX, offsetY = Math.max(0, Math.min(pageY - rectY, height2)) - centerOffsetY, calcOffset = {
+    var _getPosition = getPosition(e2), pageX = _getPosition.pageX, pageY = _getPosition.pageY, _containerRef$current = containerRef.current.getBoundingClientRect(), rectX = _containerRef$current.x, rectY = _containerRef$current.y, width2 = _containerRef$current.width, height2 = _containerRef$current.height, _targetRef$current$ge = targetRef.current.getBoundingClientRect(), targetWidth = _targetRef$current$ge.width, targetHeight = _targetRef$current$ge.height, centerOffsetX = targetWidth / 2, centerOffsetY = targetHeight / 2, offsetX = Math.max(0, Math.min(pageX - rectX, width2)) - centerOffsetX, offsetY = Math.max(0, Math.min(pageY - rectY, height2)) - centerOffsetY, calcOffset3 = {
       x: offsetX,
       y: direction === "x" ? offsetValue.y : offsetY
     };
     if (targetWidth === 0 && targetHeight === 0 || targetWidth !== targetHeight)
       return !1;
-    setOffsetValue(calcOffset), onDragChange == null || onDragChange(calcOffset);
+    onDragChange == null || onDragChange(calcOffset3);
   }, "updateOffset"), onDragMove = /* @__PURE__ */ __name(function(e2) {
     e2.preventDefault(), updateOffset(e2);
   }, "onDragMove"), onDragStop = /* @__PURE__ */ __name(function(e2) {
-    e2.preventDefault(), dragRef.current.flag = !1, document.removeEventListener("mousemove", mouseMoveRef.current), document.removeEventListener("mouseup", mouseUpRef.current), document.removeEventListener("touchmove", mouseMoveRef.current), document.removeEventListener("touchend", mouseUpRef.current), mouseMoveRef.current = null, mouseUpRef.current = null, onDragChangeComplete == null || onDragChangeComplete();
+    e2.preventDefault(), document.removeEventListener("mousemove", mouseMoveRef.current), document.removeEventListener("mouseup", mouseUpRef.current), document.removeEventListener("touchmove", mouseMoveRef.current), document.removeEventListener("touchend", mouseUpRef.current), mouseMoveRef.current = null, mouseUpRef.current = null, onDragChangeComplete == null || onDragChangeComplete();
   }, "onDragStop"), onDragStart = /* @__PURE__ */ __name(function(e2) {
-    document.removeEventListener("mousemove", mouseMoveRef.current), document.removeEventListener("mouseup", mouseUpRef.current), !disabledDrag && (updateOffset(e2), dragRef.current.flag = !0, document.addEventListener("mousemove", onDragMove), document.addEventListener("mouseup", onDragStop), document.addEventListener("touchmove", onDragMove), document.addEventListener("touchend", onDragStop), mouseMoveRef.current = onDragMove, mouseUpRef.current = onDragStop);
+    document.removeEventListener("mousemove", mouseMoveRef.current), document.removeEventListener("mouseup", mouseUpRef.current), !disabledDrag && (updateOffset(e2), document.addEventListener("mousemove", onDragMove), document.addEventListener("mouseup", onDragStop), document.addEventListener("touchmove", onDragMove), document.addEventListener("touchend", onDragStop), mouseMoveRef.current = onDragMove, mouseUpRef.current = onDragStop);
   }, "onDragStart");
   return [offsetValue, onDragStart];
 }
@@ -1439,19 +1474,19 @@ function useSafeState(defaultValue) {
   return __name(safeSetState, "safeSetState"), [value, safeSetState];
 }
 __name(useSafeState, "useSafeState");
-function hasValue$2(value) {
+function hasValue$1(value) {
   return value !== void 0;
 }
-__name(hasValue$2, "hasValue$2");
+__name(hasValue$1, "hasValue$1");
 function useMergedState(defaultStateValue, option) {
   var _ref = option || {}, defaultValue = _ref.defaultValue, value = _ref.value, onChange = _ref.onChange, postState = _ref.postState, _useState = useSafeState(function() {
-    return hasValue$2(value) ? value : hasValue$2(defaultValue) ? typeof defaultValue == "function" ? defaultValue() : defaultValue : typeof defaultStateValue == "function" ? defaultStateValue() : defaultStateValue;
+    return hasValue$1(value) ? value : hasValue$1(defaultValue) ? typeof defaultValue == "function" ? defaultValue() : defaultValue : typeof defaultStateValue == "function" ? defaultStateValue() : defaultStateValue;
   }), _useState2 = _slicedToArray$1(_useState, 2), innerValue = _useState2[0], setInnerValue = _useState2[1], mergedValue = value !== void 0 ? value : innerValue, postMergedValue = postState ? postState(mergedValue) : mergedValue, onChangeFn = useEvent(onChange), _useState3 = useSafeState([mergedValue]), _useState4 = _slicedToArray$1(_useState3, 2), prevValue = _useState4[0], setPrevValue = _useState4[1];
   useLayoutUpdateEffect(function() {
     var prev = prevValue[0];
     innerValue !== prev && onChangeFn(innerValue, prev);
   }, [prevValue]), useLayoutUpdateEffect(function() {
-    hasValue$2(value) || setInnerValue(value);
+    hasValue$1(value) || setInnerValue(value);
   }, [value]);
   var triggerChange = useEvent(function(updater, ignoreDestroy) {
     setInnerValue(updater, ignoreDestroy), setPrevValue([mergedValue], ignoreDestroy);
@@ -1662,14 +1697,15 @@ var Handler = /* @__PURE__ */ __name(function(_ref) {
     }, style2)
   }, children);
 }, "Palette"), Transform = /* @__PURE__ */ forwardRef(function(props, ref) {
-  var children = props.children, offset2 = props.offset;
+  var children = props.children, x = props.x, y = props.y;
   return /* @__PURE__ */ React__default.createElement("div", {
     ref,
     style: {
       position: "absolute",
-      left: offset2.x,
-      top: offset2.y,
-      zIndex: 1
+      left: "".concat(x, "%"),
+      top: "".concat(y, "%"),
+      zIndex: 1,
+      transform: "translate(-50%, -50%)"
     }
   }, children);
 }), Picker$1 = /* @__PURE__ */ __name(function(_ref) {
@@ -1685,8 +1721,8 @@ var Handler = /* @__PURE__ */ __name(function(_ref) {
     color,
     containerRef: pickerRef,
     targetRef: transformRef,
-    calculate: /* @__PURE__ */ __name(function(containerRef) {
-      return calculateOffset(containerRef, transformRef, color);
+    calculate: /* @__PURE__ */ __name(function() {
+      return calcOffset(color);
     }, "calculate"),
     onDragChange,
     onDragChangeComplete: /* @__PURE__ */ __name(function() {
@@ -1702,7 +1738,8 @@ var Handler = /* @__PURE__ */ __name(function(_ref) {
   }, /* @__PURE__ */ React__default.createElement(Palette, {
     prefixCls
   }, /* @__PURE__ */ React__default.createElement(Transform, {
-    offset: offset2,
+    x: offset2.x,
+    y: offset2.y,
     ref: transformRef
   }, /* @__PURE__ */ React__default.createElement(Handler, {
     color: color.toRgbString(),
@@ -1714,24 +1751,18 @@ var Handler = /* @__PURE__ */ __name(function(_ref) {
       backgroundImage: "linear-gradient(0deg, #000, transparent),linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0))"
     }
   })));
-}, "Picker");
-function hasValue$1(value) {
-  return value !== void 0;
-}
-__name(hasValue$1, "hasValue$1");
-var useColorState = /* @__PURE__ */ __name(function(defaultStateValue, option) {
-  var defaultValue = option.defaultValue, value = option.value, _useState = useState(function() {
-    var mergeState;
-    return hasValue$1(value) ? mergeState = value : hasValue$1(defaultValue) ? mergeState = defaultValue : mergeState = defaultStateValue, generateColor(mergeState);
-  }), _useState2 = _slicedToArray$1(_useState, 2), colorValue = _useState2[0], setColorValue = _useState2[1];
-  return useEffect(function() {
-    value && setColorValue(generateColor(value));
-  }, [value]), [colorValue, setColorValue];
+}, "Picker"), useColorState = /* @__PURE__ */ __name(function(defaultValue, value) {
+  var _useMergedState = useMergedState(defaultValue, {
+    value
+  }), _useMergedState2 = _slicedToArray$1(_useMergedState, 2), mergedValue = _useMergedState2[0], setValue = _useMergedState2[1], color = useMemo$1(function() {
+    return generateColor(mergedValue);
+  }, [mergedValue]);
+  return [color, setValue];
 }, "useColorState"), Gradient = /* @__PURE__ */ __name(function(_ref) {
   var colors = _ref.colors, children = _ref.children, _ref$direction = _ref.direction, direction = _ref$direction === void 0 ? "to right" : _ref$direction, type2 = _ref.type, prefixCls = _ref.prefixCls, gradientColors = useMemo$1(function() {
     return colors.map(function(color, idx) {
       var result = generateColor(color);
-      return type2 === "alpha" && idx === colors.length - 1 && result.setAlpha(1), result.toRgbString();
+      return type2 === "alpha" && idx === colors.length - 1 && (result = new Color(result.setA(1))), result.toRgbString();
     }).join(",");
   }, [colors, type2]);
   return /* @__PURE__ */ React__default.createElement("div", {
@@ -1744,7 +1775,7 @@ var useColorState = /* @__PURE__ */ __name(function(defaultStateValue, option) {
   }, children);
 }, "Gradient"), Slider$1 = /* @__PURE__ */ __name(function(props) {
   var prefixCls = props.prefixCls, colors = props.colors, disabled = props.disabled, onChange = props.onChange, onChangeComplete = props.onChangeComplete, color = props.color, type2 = props.type, sliderRef = useRef(), transformRef = useRef(), colorRef = useRef(color), getValue = /* @__PURE__ */ __name(function(c2) {
-    return type2 === "hue" ? c2.getHue() : c2.getAlpha() * 100;
+    return type2 === "hue" ? c2.getHue() : c2.a * 100;
   }, "getValue"), onDragChange = useEvent(function(offsetValue) {
     var calcColor = calculateColor({
       offset: offsetValue,
@@ -1758,8 +1789,8 @@ var useColorState = /* @__PURE__ */ __name(function(defaultStateValue, option) {
     color,
     targetRef: transformRef,
     containerRef: sliderRef,
-    calculate: /* @__PURE__ */ __name(function(containerRef) {
-      return calculateOffset(containerRef, transformRef, color, type2);
+    calculate: /* @__PURE__ */ __name(function() {
+      return calcOffset(color, type2);
     }, "calculate"),
     onDragChange,
     onDragChangeComplete: /* @__PURE__ */ __name(function() {
@@ -1767,7 +1798,15 @@ var useColorState = /* @__PURE__ */ __name(function(defaultStateValue, option) {
     }, "onDragChangeComplete"),
     direction: "x",
     disabledDrag: disabled
-  }), _useColorDrag2 = _slicedToArray$1(_useColorDrag, 2), offset2 = _useColorDrag2[0], dragStartHandle = _useColorDrag2[1], gradientList = React__default.useMemo(function() {
+  }), _useColorDrag2 = _slicedToArray$1(_useColorDrag, 2), offset2 = _useColorDrag2[0], dragStartHandle = _useColorDrag2[1], handleColor = React__default.useMemo(function() {
+    if (type2 === "hue") {
+      var hsb = color.toHsb();
+      hsb.s = 1, hsb.b = 1, hsb.a = 1;
+      var lightColor = new Color(hsb);
+      return lightColor;
+    }
+    return color;
+  }, [color, type2]), gradientList = React__default.useMemo(function() {
     return colors.map(function(info) {
       return "".concat(info.color, " ").concat(info.percent, "%");
     });
@@ -1780,11 +1819,12 @@ var useColorState = /* @__PURE__ */ __name(function(defaultStateValue, option) {
   }, /* @__PURE__ */ React__default.createElement(Palette, {
     prefixCls
   }, /* @__PURE__ */ React__default.createElement(Transform, {
-    offset: offset2,
+    x: offset2.x,
+    y: offset2.y,
     ref: transformRef
   }, /* @__PURE__ */ React__default.createElement(Handler, {
     size: "small",
-    color: color.toHexString(),
+    color: handleColor.toHexString(),
     prefixCls
   })), /* @__PURE__ */ React__default.createElement(Gradient, {
     colors: gradientList,
@@ -1820,31 +1860,30 @@ var HUE_COLORS = [{
 }, {
   color: "rgb(255, 0, 0)",
   percent: 100
-}];
-const ColorPicker$1 = /* @__PURE__ */ forwardRef(function(props, ref) {
-  var value = props.value, defaultValue = props.defaultValue, _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? ColorPickerPrefixCls : _props$prefixCls, onChange = props.onChange, onChangeComplete = props.onChangeComplete, className = props.className, style2 = props.style, panelRender = props.panelRender, _props$disabledAlpha = props.disabledAlpha, disabledAlpha = _props$disabledAlpha === void 0 ? !1 : _props$disabledAlpha, _props$disabled = props.disabled, disabled = _props$disabled === void 0 ? !1 : _props$disabled, components = props.components, _useComponent = useComponent(components), _useComponent2 = _slicedToArray$1(_useComponent, 1), Slider3 = _useComponent2[0], _useColorState = useColorState(defaultColor, {
-    value,
-    defaultValue
-  }), _useColorState2 = _slicedToArray$1(_useColorState, 2), colorValue = _useColorState2[0], setColorValue = _useColorState2[1], alphaColor = useMemo$1(function() {
-    var rgb = generateColor(colorValue.toRgbString());
-    return rgb.setAlpha(1), rgb.toRgbString();
+}], ColorPicker$1 = /* @__PURE__ */ forwardRef(function(props, ref) {
+  var value = props.value, defaultValue = props.defaultValue, _props$prefixCls = props.prefixCls, prefixCls = _props$prefixCls === void 0 ? ColorPickerPrefixCls : _props$prefixCls, onChange = props.onChange, onChangeComplete = props.onChangeComplete, className = props.className, style2 = props.style, panelRender = props.panelRender, _props$disabledAlpha = props.disabledAlpha, disabledAlpha = _props$disabledAlpha === void 0 ? !1 : _props$disabledAlpha, _props$disabled = props.disabled, disabled = _props$disabled === void 0 ? !1 : _props$disabled, components = props.components, _useComponent = useComponent(components), _useComponent2 = _slicedToArray$1(_useComponent, 1), Slider3 = _useComponent2[0], _useColorState = useColorState(defaultValue || defaultColor, value), _useColorState2 = _slicedToArray$1(_useColorState, 2), colorValue = _useColorState2[0], setColorValue = _useColorState2[1], alphaColor = useMemo$1(function() {
+    return colorValue.setA(1).toRgbString();
   }, [colorValue]), handleChange = /* @__PURE__ */ __name(function(data, type2) {
     value || setColorValue(data), onChange == null || onChange(data, type2);
-  }, "handleChange"), getHueColor = /* @__PURE__ */ __name(function(hue) {
-    var hsb = colorValue.toHsb();
-    return hsb.h = hue, new Color(hsb);
-  }, "getHueColor"), getAlphaColor = /* @__PURE__ */ __name(function(alpha) {
-    var hsb = colorValue.toHsb();
-    return hsb.a = Math.round(alpha) / 100, new Color(hsb);
-  }, "getAlphaColor"), onHueChange = /* @__PURE__ */ __name(function(hue) {
-    handleChange(getHueColor(hue), "hue");
-  }, "onHueChange"), onAlphaChange = /* @__PURE__ */ __name(function(alpha) {
-    handleChange(getAlphaColor(alpha), "alpha");
-  }, "onAlphaChange"), onHueChangeComplete = /* @__PURE__ */ __name(function(hue) {
+  }, "handleChange2"), getHueColor = /* @__PURE__ */ __name(function(hue) {
+    return new Color(colorValue.setHue(hue));
+  }, "getHueColor2"), getAlphaColor = /* @__PURE__ */ __name(function(alpha) {
+    return new Color(colorValue.setA(alpha / 100));
+  }, "getAlphaColor2"), onHueChange = /* @__PURE__ */ __name(function(hue) {
+    handleChange(getHueColor(hue), {
+      type: "hue",
+      value: hue
+    });
+  }, "onHueChange2"), onAlphaChange = /* @__PURE__ */ __name(function(alpha) {
+    handleChange(getAlphaColor(alpha), {
+      type: "alpha",
+      value: alpha
+    });
+  }, "onAlphaChange2"), onHueChangeComplete = /* @__PURE__ */ __name(function(hue) {
     onChangeComplete && onChangeComplete(getHueColor(hue));
-  }, "onHueChangeComplete"), onAlphaChangeComplete = /* @__PURE__ */ __name(function(alpha) {
+  }, "onHueChangeComplete2"), onAlphaChangeComplete = /* @__PURE__ */ __name(function(alpha) {
     onChangeComplete && onChangeComplete(getAlphaColor(alpha));
-  }, "onAlphaChangeComplete"), mergeCls = clsx("".concat(prefixCls, "-panel"), className, _defineProperty$b({}, "".concat(prefixCls, "-panel-disabled"), disabled)), sharedSliderProps = {
+  }, "onAlphaChangeComplete2"), mergeCls = clsx("".concat(prefixCls, "-panel"), className, _defineProperty$b({}, "".concat(prefixCls, "-panel-disabled"), disabled)), sharedSliderProps = {
     prefixCls,
     disabled,
     color: colorValue
@@ -1860,7 +1899,7 @@ const ColorPicker$1 = /* @__PURE__ */ forwardRef(function(props, ref) {
     type: "hue",
     colors: HUE_COLORS,
     min: 0,
-    max: 360,
+    max: 359,
     value: colorValue.getHue(),
     onChange: onHueChange,
     onChangeComplete: onHueChangeComplete
@@ -1875,7 +1914,7 @@ const ColorPicker$1 = /* @__PURE__ */ forwardRef(function(props, ref) {
     }],
     min: 0,
     max: 100,
-    value: colorValue.getAlpha() * 100,
+    value: colorValue.a * 100,
     onChange: onAlphaChange,
     onChangeComplete: onAlphaChangeComplete
   }))), /* @__PURE__ */ React__default.createElement(ColorBlock, {
@@ -1887,7 +1926,8 @@ const ColorPicker$1 = /* @__PURE__ */ forwardRef(function(props, ref) {
     style: style2,
     ref
   }, typeof panelRender == "function" ? panelRender(defaultPanel) : defaultPanel);
-}), colorPicker = "univer-color-picker", colorPickerHidden = "univer-color-picker-hidden", colorPickerPanel = "univer-color-picker-panel", colorPickerPanelDisabled = "univer-color-picker-panel-disabled", colorPickerSelect = "univer-color-picker-select", colorPickerPalette = "univer-color-picker-palette", colorPickerGradient = "univer-color-picker-gradient", colorPickerSaturation = "univer-color-picker-saturation", colorPickerHandler = "univer-color-picker-handler", colorPickerSlider = "univer-color-picker-slider", colorPickerColorBlocks = "univer-color-picker-color-blocks", colorPickerColorBlock = "univer-color-picker-color-block", colorPickerColorBlockInner = "univer-color-picker-color-block-inner", colorPickerSliderContainer = "univer-color-picker-slider-container", colorPickerSliderGroup = "univer-color-picker-slider-group", colorPickerSliderGroupDisabledAlpha = "univer-color-picker-slider-group-disabled-alpha", styles$o = {
+});
+const colorPicker = "univer-color-picker", colorPickerHidden = "univer-color-picker-hidden", colorPickerPanel = "univer-color-picker-panel", colorPickerPanelDisabled = "univer-color-picker-panel-disabled", colorPickerSelect = "univer-color-picker-select", colorPickerPalette = "univer-color-picker-palette", colorPickerGradient = "univer-color-picker-gradient", colorPickerSaturation = "univer-color-picker-saturation", colorPickerHandler = "univer-color-picker-handler", colorPickerSlider = "univer-color-picker-slider", colorPickerColorBlocks = "univer-color-picker-color-blocks", colorPickerColorBlock = "univer-color-picker-color-block", colorPickerColorBlockInner = "univer-color-picker-color-block-inner", colorPickerSliderContainer = "univer-color-picker-slider-container", colorPickerSliderGroup = "univer-color-picker-slider-group", colorPickerSliderGroupDisabledAlpha = "univer-color-picker-slider-group-disabled-alpha", styles$o = {
   colorPicker,
   colorPickerHidden,
   colorPickerPanel,
@@ -4645,14 +4685,17 @@ function Dialog(props) {
     preservePositionOnDestroy = !1,
     footer,
     onClose,
-    mask
+    mask,
+    dialogStyles,
+    closable
   } = props, [dragDisabled, setDragDisabled] = useState(!1), [positionOffset, setPositionOffset] = useState(null), { mountContainer } = useContext(ConfigContext), TitleIfDraggable = draggable ? /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: styles$n.dialogTitleContent,
       style: {
         width: "100%",
-        cursor: "pointer"
+        cursor: "pointer",
+        ...dialogStyles == null ? void 0 : dialogStyles.header
       },
       onMouseOver: /* @__PURE__ */ __name(() => {
         dragDisabled && setDragDisabled(!1);
@@ -4711,7 +4754,9 @@ function Dialog(props) {
       footer,
       mask: needMask,
       style: style2,
-      onClose
+      onClose,
+      styles: dialogStyles,
+      closable
     },
     children
   );
@@ -6730,10 +6775,10 @@ function PanelBody(props) {
         type: type2
       });
       col === 0 && (rowStartDate = currentDate, prefixColumn && rowNode.push(prefixColumn(rowStartDate)));
-      var inRange2 = !1, rangeStart = !1, rangeEnd = !1;
+      var inRange = !1, rangeStart = !1, rangeEnd = !1;
       if (cellSelection && hoverRangeValue) {
         var _hoverRangeValue = _slicedToArray$1(hoverRangeValue, 2), hoverStart = _hoverRangeValue[0], hoverEnd = _hoverRangeValue[1];
-        inRange2 = isInRange(generateConfig2, hoverStart, hoverEnd, currentDate), rangeStart = isSame(generateConfig2, locale, currentDate, hoverStart, type2), rangeEnd = isSame(generateConfig2, locale, currentDate, hoverEnd, type2);
+        inRange = isInRange(generateConfig2, hoverStart, hoverEnd, currentDate), rangeStart = isSame(generateConfig2, locale, currentDate, hoverStart, type2), rangeEnd = isSame(generateConfig2, locale, currentDate, hoverEnd, type2);
       }
       var title = titleFormat ? formatValue(currentDate, {
         locale,
@@ -6747,7 +6792,7 @@ function PanelBody(props) {
         title,
         className: clsx(cellPrefixCls, _objectSpread2$1(_defineProperty$b(_defineProperty$b(_defineProperty$b(_defineProperty$b(_defineProperty$b(_defineProperty$b({}, "".concat(cellPrefixCls, "-disabled"), disabled), "".concat(cellPrefixCls, "-hover"), (hoverValue || []).some(function(date) {
           return isSame(generateConfig2, locale, currentDate, date, type2);
-        })), "".concat(cellPrefixCls, "-in-range"), inRange2 && !rangeStart && !rangeEnd), "".concat(cellPrefixCls, "-range-start"), rangeStart), "".concat(cellPrefixCls, "-range-end"), rangeEnd), "".concat(prefixCls, "-cell-selected"), !hoverRangeValue && // WeekPicker use row instead
+        })), "".concat(cellPrefixCls, "-in-range"), inRange && !rangeStart && !rangeEnd), "".concat(cellPrefixCls, "-range-start"), rangeStart), "".concat(cellPrefixCls, "-range-end"), rangeEnd), "".concat(prefixCls, "-cell-selected"), !hoverRangeValue && // WeekPicker use row instead
         type2 !== "week" && matchValues(currentDate)), getCellClassName(currentDate))),
         onClick: /* @__PURE__ */ __name(function() {
           disabled || onSelect2(currentDate);
@@ -6862,7 +6907,7 @@ function PanelHeader(props) {
 }
 __name(PanelHeader, "PanelHeader");
 function DatePanel$1(props) {
-  var prefixCls = props.prefixCls, _props$panelName = props.panelName, panelName = _props$panelName === void 0 ? "date" : _props$panelName, locale = props.locale, generateConfig2 = props.generateConfig, pickerValue = props.pickerValue, onPickerValueChange = props.onPickerValueChange, onModeChange = props.onModeChange, _props$mode = props.mode, mode = _props$mode === void 0 ? "date" : _props$mode, disabledDate = props.disabledDate, onSelect2 = props.onSelect, onHover = props.onHover, showWeek = props.showWeek, panelPrefixCls = "".concat(prefixCls, "-").concat(panelName, "-panel"), cellPrefixCls = "".concat(prefixCls, "-cell"), isWeek = mode === "week", _useInfo = useInfo(props, mode), _useInfo2 = _slicedToArray$1(_useInfo, 2), info = _useInfo2[0], now = _useInfo2[1], weekFirstDay = generateConfig2.locale.getWeekFirstDay(locale.locale), monthStartDate = generateConfig2.setDate(pickerValue, 1), baseDate = getWeekStartDate(locale.locale, generateConfig2, monthStartDate), month = generateConfig2.getMonth(pickerValue), prefixColumn = isWeek || showWeek ? function(date) {
+  var prefixCls = props.prefixCls, _props$panelName = props.panelName, panelName = _props$panelName === void 0 ? "date" : _props$panelName, locale = props.locale, generateConfig2 = props.generateConfig, pickerValue = props.pickerValue, onPickerValueChange = props.onPickerValueChange, onModeChange = props.onModeChange, _props$mode = props.mode, mode = _props$mode === void 0 ? "date" : _props$mode, disabledDate = props.disabledDate, onSelect2 = props.onSelect, onHover = props.onHover, showWeek = props.showWeek, panelPrefixCls = "".concat(prefixCls, "-").concat(panelName, "-panel"), cellPrefixCls = "".concat(prefixCls, "-cell"), isWeek = mode === "week", _useInfo = useInfo(props, mode), _useInfo2 = _slicedToArray$1(_useInfo, 2), info = _useInfo2[0], now = _useInfo2[1], weekFirstDay = generateConfig2.locale.getWeekFirstDay(locale.locale), monthStartDate = generateConfig2.setDate(pickerValue, 1), baseDate = getWeekStartDate(locale.locale, generateConfig2, monthStartDate), month = generateConfig2.getMonth(pickerValue), showPrefixColumn = showWeek === void 0 ? isWeek : showWeek, prefixColumn = showPrefixColumn ? function(date) {
     var disabled = disabledDate == null ? void 0 : disabledDate(date, {
       type: "week"
     });
@@ -7391,8 +7436,8 @@ function YearPanel(props) {
   }, "getCellText"), getCellClassName = /* @__PURE__ */ __name(function(date) {
     return _defineProperty$b({}, "".concat(prefixCls, "-cell-in-view"), isSameYear(generateConfig2, date, startYearDate) || isSameYear(generateConfig2, date, endYearDate) || isInRange(generateConfig2, startYearDate, endYearDate, date));
   }, "getCellClassName"), mergedDisabledDate = disabledDate ? function(currentDate, disabledInfo) {
-    var startMonth = generateConfig2.setMonth(currentDate, 0), startDate = generateConfig2.setDate(startMonth, 1), endMonth = generateConfig2.setMonth(currentDate, generateConfig2.getMonth(currentDate) + 1), enDate = generateConfig2.addDate(endMonth, -1);
-    return disabledDate(startDate, disabledInfo) && disabledDate(enDate, disabledInfo);
+    var startMonth = generateConfig2.setMonth(currentDate, 0), startDate = generateConfig2.setDate(startMonth, 1), endMonth = generateConfig2.addYear(startDate, 1), endDate = generateConfig2.addDate(endMonth, -1);
+    return disabledDate(startDate, disabledInfo) && disabledDate(endDate, disabledInfo);
   } : null, yearNode = /* @__PURE__ */ React$6.createElement("button", {
     type: "button",
     key: "decade",
@@ -10159,8 +10204,7 @@ const inputNumber = "univer-input-number", inputNumberFocused = "univer-input-nu
   inputNumberHandlerDown,
   inputNumberHandlerDownDisabled,
   inputNumberHandlerUpDisabled
-};
-function InputNumber(props) {
+}, InputNumber = forwardRef((props, ref) => {
   const {
     className,
     value,
@@ -10193,11 +10237,11 @@ function InputNumber(props) {
       onClick,
       onKeyDown: onKeyDown2,
       onChange: handleChange,
-      onPressEnter
+      onPressEnter,
+      ref
     }
   );
-}
-__name(InputNumber, "InputNumber");
+});
 function isEqual(obj1, obj2) {
   var shallow = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1, refSet = /* @__PURE__ */ new Set();
   function deepEqual(a, b2) {
@@ -12480,6 +12524,8 @@ function Scrollbar(props) {
   const containerRef = useRef(null), contentRef = useRef(null), [thumbHeight, setThumbHeight] = useState(0), [thumbTop, setThumbTop] = useState(0);
   useEffect(() => {
     function resize() {
+      if (!containerRef.current)
+        return;
       const { height: containerHeight } = containerRef.current.parentElement.getBoundingClientRect(), { scrollHeight } = contentRef.current;
       setThumbHeight(containerHeight / scrollHeight * 100), containerRef.current.style.height = `${containerHeight}px`;
     }
@@ -13160,9 +13206,9 @@ var _excluded$b = ["id", "prefixCls", "className", "showSearch", "tagRender", "d
   }, [mergedOpen]), React$6.useEffect(function() {
     innerOpen && disabled && setInnerOpen(!1), disabled && !blurRef.current && setMockFocused(!1);
   }, [disabled]);
-  var _useLock = useLock(), _useLock2 = _slicedToArray$1(_useLock, 2), getClearLock = _useLock2[0], setClearLock = _useLock2[1], onInternalKeyDown = /* @__PURE__ */ __name(function(event) {
-    var clearLock = getClearLock(), which = event.which;
-    if (which === KeyCode.ENTER && (mode !== "combobox" && event.preventDefault(), mergedOpen || onToggleOpen(!0)), setClearLock(!!mergedSearchValue), which === KeyCode.BACKSPACE && !clearLock && multiple && !mergedSearchValue && displayValues.length) {
+  var _useLock = useLock(), _useLock2 = _slicedToArray$1(_useLock, 2), getClearLock = _useLock2[0], setClearLock = _useLock2[1], keyLockRef = React$6.useRef(!1), onInternalKeyDown = /* @__PURE__ */ __name(function(event) {
+    var clearLock = getClearLock(), key = event.key, isEnterKey = key === "Enter";
+    if (isEnterKey && (mode !== "combobox" && event.preventDefault(), mergedOpen || onToggleOpen(!0)), setClearLock(!!mergedSearchValue), key === "Backspace" && !clearLock && multiple && !mergedSearchValue && displayValues.length) {
       for (var cloneDisplayValues = _toConsumableArray$3(displayValues), removedDisplayValue = null, i = cloneDisplayValues.length - 1; i >= 0; i -= 1) {
         var current = cloneDisplayValues[i];
         if (!current.disabled) {
@@ -13177,11 +13223,11 @@ var _excluded$b = ["id", "prefixCls", "className", "showSearch", "tagRender", "d
     }
     for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++)
       rest[_key - 1] = arguments[_key];
-    if (mergedOpen) {
+    if (mergedOpen && (!isEnterKey || !keyLockRef.current)) {
       var _listRef$current2;
       (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.onKeyDown.apply(_listRef$current2, [event].concat(rest));
     }
-    onKeyDown2 == null || onKeyDown2.apply(void 0, [event].concat(rest));
+    isEnterKey && (keyLockRef.current = !0), onKeyDown2 == null || onKeyDown2.apply(void 0, [event].concat(rest));
   }, "onInternalKeyDown2"), onInternalKeyUp = /* @__PURE__ */ __name(function(event) {
     for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++)
       rest[_key2 - 1] = arguments[_key2];
@@ -13189,7 +13235,7 @@ var _excluded$b = ["id", "prefixCls", "className", "showSearch", "tagRender", "d
       var _listRef$current3;
       (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 || _listRef$current3.onKeyUp.apply(_listRef$current3, [event].concat(rest));
     }
-    onKeyUp == null || onKeyUp.apply(void 0, [event].concat(rest));
+    event.key === "Enter" && (keyLockRef.current = !1), onKeyUp == null || onKeyUp.apply(void 0, [event].concat(rest));
   }, "onInternalKeyUp2"), onSelectorRemove = /* @__PURE__ */ __name(function(val) {
     var newValues = displayValues.filter(function(i) {
       return i !== val;
@@ -13571,12 +13617,18 @@ function useMobileTouchMove(inVirtual, listRef, callback) {
   }, "onTouchMove"), onTouchEnd = /* @__PURE__ */ __name(function() {
     touchedRef.current = !1, cleanUpEvents();
   }, "onTouchEnd"), onTouchStart = /* @__PURE__ */ __name(function(e2) {
-    cleanUpEvents(), e2.touches.length === 1 && !touchedRef.current && (touchedRef.current = !0, touchXRef.current = Math.ceil(e2.touches[0].pageX), touchYRef.current = Math.ceil(e2.touches[0].pageY), elementRef.current = e2.target, elementRef.current.addEventListener("touchmove", onTouchMove), elementRef.current.addEventListener("touchend", onTouchEnd));
+    cleanUpEvents(), e2.touches.length === 1 && !touchedRef.current && (touchedRef.current = !0, touchXRef.current = Math.ceil(e2.touches[0].pageX), touchYRef.current = Math.ceil(e2.touches[0].pageY), elementRef.current = e2.target, elementRef.current.addEventListener("touchmove", onTouchMove, {
+      passive: !1
+    }), elementRef.current.addEventListener("touchend", onTouchEnd, {
+      passive: !0
+    }));
   }, "onTouchStart");
   cleanUpEvents = /* @__PURE__ */ __name(function() {
     elementRef.current && (elementRef.current.removeEventListener("touchmove", onTouchMove), elementRef.current.removeEventListener("touchend", onTouchEnd));
   }, "cleanUpEvents"), useLayoutEffect$1(function() {
-    return inVirtual && listRef.current.addEventListener("touchstart", onTouchStart), function() {
+    return inVirtual && listRef.current.addEventListener("touchstart", onTouchStart, {
+      passive: !0
+    }), function() {
       var _listRef$current;
       (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.removeEventListener("touchstart", onTouchStart), cleanUpEvents(), clearInterval(intervalRef.current);
     };
@@ -13691,7 +13743,11 @@ var ScrollBar = /* @__PURE__ */ React$6.forwardRef(function(props, ref) {
     var onScrollbarTouchStart = /* @__PURE__ */ __name(function(e2) {
       e2.preventDefault();
     }, "onScrollbarTouchStart2"), scrollbarEle = scrollbarRef.current, thumbEle = thumbRef.current;
-    return scrollbarEle.addEventListener("touchstart", onScrollbarTouchStart), thumbEle.addEventListener("touchstart", onThumbMouseDown), function() {
+    return scrollbarEle.addEventListener("touchstart", onScrollbarTouchStart, {
+      passive: !1
+    }), thumbEle.addEventListener("touchstart", onThumbMouseDown, {
+      passive: !1
+    }), function() {
       scrollbarEle.removeEventListener("touchstart", onScrollbarTouchStart), thumbEle.removeEventListener("touchstart", onThumbMouseDown);
     };
   }, []);
@@ -13702,8 +13758,10 @@ var ScrollBar = /* @__PURE__ */ React$6.forwardRef(function(props, ref) {
     if (dragging) {
       var moveRafId, onMouseMove = /* @__PURE__ */ __name(function(e2) {
         var _stateRef$current = stateRef.current, stateDragging = _stateRef$current.dragging, statePageY = _stateRef$current.pageY, stateStartTop = _stateRef$current.startTop;
-        if (wrapperRaf.cancel(moveRafId), stateDragging) {
-          var offset2 = getPageXY(e2, horizontal) - statePageY, newTop = stateStartTop;
+        wrapperRaf.cancel(moveRafId);
+        var rect = scrollbarRef.current.getBoundingClientRect(), scale = containerSize / (horizontal ? rect.width : rect.height);
+        if (stateDragging) {
+          var offset2 = (getPageXY(e2, horizontal) - statePageY) * scale, newTop = stateStartTop;
           !isLTR && horizontal ? newTop -= offset2 : newTop += offset2;
           var tmpEnableScrollRange = enableScrollRangeRef.current, tmpEnableOffsetRange = enableOffsetRangeRef.current, ptg = tmpEnableOffsetRange ? newTop / tmpEnableOffsetRange : 0, newScrollTop = Math.ceil(ptg * tmpEnableScrollRange);
           newScrollTop = Math.max(newScrollTop, 0), newScrollTop = Math.min(newScrollTop, tmpEnableScrollRange), moveRafId = wrapperRaf(function() {
@@ -13713,12 +13771,22 @@ var ScrollBar = /* @__PURE__ */ React$6.forwardRef(function(props, ref) {
       }, "onMouseMove2"), onMouseUp = /* @__PURE__ */ __name(function() {
         setDragging(!1), onStopMove();
       }, "onMouseUp2");
-      return window.addEventListener("mousemove", onMouseMove), window.addEventListener("touchmove", onMouseMove), window.addEventListener("mouseup", onMouseUp), window.addEventListener("touchend", onMouseUp), function() {
+      return window.addEventListener("mousemove", onMouseMove, {
+        passive: !0
+      }), window.addEventListener("touchmove", onMouseMove, {
+        passive: !0
+      }), window.addEventListener("mouseup", onMouseUp, {
+        passive: !0
+      }), window.addEventListener("touchend", onMouseUp, {
+        passive: !0
+      }), function() {
         window.removeEventListener("mousemove", onMouseMove), window.removeEventListener("touchmove", onMouseMove), window.removeEventListener("mouseup", onMouseUp), window.removeEventListener("touchend", onMouseUp), wrapperRaf.cancel(moveRafId);
       };
     }
   }, [dragging]), React$6.useEffect(function() {
-    delayHidden();
+    return delayHidden(), function() {
+      clearTimeout(visibleTimeoutRef.current);
+    };
   }, [scrollOffset]), React$6.useImperativeHandle(ref, function() {
     return {
       delayHidden
@@ -13818,8 +13886,8 @@ function RawList(props, ref) {
     height: height2
   }), _React$useState2 = _slicedToArray$1(_React$useState, 2), size = _React$useState2[0], setSize = _React$useState2[1], onHolderResize = /* @__PURE__ */ __name(function(sizeInfo) {
     setSize({
-      width: sizeInfo.width || sizeInfo.offsetWidth,
-      height: sizeInfo.height || sizeInfo.offsetHeight
+      width: sizeInfo.offsetWidth,
+      height: sizeInfo.offsetHeight
     });
   }, "onHolderResize"), verticalScrollBarRef = useRef(), horizontalScrollBarRef = useRef(), horizontalScrollBarSpinSize = React$6.useMemo(function() {
     return getSpinSize(size.width, scrollWidth);
@@ -13882,7 +13950,13 @@ function RawList(props, ref) {
     }
     __name(onMozMousePixelScroll, "onMozMousePixelScroll");
     var componentEle = componentRef.current;
-    return componentEle.addEventListener("wheel", onRawWheel), componentEle.addEventListener("DOMMouseScroll", onFireFoxScroll), componentEle.addEventListener("MozMousePixelScroll", onMozMousePixelScroll), function() {
+    return componentEle.addEventListener("wheel", onRawWheel, {
+      passive: !1
+    }), componentEle.addEventListener("DOMMouseScroll", onFireFoxScroll, {
+      passive: !0
+    }), componentEle.addEventListener("MozMousePixelScroll", onMozMousePixelScroll, {
+      passive: !1
+    }), function() {
       componentEle.removeEventListener("wheel", onRawWheel), componentEle.removeEventListener("DOMMouseScroll", onFireFoxScroll), componentEle.removeEventListener("MozMousePixelScroll", onMozMousePixelScroll);
     };
   }, [useVirtual]), useLayoutEffect$1(function() {
@@ -15341,7 +15415,7 @@ const switchWrapper = "univer-switch-wrapper", slider = "univer-slider", styles$
   return useEffect(() => {
     setChecked(defaultChecked);
   }, [defaultChecked]), /* @__PURE__ */ React__default.createElement("div", { className: styles$3.switchWrapper }, /* @__PURE__ */ React__default.createElement("label", { className: styles$3.switch }, /* @__PURE__ */ React__default.createElement("input", { type: "checkbox", checked, onChange: handleChange }), /* @__PURE__ */ React__default.createElement("span", { className: styles$3.slider })));
-}, "Switch"), red50$1 = "#fee7e7", red100$1 = "#fdcece", red200$1 = "#fb9d9d", red300$1 = "#fa7979", red400$1 = "#fe4b4b", red500$1 = "#f30b0b", red600$1 = "#e30909", red700$1 = "#cd0f0f", red800$1 = "#b20000", red900$1 = "#9d0000", orange50$1 = "#fef0e6", orange100$1 = "#fee1cd", orange200$1 = "#fdc49b", orange300$1 = "#fca669", orange400$1 = "#ff8c51", orange500$1 = "#fb8937", orange600$1 = "#f96800", orange700$1 = "#df5d00", orange800$1 = "#cc4f10", orange900$1 = "#b24000", gold50$1 = "#fef6e6", gold100$1 = "#feeecd", gold200$1 = "#fddc9b", gold300$1 = "#fccb69", gold400$1 = "#ffbd37", gold500$1 = "#faad14", gold600$1 = "#e59b07", gold700$1 = "#c68400", gold800$1 = "#a97100", gold900$1 = "#8f5f00", yellow50$1 = "#fefbe6", yellow100$1 = "#fef7cd", yellow200$1 = "#fdf09b", yellow300$1 = "#fce869", yellow400$1 = "#fbe137", yellow500$1 = "#f9d700", yellow600$1 = "#ebc301", yellow700$1 = "#d8b300", yellow800$1 = "#c5a300", yellow900$1 = "#b19401", verdancy50$1 = "#f7fde8", verdancy100$1 = "#effbd0", verdancy200$1 = "#def6a2", verdancy300$1 = "#cef273", verdancy400$1 = "#beee44", verdancy500$1 = "#a4dc16", verdancy600$1 = "#8bbb11", verdancy700$1 = "#7aa017", verdancy800$1 = "#688c0d", verdancy900$1 = "#58770a", green50$1 = "#effce8", green100$1 = "#dff9d2", green200$1 = "#bff3a5", green300$1 = "#9fed78", green400$1 = "#7fe74b", green500$1 = "#59d01e", green600$1 = "#49b811", green700$1 = "#409f11", green800$1 = "#398712", green900$1 = "#317310", jiqing50$1 = "#e5fffb", jiqing100$1 = "#ccfff7", jiqing200$1 = "#a9fff2", jiqing300$1 = "#78fce8", jiqing400$1 = "#2afede", jiqing500$1 = "#10e8c7", jiqing600$1 = "#00d2b2", jiqing700$1 = "#00b298", jiqing800$1 = "#009e87", jiqing900$1 = "#008b76", blue50$1 = "#e4f4fe", blue100$1 = "#d0edff", blue200$1 = "#9fdaff", blue300$1 = "#62c2ff", blue400$1 = "#2daeff", blue500$1 = "#0b9efb", blue600$1 = "#0493ee", blue700$1 = "#0080d2", blue800$1 = "#006cae", blue900$1 = "#005f9a", hyacinth50$1 = "#e8ecfd", hyacinth100$1 = "#d0d9fb", hyacinth200$1 = "#a2b3f6", hyacinth300$1 = "#738df2", hyacinth400$1 = "#3a60f7", hyacinth500$1 = "#274fee", hyacinth600$1 = "#143ee3", hyacinth700$1 = "#012bd2", hyacinth800$1 = "#0025b7", hyacinth900$1 = "#001f9c", purple50$1 = "#f1eafa", purple100$1 = "#e3d5f6", purple200$1 = "#c7abed", purple300$1 = "#aa82e3", purple400$1 = "#9e6de3", purple500$1 = "#894ede", purple600$1 = "#7735d4", purple700$1 = "#6721cb", purple800$1 = "#510eb0", purple900$1 = "#3f0198", magenta50$1 = "#fde8f3", magenta100$1 = "#fbd0e8", magenta200$1 = "#f6a2d0", magenta300$1 = "#f273b9", magenta400$1 = "#f248a6", magenta500$1 = "#e7258f", magenta600$1 = "#d4157e", magenta700$1 = "#c1026b", magenta800$1 = "#a1095c", magenta900$1 = "#8f0550", grey50$1 = "#f5f5f5", grey100$1 = "#ececec", grey200$1 = "#e5e5e5", grey300$1 = "#d8d8d8", grey400$1 = "#bcbcbc", grey500$1 = "#999999", grey600$1 = "#7a7a7a", grey700$1 = "#656565", grey800$1 = "#565656", grey900$1 = "#4b4b4b", colorBlack$1 = "#1e222b", colorWhite$1 = "#ffffff", boxShadowBase$1 = "0 4px 12px rgba(30, 34, 43, 0.08)", boxShadowLg$1 = "0 4px 24px 0 rgba(30, 34, 43, 0.08)", bgColor$1 = "#ececec", bgColorHover$1 = "#d8d8d8", bgColorSecondary$1 = "#ffffff", textColor$1 = "#1e222b", textColorSecondary$1 = "#7a7a7a", textColorSecondaryDarker$1 = "#4b4b4b", textColorTertiary$1 = "#bcbcbc", borderColor$1 = "#e5e5e5", scrollbarColor$1 = "#bcbcbc", scrollbarColorHover$1 = "#999999", scrollbarColorActive$1 = "#7a7a7a", borderRadiusBase$1 = "4px", borderRadiusLg$1 = "8px", borderRadiusXl$1 = "12px", marginXl$1 = "24px", marginLg$1 = "20px", marginBase$1 = "16px", marginSm$1 = "12px", marginXs$1 = "8px", marginXxs$1 = "4px", paddingXl$1 = "20px", paddingLg$1 = "16px", paddingBase$1 = "12px", paddingSm$1 = "8px", paddingXs$1 = "4px", fontSizeXxl$1 = "20px", fontSizeXl$1 = "18px", fontSizeLg$1 = "16px", fontSizeBase$1 = "15px", fontSizeSm$1 = "14px", fontSizeXs$1 = "13px", fontSizeXxs$1 = "12px", breakpointXs$1 = "768px", breakpointSm$1 = "1024px", breakpointBase$1 = "1280px", breakpointLg$1 = "1536px", infoColor$1 = "#2daeff", successColor$1 = "#59d01e", warningColor$1 = "#ffbd37", errorColor$1 = "#fe4b4b", primaryColor$1 = "#274fee", primaryColorHover$1 = "#3a60f7", linkColor$1 = "#0b9efb", loopColor1$1 = "#9e6de3", loopColor2$1 = "#49b811", loopColor3$1 = "#0b9efb", loopColor4$1 = "#ffbd37", loopColor5$1 = "#f273b9", loopColor6$1 = "#00d2b2", loopColor7$1 = "#ff8c51", loopColor8$1 = "#565656", loopColor9$1 = "#274fee", loopColor10$1 = "#fa7979", loopColor11$1 = "#8bbb11", loopColor12$1 = "#d8b300", default_module = {
+}, "Switch"), red50$1 = "#fee7e7", red100$1 = "#fdcece", red200$1 = "#fb9d9d", red300$1 = "#fa7979", red400$1 = "#fe4b4b", red500$1 = "#f30b0b", red600$1 = "#e30909", red700$1 = "#cd0f0f", red800$1 = "#b20000", red900$1 = "#9d0000", orange50$1 = "#fef0e6", orange100$1 = "#fee1cd", orange200$1 = "#fdc49b", orange300$1 = "#fca669", orange400$1 = "#ff8c51", orange500$1 = "#fb8937", orange600$1 = "#f96800", orange700$1 = "#df5d00", orange800$1 = "#cc4f10", orange900$1 = "#b24000", gold50$1 = "#fef6e6", gold100$1 = "#feeecd", gold200$1 = "#fddc9b", gold300$1 = "#fccb69", gold400$1 = "#ffbd37", gold500$1 = "#faad14", gold600$1 = "#e59b07", gold700$1 = "#c68400", gold800$1 = "#a97100", gold900$1 = "#8f5f00", yellow50$1 = "#fefbe6", yellow100$1 = "#fef7cd", yellow200$1 = "#fdf09b", yellow300$1 = "#fce869", yellow400$1 = "#fbe137", yellow500$1 = "#f9d700", yellow600$1 = "#ebc301", yellow700$1 = "#d8b300", yellow800$1 = "#c5a300", yellow900$1 = "#b19401", verdancy50$1 = "#f7fde8", verdancy100$1 = "#effbd0", verdancy200$1 = "#def6a2", verdancy300$1 = "#cef273", verdancy400$1 = "#beee44", verdancy500$1 = "#a4dc16", verdancy600$1 = "#8bbb11", verdancy700$1 = "#7aa017", verdancy800$1 = "#688c0d", verdancy900$1 = "#58770a", green50$1 = "#effce8", green100$1 = "#dff9d2", green200$1 = "#bff3a5", green300$1 = "#9fed78", green400$1 = "#7fe74b", green500$1 = "#59d01e", green600$1 = "#49b811", green700$1 = "#409f11", green800$1 = "#398712", green900$1 = "#317310", jiqing50$1 = "#e5fffb", jiqing100$1 = "#ccfff7", jiqing200$1 = "#a9fff2", jiqing300$1 = "#78fce8", jiqing400$1 = "#2afede", jiqing500$1 = "#10e8c7", jiqing600$1 = "#00d2b2", jiqing700$1 = "#00b298", jiqing800$1 = "#009e87", jiqing900$1 = "#008b76", blue50$1 = "#e4f4fe", blue100$1 = "#d0edff", blue200$1 = "#9fdaff", blue300$1 = "#62c2ff", blue400$1 = "#2daeff", blue500$1 = "#0b9efb", blue600$1 = "#0493ee", blue700$1 = "#0080d2", blue800$1 = "#006cae", blue900$1 = "#005f9a", hyacinth50$1 = "#e8ecfd", hyacinth100$1 = "#d0d9fb", hyacinth200$1 = "#a2b3f6", hyacinth300$1 = "#738df2", hyacinth400$1 = "#3a60f7", hyacinth500$1 = "#274fee", hyacinth600$1 = "#143ee3", hyacinth700$1 = "#012bd2", hyacinth800$1 = "#0025b7", hyacinth900$1 = "#001f9c", purple50$1 = "#f1eafa", purple100$1 = "#e3d5f6", purple200$1 = "#c7abed", purple300$1 = "#aa82e3", purple400$1 = "#9e6de3", purple500$1 = "#894ede", purple600$1 = "#7735d4", purple700$1 = "#6721cb", purple800$1 = "#510eb0", purple900$1 = "#3f0198", magenta50$1 = "#fde8f3", magenta100$1 = "#fbd0e8", magenta200$1 = "#f6a2d0", magenta300$1 = "#f273b9", magenta400$1 = "#f248a6", magenta500$1 = "#e7258f", magenta600$1 = "#d4157e", magenta700$1 = "#c1026b", magenta800$1 = "#a1095c", magenta900$1 = "#8f0550", grey50$1 = "#f5f5f5", grey100$1 = "#ececec", grey200$1 = "#e5e5e5", grey300$1 = "#d8d8d8", grey400$1 = "#bcbcbc", grey500$1 = "#999999", grey600$1 = "#7a7a7a", grey700$1 = "#656565", grey800$1 = "#565656", grey900$1 = "#4b4b4b", colorBlack$1 = "#1e222b", colorWhite$1 = "#ffffff", boxShadowBase$1 = "0 4px 12px rgba(30, 34, 43, 0.08)", boxShadowLg$1 = "0 4px 24px 0 rgba(30, 34, 43, 0.08)", bgColor$1 = "#ececec", bgColorHover$1 = "#d8d8d8", bgColorSecondary$1 = "#ffffff", bgColorOverlay$1 = "#ffffff", textColor$1 = "#1e222b", textColorSecondary$1 = "#7a7a7a", textColorSecondaryDarker$1 = "#4b4b4b", textColorTertiary$1 = "#bcbcbc", borderColor$1 = "#e5e5e5", scrollbarColor$1 = "#bcbcbc", scrollbarColorHover$1 = "#999999", scrollbarColorActive$1 = "#7a7a7a", borderRadiusBase$1 = "4px", borderRadiusLg$1 = "8px", borderRadiusXl$1 = "12px", marginXl$1 = "24px", marginLg$1 = "20px", marginBase$1 = "16px", marginSm$1 = "12px", marginXs$1 = "8px", marginXxs$1 = "4px", paddingXl$1 = "20px", paddingLg$1 = "16px", paddingBase$1 = "12px", paddingSm$1 = "8px", paddingXs$1 = "4px", fontSizeXxl$1 = "20px", fontSizeXl$1 = "18px", fontSizeLg$1 = "16px", fontSizeBase$1 = "15px", fontSizeSm$1 = "14px", fontSizeXs$1 = "13px", fontSizeXxs$1 = "12px", breakpointXs$1 = "768px", breakpointSm$1 = "1024px", breakpointBase$1 = "1280px", breakpointLg$1 = "1536px", infoColor$1 = "#2daeff", successColor$1 = "#59d01e", warningColor$1 = "#ffbd37", errorColor$1 = "#fe4b4b", primaryColor$1 = "#274fee", primaryColorHover$1 = "#3a60f7", linkColor$1 = "#0b9efb", loopColor1$1 = "#9e6de3", loopColor2$1 = "#49b811", loopColor3$1 = "#0b9efb", loopColor4$1 = "#ffbd37", loopColor5$1 = "#f273b9", loopColor6$1 = "#00d2b2", loopColor7$1 = "#ff8c51", loopColor8$1 = "#565656", loopColor9$1 = "#274fee", loopColor10$1 = "#fa7979", loopColor11$1 = "#8bbb11", loopColor12$1 = "#d8b300", default_module = {
   red50: red50$1,
   red100: red100$1,
   red200: red200$1,
@@ -15469,6 +15543,7 @@ const switchWrapper = "univer-switch-wrapper", slider = "univer-slider", styles$
   bgColor: bgColor$1,
   bgColorHover: bgColorHover$1,
   bgColorSecondary: bgColorSecondary$1,
+  bgColorOverlay: bgColorOverlay$1,
   textColor: textColor$1,
   textColorSecondary: textColorSecondary$1,
   textColorSecondaryDarker: textColorSecondaryDarker$1,
@@ -15521,7 +15596,7 @@ const switchWrapper = "univer-switch-wrapper", slider = "univer-slider", styles$
   loopColor10: loopColor10$1,
   loopColor11: loopColor11$1,
   loopColor12: loopColor12$1
-}, red50 = "#fee7e7", red100 = "#fdcece", red200 = "#fb9d9d", red300 = "#fa7979", red400 = "#fe4b4b", red500 = "#f30b0b", red600 = "#e30909", red700 = "#cd0f0f", red800 = "#b20000", red900 = "#9d0000", orange50 = "#fef0e6", orange100 = "#fee1cd", orange200 = "#fdc49b", orange300 = "#fca669", orange400 = "#ff8c51", orange500 = "#fb8937", orange600 = "#f96800", orange700 = "#df5d00", orange800 = "#cc4f10", orange900 = "#b24000", gold50 = "#fef6e6", gold100 = "#feeecd", gold200 = "#fddc9b", gold300 = "#fccb69", gold400 = "#ffbd37", gold500 = "#faad14", gold600 = "#e59b07", gold700 = "#c68400", gold800 = "#a97100", gold900 = "#8f5f00", yellow50 = "#fefbe6", yellow100 = "#fef7cd", yellow200 = "#fdf09b", yellow300 = "#fce869", yellow400 = "#fbe137", yellow500 = "#f9d700", yellow600 = "#ebc301", yellow700 = "#d8b300", yellow800 = "#c5a300", yellow900 = "#b19401", verdancy50 = "#f7fde8", verdancy100 = "#effbd0", verdancy200 = "#def6a2", verdancy300 = "#cef273", verdancy400 = "#beee44", verdancy500 = "#a4dc16", verdancy600 = "#8bbb11", verdancy700 = "#7aa017", verdancy800 = "#688c0d", verdancy900 = "#58770a", green50 = "#effce8", green100 = "#dff9d2", green200 = "#bff3a5", green300 = "#9fed78", green400 = "#7fe74b", green500 = "#59d01e", green600 = "#49b811", green700 = "#409f11", green800 = "#398712", green900 = "#317310", jiqing50 = "#e5fffb", jiqing100 = "#ccfff7", jiqing200 = "#a9fff2", jiqing300 = "#78fce8", jiqing400 = "#2afede", jiqing500 = "#10e8c7", jiqing600 = "#00d2b2", jiqing700 = "#00b298", jiqing800 = "#009e87", jiqing900 = "#008b76", blue50 = "#e4f4fe", blue100 = "#d0edff", blue200 = "#9fdaff", blue300 = "#62c2ff", blue400 = "#2daeff", blue500 = "#0b9efb", blue600 = "#0493ee", blue700 = "#0080d2", blue800 = "#006cae", blue900 = "#005f9a", hyacinth50 = "#e8ecfd", hyacinth100 = "#d0d9fb", hyacinth200 = "#a2b3f6", hyacinth300 = "#738df2", hyacinth400 = "#3a60f7", hyacinth500 = "#274fee", hyacinth600 = "#143ee3", hyacinth700 = "#012bd2", hyacinth800 = "#0025b7", hyacinth900 = "#001f9c", purple50 = "#f1eafa", purple100 = "#e3d5f6", purple200 = "#c7abed", purple300 = "#aa82e3", purple400 = "#9e6de3", purple500 = "#894ede", purple600 = "#7735d4", purple700 = "#6721cb", purple800 = "#510eb0", purple900 = "#3f0198", magenta50 = "#fde8f3", magenta100 = "#fbd0e8", magenta200 = "#f6a2d0", magenta300 = "#f273b9", magenta400 = "#f248a6", magenta500 = "#e7258f", magenta600 = "#d4157e", magenta700 = "#c1026b", magenta800 = "#a1095c", magenta900 = "#8f0550", grey50 = "#f5f5f5", grey100 = "#ececec", grey200 = "#e5e5e5", grey300 = "#d8d8d8", grey400 = "#bcbcbc", grey500 = "#999999", grey600 = "#7a7a7a", grey700 = "#656565", grey800 = "#565656", grey900 = "#4b4b4b", colorBlack = "#1e222b", colorWhite = "#ffffff", boxShadowBase = "0 4px 12px rgba(30, 34, 43, 0.08)", boxShadowLg = "0 4px 24px 0 rgba(30, 34, 43, 0.08)", bgColor = "#ececec", bgColorHover = "#d8d8d8", bgColorSecondary = "#ffffff", textColor = "#1e222b", textColorSecondary = "#7a7a7a", textColorSecondaryDarker = "#4b4b4b", textColorTertiary = "#bcbcbc", borderColor = "#e5e5e5", scrollbarColor = "#bcbcbc", scrollbarColorHover = "#999999", scrollbarColorActive = "#7a7a7a", borderRadiusBase = "4px", borderRadiusLg = "8px", borderRadiusXl = "12px", marginXl = "24px", marginLg = "20px", marginBase = "16px", marginSm = "12px", marginXs = "8px", marginXxs = "4px", paddingXl = "20px", paddingLg = "16px", paddingBase = "12px", paddingSm = "8px", paddingXs = "4px", fontSizeXxl = "20px", fontSizeXl = "18px", fontSizeLg = "16px", fontSizeBase = "15px", fontSizeSm = "14px", fontSizeXs = "13px", fontSizeXxs = "12px", breakpointXs = "768px", breakpointSm = "1024px", breakpointBase = "1280px", breakpointLg = "1536px", infoColor = "#2daeff", successColor = "#59d01e", warningColor = "#ffbd37", errorColor = "#fe4b4b", primaryColor = "#409f11", primaryColorHover = "#49b811", linkColor = "#0b9efb", loopColor1 = "#9e6de3", loopColor2 = "#49b811", loopColor3 = "#0b9efb", loopColor4 = "#ffbd37", loopColor5 = "#f273b9", loopColor6 = "#00d2b2", loopColor7 = "#ff8c51", loopColor8 = "#565656", loopColor9 = "#274fee", loopColor10 = "#fa7979", loopColor11 = "#8bbb11", loopColor12 = "#d8b300", green_module = {
+}, red50 = "#fee7e7", red100 = "#fdcece", red200 = "#fb9d9d", red300 = "#fa7979", red400 = "#fe4b4b", red500 = "#f30b0b", red600 = "#e30909", red700 = "#cd0f0f", red800 = "#b20000", red900 = "#9d0000", orange50 = "#fef0e6", orange100 = "#fee1cd", orange200 = "#fdc49b", orange300 = "#fca669", orange400 = "#ff8c51", orange500 = "#fb8937", orange600 = "#f96800", orange700 = "#df5d00", orange800 = "#cc4f10", orange900 = "#b24000", gold50 = "#fef6e6", gold100 = "#feeecd", gold200 = "#fddc9b", gold300 = "#fccb69", gold400 = "#ffbd37", gold500 = "#faad14", gold600 = "#e59b07", gold700 = "#c68400", gold800 = "#a97100", gold900 = "#8f5f00", yellow50 = "#fefbe6", yellow100 = "#fef7cd", yellow200 = "#fdf09b", yellow300 = "#fce869", yellow400 = "#fbe137", yellow500 = "#f9d700", yellow600 = "#ebc301", yellow700 = "#d8b300", yellow800 = "#c5a300", yellow900 = "#b19401", verdancy50 = "#f7fde8", verdancy100 = "#effbd0", verdancy200 = "#def6a2", verdancy300 = "#cef273", verdancy400 = "#beee44", verdancy500 = "#a4dc16", verdancy600 = "#8bbb11", verdancy700 = "#7aa017", verdancy800 = "#688c0d", verdancy900 = "#58770a", green50 = "#effce8", green100 = "#dff9d2", green200 = "#bff3a5", green300 = "#9fed78", green400 = "#7fe74b", green500 = "#59d01e", green600 = "#49b811", green700 = "#409f11", green800 = "#398712", green900 = "#317310", jiqing50 = "#e5fffb", jiqing100 = "#ccfff7", jiqing200 = "#a9fff2", jiqing300 = "#78fce8", jiqing400 = "#2afede", jiqing500 = "#10e8c7", jiqing600 = "#00d2b2", jiqing700 = "#00b298", jiqing800 = "#009e87", jiqing900 = "#008b76", blue50 = "#e4f4fe", blue100 = "#d0edff", blue200 = "#9fdaff", blue300 = "#62c2ff", blue400 = "#2daeff", blue500 = "#0b9efb", blue600 = "#0493ee", blue700 = "#0080d2", blue800 = "#006cae", blue900 = "#005f9a", hyacinth50 = "#e8ecfd", hyacinth100 = "#d0d9fb", hyacinth200 = "#a2b3f6", hyacinth300 = "#738df2", hyacinth400 = "#3a60f7", hyacinth500 = "#274fee", hyacinth600 = "#143ee3", hyacinth700 = "#012bd2", hyacinth800 = "#0025b7", hyacinth900 = "#001f9c", purple50 = "#f1eafa", purple100 = "#e3d5f6", purple200 = "#c7abed", purple300 = "#aa82e3", purple400 = "#9e6de3", purple500 = "#894ede", purple600 = "#7735d4", purple700 = "#6721cb", purple800 = "#510eb0", purple900 = "#3f0198", magenta50 = "#fde8f3", magenta100 = "#fbd0e8", magenta200 = "#f6a2d0", magenta300 = "#f273b9", magenta400 = "#f248a6", magenta500 = "#e7258f", magenta600 = "#d4157e", magenta700 = "#c1026b", magenta800 = "#a1095c", magenta900 = "#8f0550", grey50 = "#f5f5f5", grey100 = "#ececec", grey200 = "#e5e5e5", grey300 = "#d8d8d8", grey400 = "#bcbcbc", grey500 = "#999999", grey600 = "#7a7a7a", grey700 = "#656565", grey800 = "#565656", grey900 = "#4b4b4b", colorBlack = "#1e222b", colorWhite = "#ffffff", boxShadowBase = "0 4px 12px rgba(30, 34, 43, 0.08)", boxShadowLg = "0 4px 24px 0 rgba(30, 34, 43, 0.08)", bgColor = "#ececec", bgColorHover = "#d8d8d8", bgColorSecondary = "#ffffff", bgColorOverlay = "#ffffff", textColor = "#1e222b", textColorSecondary = "#7a7a7a", textColorSecondaryDarker = "#4b4b4b", textColorTertiary = "#bcbcbc", borderColor = "#e5e5e5", scrollbarColor = "#bcbcbc", scrollbarColorHover = "#999999", scrollbarColorActive = "#7a7a7a", borderRadiusBase = "4px", borderRadiusLg = "8px", borderRadiusXl = "12px", marginXl = "24px", marginLg = "20px", marginBase = "16px", marginSm = "12px", marginXs = "8px", marginXxs = "4px", paddingXl = "20px", paddingLg = "16px", paddingBase = "12px", paddingSm = "8px", paddingXs = "4px", fontSizeXxl = "20px", fontSizeXl = "18px", fontSizeLg = "16px", fontSizeBase = "15px", fontSizeSm = "14px", fontSizeXs = "13px", fontSizeXxs = "12px", breakpointXs = "768px", breakpointSm = "1024px", breakpointBase = "1280px", breakpointLg = "1536px", infoColor = "#2daeff", successColor = "#59d01e", warningColor = "#ffbd37", errorColor = "#fe4b4b", primaryColor = "#409f11", primaryColorHover = "#49b811", linkColor = "#0b9efb", loopColor1 = "#9e6de3", loopColor2 = "#49b811", loopColor3 = "#0b9efb", loopColor4 = "#ffbd37", loopColor5 = "#f273b9", loopColor6 = "#00d2b2", loopColor7 = "#ff8c51", loopColor8 = "#565656", loopColor9 = "#274fee", loopColor10 = "#fa7979", loopColor11 = "#8bbb11", loopColor12 = "#d8b300", green_module = {
   red50,
   red100,
   red200,
@@ -15649,6 +15724,7 @@ const switchWrapper = "univer-switch-wrapper", slider = "univer-slider", styles$
   bgColor,
   bgColorHover,
   bgColorSecondary,
+  bgColorOverlay,
   textColor,
   textColorSecondary,
   textColorSecondaryDarker,