@orchidui/dashboard 0.6.0 → 0.7.0

package/dist/index.js

@@ -1,15 +1,15 @@
 var dt = Object.defineProperty;
 var ct = (n, I, r) => I in n ? dt(n, I, { enumerable: !0, configurable: !0, writable: !0, value: r }) : n[I] = r;
 var qe = (n, I, r) => ct(n, typeof I != "symbol" ? I + "" : I, r);
-import { ref as m, computed as Fe, openBlock as v, createBlock as X, unref as C, normalizeClass as A, withCtx as G, createVNode as E, createCommentVNode as H, createSlots as pt, renderSlot as Ye, createElementBlock as R, normalizeStyle as J, onMounted as je, createElementVNode as h, Fragment as ce, renderList as We, toDisplayString as Qe, createTextVNode as pe, watch as xe, withKeys as lt, inject as Le, reactive as Ke, provide as Ve, nextTick as gt, withDirectives as vt, vShow as mt, defineComponent as ft, defineAsyncComponent as ht } from "vue";
-import { Q as q, a as yt } from "./QuillEditor-Bm3QXhLB.js";
-import { BaseInput as at, Dropdown as nt, Input as be, Icon as Q, Slider as Ae, Select as bt } from "@orchidui/core";
+import { ref as m, computed as Fe, openBlock as v, createBlock as X, unref as C, normalizeClass as A, withCtx as G, createVNode as E, createCommentVNode as D, createSlots as pt, renderSlot as Ye, createElementBlock as R, normalizeStyle as J, onMounted as je, createElementVNode as h, Fragment as ce, renderList as We, toDisplayString as Qe, createTextVNode as pe, watch as xe, withKeys as lt, inject as Le, reactive as Ke, provide as Ve, nextTick as gt, withDirectives as vt, vShow as mt, defineComponent as ft, defineAsyncComponent as ht } from "vue";
+import { Q as q, a as yt } from "./QuillEditor-CTgEQ0_O.js";
+import { a as at, b as nt, y as be, g as Q, o as Ae, i as bt } from "./index-DyVteXE3-BhWmKQss.js";
 import { hslToRgb as Ze, hsl2Hex as Je, rgb2Hex as _e, rgbaToHex8 as xt, hexToRgb as Ge, rgbToHue as Me, rgbToHsl as et, hex8ToRgba as kt, parseRgba as $t, parseRgb as wt } from "./Dashboard/ColorPicker/components/converters.js";
 import { PieChart as St } from "./Dashboard/Charts/PieChart/OcPieChart.js";
 import { LineChart as Ul } from "./Dashboard/Charts/LineChart/OcLineChart.js";
 import { BarChart as Ml } from "./Dashboard/Charts/BarChart/OcBarChart.js";
 import { BarRaceChart as Ql } from "./Dashboard/Charts/BarRaceChart/OcBarRaceChart.js";
-import { _ as Nl } from "./OcCard-w0EuBfr4.js";
+import { _ as Nl } from "./OcCard-CfotNHx8.js";
 const Ct = { key: 1 }, It = {
   __name: "OcColorPicker",
   props: {
@@ -29,8 +29,8 @@ const Ct = { key: 1 }, It = {
   },
   emits: ["update:model-value"],
   setup(n, { emit: I }) {
-    const r = n, y = I, u = m(!1), f = m(r.modelValue), w = (D) => {
-      D && (f.value = D, y("update:model-value", D));
+    const r = n, y = I, u = m(!1), f = m(r.modelValue), w = (H) => {
+      H && (f.value = H, y("update:model-value", H));
     }, c = Fe(() => r.variant === "gradient" ? {
       class: "w-[20px] h-[20px] hide-svg-icon",
       style: {
@@ -41,12 +41,12 @@ const Ct = { key: 1 }, It = {
         color: f.value
       }
     }), a = m(), U = m([]), W = () => {
-      U.value.length > 8 && (U.value = U.value.filter((D, F) => F < 8)), localStorage.setItem("ck-cp-local-color-list", JSON.stringify(U.value));
+      U.value.length > 8 && (U.value = U.value.filter((H, F) => F < 8)), localStorage.setItem("ck-cp-local-color-list", JSON.stringify(U.value));
     };
     let O = localStorage.getItem("ck-cp-local-color-list");
     O && (U.value = [...new Set(JSON.parse(O))], W());
-    const L = (D) => {
-      if (!D && f.value)
+    const L = (H) => {
+      if (!H && f.value)
         if (U.value.find((M) => M === f.value))
           U.value = [
             f.value,
@@ -57,10 +57,10 @@ const Ct = { key: 1 }, It = {
           let M = f.value;
           U.value.unshift(M), W();
         }
-    }, B = m(!1), j = (D) => {
-      f.value = D, y("update:model-value", D), u.value = !1;
+    }, B = m(!1), j = (H) => {
+      f.value = H, y("update:model-value", H), u.value = !1;
     };
-    return (D, F) => (v(), X(C(at), {
+    return (H, F) => (v(), X(C(at), {
       class: A(n.hideInputColor ? "w-[40px]" : ""),
       onClick: F[1] || (F[1] = () => {
         var M;
@@ -80,7 +80,7 @@ const Ct = { key: 1 }, It = {
           placement: "auto"
         }, {
           menu: G(() => [
-            B.value ? H("", !0) : (v(), X(C(bl), {
+            B.value ? D("", !0) : (v(), X(C(bl), {
               key: 0,
               variant: n.variant,
               "show-alpha": !n.hideOpacity,
@@ -94,7 +94,7 @@ const Ct = { key: 1 }, It = {
           ]),
           default: G(() => [
             n.hideInputColor ? (v(), R("div", Ct, [
-              Ye(D.$slots, "picker-icon", {}, () => [
+              Ye(H.$slots, "picker-icon", {}, () => [
                 E(C(Q), {
                   class: "cursor-pointer",
                   style: J(`color: ${f.value}`),
@@ -109,10 +109,10 @@ const Ct = { key: 1 }, It = {
               placeholder: "#FFFFFF",
               "onUpdate:modelValue": w
             }, pt({ _: 2 }, [
-              D.$slots.leading ? {
+              H.$slots.leading ? {
                 name: "leading",
                 fn: G(() => [
-                  Ye(D.$slots, "leading")
+                  Ye(H.$slots, "leading")
                 ]),
                 key: "0"
               } : void 0
@@ -124,7 +124,7 @@ const Ct = { key: 1 }, It = {
       _: 3
     }, 8, ["class"]));
   }
-}, Vt = ["id"], Lt = { class: "flex items-center gap-x-3 px-5" }, Tt = { class: "flex items-center gap-x-5 cursor-pointer" }, Bt = { class: "flex flex-col py-2 overflow-hidden" }, Rt = ["onClick"], Et = { class: "flex gap-x-3 items-center px-5" }, Dt = { class: "flex items-center gap-x-3 px-5" }, Ht = { class: "flex gap-x-3 items-center px-5" }, Ut = { class: "flex gap-x-3 items-center px-5" }, Ot = { class: "flex items-center" }, Mt = { class: "grid cursor-pointer px-5" }, At = {
+}, Vt = ["id"], Lt = { class: "flex items-center gap-x-3 px-5" }, Tt = { class: "flex items-center gap-x-5 cursor-pointer" }, Bt = { class: "flex flex-col py-2 overflow-hidden" }, Rt = ["onClick"], Et = { class: "flex gap-x-3 items-center px-5" }, Ht = { class: "flex items-center gap-x-3 px-5" }, Dt = { class: "flex gap-x-3 items-center px-5" }, Ut = { class: "flex gap-x-3 items-center px-5" }, Ot = { class: "flex items-center" }, Mt = { class: "grid cursor-pointer px-5" }, At = {
   key: 5,
   class: "flex gap-x-3 items-center px-5"
 }, Qt = { class: "flex" }, Ft = { class: "mt-1 mx-2 cursor-pointer" }, Bl = {
@@ -215,7 +215,7 @@ const Ct = { key: 1 }, It = {
         k.value.getQuill().insertText(i.index, `
 `, q.sources.USER), k.value.getQuill().insertEmbed(i.index + 1, "divider", !0, q.sources.USER), k.value.getQuill().setSelection(i.index + 2, q.sources.SILENT);
       }
-    }, D = m(
+    }, H = m(
       Math.random().toString(36).replace(/[^a-zA-Z]+/g, "")
     ), F = m(!1), M = m(!1), _ = m(!1), z = m(!1), Y = m(!1), T = m(!1), N = m(!1), ae = m(""), ee = m(""), ne = m(""), k = m(), ie = m(!1), se = m(r.image), ke = (p) => {
       F.value = k.value.getQuill().history.stack.undo.length > 0, M.value = k.value.getQuill().history.stack.redo.length > 0, _.value = k.value.getQuill().getFormat().bold, z.value = k.value.getQuill().getFormat().italic, Y.value = k.value.getQuill().getFormat().underline, N.value = k.value.getQuill().getFormat().blockquote, ee.value = k.value.getQuill().getFormat().list, ne.value = k.value.getQuill().getFormat().align;
@@ -251,7 +251,7 @@ const Ct = { key: 1 }, It = {
         const i = p.files[0], V = new FileReader();
         V.onload = () => le(V.result), V.readAsDataURL(i);
       }, p.click();
-    }, De = (p) => /^data:image\/(png|jpg|jpeg|gif);base64,/.test(p), P = (p) => {
+    }, He = (p) => /^data:image\/(png|jpg|jpeg|gif);base64,/.test(p), P = (p) => {
       setTimeout(() => {
         var V;
         if (p) {
@@ -261,13 +261,13 @@ const Ct = { key: 1 }, It = {
           if (he && he.length > 0)
             for (let Ie = 0; Ie < he.length; Ie++) {
               const Ue = (V = he[Ie]) == null ? void 0 : V.getAttribute("src");
-              De(Ue) && y("update:image", Ue);
+              He(Ue) && y("update:image", Ue);
             }
         }
       }, 100);
       const { items: i } = p.clipboardData;
       i.length && i[0].getAsString((V) => {
-        De(V) && (k.value.getQuill().getSelection() || k.value.getQuill().setSelection(k.value.getQuill().getLength() - 1));
+        He(V) && (k.value.getQuill().getSelection() || k.value.getQuill().setSelection(k.value.getQuill().getLength() - 1));
       });
     }, K = () => {
       k.value.getQuill().theme.tooltip.edit("video");
@@ -293,7 +293,7 @@ const Ct = { key: 1 }, It = {
         let de = "float:left";
         p == "center" ? de = "" : p == "right" && (de = "float:right"), (Z = i == null ? void 0 : i.querySelector("img")) == null || Z.setAttribute("style", `margin:auto;display:block;${de}`);
       }
-    }, He = () => {
+    }, De = () => {
       var i;
       const p = (i = window.getSelection()) == null ? void 0 : i.focusNode;
       ue.value = p.innerHTML && p.innerHTML.includes("<img");
@@ -310,16 +310,16 @@ const Ct = { key: 1 }, It = {
       default: G(() => [
         h("div", {
           class: A(["grid", { "has-error": n.errorMessage }]),
-          onClick: He
+          onClick: De
         }, [
-          D.value ? (v(), X(C(yt), {
+          H.value ? (v(), X(C(yt), {
             key: 0,
-            id: `#${D.value}`,
+            id: `#${H.value}`,
             ref_key: "quill",
             ref: k,
             content: n.modelValue,
             options: {
-              bounds: `#${D.value}`
+              bounds: `#${H.value}`
             },
             theme: "snow",
             "content-type": "html",
@@ -330,7 +330,7 @@ const Ct = { key: 1 }, It = {
           }, {
             toolbar: G(() => [
               h("div", {
-                id: D.value,
+                id: H.value,
                 class: "flex min-h-[36px] flex-wrap !py-2 !px-3 gap-y-2 rounded-t"
               }, [
                 f.value.includes("changes") ? (v(), R(ce, { key: 0 }, [
@@ -351,7 +351,7 @@ const Ct = { key: 1 }, It = {
                     }, null, 8, ["class"])
                   ]),
                   i[12] || (i[12] = h("div", { class: "border-l border-oc-gray-200" }, null, -1))
-                ], 64)) : H("", !0),
+                ], 64)) : D("", !0),
                 f.value.includes("font-size") ? (v(), R(ce, { key: 1 }, [
                   E(C(nt), {
                     modelValue: T.value,
@@ -384,7 +384,7 @@ const Ct = { key: 1 }, It = {
                     _: 1
                   }, 8, ["modelValue"]),
                   i[13] || (i[13] = h("div", { class: "border-l border-oc-gray-200" }, null, -1))
-                ], 64)) : H("", !0),
+                ], 64)) : D("", !0),
                 f.value.includes("font-style") ? (v(), R(ce, { key: 2 }, [
                   h("div", Et, [
                     E(C(Q), {
@@ -410,8 +410,8 @@ const Ct = { key: 1 }, It = {
                     }, null, 8, ["class"])
                   ]),
                   i[14] || (i[14] = h("div", { class: "border-l border-oc-gray-200" }, null, -1))
-                ], 64)) : H("", !0),
-                h("div", Dt, [
+                ], 64)) : D("", !0),
+                h("div", Ht, [
                   f.value.includes("link") ? (v(), X(C(Q), {
                     key: 0,
                     class: "cursor-pointer",
@@ -419,7 +419,7 @@ const Ct = { key: 1 }, It = {
                     height: "20",
                     name: "text-editor/link",
                     onClick: ge
-                  })) : H("", !0),
+                  })) : D("", !0),
                   f.value.includes("image") ? (v(), X(C(Q), {
                     key: 1,
                     class: "cursor-pointer",
@@ -427,7 +427,7 @@ const Ct = { key: 1 }, It = {
                     height: "20",
                     name: "text-editor/image",
                     onClick: Ee
-                  })) : H("", !0),
+                  })) : D("", !0),
                   f.value.includes("quote") ? (v(), X(C(Q), {
                     key: 2,
                     class: A(["cursor-pointer", N.value ? "text-oc-text" : "text-oc-text-300"]),
@@ -435,7 +435,7 @@ const Ct = { key: 1 }, It = {
                     height: "20",
                     name: "text-editor/quote",
                     onClick: Ne
-                  }, null, 8, ["class"])) : H("", !0),
+                  }, null, 8, ["class"])) : D("", !0),
                   f.value.includes("media") ? (v(), X(C(Q), {
                     key: 3,
                     class: "cursor-pointer",
@@ -443,11 +443,11 @@ const Ct = { key: 1 }, It = {
                     height: "20",
                     name: "text-editor/media",
                     onClick: K
-                  })) : H("", !0)
+                  })) : D("", !0)
                 ]),
                 f.value.includes("list") ? (v(), R(ce, { key: 3 }, [
                   i[15] || (i[15] = h("div", { class: "border-l border-oc-gray-200" }, null, -1)),
-                  h("div", Ht, [
+                  h("div", Dt, [
                     E(C(Q), {
                       class: A(["cursor-pointer", ee.value === "bullet" ? "text-oc-text" : "text-oc-text-300"]),
                       width: "20",
@@ -463,7 +463,7 @@ const Ct = { key: 1 }, It = {
                       onClick: i[2] || (i[2] = (V) => Se("ordered"))
                     }, null, 8, ["class"])
                   ])
-                ], 64)) : H("", !0),
+                ], 64)) : D("", !0),
                 f.value.includes("alignment") ? (v(), R(ce, { key: 4 }, [
                   i[16] || (i[16] = h("div", { class: "border-l border-oc-gray-200" }, null, -1)),
                   h("div", Ut, [
@@ -496,7 +496,7 @@ const Ct = { key: 1 }, It = {
                       onClick: i[6] || (i[6] = (V) => ve("justify"))
                     }, null, 8, ["class"])
                   ])
-                ], 64)) : H("", !0),
+                ], 64)) : D("", !0),
                 i[18] || (i[18] = h("div", { class: "border-l border-oc-gray-200" }, null, -1)),
                 h("div", Ot, [
                   E(C(It), {
@@ -554,7 +554,7 @@ const Ct = { key: 1 }, It = {
                       onClick: i[10] || (i[10] = (V) => fe("right"))
                     })
                   ])
-                ])) : H("", !0),
+                ])) : D("", !0),
                 h("div", Ft, [
                   (v(), R("svg", {
                     width: "20",
@@ -575,7 +575,7 @@ const Ct = { key: 1 }, It = {
               ], 8, Vt)
             ]),
             _: 1
-          }, 8, ["id", "content", "options", "placeholder"])) : H("", !0)
+          }, 8, ["id", "content", "options", "placeholder"])) : D("", !0)
         ], 2)
       ]),
       _: 1
@@ -661,7 +661,7 @@ const Ct = { key: 1 }, It = {
       g: 0,
       b: 0
     }), f = m(), w = m(), c = m(), a = (O, L) => {
-      var j, D, F;
+      var j, H, F;
       let B = 255;
       if (r.inputType == "HSL" && (B = 100, O == "r" && (B = 360)), !isNaN(parseInt(L))) {
         if (O == "r") {
@@ -669,7 +669,7 @@ const Ct = { key: 1 }, It = {
           M <= B && (u.value.r = M, r.inputType == "RGB" ? U("r") : W()), (j = f.value) == null || j.focus();
         } else if (O == "g") {
           let M = parseInt(L);
-          M <= B && (u.value.g = M, r.inputType == "RGB" ? U("g") : W()), (D = w.value) == null || D.focus();
+          M <= B && (u.value.g = M, r.inputType == "RGB" ? U("g") : W()), (H = w.value) == null || H.focus();
         } else if (O == "b") {
           let M = parseInt(L);
           M <= B && (u.value.b = M, r.inputType == "RGB" ? U("b") : W()), (F = c.value) == null || F.focus();
@@ -953,7 +953,7 @@ const Ct = { key: 1 }, It = {
           h("span", null, "°", -1)
         ])),
         _: 1
-      }, 8, ["model-value"])) : H("", !0),
+      }, 8, ["model-value"])) : D("", !0),
       n.gradientType == "radial" && y.value ? (v(), R("div", el, [
         E(C(Ae), {
           label: "Position X",
@@ -985,7 +985,7 @@ const Ct = { key: 1 }, It = {
           ])),
           _: 1
         }, 8, ["model-value"])
-      ])) : H("", !0)
+      ])) : D("", !0)
     ]));
   }
 }, ll = {
@@ -1164,7 +1164,7 @@ const Ct = { key: 1 }, It = {
       angle: 90,
       percentageX: 50,
       percentageY: 50
-    }), j = m(""), D = m(r.inputType), F = m(!1), M = m(), _ = m(), z = m(), Y = m(), T = m(), N = Ke({
+    }), j = m(""), H = m(r.inputType), F = m(!1), M = m(), _ = m(), z = m(), Y = m(), T = m(), N = Ke({
       h: 0,
       s: 0,
       l: 0
@@ -1193,7 +1193,7 @@ const Ct = { key: 1 }, It = {
       }
     }, te = m(0), we = async (t) => {
       const { rgb: e } = Je(te.value, 100, 50);
-      He(e), setTimeout(() => {
+      De(e), setTimeout(() => {
         $e(t), ye();
       }, 0);
     }, Re = () => {
@@ -1224,7 +1224,7 @@ const Ct = { key: 1 }, It = {
         const e = a.value.find((l) => l.select == !0);
         e && (e.a = parseInt(t), i());
       }
-    }, De = (t) => {
+    }, He = (t) => {
       var l, o, s, d;
       const e = (o = (l = u.value) == null ? void 0 : l.querySelector(".gradient-handle-content")) == null ? void 0 : o.getBoundingClientRect();
       return t === 0 ? "0px" : t === 100 && e ? `${(((s = _.value) == null ? void 0 : s.offsetWidth) || 0) - (e.width || 0)}px` : `${(((d = _.value) == null ? void 0 : d.offsetWidth) || 0) * (t / 100) - ((e == null ? void 0 : e.width) || 0) / 2}px`;
@@ -1314,11 +1314,11 @@ const Ct = { key: 1 }, It = {
     }, fe = (t) => {
       if (y.value == "gradient") {
         let e = document.createElement("div");
-        e.id = `clr-gb-${t.id}`, e.classList.add("gradient-handle"), e.style.left = De(t.percent);
+        e.id = `clr-gb-${t.id}`, e.classList.add("gradient-handle"), e.style.left = He(t.percent);
         let l = document.createElement("div");
         l.classList.add("gradient-handle-content"), t.select == !0 && e.classList.add("select"), e.appendChild(l), P && P.appendChild(e);
       }
-    }, He = (t) => {
+    }, De = (t) => {
       const e = z.value.getContext("2d", { willReadFrequently: !0 }), l = z.value.width, o = z.value.height;
       e.fillStyle = `rgb(${t[0]},${t[1]},${t[2]})`, e.fillRect(0, 0, l, o);
       let s = e.createLinearGradient(0, 0, l - 12, 0);
@@ -1402,7 +1402,7 @@ const Ct = { key: 1 }, It = {
           } else {
             te.value = S;
             const { rgb: x } = Je(S, 100, 50);
-            He(x);
+            De(x);
             const g = ge();
             g && (T.value.style.left = `${g.x}px`, T.value.style.top = `${g.y}px`);
           }
@@ -1434,12 +1434,12 @@ const Ct = { key: 1 }, It = {
         const t = Ge(j.value);
         if (t) {
           const e = Me(t.r, t.g, t.b), l = a.value.find((o) => o.select == !0);
-          l && (l.r = t.r, l.g = t.g, l.b = t.b, l.hue = e, ue(t.r, t.g, t.b, l.hue, !0), i(), p(), Oe(D.value));
+          l && (l.r = t.r, l.g = t.g, l.b = t.b, l.hue = e, ue(t.r, t.g, t.b, l.hue, !0), i(), p(), Oe(H.value));
         }
       }
     }, ye = () => {
       const t = a.value.find((e) => e.select == !0);
-      t && (j.value = _e(t.r, t.g, t.b).toUpperCase()), Oe(D.value);
+      t && (j.value = _e(t.r, t.g, t.b).toUpperCase()), Oe(H.value);
     }, ze = (t) => {
       f("last-used-pick", t);
     };
@@ -1539,7 +1539,7 @@ const Ct = { key: 1 }, It = {
             break;
           }
         }
-        D.value = t;
+        H.value = t;
       }
     }, Xe = (t) => {
       t && it(t), Ce();
@@ -1566,7 +1566,7 @@ const Ct = { key: 1 }, It = {
     };
     return je(() => {
       var t;
-      y.value = r.modelValue.includes("linear") || r.modelValue.includes("radial") ? "gradient" : "solid", y.value == "gradient" && (P = (t = u.value) == null ? void 0 : t.querySelector(".gradient-bar")), Xe(r.modelValue), Oe(D.value), gt(() => {
+      y.value = r.modelValue.includes("linear") || r.modelValue.includes("radial") ? "gradient" : "solid", y.value == "gradient" && (P = (t = u.value) == null ? void 0 : t.querySelector(".gradient-bar")), Xe(r.modelValue), Oe(H.value), gt(() => {
         F.value = !0;
       });
     }), (t, e) => (v(), R("div", {
@@ -1585,7 +1585,7 @@ const Ct = { key: 1 }, It = {
           gradientType: L.value,
           onOnChangeMode: st
         }, null, 8, ["variant", "mode", "model-value", "iconClasses", "gradientType"])
-      ])) : H("", !0),
+      ])) : D("", !0),
       y.value == "gradient" && n.variant == "gradient" ? (v(), R("div", rl, [
         E(zt, {
           gradientType: L.value,
@@ -1600,7 +1600,7 @@ const Ct = { key: 1 }, It = {
           "onUpdate:angle": e[1] || (e[1] = (l) => B.angle = l),
           percentageX: B.percentageX,
           "onUpdate:percentageX": e[2] || (e[2] = (l) => B.percentageX = l),
-          inputType: D.value,
+          inputType: H.value,
           mode: y.value,
           gradientType: L.value,
           onOnInput: i
@@ -1616,7 +1616,7 @@ const Ct = { key: 1 }, It = {
               onClick: (o) => ze(l)
             }, null, 12, pl))), 128))
           ])
-        ])) : H("", !0)
+        ])) : D("", !0)
       ])),
       E(ll, { onOnMouseDown: ke }),
       h("div", gl, [
@@ -1644,42 +1644,42 @@ const Ct = { key: 1 }, It = {
           }, [
             h("path", { d: "M21.35 1.825l-6.344 6.35-0.588-0.588c-0.781-0.781-2.050-0.781-2.831 0s-0.781 2.050 0 2.831l10 10c0.781 0.781 2.050 0.781 2.831 0s0.781-2.050 0-2.831l-0.587-0.587 6.344-6.35c2.438-2.438 2.438-6.388 0-8.819s-6.387-2.438-8.819 0zM3.462 20.206c-0.938 0.938-1.462 2.212-1.462 3.538v2.65l-1.663 2.494c-0.531 0.794-0.425 1.85 0.25 2.525s1.731 0.781 2.525 0.25l2.494-1.663h2.65c1.325 0 2.6-0.525 3.537-1.462l7.544-7.544-2.831-2.831-7.544 7.544c-0.188 0.188-0.444 0.294-0.706 0.294h-2.256v-2.256c0-0.262 0.106-0.519 0.294-0.706l7.544-7.544-2.831-2.831-7.544 7.544z" })
           ], -1)
-        ]))) : H("", !0)
+        ]))) : D("", !0)
       ]),
       n.showAlpha ? (v(), X(jt, {
         key: 3,
         modelValue: le.value,
         "onUpdate:modelValue": e[5] || (e[5] = (l) => le.value = l),
         onOnInput: e[6] || (e[6] = (l) => Ee(l.target.value))
-      }, null, 8, ["modelValue"])) : H("", !0),
+      }, null, 8, ["modelValue"])) : D("", !0),
       vt(h("div", vl, null, 512), [
         [mt, !1]
       ]),
       h("div", ml, [
         E(qt, {
-          "model-value": D.value,
+          "model-value": H.value,
           "onUpdate:modelValue": Oe
         }, null, 8, ["model-value"]),
         F.value && n.showInputSet ? (v(), R("div", fl, [
-          D.value == "HEX" ? (v(), X(Nt, {
+          H.value == "HEX" ? (v(), X(Nt, {
             key: 0,
             modelValue: j.value,
             "onUpdate:modelValue": [
               e[7] || (e[7] = (l) => j.value = l),
               ot
             ]
-          }, null, 8, ["modelValue"])) : H("", !0),
-          D.value == "RGB" ? (v(), X(tt, {
+          }, null, 8, ["modelValue"])) : D("", !0),
+          H.value == "RGB" ? (v(), X(tt, {
             key: 1,
             "rgb-value": a.value.find((l) => l.select == !0),
             onUpdateRgbValue: Ie
-          }, null, 8, ["rgb-value"])) : H("", !0),
-          D.value == "HSL" ? (v(), X(tt, {
+          }, null, 8, ["rgb-value"])) : D("", !0),
+          H.value == "HSL" ? (v(), X(tt, {
             key: 2,
             "input-type": "HSL",
             "hsl-value": N,
             onUpdateHslValue: Ue
-          }, null, 8, ["hsl-value"])) : H("", !0),
+          }, null, 8, ["hsl-value"])) : D("", !0),
           n.showAlpha ? (v(), X(Xt, {
             key: 3,
             modelValue: le.value,
@@ -1687,8 +1687,8 @@ const Ct = { key: 1 }, It = {
               e[8] || (e[8] = (l) => le.value = l),
               e[9] || (e[9] = (l) => Ee(l))
             ]
-          }, null, 8, ["modelValue"])) : H("", !0)
-        ])) : H("", !0)
+          }, null, 8, ["modelValue"])) : D("", !0)
+        ])) : D("", !0)
       ]),
       e[12] || (e[12] = h("div", { class: "text-oc-text-400 text-sm my-3 font-medium font-inter" }, "Last used", -1)),
       U.value.length > 0 && n.showColorList ? (v(), R("div", hl, [
@@ -1698,7 +1698,7 @@ const Ct = { key: 1 }, It = {
           style: J(`background:${l}`),
           onClick: (o) => ze(l)
         }, null, 12, yl))), 128))
-      ])) : H("", !0)
+      ])) : D("", !0)
     ], 10, il));
   }
 }, xl = { class: "flex flex-col pt-10 px-7 gap-y-7 items-center" }, kl = { class: "flex flex-col gap-y-4 text-center items-center" }, $l = {
@@ -1764,9 +1764,9 @@ const Ct = { key: 1 }, It = {
         "tooltip-value-formatter": () => null
       }, null, 8, ["additional-options"]),
       h("div", kl, [
-        n.title ? (v(), R("span", $l, Qe(n.title), 1)) : H("", !0),
+        n.title ? (v(), R("span", $l, Qe(n.title), 1)) : D("", !0),
         Ye(y.$slots, "description", {}, () => [
-          n.description ? (v(), R("span", wl, Qe(n.description), 1)) : H("", !0)
+          n.description ? (v(), R("span", wl, Qe(n.description), 1)) : D("", !0)
         ])
       ])
     ]));