epic-designer-gold 0.0.1 → 0.0.2

package/dist/index-3fW_aWMH.js

@@ -0,0 +1,1357 @@
+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) {
+  for (var r = 0; r < o.length; r++) {
+    const t = o[r];
+    if (typeof t != "string" && !Array.isArray(t)) {
+      for (const a in t)
+        if (a !== "default" && !(a in e)) {
+          const l = Object.getOwnPropertyDescriptor(t, a);
+          l && Object.defineProperty(e, a, l.get ? l : {
+            enumerable: !0,
+            get: () => t[a]
+          });
+        }
+    }
+  }
+  return Object.freeze(Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }));
+}
+var tt = {}, rt = {}, ot = {}, 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;
+  return {
+    panelFontSize: o,
+    boxShadow: r,
+    color: t,
+    textColor: a,
+    borderRadius: l,
+    border: `1px solid ${i}`,
+    heightSmall: s,
+    heightMedium: f,
+    heightLarge: _,
+    fontSizeSmall: V,
+    fontSizeMedium: j,
+    fontSizeLarge: F,
+    dividerColor: oe
+  };
+}
+const Tt = (0, jt.createTheme)({
+  name: "ColorPicker",
+  common: Ot.commonLight,
+  peers: {
+    Input: Ft.inputLight,
+    Button: Et.buttonLight
+  },
+  self: nt
+});
+ue.default = Tt;
+Object.defineProperty(Ve, "__esModule", { value: !0 });
+const qt = Qe, Nt = We, Lt = Je, Kt = ue, Xt = {
+  name: "ColorPicker",
+  common: Lt.commonDark,
+  peers: {
+    Input: Nt.inputDark,
+    Button: qt.buttonDark
+  },
+  self: Kt.self
+};
+Ve.default = Xt;
+(function(e) {
+  var o = O && O.__importDefault || function(a) {
+    return a && a.__esModule ? a : { default: a };
+  };
+  Object.defineProperty(e, "__esModule", { value: !0 }), e.colorPickerLight = e.colorPickerDark = void 0;
+  var r = Ve;
+  Object.defineProperty(e, "colorPickerDark", { enumerable: !0, get: function() {
+    return o(r).default;
+  } });
+  var t = ue;
+  Object.defineProperty(e, "colorPickerLight", { enumerable: !0, get: function() {
+    return o(t).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) {
+  switch (e[0]) {
+    case "hex":
+      return o ? "#000000FF" : "#000000";
+    case "rgb":
+      return o ? "rgba(0, 0, 0, 1)" : "rgb(0, 0, 0)";
+    case "hsl":
+      return o ? "hsla(0, 0%, 0%, 1)" : "hsl(0, 0%, 0%)";
+    case "hsv":
+      return o ? "hsva(0, 0%, 0%, 1)" : "hsv(0, 0%, 0%)";
+  }
+  return process.env.NODE_ENV !== "production" && (0, Zt.warn)("color-picker", "props.modes is invalid."), "#000000";
+}
+function lt(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 Jt(e) {
+  return e = Math.round(e), e >= 360 ? 359 : e < 0 ? 0 : e;
+}
+function Qt(e) {
+  return e = Math.round(e * 100) / 100, e > 1 ? 1 : e < 0 ? 0 : e;
+}
+const Wt = {
+  rgb: {
+    hex(e) {
+      return (0, d.toHexaString)((0, d.rgba)(e));
+    },
+    hsl(e) {
+      const [o, r, t, a] = (0, d.rgba)(e);
+      return (0, d.toHslaString)([...(0, d.rgb2hsl)(o, r, t), a]);
+    },
+    hsv(e) {
+      const [o, r, t, a] = (0, d.rgba)(e);
+      return (0, d.toHsvaString)([...(0, d.rgb2hsv)(o, r, t), a]);
+    }
+  },
+  hex: {
+    rgb(e) {
+      return (0, d.toRgbaString)((0, d.rgba)(e));
+    },
+    hsl(e) {
+      const [o, r, t, a] = (0, d.rgba)(e);
+      return (0, d.toHslaString)([...(0, d.rgb2hsl)(o, r, t), a]);
+    },
+    hsv(e) {
+      const [o, r, t, a] = (0, d.rgba)(e);
+      return (0, d.toHsvaString)([...(0, d.rgb2hsv)(o, r, t), a]);
+    }
+  },
+  hsl: {
+    hex(e) {
+      const [o, r, t, a] = (0, d.hsla)(e);
+      return (0, d.toHexaString)([...(0, d.hsl2rgb)(o, r, t), a]);
+    },
+    rgb(e) {
+      const [o, r, t, a] = (0, d.hsla)(e);
+      return (0, d.toRgbaString)([...(0, d.hsl2rgb)(o, r, t), a]);
+    },
+    hsv(e) {
+      const [o, r, t, a] = (0, d.hsla)(e);
+      return (0, d.toHsvaString)([...(0, d.hsl2hsv)(o, r, t), a]);
+    }
+  },
+  hsv: {
+    hex(e) {
+      const [o, r, t, a] = (0, d.hsva)(e);
+      return (0, d.toHexaString)([...(0, d.hsv2rgb)(o, r, t), a]);
+    },
+    rgb(e) {
+      const [o, r, t, a] = (0, d.hsva)(e);
+      return (0, d.toRgbaString)([...(0, d.hsv2rgb)(o, r, t), a]);
+    },
+    hsl(e) {
+      const [o, r, t, a] = (0, d.hsva)(e);
+      return (0, d.toHslaString)([...(0, d.hsv2hsl)(o, r, t), a]);
+    }
+  }
+};
+function er(e, o, r) {
+  return r = r || lt(e), r ? r === o ? e : Wt[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)({
+  name: "AlphaSlider",
+  props: {
+    clsPrefix: {
+      type: String,
+      required: !0
+    },
+    rgba: {
+      type: Array,
+      default: null
+    },
+    alpha: {
+      type: Number,
+      default: 0
+    },
+    onUpdateAlpha: {
+      type: Function,
+      required: !0
+    },
+    onComplete: Function
+  },
+  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 t(l) {
+      const { value: i } = o;
+      if (!i)
+        return;
+      const { width: s, left: f } = i.getBoundingClientRect(), _ = (l.clientX - f) / (s - ir);
+      e.onUpdateAlpha((0, ar.normalizeAlpha)(_));
+    }
+    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);
+    }
+    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%)` : "";
+      }),
+      handleMouseDown: r
+    };
+  },
+  render() {
+    const { clsPrefix: e } = this;
+    return (0, U.h)(
+      "div",
+      { class: `${e}-color-picker-slider`, ref: "railRef", style: {
+        height: ae,
+        borderRadius: L
+      }, onMousedown: this.handleMouseDown },
+      (0, U.h)(
+        "div",
+        { style: {
+          borderRadius: L,
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+          overflow: "hidden"
+        } },
+        (0, U.h)("div", { class: `${e}-color-picker-checkboard` }),
+        (0, U.h)("div", { class: `${e}-color-picker-slider__image`, style: {
+          backgroundImage: this.railBackgroundImage
+        } })
+      ),
+      this.rgba && (0, U.h)(
+        "div",
+        { style: {
+          position: "absolute",
+          left: L,
+          right: L,
+          top: 0,
+          bottom: 0
+        } },
+        (0, U.h)(
+          "div",
+          { class: `${e}-color-picker-handle`, style: {
+            left: `calc(${this.alpha * 100}% - ${L})`,
+            borderRadius: L,
+            width: ae,
+            height: ae
+          } },
+          (0, U.h)("div", { class: `${e}-color-picker-handle__fill`, style: {
+            backgroundColor: (0, lr.toRgbaString)(this.rgba),
+            borderRadius: L,
+            width: ae,
+            height: ae
+          } })
+        )
+      )
+    );
+  }
+});
+var Ie = {};
+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) {
+  return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 255)) : !1;
+}
+function hr(e) {
+  return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 360)) : !1;
+}
+function fr(e) {
+  return /^\d{1,3}\.?\d*$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e), 100)) : !1;
+}
+function pr(e) {
+  const o = e.trim();
+  return /^#[0-9a-fA-F]+$/.test(o) ? [4, 5, 7, 9].includes(o.length) : !1;
+}
+function gr(e) {
+  return /^\d{1,3}\.?\d*%$/.test(e.trim()) ? Math.max(0, Math.min(Number.parseInt(e) / 100, 100)) : !1;
+}
+const vr = {
+  paddingSmall: "0 4px"
+};
+Oe.default = (0, ie.defineComponent)({
+  name: "ColorInputUnit",
+  props: {
+    label: {
+      type: String,
+      required: !0
+    },
+    value: {
+      type: [Number, String],
+      default: null
+    },
+    showAlpha: Boolean,
+    onUpdateValue: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const o = (0, ie.ref)(""), { themeRef: r } = (0, ie.inject)(cr.colorPickerInjectionKey, null);
+    (0, ie.watchEffect)(() => {
+      o.value = t();
+    });
+    function t() {
+      const { value: i } = e;
+      if (i === null)
+        return "";
+      const { label: s } = e;
+      return s === "HEX" ? i : s === "A" ? `${Math.floor(i * 100)}%` : String(Math.floor(i));
+    }
+    function a(i) {
+      o.value = i;
+    }
+    function l(i) {
+      let s, f;
+      switch (e.label) {
+        case "HEX":
+          f = pr(i), f && e.onUpdateValue(i), o.value = t();
+          break;
+        case "H":
+          s = hr(i), s === !1 ? o.value = t() : e.onUpdateValue(s);
+          break;
+        case "S":
+        case "L":
+        case "V":
+          s = fr(i), s === !1 ? o.value = t() : e.onUpdateValue(s);
+          break;
+        case "A":
+          s = gr(i), s === !1 ? o.value = t() : e.onUpdateValue(s);
+          break;
+        case "R":
+        case "G":
+        case "B":
+          s = dr(i), s === !1 ? o.value = t() : e.onUpdateValue(s);
+          break;
+      }
+    }
+    return {
+      mergedTheme: r,
+      inputValue: o,
+      handleInputChange: l,
+      handleInputUpdateValue: a
+    };
+  },
+  render() {
+    const { mergedTheme: e } = this;
+    return (0, ie.h)(ur.NInput, {
+      size: "small",
+      placeholder: this.label,
+      theme: e.peers.Input,
+      themeOverrides: e.peerOverrides.Input,
+      builtinThemeOverrides: vr,
+      value: this.inputValue,
+      onUpdateValue: this.handleInputUpdateValue,
+      onChange: this.handleInputChange,
+      // add more space for xxx% input
+      style: this.label === "A" ? "flex-grow: 1.25;" : ""
+    });
+  }
+});
+var br = O && O.__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)({
+  name: "ColorInput",
+  props: {
+    clsPrefix: {
+      type: String,
+      required: !0
+    },
+    mode: {
+      type: String,
+      required: !0
+    },
+    modes: {
+      type: Array,
+      required: !0
+    },
+    showAlpha: {
+      type: Boolean,
+      required: !0
+    },
+    value: {
+      // for hex to get percise value
+      type: String,
+      default: null
+    },
+    valueArr: {
+      type: Array,
+      default: null
+    },
+    onUpdateValue: {
+      type: Function,
+      required: !0
+    },
+    onUpdateMode: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    return {
+      handleUnitUpdateValue(o, r) {
+        const { showAlpha: t } = e;
+        if (e.mode === "hex") {
+          e.onUpdateValue((t ? R.toHexaString : R.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));
+            break;
+          case "rgb":
+            a[o] = r, e.onUpdateValue((t ? R.toRgbaString : R.toRgbString)(a));
+            break;
+          case "hsl":
+            a[o] = r, e.onUpdateValue((t ? R.toHslaString : R.toHslString)(a));
+            break;
+        }
+      }
+    };
+  },
+  render() {
+    const { clsPrefix: e, modes: o } = this;
+    return (0, ee.h)(
+      "div",
+      { class: `${e}-color-picker-input` },
+      (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, {
+        default: () => {
+          const { mode: r, valueArr: t, showAlpha: a } = this;
+          if (r === "hex") {
+            let l = null;
+            try {
+              l = t === null ? null : (a ? R.toHexaString : R.toHexString)(t);
+            } catch {
+            }
+            return (0, ee.h)(Ze.default, { label: "HEX", showAlpha: a, value: l, 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) => {
+            this.handleUnitUpdateValue(i, s);
+          } }));
+        }
+      })
+    );
+  }
+});
+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) {
+  if (o === "hsv") {
+    const [r, t, a, l] = (0, Ae.hsva)(e);
+    return (0, Ae.toRgbaString)([...(0, Ae.hsv2rgb)(r, t, a), l]);
+  }
+  return e;
+}
+function Sr(e) {
+  const o = document.createElement("canvas").getContext("2d");
+  return o ? (o.fillStyle = e, o.fillStyle) : "#000000";
+}
+Fe.default = (0, se.defineComponent)({
+  name: "ColorPickerSwatches",
+  props: {
+    clsPrefix: {
+      type: String,
+      required: !0
+    },
+    mode: {
+      type: String,
+      required: !0
+    },
+    swatches: {
+      type: Array,
+      required: !0
+    },
+    onUpdateColor: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    const o = (0, se.computed)(() => e.swatches.map((l) => {
+      const i = (0, Ge.getModeFromValue)(l);
+      return {
+        value: l,
+        mode: i,
+        legalValue: yr(l, i)
+      };
+    }));
+    function r(l) {
+      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);
+    }
+    function t(l) {
+      e.onUpdateColor(r(l));
+    }
+    function a(l, i) {
+      l.key === "Enter" && t(i);
+    }
+    return {
+      parsedSwatchesRef: o,
+      handleSwatchSelect: t,
+      handleSwatchKeyDown: a
+    };
+  },
+  render() {
+    const { clsPrefix: e } = this;
+    return (0, se.h)("div", { class: `${e}-color-picker-swatches` }, this.parsedSwatchesRef.map((o) => (0, se.h)(
+      "div",
+      { class: `${e}-color-picker-swatch`, tabindex: 0, onClick: () => {
+        this.handleSwatchSelect(o);
+      }, onKeydown: (r) => {
+        this.handleSwatchKeyDown(r, o);
+      } },
+      (0, se.h)("div", { class: `${e}-color-picker-swatch__fill`, style: { background: o.legalValue } })
+    )));
+  }
+});
+var Ee = {};
+Object.defineProperty(Ee, "__esModule", { value: !0 });
+const me = D, Ye = $;
+Ee.default = (0, me.defineComponent)({
+  name: "ColorPreview",
+  props: {
+    clsPrefix: {
+      type: String,
+      required: !0
+    },
+    mode: {
+      type: String,
+      required: !0
+    },
+    color: {
+      type: String,
+      default: null,
+      validator: (e) => {
+        const o = (0, Ye.getModeFromValue)(e);
+        return !!(!e || o && o !== "hsv");
+      }
+    },
+    onUpdateColor: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    function o(r) {
+      var t;
+      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();
+    }
+    return {
+      handleChange: o
+    };
+  },
+  render() {
+    const { clsPrefix: e } = this;
+    return (0, me.h)(
+      "div",
+      { class: `${e}-color-picker-preview__preview` },
+      (0, me.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 })
+    );
+  }
+});
+var Te = {};
+Object.defineProperty(Te, "__esModule", {
+  value: !0
+});
+const u = Mt, wr = It;
+Te.default = (0, u.c)([(0, u.cB)("color-picker", `
+ display: inline-block;
+ box-sizing: border-box;
+ height: var(--n-height);
+ font-size: var(--n-font-size);
+ width: 100%;
+ position: relative;
+ `), (0, u.cB)("color-picker-panel", `
+ margin: 4px 0;
+ width: 240px;
+ font-size: var(--n-panel-font-size);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
+ transition:
+ box-shadow .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ 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", `
+ text-align: center;
+ `)]), (0, u.cB)("color-picker-checkboard", `
+ background: white; 
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ `, [(0, u.c)("&::after", `
+ background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
+ background-size: 12px 12px;
+ background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
+ background-repeat: repeat;
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ `)]), (0, u.cB)("color-picker-slider", `
+ margin-bottom: 8px;
+ position: relative;
+ box-sizing: border-box;
+ `, [(0, u.cE)("image", `
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ `), (0, u.c)("&::after", `
+ content: "";
+ position: absolute;
+ border-radius: inherit;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
+ pointer-events: none;
+ `)]), (0, u.cB)("color-picker-handle", `
+ z-index: 1;
+ box-shadow: 0 0 2px 0 rgba(0, 0, 0, .45);
+ position: absolute;
+ background-color: white;
+ overflow: hidden;
+ `, [(0, u.cE)("fill", `
+ box-sizing: border-box;
+ border: 2px solid white;
+ `)]), (0, u.cB)("color-picker-pallete", `
+ height: 180px;
+ position: relative;
+ margin-bottom: 8px;
+ cursor: crosshair;
+ `, [(0, u.cE)("layer", `
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ `, [(0, u.cM)("shadowed", `
+ box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .24);
+ `)])]), (0, u.cB)("color-picker-preview", `
+ display: flex;
+ `, [(0, u.cE)("sliders", `
+ flex: 1 0 auto;
+ `), (0, u.cE)("preview", `
+ position: relative;
+ height: 30px;
+ width: 30px;
+ margin: 0 0 8px 6px;
+ border-radius: 50%;
+ box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
+ overflow: hidden;
+ `), (0, u.cE)("fill", `
+ display: block;
+ width: 30px;
+ height: 30px;
+ `), (0, u.cE)("input", `
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 30px;
+ height: 30px;
+ opacity: 0;
+ z-index: 1;
+ `)]), (0, u.cB)("color-picker-input", `
+ display: flex;
+ align-items: center;
+ `, [(0, u.cB)("input", `
+ flex-grow: 1;
+ flex-basis: 0;
+ `), (0, u.cE)("mode", `
+ width: 72px;
+ text-align: center;
+ `)]), (0, u.cB)("color-picker-control", `
+ padding: 12px;
+ `), (0, u.cB)("color-picker-action", `
+ display: flex;
+ margin-top: -4px;
+ border-top: 1px solid var(--n-divider-color);
+ padding: 8px 12px;
+ justify-content: flex-end;
+ `, [(0, u.cB)("button", "margin-left: 8px;")]), (0, u.cB)("color-picker-trigger", `
+ border: var(--n-border);
+ height: 100%;
+ box-sizing: border-box;
+ border-radius: var(--n-border-radius);
+ transition: border-color .3s var(--n-bezier);
+ cursor: pointer;
+ `, [(0, u.cE)("value", `
+ white-space: nowrap;
+ position: relative;
+ `), (0, u.cE)("fill", `
+ border-radius: var(--n-border-radius);
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ left: 4px;
+ right: 4px;
+ top: 4px;
+ bottom: 4px;
+ `), (0, u.cM)("disabled", "cursor: not-allowed"), (0, u.cB)("color-picker-checkboard", `
+ border-radius: var(--n-border-radius);
+ `, [(0, u.c)("&::after", `
+ --n-block-size: calc((var(--n-height) - 8px) / 3);
+ background-size: calc(var(--n-block-size) * 2) calc(var(--n-block-size) * 2);
+ background-position: 0 0, 0 var(--n-block-size), var(--n-block-size) calc(-1 * var(--n-block-size)), calc(-1 * var(--n-block-size)) 0px; 
+ `)])]), (0, u.cB)("color-picker-swatches", `
+ display: grid;
+ grid-gap: 8px;
+ flex-wrap: wrap;
+ position: relative;
+ grid-template-columns: repeat(auto-fill, 18px);
+ margin-top: 10px;
+ `, [(0, u.cB)("color-picker-swatch", `
+ width: 18px;
+ height: 18px;
+ background-image: linear-gradient(45deg, #DDD 25%, #0000 25%), linear-gradient(-45deg, #DDD 25%, #0000 25%), linear-gradient(45deg, #0000 75%, #DDD 75%), linear-gradient(-45deg, #0000 75%, #DDD 75%);
+ background-size: 8px 8px;
+ background-position: 0px 0, 0px 4px, 4px -4px, -4px 0px;
+ background-repeat: repeat;
+ `, [(0, u.cE)("fill", `
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border-radius: 3px;
+ box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset;
+ cursor: pointer;
+ `), (0, u.c)("&:focus", `
+ outline: none;
+ `, [(0, u.cE)("fill", [(0, u.c)("&::after", `
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: inherit;
+ filter: blur(2px);
+ content: "";
+ `)])])])])]);
+(function(e) {
+  var o = O && O.__importDefault || function(c) {
+    return c && c.__esModule ? c : { default: c };
+  };
+  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: {
+    type: Boolean,
+    default: void 0
+  }, defaultShow: Boolean, defaultValue: String, modes: {
+    type: Array,
+    // no hsva by default since browser doesn't support it
+    default: () => ["rgb", "hex", "hsl"]
+  }, placement: {
+    type: String,
+    default: "bottom-start"
+  }, to: _.useAdjustedTo.propTo, showAlpha: {
+    type: Boolean,
+    default: !0
+  }, showPreview: Boolean, swatches: Array, disabled: {
+    type: Boolean,
+    default: void 0
+  }, 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)({
+    name: "ColorPicker",
+    props: e.colorPickerProps,
+    setup(c, { slots: X }) {
+      const Z = (0, r.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, {
+        themeRef: Ce,
+        renderLabelRef: (0, r.toRef)(c, "renderLabel"),
+        colorPickerSlots: X
+      });
+      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 { 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";
+      }
+      let S, w, Y, J, H, z, I, C;
+      const le = (0, r.computed)(() => {
+        const { value: n } = k;
+        if (!n)
+          return null;
+        switch ($e.value) {
+          case "hsv":
+            return (0, t.hsva)(n);
+          case "hsl":
+            return [S, w, Y, C] = (0, t.hsla)(n), [...(0, t.hsl2hsv)(S, w, Y), C];
+          case "rgb":
+          case "hex":
+            return [H, z, I, C] = (0, t.rgba)(n), [...(0, t.rgb2hsv)(H, z, I), C];
+        }
+      }), E = (0, r.computed)(() => {
+        const { value: n } = k;
+        if (!n)
+          return null;
+        switch ($e.value) {
+          case "rgb":
+          case "hex":
+            return (0, t.rgba)(n);
+          case "hsv":
+            return [S, w, J, C] = (0, t.hsva)(n), [...(0, t.hsv2rgb)(S, w, J), C];
+          case "hsl":
+            return [S, w, Y, C] = (0, t.hsla)(n), [...(0, t.hsl2rgb)(S, w, Y), C];
+        }
+      }), Pe = (0, r.computed)(() => {
+        const { value: n } = k;
+        if (!n)
+          return null;
+        switch ($e.value) {
+          case "hsl":
+            return (0, t.hsla)(n);
+          case "hsv":
+            return [S, w, J, C] = (0, t.hsva)(n), [...(0, t.hsv2hsl)(S, w, J), C];
+          case "rgb":
+          case "hex":
+            return [H, z, I, C] = (0, t.rgba)(n), [...(0, t.rgb2hsl)(H, z, I), C];
+        }
+      }), gt = (0, r.computed)(() => {
+        switch (P.value) {
+          case "rgb":
+          case "hex":
+            return E.value;
+          case "hsv":
+            return le.value;
+          case "hsl":
+            return Pe.value;
+        }
+      }), he = (0, r.ref)(0), Ue = (0, r.ref)(1), Re = (0, r.ref)([0, 0]);
+      function vt(n, h) {
+        const { value: g } = le, v = he.value, b = g ? g[3] : 1;
+        Re.value = [n, h];
+        const { showAlpha: p } = c;
+        switch (P.value) {
+          case "hsv":
+            m((p ? t.toHsvaString : t.toHsvString)([v, n, h, b]), "cursor");
+            break;
+          case "hsl":
+            m((p ? t.toHslaString : t.toHslString)([
+              ...(0, t.hsv2hsl)(v, n, h),
+              b
+            ]), "cursor");
+            break;
+          case "rgb":
+            m((p ? t.toRgbaString : t.toRgbString)([
+              ...(0, t.hsv2rgb)(v, n, h),
+              b
+            ]), "cursor");
+            break;
+          case "hex":
+            m((p ? t.toHexaString : t.toHexString)([
+              ...(0, t.hsv2rgb)(v, n, h),
+              b
+            ]), "cursor");
+            break;
+        }
+      }
+      function bt(n) {
+        he.value = n;
+        const { value: h } = le;
+        if (!h)
+          return;
+        const [, g, v, b] = h, { showAlpha: p } = c;
+        switch (P.value) {
+          case "hsv":
+            m((p ? t.toHsvaString : t.toHsvString)([n, g, v, b]), "cursor");
+            break;
+          case "rgb":
+            m((p ? t.toRgbaString : t.toRgbString)([
+              ...(0, t.hsv2rgb)(n, g, v),
+              b
+            ]), "cursor");
+            break;
+          case "hex":
+            m((p ? t.toHexaString : t.toHexString)([
+              ...(0, t.hsv2rgb)(n, g, v),
+              b
+            ]), "cursor");
+            break;
+          case "hsl":
+            m((p ? t.toHslaString : t.toHslString)([
+              ...(0, t.hsv2hsl)(n, g, v),
+              b
+            ]), "cursor");
+            break;
+        }
+      }
+      function mt(n) {
+        switch (P.value) {
+          case "hsv":
+            [S, w, J] = le.value, m((0, t.toHsvaString)([S, w, J, n]), "cursor");
+            break;
+          case "rgb":
+            [H, z, I] = E.value, m((0, t.toRgbaString)([H, z, I, n]), "cursor");
+            break;
+          case "hex":
+            [H, z, I] = E.value, m((0, t.toHexaString)([H, z, I, n]), "cursor");
+            break;
+          case "hsl":
+            [S, w, Y] = Pe.value, m((0, t.toHslaString)([S, w, Y, n]), "cursor");
+            break;
+        }
+        Ue.value = n;
+      }
+      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 _t(n) {
+        m(n, "input"), (0, r.nextTick)(Q);
+      }
+      function Q(n = !0) {
+        const { value: h } = k;
+        if (h) {
+          const { nTriggerFormChange: g, nTriggerFormInput: v } = ye, { onComplete: b } = c;
+          b && b(h);
+          const { value: p } = G, { value: y } = M;
+          n && (p.splice(y + 1, p.length, h), M.value = y + 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);
+      }
+      function yt() {
+        m(null, "input");
+        const { onClear: n } = c;
+        n && n(), de(!1);
+      }
+      function St() {
+        const { value: n } = k, { onConfirm: h } = c;
+        h && h(n), 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;
+      });
+      (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]]);
+        }
+        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;
+        return {
+          "--n-bezier": h,
+          "--n-text-color": g,
+          "--n-color": v,
+          "--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
+        };
+      }), A = we ? (0, f.useThemeClass)("color-picker", (0, r.computed)(() => qe.value[0]), Me, c) : 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)(
+          "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)(
+            "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)(
+              "div",
+              { class: `${x}-color-picker-preview` },
+              (0, r.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
+              ),
+              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");
+              } }) : 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");
+            } })
+          ),
+          p != null && p.length ? (0, r.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 })
+          ) : null,
+          X.action ? (0, r.h)("div", { class: `${x}-color-picker-action` }, { default: X.action }) : v ? (0, r.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 })
+          ) : null
+        );
+      }
+      return {
+        mergedClsPrefix: Se,
+        namespace: ht,
+        selfRef: Z,
+        hsla: Pe,
+        rgba: E,
+        mergedShow: Le,
+        mergedDisabled: dt,
+        isMounted: (0, a.useIsMounted)(),
+        adjustedTo: (0, _.useAdjustedTo)(c),
+        mergedValue: k,
+        handleTriggerClick() {
+          de(!0);
+        },
+        handleClickOutside(n) {
+          var h;
+          !((h = Z.value) === null || h === void 0) && h.contains((0, t.getPreciseEventTarget)(n)) || de(!1);
+        },
+        renderPanel: $t,
+        cssVars: we ? void 0 : Me,
+        themeClass: A == null ? void 0 : A.themeClass,
+        onRender: A == null ? void 0 : A.onRender
+      };
+    },
+    render() {
+      const { $slots: c, mergedClsPrefix: X, onRender: Z } = this;
+      return Z == null || Z(), (0, r.h)(
+        "div",
+        { class: [this.themeClass, `${X}-color-picker`], ref: "selfRef", style: this.cssVars },
+        (0, r.h)(l.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, 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(), [
+                  [
+                    i.clickoutside,
+                    this.handleClickOutside,
+                    void 0,
+                    { capture: !0 }
+                  ]
+                ]) : null
+              })
+            })
+          ]
+        })
+      );
+    }
+  });
+})(rt);
+(function(e) {
+  var o = O && O.__importDefault || function(t) {
+    return t && t.__esModule ? t : { default: t };
+  };
+  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() {
+    return r.colorPickerProps;
+  } });
+})(tt);
+const Dr = /* @__PURE__ */ Bt({
+  __proto__: null
+}, [tt]);
+export {
+  Dr as i
+};