@univerjs/sheets-conditional-formatting-ui 0.7.0 → 0.8.0-beta.0

package/lib/index.js

@@ -4,7 +4,7 @@ var ye = (t, e, r) => ir(t, typeof e != "symbol" ? e + "" : e, r);
 import { CommandType as he, ICommandService as te, IUniverInstanceService as z, ColorKit as fn, BooleanNumber as ae, LocaleService as re, UniverInstanceType as $, Tools as Wt, get as sr, set as or, createInterceptorKey as pn, InterceptorManager as ar, Inject as O, Disposable as ce, Injector as ve, Rectangle as fe, generateRandomId as lr, ObjectMatrix as we, Range as pe, toDisposable as Cn, InterceptorEffectEnum as cr, DependentOn as yn, IConfigService as bn, Plugin as Sn, merge as In, registerDependencies as ur, touchDependencies as Ft } from "@univerjs/core";
 import { ConditionalFormattingRuleModel as Q, CFSubRuleType as F, CFRuleType as U, AddConditionalRuleMutation as se, CFNumberOperator as P, getColorScaleFromValue as dr, iconMap as Ee, DEFAULT_BG_COLOR as hr, DEFAULT_FONT_COLOR as vr, defaultDataBarPositiveColor as Ke, defaultDataBarNativeColor as Xe, CFValueType as A, createDefaultValueByValueType as Je, removeUndefinedAttr as gr, createDefaultValue as mt, CFTextOperator as j, CFTimePeriodOperator as ue, iconGroup as mr, getOppositeOperator as Ht, compareWithNumber as fr, EMPTY_ICON_TYPE as pr, SetCfCommand as Cr, AddCfCommand as _n, SetConditionalRuleMutation as be, DeleteConditionalRuleMutation as Se, MoveConditionalRuleMutation as Tn, ClearWorksheetCfCommand as Rn, DeleteCfCommand as Kt, MoveCfCommand as yr, ClearRangeCfCommand as br, createDefaultRule as Te, ConditionalFormattingViewModel as it, SHEET_CONDITIONAL_FORMATTING_PLUGIN as st, DeleteConditionalRuleMutationUndoFactory as Le, AddConditionalRuleMutationUndoFactory as xn, setConditionalRuleMutationUndoFactory as Ae, isRangesEqual as Sr, ConditionalFormattingService as wn, DEFAULT_PADDING as Ir, DEFAULT_WIDTH as _r, UniverSheetsConditionalFormattingPlugin as En, CONDITIONAL_FORMATTING_VIEWPORT_CACHE_LENGTH as Tr } from "@univerjs/sheets-conditional-formatting";
 import { getSheetCommandTarget as Ce, SheetsSelectionsService as $e, RemoveSheetMutation as Rr, SetWorksheetActiveOperation as qt, setEndForRange as xr, SetSelectionsOperation as wr, checkRangesEditablePermission as ft, rangeToDiscreteRange as Er, findAllRectangle as pt, createTopMatrixFromMatrix as Ct, SheetPermissionCheckController as Nr, WorksheetEditPermission as Nn, WorksheetSetCellStylePermission as Mn, RangeProtectionPermissionEditPoint as Vn, WorkbookEditablePermission as kn, RefRangeService as Mr, handleDefaultRangeChangeWithEffectRefCommands as Vr, SheetInterceptorService as Gt, INTERCEPTOR_POINT as kr, ClearSelectionFormatCommand as Fr, ClearSelectionAllCommand as Ur, RangeMergeUtil as Pr, AFTER_CELL_EDIT as Or } from "@univerjs/sheets";
-import { useDependency as W, ComponentManager as zt, useSidebarClick as Nt, ILayoutService as Lr, useScrollYOverContainer as Ar, ISidebarService as Fn, useObservable as Dr, getMenuHiddenObservable as $r, MenuItemType as jr, RibbonStartGroup as Hr, IMenuManagerService as Br } from "@univerjs/ui";
+import { useDependency as W, ComponentManager as zt, useSidebarClick as Nt, ILayoutService as Lr, useScrollYOverContainer as Ar, ISidebarService as Fn, useObservable as Dr, getMenuHiddenObservable as $r, MenuItemType as jr, RibbonDataGroup as Hr, IMenuManagerService as Br } from "@univerjs/ui";
 import { jsx as c, jsxs as k, Fragment as Bt } from "react/jsx-runtime";
 import { forwardRef as Ve, useRef as de, createElement as je, useMemo as J, useState as N, useEffect as K } from "react";
 import { Dropdown as Zt, clsx as X, ColorPicker as Wr, borderClassName as He, Select as le, InputNumber as Ne, RadioGroup as qr, Radio as Xt, Checkbox as yt, Input as Gr, Button as Jt, Tooltip as Qt, ReactGridLayout as zr } from "@univerjs/design";
@@ -20,11 +20,11 @@ const Dn = {
   handler(t, e) {
     if (!e)
       return !1;
-    const { ranges: r, style: n, stopIfTrue: i, operator: s } = e, o = t.get(Q), d = t.get(te), a = t.get(z), u = Ce(a);
-    if (!u) return !1;
-    const { unitId: l, subUnitId: h } = u, v = o.createCfId(l, h), f = {
+    const { ranges: r, style: n, stopIfTrue: i, operator: s } = e, o = t.get(Q), d = t.get(te), a = t.get(z), h = Ce(a);
+    if (!h) return !1;
+    const { unitId: l, subUnitId: u } = h, g = o.createCfId(l, u), p = {
       ranges: r,
-      cfId: v,
+      cfId: g,
       stopIfTrue: !!i,
       rule: {
         type: U.highlightCell,
@@ -33,7 +33,7 @@ const Dn = {
         style: n
       }
     };
-    return d.executeCommand(se.id, { unitId: l, subUnitId: h, rule: f });
+    return d.executeCommand(se.id, { unitId: l, subUnitId: u, rule: p });
   }
 }, $n = {
   type: he.COMMAND,
@@ -43,16 +43,16 @@ const Dn = {
       return !1;
     const { ranges: r, config: n, stopIfTrue: i } = e, s = t.get(Q), o = t.get(te), d = t.get(z), a = Ce(d);
     if (!a) return !1;
-    const { unitId: u, subUnitId: l } = a, h = s.createCfId(u, l), v = {
+    const { unitId: h, subUnitId: l } = a, u = s.createCfId(h, l), g = {
       ranges: r,
-      cfId: h,
+      cfId: u,
       stopIfTrue: !!i,
       rule: {
         type: U.colorScale,
         config: n
       }
     };
-    return o.executeCommand(se.id, { unitId: u, subUnitId: l, rule: v });
+    return o.executeCommand(se.id, { unitId: h, subUnitId: l, rule: g });
   }
 }, jn = {
   type: he.COMMAND,
@@ -60,15 +60,15 @@ const Dn = {
   handler(t, e) {
     if (!e)
       return !1;
-    const { ranges: r, min: n, max: i, nativeColor: s, positiveColor: o, isGradient: d, stopIfTrue: a, isShowValue: u } = e, l = t.get(Q), h = t.get(z), v = Ce(h);
-    if (!v) return !1;
-    const { unitId: f, subUnitId: S } = v, p = t.get(te), T = l.createCfId(f, S), _ = {
+    const { ranges: r, min: n, max: i, nativeColor: s, positiveColor: o, isGradient: d, stopIfTrue: a, isShowValue: h } = e, l = t.get(Q), u = t.get(z), g = Ce(u);
+    if (!g) return !1;
+    const { unitId: p, subUnitId: S } = g, f = t.get(te), T = l.createCfId(p, S), _ = {
       ranges: r,
       cfId: T,
       stopIfTrue: !!a,
       rule: {
         type: U.dataBar,
-        isShowValue: u,
+        isShowValue: h,
         config: {
           min: n,
           max: i,
@@ -78,7 +78,7 @@ const Dn = {
         }
       }
     };
-    return p.executeCommand(se.id, { unitId: f, subUnitId: S, rule: _ });
+    return f.executeCommand(se.id, { unitId: p, subUnitId: S, rule: _ });
   }
 }, Hn = {
   type: he.COMMAND,
@@ -88,9 +88,9 @@ const Dn = {
       return !1;
     const { ranges: r, style: n, stopIfTrue: i } = e, s = t.get(Q), o = t.get(te), d = t.get(z), a = Ce(d);
     if (!a) return !1;
-    const { unitId: u, subUnitId: l } = a, h = s.createCfId(u, l), v = {
+    const { unitId: h, subUnitId: l } = a, u = s.createCfId(h, l), g = {
       ranges: r,
-      cfId: h,
+      cfId: u,
       stopIfTrue: !!i,
       rule: {
         type: U.highlightCell,
@@ -98,7 +98,7 @@ const Dn = {
         style: n
       }
     };
-    return o.executeCommand(se.id, { unitId: u, subUnitId: l, rule: v });
+    return o.executeCommand(se.id, { unitId: h, subUnitId: l, rule: g });
   }
 }, Bn = {
   type: he.COMMAND,
@@ -106,44 +106,44 @@ const Dn = {
   handler(t, e) {
     if (!e)
       return !1;
-    const { ranges: r, style: n, stopIfTrue: i, operator: s, value: o } = e, d = t.get(Q), a = t.get(te), u = t.get(z), l = Ce(u);
+    const { ranges: r, style: n, stopIfTrue: i, operator: s, value: o } = e, d = t.get(Q), a = t.get(te), h = t.get(z), l = Ce(h);
     if (!l) return !1;
-    const { unitId: h, subUnitId: v } = l, f = d.createCfId(h, v);
+    const { unitId: u, subUnitId: g } = l, p = d.createCfId(u, g);
     let S;
     if ([P.between, P.notBetween].includes(s)) {
-      const p = o;
-      if (p.length !== 2 || !Array.isArray(p))
+      const f = o;
+      if (f.length !== 2 || !Array.isArray(f))
         return !1;
       S = {
         ranges: r,
-        cfId: f,
+        cfId: p,
         stopIfTrue: !!i,
         rule: {
           type: U.highlightCell,
           subType: F.number,
           operator: s,
           style: n,
-          value: p
+          value: f
         }
       };
     } else {
-      const p = o;
-      if (typeof p != "number")
+      const f = o;
+      if (typeof f != "number")
         return !1;
       S = {
         ranges: r,
-        cfId: f,
+        cfId: p,
         stopIfTrue: !!i,
         rule: {
           type: U.highlightCell,
           subType: F.number,
           operator: s,
           style: n,
-          value: p
+          value: f
         }
       };
     }
-    return a.executeCommand(se.id, { unitId: h, subUnitId: v, rule: S });
+    return a.executeCommand(se.id, { unitId: u, subUnitId: g, rule: S });
   }
 }, Wn = {
   type: he.COMMAND,
@@ -151,9 +151,9 @@ const Dn = {
   handler(t, e) {
     if (!e)
       return !1;
-    const { ranges: r, style: n, stopIfTrue: i, isPercent: s, isBottom: o, value: d } = e, a = t.get(Q), u = t.get(z), l = t.get(te), h = Ce(u);
-    if (!h) return !1;
-    const { unitId: v, subUnitId: f } = h, S = a.createCfId(v, f), p = {
+    const { ranges: r, style: n, stopIfTrue: i, isPercent: s, isBottom: o, value: d } = e, a = t.get(Q), h = t.get(z), l = t.get(te), u = Ce(h);
+    if (!u) return !1;
+    const { unitId: g, subUnitId: p } = u, S = a.createCfId(g, p), f = {
       ranges: r,
       cfId: S,
       stopIfTrue: !!i,
@@ -166,7 +166,7 @@ const Dn = {
         value: d
       }
     };
-    return l.executeCommand(se.id, { unitId: v, subUnitId: f, rule: p });
+    return l.executeCommand(se.id, { unitId: g, subUnitId: p, rule: f });
   }
 }, qn = {
   type: he.COMMAND,
@@ -174,11 +174,11 @@ const Dn = {
   handler(t, e) {
     if (!e)
       return !1;
-    const { ranges: r, style: n, stopIfTrue: i, operator: s, value: o } = e, d = t.get(Q), a = t.get(z), u = Ce(a);
-    if (!u) return !1;
-    const { unitId: l, subUnitId: h } = u, v = t.get(te), f = d.createCfId(l, h), S = {
+    const { ranges: r, style: n, stopIfTrue: i, operator: s, value: o } = e, d = t.get(Q), a = t.get(z), h = Ce(a);
+    if (!h) return !1;
+    const { unitId: l, subUnitId: u } = h, g = t.get(te), p = d.createCfId(l, u), S = {
       ranges: r,
-      cfId: f,
+      cfId: p,
       stopIfTrue: !!i,
       rule: {
         type: U.highlightCell,
@@ -188,7 +188,7 @@ const Dn = {
         value: o
       }
     };
-    return v.executeCommand(se.id, { unitId: l, subUnitId: h, rule: S });
+    return g.executeCommand(se.id, { unitId: l, subUnitId: u, rule: S });
   }
 }, Gn = {
   type: he.COMMAND,
@@ -196,11 +196,11 @@ const Dn = {
   handler(t, e) {
     if (!e)
       return !1;
-    const { ranges: r, style: n, stopIfTrue: i, operator: s } = e, o = t.get(Q), d = t.get(z), a = t.get(te), u = Ce(d);
-    if (!u) return !1;
-    const { unitId: l, subUnitId: h } = u, v = o.createCfId(l, h), f = {
+    const { ranges: r, style: n, stopIfTrue: i, operator: s } = e, o = t.get(Q), d = t.get(z), a = t.get(te), h = Ce(d);
+    if (!h) return !1;
+    const { unitId: l, subUnitId: u } = h, g = o.createCfId(l, u), p = {
       ranges: r,
-      cfId: v,
+      cfId: g,
       stopIfTrue: !!i,
       rule: {
         type: U.highlightCell,
@@ -209,7 +209,7 @@ const Dn = {
         style: n
       }
     };
-    return a.executeCommand(se.id, { unitId: l, subUnitId: h, rule: f });
+    return a.executeCommand(se.id, { unitId: l, subUnitId: u, rule: p });
   }
 }, zn = {
   type: he.COMMAND,
@@ -219,9 +219,9 @@ const Dn = {
       return !1;
     const { ranges: r, style: n, stopIfTrue: i } = e, s = t.get(Q), o = t.get(z), d = t.get(te), a = Ce(o);
     if (!a) return !1;
-    const { unitId: u, subUnitId: l } = a, h = s.createCfId(u, l), v = {
+    const { unitId: h, subUnitId: l } = a, u = s.createCfId(h, l), g = {
       ranges: r,
-      cfId: h,
+      cfId: u,
       stopIfTrue: !!i,
       rule: {
         type: U.highlightCell,
@@ -229,7 +229,7 @@ const Dn = {
         style: n
       }
     };
-    return d.executeCommand(se.id, { unitId: u, subUnitId: l, rule: v });
+    return d.executeCommand(se.id, { unitId: h, subUnitId: l, rule: g });
   }
 };
 var oe = function() {
@@ -319,17 +319,17 @@ var hi = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 17", width: "1em"
 });
 ot.displayName = "SlashSingle";
 const Me = (t) => {
-  const { color: e, onChange: r, disable: n = !1, iconId: i = "PaintBucket", className: s, isNeedDropdownIcon: o = !0 } = t, d = W(zt), a = J(() => new fn(e), [e]), u = d.get(i);
-  return u ? n ? /* @__PURE__ */ c(u, { className: X("univer-fill-primary-600", s), extend: { colorChannel1: a.isValid ? e : "" } }) : /* @__PURE__ */ c(
+  const { color: e, onChange: r, disable: n = !1, iconId: i = "PaintBucket", className: s, isNeedDropdownIcon: o = !0 } = t, d = W(zt), a = J(() => new fn(e), [e]), h = d.get(i);
+  return h ? n ? /* @__PURE__ */ c(h, { className: X("univer-fill-primary-600", s), extend: { colorChannel1: a.isValid ? e : "" } }) : /* @__PURE__ */ c(
     Zt,
     {
       overlay: /* @__PURE__ */ c("div", { className: "univer-rounded-lg univer-p-4", children: /* @__PURE__ */ c(Wr, { value: e, onChange: r }) }),
       children: /* @__PURE__ */ k(
         "span",
         {
-          className: X("univer-flex univer-cursor-pointer univer-items-center univer-rounded univer-p-1 hover:univer-bg-gray-100", s),
+          className: X("univer-flex univer-cursor-pointer univer-items-center univer-rounded univer-p-1 dark:hover:!univer-bg-gray-700 hover:univer-bg-gray-100", s),
           children: [
-            /* @__PURE__ */ c(u, { className: "univer-fill-primary-600", extend: { colorChannel1: a.isValid ? e : "" } }),
+            /* @__PURE__ */ c(h, { className: "univer-fill-primary-600", extend: { colorChannel1: a.isValid ? e : "" } }),
             o && /* @__PURE__ */ c(
               Vt,
               {
@@ -342,67 +342,73 @@ const Me = (t) => {
     }
   ) : null;
 }, We = (t) => {
-  var s, o, d;
+  var s, o, d, a, h;
   const e = t.rule;
   if (!e) return null;
   const r = J(() => {
     if (e.type === U.colorScale) {
-      const a = e.config.map((h, v) => ({ color: new fn(h.color), value: v })), u = a.length - 1;
-      return new Array(5).fill("").map((h, v, f) => v * u / (f.length - 1)).map((h) => dr(a, h));
+      const l = e.config.map((p, S) => ({ color: new fn(p.color), value: S })), u = l.length - 1;
+      return new Array(5).fill("").map((p, S, f) => S * u / (f.length - 1)).map((p) => dr(l, p));
     }
     return null;
   }, [e]), n = J(() => {
     if (e.type === U.iconSet)
-      return e.config.map((a) => {
-        const u = Ee[a.iconType];
-        return u && u[Number(a.iconId)];
+      return e.config.map((l) => {
+        const u = Ee[l.iconType];
+        return u && u[Number(l.iconId)];
       });
-  }, [e]), i = `univer-pointer-events-none univer-flex univer-h-5 univer-min-w-[72px] univer-items-center
-    univer-justify-center univer-text-xs`;
+  }, [e]), i = "univer-pointer-events-none univer-flex univer-h-5 univer-min-w-[72px] univer-items-center univer-justify-center univer-text-xs";
   switch (e.type) {
     case U.dataBar: {
-      const { isGradient: a } = e.config, u = a ? `linear-gradient(to right, ${e.config.positiveColor || Ke}, rgb(255 255 255))` : e.config.positiveColor, l = a ? `linear-gradient(to right,  rgb(255 255 255),${e.config.nativeColor || Xe})` : e.config.nativeColor;
+      const { isGradient: l } = e.config, u = l ? `linear-gradient(to right, ${e.config.positiveColor || Ke}, rgb(255 255 255))` : e.config.positiveColor, g = l ? `linear-gradient(to right,  rgb(255 255 255),${e.config.nativeColor || Xe})` : e.config.nativeColor;
       return /* @__PURE__ */ k("div", { className: i, children: [
         /* @__PURE__ */ c(
           "div",
           {
-            className: "univer-h-full univer-w-1/2",
+            className: "univer-h-full univer-w-1/2 univer-border univer-border-solid",
             style: {
-              background: l,
-              border: `1px solid ${e.config.nativeColor || Xe}`
+              background: g,
+              borderColor: (s = e.config.nativeColor) != null ? s : Xe
             }
           }
         ),
         /* @__PURE__ */ c(
           "div",
           {
-            className: "univer-h-full univer-w-1/2",
+            className: "univer-h-full univer-w-1/2 univer-border univer-border-solid",
             style: {
               background: u,
-              border: `1px solid ${e.config.positiveColor || Ke}`
+              borderColor: (o = e.config.positiveColor) != null ? o : Ke
             }
           }
         )
       ] });
     }
     case U.colorScale:
-      return r && /* @__PURE__ */ c("div", { className: i, children: r.map((a, u) => /* @__PURE__ */ c("div", { className: "univer-h-full", style: { width: `${100 / r.length}%`, background: a } }, u)) });
+      return r && /* @__PURE__ */ c("div", { className: i, children: r.map((l, u) => /* @__PURE__ */ c(
+        "div",
+        {
+          className: "univer-h-full",
+          style: { width: `${100 / r.length}%`, background: l }
+        },
+        u
+      )) });
     case U.iconSet:
-      return n && /* @__PURE__ */ c("div", { className: i, children: n.map((a, u) => a ? /* @__PURE__ */ c("img", { className: "univer-h-full", src: a, draggable: !1 }, u) : /* @__PURE__ */ c(ot, {}, u)) });
+      return n && /* @__PURE__ */ c("div", { className: i, children: n.map((l, u) => l ? /* @__PURE__ */ c("img", { className: "univer-h-full", src: l, draggable: !1 }, u) : /* @__PURE__ */ c(ot, {}, u)) });
     case U.highlightCell: {
-      const { ul: a, st: u, it: l, bl: h, bg: v, cl: f } = e.style, S = (a == null ? void 0 : a.s) === ae.TRUE, p = (u == null ? void 0 : u.s) === ae.TRUE, T = l === ae.TRUE, _ = h === ae.TRUE, R = (s = v == null ? void 0 : v.rgb) != null ? s : hr, w = (o = f == null ? void 0 : f.rgb) != null ? o : vr, x = {
-        textDecoration: (d = `${S ? "underline" : ""} ${p ? "line-through" : ""}`.replace(/^ /, "")) != null ? d : void 0,
-        backgroundColor: R,
-        color: w
+      const { ul: l, st: u, it: g, bl: p, bg: S, cl: f } = e.style, T = (l == null ? void 0 : l.s) === ae.TRUE, _ = (u == null ? void 0 : u.s) === ae.TRUE, R = g === ae.TRUE, w = p === ae.TRUE, x = (d = S == null ? void 0 : S.rgb) != null ? d : hr, v = (a = f == null ? void 0 : f.rgb) != null ? a : vr, C = {
+        textDecoration: (h = `${T ? "underline" : ""} ${_ ? "line-through" : ""}`.replace(/^ /, "")) != null ? h : void 0,
+        backgroundColor: x,
+        color: v
       };
       return /* @__PURE__ */ c(
         "div",
         {
           className: X(i, {
-            "univer-font-bold": _,
-            "univer-italic": T
+            "univer-font-bold": w,
+            "univer-italic": R
           }),
-          style: x,
+          style: C,
           children: "123"
         }
       );
@@ -410,46 +416,46 @@ const Me = (t) => {
   }
 }, at = X("univer-mt-5 univer-px-1 univer-py-2 univer-rounded", He), Re = (t, e) => ({ label: e.t(`sheet.cf.valueType.${t}`), value: t }), Lt = (t) => {
   var S;
-  const { type: e, className: r, onChange: n, id: i, value: s } = t, o = W(z), d = o.getCurrentUnitForType($.UNIVER_SHEET).getUnitId(), a = (S = o.getCurrentUnitForType($.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : S.getSheetId(), u = J(() => String(s).startsWith("=") ? String(s) : "=", [s]), l = J(() => [A.max, A.min, "none"].includes(e) ? { disabled: !0 } : [A.percent, A.percentile].includes(e) ? {
+  const { type: e, className: r, onChange: n, id: i, value: s } = t, o = W(z), d = o.getCurrentUnitForType($.UNIVER_SHEET).getUnitId(), a = (S = o.getCurrentUnitForType($.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : S.getSheetId(), h = J(() => String(s).startsWith("=") ? String(s) : "=", [s]), l = J(() => [A.max, A.min, "none"].includes(e) ? { disabled: !0 } : [A.percent, A.percentile].includes(e) ? {
     min: 0,
     max: 100
   } : {
     min: Number.MIN_SAFE_INTEGER,
     max: Number.MAX_SAFE_INTEGER
-  }, [e]), h = de(null), [v, f] = N(!1);
-  return Nt((p) => {
+  }, [e]), u = de(null), [g, p] = N(!1);
+  return Nt((f) => {
     var _;
-    ((_ = h.current) == null ? void 0 : _.isClickOutSide(p)) && f(!1);
+    ((_ = u.current) == null ? void 0 : _.isClickOutSide(f)) && p(!1);
   }), e === A.formula ? /* @__PURE__ */ c("div", { className: "univer-ml-1 univer-w-full", children: /* @__PURE__ */ c(
     Mt,
     {
-      ref: h,
-      className: X("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent dark:univer-bg-gray-700 dark:univer-text-white hover:univer-border-primary-600", He),
-      initValue: u,
+      ref: u,
+      className: X("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent dark:!univer-bg-gray-700 dark:!univer-text-white hover:univer-border-primary-600", He),
+      initValue: h,
       unitId: d,
       subUnitId: a,
-      isFocus: v,
-      onChange: (p = "") => {
-        n(p || "");
+      isFocus: g,
+      onChange: (f = "") => {
+        n(f || "");
       },
-      onFocus: () => f(!0)
+      onFocus: () => p(!0)
     }
-  ) }) : /* @__PURE__ */ c(Ne, { className: r, value: Number(t.value) || 0, onChange: (p) => t.onChange(p || 0), ...l });
+  ) }) : /* @__PURE__ */ c(Ne, { className: r, value: Number(t.value) || 0, onChange: (f) => t.onChange(f || 0), ...l });
 }, vi = (t) => {
   var L;
-  const { interceptorManager: e } = t, r = W(re), n = ((L = t.rule) == null ? void 0 : L.type) === U.colorScale ? t.rule : void 0, i = [Re(A.num, r), Re(A.percent, r), Re(A.percentile, r), Re(A.formula, r)], s = [Re(A.min, r), ...i], o = [Re("none", r), ...i], d = [Re(A.max, r), ...i], [a, u] = N(() => {
+  const { interceptorManager: e } = t, r = W(re), n = ((L = t.rule) == null ? void 0 : L.type) === U.colorScale ? t.rule : void 0, i = [Re(A.num, r), Re(A.percent, r), Re(A.percentile, r), Re(A.formula, r)], s = [Re(A.min, r), ...i], o = [Re("none", r), ...i], d = [Re(A.max, r), ...i], [a, h] = N(() => {
     var I;
     const m = A.min;
     return n && ((I = n.config[0]) == null ? void 0 : I.value.type) || m;
-  }), [l, h] = N(() => {
+  }), [l, u] = N(() => {
     var I;
     const m = "none";
     return !n || n.config.length !== 3 ? m : ((I = n.config[1]) == null ? void 0 : I.value.type) || m;
-  }), [v, f] = N(() => {
+  }), [g, p] = N(() => {
     var I;
     const m = A.max;
     return n && ((I = n.config[n.config.length - 1]) == null ? void 0 : I.value.type) || m;
-  }), [S, p] = N(() => {
+  }), [S, f] = N(() => {
     if (!n)
       return 10;
     const I = n.config[0];
@@ -466,7 +472,7 @@ const Me = (t) => {
       return 90;
     const I = (H = n.config[n.config.length - 1]) == null ? void 0 : H.value.value;
     return I === void 0 ? 90 : I;
-  }), [x, g] = N(() => {
+  }), [x, v] = N(() => {
     var I;
     const m = "#d0d9fb";
     return n && ((I = n.config[0]) == null ? void 0 : I.color) || m;
@@ -484,9 +490,9 @@ const Me = (t) => {
   }, []);
   K(() => e.intercept(e.getInterceptPoints().submit, {
     handler() {
-      return E({ minType: a, medianType: l, maxType: v, minValue: S, medianValue: T, maxValue: R, minColor: x, medianColor: C, maxColor: y });
+      return E({ minType: a, medianType: l, maxType: g, minValue: S, medianValue: T, maxValue: R, minColor: x, medianColor: C, maxColor: y });
     }
-  }), [E, a, l, v, S, T, R, x, C, y, e]);
+  }), [E, a, l, g, S, T, R, x, C, y, e]);
   const V = (m) => {
     t.onChange(E(m));
   };
@@ -494,15 +500,15 @@ const Me = (t) => {
     /* @__PURE__ */ c(
       "div",
       {
-        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
         children: r.t("sheet.cf.panel.styleRule")
       }
     ),
-    /* @__PURE__ */ c("div", { className: at, children: /* @__PURE__ */ c(We, { rule: E({ minType: a, medianType: l, maxType: v, minValue: S, medianValue: T, maxValue: R, minColor: x, medianColor: C, maxColor: y }) }) }),
+    /* @__PURE__ */ c("div", { className: at, children: /* @__PURE__ */ c(We, { rule: E({ minType: a, medianType: l, maxType: g, minValue: S, medianValue: T, maxValue: R, minColor: x, medianColor: C, maxColor: y }) }) }),
     /* @__PURE__ */ c(
       "div",
       {
-        className: "univer-mt-3 univer-text-xs univer-text-gray-600 dark:univer-text-gray-200",
+        className: "univer-mt-3 univer-text-xs univer-text-gray-600 dark:!univer-text-gray-200",
         children: r.t("sheet.cf.valueType.min")
       }
     ),
@@ -514,12 +520,12 @@ const Me = (t) => {
           options: s,
           value: a,
           onChange: (m) => {
-            u(m);
+            h(m);
             const I = Je(m, 10);
-            p(I), V({
+            f(I), V({
               minType: m,
               medianType: l,
-              maxType: v,
+              maxType: g,
               minValue: I,
               medianValue: T,
               maxValue: R,
@@ -538,10 +544,10 @@ const Me = (t) => {
           value: S,
           type: a,
           onChange: (m) => {
-            p(m), V({
+            f(m), V({
               minType: a,
               medianType: l,
-              maxType: v,
+              maxType: g,
               minValue: m,
               medianValue: T,
               maxValue: R,
@@ -558,10 +564,10 @@ const Me = (t) => {
           className: "univer-ml-1",
           color: x,
           onChange: (m) => {
-            g(m), V({
+            v(m), V({
               minType: a,
               medianType: l,
-              maxType: v,
+              maxType: g,
               minValue: S,
               medianValue: T,
               maxValue: R,
@@ -576,7 +582,7 @@ const Me = (t) => {
     /* @__PURE__ */ c(
       "div",
       {
-        className: "univer-mt-3 univer-text-xs univer-text-gray-600dark:univer-text-gray-200",
+        className: "univer-mt-3 univer-text-xs univer-text-gray-600dark:!univer-text-gray-200",
         children: r.t("sheet.cf.panel.medianValue")
       }
     ),
@@ -588,12 +594,12 @@ const Me = (t) => {
           options: o,
           value: l,
           onChange: (m) => {
-            h(m);
+            u(m);
             const I = Je(m, 50);
             _(I), V({
               minType: a,
               medianType: m,
-              maxType: v,
+              maxType: g,
               minValue: S,
               medianValue: I,
               maxValue: R,
@@ -615,7 +621,7 @@ const Me = (t) => {
             _(m), V({
               minType: a,
               medianType: l,
-              maxType: v,
+              maxType: g,
               minValue: S,
               medianValue: m,
               maxValue: R,
@@ -635,7 +641,7 @@ const Me = (t) => {
             b(m), V({
               minType: a,
               medianType: l,
-              maxType: v,
+              maxType: g,
               minValue: S,
               medianValue: T,
               maxValue: R,
@@ -650,7 +656,7 @@ const Me = (t) => {
     /* @__PURE__ */ c(
       "div",
       {
-        className: "univer-mt-3 univer-text-xs univer-text-gray-600 dark:univer-text-gray-200",
+        className: "univer-mt-3 univer-text-xs univer-text-gray-600 dark:!univer-text-gray-200",
         children: r.t("sheet.cf.valueType.max")
       }
     ),
@@ -660,9 +666,9 @@ const Me = (t) => {
         {
           className: "univer-flex-shrink-0",
           options: d,
-          value: v,
+          value: g,
           onChange: (m) => {
-            f(m);
+            p(m);
             const I = Je(m, 90);
             w(I), V({
               minType: a,
@@ -684,12 +690,12 @@ const Me = (t) => {
           id: "max",
           className: "univer-ml-1",
           value: R,
-          type: v,
+          type: g,
           onChange: (m) => {
             w(m), V({
               minType: a,
               medianType: l,
-              maxType: v,
+              maxType: g,
               minValue: S,
               medianValue: T,
               maxValue: m,
@@ -709,7 +715,7 @@ const Me = (t) => {
             M(m), V({
               minType: a,
               medianType: l,
-              maxType: v,
+              maxType: g,
               minValue: S,
               medianValue: T,
               maxValue: R,
@@ -723,13 +729,13 @@ const Me = (t) => {
     ] })
   ] });
 }, Ue = (t, e) => ({ label: e.t(`sheet.cf.valueType.${t}`), value: t }), sn = (t) => {
-  var p;
-  const { onChange: e, className: r, value: n, type: i, id: s, disabled: o = !1 } = t, d = W(z), a = d.getCurrentUnitForType($.UNIVER_SHEET).getUnitId(), u = (p = d.getCurrentUnitForType($.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : p.getSheetId(), l = de(null), [h, v] = N(!1);
+  var f;
+  const { onChange: e, className: r, value: n, type: i, id: s, disabled: o = !1 } = t, d = W(z), a = d.getCurrentUnitForType($.UNIVER_SHEET).getUnitId(), h = (f = d.getCurrentUnitForType($.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : f.getSheetId(), l = de(null), [u, g] = N(!1);
   Nt((T) => {
     var R;
-    ((R = l.current) == null ? void 0 : R.isClickOutSide(T)) && v(!1);
+    ((R = l.current) == null ? void 0 : R.isClickOutSide(T)) && g(!1);
   });
-  const f = de(n), S = J(() => [A.percentile, A.percent].includes(i) ? {
+  const p = de(n), S = J(() => [A.percentile, A.percent].includes(i) ? {
     max: 100,
     min: 0
   } : {
@@ -737,20 +743,20 @@ const Me = (t) => {
     max: Number.MAX_SAFE_INTEGER
   }, [i]);
   if (i === A.formula) {
-    const T = String(f.current).startsWith("=") ? String(f.current) || "" : "=";
+    const T = String(p.current).startsWith("=") ? String(p.current) || "" : "=";
     return /* @__PURE__ */ c("div", { className: "univer-ml-3 univer-w-full", children: /* @__PURE__ */ c(
       Mt,
       {
         ref: l,
-        className: X("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent dark:univer-bg-gray-700 dark:univer-text-white hover:univer-border-primary-600", He),
+        className: X("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent dark:!univer-bg-gray-700 dark:!univer-text-white hover:univer-border-primary-600", He),
         initValue: T,
         unitId: a,
-        subUnitId: u,
-        isFocus: h,
+        subUnitId: h,
+        isFocus: u,
         onChange: (_ = "") => {
           e(_ || "");
         },
-        onFocus: () => v(!0)
+        onFocus: () => g(!0)
       }
     ) });
   }
@@ -775,16 +781,16 @@ const Me = (t) => {
   }), [o, d] = N(() => {
     var m;
     return n ? ((m = n.config) == null ? void 0 : m.positiveColor) || Ke : Ke;
-  }), [a, u] = N(() => {
+  }), [a, h] = N(() => {
     var m;
     return n ? ((m = n.config) == null ? void 0 : m.nativeColor) || Xe : Xe;
-  }), l = [Ue(A.num, r), Ue(A.percent, r), Ue(A.percentile, r), Ue(A.formula, r)], h = [Ue(A.min, r), ...l], v = [Ue(A.max, r), ...l], [f, S] = N(() => {
+  }), l = [Ue(A.num, r), Ue(A.percent, r), Ue(A.percentile, r), Ue(A.formula, r)], u = [Ue(A.min, r), ...l], g = [Ue(A.max, r), ...l], [p, S] = N(() => {
     var I;
-    const m = h[0].value;
+    const m = u[0].value;
     return n && ((I = n.config) == null ? void 0 : I.min.type) || m;
-  }), [p, T] = N(() => {
+  }), [f, T] = N(() => {
     var I;
-    const m = v[0].value;
+    const m = g[0].value;
     return n && ((I = n.config) == null ? void 0 : I.max.type) || m;
   }), [_, R] = N(() => {
     var H;
@@ -798,7 +804,7 @@ const Me = (t) => {
       return 100;
     const I = ((H = n.config) == null ? void 0 : H.max) || {};
     return I.type === A.formula ? I.value || "=" : I.value === void 0 ? 100 : I.value;
-  }), [g, C] = N(() => n ? n.isShowValue === void 0 ? !0 : !!n.isShowValue : !0), b = (m) => ({ config: {
+  }), [v, C] = N(() => n ? n.isShowValue === void 0 ? !0 : !!n.isShowValue : !0), b = (m) => ({ config: {
     min: { type: m.minValueType, value: m.minValue },
     max: { type: m.maxValueType, value: m.maxValue },
     isGradient: m.isGradient === "1",
@@ -807,39 +813,39 @@ const Me = (t) => {
   }, type: U.dataBar, isShowValue: m.isShowValue });
   K(() => e.intercept(e.getInterceptPoints().submit, {
     handler() {
-      return b({ isGradient: i, minValue: _, minValueType: f, maxValue: w, maxValueType: p, positiveColor: o, nativeColor: a, isShowValue: g });
+      return b({ isGradient: i, minValue: _, minValueType: p, maxValue: w, maxValueType: f, positiveColor: o, nativeColor: a, isShowValue: v });
     }
-  }), [i, _, f, w, p, o, a, e, g]);
+  }), [i, _, p, w, f, o, a, e, v]);
   const y = (m) => {
     t.onChange(b(m));
   }, M = (m) => {
     d(m), y({
       isGradient: i,
       minValue: _,
-      minValueType: f,
+      minValueType: p,
       maxValue: w,
-      maxValueType: p,
+      maxValueType: f,
       positiveColor: m,
       nativeColor: a,
-      isShowValue: g
+      isShowValue: v
     });
   }, E = (m) => {
-    u(m), y({
+    h(m), y({
       isGradient: i,
       minValue: _,
-      minValueType: f,
+      minValueType: p,
       maxValue: w,
-      maxValueType: p,
+      maxValueType: f,
       positiveColor: o,
       nativeColor: m,
-      isShowValue: g
+      isShowValue: v
     });
   }, V = (m) => l.map((I) => I.value).includes(m);
   return /* @__PURE__ */ k("div", { children: [
     /* @__PURE__ */ c(
       "div",
       {
-        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
         children: r.t("sheet.cf.panel.styleRule")
       }
     ),
@@ -849,12 +855,12 @@ const Me = (t) => {
         rule: b({
           isGradient: i,
           minValue: _,
-          minValueType: f,
+          minValueType: p,
           maxValue: w,
-          maxValueType: p,
+          maxValueType: f,
           positiveColor: o,
           nativeColor: a,
-          isShowValue: g
+          isShowValue: v
         })
       }
     ) }),
@@ -862,7 +868,7 @@ const Me = (t) => {
       /* @__PURE__ */ c(
         "div",
         {
-          className: "univer-mt-3 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+          className: "univer-mt-3 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
           children: r.t("sheet.cf.panel.fillType")
         }
       ),
@@ -875,12 +881,12 @@ const Me = (t) => {
               s(m), y({
                 isGradient: m,
                 minValue: _,
-                minValueType: f,
+                minValueType: p,
                 maxValue: w,
-                maxValueType: p,
+                maxValueType: f,
                 positiveColor: o,
                 nativeColor: a,
-                isShowValue: g
+                isShowValue: v
               });
             },
             children: [
@@ -893,14 +899,14 @@ const Me = (t) => {
           /* @__PURE__ */ c(
             yt,
             {
-              checked: !g,
+              checked: !v,
               onChange: (m) => {
                 C(!m), y({
                   isGradient: m,
                   minValue: _,
-                  minValueType: f,
+                  minValueType: p,
                   maxValue: w,
-                  maxValueType: p,
+                  maxValueType: f,
                   positiveColor: o,
                   nativeColor: a,
                   isShowValue: !m
@@ -916,7 +922,7 @@ const Me = (t) => {
       /* @__PURE__ */ c(
         "div",
         {
-          className: "univer-mt-3 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+          className: "univer-mt-3 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
           children: r.t("sheet.cf.panel.colorSet")
         }
       ),
@@ -947,7 +953,7 @@ const Me = (t) => {
       /* @__PURE__ */ c(
         "div",
         {
-          className: "univer-mt-3 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+          className: "univer-mt-3 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
           children: r.t("sheet.cf.valueType.min")
         }
       ),
@@ -956,8 +962,8 @@ const Me = (t) => {
           le,
           {
             className: "univer-w-1/2 univer-flex-shrink-0",
-            options: h,
-            value: f,
+            options: u,
+            value: p,
             onChange: (m) => {
               S(m);
               const I = Je(m, 10);
@@ -966,10 +972,10 @@ const Me = (t) => {
                 minValue: I,
                 minValueType: m,
                 maxValue: w,
-                maxValueType: p,
+                maxValueType: f,
                 positiveColor: o,
                 nativeColor: a,
-                isShowValue: g
+                isShowValue: v
               });
             }
           }
@@ -979,19 +985,19 @@ const Me = (t) => {
           {
             id: "min",
             className: "univer-ml-3",
-            disabled: !V(f),
-            type: f,
+            disabled: !V(p),
+            type: p,
             value: _,
             onChange: (m) => {
               R(m || 0), y({
                 isGradient: i,
                 minValue: m || 0,
-                minValueType: f,
+                minValueType: p,
                 maxValue: w,
-                maxValueType: p,
+                maxValueType: f,
                 positiveColor: o,
                 nativeColor: a,
-                isShowValue: g
+                isShowValue: v
               });
             }
           }
@@ -1000,7 +1006,7 @@ const Me = (t) => {
       /* @__PURE__ */ c(
         "div",
         {
-          className: "univer-mt-3 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+          className: "univer-mt-3 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
           children: r.t("sheet.cf.valueType.max")
         }
       ),
@@ -1009,20 +1015,20 @@ const Me = (t) => {
           le,
           {
             className: "univer-w-1/2 univer-flex-shrink-0",
-            options: v,
-            value: p,
+            options: g,
+            value: f,
             onChange: (m) => {
               T(m);
               const I = Je(m, 90);
               x(I), y({
                 isGradient: i,
                 minValue: _,
-                minValueType: f,
+                minValueType: p,
                 maxValue: I,
                 maxValueType: m,
                 positiveColor: o,
                 nativeColor: a,
-                isShowValue: g
+                isShowValue: v
               });
             }
           }
@@ -1031,20 +1037,20 @@ const Me = (t) => {
           sn,
           {
             className: "univer-ml-3",
-            disabled: !V(p),
+            disabled: !V(f),
             id: "max",
-            type: p,
+            type: f,
             value: w,
             onChange: (m) => {
               x(m || 0), y({
                 isGradient: i,
                 minValue: _,
-                minValueType: f,
+                minValueType: p,
                 maxValue: m || 0,
-                maxValueType: p,
+                maxValueType: f,
                 positiveColor: o,
                 nativeColor: a,
-                isShowValue: g
+                isShowValue: v
               });
             }
           }
@@ -1059,17 +1065,17 @@ const Me = (t) => {
   }), [d, a] = N(() => {
     if (e != null && e.it)
       return e.it;
-  }), [u, l] = N(() => {
+  }), [h, l] = N(() => {
     if (e != null && e.ul)
       return e.ul.s;
-  }), [h, v] = N(() => {
+  }), [u, g] = N(() => {
     if (e != null && e.st)
       return e.st.s;
-  }), [f, S] = N(() => {
+  }), [p, S] = N(() => {
     var b;
     const C = "#2f56ef";
     return (b = e == null ? void 0 : e.cl) != null && b.rgb ? e.cl.rgb : C;
-  }), [p, T] = N(() => {
+  }), [f, T] = N(() => {
     var b;
     const C = "#e8ecfc";
     return (b = e == null ? void 0 : e.bg) != null && b.rgb ? e.bg.rgb : C;
@@ -1079,14 +1085,14 @@ const Me = (t) => {
       bl: s,
       it: d
     };
-    f !== void 0 && (C.cl = { rgb: f }), p !== void 0 && (C.bg = { rgb: p }), h !== void 0 && (C.st = { s: h }), u !== void 0 && (C.ul = { s: u }), r(gr(C));
-  }, [s, d, u, h, f, p]);
-  const g = "univer-flex univer-cursor-pointer univer-items-center univer-rounded univer-px-1";
+    p !== void 0 && (C.cl = { rgb: p }), f !== void 0 && (C.bg = { rgb: f }), u !== void 0 && (C.st = { s: u }), h !== void 0 && (C.ul = { s: h }), r(gr(C));
+  }, [s, d, h, u, p, f]);
+  const v = "univer-flex univer-cursor-pointer univer-items-center univer-rounded univer-px-1";
   return /* @__PURE__ */ k("div", { className: X("univer-my-2.5 univer-flex univer-justify-between", n), children: [
     _ && /* @__PURE__ */ c(
       "div",
       {
-        className: X(g, {
+        className: X(v, {
           "univer-bg-gray-100": ut(s || ae.FALSE)
         }),
         onClick: () => o(ct(s)),
@@ -1096,7 +1102,7 @@ const Me = (t) => {
     R && /* @__PURE__ */ c(
       "div",
       {
-        className: X(g, {
+        className: X(v, {
           "univer-bg-gray-100": ut(d || ae.FALSE)
         }),
         onClick: () => a(ct(d)),
@@ -1106,113 +1112,107 @@ const Me = (t) => {
     w && /* @__PURE__ */ c(
       "div",
       {
-        className: X(g, {
-          "univer-bg-gray-100": ut(u || ae.FALSE)
+        className: X(v, {
+          "univer-bg-gray-100": ut(h || ae.FALSE)
         }),
-        onClick: () => l(ct(u)),
+        onClick: () => l(ct(h)),
         children: /* @__PURE__ */ c(w, {})
       }
     ),
     x && /* @__PURE__ */ c(
       "div",
       {
-        className: X(g, {
-          "univer-bg-gray-100": ut(h || ae.FALSE)
+        className: X(v, {
+          "univer-bg-gray-100": ut(u || ae.FALSE)
         }),
-        onClick: () => v(ct(h)),
+        onClick: () => g(ct(u)),
         children: /* @__PURE__ */ c(x, {})
       }
     ),
-    /* @__PURE__ */ c(Me, { color: f, onChange: S, iconId: "FontColor" }),
-    /* @__PURE__ */ c(Me, { color: p, onChange: T, iconId: "PaintBucket" })
+    /* @__PURE__ */ c(Me, { color: p, onChange: S, iconId: "FontColor" }),
+    /* @__PURE__ */ c(Me, { color: f, onChange: T, iconId: "PaintBucket" })
   ] });
 }, mi = (t) => {
   var x;
-  const { onChange: e, interceptorManager: r } = t, n = W(re), s = W(z).getCurrentUnitForType($.UNIVER_SHEET), o = s.getActiveSheet(), d = ((x = t.rule) == null ? void 0 : x.type) === U.highlightCell ? t.rule : void 0, a = de(null), [u, l] = N(!1), h = de(null), [v, f] = N({}), [S, p] = N(() => (d == null ? void 0 : d.subType) === F.formula ? d.value : "="), [T, _] = N(void 0), R = (g) => ({
-    style: g.style,
+  const { onChange: e, interceptorManager: r } = t, n = W(re), s = W(z).getCurrentUnitForType($.UNIVER_SHEET), o = s.getActiveSheet(), d = ((x = t.rule) == null ? void 0 : x.type) === U.highlightCell ? t.rule : void 0, a = de(null), [h, l] = N(!1), u = de(null), [g, p] = N({}), [S, f] = N(() => (d == null ? void 0 : d.subType) === F.formula ? d.value : "="), [T, _] = N(void 0), R = (v) => ({
+    style: v.style,
     value: S,
     type: U.highlightCell,
     subType: F.formula
   });
   K(() => r.intercept(r.getInterceptPoints().submit, {
     handler() {
-      return R({ style: v });
+      return R({ style: g });
     }
-  }), [v, S, r]), K(() => r.intercept(r.getInterceptPoints().beforeSubmit, {
+  }), [g, S, r]), K(() => r.intercept(r.getInterceptPoints().beforeSubmit, {
     handler: (C, b, y) => T || S.length === 1 || !S.startsWith("=") ? (_(n.t("sheet.cf.errorMessage.formulaError")), !1) : y(C)
   }), [T, S]);
-  const w = (g) => {
-    e(R(g));
+  const w = (v) => {
+    e(R(v));
   };
-  return Nt((g) => {
+  return Nt((v) => {
     var b;
-    ((b = h.current) == null ? void 0 : b.isClickOutSide(g)) && l(!1);
+    ((b = u.current) == null ? void 0 : b.isClickOutSide(v)) && l(!1);
   }), /* @__PURE__ */ k("div", { ref: a, children: [
     /* @__PURE__ */ c(
       "div",
       {
-        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
         children: n.t("sheet.cf.panel.styleRule")
       }
     ),
     /* @__PURE__ */ c("div", { className: "univer-mt-3", children: /* @__PURE__ */ c(
       Mt,
       {
-        ref: h,
-        className: X("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent dark:univer-bg-gray-700 dark:univer-text-white hover:univer-border-primary-600", He),
+        ref: u,
+        className: X("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent dark:!univer-bg-gray-700 dark:!univer-text-white hover:univer-border-primary-600", He),
         errorText: T,
-        isFocus: u,
+        isFocus: h,
         initValue: S,
         unitId: s.getUnitId(),
         subUnitId: o == null ? void 0 : o.getSheetId(),
         onFocus: () => {
           l(!0);
         },
-        onChange: (g) => {
-          p(g), w({ style: v });
+        onChange: (v) => {
+          f(v), w({ style: g });
         },
-        onVerify: (g, C) => {
-          !g || C.length === 1 ? _(n.t("sheet.cf.errorMessage.formulaError")) : _(void 0);
+        onVerify: (v, C) => {
+          !v || C.length === 1 ? _(n.t("sheet.cf.errorMessage.formulaError")) : _(void 0);
         }
       }
     ) }),
-    /* @__PURE__ */ c("div", { className: at, children: /* @__PURE__ */ c(We, { rule: R({ style: v }) }) }),
+    /* @__PURE__ */ c("div", { className: at, children: /* @__PURE__ */ c(We, { rule: R({ style: g }) }) }),
     /* @__PURE__ */ c(
       Yt,
       {
         style: d == null ? void 0 : d.style,
         className: "univer-mt-3",
-        onChange: (g) => {
-          f(g), w({ style: g });
+        onChange: (v) => {
+          p(v), w({ style: v });
         }
       }
     )
   ] });
-}, dt = (t) => /* @__PURE__ */ k("div", { style: { position: "relative" }, children: [
+}, dt = (t) => /* @__PURE__ */ k("div", { className: "univer-relative", children: [
   /* @__PURE__ */ c(
     "div",
     {
-      style: {
-        position: "absolute",
-        zIndex: 999,
-        bottom: "-13px",
-        fontSize: "10px",
-        color: "red"
-      },
+      className: "univer-absolute univer-bottom-[-13px] univer-z-[999] univer-text-[10px] univer-text-red-500",
       children: t.errorText
     }
   ),
   t.children
 ] }), q = (t, e) => ({ label: e.t(`sheet.cf.operator.${t}`), value: t }), fi = (t) => {
-  const { type: e, operator: r, onChange: n, value: i, interceptorManager: s } = t, o = W(re), [d, a] = N(() => typeof i == "number" ? i : 0), [u, l] = N(""), [h, v] = N(() => typeof i == "string" ? i : ""), [f, S] = N(""), [p, T] = N(() => Array.isArray(i) ? i[0] === void 0 ? 0 : i[0] : 0), [_, R] = N(""), [w, x] = N(() => Array.isArray(i) ? i[1] === void 0 ? 100 : i[1] : 100), [g, C] = N("");
+  const { type: e, operator: r, onChange: n, value: i, interceptorManager: s } = t, o = W(re), [d, a] = N(() => typeof i == "number" ? i : 0), [h, l] = N(""), [u, g] = N(() => typeof i == "string" ? i : ""), [p, S] = N(""), [f, T] = N(() => Array.isArray(i) ? i[0] === void 0 ? 0 : i[0] : 0), [_, R] = N(""), [w, x] = N(() => Array.isArray(i) ? i[1] === void 0 ? 100 : i[1] : 100), [v, C] = N("");
   switch (K(() => {
     switch (e) {
       case F.text: {
-        [j.beginsWith, j.endsWith, j.containsText, j.notContainsText, j.equal, j.notEqual].includes(r) && n(h);
+        [j.beginsWith, j.endsWith, j.containsText, j.notContainsText, j.equal, j.notEqual].includes(r) && n(u);
         break;
       }
       case F.number: {
-        [P.equal, P.notEqual, P.greaterThan, P.greaterThanOrEqual, P.lessThan, P.lessThanOrEqual].includes(r) && n(d), [P.between, P.notBetween].includes(r) && n([p, w]);
+        [P.equal, P.notEqual, P.greaterThan, P.greaterThanOrEqual, P.lessThan, P.lessThanOrEqual].includes(r) && n(d), [P.between, P.notBetween].includes(r) && n([f, w]);
         break;
       }
     }
@@ -1222,7 +1222,7 @@ const Me = (t) => {
         switch (e) {
           case F.text:
             if ([j.beginsWith, j.containsText, j.endsWith, j.notEqual, j.notContainsText, j.equal].includes(r))
-              return h ? E(y) : (S(o.t("sheet.cf.errorMessage.notBlank")), !1);
+              return u ? E(y) : (S(o.t("sheet.cf.errorMessage.notBlank")), !1);
         }
         return E(y);
       }
@@ -1230,16 +1230,16 @@ const Me = (t) => {
     return () => {
       b();
     };
-  }, [e, d, h, r]), e) {
+  }, [e, d, u, r]), e) {
     case F.text: {
       if ([j.beginsWith, j.endsWith, j.containsText, j.notContainsText, j.equal, j.notEqual].includes(r)) {
         const b = (y) => {
-          v(y), n(y);
+          g(y), n(y);
         };
-        return /* @__PURE__ */ c("div", { className: "univer-mt-3", children: /* @__PURE__ */ c(dt, { errorText: f, children: /* @__PURE__ */ c(
+        return /* @__PURE__ */ c("div", { className: "univer-mt-3", children: /* @__PURE__ */ c(dt, { errorText: p, children: /* @__PURE__ */ c(
           Gr,
           {
-            value: h,
+            value: u,
             onChange: (y) => {
               S(""), b(y);
             }
@@ -1253,7 +1253,7 @@ const Me = (t) => {
         const b = (y) => {
           a(y || 0), n(y || 0), l("");
         };
-        return /* @__PURE__ */ c("div", { className: "univer-mt-3", children: /* @__PURE__ */ c(dt, { errorText: u, children: /* @__PURE__ */ c(
+        return /* @__PURE__ */ c("div", { className: "univer-mt-3", children: /* @__PURE__ */ c(dt, { errorText: h, children: /* @__PURE__ */ c(
           Ne,
           {
             className: "univer-w-full",
@@ -1268,11 +1268,11 @@ const Me = (t) => {
         const b = (M) => {
           T(M || 0), n([M || 0, w]), R("");
         }, y = (M) => {
-          x(M || 0), n([p, M || 0]), C("");
+          x(M || 0), n([f, M || 0]), C("");
         };
         return /* @__PURE__ */ k("div", { className: "univer-mt-3 univer-flex univer-items-center", children: [
-          /* @__PURE__ */ c(dt, { errorText: _, children: /* @__PURE__ */ c(Ne, { min: Number.MIN_SAFE_INTEGER, max: Number.MAX_SAFE_INTEGER, value: p, onChange: b }) }),
-          /* @__PURE__ */ c(dt, { errorText: g, children: /* @__PURE__ */ c(
+          /* @__PURE__ */ c(dt, { errorText: _, children: /* @__PURE__ */ c(Ne, { min: Number.MIN_SAFE_INTEGER, max: Number.MAX_SAFE_INTEGER, value: f, onChange: b }) }),
+          /* @__PURE__ */ c(dt, { errorText: v, children: /* @__PURE__ */ c(
             Ne,
             {
               className: "univer-ml-3",
@@ -1330,8 +1330,8 @@ const Me = (t) => {
 }, an = (t) => {
   var x;
   const { interceptorManager: e, onChange: r } = t, n = W(re), i = ((x = t.rule) == null ? void 0 : x.type) === U.highlightCell ? t.rule : void 0, [s, o] = N(() => {
-    const g = F.text;
-    return i && i.subType || g;
+    const v = F.text;
+    return i && i.subType || v;
   }), d = [{
     value: F.text,
     label: n.t("sheet.cf.subRuleType.text")
@@ -1347,75 +1347,75 @@ const Me = (t) => {
   }, {
     value: F.uniqueValues,
     label: n.t("sheet.cf.subRuleType.uniqueValues")
-  }], a = J(() => on(s, n), [s]), [u, l] = N(() => {
-    const g = a ? a[0].value : void 0;
-    return i && i.operator || g;
-  }), [h, v] = N(() => {
+  }], a = J(() => on(s, n), [s]), [h, l] = N(() => {
+    const v = a ? a[0].value : void 0;
+    return i && i.operator || v;
+  }), [u, g] = N(() => {
     var b;
-    const g = "";
-    return i ? (b = i.value) != null ? b : mt(i.subType, i.operator) : g;
-  }), [f, S] = N({}), p = J(() => (g) => {
+    const v = "";
+    return i ? (b = i.value) != null ? b : mt(i.subType, i.operator) : v;
+  }), [p, S] = N({}), f = J(() => (v) => {
     var C, b, y, M, E, V, L, m, I, H, Y, ge, me, ke, Fe;
-    switch (g.subType || s) {
+    switch (v.subType || s) {
       case F.text: {
-        if ([j.beginsWith, j.endsWith, j.containsText, j.notContainsText, j.equal, j.notEqual].includes(u))
+        if ([j.beginsWith, j.endsWith, j.containsText, j.notContainsText, j.equal, j.notEqual].includes(h))
           return {
             type: U.highlightCell,
-            subType: (C = g.subType) != null ? C : s,
-            operator: (b = g.operator) != null ? b : u,
-            style: (y = g.style) != null ? y : f,
-            value: (M = g.value) != null ? M : h
+            subType: (C = v.subType) != null ? C : s,
+            operator: (b = v.operator) != null ? b : h,
+            style: (y = v.style) != null ? y : p,
+            value: (M = v.value) != null ? M : u
           };
         break;
       }
       case F.number: {
-        if ([P.equal, P.notEqual, P.greaterThan, P.greaterThanOrEqual, P.lessThan, P.lessThanOrEqual].includes(u))
+        if ([P.equal, P.notEqual, P.greaterThan, P.greaterThanOrEqual, P.lessThan, P.lessThanOrEqual].includes(h))
           return {
             type: U.highlightCell,
-            subType: (E = g.subType) != null ? E : s,
-            operator: (V = g.operator) != null ? V : u,
-            style: (L = g.style) != null ? L : f,
-            value: (m = g.value) != null ? m : h
+            subType: (E = v.subType) != null ? E : s,
+            operator: (V = v.operator) != null ? V : h,
+            style: (L = v.style) != null ? L : p,
+            value: (m = v.value) != null ? m : u
           };
-        if ([P.between, P.notBetween].includes(u))
+        if ([P.between, P.notBetween].includes(h))
           return {
             type: U.highlightCell,
-            subType: (I = g.subType) != null ? I : s,
-            operator: (H = g.operator) != null ? H : u,
-            style: (Y = g.style) != null ? Y : f,
-            value: (ge = g.value) != null ? ge : h
+            subType: (I = v.subType) != null ? I : s,
+            operator: (H = v.operator) != null ? H : h,
+            style: (Y = v.style) != null ? Y : p,
+            value: (ge = v.value) != null ? ge : u
           };
         break;
       }
     }
     return {
       type: U.highlightCell,
-      subType: (me = g.subType) != null ? me : s,
-      operator: (ke = g.operator) != null ? ke : u,
-      style: (Fe = g.style) != null ? Fe : f
+      subType: (me = v.subType) != null ? me : s,
+      operator: (ke = v.operator) != null ? ke : h,
+      style: (Fe = v.style) != null ? Fe : p
     };
-  }, [s, u, h, f]);
+  }, [s, h, u, p]);
   K(() => e.intercept(e.getInterceptPoints().submit, {
     handler() {
-      return p({});
+      return f({});
     }
-  }), [p, e]), K(() => {
-    d.some((g) => g.value === s) || o(d[0].value);
+  }), [f, e]), K(() => {
+    d.some((v) => v.value === s) || o(d[0].value);
   }, [d]);
-  const T = (g) => {
-    const C = g, b = on(C, n), y = b && b[0].value;
-    o(C), l(y), y && v(mt(C, y)), r(p({ subType: C, operator: y }));
-  }, _ = (g) => {
-    const C = g;
-    l(C), r(p({ operator: C }));
-  }, R = (g) => {
-    v(g), r(p({ value: g }));
-  }, w = J(() => `${s}_${u}_${Math.random()}`, [s, u]);
+  const T = (v) => {
+    const C = v, b = on(C, n), y = b && b[0].value;
+    o(C), l(y), y && g(mt(C, y)), r(f({ subType: C, operator: y }));
+  }, _ = (v) => {
+    const C = v;
+    l(C), r(f({ operator: C }));
+  }, R = (v) => {
+    g(v), r(f({ value: v }));
+  }, w = J(() => `${s}_${h}_${Math.random()}`, [s, h]);
   return /* @__PURE__ */ k("div", { children: [
     /* @__PURE__ */ c(
       "div",
       {
-        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
         children: n.t("sheet.cf.panel.styleRule")
       }
     ),
@@ -1434,7 +1434,7 @@ const Me = (t) => {
         {
           className: "univer-mt-3 univer-w-full",
           onChange: _,
-          value: u || "",
+          value: h || "",
           options: a
         }
       )
@@ -1442,33 +1442,33 @@ const Me = (t) => {
     /* @__PURE__ */ c(
       fi,
       {
-        value: h,
+        value: u,
         interceptorManager: e,
         type: s,
-        operator: u,
+        operator: h,
         rule: i,
         onChange: R
       },
       w
     ),
-    /* @__PURE__ */ c("div", { className: at, children: /* @__PURE__ */ c(We, { rule: p({}) }) }),
+    /* @__PURE__ */ c("div", { className: at, children: /* @__PURE__ */ c(We, { rule: f({}) }) }),
     /* @__PURE__ */ c(
       Yt,
       {
         style: i == null ? void 0 : i.style,
         className: "univer-ml-1",
-        onChange: (g) => {
-          S(g), r(p({ style: g }));
+        onChange: (v) => {
+          S(v), r(f({ style: v }));
         }
       }
     )
   ] });
 }, Xn = (t, e) => (Ee[t] || [])[Number(e)] || "", pi = (t) => {
   var l;
-  const { error: e, type: r, onChange: n } = t, i = W(z), s = i.getCurrentUnitForType($.UNIVER_SHEET).getUnitId(), o = (l = i.getCurrentUnitForType($.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : l.getSheetId(), d = de(null), [a, u] = N(!1);
-  return Nt((h) => {
-    var f;
-    ((f = d.current) == null ? void 0 : f.isClickOutSide(h)) && u(!1);
+  const { error: e, type: r, onChange: n } = t, i = W(z), s = i.getCurrentUnitForType($.UNIVER_SHEET).getUnitId(), o = (l = i.getCurrentUnitForType($.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : l.getSheetId(), d = de(null), [a, h] = N(!1);
+  return Nt((u) => {
+    var p;
+    ((p = d.current) == null ? void 0 : p.isClickOutSide(u)) && h(!1);
   }), /* @__PURE__ */ c("div", { className: "univer-relative", children: r !== A.formula ? /* @__PURE__ */ k(Bt, { children: [
     /* @__PURE__ */ c(
       Ne,
@@ -1477,7 +1477,7 @@ const Me = (t) => {
           "univer-border-red-500": e
         }),
         value: Number(t.value) || 0,
-        onChange: (h) => n(h != null ? h : 0)
+        onChange: (u) => n(u != null ? u : 0)
       }
     ),
     e && /* @__PURE__ */ c("div", { className: "univer-absolute univer-text-xs univer-text-red-500", children: e })
@@ -1489,10 +1489,10 @@ const Me = (t) => {
       unitId: s,
       subUnitId: o,
       isFocus: a,
-      onChange: (h = "") => {
-        n(h || "");
+      onChange: (u = "") => {
+        n(u || "");
       },
-      onFocus: () => u(!0)
+      onFocus: () => h(!0)
     }
   ) }) });
 }, ln = (t, e, r) => ({
@@ -1516,15 +1516,15 @@ const Me = (t) => {
         children: /* @__PURE__ */ c(
           "a",
           {
-            className: "univer-cursor-pointer univer-rounded hover:univer-bg-gray-100",
-            children: d.list.map((a, u) => /* @__PURE__ */ c(
+            className: "univer-cursor-pointer univer-rounded dark:hover:!univer-bg-gray-700 hover:univer-bg-gray-100",
+            children: d.list.map((a, h) => /* @__PURE__ */ c(
               "img",
               {
                 className: "univer-size-5",
                 src: a,
                 draggable: !1
               },
-              u
+              h
             ))
           }
         )
@@ -1537,11 +1537,11 @@ const Me = (t) => {
     const i = [];
     for (const s in Ee) {
       const o = Ee[s], d = s;
-      o.forEach((a, u) => {
+      o.forEach((a, h) => {
         i.push({
           iconType: d,
           base64: a,
-          iconId: String(u)
+          iconId: String(h)
         });
       });
     }
@@ -1564,7 +1564,7 @@ const Me = (t) => {
     /* @__PURE__ */ c("div", { className: "univer-flex univer-w-64 univer-flex-wrap", children: r.map((i) => /* @__PURE__ */ c(
       "div",
       {
-        className: "univer-mb-2 univer-mr-2 univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-rounded hover:univer-bg-gray-100",
+        className: "univer-mb-2 univer-mr-2 univer-flex univer-cursor-pointer univer-items-center univer-justify-center univer-rounded dark:hover:!univer-bg-gray-700 hover:univer-bg-gray-100",
         children: /* @__PURE__ */ c(
           "img",
           {
@@ -1584,31 +1584,31 @@ const Me = (t) => {
     { label: i.t(`sheet.cf.valueType.${A.percent}`), value: A.percent },
     { label: i.t(`sheet.cf.valueType.${A.percentile}`), value: A.percentile },
     { label: i.t(`sheet.cf.valueType.${A.formula}`), value: A.formula }
-  ], d = (h, v) => {
-    e([String(v), "value", "value"], h);
-  }, a = (h, v) => {
-    e([String(v), "operator"], h);
-    const f = mt(F.number, h);
-    d(f, v);
-  }, u = (h, v) => {
-    e([String(v), "value", "type"], h);
-    const f = r[v], S = mt(F.number, f.operator);
-    d(S, v);
+  ], d = (u, g) => {
+    e([String(g), "value", "value"], u);
+  }, a = (u, g) => {
+    e([String(g), "operator"], u);
+    const p = mt(F.number, u);
+    d(p, g);
+  }, h = (u, g) => {
+    e([String(g), "value", "type"], u);
+    const p = r[g], S = mt(F.number, p.operator);
+    d(S, g);
   };
-  return J(() => r.map((h, v) => {
-    const f = n[v], S = Xn(h.iconType, h.iconId), p = v === r.length - 1, T = v === 0, _ = r[v - 1], R = (_ == null ? void 0 : _.value.type) === A.formula ? i.t("sheet.cf.valueType.formula") : _ == null ? void 0 : _.value.value, w = (x, g) => {
-      const C = { ...h, iconId: g, iconType: x };
-      e([String(v)], C);
+  return J(() => r.map((u, g) => {
+    const p = n[g], S = Xn(u.iconType, u.iconId), f = g === r.length - 1, T = g === 0, _ = r[g - 1], R = (_ == null ? void 0 : _.value.type) === A.formula ? i.t("sheet.cf.valueType.formula") : _ == null ? void 0 : _.value.value, w = (x, v) => {
+      const C = { ...u, iconId: v, iconType: x };
+      e([String(g)], C);
     };
     return /* @__PURE__ */ k(
       "div",
       {
-        className: v ? "univer-mt-6" : "univer-mt-3",
+        className: g ? "univer-mt-6" : "univer-mt-3",
         children: [
           /* @__PURE__ */ k(
             "div",
             {
-              className: "univer-mt-3 univer-flex univer-items-center univer-justify-between univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+              className: "univer-mt-3 univer-flex univer-items-center univer-justify-between univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
               children: [
                 /* @__PURE__ */ k(
                   "div",
@@ -1616,22 +1616,22 @@ const Me = (t) => {
                     className: "univer-w-[45%]",
                     children: [
                       i.t("sheet.cf.iconSet.icon"),
-                      v + 1
+                      g + 1
                     ]
                   }
                 ),
                 /* @__PURE__ */ c("div", { className: "univer-w-[45%]", children: /* @__PURE__ */ k(Bt, { children: [
-                  !T && !p && i.t("sheet.cf.iconSet.rule"),
-                  !T && !p && /* @__PURE__ */ k(
+                  !T && !f && i.t("sheet.cf.iconSet.rule"),
+                  !T && !f && /* @__PURE__ */ k(
                     "span",
                     {
-                      className: "univer-font-medium univer-text-gray-600 dark:univer-text-gray-200",
+                      className: "univer-font-medium univer-text-gray-600 dark:!univer-text-gray-200",
                       children: [
                         "(",
                         i.t("sheet.cf.iconSet.when"),
                         i.t(`sheet.cf.symbol.${Ht(_.operator)}`),
                         R,
-                        p ? "" : ` ${i.t("sheet.cf.iconSet.and")} `,
+                        f ? "" : ` ${i.t("sheet.cf.iconSet.and")} `,
                         ")"
                       ]
                     }
@@ -1644,11 +1644,11 @@ const Me = (t) => {
             /* @__PURE__ */ c("div", { className: "univer-flex univer-items-center", children: /* @__PURE__ */ c(
               Zt,
               {
-                overlay: /* @__PURE__ */ c("div", { className: "univer-rounded-lg univer-p-4", children: /* @__PURE__ */ c(yi, { onClick: w, iconId: h.iconId, iconType: h.iconType }) }),
+                overlay: /* @__PURE__ */ c("div", { className: "univer-rounded-lg univer-p-4", children: /* @__PURE__ */ c(yi, { onClick: w, iconId: u.iconId, iconType: u.iconType }) }),
                 children: /* @__PURE__ */ k(
                   "div",
                   {
-                    className: X("univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-white univer-px-4 univer-py-2 univer-text-xs univer-text-gray-600 univer-transition-all dark:univer-text-gray-200 hover:univer-border-primary-600", He),
+                    className: X("univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-white univer-px-4 univer-py-2 univer-text-xs univer-text-gray-600 univer-transition-all dark:!univer-text-gray-200 hover:univer-border-primary-600", He),
                     children: [
                       S ? /* @__PURE__ */ c("img", { src: S, className: "univer-size-4", draggable: !1 }) : /* @__PURE__ */ c(
                         ot,
@@ -1662,17 +1662,17 @@ const Me = (t) => {
                 )
               }
             ) }),
-            p ? /* @__PURE__ */ k(
+            f ? /* @__PURE__ */ k(
               "div",
               {
-                className: "univer-mt-0 univer-w-[45%] univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+                className: "univer-mt-0 univer-w-[45%] univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
                 children: [
                   i.t("sheet.cf.iconSet.rule"),
                   /* @__PURE__ */ k("span", { className: "univer-font-medium", children: [
                     i.t("sheet.cf.iconSet.when"),
                     i.t(`sheet.cf.symbol.${Ht(_.operator)}`),
                     R,
-                    p ? "" : ` ${i.t("sheet.cf.iconSet.and")} `
+                    f ? "" : ` ${i.t("sheet.cf.iconSet.and")} `
                   ] })
                 ]
               }
@@ -1680,18 +1680,18 @@ const Me = (t) => {
               le,
               {
                 options: s,
-                value: h.operator,
+                value: u.operator,
                 onChange: (x) => {
-                  a(x, v);
+                  a(x, g);
                 }
               }
             )
           ] }),
-          p ? /* @__PURE__ */ c("div", {}) : /* @__PURE__ */ k(Bt, { children: [
+          f ? /* @__PURE__ */ c("div", {}) : /* @__PURE__ */ k(Bt, { children: [
             /* @__PURE__ */ k(
               "div",
               {
-                className: "univer-mt-3 univer-flex univer-items-center univer-justify-between univer-gap-4 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+                className: "univer-mt-3 univer-flex univer-items-center univer-justify-between univer-gap-4 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
                 children: [
                   /* @__PURE__ */ c("div", { children: i.t("sheet.cf.iconSet.type") }),
                   /* @__PURE__ */ c("div", { children: i.t("sheet.cf.iconSet.value") })
@@ -1708,21 +1708,21 @@ const Me = (t) => {
                     {
                       className: "univer-flex-shrink-0",
                       options: o,
-                      value: h.value.type,
+                      value: u.value.type,
                       onChange: (x) => {
-                        u(x, v);
+                        h(x, g);
                       }
                     }
                   ),
                   /* @__PURE__ */ c("div", { children: /* @__PURE__ */ c(
                     pi,
                     {
-                      id: v,
-                      type: h.value.type,
-                      error: f,
-                      value: h.value.value || "",
+                      id: g,
+                      type: u.value.type,
+                      error: p,
+                      value: u.value.value || "",
                       onChange: (x) => {
-                        d(x, v);
+                        d(x, g);
                       }
                     }
                   ) })
@@ -1732,32 +1732,32 @@ const Me = (t) => {
           ] })
         ]
       },
-      v
+      g
     );
   }), [r, n]);
 }, Si = (t) => {
   var x;
   const { interceptorManager: e } = t, r = ((x = t.rule) == null ? void 0 : x.type) === U.iconSet ? t.rule : void 0, n = W(re), [i, s] = N({}), [o, d] = N(() => {
-    const g = Object.keys(Ee)[0];
+    const v = Object.keys(Ee)[0];
     if (r && r.config.length) {
       const C = r.config[0].iconType;
       if (!r.config.some((y) => y.iconType !== C))
         return C;
     }
-    return g;
-  }), [a, u] = N(() => {
+    return v;
+  }), [a, h] = N(() => {
     if (r && r.config.length)
       return Wt.deepClone(r == null ? void 0 : r.config);
-    const g = Ee[o] || [];
-    return new Array(g.length).fill("").map((C, b, y) => b === y.length - 1 ? {
+    const v = Ee[o] || [];
+    return new Array(v.length).fill("").map((C, b, y) => b === y.length - 1 ? {
       operator: P.lessThanOrEqual,
       value: { type: A.num, value: Number.MAX_SAFE_INTEGER },
       iconType: o,
       iconId: String(b)
     } : ln(o, b, y));
-  }), [l, h] = N(() => r ? !!r.isShowValue : !0), v = J(() => {
-    const g = a.map((C) => Xn(C.iconType, C.iconId));
-    return /* @__PURE__ */ c("div", { className: "univer-flex univer-items-center", children: g.map((C, b) => C ? /* @__PURE__ */ c(
+  }), [l, u] = N(() => r ? !!r.isShowValue : !0), g = J(() => {
+    const v = a.map((C) => Xn(C.iconType, C.iconId));
+    return /* @__PURE__ */ c("div", { className: "univer-flex univer-items-center", children: v.map((C, b) => C ? /* @__PURE__ */ c(
       "img",
       {
         className: "univer-size-5",
@@ -1765,8 +1765,8 @@ const Me = (t) => {
       },
       b
     ) : /* @__PURE__ */ c(ot, { className: "univer-size-5" }, b)) });
-  }, [a]), f = (g) => {
-    if (g.reduce((b, y, M) => b.preType && !b.result || g.length - 1 === M ? b : y.value.type === A.formula ? {
+  }, [a]), p = (v) => {
+    if (v.reduce((b, y, M) => b.preType && !b.result || v.length - 1 === M ? b : y.value.type === A.formula ? {
       preType: A.formula,
       result: !1
     } : b.preType ? {
@@ -1775,48 +1775,48 @@ const Me = (t) => {
     } : {
       result: !0,
       preType: y.value.type
-    }, { result: !0, preType: "" }).result && [A.num, A.percent, A.percentile].includes(g[0].value.type)) {
+    }, { result: !0, preType: "" }).result && [A.num, A.percent, A.percentile].includes(v[0].value.type)) {
       const b = {};
-      return g.forEach((y, M, E) => {
+      return v.forEach((y, M, E) => {
         if (M - 1 < 0 || M === E.length - 1)
           return;
-        const L = g[M - 1], m = Ht(L.operator);
+        const L = v[M - 1], m = Ht(L.operator);
         fr({ operator: m, value: L.value.value }, y.value.value) || (b[M] = `${n.t(`sheet.cf.form.${m}`, String(L.value.value))} `);
       }), b;
     }
     return {};
-  }, S = (g, C) => {
-    sr(a, g) !== C && (or(a, g, C), u([...a]), s(f(a)));
-  }, p = (g) => {
-    d(g);
-    const C = Ee[g] || [], b = new Array(C.length).fill("").map((y, M, E) => ln(g, M, E));
-    u(b), s(f(b));
+  }, S = (v, C) => {
+    sr(a, v) !== C && (or(a, v, C), h([...a]), s(p(a)));
+  }, f = (v) => {
+    d(v);
+    const C = Ee[v] || [], b = new Array(C.length).fill("").map((y, M, E) => ln(v, M, E));
+    h(b), s(p(b));
   };
   K(() => {
-    const g = e.intercept(e.getInterceptPoints().submit, {
+    const v = e.intercept(e.getInterceptPoints().submit, {
       handler() {
         return { type: U.iconSet, isShowValue: l, config: a };
       }
     });
     return () => {
-      g();
+      v();
     };
   }, [l, a, e]), K(() => {
-    const g = e.intercept(e.getInterceptPoints().beforeSubmit, {
+    const v = e.intercept(e.getInterceptPoints().beforeSubmit, {
       handler() {
         return Object.keys(i).length === 0;
       }
     });
     return () => {
-      g();
+      v();
     };
   }, [l, a, e, i]);
   const T = () => {
-    const g = a.map((C) => ({ ...C }));
+    const v = a.map((C) => ({ ...C }));
     a.forEach((C, b) => {
-      const y = a.length - 1 - b, M = g[y];
+      const y = a.length - 1 - b, M = v[y];
       C.iconId = M.iconId, C.iconType = M.iconType;
-    }), u([...a]);
+    }), h([...a]);
   }, _ = W(Lr), [R, w] = N();
   return Ar(R, _.rootContainerElement), /* @__PURE__ */ k("div", { children: [
     /* @__PURE__ */ c("div", { className: "univer-mt-4 univer-text-sm univer-text-gray-600", children: n.t("sheet.cf.panel.styleRule") }),
@@ -1826,11 +1826,11 @@ const Me = (t) => {
         overlay: /* @__PURE__ */ c("div", { className: "univer-rounded-lg univer-p-4", children: /* @__PURE__ */ c(
           Ci,
           {
-            ref: (g) => {
-              !R && g && w(g);
+            ref: (v) => {
+              !R && v && w(v);
             },
             iconType: o,
-            onClick: p
+            onClick: f
           }
         ) }),
         children: /* @__PURE__ */ k(
@@ -1838,7 +1838,7 @@ const Me = (t) => {
           {
             className: X("univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-white univer-px-4 univer-py-2 univer-text-xs univer-text-gray-600 univer-transition-all hover:univer-border-primary-600", He),
             children: [
-              v,
+              g,
               /* @__PURE__ */ c(Vt, {})
             ]
           }
@@ -1851,8 +1851,8 @@ const Me = (t) => {
         n.t("sheet.cf.iconSet.reverseIconOrder")
       ] }),
       /* @__PURE__ */ k("div", { className: "univer-ml-6 univer-flex univer-items-center univer-text-xs", children: [
-        /* @__PURE__ */ c(yt, { checked: !l, onChange: (g) => {
-          h(!g);
+        /* @__PURE__ */ c(yt, { checked: !l, onChange: (v) => {
+          u(!v);
         } }),
         n.t("sheet.cf.iconSet.onlyShowIcon")
       ] })
@@ -1875,7 +1875,7 @@ const Me = (t) => {
         }
     }
     return _;
-  }), [a, u] = N(() => {
+  }), [a, h] = N(() => {
     const R = i == null ? void 0 : i.type;
     if (!i)
       return 10;
@@ -1887,7 +1887,7 @@ const Me = (t) => {
         }
     }
     return 10;
-  }), [l, h] = N(() => {
+  }), [l, u] = N(() => {
     const R = i == null ? void 0 : i.type;
     if (!i)
       return !1;
@@ -1899,30 +1899,30 @@ const Me = (t) => {
         }
     }
     return !1;
-  }), [v, f] = N({}), S = (_) => {
-    const { type: R, isPercent: w, value: x, style: g } = _;
+  }), [g, p] = N({}), S = (_) => {
+    const { type: R, isPercent: w, value: x, style: v } = _;
     if (R === "isNotBottom")
-      return { type: U.highlightCell, subType: F.rank, isPercent: w, isBottom: !1, value: x, style: g };
+      return { type: U.highlightCell, subType: F.rank, isPercent: w, isBottom: !1, value: x, style: v };
     if (R === "isBottom")
-      return { type: U.highlightCell, subType: F.rank, isPercent: w, isBottom: !0, value: x, style: g };
+      return { type: U.highlightCell, subType: F.rank, isPercent: w, isBottom: !0, value: x, style: v };
     if (R === "greaterThanAverage")
-      return { type: U.highlightCell, subType: F.average, operator: P.greaterThan, style: g };
+      return { type: U.highlightCell, subType: F.average, operator: P.greaterThan, style: v };
     if (R === "lessThanAverage")
-      return { type: U.highlightCell, subType: F.average, operator: P.lessThan, style: g };
+      return { type: U.highlightCell, subType: F.average, operator: P.lessThan, style: v };
   };
   K(() => r.intercept(r.getInterceptPoints().submit, {
     handler() {
-      return S({ type: o, isPercent: l, value: a, style: v });
+      return S({ type: o, isPercent: l, value: a, style: g });
     }
-  }), [o, l, a, v, r]);
-  const p = (_) => {
+  }), [o, l, a, g, r]);
+  const f = (_) => {
     e(S(_));
   };
   return /* @__PURE__ */ k("div", { children: [
     /* @__PURE__ */ c(
       "div",
       {
-        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
         children: n.t("sheet.cf.panel.styleRule")
       }
     ),
@@ -1933,7 +1933,7 @@ const Me = (t) => {
         value: o,
         options: s,
         onChange: (_) => {
-          d(_), p({ type: _, isPercent: l, value: a, style: v });
+          d(_), f({ type: _, isPercent: l, value: a, style: g });
         }
       }
     ),
@@ -1946,7 +1946,7 @@ const Me = (t) => {
           value: a,
           onChange: (_) => {
             const R = _ || 0;
-            u(R), p({ type: o, isPercent: l, value: R, style: v });
+            h(R), f({ type: o, isPercent: l, value: R, style: g });
           }
         }
       ),
@@ -1960,7 +1960,7 @@ const Me = (t) => {
               {
                 checked: l,
                 onChange: (_) => {
-                  h(!!_), p({ type: o, isPercent: !!_, value: a, style: v });
+                  u(!!_), f({ type: o, isPercent: !!_, value: a, style: g });
                 }
               }
             ),
@@ -1969,14 +1969,14 @@ const Me = (t) => {
         }
       )
     ] }),
-    /* @__PURE__ */ c("div", { className: at, children: /* @__PURE__ */ c(We, { rule: S({ type: o, isPercent: l, value: a, style: v }) }) }),
+    /* @__PURE__ */ c("div", { className: at, children: /* @__PURE__ */ c(We, { rule: S({ type: o, isPercent: l, value: a, style: g }) }) }),
     /* @__PURE__ */ c(
       Yt,
       {
         style: i == null ? void 0 : i.style,
         className: "univer-mt-3",
         onChange: (_) => {
-          f(_), p({ type: o, isPercent: l, value: a, style: _ });
+          p(_), f({ type: o, isPercent: l, value: a, style: _ });
         }
       }
     )
@@ -1986,23 +1986,23 @@ const Me = (t) => {
   return (e = t.getCurrentUnitForType($.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : e.getSheetId();
 }, Ri = (t) => {
   var b, y, M;
-  const e = W(re), r = W(te), n = W(z), i = W(Q), s = W($e), o = cn(n), d = un(n), [a, u] = N(void 0), l = de((y = (b = t.rule) == null ? void 0 : b.ranges) != null ? y : []), h = J(() => {
+  const e = W(re), r = W(te), n = W(z), i = W(Q), s = W($e), o = cn(n), d = un(n), [a, h] = N(void 0), l = de((y = (b = t.rule) == null ? void 0 : b.ranges) != null ? y : []), u = J(() => {
     var V, L, m;
     let E = (V = t.rule) == null ? void 0 : V.ranges;
     return E != null && E.length || (E = (m = (L = s.getCurrentSelections()) == null ? void 0 : L.map((I) => I.range)) != null ? m : []), l.current = E, E != null && E.length ? E.map((I) => {
       const H = Un(I);
       return H === "NaN" ? "" : H;
     }).filter((I) => !!I).join(",") : "";
-  }, [t.rule]), v = [
+  }, [t.rule]), g = [
     { label: e.t("sheet.cf.ruleType.highlightCell"), value: "1" },
     { label: e.t("sheet.cf.panel.rankAndAverage"), value: "2" },
     { label: e.t("sheet.cf.ruleType.dataBar"), value: "3" },
     { label: e.t("sheet.cf.ruleType.colorScale"), value: "4" },
     { label: e.t("sheet.cf.ruleType.formula"), value: "5" },
     { label: e.t("sheet.cf.ruleType.iconSet"), value: "6" }
-  ], [f, S] = N(() => {
+  ], [p, S] = N(() => {
     var L, m;
-    const E = (L = t.rule) == null ? void 0 : L.rule.type, V = v[0].value;
+    const E = (L = t.rule) == null ? void 0 : L.rule.type, V = g[0].value;
     if (!E)
       return V;
     switch (E) {
@@ -2030,8 +2030,8 @@ const Me = (t) => {
         return "6";
     }
     return V;
-  }), p = de(void 0), T = J(() => new ar({ beforeSubmit: _i, submit: Ti }), []), _ = J(() => {
-    switch (f) {
+  }), f = de(void 0), T = J(() => new ar({ beforeSubmit: _i, submit: Ti }), []), _ = J(() => {
+    switch (p) {
       case "1":
         return an;
       case "2":
@@ -2047,7 +2047,7 @@ const Me = (t) => {
       default:
         return an;
     }
-  }, [f]);
+  }, [p]);
   K(() => {
     const E = r.onCommandExecuted((V) => {
       if (V.id === Rr.id) {
@@ -2059,7 +2059,7 @@ const Me = (t) => {
     return () => E.dispose();
   }, []);
   const R = (E) => {
-    p.current = E;
+    f.current = E;
   }, w = (E) => {
     const V = E.split(",").filter((L) => !!L).map(Zr).map((L) => L.range);
     l.current = V;
@@ -2082,16 +2082,16 @@ const Me = (t) => {
         t.rule && t.rule.cfId ? (Y = { ...t.rule, ranges: V, rule: m }, r.executeCommand(Cr.id, { unitId: I, subUnitId: H, rule: Y }), t.onCancel()) : (Y = { cfId: i.createCfId(I, H), ranges: V, rule: m, stopIfTrue: !1 }, r.executeCommand(_n.id, { unitId: I, subUnitId: H, rule: Y }), t.onCancel());
       }
     }
-  }, g = () => {
+  }, v = () => {
     t.onCancel();
   }, C = (E, V) => {
-    E ? V.length < 1 ? u(e.t("sheet.cf.errorMessage.rangeError")) : u(void 0) : u(e.t("sheet.cf.errorMessage.rangeError"));
+    E ? V.length < 1 ? h(e.t("sheet.cf.errorMessage.rangeError")) : h(void 0) : h(e.t("sheet.cf.errorMessage.rangeError"));
   };
   return /* @__PURE__ */ k("div", { children: [
     /* @__PURE__ */ c(
       "div",
       {
-        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
         children: e.t("sheet.cf.panel.range")
       }
     ),
@@ -2101,7 +2101,7 @@ const Me = (t) => {
         {
           unitId: o,
           subUnitId: d,
-          initialValue: h,
+          initialValue: u,
           onChange: (E, V) => w(V),
           onVerify: C
         }
@@ -2111,7 +2111,7 @@ const Me = (t) => {
     /* @__PURE__ */ c(
       "div",
       {
-        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:univer-text-gray-200",
+        className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
         children: e.t("sheet.cf.panel.styleType")
       }
     ),
@@ -2119,8 +2119,8 @@ const Me = (t) => {
       le,
       {
         className: "univer-mt-4 univer-w-full",
-        value: f,
-        options: v,
+        value: p,
+        options: g,
         onChange: (E) => S(E)
       }
     ),
@@ -2133,7 +2133,7 @@ const Me = (t) => {
       }
     ),
     /* @__PURE__ */ k("div", { className: "univer-mt-4 univer-flex univer-justify-end", children: [
-      /* @__PURE__ */ c(Jt, { onClick: g, children: e.t("sheet.cf.panel.cancel") }),
+      /* @__PURE__ */ c(Jt, { onClick: v, children: e.t("sheet.cf.panel.cancel") }),
       /* @__PURE__ */ c(Jt, { className: "univer-ml-3", variant: "primary", onClick: x, children: e.t("sheet.cf.panel.submit") })
     ] })
   ] });
@@ -2165,15 +2165,15 @@ let De = class extends ce {
     const n = this._localeService.getLocales(), i = e.split("."), s = n && this._localeService.resolveKeyPath(n, i);
     if (typeof s == "string") {
       const o = [];
-      return this._findReplaceIndex(s).forEach((d, a, u) => {
-        const l = u[a - 1] || { endIndex: -1 };
+      return this._findReplaceIndex(s).forEach((d, a, h) => {
+        const l = h[a - 1] || { endIndex: -1 };
         if (l.endIndex + 1 < d.startIndex) {
-          const h = s.slice(l.endIndex + 1, d.startIndex);
-          h && o.push(h);
+          const u = s.slice(l.endIndex + 1, d.startIndex);
+          u && o.push(u);
         }
-        if (r[d.key] && o.push(r[d.key]), a === u.length - 1) {
-          const h = s.slice(d.endIndex + 1);
-          h && o.push(h);
+        if (r[d.key] && o.push(r[d.key]), a === h.length - 1) {
+          const u = s.slice(d.endIndex + 1);
+          u && o.push(u);
         }
       }), o;
     }
@@ -2223,14 +2223,14 @@ const Ni = (t, e) => {
 };
 let dn = 0;
 const Mi = (t) => {
-  const { onClick: e } = t, r = W(Q), n = W(z), i = W($e), s = W(te), o = W(re), d = W(ve), a = W(Fn), u = W(De), l = Dr(() => n.getCurrentTypeOfUnit$($.UNIVER_SHEET), void 0, void 0, []), h = l.getUnitId(), v = l.getActiveSheet();
-  if (!v)
+  const { onClick: e } = t, r = W(Q), n = W(z), i = W($e), s = W(te), o = W(re), d = W(ve), a = W(Fn), h = W(De), l = Dr(() => n.getCurrentTypeOfUnit$($.UNIVER_SHEET), void 0, void 0, []), u = l.getUnitId(), g = l.getActiveSheet();
+  if (!g)
     throw new Error("No active sheet found");
-  const f = v.getSheetId(), [S, p] = N([]), [T, _] = N("2"), [R, w] = N(0), [x, g] = N(-1), [C, b] = N(dn), y = de(null), M = [
+  const p = g.getSheetId(), [S, f] = N([]), [T, _] = N("2"), [R, w] = N(0), [x, v] = N(-1), [C, b] = N(dn), y = de(null), M = [
     { label: o.t("sheet.cf.panel.workSheet"), value: "2" },
     { label: o.t("sheet.cf.panel.selectedRange"), value: "1" }
   ], E = () => {
-    const D = r.getSubunitRules(h, f);
+    const D = r.getSubunitRules(u, p);
     if (!D || !D.length)
       return [];
     if (T === "1") {
@@ -2250,7 +2250,7 @@ const Mi = (t) => {
     return () => D.dispose();
   }), K(() => {
     L(E);
-  }, [T, R, h, f]), K(() => {
+  }, [T, R, u, p]), K(() => {
     if (T === "2")
       return;
     const D = new xe((B) => {
@@ -2265,7 +2265,7 @@ const Mi = (t) => {
     return () => {
       D.unsubscribe();
     };
-  }, [n, T, h, f]), K(() => {
+  }, [n, T, u, p]), K(() => {
     const D = r.$ruleChange.subscribe(() => {
       w(Math.random());
     });
@@ -2304,10 +2304,10 @@ const Mi = (t) => {
       throw new Error("No active sheet found");
     s.executeCommand(Kt.id, { unitId: B, subUnitId: G, cfId: D.cfId });
   }, I = (D, B) => {
-    g(B.y);
+    v(B.y);
   }, H = (D, B, G) => {
     var lt;
-    g(-1);
+    v(-1);
     const Z = n.getCurrentUnitOfType($.UNIVER_SHEET).getUnitId(), ee = (lt = n.getCurrentUnitOfType($.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : lt.getSheetId();
     if (!Z || !ee)
       throw new Error("No active sheet found");
@@ -2319,7 +2319,7 @@ const Mi = (t) => {
   }, Y = () => {
     t.onCreate();
   }, ge = () => {
-    T === "2" ? s.executeCommand(Rn.id) : T === "1" && V.map((B) => ({ unitId: h, subUnitId: f, cfId: B.cfId })).forEach((B) => {
+    T === "2" ? s.executeCommand(Rn.id) : T === "1" && V.map((B) => ({ unitId: u, subUnitId: p, cfId: B.cfId })).forEach((B) => {
       s.executeCommand(Kt.id, B);
     });
   }, me = J(() => {
@@ -2337,7 +2337,7 @@ const Mi = (t) => {
   }, [V]);
   return /* @__PURE__ */ k("div", { children: [
     /* @__PURE__ */ k("div", { className: "univer-flex univer-items-center univer-justify-between univer-gap-2 univer-text-sm", children: [
-      /* @__PURE__ */ c("div", { className: "univer-flex univer-items-center univer-gap-2", children: u.tWithReactNode(
+      /* @__PURE__ */ c("div", { className: "univer-flex univer-items-center univer-gap-2", children: h.tWithReactNode(
         "sheet.cf.panel.managerRuleSelect",
         /* @__PURE__ */ c(
           le,
@@ -2385,13 +2385,13 @@ const Mi = (t) => {
         children: me == null ? void 0 : me.map((D, B) => /* @__PURE__ */ c("div", { children: /* @__PURE__ */ k(
           "div",
           {
-            className: X("univer-group univer-relative univer-flex univer-items-center univer-justify-between univer-rounded univer-py-2 univer-pl-5 univer-pr-8 hover:univer-bg-gray-100", {
-              "univer-bg-gray-100": x === B
+            className: X("univer-group univer-relative univer-flex univer-items-center univer-justify-between univer-rounded univer-py-2 univer-pl-5 univer-pr-8 dark:hover:!univer-bg-gray-700 hover:univer-bg-gray-100", {
+              "univer-bg-gray-100 dark:!univer-bg-gray-700": x === B
             }),
             onMouseMove: () => {
-              D.ranges !== S && p(D.ranges);
+              D.ranges !== S && f(D.ranges);
             },
-            onMouseLeave: () => p([]),
+            onMouseLeave: () => f([]),
             onClick: () => {
               e(D);
             },
@@ -2412,7 +2412,7 @@ const Mi = (t) => {
                     /* @__PURE__ */ c(
                       "div",
                       {
-                        className: "univer-text-sm univer-text-gray-900 dark:univer-text-white",
+                        className: "univer-text-sm univer-text-gray-900 dark:!univer-text-white",
                         children: Ni(D, o)
                       }
                     ),
@@ -2428,7 +2428,7 @@ const Mi = (t) => {
                     "univer-flex univer-items-center univer-justify-center": x === B
                   }),
                   onClick: (G) => {
-                    G.stopPropagation(), m(D), p([]);
+                    G.stopPropagation(), m(D), f([]);
                   },
                   children: /* @__PURE__ */ c(gt, {})
                 }
@@ -2484,7 +2484,9 @@ let Qe = class extends ce {
     this._sidebarDisposable = this._sidebarService.open(r);
   }
   _initPanel() {
-    this._componentManager.register(ht, Vi);
+    this.disposeWithMe(
+      this._componentManager.register(ht, Vi)
+    );
   }
 };
 Qe = Fi([
@@ -2624,15 +2626,15 @@ let et = class extends ce {
     const o = this._injector.invoke((l) => Er(n, l, e, r));
     if (!o)
       return;
-    const { rows: d, cols: a } = o, u = /* @__PURE__ */ new Set();
-    d.forEach((l, h) => {
-      a.forEach((v, f) => {
-        const S = this._conditionalFormattingViewModel.getCellCfs(e, r, l, v);
-        S && (S.forEach((p) => u.add(p.cfId)), i.setValue(h, f, S.map((p) => p.cfId)));
+    const { rows: d, cols: a } = o, h = /* @__PURE__ */ new Set();
+    d.forEach((l, u) => {
+      a.forEach((g, p) => {
+        const S = this._conditionalFormattingViewModel.getCellCfs(e, r, l, g);
+        S && (S.forEach((f) => h.add(f.cfId)), i.setValue(u, p, S.map((f) => f.cfId)));
       });
-    }), u.forEach((l) => {
-      const h = this._conditionalFormattingRuleModel.getRule(e, r, l);
-      h && (s[l] = h.rule);
+    }), h.forEach((l) => {
+      const u = this._conditionalFormattingRuleModel.getRule(e, r, l);
+      u && (s[l] = u.rule);
     });
   }
   // eslint-disable-next-line max-lines-per-function
@@ -2652,13 +2654,13 @@ let et = class extends ce {
       r.pasteType
     ))
       return { redos: [], undos: [] };
-    const { ranges: [a, u], mapFunc: l } = Pn([r.copyRange, e]), h = Jr(a, u, !0), v = {};
-    pe.foreach(u, (g, C) => {
-      const { row: b, col: y } = l(g, C), M = this._conditionalFormattingViewModel.getCellCfs(s, o, b, y);
+    const { ranges: [a, h], mapFunc: l } = Pn([r.copyRange, e]), u = Jr(a, h, !0), g = {};
+    pe.foreach(h, (v, C) => {
+      const { row: b, col: y } = l(v, C), M = this._conditionalFormattingViewModel.getCellCfs(s, o, b, y);
       M && M.forEach((E) => {
-        if (!v[E.cfId]) {
+        if (!g[E.cfId]) {
           const V = new we();
-          v[E.cfId] = V;
+          g[E.cfId] = V;
           const L = this._conditionalFormattingRuleModel.getRule(s, o, E.cfId);
           L == null || L.ranges.forEach((m) => {
             pe.foreach(m, (I, H) => {
@@ -2666,17 +2668,17 @@ let et = class extends ce {
             });
           });
         }
-        v[E.cfId].realDeleteValue(b, y);
+        g[E.cfId].realDeleteValue(b, y);
       });
     });
-    const { matrix: f, info: S } = this._copyInfo, p = [];
+    const { matrix: p, info: S } = this._copyInfo, f = [];
     let T = this._conditionalFormattingRuleModel.createCfId(s, o);
-    const _ = {}, R = (g) => {
-      if (_[g])
-        return _[g];
-      const C = S == null ? void 0 : S.cfMap[g], b = [...this._conditionalFormattingRuleModel.getSubunitRules(s, o) || [], ...p].find((y) => Wt.diffValue(y.rule, C));
+    const _ = {}, R = (v) => {
+      if (_[v])
+        return _[v];
+      const C = S == null ? void 0 : S.cfMap[v], b = [...this._conditionalFormattingRuleModel.getSubunitRules(s, o) || [], ...f].find((y) => Wt.diffValue(y.rule, C));
       if (b)
-        return _[g] = b, b;
+        return _[v] = b, b;
       {
         const y = {
           rule: C,
@@ -2684,11 +2686,11 @@ let et = class extends ce {
           ranges: [],
           stopIfTrue: !1
         };
-        return _[g] = y, p.push(y), T = `${Number(T) + 1}`, y;
+        return _[v] = y, f.push(y), T = `${Number(T) + 1}`, y;
       }
     };
-    h.forEach((g) => {
-      f && f.forValue((C, b, y) => {
+    u.forEach((v) => {
+      p && p.forValue((C, b, y) => {
         const M = fe.getPositionRange(
           {
             startRow: C,
@@ -2696,41 +2698,41 @@ let et = class extends ce {
             startColumn: b,
             endColumn: b
           },
-          g.startRange
+          v.startRange
         ), { row: E, col: V } = l(M.startRow, M.startColumn);
         y.forEach((L) => {
-          if (!v[L]) {
+          if (!g[L]) {
             const m = R(L), I = new we();
-            v[L] = I, m.ranges.forEach((H) => {
+            g[L] = I, m.ranges.forEach((H) => {
               pe.foreach(H, (Y, ge) => {
                 I.setValue(Y, ge, 1);
               });
             });
           }
-          v[L].setValue(E, V, 1);
+          g[L].setValue(E, V, 1);
         });
       });
     });
     const w = [], x = [];
-    for (const g in v) {
-      const C = v[g], b = pt(Ct(C));
+    for (const v in g) {
+      const C = g[v], b = pt(Ct(C));
       if (!b.length) {
         const y = {
           unitId: s,
           subUnitId: o,
-          cfId: g
+          cfId: v
         };
         w.push({ id: Se.id, params: y }), x.push(...Le(this._injector, y));
       }
-      if (p.some((y) => y.cfId === g)) {
-        const y = R(g), M = {
+      if (f.some((y) => y.cfId === v)) {
+        const y = R(v), M = {
           unitId: s,
           subUnitId: o,
           rule: { ...y, ranges: b }
         };
         w.push({ id: se.id, params: M }), x.push(xn(this._injector, M));
       } else {
-        const y = this._conditionalFormattingRuleModel.getRule(s, o, g);
+        const y = this._conditionalFormattingRuleModel.getRule(s, o, v);
         if (!y)
           continue;
         const M = {
@@ -2792,20 +2794,20 @@ let nt = class extends ce {
   _initRefRange() {
     const t = /* @__PURE__ */ new Map(), e = (n, i, s) => `${n}_${i}_${s}`, r = (n, i, s) => {
       const o = (a) => {
-        const u = [...s.ranges], l = u.map((v) => Vr(v, a)).filter((v) => !!v);
-        if (Sr(l, u))
+        const h = [...s.ranges], l = h.map((g) => Vr(g, a)).filter((g) => !!g);
+        if (Sr(l, h))
           return { redos: [], undos: [] };
         if (l.length) {
-          const v = { unitId: n, subUnitId: i, rule: { ...s, ranges: l } }, f = [{ id: be.id, params: v }], S = Ae(this._injector, v);
-          return { redos: f, undos: S };
+          const g = { unitId: n, subUnitId: i, rule: { ...s, ranges: l } }, p = [{ id: be.id, params: g }], S = Ae(this._injector, g);
+          return { redos: p, undos: S };
         } else {
-          const v = { unitId: n, subUnitId: i, cfId: s.cfId }, f = [{ id: Se.id, params: v }], S = Le(this._injector, v);
-          return { redos: f, undos: S };
+          const g = { unitId: n, subUnitId: i, cfId: s.cfId }, p = [{ id: Se.id, params: g }], S = Le(this._injector, g);
+          return { redos: p, undos: S };
         }
       }, d = [];
       s.ranges.forEach((a) => {
-        const u = this._refRangeService.registerRefRange(a, o);
-        d.push(() => u.dispose());
+        const h = this._refRangeService.registerRefRange(a, o);
+        d.push(() => h.dispose());
       }), t.set(e(n, i, s.cfId), () => d.forEach((a) => a()));
     };
     this.disposeWithMe(this._conditionalFormattingRuleModel.$ruleChange.subscribe((n) => {
@@ -2817,13 +2819,13 @@ let nt = class extends ce {
             break;
           }
           case "delete": {
-            const u = t.get(e(i, s, o.cfId));
-            u && u();
+            const h = t.get(e(i, s, o.cfId));
+            h && h();
             break;
           }
           case "set": {
-            const u = t.get(e(i, s, o.cfId));
-            u && u(), r(n.unitId, n.subUnitId, n.rule);
+            const h = t.get(e(i, s, o.cfId));
+            h && h(), r(n.unitId, n.subUnitId, n.rule);
           }
         }
     })), this.disposeWithMe(Cn(() => {
@@ -2948,53 +2950,53 @@ let It = class extends ce {
   // eslint-disable-next-line max-lines-per-function
   _initAutoFill() {
     const t = () => ({ redos: [], undos: [] }), e = (i, s, o, d, a) => {
-      var f;
-      const u = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET).getUnitId(), l = (f = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : f.getSheetId();
-      if (!u || !l)
+      var p;
+      const h = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET).getUnitId(), l = (p = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : p.getSheetId();
+      if (!h || !l)
         return;
-      const h = {
+      const u = {
         startRow: i.row,
         startColumn: i.col,
         endColumn: i.col,
         endRow: i.row
-      }, v = {
+      }, g = {
         startRow: s.row,
         startColumn: s.col,
         endColumn: s.col,
         endRow: s.row
       };
-      pe.foreach(o, (S, p) => {
+      pe.foreach(o, (S, f) => {
         const T = fe.getPositionRange(
           {
             startRow: S,
-            startColumn: p,
-            endColumn: p,
+            startColumn: f,
+            endColumn: f,
             endRow: S
           },
-          h
+          u
         ), _ = fe.getPositionRange(
           {
             startRow: S,
-            startColumn: p,
-            endColumn: p,
+            startColumn: f,
+            endColumn: f,
             endRow: S
           },
-          v
+          g
         ), { row: R, col: w } = a(T.startRow, T.startColumn), x = this._conditionalFormattingViewModel.getCellCfs(
-          u,
+          h,
           l,
           R,
           w
-        ), { row: g, col: C } = a(_.startRow, _.startColumn), b = this._conditionalFormattingViewModel.getCellCfs(
-          u,
+        ), { row: v, col: C } = a(_.startRow, _.startColumn), b = this._conditionalFormattingViewModel.getCellCfs(
+          h,
           l,
-          g,
+          v,
           C
         );
         b && b.forEach((y) => {
           let M = d.get(y.cfId);
           if (!d.get(y.cfId)) {
-            const E = this._conditionalFormattingRuleModel.getRule(u, l, y.cfId);
+            const E = this._conditionalFormattingRuleModel.getRule(h, l, y.cfId);
             if (!E)
               return;
             M = new we(), E.ranges.forEach((V) => {
@@ -3003,11 +3005,11 @@ let It = class extends ce {
               });
             }), d.set(y.cfId, M);
           }
-          M.realDeleteValue(g, C);
+          M.realDeleteValue(v, C);
         }), x && x.forEach((y) => {
           let M = d.get(y.cfId);
           if (!d.get(y.cfId)) {
-            const E = this._conditionalFormattingRuleModel.getRule(u, l, y.cfId);
+            const E = this._conditionalFormattingRuleModel.getRule(h, l, y.cfId);
             if (!E)
               return;
             M = new we(), E.ranges.forEach((V) => {
@@ -3016,22 +3018,22 @@ let It = class extends ce {
               });
             }), d.set(y.cfId, M);
           }
-          M.setValue(g, C, 1);
+          M.setValue(v, C, 1);
         });
       });
     }, r = (i, s) => {
       var _, R, w;
-      const o = (_ = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : _.getUnitId(), d = (w = (R = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : R.getActiveSheet()) == null ? void 0 : w.getSheetId(), a = /* @__PURE__ */ new Map(), u = [], l = [];
+      const o = (_ = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : _.getUnitId(), d = (w = (R = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : R.getActiveSheet()) == null ? void 0 : w.getSheetId(), a = /* @__PURE__ */ new Map(), h = [], l = [];
       if (!o || !d)
         return t();
-      const h = Pn([i, s]), [v, f] = h.ranges, { mapFunc: S } = h, p = {
-        row: v.startRow,
-        col: v.startColumn
+      const u = Pn([i, s]), [g, p] = u.ranges, { mapFunc: S } = u, f = {
+        row: g.startRow,
+        col: g.startColumn
       };
-      return ei(v, f).forEach((x) => {
-        e(p, x.repeatStartCell, x.relativeRange, a, S);
-      }), a.forEach((x, g) => {
-        const C = this._conditionalFormattingRuleModel.getRule(o, d, g);
+      return ei(g, p).forEach((x) => {
+        e(f, x.repeatStartCell, x.relativeRange, a, S);
+      }), a.forEach((x, v) => {
+        const C = this._conditionalFormattingRuleModel.getRule(o, d, v);
         if (!C)
           return;
         const b = pt(Ct(x));
@@ -3041,18 +3043,18 @@ let It = class extends ce {
             subUnitId: d,
             rule: { ...C, ranges: b }
           };
-          u.push({ id: be.id, params: y }), l.push(...Ae(this._injector, y));
+          h.push({ id: be.id, params: y }), l.push(...Ae(this._injector, y));
         } else {
           const y = {
             unitId: o,
             subUnitId: d,
             cfId: C.cfId
           };
-          u.push({ id: Se.id, params: y }), l.push(...Le(this._injector, y));
+          h.push({ id: Se.id, params: y }), l.push(...Le(this._injector, y));
         }
       }), {
         undos: l,
-        redos: u
+        redos: h
       };
     }, n = {
       id: st,
@@ -3089,17 +3091,17 @@ let _t = class extends ce {
         var i;
         const e = [], r = [], n = { redos: e, undos: r };
         if ([Fr.id, Ur.id].includes(t.id)) {
-          const s = (i = this._selectionManagerService.getCurrentSelections()) == null ? void 0 : i.map((f) => f.range);
+          const s = (i = this._selectionManagerService.getCurrentSelections()) == null ? void 0 : i.map((p) => p.range);
           if (!s)
             return n;
           const o = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET), d = o.getActiveSheet();
           if (!d)
             return n;
-          const a = o.getUnitId(), u = d.getSheetId(), l = this._conditionalFormattingRuleModel.getSubunitRules(a, u);
+          const a = o.getUnitId(), h = d.getSheetId(), l = this._conditionalFormattingRuleModel.getSubunitRules(a, h);
           if (!l || !l.length)
             return n;
-          const { redos: h, undos: v } = hn(this._injector, l, s, a, u);
-          e.push(...h), r.push(...v);
+          const { redos: u, undos: g } = hn(this._injector, l, s, a, h);
+          e.push(...u), r.push(...g);
         }
         return n;
       }
@@ -3126,18 +3128,18 @@ _t = Yi([
 ], _t);
 function hn(t, e, r, n, i) {
   const s = [], o = [];
-  return e.filter((d) => r.some((a) => d.ranges.some((u) => fe.getIntersects(u, a)))).forEach((d) => {
-    const u = new Pr().add(...d.ranges).subtract(...r).merge();
-    if (u.length) {
+  return e.filter((d) => r.some((a) => d.ranges.some((h) => fe.getIntersects(h, a)))).forEach((d) => {
+    const h = new Pr().add(...d.ranges).subtract(...r).merge();
+    if (h.length) {
       const l = {
         id: be.id,
         params: {
           unitId: n,
           subUnitId: i,
-          rule: { ...d, ranges: u }
+          rule: { ...d, ranges: h }
         }
-      }, h = Ae(t, l.params);
-      s.push(l), o.push(...h);
+      }, u = Ae(t, l.params);
+      s.push(l), o.push(...u);
     } else {
       const l = {
         id: Se.id,
@@ -3146,8 +3148,8 @@ function hn(t, e, r, n, i) {
           subUnitId: i,
           cfId: d.cfId
         }
-      }, h = Le(t, l.params);
-      s.push(l), o.push(...h);
+      }, u = Le(t, l.params);
+      s.push(l), o.push(...u);
     }
   }), { redos: s, undos: o };
 }
@@ -3176,18 +3178,18 @@ let Tt = class extends ce {
               t || r(t);
               const n = this._conditionalFormattingService.composeStyle(e.unitId, e.subUnitId, e.row, e.col), i = (o = n == null ? void 0 : n.style) != null ? o : {}, s = Object.keys(i);
               if (t != null && t.p)
-                return (a = (d = t.p.body) == null ? void 0 : d.textRuns) == null || a.forEach((u) => {
-                  u.ts && s.forEach((l) => {
-                    var h;
-                    (h = u.ts) == null || delete h[l];
+                return (a = (d = t.p.body) == null ? void 0 : d.textRuns) == null || a.forEach((h) => {
+                  h.ts && s.forEach((l) => {
+                    var u;
+                    (u = h.ts) == null || delete u[l];
                   });
                 }), r(t);
               {
-                const u = { ...(typeof (t == null ? void 0 : t.s) == "string" ? e.workbook.getStyles().get(t.s) : t == null ? void 0 : t.s) || {} };
-                s.forEach((h) => {
-                  delete u[h];
+                const h = { ...(typeof (t == null ? void 0 : t.s) == "string" ? e.workbook.getStyles().get(t.s) : t == null ? void 0 : t.s) || {} };
+                s.forEach((u) => {
+                  delete h[u];
                 });
-                const l = { ...t, s: { ...u } };
+                const l = { ...t, s: { ...h } };
                 return r(l);
               }
             }
@@ -3283,48 +3285,48 @@ const gn = [
   const e = t.get($e), r = t.get(te), n = t.get(z), i = t.get(Q), s = new xe((a) => Ln(
     e.selectionMoveEnd$,
     e.selectionSet$,
-    new xe((u) => {
-      const l = r.onCommandExecuted((h) => {
-        var p;
-        const { id: v, params: f } = h, S = (p = n.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : p.getUnitId();
-        gn.includes(v) && f.unitId === S && u.next(null);
+    new xe((h) => {
+      const l = r.onCommandExecuted((u) => {
+        var f;
+        const { id: g, params: p } = u, S = (f = n.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : f.getUnitId();
+        gn.includes(g) && p.unitId === S && h.next(null);
       });
       return () => l.dispose();
     })
   ).pipe(rn(16)).subscribe(() => {
-    var p;
-    const u = ((p = e.getCurrentSelections()) == null ? void 0 : p.map((T) => T.range)) || [], l = n.getCurrentUnitForType($.UNIVER_SHEET);
+    var f;
+    const h = ((f = e.getCurrentSelections()) == null ? void 0 : f.map((T) => T.range)) || [], l = n.getCurrentUnitForType($.UNIVER_SHEET);
     if (!l) return;
-    const h = l.getActiveSheet();
-    if (!h) return;
-    const S = (i.getSubunitRules(l.getUnitId(), h.getSheetId()) || []).filter((T) => T.ranges.some((_) => u.some((R) => fe.intersects(R, _)))).map((T) => T.ranges).every((T) => ft(t, l.getUnitId(), h.getSheetId(), T));
+    const u = l.getActiveSheet();
+    if (!u) return;
+    const S = (i.getSubunitRules(l.getUnitId(), u.getSheetId()) || []).filter((T) => T.ranges.some((_) => h.some((R) => fe.intersects(R, _)))).map((T) => T.ranges).every((T) => ft(t, l.getUnitId(), u.getSheetId(), T));
     a.next(S);
   })), o = new xe(
-    (a) => new xe((u) => {
-      const l = r.onCommandExecuted((h) => {
-        var p;
-        const { id: v, params: f } = h, S = (p = n.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : p.getUnitId();
-        gn.includes(v) && f.unitId === S && u.next(null);
+    (a) => new xe((h) => {
+      const l = r.onCommandExecuted((u) => {
+        var f;
+        const { id: g, params: p } = u, S = (f = n.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : f.getUnitId();
+        gn.includes(g) && p.unitId === S && h.next(null);
       });
       return () => l.dispose();
     }).pipe(rn(16)).subscribe(() => {
-      const u = n.getCurrentUnitForType($.UNIVER_SHEET);
-      if (!u) return;
-      const l = u.getActiveSheet();
+      const h = n.getCurrentUnitForType($.UNIVER_SHEET);
+      if (!h) return;
+      const l = h.getActiveSheet();
       if (!l) return;
-      const h = i.getSubunitRules(u.getUnitId(), l.getSheetId()) || [];
-      if (!h.length)
+      const u = i.getSubunitRules(h.getUnitId(), l.getSheetId()) || [];
+      if (!u.length)
         return a.next(!1), !1;
-      const v = h.map((f) => f.ranges).every((f) => ft(t, u.getUnitId(), l.getSheetId(), f));
-      a.next(v);
+      const g = u.map((p) => p.ranges).every((p) => ft(t, h.getUnitId(), l.getSheetId(), p));
+      a.next(g);
     })
   ), d = new xe((a) => {
-    s.subscribe((u) => {
-      const l = Ye.find((h) => h.value === ie.clearRangeRules);
-      l && (l.disabled = !u, a.next(Ye));
-    }), o.subscribe((u) => {
-      const l = Ye.find((h) => h.value === ie.clearWorkSheetRules);
-      l && (l.disabled = !u, a.next(Ye));
+    s.subscribe((h) => {
+      const l = Ye.find((u) => u.value === ie.clearRangeRules);
+      l && (l.disabled = !h, a.next(Ye));
+    }), o.subscribe((h) => {
+      const l = Ye.find((u) => u.value === ie.clearWorkSheetRules);
+      l && (l.disabled = !h, a.next(Ye));
     }), a.next(Ye);
   });
   return {
@@ -3337,9 +3339,9 @@ const gn = [
     disabled$: ti(t, { workbookTypes: [kn], worksheetTypes: [Mn, Nn], rangeTypes: [Vn] })
   };
 }, Qi = {
-  [Hr.FORMULAS_INSERT]: {
+  [Hr.RULES]: {
     [kt.id]: {
-      order: 0,
+      order: 1,
       menuItemFactory: Ji
     }
   }
@@ -3366,7 +3368,7 @@ var ns = Object.getOwnPropertyDescriptor, rs = (t, e, r, n) => {
   return i;
 }, Oe = (t, e) => (r, n) => e(r, n, t);
 const is = (t, e) => {
-  const r = (l) => l.endRow - l.startRow + 1, n = (l) => l.endColumn - l.startColumn + 1, i = r(e) % r(t), s = n(e) % n(t), o = Math.floor(r(e) / r(t)), d = Math.floor(n(e) / n(t)), a = [], u = {
+  const r = (l) => l.endRow - l.startRow + 1, n = (l) => l.endColumn - l.startColumn + 1, i = r(e) % r(t), s = n(e) % n(t), o = Math.floor(r(e) / r(t)), d = Math.floor(n(e) / n(t)), a = [], h = {
     startRow: 0,
     endRow: r(t) - 1,
     startColumn: 0,
@@ -3379,18 +3381,18 @@ const is = (t, e) => {
       startColumn: e.startColumn,
       endColumn: e.startColumn
     };
-    return a.push({ repeatRelativeRange: u, startRange: l }), a;
+    return a.push({ repeatRelativeRange: h, startRange: l }), a;
   }
   for (let l = 0; l < o + (i ? 0.1 : 0); l++)
-    for (let h = 0; h < d + (s ? 0.1 : 0); h++) {
-      const v = r(t) * l, f = n(t) * h, S = {
-        startRow: v + e.startRow,
-        endRow: v + e.startRow,
-        startColumn: f + e.startColumn,
-        endColumn: f + e.startColumn
+    for (let u = 0; u < d + (s ? 0.1 : 0); u++) {
+      const g = r(t) * l, p = n(t) * u, S = {
+        startRow: g + e.startRow,
+        endRow: g + e.startRow,
+        startColumn: p + e.startColumn,
+        endColumn: p + e.startColumn
       };
-      let p = u;
-      l === o && i && (p = { ...p }, p.endRow = p.endRow - (r(t) - i)), h === d && s && (p = { ...p }, p.endColumn = p.endColumn - (n(t) - s)), a.push({ repeatRelativeRange: p, startRange: S });
+      let f = h;
+      l === o && i && (f = { ...f }, f.endRow = f.endRow - (r(t) - i)), u === d && s && (f = { ...f }, f.endColumn = f.endColumn - (n(t) - s)), a.push({ repeatRelativeRange: f, startRange: S });
     }
   return a;
 };
@@ -3402,13 +3404,13 @@ let xt = class extends ce {
   }
   // eslint-disable-next-line max-lines-per-function
   _initFormattingPainter() {
-    const e = () => ({ redos: [], undos: [] }), r = (s, o, d, a, u) => {
-      const { unitId: l, subUnitId: h } = this._painterConfig, { targetUnitId: v, targetSubUnitId: f } = u, S = {
+    const e = () => ({ redos: [], undos: [] }), r = (s, o, d, a, h) => {
+      const { unitId: l, subUnitId: u } = this._painterConfig, { targetUnitId: g, targetSubUnitId: p } = h, S = {
         startRow: s.row,
         startColumn: s.col,
         endColumn: s.col,
         endRow: s.row
-      }, p = {
+      }, f = {
         startRow: o.row,
         startColumn: o.col,
         endColumn: o.col,
@@ -3430,22 +3432,22 @@ let xt = class extends ce {
             endColumn: _,
             endRow: T
           },
-          p
+          f
         ), x = this._conditionalFormattingViewModel.getCellCfs(
           l,
-          h,
+          u,
           R.startRow,
           R.startColumn
-        ), g = this._conditionalFormattingViewModel.getCellCfs(
-          v,
-          f,
+        ), v = this._conditionalFormattingViewModel.getCellCfs(
+          g,
+          p,
           w.startRow,
           w.startColumn
         );
-        g && g.forEach((C) => {
+        v && v.forEach((C) => {
           let b = a.get(C.cfId);
           if (!a.get(C.cfId)) {
-            const y = this._conditionalFormattingRuleModel.getRule(v, f, C.cfId);
+            const y = this._conditionalFormattingRuleModel.getRule(g, p, C.cfId);
             if (!y)
               return;
             b = new we(), y.ranges.forEach((M) => {
@@ -3462,19 +3464,19 @@ let xt = class extends ce {
       });
     }, n = (s, o, d) => {
       var R;
-      const { range: a, unitId: u, subUnitId: l } = this._painterConfig, h = s !== u || l !== o, v = /* @__PURE__ */ new Map(), f = [], S = [];
-      if (!s || !o || !u || !l)
+      const { range: a, unitId: h, subUnitId: l } = this._painterConfig, u = s !== h || l !== o, g = /* @__PURE__ */ new Map(), p = [], S = [];
+      if (!s || !o || !h || !l)
         return e();
-      const p = (R = this._conditionalFormattingRuleModel.getSubunitRules(u, l)) != null ? R : [];
-      p == null || p.forEach((w) => {
-        const { ranges: x, cfId: g } = w;
+      const f = (R = this._conditionalFormattingRuleModel.getSubunitRules(h, l)) != null ? R : [];
+      f == null || f.forEach((w) => {
+        const { ranges: x, cfId: v } = w;
         if (x.some((C) => fe.intersects(a, C))) {
           const C = new we();
-          h || x.forEach((b) => {
+          u || x.forEach((b) => {
             pe.foreach(b, (y, M) => {
               C.setValue(y, M, 1);
             });
-          }), v.set(g, C);
+          }), g.set(v, C);
         }
       });
       const T = {
@@ -3482,28 +3484,28 @@ let xt = class extends ce {
         col: a.startColumn
       };
       return is(a, d).forEach((w) => {
-        r(T, { row: w.startRange.startRow, col: w.startRange.startColumn }, w.repeatRelativeRange, v, { targetUnitId: s, targetSubUnitId: o });
-      }), v.forEach((w, x) => {
-        if (h) {
-          const g = this._conditionalFormattingRuleModel.getRule(s, o, x), C = pt(Ct(w));
-          if (g)
+        r(T, { row: w.startRange.startRow, col: w.startRange.startColumn }, w.repeatRelativeRange, g, { targetUnitId: s, targetSubUnitId: o });
+      }), g.forEach((w, x) => {
+        if (u) {
+          const v = this._conditionalFormattingRuleModel.getRule(s, o, x), C = pt(Ct(w));
+          if (v)
             if (C.length) {
               const b = {
                 unitId: s,
                 subUnitId: o,
-                rule: { ...g, ranges: C }
+                rule: { ...v, ranges: C }
               };
-              f.push({ id: be.id, params: b }), S.push(...Ae(this._injector, b));
+              p.push({ id: be.id, params: b }), S.push(...Ae(this._injector, b));
             } else {
               const b = {
                 unitId: s,
                 subUnitId: o,
-                cfId: g.cfId
+                cfId: v.cfId
               };
-              f.push({ id: Se.id, params: b }), S.push(...Le(this._injector, b));
+              p.push({ id: Se.id, params: b }), S.push(...Le(this._injector, b));
             }
           else if (C.length) {
-            const b = this._conditionalFormattingRuleModel.getRule(u, l, x);
+            const b = this._conditionalFormattingRuleModel.getRule(h, l, x);
             if (b) {
               const y = {
                 unitId: s,
@@ -3514,33 +3516,33 @@ let xt = class extends ce {
                   ranges: C
                 }
               };
-              f.push({ id: se.id, params: y }), S.push(xn(this._injector, y));
+              p.push({ id: se.id, params: y }), S.push(xn(this._injector, y));
             }
           }
         } else {
-          const g = this._conditionalFormattingRuleModel.getRule(u, l, x);
-          if (!g)
+          const v = this._conditionalFormattingRuleModel.getRule(h, l, x);
+          if (!v)
             return;
           const C = pt(Ct(w));
           if (C.length) {
             const b = {
-              unitId: u,
+              unitId: h,
               subUnitId: l,
-              rule: { ...g, ranges: C }
+              rule: { ...v, ranges: C }
             };
-            f.push({ id: be.id, params: b }), S.push(...Ae(this._injector, b));
+            p.push({ id: be.id, params: b }), S.push(...Ae(this._injector, b));
           } else {
             const b = {
-              unitId: u,
+              unitId: h,
               subUnitId: l,
-              cfId: g.cfId
+              cfId: v.cfId
             };
-            f.push({ id: Se.id, params: b }), S.push(...Le(this._injector, b));
+            p.push({ id: Se.id, params: b }), S.push(...Le(this._injector, b));
           }
         }
       }), {
         undos: S,
-        redos: f
+        redos: p
       };
     }, i = {
       id: st,
@@ -3549,8 +3551,8 @@ let xt = class extends ce {
         switch (s) {
           case Ot.INFINITE:
           case Ot.ONCE: {
-            const u = (o = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : o.getUnitId(), l = (a = (d = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : d.getActiveSheet()) == null ? void 0 : a.getSheetId(), h = this._sheetsSelectionsService.getCurrentLastSelection(), v = h == null ? void 0 : h.range;
-            u && l && v && (this._painterConfig = { unitId: u, subUnitId: l, range: v });
+            const h = (o = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : o.getUnitId(), l = (a = (d = this._univerInstanceService.getCurrentUnitForType($.UNIVER_SHEET)) == null ? void 0 : d.getActiveSheet()) == null ? void 0 : a.getSheetId(), u = this._sheetsSelectionsService.getCurrentLastSelection(), g = u == null ? void 0 : u.range;
+            h && l && g && (this._painterConfig = { unitId: h, subUnitId: l, range: g });
             break;
           }
           case Ot.OFF: {
@@ -3592,8 +3594,8 @@ let wt = class extends ce {
       const s = i.with(On);
       this.disposeWithMe(s.currentSkeleton$.subscribe((o) => {
         if (o) {
-          const d = o.skeleton.rowColumnSegment, a = d.endColumn - d.startColumn + 1, l = (d.endRow - d.startRow + 1) * a * 9, h = Math.max(Tr, l);
-          this._conditionalFormattingViewModel.setCacheLength(h);
+          const d = o.skeleton.rowColumnSegment, a = d.endColumn - d.startColumn + 1, l = (d.endRow - d.startRow + 1) * a * 9, u = Math.max(Tr, l);
+          this._conditionalFormattingViewModel.setCacheLength(u);
         }
       }));
     };