epic-designer-gold 1.0.31 → 1.0.33

package/dist/{index-3fW_aWMH.js → index-Ds_DeGh-.js}

@@ -1,71 +1,71 @@
-import { c as O } from "./_commonjsHelpers-BVfed4GL.js";
-import { r as D } from "./_vue_commonjs-external-NwvjgbHK.js";
-import { c as Je, s as Rt, _ as _e, r as te, i as De, a as Mt, e as At, f as Dt, b as Vt } from "./index-D1ZL6feZ.js";
-import { e as Ht } from "./index-gA02bxwJ.js";
-import { s as Qe, b as zt } from "./index-DQ9Vb0QH.js";
-import { s as We, a as et } from "./index-BsXm6fLD.js";
-import { f as It } from "./fade-in-scale-up.cssr-BXjoIAAA.js";
-function Bt(e, o) {
+import { c as E } from "./_commonjsHelpers-BVfed4GL.js";
+import { s as At, c as Qe, _ as xe, r as re, i as De, a as Rt, b as Dt, f as Vt, e as Ht } from "./index-Bf7gu4Ub.js";
+import { r as zt } from "./index-DUFhAGX3.js";
+import { r as V } from "./_vue_commonjs-external-NwvjgbHK.js";
+import { s as et, b as It } from "./index-Dkj_Zz4E.js";
+import { s as tt, a as rt } from "./index-BakH-Ay7.js";
+import { f as Bt } from "./fade-in-scale-up.cssr-XJx96aae.js";
+function Ot(e, o) {
   for (var r = 0; r < o.length; r++) {
-    const t = o[r];
-    if (typeof t != "string" && !Array.isArray(t)) {
-      for (const a in t)
+    const n = o[r];
+    if (typeof n != "string" && !Array.isArray(n)) {
+      for (const a in n)
         if (a !== "default" && !(a in e)) {
-          const l = Object.getOwnPropertyDescriptor(t, a);
-          l && Object.defineProperty(e, a, l.get ? l : {
+          const t = Object.getOwnPropertyDescriptor(n, a);
+          t && Object.defineProperty(e, a, t.get ? t : {
             enumerable: !0,
-            get: () => t[a]
+            get: () => n[a]
           });
         }
     }
   }
   return Object.freeze(Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }));
 }
-var tt = {}, rt = {}, ot = {}, Ve = {}, ue = {};
+var ot = {}, nt = {}, lt = {}, Ve = {}, ue = {};
 Object.defineProperty(ue, "__esModule", { value: !0 });
-ue.self = nt;
-const Ot = Je, jt = Rt, Ft = We, Et = Qe;
-function nt(e) {
-  const { fontSize: o, boxShadow2: r, popoverColor: t, textColor2: a, borderRadius: l, borderColor: i, heightSmall: s, heightMedium: f, heightLarge: _, fontSizeSmall: V, fontSizeMedium: j, fontSizeLarge: F, dividerColor: oe } = e;
+ue.self = at;
+const jt = At, Ft = Qe, Et = et, Tt = tt;
+function at(e) {
+  const { fontSize: o, boxShadow2: r, popoverColor: n, textColor2: a, borderRadius: t, borderColor: i, heightSmall: s, heightMedium: f, heightLarge: x, fontSizeSmall: H, fontSizeMedium: $, fontSizeLarge: z, dividerColor: I } = e;
   return {
     panelFontSize: o,
     boxShadow: r,
-    color: t,
+    color: n,
     textColor: a,
-    borderRadius: l,
+    borderRadius: t,
     border: `1px solid ${i}`,
     heightSmall: s,
     heightMedium: f,
-    heightLarge: _,
-    fontSizeSmall: V,
-    fontSizeMedium: j,
-    fontSizeLarge: F,
-    dividerColor: oe
+    heightLarge: x,
+    fontSizeSmall: H,
+    fontSizeMedium: $,
+    fontSizeLarge: z,
+    dividerColor: I
   };
 }
-const Tt = (0, jt.createTheme)({
+const qt = (0, jt.createTheme)({
   name: "ColorPicker",
-  common: Ot.commonLight,
+  common: Ft.commonLight,
   peers: {
-    Input: Ft.inputLight,
+    Input: Tt.inputLight,
     Button: Et.buttonLight
   },
-  self: nt
+  self: at
 });
-ue.default = Tt;
+ue.default = qt;
 Object.defineProperty(Ve, "__esModule", { value: !0 });
-const qt = Qe, Nt = We, Lt = Je, Kt = ue, Xt = {
+const Nt = Qe, Lt = et, Kt = tt, Gt = ue, Xt = {
   name: "ColorPicker",
-  common: Lt.commonDark,
+  common: Nt.commonDark,
   peers: {
-    Input: Nt.inputDark,
-    Button: qt.buttonDark
+    Input: Kt.inputDark,
+    Button: Lt.buttonDark
   },
-  self: Kt.self
+  self: Gt.self
 };
 Ve.default = Xt;
 (function(e) {
-  var o = O && O.__importDefault || function(a) {
+  var o = E && E.__importDefault || function(a) {
     return a && a.__esModule ? a : { default: a };
   };
   Object.defineProperty(e, "__esModule", { value: !0 }), e.colorPickerLight = e.colorPickerDark = void 0;
@@ -73,21 +73,22 @@ Ve.default = Xt;
   Object.defineProperty(e, "colorPickerDark", { enumerable: !0, get: function() {
     return o(r).default;
   } });
-  var t = ue;
+  var n = ue;
   Object.defineProperty(e, "colorPickerLight", { enumerable: !0, get: function() {
-    return o(t).default;
+    return o(n).default;
   } });
-})(ot);
-var He = {}, $ = {};
-Object.defineProperty($, "__esModule", { value: !0 });
-$.deriveDefaultValue = Gt;
-$.getModeFromValue = lt;
-$.floor = Yt;
-$.normalizeHue = Jt;
-$.normalizeAlpha = Qt;
-$.convertColor = er;
-const d = te, Zt = _e;
-function Gt(e, o) {
+})(lt);
+var He = {}, k = {};
+Object.defineProperty(k, "__esModule", { value: !0 });
+k.deriveDefaultValue = Wt;
+k.getModeFromValue = it;
+k.getWCAGContrast = Yt;
+k.floor = Jt;
+k.normalizeHue = Qt;
+k.normalizeAlpha = er;
+k.convertColor = rr;
+const c = re, Zt = xe;
+function Wt(e, o) {
   switch (e[0]) {
     case "hex":
       return o ? "#000000FF" : "#000000";
@@ -100,168 +101,93 @@ function Gt(e, o) {
   }
   return process.env.NODE_ENV !== "production" && (0, Zt.warn)("color-picker", "props.modes is invalid."), "#000000";
 }
-function lt(e) {
+function it(e) {
   return e === null ? null : /^ *#/.test(e) ? "hex" : e.includes("rgb") ? "rgb" : e.includes("hsl") ? "hsl" : e.includes("hsv") ? "hsv" : null;
 }
-function Yt(e) {
-  return e.map((o) => Math.floor(o));
+function Yt(e, o = [255, 255, 255], r = "AA") {
+  const [n, a, t, i] = (0, c.rgba)((0, c.toHslaString)(e));
+  if (i === 1) {
+    const I = fe([n, a, t]), Z = fe(o);
+    return (Math.max(I, Z) + 0.05) / (Math.min(I, Z) + 0.05) >= (r === "AA" ? 4.5 : 7);
+  }
+  const s = Math.round(n * i + o[0] * (1 - i)), f = Math.round(a * i + o[1] * (1 - i)), x = Math.round(t * i + o[2] * (1 - i)), H = fe([s, f, x]), $ = fe(o);
+  return (Math.max(H, $) + 0.05) / (Math.min(H, $) + 0.05) >= (r === "AA" ? 4.5 : 7);
+}
+function fe(e) {
+  const [o, r, n] = e.map((a) => (a /= 255, a <= 0.03928 ? a / 12.92 : Math.pow((a + 0.055) / 1.055, 2.4)));
+  return 0.2126 * o + 0.7152 * r + 0.0722 * n;
 }
 function Jt(e) {
-  return e = Math.round(e), e >= 360 ? 359 : e < 0 ? 0 : e;
+  return e.map((o) => Math.floor(o));
 }
 function Qt(e) {
+  return e = Math.round(e), e >= 360 ? 359 : e < 0 ? 0 : e;
+}
+function er(e) {
   return e = Math.round(e * 100) / 100, e > 1 ? 1 : e < 0 ? 0 : e;
 }
-const Wt = {
+const tr = {
   rgb: {
     hex(e) {
-      return (0, d.toHexaString)((0, d.rgba)(e));
+      return (0, c.toHexaString)((0, c.rgba)(e));
     },
     hsl(e) {
-      const [o, r, t, a] = (0, d.rgba)(e);
-      return (0, d.toHslaString)([...(0, d.rgb2hsl)(o, r, t), a]);
+      const [o, r, n, a] = (0, c.rgba)(e);
+      return (0, c.toHslaString)([...(0, c.rgb2hsl)(o, r, n), a]);
     },
     hsv(e) {
-      const [o, r, t, a] = (0, d.rgba)(e);
-      return (0, d.toHsvaString)([...(0, d.rgb2hsv)(o, r, t), a]);
+      const [o, r, n, a] = (0, c.rgba)(e);
+      return (0, c.toHsvaString)([...(0, c.rgb2hsv)(o, r, n), a]);
     }
   },
   hex: {
     rgb(e) {
-      return (0, d.toRgbaString)((0, d.rgba)(e));
+      return (0, c.toRgbaString)((0, c.rgba)(e));
     },
     hsl(e) {
-      const [o, r, t, a] = (0, d.rgba)(e);
-      return (0, d.toHslaString)([...(0, d.rgb2hsl)(o, r, t), a]);
+      const [o, r, n, a] = (0, c.rgba)(e);
+      return (0, c.toHslaString)([...(0, c.rgb2hsl)(o, r, n), a]);
     },
     hsv(e) {
-      const [o, r, t, a] = (0, d.rgba)(e);
-      return (0, d.toHsvaString)([...(0, d.rgb2hsv)(o, r, t), a]);
+      const [o, r, n, a] = (0, c.rgba)(e);
+      return (0, c.toHsvaString)([...(0, c.rgb2hsv)(o, r, n), a]);
     }
   },
   hsl: {
     hex(e) {
-      const [o, r, t, a] = (0, d.hsla)(e);
-      return (0, d.toHexaString)([...(0, d.hsl2rgb)(o, r, t), a]);
+      const [o, r, n, a] = (0, c.hsla)(e);
+      return (0, c.toHexaString)([...(0, c.hsl2rgb)(o, r, n), a]);
     },
     rgb(e) {
-      const [o, r, t, a] = (0, d.hsla)(e);
-      return (0, d.toRgbaString)([...(0, d.hsl2rgb)(o, r, t), a]);
+      const [o, r, n, a] = (0, c.hsla)(e);
+      return (0, c.toRgbaString)([...(0, c.hsl2rgb)(o, r, n), a]);
     },
     hsv(e) {
-      const [o, r, t, a] = (0, d.hsla)(e);
-      return (0, d.toHsvaString)([...(0, d.hsl2hsv)(o, r, t), a]);
+      const [o, r, n, a] = (0, c.hsla)(e);
+      return (0, c.toHsvaString)([...(0, c.hsl2hsv)(o, r, n), a]);
     }
   },
   hsv: {
     hex(e) {
-      const [o, r, t, a] = (0, d.hsva)(e);
-      return (0, d.toHexaString)([...(0, d.hsv2rgb)(o, r, t), a]);
+      const [o, r, n, a] = (0, c.hsva)(e);
+      return (0, c.toHexaString)([...(0, c.hsv2rgb)(o, r, n), a]);
     },
     rgb(e) {
-      const [o, r, t, a] = (0, d.hsva)(e);
-      return (0, d.toRgbaString)([...(0, d.hsv2rgb)(o, r, t), a]);
+      const [o, r, n, a] = (0, c.hsva)(e);
+      return (0, c.toRgbaString)([...(0, c.hsv2rgb)(o, r, n), a]);
     },
     hsl(e) {
-      const [o, r, t, a] = (0, d.hsva)(e);
-      return (0, d.toHslaString)([...(0, d.hsv2hsl)(o, r, t), a]);
+      const [o, r, n, a] = (0, c.hsva)(e);
+      return (0, c.toHslaString)([...(0, c.hsv2hsl)(o, r, n), a]);
     }
   }
 };
-function er(e, o, r) {
-  return r = r || lt(e), r ? r === o ? e : Wt[r][o](e) : null;
+function rr(e, o, r) {
+  return r = r || it(e), r ? r === o ? e : tr[r][o](e) : null;
 }
 Object.defineProperty(He, "__esModule", { value: !0 });
-const q = D, fe = De, tr = $, W = "12px", rr = 12, N = "6px", or = 6, nr = "linear-gradient(90deg,red,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red)";
-He.default = (0, q.defineComponent)({
-  name: "HueSlider",
-  props: {
-    clsPrefix: {
-      type: String,
-      required: !0
-    },
-    hue: {
-      type: Number,
-      required: !0
-    },
-    onUpdateHue: {
-      type: Function,
-      required: !0
-    },
-    onComplete: Function
-  },
-  setup(e) {
-    const o = (0, q.ref)(null);
-    function r(l) {
-      o.value && ((0, fe.on)("mousemove", document, t), (0, fe.on)("mouseup", document, a), t(l));
-    }
-    function t(l) {
-      const { value: i } = o;
-      if (!i)
-        return;
-      const { width: s, left: f } = i.getBoundingClientRect(), _ = (0, tr.normalizeHue)((l.clientX - f - or) / (s - rr) * 360);
-      e.onUpdateHue(_);
-    }
-    function a() {
-      var l;
-      (0, fe.off)("mousemove", document, t), (0, fe.off)("mouseup", document, a), (l = e.onComplete) === null || l === void 0 || l.call(e);
-    }
-    return {
-      railRef: o,
-      handleMouseDown: r
-    };
-  },
-  render() {
-    const { clsPrefix: e } = this;
-    return (0, q.h)(
-      "div",
-      { class: `${e}-color-picker-slider`, style: {
-        height: W,
-        borderRadius: N
-      } },
-      (0, q.h)(
-        "div",
-        { ref: "railRef", style: {
-          boxShadow: "inset 0 0 2px 0 rgba(0, 0, 0, .24)",
-          boxSizing: "border-box",
-          backgroundImage: nr,
-          height: W,
-          borderRadius: N,
-          position: "relative"
-        }, onMousedown: this.handleMouseDown },
-        (0, q.h)(
-          "div",
-          { style: {
-            position: "absolute",
-            left: N,
-            right: N,
-            top: 0,
-            bottom: 0
-          } },
-          (0, q.h)(
-            "div",
-            { class: `${e}-color-picker-handle`, style: {
-              left: `calc((${this.hue}%) / 359 * 100 - ${N})`,
-              borderRadius: N,
-              width: W,
-              height: W
-            } },
-            (0, q.h)("div", { class: `${e}-color-picker-handle__fill`, style: {
-              backgroundColor: `hsl(${this.hue}, 100%, 50%)`,
-              borderRadius: N,
-              width: W,
-              height: W
-            } })
-          )
-        )
-      )
-    );
-  }
-});
-var ze = {};
-Object.defineProperty(ze, "__esModule", { value: !0 });
-const U = D, pe = De, lr = te, ar = $, ae = "12px", ir = 12, L = "6px";
-ze.default = (0, U.defineComponent)({
+const pe = De, or = re, U = V, nr = k, ae = "12px", lr = 12, L = "6px";
+He.default = (0, U.defineComponent)({
   name: "AlphaSlider",
   props: {
     clsPrefix: {
@@ -284,25 +210,25 @@ ze.default = (0, U.defineComponent)({
   },
   setup(e) {
     const o = (0, U.ref)(null);
-    function r(l) {
-      !o.value || !e.rgba || ((0, pe.on)("mousemove", document, t), (0, pe.on)("mouseup", document, a), t(l));
+    function r(t) {
+      !o.value || !e.rgba || ((0, pe.on)("mousemove", document, n), (0, pe.on)("mouseup", document, a), n(t));
     }
-    function t(l) {
+    function n(t) {
       const { value: i } = o;
       if (!i)
         return;
-      const { width: s, left: f } = i.getBoundingClientRect(), _ = (l.clientX - f) / (s - ir);
-      e.onUpdateAlpha((0, ar.normalizeAlpha)(_));
+      const { width: s, left: f } = i.getBoundingClientRect(), x = (t.clientX - f) / (s - lr);
+      e.onUpdateAlpha((0, nr.normalizeAlpha)(x));
     }
     function a() {
-      var l;
-      (0, pe.off)("mousemove", document, t), (0, pe.off)("mouseup", document, a), (l = e.onComplete) === null || l === void 0 || l.call(e);
+      var t;
+      (0, pe.off)("mousemove", document, n), (0, pe.off)("mouseup", document, a), (t = e.onComplete) === null || t === void 0 || t.call(e);
     }
     return {
       railRef: o,
       railBackgroundImage: (0, U.computed)(() => {
-        const { rgba: l } = e;
-        return l ? `linear-gradient(to right, rgba(${l[0]}, ${l[1]}, ${l[2]}, 0) 0%, rgba(${l[0]}, ${l[1]}, ${l[2]}, 1) 100%)` : "";
+        const { rgba: t } = e;
+        return t ? `linear-gradient(to right, rgba(${t[0]}, ${t[1]}, ${t[2]}, 0) 0%, rgba(${t[0]}, ${t[1]}, ${t[2]}, 1) 100%)` : "";
       }),
       handleMouseDown: r
     };
@@ -349,7 +275,7 @@ ze.default = (0, U.defineComponent)({
             height: ae
           } },
           (0, U.h)("div", { class: `${e}-color-picker-handle__fill`, style: {
-            backgroundColor: (0, lr.toRgbaString)(this.rgba),
+            backgroundColor: (0, or.toRgbaString)(this.rgba),
             borderRadius: L,
             width: ae,
             height: ae
@@ -359,117 +285,33 @@ ze.default = (0, U.defineComponent)({
     );
   }
 });
-var Ie = {};
+var ze = {}, Ie = {}, oe = {};
+Object.defineProperty(oe, "__esModule", { value: !0 });
+oe.colorPickerInjectionKey = void 0;
+const ar = xe;
+oe.colorPickerInjectionKey = (0, ar.createInjectionKey)("n-color-picker");
 Object.defineProperty(Ie, "__esModule", { value: !0 });
-const ge = De, B = D, ve = "12px", be = "6px";
-Ie.default = (0, B.defineComponent)({
-  name: "Pallete",
-  props: {
-    clsPrefix: {
-      type: String,
-      required: !0
-    },
-    rgba: {
-      type: Array,
-      default: null
-    },
-    // 0 - 360
-    displayedHue: {
-      type: Number,
-      required: !0
-    },
-    displayedSv: {
-      type: Array,
-      required: !0
-    },
-    onUpdateSV: {
-      type: Function,
-      required: !0
-    },
-    onComplete: Function
-  },
-  setup(e) {
-    const o = (0, B.ref)(null);
-    function r(l) {
-      o.value && ((0, ge.on)("mousemove", document, t), (0, ge.on)("mouseup", document, a), t(l));
-    }
-    function t(l) {
-      const { value: i } = o;
-      if (!i)
-        return;
-      const { width: s, height: f, left: _, bottom: V } = i.getBoundingClientRect(), j = (V - l.clientY) / f, F = (l.clientX - _) / s, oe = 100 * (F > 1 ? 1 : F < 0 ? 0 : F), xe = 100 * (j > 1 ? 1 : j < 0 ? 0 : j);
-      e.onUpdateSV(oe, xe);
-    }
-    function a() {
-      var l;
-      (0, ge.off)("mousemove", document, t), (0, ge.off)("mouseup", document, a), (l = e.onComplete) === null || l === void 0 || l.call(e);
-    }
-    return {
-      palleteRef: o,
-      handleColor: (0, B.computed)(() => {
-        const { rgba: l } = e;
-        return l ? `rgb(${l[0]}, ${l[1]}, ${l[2]})` : "";
-      }),
-      handleMouseDown: r
-    };
-  },
-  render() {
-    const { clsPrefix: e } = this;
-    return (0, B.h)(
-      "div",
-      { class: `${e}-color-picker-pallete`, onMousedown: this.handleMouseDown, ref: "palleteRef" },
-      (0, B.h)("div", { class: `${e}-color-picker-pallete__layer`, style: {
-        backgroundImage: `linear-gradient(90deg, white, hsl(${this.displayedHue}, 100%, 50%))`
-      } }),
-      (0, B.h)("div", { class: `${e}-color-picker-pallete__layer ${e}-color-picker-pallete__layer--shadowed`, style: {
-        backgroundImage: "linear-gradient(180deg, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 100%))"
-      } }),
-      this.rgba && (0, B.h)(
-        "div",
-        { class: `${e}-color-picker-handle`, style: {
-          width: ve,
-          height: ve,
-          borderRadius: be,
-          left: `calc(${this.displayedSv[0]}% - ${be})`,
-          bottom: `calc(${this.displayedSv[1]}% - ${be})`
-        } },
-        (0, B.h)("div", { class: `${e}-color-picker-handle__fill`, style: {
-          backgroundColor: this.handleColor,
-          borderRadius: be,
-          width: ve,
-          height: ve
-        } })
-      )
-    );
-  }
-});
-var Be = {}, Oe = {}, re = {};
-Object.defineProperty(re, "__esModule", { value: !0 });
-re.colorPickerInjectionKey = void 0;
-const sr = _e;
-re.colorPickerInjectionKey = (0, sr.createInjectionKey)("n-color-picker");
-Object.defineProperty(Oe, "__esModule", { value: !0 });
-const ie = D, ur = et, cr = re;
-function dr(e) {
+const ie = V, ir = rt, sr = oe;
+function ur(e) {
   return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 255)) : !1;
 }
-function hr(e) {
+function cr(e) {
   return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 360)) : !1;
 }
-function fr(e) {
+function dr(e) {
   return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 100)) : !1;
 }
-function pr(e) {
+function hr(e) {
   const o = e.trim();
   return /^#[0-9a-fA-F]+$/.test(o) ? [4, 5, 7, 9].includes(o.length) : !1;
 }
-function gr(e) {
+function fr(e) {
   return /^\d{1,3}\.?\d*%$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e) / 100, 100)) : !1;
 }
-const vr = {
+const pr = {
   paddingSmall: "0 4px"
 };
-Oe.default = (0, ie.defineComponent)({
+Ie.default = (0, ie.defineComponent)({
   name: "ColorInputUnit",
   props: {
     label: {
@@ -487,11 +329,11 @@ Oe.default = (0, ie.defineComponent)({
     }
   },
   setup(e) {
-    const o = (0, ie.ref)(""), { themeRef: r } = (0, ie.inject)(cr.colorPickerInjectionKey, null);
+    const o = (0, ie.ref)(""), { themeRef: r } = (0, ie.inject)(sr.colorPickerInjectionKey, null);
     (0, ie.watchEffect)(() => {
-      o.value = t();
+      o.value = n();
     });
-    function t() {
+    function n() {
       const { value: i } = e;
       if (i === null)
         return "";
@@ -501,45 +343,45 @@ Oe.default = (0, ie.defineComponent)({
     function a(i) {
       o.value = i;
     }
-    function l(i) {
+    function t(i) {
       let s, f;
       switch (e.label) {
         case "HEX":
-          f = pr(i), f && e.onUpdateValue(i), o.value = t();
+          f = hr(i), f && e.onUpdateValue(i), o.value = n();
           break;
         case "H":
-          s = hr(i), s === !1 ? o.value = t() : e.onUpdateValue(s);
+          s = cr(i), s === !1 ? o.value = n() : e.onUpdateValue(s);
           break;
         case "S":
         case "L":
         case "V":
-          s = fr(i), s === !1 ? o.value = t() : e.onUpdateValue(s);
+          s = dr(i), s === !1 ? o.value = n() : e.onUpdateValue(s);
           break;
         case "A":
-          s = gr(i), s === !1 ? o.value = t() : e.onUpdateValue(s);
+          s = fr(i), s === !1 ? o.value = n() : e.onUpdateValue(s);
           break;
         case "R":
         case "G":
         case "B":
-          s = dr(i), s === !1 ? o.value = t() : e.onUpdateValue(s);
+          s = ur(i), s === !1 ? o.value = n() : e.onUpdateValue(s);
           break;
       }
     }
     return {
       mergedTheme: r,
       inputValue: o,
-      handleInputChange: l,
+      handleInputChange: t,
       handleInputUpdateValue: a
     };
   },
   render() {
     const { mergedTheme: e } = this;
-    return (0, ie.h)(ur.NInput, {
+    return (0, ie.h)(ir.NInput, {
       size: "small",
       placeholder: this.label,
       theme: e.peers.Input,
       themeOverrides: e.peerOverrides.Input,
-      builtinThemeOverrides: vr,
+      builtinThemeOverrides: pr,
       value: this.inputValue,
       onUpdateValue: this.handleInputUpdateValue,
       onChange: this.handleInputChange,
@@ -548,12 +390,12 @@ Oe.default = (0, ie.defineComponent)({
     });
   }
 });
-var br = O && O.__importDefault || function(e) {
+var gr = E && E.__importDefault || function(e) {
   return e && e.__esModule ? e : { default: e };
 };
-Object.defineProperty(Be, "__esModule", { value: !0 });
-const R = te, ee = D, mr = et, Ze = br(Oe);
-Be.default = (0, ee.defineComponent)({
+Object.defineProperty(ze, "__esModule", { value: !0 });
+const A = re, ee = V, vr = rt, We = gr(Ie);
+ze.default = (0, ee.defineComponent)({
   name: "ColorInput",
   props: {
     clsPrefix: {
@@ -593,21 +435,21 @@ Be.default = (0, ee.defineComponent)({
   setup(e) {
     return {
       handleUnitUpdateValue(o, r) {
-        const { showAlpha: t } = e;
+        const { showAlpha: n } = e;
         if (e.mode === "hex") {
-          e.onUpdateValue((t ? R.toHexaString : R.toHexString)(r));
+          e.onUpdateValue((n ? A.toHexaString : A.toHexString)(r));
           return;
         }
         let a;
         switch (e.valueArr === null ? a = [0, 0, 0, 0] : a = Array.from(e.valueArr), e.mode) {
           case "hsv":
-            a[o] = r, e.onUpdateValue((t ? R.toHsvaString : R.toHsvString)(a));
+            a[o] = r, e.onUpdateValue((n ? A.toHsvaString : A.toHsvString)(a));
             break;
           case "rgb":
-            a[o] = r, e.onUpdateValue((t ? R.toRgbaString : R.toRgbString)(a));
+            a[o] = r, e.onUpdateValue((n ? A.toRgbaString : A.toRgbString)(a));
             break;
           case "hsl":
-            a[o] = r, e.onUpdateValue((t ? R.toHslaString : R.toHslString)(a));
+            a[o] = r, e.onUpdateValue((n ? A.toHslaString : A.toHslString)(a));
             break;
         }
       }
@@ -621,20 +463,20 @@ Be.default = (0, ee.defineComponent)({
       (0, ee.h)("div", { class: `${e}-color-picker-input__mode`, onClick: this.onUpdateMode, style: {
         cursor: o.length === 1 ? "" : "pointer"
       } }, this.mode.toUpperCase() + (this.showAlpha ? "A" : "")),
-      (0, ee.h)(mr.NInputGroup, null, {
+      (0, ee.h)(vr.NInputGroup, null, {
         default: () => {
-          const { mode: r, valueArr: t, showAlpha: a } = this;
+          const { mode: r, valueArr: n, showAlpha: a } = this;
           if (r === "hex") {
-            let l = null;
+            let t = null;
             try {
-              l = t === null ? null : (a ? R.toHexaString : R.toHexString)(t);
+              t = n === null ? null : (a ? A.toHexaString : A.toHexString)(n);
             } catch {
             }
-            return (0, ee.h)(Ze.default, { label: "HEX", showAlpha: a, value: l, onUpdateValue: (i) => {
+            return (0, ee.h)(We.default, { label: "HEX", showAlpha: a, value: t, onUpdateValue: (i) => {
               this.handleUnitUpdateValue(0, i);
             } });
           }
-          return (r + (a ? "a" : "")).split("").map((l, i) => (0, ee.h)(Ze.default, { label: l.toUpperCase(), value: t === null ? null : t[i], onUpdateValue: (s) => {
+          return (r + (a ? "a" : "")).split("").map((t, i) => (0, ee.h)(We.default, { label: t.toUpperCase(), value: n === null ? null : n[i], onUpdateValue: (s) => {
             this.handleUnitUpdateValue(i, s);
           } }));
         }
@@ -642,72 +484,21 @@ Be.default = (0, ee.defineComponent)({
     );
   }
 });
-var je = {};
-Object.defineProperty(je, "__esModule", { value: !0 });
-const _r = te, K = D, xr = re;
-je.default = (0, K.defineComponent)({
-  name: "ColorPickerTrigger",
-  props: {
-    clsPrefix: {
-      type: String,
-      required: !0
-    },
-    value: {
-      type: String,
-      default: null
-    },
-    hsla: {
-      type: Array,
-      default: null
-    },
-    disabled: Boolean,
-    onClick: Function
-  },
-  setup(e) {
-    const { colorPickerSlots: o, renderLabelRef: r } = (0, K.inject)(xr.colorPickerInjectionKey, null);
-    return () => {
-      const { hsla: t, value: a, clsPrefix: l, onClick: i, disabled: s } = e, f = o.label || r.value;
-      return (0, K.h)(
-        "div",
-        { class: [
-          `${l}-color-picker-trigger`,
-          s && `${l}-color-picker-trigger--disabled`
-        ], onClick: s ? void 0 : i },
-        (0, K.h)(
-          "div",
-          { class: `${l}-color-picker-trigger__fill` },
-          (0, K.h)("div", { class: `${l}-color-picker-checkboard` }),
-          (0, K.h)("div", { style: {
-            position: "absolute",
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0,
-            backgroundColor: t ? (0, _r.toHslaString)(t) : ""
-          } }),
-          a && t ? (0, K.h)("div", { class: `${l}-color-picker-trigger__value`, style: {
-            color: t[2] > 50 || t[3] < 0.5 ? "black" : "white"
-          } }, f ? f(a) : a) : null
-        )
-      );
-    };
-  }
-});
-var Fe = {};
-Object.defineProperty(Fe, "__esModule", { value: !0 });
-const se = D, Ae = te, kr = _e, Ge = $;
-function yr(e, o) {
+var Be = {};
+Object.defineProperty(Be, "__esModule", { value: !0 });
+const Re = re, se = V, br = xe, Ye = k;
+function mr(e, o) {
   if (o === "hsv") {
-    const [r, t, a, l] = (0, Ae.hsva)(e);
-    return (0, Ae.toRgbaString)([...(0, Ae.hsv2rgb)(r, t, a), l]);
+    const [r, n, a, t] = (0, Re.hsva)(e);
+    return (0, Re.toRgbaString)([...(0, Re.hsv2rgb)(r, n, a), t]);
   }
   return e;
 }
-function Sr(e) {
+function _r(e) {
   const o = document.createElement("canvas").getContext("2d");
   return o ? (o.fillStyle = e, o.fillStyle) : "#000000";
 }
-Fe.default = (0, se.defineComponent)({
+Be.default = (0, se.defineComponent)({
   name: "ColorPickerSwatches",
   props: {
     clsPrefix: {
@@ -728,28 +519,28 @@ Fe.default = (0, se.defineComponent)({
     }
   },
   setup(e) {
-    const o = (0, se.computed)(() => e.swatches.map((l) => {
-      const i = (0, Ge.getModeFromValue)(l);
+    const o = (0, se.computed)(() => e.swatches.map((t) => {
+      const i = (0, Ye.getModeFromValue)(t);
       return {
-        value: l,
+        value: t,
         mode: i,
-        legalValue: yr(l, i)
+        legalValue: mr(t, i)
       };
     }));
-    function r(l) {
+    function r(t) {
       const { mode: i } = e;
-      let { value: s, mode: f } = l;
-      return f || (f = "hex", /^[a-zA-Z]+$/.test(s) ? s = Sr(s) : ((0, kr.warn)("color-picker", `color ${s} in swatches is invalid.`), s = "#000000")), f === i ? s : (0, Ge.convertColor)(s, i, f);
+      let { value: s, mode: f } = t;
+      return f || (f = "hex", /^[a-zA-Z]+$/.test(s) ? s = _r(s) : ((0, br.warn)("color-picker", `color ${s} in swatches is invalid.`), s = "#000000")), f === i ? s : (0, Ye.convertColor)(s, i, f);
     }
-    function t(l) {
-      e.onUpdateColor(r(l));
+    function n(t) {
+      e.onUpdateColor(r(t));
     }
-    function a(l, i) {
-      l.key === "Enter" && t(i);
+    function a(t, i) {
+      t.key === "Enter" && n(i);
     }
     return {
       parsedSwatchesRef: o,
-      handleSwatchSelect: t,
+      handleSwatchSelect: n,
       handleSwatchKeyDown: a
     };
   },
@@ -766,10 +557,62 @@ Fe.default = (0, se.defineComponent)({
     )));
   }
 });
-var Ee = {};
-Object.defineProperty(Ee, "__esModule", { value: !0 });
-const me = D, Ye = $;
-Ee.default = (0, me.defineComponent)({
+var Oe = {};
+Object.defineProperty(Oe, "__esModule", { value: !0 });
+const xr = re, K = V, kr = oe, yr = k;
+Oe.default = (0, K.defineComponent)({
+  name: "ColorPickerTrigger",
+  slots: Object,
+  props: {
+    clsPrefix: {
+      type: String,
+      required: !0
+    },
+    value: {
+      type: String,
+      default: null
+    },
+    hsla: {
+      type: Array,
+      default: null
+    },
+    disabled: Boolean,
+    onClick: Function
+  },
+  setup(e) {
+    const { colorPickerSlots: o, renderLabelRef: r } = (0, K.inject)(kr.colorPickerInjectionKey, null);
+    return () => {
+      const { hsla: n, value: a, clsPrefix: t, onClick: i, disabled: s } = e, f = o.label || r.value;
+      return (0, K.h)(
+        "div",
+        { class: [
+          `${t}-color-picker-trigger`,
+          s && `${t}-color-picker-trigger--disabled`
+        ], onClick: s ? void 0 : i },
+        (0, K.h)(
+          "div",
+          { class: `${t}-color-picker-trigger__fill` },
+          (0, K.h)("div", { class: `${t}-color-picker-checkboard` }),
+          (0, K.h)("div", { style: {
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            backgroundColor: n ? (0, xr.toHslaString)(n) : ""
+          } }),
+          a && n ? (0, K.h)("div", { class: `${t}-color-picker-trigger__value`, style: {
+            color: (0, yr.getWCAGContrast)(n) ? "white" : "black"
+          } }, f ? f(a) : a) : null
+        )
+      );
+    };
+  }
+});
+var je = {};
+Object.defineProperty(je, "__esModule", { value: !0 });
+const ge = V, Je = k;
+je.default = (0, ge.defineComponent)({
   name: "ColorPreview",
   props: {
     clsPrefix: {
@@ -784,7 +627,7 @@ Ee.default = (0, me.defineComponent)({
       type: String,
       default: null,
       validator: (e) => {
-        const o = (0, Ye.getModeFromValue)(e);
+        const o = (0, Je.getModeFromValue)(e);
         return !!(!e || o && o !== "hsv");
       }
     },
@@ -795,9 +638,9 @@ Ee.default = (0, me.defineComponent)({
   },
   setup(e) {
     function o(r) {
-      var t;
+      var n;
       const a = r.target.value;
-      (t = e.onUpdateColor) === null || t === void 0 || t.call(e, (0, Ye.convertColor)(a.toUpperCase(), e.mode, "hex")), r.stopPropagation();
+      (n = e.onUpdateColor) === null || n === void 0 || n.call(e, (0, Je.convertColor)(a.toUpperCase(), e.mode, "hex")), r.stopPropagation();
     }
     return {
       handleChange: o
@@ -805,13 +648,185 @@ Ee.default = (0, me.defineComponent)({
   },
   render() {
     const { clsPrefix: e } = this;
-    return (0, me.h)(
+    return (0, ge.h)(
       "div",
       { class: `${e}-color-picker-preview__preview` },
-      (0, me.h)("span", { class: `${e}-color-picker-preview__fill`, style: {
+      (0, ge.h)("span", { class: `${e}-color-picker-preview__fill`, style: {
         background: this.color || "#000000"
       } }),
-      (0, me.h)("input", { class: `${e}-color-picker-preview__input`, type: "color", value: this.color, onChange: this.handleChange })
+      (0, ge.h)("input", { class: `${e}-color-picker-preview__input`, type: "color", value: this.color, onChange: this.handleChange })
+    );
+  }
+});
+var Fe = {};
+Object.defineProperty(Fe, "__esModule", { value: !0 });
+const ve = De, G = V, Sr = k, te = "12px", wr = 12, X = "6px", Cr = 6, Pr = "linear-gradient(90deg,red,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red)";
+Fe.default = (0, G.defineComponent)({
+  name: "HueSlider",
+  props: {
+    clsPrefix: {
+      type: String,
+      required: !0
+    },
+    hue: {
+      type: Number,
+      required: !0
+    },
+    onUpdateHue: {
+      type: Function,
+      required: !0
+    },
+    onComplete: Function
+  },
+  setup(e) {
+    const o = (0, G.ref)(null);
+    function r(t) {
+      o.value && ((0, ve.on)("mousemove", document, n), (0, ve.on)("mouseup", document, a), n(t));
+    }
+    function n(t) {
+      const { value: i } = o;
+      if (!i)
+        return;
+      const { width: s, left: f } = i.getBoundingClientRect(), x = (0, Sr.normalizeHue)((t.clientX - f - Cr) / (s - wr) * 360);
+      e.onUpdateHue(x);
+    }
+    function a() {
+      var t;
+      (0, ve.off)("mousemove", document, n), (0, ve.off)("mouseup", document, a), (t = e.onComplete) === null || t === void 0 || t.call(e);
+    }
+    return {
+      railRef: o,
+      handleMouseDown: r
+    };
+  },
+  render() {
+    const { clsPrefix: e } = this;
+    return (0, G.h)(
+      "div",
+      { class: `${e}-color-picker-slider`, style: {
+        height: te,
+        borderRadius: X
+      } },
+      (0, G.h)(
+        "div",
+        { ref: "railRef", style: {
+          boxShadow: "inset 0 0 2px 0 rgba(0, 0, 0, .24)",
+          boxSizing: "border-box",
+          backgroundImage: Pr,
+          height: te,
+          borderRadius: X,
+          position: "relative"
+        }, onMousedown: this.handleMouseDown },
+        (0, G.h)(
+          "div",
+          { style: {
+            position: "absolute",
+            left: X,
+            right: X,
+            top: 0,
+            bottom: 0
+          } },
+          (0, G.h)(
+            "div",
+            { class: `${e}-color-picker-handle`, style: {
+              left: `calc((${this.hue}%) / 359 * 100 - ${X})`,
+              borderRadius: X,
+              width: te,
+              height: te
+            } },
+            (0, G.h)("div", { class: `${e}-color-picker-handle__fill`, style: {
+              backgroundColor: `hsl(${this.hue}, 100%, 50%)`,
+              borderRadius: X,
+              width: te,
+              height: te
+            } })
+          )
+        )
+      )
+    );
+  }
+});
+var Ee = {};
+Object.defineProperty(Ee, "__esModule", { value: !0 });
+const be = De, F = V, me = "12px", _e = "6px";
+Ee.default = (0, F.defineComponent)({
+  name: "Pallete",
+  props: {
+    clsPrefix: {
+      type: String,
+      required: !0
+    },
+    rgba: {
+      type: Array,
+      default: null
+    },
+    // 0 - 360
+    displayedHue: {
+      type: Number,
+      required: !0
+    },
+    displayedSv: {
+      type: Array,
+      required: !0
+    },
+    onUpdateSV: {
+      type: Function,
+      required: !0
+    },
+    onComplete: Function
+  },
+  setup(e) {
+    const o = (0, F.ref)(null);
+    function r(t) {
+      o.value && ((0, be.on)("mousemove", document, n), (0, be.on)("mouseup", document, a), n(t));
+    }
+    function n(t) {
+      const { value: i } = o;
+      if (!i)
+        return;
+      const { width: s, height: f, left: x, bottom: H } = i.getBoundingClientRect(), $ = (H - t.clientY) / f, z = (t.clientX - x) / s, I = 100 * (z > 1 ? 1 : z < 0 ? 0 : z), Z = 100 * ($ > 1 ? 1 : $ < 0 ? 0 : $);
+      e.onUpdateSV(I, Z);
+    }
+    function a() {
+      var t;
+      (0, be.off)("mousemove", document, n), (0, be.off)("mouseup", document, a), (t = e.onComplete) === null || t === void 0 || t.call(e);
+    }
+    return {
+      palleteRef: o,
+      handleColor: (0, F.computed)(() => {
+        const { rgba: t } = e;
+        return t ? `rgb(${t[0]}, ${t[1]}, ${t[2]})` : "";
+      }),
+      handleMouseDown: r
+    };
+  },
+  render() {
+    const { clsPrefix: e } = this;
+    return (0, F.h)(
+      "div",
+      { class: `${e}-color-picker-pallete`, onMousedown: this.handleMouseDown, ref: "palleteRef" },
+      (0, F.h)("div", { class: `${e}-color-picker-pallete__layer`, style: {
+        backgroundImage: `linear-gradient(90deg, white, hsl(${this.displayedHue}, 100%, 50%))`
+      } }),
+      (0, F.h)("div", { class: `${e}-color-picker-pallete__layer ${e}-color-picker-pallete__layer--shadowed`, style: {
+        backgroundImage: "linear-gradient(180deg, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 100%))"
+      } }),
+      this.rgba && (0, F.h)(
+        "div",
+        { class: `${e}-color-picker-handle`, style: {
+          width: me,
+          height: me,
+          borderRadius: _e,
+          left: `calc(${this.displayedSv[0]}% - ${_e})`,
+          bottom: `calc(${this.displayedSv[1]}% - ${_e})`
+        } },
+        (0, F.h)("div", { class: `${e}-color-picker-handle__fill`, style: {
+          backgroundColor: this.handleColor,
+          borderRadius: _e,
+          width: me,
+          height: me
+        } })
+      )
     );
   }
 });
@@ -819,7 +834,7 @@ var Te = {};
 Object.defineProperty(Te, "__esModule", {
   value: !0
 });
-const u = Mt, wr = It;
+const $r = Bt, u = Rt;
 Te.default = (0, u.c)([(0, u.cB)("color-picker", `
  display: inline-block;
  box-sizing: border-box;
@@ -839,7 +854,7 @@ Te.default = (0, u.c)([(0, u.cB)("color-picker", `
  background-color .3s var(--n-bezier);
  border-radius: var(--n-border-radius);
  box-shadow: var(--n-box-shadow);
- `, [(0, wr.fadeInScaleUpTransition)(), (0, u.cB)("input", `
+ `, [(0, $r.fadeInScaleUpTransition)(), (0, u.cB)("input", `
  text-align: center;
  `)]), (0, u.cB)("color-picker-checkboard", `
  background: white; 
@@ -1002,12 +1017,12 @@ Te.default = (0, u.c)([(0, u.cB)("color-picker", `
  content: "";
  `)])])])])]);
 (function(e) {
-  var o = O && O.__importDefault || function(c) {
-    return c && c.__esModule ? c : { default: c };
+  var o = E && E.__importDefault || function(d) {
+    return d && d.__esModule ? d : { default: d };
   };
   Object.defineProperty(e, "__esModule", { value: !0 }), e.colorPickerProps = void 0;
-  const r = D, t = te, a = At, l = Dt, i = Ht, s = ot, f = Vt, _ = _e, V = zt, j = o(He), F = o(ze), oe = o(Ie), xe = o(Be), at = o(je), ke = $, it = o(Fe), st = o(Ee), ut = re, ct = o(Te);
-  e.colorPickerProps = Object.assign(Object.assign({}, f.useTheme.props), { value: String, show: {
+  const r = re, n = zt, a = Ht, t = V, i = Vt, s = Dt, f = xe, x = It, H = lt, $ = o(He), z = o(ze), I = o(Be), Z = o(Oe), qe = o(je), st = oe, ut = o(Fe), ct = o(Ee), dt = o(Te), ke = k;
+  e.colorPickerProps = Object.assign(Object.assign({}, s.useTheme.props), { value: String, show: {
     type: Boolean,
     default: void 0
   }, defaultShow: Boolean, defaultValue: String, modes: {
@@ -1017,7 +1032,7 @@ Te.default = (0, u.c)([(0, u.cB)("color-picker", `
   }, placement: {
     type: String,
     default: "bottom-start"
-  }, to: _.useAdjustedTo.propTo, showAlpha: {
+  }, to: f.useAdjustedTo.propTo, showAlpha: {
     type: Boolean,
     default: !0
   }, showPreview: Boolean, swatches: Array, disabled: {
@@ -1026,203 +1041,204 @@ Te.default = (0, u.c)([(0, u.cB)("color-picker", `
   }, actions: {
     type: Array,
     default: null
-  }, internalActions: Array, size: String, renderLabel: Function, onComplete: Function, onConfirm: Function, onClear: Function, "onUpdate:show": [Function, Array], onUpdateShow: [Function, Array], "onUpdate:value": [Function, Array], onUpdateValue: [Function, Array] }), e.default = (0, r.defineComponent)({
+  }, internalActions: Array, size: String, renderLabel: Function, onComplete: Function, onConfirm: Function, onClear: Function, "onUpdate:show": [Function, Array], onUpdateShow: [Function, Array], "onUpdate:value": [Function, Array], onUpdateValue: [Function, Array] }), e.default = (0, t.defineComponent)({
     name: "ColorPicker",
     props: e.colorPickerProps,
-    setup(c, { slots: X }) {
-      const Z = (0, r.ref)(null);
+    slots: Object,
+    setup(d, { slots: T }) {
+      const Ne = (0, t.ref)(null);
       let ne = null;
-      const ye = (0, f.useFormItem)(c), { mergedSizeRef: qe, mergedDisabledRef: dt } = ye, { localeRef: ce } = (0, f.useLocale)("global"), { mergedClsPrefixRef: Se, namespaceRef: ht, inlineThemeDisabled: we } = (0, f.useConfig)(c), Ce = (0, f.useTheme)("ColorPicker", "-color-picker", ct.default, s.colorPickerLight, c, Se);
-      (0, r.provide)(ut.colorPickerInjectionKey, {
+      const ye = (0, s.useFormItem)(d), { mergedSizeRef: Le, mergedDisabledRef: ht } = ye, { localeRef: ce } = (0, s.useLocale)("global"), { mergedClsPrefixRef: Se, namespaceRef: ft, inlineThemeDisabled: we } = (0, s.useConfig)(d), Ce = (0, s.useTheme)("ColorPicker", "-color-picker", dt.default, H.colorPickerLight, d, Se);
+      (0, t.provide)(st.colorPickerInjectionKey, {
         themeRef: Ce,
-        renderLabelRef: (0, r.toRef)(c, "renderLabel"),
-        colorPickerSlots: X
+        renderLabelRef: (0, t.toRef)(d, "renderLabel"),
+        colorPickerSlots: T
       });
-      const Ne = (0, r.ref)(c.defaultShow), Le = (0, a.useMergedState)((0, r.toRef)(c, "show"), Ne);
-      function de(n) {
-        const { onUpdateShow: h, "onUpdate:show": g } = c;
-        h && (0, _.call)(h, n), g && (0, _.call)(g, n), Ne.value = n;
+      const Ke = (0, t.ref)(d.defaultShow), Ge = (0, a.useMergedState)((0, t.toRef)(d, "show"), Ke);
+      function de(l) {
+        const { onUpdateShow: h, "onUpdate:show": g } = d;
+        h && (0, f.call)(h, l), g && (0, f.call)(g, l), Ke.value = l;
       }
-      const { defaultValue: Ke } = c, Xe = (0, r.ref)(Ke === void 0 ? (0, ke.deriveDefaultValue)(c.modes, c.showAlpha) : Ke), k = (0, a.useMergedState)((0, r.toRef)(c, "value"), Xe), G = (0, r.ref)([k.value]), M = (0, r.ref)(0), $e = (0, r.computed)(() => (0, ke.getModeFromValue)(k.value)), { modes: ft } = c, P = (0, r.ref)((0, ke.getModeFromValue)(k.value) || ft[0] || "rgb");
-      function pt() {
-        const { modes: n } = c, { value: h } = P, g = n.findIndex((v) => v === h);
-        ~g ? P.value = n[(g + 1) % n.length] : P.value = "rgb";
+      const { defaultValue: Xe } = d, Ze = (0, t.ref)(Xe === void 0 ? (0, ke.deriveDefaultValue)(d.modes, d.showAlpha) : Xe), y = (0, a.useMergedState)((0, t.toRef)(d, "value"), Ze), W = (0, t.ref)([y.value]), R = (0, t.ref)(0), Pe = (0, t.computed)(() => (0, ke.getModeFromValue)(y.value)), { modes: pt } = d, M = (0, t.ref)((0, ke.getModeFromValue)(y.value) || pt[0] || "rgb");
+      function gt() {
+        const { modes: l } = d, { value: h } = M, g = l.findIndex((v) => v === h);
+        ~g ? M.value = l[(g + 1) % l.length] : M.value = "rgb";
       }
-      let S, w, Y, J, H, z, I, C;
-      const le = (0, r.computed)(() => {
-        const { value: n } = k;
-        if (!n)
+      let w, C, Y, J, B, O, j, P;
+      const le = (0, t.computed)(() => {
+        const { value: l } = y;
+        if (!l)
           return null;
-        switch ($e.value) {
+        switch (Pe.value) {
           case "hsv":
-            return (0, t.hsva)(n);
+            return (0, r.hsva)(l);
           case "hsl":
-            return [S, w, Y, C] = (0, t.hsla)(n), [...(0, t.hsl2hsv)(S, w, Y), C];
+            return [w, C, Y, P] = (0, r.hsla)(l), [...(0, r.hsl2hsv)(w, C, Y), P];
           case "rgb":
           case "hex":
-            return [H, z, I, C] = (0, t.rgba)(n), [...(0, t.rgb2hsv)(H, z, I), C];
+            return [B, O, j, P] = (0, r.rgba)(l), [...(0, r.rgb2hsv)(B, O, j), P];
         }
-      }), E = (0, r.computed)(() => {
-        const { value: n } = k;
-        if (!n)
+      }), q = (0, t.computed)(() => {
+        const { value: l } = y;
+        if (!l)
           return null;
-        switch ($e.value) {
+        switch (Pe.value) {
           case "rgb":
           case "hex":
-            return (0, t.rgba)(n);
+            return (0, r.rgba)(l);
           case "hsv":
-            return [S, w, J, C] = (0, t.hsva)(n), [...(0, t.hsv2rgb)(S, w, J), C];
+            return [w, C, J, P] = (0, r.hsva)(l), [...(0, r.hsv2rgb)(w, C, J), P];
           case "hsl":
-            return [S, w, Y, C] = (0, t.hsla)(n), [...(0, t.hsl2rgb)(S, w, Y), C];
+            return [w, C, Y, P] = (0, r.hsla)(l), [...(0, r.hsl2rgb)(w, C, Y), P];
         }
-      }), Pe = (0, r.computed)(() => {
-        const { value: n } = k;
-        if (!n)
+      }), $e = (0, t.computed)(() => {
+        const { value: l } = y;
+        if (!l)
           return null;
-        switch ($e.value) {
+        switch (Pe.value) {
           case "hsl":
-            return (0, t.hsla)(n);
+            return (0, r.hsla)(l);
           case "hsv":
-            return [S, w, J, C] = (0, t.hsva)(n), [...(0, t.hsv2hsl)(S, w, J), C];
+            return [w, C, J, P] = (0, r.hsva)(l), [...(0, r.hsv2hsl)(w, C, J), P];
           case "rgb":
           case "hex":
-            return [H, z, I, C] = (0, t.rgba)(n), [...(0, t.rgb2hsl)(H, z, I), C];
+            return [B, O, j, P] = (0, r.rgba)(l), [...(0, r.rgb2hsl)(B, O, j), P];
         }
-      }), gt = (0, r.computed)(() => {
-        switch (P.value) {
+      }), vt = (0, t.computed)(() => {
+        switch (M.value) {
           case "rgb":
           case "hex":
-            return E.value;
+            return q.value;
           case "hsv":
             return le.value;
           case "hsl":
-            return Pe.value;
+            return $e.value;
         }
-      }), he = (0, r.ref)(0), Ue = (0, r.ref)(1), Re = (0, r.ref)([0, 0]);
-      function vt(n, h) {
+      }), he = (0, t.ref)(0), Me = (0, t.ref)(1), Ue = (0, t.ref)([0, 0]);
+      function bt(l, h) {
         const { value: g } = le, v = he.value, b = g ? g[3] : 1;
-        Re.value = [n, h];
-        const { showAlpha: p } = c;
-        switch (P.value) {
+        Ue.value = [l, h];
+        const { showAlpha: p } = d;
+        switch (M.value) {
           case "hsv":
-            m((p ? t.toHsvaString : t.toHsvString)([v, n, h, b]), "cursor");
+            m((p ? r.toHsvaString : r.toHsvString)([v, l, h, b]), "cursor");
             break;
           case "hsl":
-            m((p ? t.toHslaString : t.toHslString)([
-              ...(0, t.hsv2hsl)(v, n, h),
+            m((p ? r.toHslaString : r.toHslString)([
+              ...(0, r.hsv2hsl)(v, l, h),
               b
             ]), "cursor");
             break;
           case "rgb":
-            m((p ? t.toRgbaString : t.toRgbString)([
-              ...(0, t.hsv2rgb)(v, n, h),
+            m((p ? r.toRgbaString : r.toRgbString)([
+              ...(0, r.hsv2rgb)(v, l, h),
               b
             ]), "cursor");
             break;
           case "hex":
-            m((p ? t.toHexaString : t.toHexString)([
-              ...(0, t.hsv2rgb)(v, n, h),
+            m((p ? r.toHexaString : r.toHexString)([
+              ...(0, r.hsv2rgb)(v, l, h),
               b
             ]), "cursor");
             break;
         }
       }
-      function bt(n) {
-        he.value = n;
+      function mt(l) {
+        he.value = l;
         const { value: h } = le;
         if (!h)
           return;
-        const [, g, v, b] = h, { showAlpha: p } = c;
-        switch (P.value) {
+        const [, g, v, b] = h, { showAlpha: p } = d;
+        switch (M.value) {
           case "hsv":
-            m((p ? t.toHsvaString : t.toHsvString)([n, g, v, b]), "cursor");
+            m((p ? r.toHsvaString : r.toHsvString)([l, g, v, b]), "cursor");
             break;
           case "rgb":
-            m((p ? t.toRgbaString : t.toRgbString)([
-              ...(0, t.hsv2rgb)(n, g, v),
+            m((p ? r.toRgbaString : r.toRgbString)([
+              ...(0, r.hsv2rgb)(l, g, v),
               b
             ]), "cursor");
             break;
           case "hex":
-            m((p ? t.toHexaString : t.toHexString)([
-              ...(0, t.hsv2rgb)(n, g, v),
+            m((p ? r.toHexaString : r.toHexString)([
+              ...(0, r.hsv2rgb)(l, g, v),
               b
             ]), "cursor");
             break;
           case "hsl":
-            m((p ? t.toHslaString : t.toHslString)([
-              ...(0, t.hsv2hsl)(n, g, v),
+            m((p ? r.toHslaString : r.toHslString)([
+              ...(0, r.hsv2hsl)(l, g, v),
               b
             ]), "cursor");
             break;
         }
       }
-      function mt(n) {
-        switch (P.value) {
+      function _t(l) {
+        switch (M.value) {
           case "hsv":
-            [S, w, J] = le.value, m((0, t.toHsvaString)([S, w, J, n]), "cursor");
+            [w, C, J] = le.value, m((0, r.toHsvaString)([w, C, J, l]), "cursor");
             break;
           case "rgb":
-            [H, z, I] = E.value, m((0, t.toRgbaString)([H, z, I, n]), "cursor");
+            [B, O, j] = q.value, m((0, r.toRgbaString)([B, O, j, l]), "cursor");
             break;
           case "hex":
-            [H, z, I] = E.value, m((0, t.toHexaString)([H, z, I, n]), "cursor");
+            [B, O, j] = q.value, m((0, r.toHexaString)([B, O, j, l]), "cursor");
             break;
           case "hsl":
-            [S, w, Y] = Pe.value, m((0, t.toHslaString)([S, w, Y, n]), "cursor");
+            [w, C, Y] = $e.value, m((0, r.toHslaString)([w, C, Y, l]), "cursor");
             break;
         }
-        Ue.value = n;
+        Me.value = l;
       }
-      function m(n, h) {
-        h === "cursor" ? ne = n : ne = null;
-        const { nTriggerFormChange: g, nTriggerFormInput: v } = ye, { onUpdateValue: b, "onUpdate:value": p } = c;
-        b && (0, _.call)(b, n), p && (0, _.call)(p, n), g(), v(), Xe.value = n;
+      function m(l, h) {
+        h === "cursor" ? ne = l : ne = null;
+        const { nTriggerFormChange: g, nTriggerFormInput: v } = ye, { onUpdateValue: b, "onUpdate:value": p } = d;
+        b && (0, f.call)(b, l), p && (0, f.call)(p, l), g(), v(), Ze.value = l;
       }
-      function _t(n) {
-        m(n, "input"), (0, r.nextTick)(Q);
+      function xt(l) {
+        m(l, "input"), (0, t.nextTick)(Q);
       }
-      function Q(n = !0) {
-        const { value: h } = k;
+      function Q(l = !0) {
+        const { value: h } = y;
         if (h) {
-          const { nTriggerFormChange: g, nTriggerFormInput: v } = ye, { onComplete: b } = c;
+          const { nTriggerFormChange: g, nTriggerFormInput: v } = ye, { onComplete: b } = d;
           b && b(h);
-          const { value: p } = G, { value: y } = M;
-          n && (p.splice(y + 1, p.length, h), M.value = y + 1), g(), v();
+          const { value: p } = W, { value: S } = R;
+          l && (p.splice(S + 1, p.length, h), R.value = S + 1), g(), v();
         }
       }
-      function xt() {
-        const { value: n } = M;
-        n - 1 < 0 || (m(G.value[n - 1], "input"), Q(!1), M.value = n - 1);
-      }
       function kt() {
-        const { value: n } = M;
-        n < 0 || n + 1 >= G.value.length || (m(G.value[n + 1], "input"), Q(!1), M.value = n + 1);
+        const { value: l } = R;
+        l - 1 < 0 || (m(W.value[l - 1], "input"), Q(!1), R.value = l - 1);
       }
       function yt() {
-        m(null, "input");
-        const { onClear: n } = c;
-        n && n(), de(!1);
+        const { value: l } = R;
+        l < 0 || l + 1 >= W.value.length || (m(W.value[l + 1], "input"), Q(!1), R.value = l + 1);
       }
       function St() {
-        const { value: n } = k, { onConfirm: h } = c;
-        h && h(n), de(!1);
+        m(null, "input");
+        const { onClear: l } = d;
+        l && l(), de(!1);
       }
-      const wt = (0, r.computed)(() => M.value >= 1), Ct = (0, r.computed)(() => {
-        const { value: n } = G;
-        return n.length > 1 && M.value < n.length - 1;
+      function wt() {
+        const { value: l } = y, { onConfirm: h } = d;
+        h && h(l), de(!1);
+      }
+      const Ct = (0, t.computed)(() => R.value >= 1), Pt = (0, t.computed)(() => {
+        const { value: l } = W;
+        return l.length > 1 && R.value < l.length - 1;
       });
-      (0, r.watch)(Le, (n) => {
-        n || (G.value = [k.value], M.value = 0);
-      }), (0, r.watchEffect)(() => {
-        if (!(ne && ne === k.value)) {
-          const { value: n } = le;
-          n && (he.value = n[0], Ue.value = n[3], Re.value = [n[1], n[2]]);
+      (0, t.watch)(Ge, (l) => {
+        l || (W.value = [y.value], R.value = 0);
+      }), (0, t.watchEffect)(() => {
+        if (!(ne && ne === y.value)) {
+          const { value: l } = le;
+          l && (he.value = l[0], Me.value = l[3], Ue.value = [l[1], l[2]]);
         }
         ne = null;
       });
-      const Me = (0, r.computed)(() => {
-        const { value: n } = qe, { common: { cubicBezierEaseInOut: h }, self: { textColor: g, color: v, panelFontSize: b, boxShadow: p, border: y, borderRadius: x, dividerColor: T, [(0, _.createKey)("height", n)]: Pt, [(0, _.createKey)("fontSize", n)]: Ut } } = Ce.value;
+      const Ae = (0, t.computed)(() => {
+        const { value: l } = Le, { common: { cubicBezierEaseInOut: h }, self: { textColor: g, color: v, panelFontSize: b, boxShadow: p, border: S, borderRadius: _, dividerColor: N, [(0, f.createKey)("height", l)]: Mt, [(0, f.createKey)("fontSize", l)]: Ut } } = Ce.value;
         return {
           "--n-bezier": h,
           "--n-text-color": g,
@@ -1230,100 +1246,98 @@ Te.default = (0, u.c)([(0, u.cB)("color-picker", `
           "--n-panel-font-size": b,
           "--n-font-size": Ut,
           "--n-box-shadow": p,
-          "--n-border": y,
-          "--n-border-radius": x,
-          "--n-height": Pt,
-          "--n-divider-color": T
+          "--n-border": S,
+          "--n-border-radius": _,
+          "--n-height": Mt,
+          "--n-divider-color": N
         };
-      }), A = we ? (0, f.useThemeClass)("color-picker", (0, r.computed)(() => qe.value[0]), Me, c) : void 0;
+      }), D = we ? (0, s.useThemeClass)("color-picker", (0, t.computed)(() => Le.value[0]), Ae, d) : void 0;
       function $t() {
-        var n;
-        const { value: h } = E, { value: g } = he, { internalActions: v, modes: b, actions: p } = c, { value: y } = Ce, { value: x } = Se;
-        return (0, r.h)(
+        var l;
+        const { value: h } = q, { value: g } = he, { internalActions: v, modes: b, actions: p } = d, { value: S } = Ce, { value: _ } = Se;
+        return (0, t.h)(
           "div",
           { class: [
-            `${x}-color-picker-panel`,
-            A == null ? void 0 : A.themeClass.value
-          ], onDragstart: (T) => {
-            T.preventDefault();
-          }, style: we ? void 0 : Me.value },
-          (0, r.h)(
+            `${_}-color-picker-panel`,
+            D == null ? void 0 : D.themeClass.value
+          ], onDragstart: (N) => {
+            N.preventDefault();
+          }, style: we ? void 0 : Ae.value },
+          (0, t.h)(
             "div",
-            { class: `${x}-color-picker-control` },
-            (0, r.h)(oe.default, { clsPrefix: x, rgba: h, displayedHue: g, displayedSv: Re.value, onUpdateSV: vt, onComplete: Q }),
-            (0, r.h)(
+            { class: `${_}-color-picker-control` },
+            (0, t.h)(ct.default, { clsPrefix: _, rgba: h, displayedHue: g, displayedSv: Ue.value, onUpdateSV: bt, onComplete: Q }),
+            (0, t.h)(
               "div",
-              { class: `${x}-color-picker-preview` },
-              (0, r.h)(
+              { class: `${_}-color-picker-preview` },
+              (0, t.h)(
                 "div",
-                { class: `${x}-color-picker-preview__sliders` },
-                (0, r.h)(j.default, { clsPrefix: x, hue: g, onUpdateHue: bt, onComplete: Q }),
-                c.showAlpha ? (0, r.h)(F.default, { clsPrefix: x, rgba: h, alpha: Ue.value, onUpdateAlpha: mt, onComplete: Q }) : null
+                { class: `${_}-color-picker-preview__sliders` },
+                (0, t.h)(ut.default, { clsPrefix: _, hue: g, onUpdateHue: mt, onComplete: Q }),
+                d.showAlpha ? (0, t.h)($.default, { clsPrefix: _, rgba: h, alpha: Me.value, onUpdateAlpha: _t, onComplete: Q }) : null
               ),
-              c.showPreview ? (0, r.h)(st.default, { clsPrefix: x, mode: P.value, color: E.value && (0, t.toHexString)(E.value), onUpdateColor: (T) => {
-                m(T, "input");
+              d.showPreview ? (0, t.h)(qe.default, { clsPrefix: _, mode: M.value, color: q.value && (0, r.toHexString)(q.value), onUpdateColor: (N) => {
+                m(N, "input");
               } }) : null
             ),
-            (0, r.h)(xe.default, { clsPrefix: x, showAlpha: c.showAlpha, mode: P.value, modes: b, onUpdateMode: pt, value: k.value, valueArr: gt.value, onUpdateValue: _t }),
-            ((n = c.swatches) === null || n === void 0 ? void 0 : n.length) && (0, r.h)(it.default, { clsPrefix: x, mode: P.value, swatches: c.swatches, onUpdateColor: (T) => {
-              m(T, "input");
+            (0, t.h)(z.default, { clsPrefix: _, showAlpha: d.showAlpha, mode: M.value, modes: b, onUpdateMode: gt, value: y.value, valueArr: vt.value, onUpdateValue: xt }),
+            ((l = d.swatches) === null || l === void 0 ? void 0 : l.length) && (0, t.h)(I.default, { clsPrefix: _, mode: M.value, swatches: d.swatches, onUpdateColor: (N) => {
+              m(N, "input");
             } })
           ),
-          p != null && p.length ? (0, r.h)(
+          p != null && p.length ? (0, t.h)(
             "div",
-            { class: `${x}-color-picker-action` },
-            p.includes("confirm") && (0, r.h)(V.NButton, { size: "small", onClick: St, theme: y.peers.Button, themeOverrides: y.peerOverrides.Button }, { default: () => ce.value.confirm }),
-            p.includes("clear") && (0, r.h)(V.NButton, { size: "small", onClick: yt, disabled: !k.value, theme: y.peers.Button, themeOverrides: y.peerOverrides.Button }, { default: () => ce.value.clear })
+            { class: `${_}-color-picker-action` },
+            p.includes("confirm") && (0, t.h)(x.NButton, { size: "small", onClick: wt, theme: S.peers.Button, themeOverrides: S.peerOverrides.Button }, { default: () => ce.value.confirm }),
+            p.includes("clear") && (0, t.h)(x.NButton, { size: "small", onClick: St, disabled: !y.value, theme: S.peers.Button, themeOverrides: S.peerOverrides.Button }, { default: () => ce.value.clear })
           ) : null,
-          X.action ? (0, r.h)("div", { class: `${x}-color-picker-action` }, { default: X.action }) : v ? (0, r.h)(
+          T.action ? (0, t.h)("div", { class: `${_}-color-picker-action` }, { default: T.action }) : v ? (0, t.h)(
             "div",
-            { class: `${x}-color-picker-action` },
-            v.includes("undo") && (0, r.h)(V.NButton, { size: "small", onClick: xt, disabled: !wt.value, theme: y.peers.Button, themeOverrides: y.peerOverrides.Button }, { default: () => ce.value.undo }),
-            v.includes("redo") && (0, r.h)(V.NButton, { size: "small", onClick: kt, disabled: !Ct.value, theme: y.peers.Button, themeOverrides: y.peerOverrides.Button }, { default: () => ce.value.redo })
+            { class: `${_}-color-picker-action` },
+            v.includes("undo") && (0, t.h)(x.NButton, { size: "small", onClick: kt, disabled: !Ct.value, theme: S.peers.Button, themeOverrides: S.peerOverrides.Button }, { default: () => ce.value.undo }),
+            v.includes("redo") && (0, t.h)(x.NButton, { size: "small", onClick: yt, disabled: !Pt.value, theme: S.peers.Button, themeOverrides: S.peerOverrides.Button }, { default: () => ce.value.redo })
           ) : null
         );
       }
       return {
         mergedClsPrefix: Se,
-        namespace: ht,
-        selfRef: Z,
-        hsla: Pe,
-        rgba: E,
-        mergedShow: Le,
-        mergedDisabled: dt,
+        namespace: ft,
+        selfRef: Ne,
+        hsla: $e,
+        rgba: q,
+        mergedShow: Ge,
+        mergedDisabled: ht,
         isMounted: (0, a.useIsMounted)(),
-        adjustedTo: (0, _.useAdjustedTo)(c),
-        mergedValue: k,
+        adjustedTo: (0, f.useAdjustedTo)(d),
+        mergedValue: y,
         handleTriggerClick() {
           de(!0);
         },
-        handleClickOutside(n) {
+        handleClickOutside(l) {
           var h;
-          !((h = Z.value) === null || h === void 0) && h.contains((0, t.getPreciseEventTarget)(n)) || de(!1);
+          !((h = Ne.value) === null || h === void 0) && h.contains((0, r.getPreciseEventTarget)(l)) || de(!1);
         },
         renderPanel: $t,
-        cssVars: we ? void 0 : Me,
-        themeClass: A == null ? void 0 : A.themeClass,
-        onRender: A == null ? void 0 : A.onRender
+        cssVars: we ? void 0 : Ae,
+        themeClass: D == null ? void 0 : D.themeClass,
+        onRender: D == null ? void 0 : D.onRender
       };
     },
     render() {
-      const { $slots: c, mergedClsPrefix: X, onRender: Z } = this;
-      return Z == null || Z(), (0, r.h)(
+      const { mergedClsPrefix: d, onRender: T } = this;
+      return T == null || T(), (0, t.h)(
         "div",
-        { class: [this.themeClass, `${X}-color-picker`], ref: "selfRef", style: this.cssVars },
-        (0, r.h)(l.VBinder, null, {
+        { class: [this.themeClass, `${d}-color-picker`], ref: "selfRef", style: this.cssVars },
+        (0, t.h)(i.VBinder, null, {
           default: () => [
-            (0, r.h)(l.VTarget, null, {
-              default: () => (0, r.h)(at.default, { clsPrefix: X, value: this.mergedValue, hsla: this.hsla, disabled: this.mergedDisabled, onClick: this.handleTriggerClick }, {
-                label: c.label
-              })
+            (0, t.h)(i.VTarget, null, {
+              default: () => (0, t.h)(Z.default, { clsPrefix: d, value: this.mergedValue, hsla: this.hsla, disabled: this.mergedDisabled, onClick: this.handleTriggerClick })
             }),
-            (0, r.h)(l.VFollower, { placement: this.placement, show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === _.useAdjustedTo.tdkey, to: this.adjustedTo }, {
-              default: () => (0, r.h)(r.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
-                default: () => this.mergedShow ? (0, r.withDirectives)(this.renderPanel(), [
+            (0, t.h)(i.VFollower, { placement: this.placement, show: this.mergedShow, containerClass: this.namespace, teleportDisabled: this.adjustedTo === f.useAdjustedTo.tdkey, to: this.adjustedTo }, {
+              default: () => (0, t.h)(t.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
+                default: () => this.mergedShow ? (0, t.withDirectives)(this.renderPanel(), [
                   [
-                    i.clickoutside,
+                    n.clickoutside,
                     this.handleClickOutside,
                     void 0,
                     { capture: !0 }
@@ -1336,22 +1350,22 @@ Te.default = (0, u.c)([(0, u.cB)("color-picker", `
       );
     }
   });
-})(rt);
+})(nt);
 (function(e) {
-  var o = O && O.__importDefault || function(t) {
-    return t && t.__esModule ? t : { default: t };
+  var o = E && E.__importDefault || function(n) {
+    return n && n.__esModule ? n : { default: n };
   };
-  Object.defineProperty(e, "__esModule", { value: !0 }), e.colorPickerProps = e.NColorPicker = void 0;
-  var r = rt;
-  Object.defineProperty(e, "NColorPicker", { enumerable: !0, get: function() {
-    return o(r).default;
-  } }), Object.defineProperty(e, "colorPickerProps", { enumerable: !0, get: function() {
+  Object.defineProperty(e, "__esModule", { value: !0 }), e.NColorPicker = e.colorPickerProps = void 0;
+  var r = nt;
+  Object.defineProperty(e, "colorPickerProps", { enumerable: !0, get: function() {
     return r.colorPickerProps;
+  } }), Object.defineProperty(e, "NColorPicker", { enumerable: !0, get: function() {
+    return o(r).default;
   } });
-})(tt);
-const Dr = /* @__PURE__ */ Bt({
+})(ot);
+const zr = /* @__PURE__ */ Ot({
   __proto__: null
-}, [tt]);
+}, [ot]);
 export {
-  Dr as i
+  zr as i
 };