@orchidui/dashboard 1.8.1-8 → 1.8.1-81

package/dist/index.js

@@ -1,1843 +1,32 @@
-var pt = Object.defineProperty;
-var gt = (n, V, r) => V in n ? pt(n, V, { enumerable: !0, configurable: !0, writable: !0, value: r }) : n[V] = r;
-var We = (n, V, r) => gt(n, typeof V != "symbol" ? V + "" : V, r);
-import { ref as v, computed as ke, openBlock as m, createBlock as X, unref as w, normalizeClass as A, withCtx as W, createVNode as T, createCommentVNode as D, createSlots as vt, renderSlot as ze, createElementBlock as E, normalizeStyle as te, onMounted as Je, createElementVNode as h, Fragment as ge, renderList as Ke, toDisplayString as Fe, createTextVNode as ve, watch as we, withKeys as ot, inject as Re, reactive as _e, provide as Be, nextTick as mt, withDirectives as ft, vShow as ht, defineComponent as bt, defineAsyncComponent as it } from "vue";
-import { Q as Y, a as yt } from "./QuillEditor-BHWfmp5D.js";
-import { BaseInput as st, Dropdown as rt, Input as $e, Icon as Q, Modal as xt, Select as Ze, Slider as Qe } from "@orchidui/core";
-import { hslToRgb as et, hsl2Hex as tt, rgb2Hex as lt, rgbaToHex8 as kt, hexToRgb as je, rgbToHue as Ae, rgbToHsl as at, hex8ToRgba as $t, parseRgba as wt, parseRgb as St } from "./Dashboard/ColorPicker/components/converters.js";
-import { PieChart as Ct } from "./Dashboard/Charts/PieChart/OcPieChart.js";
-import { LineChart as Ol } from "./Dashboard/Charts/LineChart/OcLineChart.js";
-import { BarChart as Ql } from "./Dashboard/Charts/BarChart/OcBarChart.js";
-import { BarRaceChart as Nl } from "./Dashboard/Charts/BarRaceChart/OcBarRaceChart.js";
-import { _ as Xl } from "./OcCard-w0EuBfr4.js";
-const It = { key: 1 }, Vt = {
-  __name: "OcColorPicker",
-  props: {
-    modelValue: {
-      type: String,
-      default: ""
-    },
-    variant: {
-      type: String,
-      default: "solid"
-    },
-    hideOpacity: Boolean,
-    hideInputColor: Boolean,
-    presetColors: {
-      type: Array
-    }
-  },
-  emits: ["update:model-value"],
-  setup(n, { emit: V }) {
-    const r = n, b = V, u = v(!1), f = v(r.modelValue), C = (M) => {
-      M && (f.value = M, b("update:model-value", M));
-    }, c = ke(() => r.variant === "gradient" ? {
-      class: "w-[20px] h-[20px] hide-svg-icon",
-      style: {
-        background: f.value
-      }
-    } : {
-      style: {
-        color: f.value
-      }
-    }), a = v(), H = v([]), Z = () => {
-      H.value.length > 8 && (H.value = H.value.filter((M, F) => F < 8)), localStorage.setItem("ck-cp-local-color-list", JSON.stringify(H.value));
-    };
-    let O = localStorage.getItem("ck-cp-local-color-list");
-    O && (H.value = [...new Set(JSON.parse(O))], Z());
-    const L = (M) => {
-      if (!M && f.value)
-        if (H.value.find((U) => U === f.value))
-          H.value = [
-            f.value,
-            ...H.value.filter((U) => U !== f.value)
-          ], Z();
-        else {
-          H.value.length >= 9 && H.value.pop();
-          let U = f.value;
-          H.value.unshift(U), Z();
-        }
-    }, B = v(!1), j = (M) => {
-      f.value = M, b("update:model-value", M), u.value = !1;
-    };
-    return (M, F) => (m(), X(w(st), {
-      class: A(n.hideInputColor ? "w-[40px]" : ""),
-      onClick: F[1] || (F[1] = () => {
-        var U;
-        return (U = a.value) == null ? void 0 : U.toggleDropdown();
-      })
-    }, {
-      default: W(() => [
-        T(w(rt), {
-          ref_key: "dropdownRef",
-          ref: a,
-          modelValue: u.value,
-          "onUpdate:modelValue": [
-            F[0] || (F[0] = (U) => u.value = U),
-            L
-          ],
-          "max-menu-height": 800,
-          placement: "auto"
-        }, {
-          menu: W(() => [
-            B.value ? D("", !0) : (m(), X(w(xl), {
-              key: 0,
-              variant: n.variant,
-              "show-alpha": !n.hideOpacity,
-              type: n.hideOpacity ? "HEX" : "HEX8",
-              "model-value": n.modelValue,
-              "last-used-colors": H.value,
-              "preset-colors": n.presetColors,
-              "onUpdate:modelValue": C,
-              onLastUsedPick: j
-            }, null, 8, ["variant", "show-alpha", "type", "model-value", "last-used-colors", "preset-colors"]))
-          ]),
-          default: W(() => [
-            n.hideInputColor ? (m(), E("div", It, [
-              ze(M.$slots, "picker-icon", {}, () => [
-                T(w(Q), {
-                  class: "cursor-pointer",
-                  style: te(`color: ${f.value}`),
-                  name: "drop"
-                }, null, 8, ["style"])
-              ])
-            ])) : (m(), X(w($e), {
-              key: 0,
-              "model-value": f.value,
-              icon: "drop",
-              "icon-props": c.value,
-              placeholder: "#FFFFFF",
-              "onUpdate:modelValue": C
-            }, vt({ _: 2 }, [
-              M.$slots.leading ? {
-                name: "leading",
-                fn: W(() => [
-                  ze(M.$slots, "leading")
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1032, ["model-value", "icon-props"]))
-          ]),
-          _: 3
-        }, 8, ["modelValue"])
-      ]),
-      _: 3
-    }, 8, ["class"]));
-  }
-}, Lt = ["id"], Tt = { class: "flex items-center gap-x-3 px-5" }, Bt = { class: "flex items-center gap-x-5 cursor-pointer" }, Rt = { class: "flex flex-col py-2 overflow-hidden" }, Et = ["onClick"], Mt = { class: "flex gap-x-3 items-center px-5" }, Ut = { class: "flex items-center gap-x-3 px-5" }, Dt = { class: "flex gap-x-3 items-center px-5" }, Ht = { class: "flex gap-x-3 items-center px-5" }, Ot = { class: "flex items-center" }, At = { class: "grid cursor-pointer px-5" }, Qt = {
-  key: 5,
-  class: "flex gap-x-3 items-center px-5"
-}, Ft = { class: "flex" }, Nt = { class: "mt-1 mx-2 cursor-pointer" }, Rl = {
-  __name: "OcTextEditor",
-  props: {
-    /**
-     * The font sizes of the editor.
-     */
-    fontSizes: { type: Array, required: !0 },
-    /**
-     * The initial font size of the editor. (if empty the first item of `fontSizes` will be used, needs to be a value of `fontSizes`)
-     */
-    initialFontSize: { type: String },
-    modelValue: String,
-    image: String,
-    errorMessage: {
-      type: String,
-      default: ""
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    hint: {
-      type: String,
-      default: ""
-    },
-    isRequired: {
-      type: Boolean,
-      default: !1
-    },
-    labelIcon: {
-      type: String,
-      default: ""
-    },
-    tooltipText: {
-      type: String,
-      default: ""
-    },
-    tooltipOptions: {
-      type: Object,
-      default: () => ({})
-    },
-    variant: {
-      type: String,
-      validator: (n) => ["default", "text-only"].includes(n),
-      default: "default"
-    },
-    placeholder: {
-      type: String,
-      default: ""
-    }
-  },
-  emits: ["update:modelValue", "update:image"],
-  setup(n, { emit: V }) {
-    const r = n, b = V, u = {
-      default: [
-        "changes",
-        "font-size",
-        "font-style",
-        "link",
-        "image",
-        "quote",
-        "media",
-        "list",
-        "alignment"
-      ],
-      "text-only": ["changes", "font-size", "font-style", "link", "quote", "list", "alignment"]
-    }, f = ke(() => u[r.variant]), C = Y.import("attributors/style/size");
-    C.whitelist = r.fontSizes.map((p) => p.value), Y.register(C, !0);
-    const c = Y.import("attributors/style/align");
-    Y.register(c, !0);
-    const a = Y.import("attributors/style/background");
-    Y.register(a, !0);
-    const H = Y.import("attributors/style/color");
-    Y.register(H, !0);
-    const Z = Y.import("attributors/style/direction");
-    Y.register(Z, !0);
-    const O = Y.import("attributors/style/font");
-    Y.register(O, !0);
-    const L = Y.import("blots/block/embed");
-    class B extends L {
-    }
-    We(B, "blotName", "divider"), We(B, "tagName", "hr"), Y.register(B);
-    const j = v(
-      Math.random().toString(36).replace(/[^a-zA-Z]+/g, "")
-    ), M = v(!1), F = v(!1), U = v(!1), le = v(!1), J = v(!1), z = v(!1), R = v(!1), N = v(""), ae = v(""), ee = v(""), x = v(), Se = v(!1), ue = v(r.image), ie = (p) => {
-      M.value = x.value.getQuill().history.stack.undo.length > 0, F.value = x.value.getQuill().history.stack.redo.length > 0, U.value = x.value.getQuill().getFormat().bold, le.value = x.value.getQuill().getFormat().italic, J.value = x.value.getQuill().getFormat().underline, R.value = x.value.getQuill().getFormat().blockquote, ae.value = x.value.getQuill().getFormat().list, ee.value = x.value.getQuill().getFormat().align;
-      let o = document.createElement("div");
-      o.innerHTML = p, Se.value && (o.innerText ? b("update:modelValue", p || "") : b("update:modelValue", ""), o.remove());
-    }, Ne = () => {
-      if (x.value.getQuill().getSelection(!0)) {
-        const o = x.value.getQuill().getSelection(!0);
-        x.value.getQuill().insertText(o.index, `
-`, Y.sources.USER), x.value.getQuill().insertEmbed(o.index + 1, "divider", !0, Y.sources.USER), x.value.getQuill().setSelection(o.index + 2, Y.sources.SILENT);
-      }
-    }, Ee = () => {
-      x.value.getQuill().history.undo(), ie(r.modelValue);
-    }, Me = () => {
-      x.value.getQuill().history.redo(), ie(r.modelValue);
-    }, Ce = () => {
-      var p;
-      x.value.getQuill().format("bold", !U.value), (p = x.value.getQuill().getSelection()) != null && p.length || (U.value = !U.value);
-    }, ne = () => {
-      var p;
-      x.value.getQuill().format("italic", !le.value), (p = x.value.getQuill().getSelection()) != null && p.length || (le.value = !le.value);
-    }, Ie = () => {
-      var p;
-      x.value.getQuill().format("underline", !J.value), (p = x.value.getQuill().getSelection()) != null && p.length || (J.value = !J.value);
-    }, Ue = (p) => {
-      x.value.getQuill().format("size", p), N.value = p, z.value = !1;
-    }, me = () => {
-      const p = x.value.getQuill().getSelection();
-      p && p.length > 0 && x.value.getQuill().theme.tooltip.edit();
-    }, Pe = () => {
-      x.value.getQuill().format("blockquote", !R.value);
-    }, oe = (p) => {
-      const o = x.value.getQuill().getSelection();
-      o && (x.value.getQuill().clipboard.dangerouslyPasteHTML(o.index, `<img src="${p}" />`), ue.value = p, b("update:image", ue.value));
-    }, De = () => {
-      x.value.getQuill().getSelection() || x.value.getQuill().setSelection(x.value.getQuill().getLength() - 1);
-      const p = document.createElement("input");
-      p.type = "file", p.accept = "jpg,.jpeg,.png,.webp,.gif", p.onchange = () => {
-        const o = p.files[0], y = new FileReader();
-        y.onload = () => oe(y.result), y.readAsDataURL(o);
-      }, p.click();
-    }, He = (p) => /^data:image\/(png|jpg|jpeg|gif);base64,/.test(p), P = (p) => {
-      setTimeout(() => {
-        var y;
-        if (p) {
-          const G = x.value.getHTML(), se = document.createElement("div");
-          se.innerHTML = G;
-          let ye = se.getElementsByTagName("img");
-          if (ye && ye.length > 0)
-            for (let pe = 0; pe < ye.length; pe++) {
-              const xe = (y = ye[pe]) == null ? void 0 : y.getAttribute("src");
-              He(xe) && b("update:image", xe);
-            }
-        }
-      }, 100);
-      const { items: o } = p.clipboardData;
-      o.length && o[0].getAsString((y) => {
-        He(y) && (x.value.getQuill().getSelection() || x.value.getQuill().setSelection(x.value.getQuill().getLength() - 1));
-      });
-    }, _ = () => {
-      x.value.getQuill().theme.tooltip.edit("video");
-    }, Ve = (p) => {
-      x.value.getQuill().format("list", p), ae.value = p;
-    }, fe = (p = void 0) => {
-      x.value.getQuill().format("align", p), ee.value = p;
-    }, de = v(""), Xe = () => {
-      x.value.getQuill().format("color", de.value);
-    };
-    Je(() => {
-      Ue(r.initialFontSize || r.fontSizes[0].value), Se.value = !0;
-    });
-    const he = v(100), ce = v(!1), Le = (p) => {
-      var y, G;
-      he.value = p;
-      const o = (y = window.getSelection()) == null ? void 0 : y.focusNode;
-      o && o.nodeName !== "#text" && (x.value.getQuill().format("width", `${he.value}%`), (G = o == null ? void 0 : o.querySelector("img")) == null || G.setAttribute("style", "margin:auto;display:block;"));
-    }, be = (p = "left") => {
-      var y, G;
-      const o = (y = window.getSelection()) == null ? void 0 : y.focusNode;
-      if (o && o.nodeName !== "#text") {
-        let se = "float:left";
-        p == "center" ? se = "" : p == "right" && (se = "float:right"), (G = o == null ? void 0 : o.querySelector("img")) == null || G.setAttribute("style", `margin:auto;display:block;${se}`);
-      }
-    }, Oe = () => {
-      var o;
-      const p = (o = window.getSelection()) == null ? void 0 : o.focusNode;
-      ce.value = p.innerHTML && p.innerHTML.includes("<img");
-    }, K = v(!1), q = v(3), Te = v(3), qe = ke(() => {
-      let p = [];
-      for (let o = 1; o < 30; o++)
-        p.push({
-          label: o.toString(),
-          value: o.toString()
-        });
-      return p;
-    }), Ge = ke(() => {
-      let p = [];
-      for (let o = 1; o < 12; o++)
-        p.push({
-          label: o.toString(),
-          value: o.toString()
-        });
-      return p;
-    }), Ye = () => {
-      x.value.getQuill().getModule("better-table").insertTable(parseInt(q.value), parseInt(Te.value)), K.value = !1;
-    };
-    return (p, o) => (m(), X(w(st), {
-      label: n.label,
-      hint: n.hint,
-      "error-message": n.errorMessage,
-      "is-required": n.isRequired,
-      "label-icon": n.labelIcon,
-      "tooltip-text": n.tooltipText,
-      "tooltip-options": n.tooltipOptions
-    }, {
-      default: W(() => [
-        T(w(xt), {
-          title: "Insert table",
-          modelValue: K.value,
-          "onUpdate:modelValue": o[2] || (o[2] = (y) => K.value = y),
-          class: "!w-full !h-full",
-          confirmButtonProps: {
-            label: "Save",
-            onClick: () => Ye()
-          }
-        }, {
-          default: W(() => [
-            T(w(Ze), {
-              modelValue: Te.value,
-              "onUpdate:modelValue": o[0] || (o[0] = (y) => Te.value = y),
-              options: Ge.value,
-              label: "Table cell",
-              class: "mb-3"
-            }, null, 8, ["modelValue", "options"]),
-            T(w(Ze), {
-              modelValue: q.value,
-              "onUpdate:modelValue": o[1] || (o[1] = (y) => q.value = y),
-              options: qe.value,
-              label: "Table rows"
-            }, null, 8, ["modelValue", "options"])
-          ]),
-          _: 1
-        }, 8, ["modelValue", "confirmButtonProps"]),
-        h("div", {
-          class: A(["grid", { "has-error": n.errorMessage }]),
-          onClick: Oe
-        }, [
-          j.value ? (m(), X(w(yt), {
-            key: 0,
-            id: `#${j.value}`,
-            ref_key: "quill",
-            ref: x,
-            content: n.modelValue,
-            options: {
-              bounds: `#${j.value}`
-            },
-            theme: "snow",
-            "content-type": "html",
-            class: "min-h-[200px]",
-            placeholder: n.placeholder,
-            "onUpdate:content": ie,
-            onPaste: P
-          }, {
-            toolbar: W(() => [
-              h("div", {
-                id: j.value,
-                class: "flex min-h-[36px] flex-wrap !py-2 !px-3 gap-y-2 rounded-t"
-              }, [
-                f.value.includes("changes") ? (m(), E(ge, { key: 0 }, [
-                  h("div", Tt, [
-                    T(w(Q), {
-                      class: A(M.value ? "text-oc-text cursor-pointer" : "text-oc-text-300"),
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/undo",
-                      onClick: Ee
-                    }, null, 8, ["class"]),
-                    T(w(Q), {
-                      class: A(F.value ? "text-oc-text cursor-pointer" : "text-oc-text-300"),
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/redo",
-                      onClick: Me
-                    }, null, 8, ["class"])
-                  ]),
-                  o[16] || (o[16] = h("div", { class: "border-l border-oc-gray-200" }, null, -1))
-                ], 64)) : D("", !0),
-                f.value.includes("font-size") ? (m(), E(ge, { key: 1 }, [
-                  T(w(rt), {
-                    modelValue: z.value,
-                    "onUpdate:modelValue": o[3] || (o[3] = (y) => z.value = y),
-                    class: "px-5"
-                  }, {
-                    menu: W(() => [
-                      h("div", Rt, [
-                        (m(!0), E(ge, null, Ke(n.fontSizes, (y) => (m(), E("div", {
-                          key: y.value,
-                          class: A(["min-w-[120px] cursor-pointer py-2 px-3 hover:bg-oc-gray-50", N.value === y.value ? "font-medium" : ""]),
-                          onClick: (G) => Ue(y.value)
-                        }, Fe(y.label), 11, Et))), 128))
-                      ])
-                    ]),
-                    default: W(() => {
-                      var y;
-                      return [
-                        h("div", Bt, [
-                          ve(Fe((y = n.fontSizes.find((G) => G.value === N.value)) == null ? void 0 : y.label) + " ", 1),
-                          T(w(Q), {
-                            width: "20",
-                            height: "20",
-                            name: "chevron-down",
-                            class: A(["transition-all", z.value ? "rotate-180" : ""])
-                          }, null, 8, ["class"])
-                        ])
-                      ];
-                    }),
-                    _: 1
-                  }, 8, ["modelValue"]),
-                  o[17] || (o[17] = h("div", { class: "border-l border-oc-gray-200" }, null, -1))
-                ], 64)) : D("", !0),
-                f.value.includes("font-style") ? (m(), E(ge, { key: 2 }, [
-                  h("div", Mt, [
-                    T(w(Q), {
-                      class: A(["cursor-pointer", U.value ? "text-oc-text" : "text-oc-text-300"]),
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/bold",
-                      onClick: Ce
-                    }, null, 8, ["class"]),
-                    T(w(Q), {
-                      class: A(["cursor-pointer", le.value ? "text-oc-text" : "text-oc-text-300"]),
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/italic",
-                      onClick: ne
-                    }, null, 8, ["class"]),
-                    T(w(Q), {
-                      class: A(["cursor-pointer", J.value ? "text-oc-text" : "text-oc-text-300"]),
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/underline",
-                      onClick: Ie
-                    }, null, 8, ["class"])
-                  ]),
-                  o[18] || (o[18] = h("div", { class: "border-l border-oc-gray-200" }, null, -1))
-                ], 64)) : D("", !0),
-                h("div", Ut, [
-                  f.value.includes("link") ? (m(), X(w(Q), {
-                    key: 0,
-                    class: "cursor-pointer",
-                    width: "20",
-                    height: "20",
-                    name: "text-editor/link",
-                    onClick: me
-                  })) : D("", !0),
-                  f.value.includes("image") ? (m(), X(w(Q), {
-                    key: 1,
-                    class: "cursor-pointer",
-                    width: "20",
-                    height: "20",
-                    name: "text-editor/image",
-                    onClick: De
-                  })) : D("", !0),
-                  f.value.includes("quote") ? (m(), X(w(Q), {
-                    key: 2,
-                    class: A(["cursor-pointer", R.value ? "text-oc-text" : "text-oc-text-300"]),
-                    width: "20",
-                    height: "20",
-                    name: "text-editor/quote",
-                    onClick: Pe
-                  }, null, 8, ["class"])) : D("", !0),
-                  f.value.includes("media") ? (m(), X(w(Q), {
-                    key: 3,
-                    class: "cursor-pointer",
-                    width: "20",
-                    height: "20",
-                    name: "text-editor/media",
-                    onClick: _
-                  })) : D("", !0),
-                  T(w(Q), {
-                    class: "cursor-pointer",
-                    width: "20",
-                    height: "20",
-                    name: "table",
-                    onClick: o[4] || (o[4] = (y) => K.value = !K.value)
-                  })
-                ]),
-                f.value.includes("list") ? (m(), E(ge, { key: 3 }, [
-                  o[19] || (o[19] = h("div", { class: "border-l border-oc-gray-200" }, null, -1)),
-                  h("div", Dt, [
-                    T(w(Q), {
-                      class: A(["cursor-pointer", ae.value === "bullet" ? "text-oc-text" : "text-oc-text-300"]),
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/bullet",
-                      onClick: o[5] || (o[5] = (y) => Ve("bullet"))
-                    }, null, 8, ["class"]),
-                    T(w(Q), {
-                      class: A(["cursor-pointer", ae.value === "ordered" ? "text-oc-text" : "text-oc-text-300"]),
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/number",
-                      onClick: o[6] || (o[6] = (y) => Ve("ordered"))
-                    }, null, 8, ["class"])
-                  ])
-                ], 64)) : D("", !0),
-                f.value.includes("alignment") ? (m(), E(ge, { key: 4 }, [
-                  o[20] || (o[20] = h("div", { class: "border-l border-oc-gray-200" }, null, -1)),
-                  h("div", Ht, [
-                    T(w(Q), {
-                      class: A(["cursor-pointer", ee.value ? "text-oc-text-300" : "text-oc-text"]),
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/left",
-                      onClick: o[7] || (o[7] = (y) => fe())
-                    }, null, 8, ["class"]),
-                    T(w(Q), {
-                      class: A(["cursor-pointer", ee.value === "center" ? "text-oc-text" : "text-oc-text-300"]),
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/center",
-                      onClick: o[8] || (o[8] = (y) => fe("center"))
-                    }, null, 8, ["class"]),
-                    T(w(Q), {
-                      class: A(["cursor-pointer", ee.value === "right" ? "text-oc-text" : "text-oc-text-300"]),
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/right",
-                      onClick: o[9] || (o[9] = (y) => fe("right"))
-                    }, null, 8, ["class"]),
-                    T(w(Q), {
-                      class: A(["cursor-pointer", ee.value === "justify" ? "text-oc-text" : "text-oc-text-300"]),
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/justify",
-                      onClick: o[10] || (o[10] = (y) => fe("justify"))
-                    }, null, 8, ["class"])
-                  ])
-                ], 64)) : D("", !0),
-                o[22] || (o[22] = h("div", { class: "border-l border-oc-gray-200" }, null, -1)),
-                h("div", Ot, [
-                  T(w(Vt), {
-                    modelValue: de.value,
-                    "onUpdate:modelValue": [
-                      o[11] || (o[11] = (y) => de.value = y),
-                      Xe
-                    ],
-                    "hide-input-color": ""
-                  }, {
-                    "picker-icon": W(() => [
-                      h("div", At, [
-                        h("div", {
-                          style: te(`color:${de.value}`)
-                        }, "A", 4),
-                        h("div", {
-                          class: "h-[5px] w-full rounded border",
-                          style: te(`background:${de.value}`)
-                        }, null, 4)
-                      ])
-                    ]),
-                    _: 1
-                  }, 8, ["modelValue"])
-                ]),
-                o[23] || (o[23] = h("div", { class: "border-l border-oc-gray-200" }, null, -1)),
-                ce.value ? (m(), E("div", Qt, [
-                  T(w(Qe), {
-                    label: "Image width",
-                    class: "w-[120px]",
-                    "model-value": he.value,
-                    "min-limit": 0,
-                    "max-limit": 100,
-                    "onUpdate:modelValue": Le
-                  }, null, 8, ["model-value"]),
-                  h("div", Ft, [
-                    T(w(Q), {
-                      class: "cursor-pointer",
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/left",
-                      onClick: o[12] || (o[12] = (y) => be())
-                    }),
-                    T(w(Q), {
-                      class: "cursor-pointer",
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/center",
-                      onClick: o[13] || (o[13] = (y) => be("center"))
-                    }),
-                    T(w(Q), {
-                      class: "cursor-pointer",
-                      width: "20",
-                      height: "20",
-                      name: "text-editor/right",
-                      onClick: o[14] || (o[14] = (y) => be("right"))
-                    })
-                  ])
-                ])) : D("", !0),
-                h("div", Nt, [
-                  (m(), E("svg", {
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 15 15",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    onClick: o[15] || (o[15] = (y) => Ne())
-                  }, o[21] || (o[21] = [
-                    h("path", {
-                      "fill-rule": "evenodd",
-                      "clip-rule": "evenodd",
-                      d: "M2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5Z",
-                      fill: "#000000"
-                    }, null, -1)
-                  ])))
-                ])
-              ], 8, Lt)
-            ]),
-            _: 1
-          }, 8, ["id", "content", "options", "placeholder"])) : D("", !0)
-        ], 2)
-      ]),
-      _: 1
-    }, 8, ["label", "hint", "error-message", "is-required", "label-icon", "tooltip-text", "tooltip-options"]));
-  }
-}, Pt = {
-  __name: "InputHex",
-  props: {
-    modelValue: {
-      type: String
-    }
-  },
-  emits: {
-    "update:modelValue": []
-  },
-  setup(n, { emit: V }) {
-    const r = n, b = V, u = v(""), f = (c) => {
-      u.value = c, u.value = `#${c.replace(/#/g, "")}`;
-    }, C = () => {
-      let c = u.value;
-      if (c === r.modelValue) return;
-      if (!/^#[0-9a-fA-F]+$/.test(c)) {
-        u.value = r.modelValue;
-        return;
-      }
-      let a = c.replace(/#/g, "");
-      switch (a.length) {
-        case 0:
-          a = r.modelValue.replace("#", "");
-          break;
-        case 1:
-        case 2:
-          a = a.repeat(3);
-          break;
-        case 4:
-        case 5:
-          a = a.slice(0, 3);
-          break;
-        case 3:
-        case 6:
-          break;
-        default:
-          a = a.slice(0, 6);
-      }
-      u.value = `#${a.toUpperCase()}`, b("update:modelValue", u.value);
-    };
-    return we(
-      () => r.modelValue,
-      (c, a) => {
-        c !== a && (u.value = c);
-      },
-      { immediate: !0 }
-    ), (c, a) => (m(), X(w($e), {
-      class: "w-[158px]",
-      placeholder: "#FFFFFF",
-      "model-value": u.value,
-      "onUpdate:modelValue": f,
-      onBlur: C,
-      onKeyup: ot(C, ["enter"])
-    }, null, 8, ["model-value"]));
-  }
-}, Xt = { class: "grid grid-cols-3 gap-3" }, nt = {
-  __name: "InputRgbHsl",
-  props: {
-    inputType: {
-      default: "RGB",
-      type: String
-    },
-    rgbValue: {
-      type: Object
-    },
-    hslValue: {
-      type: Object
-    }
-  },
-  emits: {
-    "update-rgb-value": [],
-    "update-hsl-value": []
-  },
-  setup(n, { emit: V }) {
-    const r = n, b = V, u = v({
-      r: 0,
-      g: 0,
-      b: 0
-    }), f = v(), C = v(), c = v(), a = (O, L) => {
-      var j, M, F;
-      let B = 255;
-      if (r.inputType == "HSL" && (B = 100, O == "r" && (B = 360)), !isNaN(parseInt(L))) {
-        if (O == "r") {
-          let U = parseInt(L);
-          U <= B && (u.value.r = U, r.inputType == "RGB" ? H("r") : Z()), (j = f.value) == null || j.focus();
-        } else if (O == "g") {
-          let U = parseInt(L);
-          U <= B && (u.value.g = U, r.inputType == "RGB" ? H("g") : Z()), (M = C.value) == null || M.focus();
-        } else if (O == "b") {
-          let U = parseInt(L);
-          U <= B && (u.value.b = U, r.inputType == "RGB" ? H("b") : Z()), (F = c.value) == null || F.focus();
-        }
-      }
-    }, H = (O) => {
-      b("update-rgb-value", {
-        type: O,
-        value: {
-          r: parseInt(u.value.r),
-          g: parseInt(u.value.g),
-          b: parseInt(u.value.b)
-        }
-      });
-    }, Z = () => {
-      b("update-hsl-value", {
-        h: parseInt(u.value.r),
-        s: parseInt(u.value.g),
-        l: parseInt(u.value.b)
-      });
-    };
-    return r.inputType === "RGB" ? we(
-      () => r.rgbValue,
-      (O, L) => {
-        O !== L && (u.value = O);
-      },
-      { immediate: !0, deep: !0 }
-    ) : we(
-      () => r.hslValue,
-      (O) => {
-        u.value = {
-          r: O.h,
-          g: O.s,
-          b: O.l
-        };
-      },
-      { immediate: !0, deep: !0 }
-    ), (O, L) => (m(), E("div", Xt, [
-      T(w($e), {
-        ref_key: "rInputEl",
-        ref: f,
-        "model-value": u.value.r,
-        placeholder: "100",
-        "onUpdate:modelValue": L[0] || (L[0] = (B) => a("r", B))
-      }, null, 8, ["model-value"]),
-      T(w($e), {
-        ref_key: "gInputEl",
-        ref: C,
-        "model-value": u.value.g,
-        placeholder: "100",
-        "onUpdate:modelValue": L[1] || (L[1] = (B) => a("g", B))
-      }, null, 8, ["model-value"]),
-      T(w($e), {
-        ref_key: "bInputEl",
-        ref: c,
-        "model-value": u.value.b,
-        placeholder: "100",
-        "onUpdate:modelValue": L[2] || (L[2] = (B) => a("b", B))
-      }, null, 8, ["model-value"])
-    ]));
-  }
-}, qt = {
-  __name: "InputOpacity",
-  props: {
-    modelValue: {
-      type: Number
-    }
-  },
-  emits: {
-    "update:modelValue": []
-  },
-  setup(n, { emit: V }) {
-    const r = n, b = V, u = v(""), f = (c) => {
-      u.value = c;
-    }, C = () => {
-      let c = parseInt(u.value);
-      c && c <= 100 ? b("update:modelValue", c) : u.value = r.modelValue;
-    };
-    return we(
-      () => r.modelValue,
-      (c, a) => {
-        c !== a && (u.value = c);
-      },
-      { immediate: !0 }
-    ), (c, a) => (m(), X(w($e), {
-      class: "w-[75px]",
-      placeholder: "100",
-      "model-value": u.value,
-      "onUpdate:modelValue": f,
-      onBlur: C,
-      onKeyup: ot(C, ["enter"])
-    }, {
-      leading: W(() => a[0] || (a[0] = [
-        ve("%")
-      ])),
-      _: 1
-    }, 8, ["model-value"]));
-  }
-}, Gt = {
-  __name: "SelectColorFormat",
-  props: {
-    modelValue: { default: "RGB", type: String }
-  },
-  emits: ["update:model-value"],
-  setup(n, { emit: V }) {
-    const b = v(n.modelValue), u = V, f = (C) => {
-      b.value = C, u("update:model-value", C);
-    };
-    return (C, c) => (m(), X(w(Ze), {
-      class: "!w-[80px]",
-      "model-value": b.value,
-      options: [
-        {
-          label: "HEX",
-          value: "HEX"
-        },
-        {
-          label: "RGB",
-          value: "RGB"
-        },
-        {
-          label: "HSL",
-          value: "HSL"
-        }
-      ],
-      "onUpdate:modelValue": f
-    }, null, 8, ["model-value"]));
-  }
-}, Yt = { class: "opacity-bar" }, Wt = { class: "picker-opacity-slider opacity-bar-background" }, jt = ["value"], zt = {
-  __name: "SliderOpacity",
-  props: {
-    modelValue: { default: 0, type: Number }
-  },
-  emits: ["update:modelValue", "onInput"],
-  setup(n, { emit: V }) {
-    const r = Re("opacitySlider"), b = V, u = (f) => {
-      b("update:modelValue", parseInt(f.target.value)), b("onInput", f);
-    };
-    return (f, C) => (m(), E("div", Yt, [
-      h("div", Wt, [
-        h("input", {
-          ref_key: "opacitySlider",
-          ref: r,
-          value: n.modelValue,
-          class: "opacity__slider",
-          type: "range",
-          min: "0",
-          max: "100",
-          onInput: u
-        }, null, 40, jt)
-      ])
-    ]));
-  }
-}, Kt = {
-  __name: "SliderGradient",
-  props: {
-    gradientType: String
-  },
-  emits: ["onAddColor", "onMouseDown", "onDeleteColor"],
-  setup(n, { emit: V }) {
-    const r = Re("gradientBar"), b = v(), u = V, f = (L) => {
-      L.preventDefault();
-    }, C = v("left:0"), c = v(!1), a = (L) => {
-      u("onMouseDown", L);
-    }, H = () => {
-      let L = b.value.querySelector(".select");
-      C.value = L == null ? void 0 : L.getAttribute("style");
-    }, Z = () => {
-      var B;
-      H(), (((B = b.value.querySelectorAll(".gradient-handle")) == null ? void 0 : B.length) ?? 2) > 2 ? c.value = !0 : c.value = !1;
-    }, O = (L) => {
-      c.value = !1, u("onAddColor", L);
-    };
-    return (L, B) => (m(), E("div", {
-      ref_key: "gradientSlider",
-      ref: b,
-      class: "relative h-[40px]",
-      onClick: Z
-    }, [
-      h("button", {
-        type: "button",
-        class: A(["absolute top-[-18px] text-oc-accent-3 rounded-[4px] border-2 border-oc-gray-200 p-2 bg-oc-bg-light", c.value ? "" : "!hidden"]),
-        style: te(C.value),
-        onClick: B[0] || (B[0] = (j) => L.$emit("onDeleteColor"))
-      }, [
-        T(w(Q), {
-          name: "bin",
-          width: "14",
-          height: "14"
-        })
-      ], 6),
-      h("div", {
-        class: A(["gradient-bar", {
-          "mt-[20px]": n.gradientType === "linear",
-          "mt-[12px]": n.gradientType === "radial"
-        }]),
-        onMousedown: a,
-        onDragstart: f
-      }, [
-        h("div", {
-          ref_key: "gradientBar",
-          ref: r,
-          class: "gradient-container",
-          onDblclick: O
-        }, null, 544)
-      ], 34)
-    ], 512));
-  }
-}, Zt = { class: "picker-hue" }, Jt = ["value"], _t = {
-  __name: "SliderHue",
-  props: {
-    modelValue: { default: 0, type: Number }
-  },
-  emits: ["update:modelValue", "onInput", "onChange"],
-  setup(n, { emit: V }) {
-    const r = V, b = (u) => {
-      r("update:modelValue", parseFloat(u.target.value)), r("onInput", u);
-    };
-    return (u, f) => (m(), E("div", Zt, [
-      h("input", {
-        value: n.modelValue,
-        class: "picker-hue-range-slider",
-        type: "range",
-        min: "0",
-        max: "360",
-        step: "0.1",
-        onInput: b,
-        onChange: f[0] || (f[0] = (C) => u.$emit("onChange", C))
-      }, null, 40, Jt)
-    ]));
-  }
-}, el = { class: "px-2 mt-2" }, tl = {
-  key: 1,
-  class: "grid grid-cols-2 gap-4 px-1"
-}, ll = {
-  __name: "GradientSettings",
-  props: {
-    mode: {
-      default: "gradient",
-      type: String
-    },
-    gradientType: { default: "linear", type: String },
-    angle: { default: 90, type: Number },
-    percentageX: { default: 50, type: Number },
-    percentageY: { default: 50, type: Number }
-  },
-  emits: ["update:angle", "update:percentageX", "update:percentageY", "onInput"],
-  setup(n, { emit: V }) {
-    const r = v(!1), b = v(!1);
-    Je(() => {
-      r.value = !0, b.value = !0;
-    });
-    const u = V, f = (C, c) => {
-      let a = parseInt(C);
-      switch (c) {
-        case "angle":
-          C > 360 ? a = 360 : C < 0 && (a = 0), u("update:angle", a), u("onInput");
-          break;
-        case "percentageX":
-          C > 100 ? a = 100 : C < 0 && (a = 0), u("update:percentageX", a), u("onInput");
-          break;
-        case "percentageY":
-          C > 100 ? a = 100 : C < 0 && (a = 0), u("update:percentageY", a), u("onInput");
-          break;
-      }
-    };
-    return (C, c) => (m(), E("div", el, [
-      n.gradientType == "linear" && r.value ? (m(), X(w(Qe), {
-        key: 0,
-        label: "Angle",
-        "model-value": n.angle,
-        "min-limit": 0,
-        "max-limit": 360,
-        "onUpdate:modelValue": c[0] || (c[0] = (a) => f(a, "angle"))
-      }, {
-        "min-limit-label": W(() => c[3] || (c[3] = [
-          ve("0 ")
-        ])),
-        "max-limit-label": W(() => c[4] || (c[4] = [
-          ve("360"),
-          h("span", null, "°", -1)
-        ])),
-        _: 1
-      }, 8, ["model-value"])) : D("", !0),
-      n.gradientType == "radial" && b.value ? (m(), E("div", tl, [
-        T(w(Qe), {
-          label: "Position X",
-          "model-value": n.percentageX,
-          "min-limit": 0,
-          "max-limit": 100,
-          "onUpdate:modelValue": c[1] || (c[1] = (a) => f(a, "percentageX"))
-        }, {
-          "min-limit-label": W(() => c[5] || (c[5] = [
-            ve("0")
-          ])),
-          "max-limit-label": W(() => c[6] || (c[6] = [
-            ve("100%")
-          ])),
-          _: 1
-        }, 8, ["model-value"]),
-        T(w(Qe), {
-          label: "Position Y",
-          "model-value": n.percentageY,
-          "min-limit": 0,
-          "max-limit": 100,
-          "onUpdate:modelValue": c[2] || (c[2] = (a) => f(a, "percentageY"))
-        }, {
-          "min-limit-label": W(() => c[7] || (c[7] = [
-            ve("0")
-          ])),
-          "max-limit-label": W(() => c[8] || (c[8] = [
-            ve("100%")
-          ])),
-          _: 1
-        }, 8, ["model-value"])
-      ])) : D("", !0)
-    ]));
-  }
-}, al = {
-  __name: "PickerWrap",
-  emits: ["onMouseDown"],
-  setup(n) {
-    const V = Re("canvas"), r = Re("pickerWrap"), b = Re("pickerPointer"), u = (f) => {
-      f.preventDefault();
-    };
-    return (f, C) => (m(), E("div", {
-      ref_key: "pickerWrap",
-      ref: r,
-      class: "cp-picker-wrap",
-      onMousedown: C[0] || (C[0] = (c) => f.$emit("onMouseDown", c)),
-      onDragstart: u
-    }, [
-      h("canvas", {
-        ref_key: "canvas",
-        ref: V,
-        class: "colour-area"
-      }, null, 512),
-      C[1] || (C[1] = h("div", { class: "colour-area-mask" }, null, -1)),
-      h("div", {
-        ref_key: "pickerPointer",
-        ref: b,
-        class: "colour-area-point-circle"
-      }, null, 512)
-    ], 544));
-  }
-}, nl = { class: "w-full flex justify-center" }, ol = {
-  key: 1,
-  width: "28",
-  height: "28",
-  viewBox: "0 0 28 28",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, il = {
-  __name: "ColorType",
-  props: {
-    variant: String,
-    mode: {
-      default: "gradient",
-      type: String
-    },
-    gradientType: { default: "linear", type: String },
-    iconClasses: {
-      default: () => ({
-        linear: "",
-        radial: ""
-      }),
-      type: Object
-    },
-    modelValue: String
-  },
-  emits: ["onChangeMode"],
-  setup(n) {
-    return (V, r) => (m(), E("div", nl, [
-      h("button", {
-        type: "button",
-        class: A(n.mode == "solid" ? "active" : ""),
-        style: { padding: "7px" },
-        onClick: r[0] || (r[0] = (b) => V.$emit("onChangeMode", "solid"))
-      }, [
-        n.modelValue && n.mode == "solid" ? (m(), E("div", {
-          key: 0,
-          class: "w-[28px] h-[28px] rounded-full border",
-          style: te(`background:${n.modelValue}`)
-        }, null, 4)) : (m(), E("svg", ol, r[3] || (r[3] = [
-          h("g", { opacity: "0.5" }, [
-            h("path", {
-              d: "M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z",
-              fill: "#03102F"
-            })
-          ], -1)
-        ])))
-      ], 2),
-      h("button", {
-        type: "button",
-        class: A(n.gradientType == "linear" && n.mode != "solid" ? "active" : ""),
-        style: te(`${n.iconClasses.linear ? "" : "padding: 7px;"}`),
-        onClick: r[1] || (r[1] = (b) => V.$emit("onChangeMode", "linear"))
-      }, [
-        h("div", {
-          class: "w-[28px] h-[28px] rounded-full border",
-          style: te(
-            n.modelValue && n.gradientType == "linear" && n.mode != "solid" ? `background:${n.modelValue}` : `
-          background: linear-gradient(
-            180deg,
-            #03102f 0%,
-            rgba(3, 16, 47, 0) 100%
-          );
-        `
-          )
-        }, null, 4)
-      ], 6),
-      h("button", {
-        type: "button",
-        class: A(n.gradientType == "radial" && n.mode != "solid" ? "active" : ""),
-        style: te(`${n.iconClasses.radial ? "" : "padding: 6px;"}`),
-        onClick: r[2] || (r[2] = (b) => V.$emit("onChangeMode", "radial"))
-      }, [
-        h("div", {
-          class: "w-[28px] h-[28px] rounded-full border",
-          style: te(
-            n.modelValue && n.gradientType == "radial" && n.mode != "solid" ? `background:${n.modelValue}` : "background: radial-gradient(circle at 50% 50%, rgb(255, 255, 255) 0%, rgb(3, 16, 47) 100%);"
-          )
-        }, null, 4)
-      ], 6)
-    ]));
-  }
-}, sl = ["cp-theme"], rl = {
-  key: 0,
-  class: "flex justify-end border-b h-[46px] relative mt-[-5px] mb-5"
-}, ul = {
-  key: 1,
-  class: "grid items-center mb-5"
-}, dl = { key: 2 }, cl = { key: 0 }, pl = { class: "ck-cp-local-color-conatiner" }, gl = ["onClick"], vl = { class: "flex items-center gap-2" }, ml = { id: "ck-cp-target-background" }, fl = { class: "flex gap-3" }, hl = {
-  key: 0,
-  class: "w-full flex gap-3"
-}, bl = {
-  key: 4,
-  class: "ck-cp-local-color-conatiner"
-}, yl = ["onClick"], xl = {
-  __name: "OcColorPickerPopup",
-  props: {
-    modelValue: {
-      default: "",
-      type: String
-    },
-    type: { default: "HEX8", type: String },
-    inputType: { default: "HEX", type: String },
-    theme: { default: "light", type: String },
-    showColorList: { default: !0, type: Boolean },
-    showEyeDrop: { default: !0, type: Boolean },
-    showAlpha: { default: !0, type: Boolean },
-    showInputMenu: { default: !0, type: Boolean },
-    showInputSet: { default: !0, type: Boolean },
-    disabled: { default: !1, type: Boolean },
-    iconClasses: {
-      default: () => ({
-        linear: "",
-        radial: "",
-        ruler: "",
-        eyeDroper: "",
-        inputMenu: "",
-        save: "",
-        delete: ""
-      }),
-      type: Object
-    },
-    presetColors: Array,
-    variant: {
-      type: String,
-      default: "solid"
-    },
-    lastUsedColors: Array
-  },
-  emits: ["update:modelValue", "last-used-pick"],
-  setup(n, { emit: V }) {
-    const r = n, b = v(r.variant == "gradient" ? "gradient" : "solid"), u = v(null), f = V, C = v(r.modelValue), c = (t) => {
-      C.value = t, F.value && f("update:modelValue", t);
-    }, a = v([
-      { id: 1, r: 68, g: 71, b: 119, a: 100, percent: 0, hue: 0, select: !0 },
-      { id: 2, r: 0, g: 0, b: 255, a: 100, percent: 100, hue: 0, select: !1 }
-    ]), H = v(r.lastUsedColors);
-    we(
-      () => r.lastUsedColors,
-      () => {
-        H.value = r.lastUsedColors;
-      },
-      {
-        deep: !0
-      }
-    );
-    const Z = ke(() => r.variant !== "gradient" ? H.value.filter((t) => !t.includes("linear") && !t.includes("radial")) : H.value), O = v(!1), L = v("linear"), B = _e({
-      angle: 90,
-      percentageX: 50,
-      percentageY: 50
-    }), j = v(""), M = v(r.inputType), F = v(!1), U = v(), le = v(), J = v(), z = v(), R = v(), N = _e({
-      h: 0,
-      s: 0,
-      l: 0
-    });
-    Be("gradientBar", le), Be("canvas", J), Be("pickerWrap", z), Be("pickerPointer", R), Be("opacitySlider", U);
-    let ae = 0, ee = 0, x = 0, Se = 0, ue = 0, ie = 0;
-    const Ne = (t) => {
-      !z.value || !R.value || (ue = z.value.offsetHeight - R.value.offsetHeight, ie = z.value.offsetWidth - R.value.offsetWidth, x = t.clientX - t.target.getBoundingClientRect().left, Se = t.clientY - t.target.getBoundingClientRect().top, ae = x - R.value.offsetWidth / 2, ee = Se - R.value.offsetHeight / 2, R.value.style.left = `${ae}px`, R.value.style.top = `${ee}px`, Ce(!1), G(), window.addEventListener("mousemove", Ee), window.addEventListener("mouseup", Me));
-    }, Ee = (t) => {
-      t.preventDefault();
-      const e = z.value.getBoundingClientRect(), l = t.clientX - e.left - R.value.offsetWidth / 2, i = t.clientY - e.top - R.value.offsetHeight / 2;
-      l >= 0 && l <= ie ? (ae = l, R.value.style.left = `${l}px`) : 0 > l ? (ae = 0, R.value.style.left = "0px") : l > ie && (ae = ie, R.value.style.left = `${ie}px`), i >= 0 && i <= ue ? (ee = i, R.value.style.top = `${i}px`) : 0 > i ? (ee = 0, R.value.style.top = "0px") : i > ue && (ee = ue, R.value.style.top = `${ue}px`), Ce(!1), G();
-    }, Me = () => {
-      window.removeEventListener("mousemove", Ee), window.removeEventListener("mouseup", Me);
-    }, Ce = (t) => {
-      if (!t) {
-        let e = Ue();
-        const l = et(ne.value, e.s, e.l);
-        if (l) {
-          if (F.value) {
-            let i = a.value.find((s) => s.select == !0);
-            i && (i.r = l.r, i.g = l.g, i.b = l.b);
-          }
-          K(), q();
-        }
-      }
-    }, ne = v(0), Ie = async (t) => {
-      const { rgb: e } = tt(ne.value, 100, 50);
-      Oe(e), setTimeout(() => {
-        Ce(t), G();
-      }, 0);
-    }, Ue = () => {
-      let t = { s: 0, l: 0 }, e = z.value.offsetWidth - R.value.offsetWidth, l = z.value.offsetHeight - R.value.offsetHeight, i = parseInt(R.value.style.left), d = 1 - parseInt(R.value.style.top) / l, k = i / e;
-      return t.l = d / 2 * (2 - k), t.s = d * k / (1 - Math.abs(2 * t.l - 1)), Number.isNaN(t.s) && (t.s = t.l), t.l = t.l > 1 ? 1 : t.l, t.s = t.s > 1 ? 1 : t.s, t;
-    }, me = () => {
-      const t = a.value.find((e) => e.select == !0);
-      if (t) {
-        const { l: e, s: l } = at(t.r, t.g, t.b);
-        let i = e, s = l;
-        Number.isNaN(s) && (s = i);
-        let d = { x: 0, y: 0 }, k = z.value.offsetWidth - R.value.offsetWidth, I = z.value.offsetHeight - R.value.offsetHeight;
-        const [$, g] = 2 * i - 1 < 0 ? [
-          k * 2 * s / (1 + s),
-          I * (1 - i * (1 + s))
-        ] : [
-          -k * 2 * (i - 1) * s / (i + s - i * s),
-          I * (i - 1) * (s - 1)
-        ];
-        return d.x = $, d.y = g, d;
-      } else
-        return null;
-    }, Pe = () => {
-      const t = a.value.find((e) => e.select == !0);
-      t && (t.hue = ne.value);
-    }, oe = v(100), De = (t) => {
-      if (r.showAlpha) {
-        const e = a.value.find((l) => l.select == !0);
-        e && (e.a = parseInt(t), q());
-      }
-    }, He = (t) => {
-      var l, i, s, d;
-      const e = (i = (l = u.value) == null ? void 0 : l.querySelector(".gradient-handle-content")) == null ? void 0 : i.getBoundingClientRect();
-      return t === 0 ? "0px" : t === 100 && e ? `${(((s = le.value) == null ? void 0 : s.offsetWidth) || 0) - (e.width || 0)}px` : `${(((d = le.value) == null ? void 0 : d.offsetWidth) || 0) * (t / 100) - ((e == null ? void 0 : e.width) || 0) / 2}px`;
-    };
-    let P = null, _ = null;
-    const Ve = (t) => {
-      var i, s;
-      const l = t.target.offsetParent;
-      if ((i = l == null ? void 0 : l.id) != null && i.includes("clr-gb-")) {
-        const d = l.id.replace("clr-gb-", "");
-        _ = l;
-        const k = a.value.find((I) => I.select == !0);
-        if (k && k.id != d) {
-          const I = (s = u.value) == null ? void 0 : s.querySelector(".gradient-handle.select");
-          I == null || I.classList.remove("select"), l.classList.add("select");
-          const $ = a.value.findIndex((g) => g.select == !0);
-          for (let g = 0; g < a.value.length; g++) {
-            const S = a.value[g];
-            if (S.id == d) {
-              $ != -1 && (a.value[$].select = !1), a.value[g].select = !0, oe.value = S.a, ce(S.r, S.g, S.b, S.hue, !0), K(), G();
-              break;
-            }
-          }
-        }
-        window.addEventListener("mousemove", de), window.addEventListener("mouseup", fe);
-      }
-    }, fe = () => {
-      window.removeEventListener("mousemove", de), window.removeEventListener("mouseup", Ve);
-    }, de = (t) => {
-      var d, k;
-      t.preventDefault();
-      const e = (k = (d = u.value) == null ? void 0 : d.querySelector(".gradient-handle-content")) == null ? void 0 : k.getBoundingClientRect(), l = P == null ? void 0 : P.getBoundingClientRect(), i = l.width - (e == null ? void 0 : e.width);
-      let s = t.clientX - (l.left || 0) - ((e == null ? void 0 : e.width) || 0) / 2;
-      if (s < 0 ? s = 0 : s > i && (s = i), _) {
-        _.style.left = `${s}px`;
-        const I = parseFloat((s / ((l == null ? void 0 : l.width) - (e == null ? void 0 : e.width)) * 100).toFixed(0)), $ = a.value.find(
-          (g) => g.id == (_ == null ? void 0 : _.id.replace("clr-gb-", ""))
-        );
-        $ && ($.percent = I), q();
-      }
-    }, Xe = (t) => {
-      var I, $;
-      const e = P == null ? void 0 : P.getBoundingClientRect(), l = Math.round((t.clientX - ((e == null ? void 0 : e.left) || 0)) / ((e == null ? void 0 : e.width) || 1) * 100), i = a.value.findIndex((g) => g.select == !0), s = a.value[i], d = {
-        id: Date.now(),
-        r: s.r,
-        g: s.g,
-        b: s.b,
-        a: s.a,
-        percent: l,
-        hue: s.hue,
-        select: !0
-      };
-      a.value[i].select = !1;
-      const k = (I = u.value) == null ? void 0 : I.querySelector(".gradient-handle.select");
-      k == null || k.classList.remove("select"), a.value = [...a.value, d], be(d), _ = ($ = u.value) == null ? void 0 : $.querySelector(`#clr-gb-${d.id}`), q();
-    }, he = (t) => {
-      if (t.r == 0 && t.g == 0 && t.b == 0)
-        return !0;
-      if (t.r == 255 && t.g == 255 && t.b == 255)
-        return !0;
-      {
-        const e = J.value.getContext("2d", { willReadFrequently: !0 }), l = J.value.width, i = J.value.height, s = e.getImageData(0, 0, l, i).data, d = t.r, k = t.g, I = t.b;
-        for (let $ = 0; $ < i; $++)
-          for (let g = 0; g < l; g++) {
-            const S = ($ * l + g) * 4, re = s[S], dt = s[S + 1], ct = s[S + 2];
-            if (re === d && dt === k && ct === I)
-              return !0;
-          }
-        return !1;
-      }
-    }, ce = (t, e, l, i, s) => {
-      setTimeout(() => {
-        if (he({ r: t, g: e, b: l })) {
-          let d = me();
-          d && (R.value.style.left = `${d.x}px`, R.value.style.top = `${d.y}px`);
-        } else {
-          let d = me();
-          d && (R.value.style.left = `${d.x}px`, R.value.style.top = `${d.y}px`), ne.value = i, Ie(s);
-        }
-      }, 0);
-    }, Le = () => {
-      a.value.forEach((l) => be(l)), Te();
-      const t = a.value[0];
-      ne.value = t.hue, Ie(!0);
-      let e = me();
-      e && (R.value.style.left = `${e.x}px`, R.value.style.top = `${e.y}px`), K(), q();
-    }, be = (t) => {
-      if (b.value == "gradient") {
-        let e = document.createElement("div");
-        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);
-      }
-    }, Oe = (t) => {
-      const e = J.value.getContext("2d", { willReadFrequently: !0 }), l = J.value.width, i = J.value.height;
-      e.fillStyle = `rgb(${t[0]},${t[1]},${t[2]})`, e.fillRect(0, 0, l, i);
-      let s = e.createLinearGradient(0, 0, l - 12, 0);
-      s.addColorStop(0, "rgb(255,255,255)"), s.addColorStop(1, "rgba(255,255,255,0)"), e.fillStyle = s, e.fillRect(0, 0, l, i);
-      let d = e.createLinearGradient(0, 0, 0, i);
-      d.addColorStop(0, "rgba(0,0,0,0)"), d.addColorStop(1, "rgb(0,0,0)"), e.fillStyle = d, e.fillRect(0, 0, l, i);
-    }, K = () => {
-      if (r.showAlpha) {
-        let t = a.value.find((e) => e.select == !0);
-        t && (U.value.style.background = ` linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(${t.r}, ${t.g}, ${t.b}, 100) 97%)`);
-      }
-    }, q = () => {
-      var t;
-      if (b.value == "gradient") {
-        a.value.sort((s, d) => s.percent - d.percent);
-        let e = "linear-gradient(90deg, ", l;
-        if (L.value == "linear") {
-          l = `linear-gradient(${B.angle}deg, `;
-          for (let s = 0; s < a.value.length; s++) {
-            const { r: d, g: k, b: I, a: $, percent: g } = a.value[s];
-            a.value.length - 1 == s ? (e = e + `rgba(${d},${k},${I},${$ / 100}) ${g}%)`, l = l + `rgba(${d},${k},${I},${$ / 100}) ${g}%)`) : (e = e + `rgba(${d},${k},${I},${$ / 100}) ${g}%, `, l = l + `rgba(${d},${k},${I},${$ / 100}) ${g}%, `);
-          }
-        } else {
-          l = `radial-gradient(circle at ${B.percentageX}% ${B.percentageY}%, `;
-          for (let s = 0; s < a.value.length; s++) {
-            const { r: d, g: k, b: I, a: $, percent: g } = a.value[s];
-            a.value.length - 1 == s ? (e = e + `rgba(${d},${k},${I},${$ / 100}) ${g}%)`, l = l + `rgba(${d},${k},${I},${$ / 100}) ${g}%)`) : (e = e + `rgba(${d},${k},${I},${$ / 100}) ${g}%, `, l = l + `rgba(${d},${k},${I},${$ / 100}) ${g}%, `);
-          }
-        }
-        le.value.style.backgroundImage = e;
-        let i = (t = u.value) == null ? void 0 : t.querySelector("#ck-cp-target-background");
-        i && (i.style.backgroundImage = l, F.value && c(i.style.backgroundImage));
-      } else {
-        const { r: e, g: l, b: i, a: s } = a.value[0];
-        let d = "";
-        switch (r.type) {
-          case "HEX8":
-            d = kt(e, l, i, s / 100);
-            break;
-          case "RGBA":
-            d = `rgba(${e},${l},${i},${s / 100})`;
-            break;
-          case "RGB":
-            d = `rgb(${e},${l},${i})`;
-            break;
-          case "HEX":
-            d = lt(e, l, i);
-            break;
-        }
-        c(d);
-      }
-    }, Te = () => {
-      a.value.forEach((t) => {
-        t.hue = Ae(t.r, t.g, t.b);
-      });
-    }, qe = (t) => {
-      L.value = t, q();
-    }, Ge = () => {
-      var t, e;
-      if (a.value.length > 2) {
-        const l = a.value.findIndex((i) => i.select == !0);
-        if (l !== -1) {
-          const i = a.value[l].id;
-          a.value.splice(l, 1);
-          const s = (t = u.value) == null ? void 0 : t.querySelector(`#clr-gb-${i}`);
-          s == null || s.remove();
-          const d = a.value[0];
-          d && (d.select = !0, _ = (e = u.value) == null ? void 0 : e.querySelector(`#clr-gb-${d.id}`), _ == null || _.classList.add("select"), ce(d.r, d.g, d.b, d.hue, !1), G(), q());
-        }
-      }
-    }, Ye = () => {
-      var l;
-      const t = (l = u.value) == null ? void 0 : l.querySelector("#cp-btn-eyedropper");
-      t == null || t.classList.add("active"), new EyeDropper().open().then((i) => {
-        const { sRGBHex: s } = i, d = a.value.find((I) => I.select == !0), k = je(s);
-        if (k) {
-          const I = Ae(k.r, k.g, k.b);
-          if (d && (d.hue = I, d.r = k.r, d.g = k.g, d.b = k.b), he(k)) {
-            const $ = me();
-            $ && (R.value.style.left = `${$.x}px`, R.value.style.top = `${$.y}px`);
-          } else {
-            ne.value = I;
-            const { rgb: $ } = tt(I, 100, 50);
-            Oe($);
-            const g = me();
-            g && (R.value.style.left = `${g.x}px`, R.value.style.top = `${g.y}px`);
-          }
-          G(), K(), q(), t == null || t.classList.remove("active");
-        }
-      }).catch(() => {
-        t == null || t.classList.remove("active");
-      });
-    }, p = (t) => {
-      const { value: e, type: l } = t;
-      if (l != "a") {
-        const i = a.value.find((s) => s.select == !0);
-        if (i) {
-          i.r = parseInt(e.r), i.g = parseInt(e.g), i.b = parseInt(e.b);
-          const s = Ae(i.r, i.g, i.b);
-          i.hue = s, ce(i.r, i.g, i.b, i.hue, !0), q(), K();
-        }
-      } else
-        oe.value = e, q(), K();
-    }, o = (t) => {
-      N.h = t.h, N.s = t.s, N.l = t.l;
-      const e = a.value.find((l) => l.select == !0);
-      if (e && !Number.isNaN(N.h) && !Number.isNaN(N.s) && !Number.isNaN(N.l)) {
-        const { r: l, g: i, b: s } = et(N.h, N.s / 100, N.l / 100);
-        e.hue = N.h, e.r = l, e.g = i, e.b = s, ce(e.r, e.g, e.b, e.hue, !0), q(), K();
-      }
-    }, y = () => {
-      if (j.value) {
-        const t = je(j.value);
-        if (t) {
-          const e = Ae(t.r, t.g, t.b), l = a.value.find((i) => i.select == !0);
-          l && (l.r = t.r, l.g = t.g, l.b = t.b, l.hue = e, ce(t.r, t.g, t.b, l.hue, !0), q(), K(), pe(M.value));
-        }
-      }
-    }, G = () => {
-      const t = a.value.find((e) => e.select == !0);
-      t && (j.value = lt(t.r, t.g, t.b).toUpperCase()), pe(M.value);
-    }, se = (t) => {
-      f("last-used-pick", t);
-    };
-    window.EyeDropper && (O.value = !0);
-    const ye = (t = "") => {
-      if (b.value == "gradient") {
-        let e = t.includes("linear") ? "linear" : "radial", l = [];
-        if (L.value = e, e == "linear") {
-          let i = /^linear-gradient\((.*)\)$/, s = t.replace(";", "").trim().match(i), d = /,\s*(?![^()]*\))/;
-          if (s) {
-            let k = s[1].split(d);
-            for (let I = 0; I < k.length; I++) {
-              const $ = k[I];
-              let g = {
-                id: I,
-                r: 0,
-                g: 0,
-                b: 0,
-                a: 100,
-                percent: 100,
-                hue: 0,
-                select: !1
-              };
-              if ($.includes("deg"))
-                B.angle = parseInt($.replace("deg", ""));
-              else if ($.includes("rgba")) {
-                let S = $.trim().replace(/rgba|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
-                S = S.filter((re) => re.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.a = parseFloat(S[3]) * 100, g.percent = parseInt(S[4]), l.push(g);
-              } else if ($.includes("rgb")) {
-                let S = $.trim().replace(/rgb|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
-                S = S.filter((re) => re.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.percent = parseInt(S[3]), l.push(g);
-              }
-            }
-          }
-        } else {
-          let i = /^radial-gradient\((.*)\)$/, s = t.replace(";", "").trim().match(i), d = /,\s*(?![^()]*\))/;
-          if (s) {
-            let k = s[1].split(d);
-            for (let I = 0; I < k.length; I++) {
-              const $ = k[I];
-              let g = {
-                id: I,
-                r: 0,
-                g: 0,
-                b: 0,
-                a: 100,
-                percent: 100,
-                hue: 0,
-                select: !1
-              };
-              if ($.includes("circle at")) {
-                let S = $.replace("circle at ", "").replace(" ", "").replace(/%/g, " ").trim().split(" ");
-                B.percentageX = parseInt(S[0]), B.percentageY = parseInt(S[1]);
-              } else if ($.includes("rgba")) {
-                let S = $.replace(/rgba|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
-                S = S.filter((re) => re.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.a = parseFloat(S[3]) * 100, g.percent = parseInt(S[4]), l.push(g);
-              } else if ($.includes("rgb")) {
-                let S = $.replace(/rgb|\(|\)|%/g, "").replace(/,/g, " ").split(" ");
-                S = S.filter((re) => re.trim() !== ""), g.r = parseInt(S[0]), g.g = parseInt(S[1]), g.b = parseInt(S[2]), g.percent = parseInt(S[3]), l.push(g);
-              }
-            }
-          }
-        }
-        l.length > 1 && (a.value = l, a.value[0].select = !0, oe.value = a.value[0].a);
-      } else if (t) {
-        let e = {
-          r: 0,
-          g: 0,
-          b: 0,
-          a: 0
-        };
-        if (t.includes("#"))
-          if (t.length >= 8)
-            e = $t(t);
-          else {
-            let l = je(t);
-            l ? (e.a = 1, e.r = l.r, e.g = l.g, e.b = l.b) : e = null;
-          }
-        else if (t.includes("rgb"))
-          if (t.includes("rgba"))
-            e = wt(t);
-          else {
-            let l = St(t);
-            l ? (e.a = 1, e.r = l.r, e.g = l.g, e.b = l.b) : e = null;
-          }
-        e && (a.value[0].r = e.r, a.value[0].b = e.b, a.value[0].g = e.g, a.value[0].a = parseInt((e.a * 100).toFixed(0)), oe.value = a.value[0].a, a.value[0].hue = 0);
-      }
-    }, pe = (t) => {
-      const e = a.value.find((l) => l.select == !0);
-      if (e) {
-        switch (t) {
-          case "RGB":
-            break;
-          case "HSL": {
-            const { h: l, s: i, l: s } = at(e.r, e.g, e.b);
-            N.h = Math.round(l), N.s = Math.round(i * 100), N.l = Math.round(s * 100);
-            break;
-          }
-        }
-        M.value = t;
-      }
-    }, xe = (t) => {
-      t && ye(t), Le();
-    };
-    we(
-      () => r.modelValue,
-      (t, e) => {
-        t !== e && t !== C.value && (a.value.forEach((l) => {
-          const i = P == null ? void 0 : P.querySelector(`#clr-gb-${l.id}`);
-          i == null || i.remove();
-        }), xe(t));
-      }
-    );
-    const ut = (t) => {
-      a.value.forEach((e) => {
-        const l = P == null ? void 0 : P.querySelector(`#clr-gb-${e.id}`);
-        l == null || l.remove();
-      }), t !== "solid" ? (b.value = "gradient", setTimeout(() => {
-        var e;
-        P = (e = u.value) == null ? void 0 : e.querySelector(".gradient-bar"), qe(t), Le();
-      }, 200)) : t === "solid" && (b.value = "solid", a.value = a.value.map((e) => (e.select = !1, e)), a.value[0].select = !0, setTimeout(() => {
-        xe(r.modelValue);
-      }, 200));
-    };
-    return Je(() => {
-      var t;
-      b.value = r.modelValue.includes("linear") || r.modelValue.includes("radial") ? "gradient" : "solid", b.value == "gradient" && (P = (t = u.value) == null ? void 0 : t.querySelector(".gradient-bar")), xe(r.modelValue), pe(M.value), mt(() => {
-        F.value = !0;
-      });
-    }), (t, e) => (m(), E("div", {
-      ref_key: "pickerTemplateRef",
-      ref: u,
-      class: A(["ck-cp-container", n.disabled ? "ck-cp-disabled " : ""]),
-      "cp-theme": n.theme
-    }, [
-      n.variant == "gradient" ? (m(), E("div", rl, [
-        T(il, {
-          class: "mr-auto",
-          variant: n.variant,
-          mode: b.value,
-          "model-value": n.modelValue,
-          iconClasses: n.iconClasses,
-          gradientType: L.value,
-          onOnChangeMode: ut
-        }, null, 8, ["variant", "mode", "model-value", "iconClasses", "gradientType"])
-      ])) : D("", !0),
-      b.value == "gradient" && n.variant == "gradient" ? (m(), E("div", ul, [
-        T(Kt, {
-          gradientType: L.value,
-          onOnAddColor: Xe,
-          onOnMouseDown: Ve,
-          onOnDeleteColor: Ge
-        }, null, 8, ["gradientType"]),
-        T(ll, {
-          percentageY: B.percentageY,
-          "onUpdate:percentageY": e[0] || (e[0] = (l) => B.percentageY = l),
-          angle: B.angle,
-          "onUpdate:angle": e[1] || (e[1] = (l) => B.angle = l),
-          percentageX: B.percentageX,
-          "onUpdate:percentageX": e[2] || (e[2] = (l) => B.percentageX = l),
-          inputType: M.value,
-          mode: b.value,
-          gradientType: L.value,
-          onOnInput: q
-        }, null, 8, ["percentageY", "angle", "percentageX", "inputType", "mode", "gradientType"])
-      ])) : (m(), E("div", dl, [
-        n.presetColors ? (m(), E("div", cl, [
-          e[10] || (e[10] = h("div", { class: "text-oc-text-400 text-sm my-3 font-medium" }, "Choose color", -1)),
-          h("div", pl, [
-            (m(!0), E(ge, null, Ke(n.presetColors, (l) => (m(), E("div", {
-              key: `color-${l}`,
-              class: "ck-cp-color-item !w-[32px] !h-[32px]",
-              style: te(`background:${l}`),
-              onClick: (i) => se(l)
-            }, null, 12, gl))), 128))
-          ])
-        ])) : D("", !0)
-      ])),
-      T(al, { onOnMouseDown: Ne }),
-      h("div", vl, [
-        T(_t, {
-          class: A(O.value ? "max-w-[90%]" : ""),
-          modelValue: ne.value,
-          "onUpdate:modelValue": e[3] || (e[3] = (l) => ne.value = l),
-          onOnInput: e[4] || (e[4] = (l) => Ie(!1)),
-          onOnChange: Pe
-        }, null, 8, ["class", "modelValue"]),
-        O.value ? (m(), E("button", {
-          key: 0,
-          id: "cp-btn-eyedropper",
-          type: "button",
-          class: "cp-btn",
-          style: { padding: "7px" },
-          onClick: Ye
-        }, e[11] || (e[11] = [
-          h("svg", {
-            version: "1.1",
-            xmlns: "http://www.w3.org/2000/svg",
-            width: "32",
-            height: "32",
-            viewBox: "0 0 32 32"
-          }, [
-            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)
-        ]))) : D("", !0)
-      ]),
-      n.showAlpha ? (m(), X(zt, {
-        key: 3,
-        modelValue: oe.value,
-        "onUpdate:modelValue": e[5] || (e[5] = (l) => oe.value = l),
-        onOnInput: e[6] || (e[6] = (l) => De(l.target.value))
-      }, null, 8, ["modelValue"])) : D("", !0),
-      ft(h("div", ml, null, 512), [
-        [ht, !1]
-      ]),
-      h("div", fl, [
-        T(Gt, {
-          "model-value": M.value,
-          "onUpdate:modelValue": pe
-        }, null, 8, ["model-value"]),
-        F.value && n.showInputSet ? (m(), E("div", hl, [
-          M.value == "HEX" ? (m(), X(Pt, {
-            key: 0,
-            modelValue: j.value,
-            "onUpdate:modelValue": [
-              e[7] || (e[7] = (l) => j.value = l),
-              y
-            ]
-          }, null, 8, ["modelValue"])) : D("", !0),
-          M.value == "RGB" ? (m(), X(nt, {
-            key: 1,
-            "rgb-value": a.value.find((l) => l.select == !0),
-            onUpdateRgbValue: p
-          }, null, 8, ["rgb-value"])) : D("", !0),
-          M.value == "HSL" ? (m(), X(nt, {
-            key: 2,
-            "input-type": "HSL",
-            "hsl-value": N,
-            onUpdateHslValue: o
-          }, null, 8, ["hsl-value"])) : D("", !0),
-          n.showAlpha ? (m(), X(qt, {
-            key: 3,
-            modelValue: oe.value,
-            "onUpdate:modelValue": [
-              e[8] || (e[8] = (l) => oe.value = l),
-              e[9] || (e[9] = (l) => De(l))
-            ]
-          }, 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)),
-      H.value.length > 0 && n.showColorList ? (m(), E("div", bl, [
-        (m(!0), E(ge, null, Ke(Z.value, (l) => (m(), E("div", {
-          key: `color-${l}`,
-          class: "ck-cp-color-item !w-[32px] !h-[32px]",
-          style: te(`background:${l}`),
-          onClick: (i) => se(l)
-        }, null, 12, yl))), 128))
-      ])) : D("", !0)
-    ], 10, sl));
-  }
-}, kl = { class: "flex flex-col pt-10 px-7 gap-y-7 items-center" }, $l = { class: "flex flex-col gap-y-4 text-center items-center" }, wl = {
-  key: 0,
-  class: "text-xl font-medium"
-}, Sl = {
-  key: 0,
-  class: "text-sm text-oc-text-400"
-}, El = /* @__PURE__ */ bt({
-  __name: "OcOnboardingProgressbar",
-  props: {
-    title: {
-      type: String,
-      default: ""
-    },
-    description: {
-      type: String,
-      default: ""
-    },
-    value: {
-      type: [String, Number],
-      default: "0"
-    },
-    chartData: {
-      type: Array,
-      default: () => []
-    }
-  },
-  setup(n) {
-    const V = n, r = ke(() => ({
-      grid: {
-        containLabel: !1
-      },
-      series: [
-        {
-          name: "Onboarding Progressbar",
-          type: "pie",
-          emphasis: {
-            disabled: !0
-          },
-          avoidLabelOverlap: !1,
-          label: {
-            color: "#000",
-            fontWeight: "bold",
-            fontFamily: "Inter",
-            fontSize: "24",
-            position: "center",
-            formatter: () => V.value + "%"
-          },
-          labelLine: {
-            show: !0
-          },
-          radius: ["60%", "100%"],
-          data: V.chartData
-        }
-      ]
-    }));
-    return (b, u) => (m(), E("div", kl, [
-      T(w(Ct), {
-        class: "w-[140px] bg-white rounded-full h-[140px]",
-        "additional-options": r.value,
-        "tooltip-formatter": () => null,
-        "tooltip-value-formatter": () => null
-      }, null, 8, ["additional-options"]),
-      h("div", $l, [
-        n.title ? (m(), E("span", wl, Fe(n.title), 1)) : D("", !0),
-        ze(b.$slots, "description", {}, () => [
-          n.description ? (m(), E("span", Sl, Fe(n.description), 1)) : D("", !0)
-        ])
-      ])
-    ]));
-  }
-}), Ml = it(
+import { defineAsyncComponent as o } from "vue";
+import { LineChart as s } from "./Dashboard/Charts/LineChart/OcLineChart.js";
+import { PieChart as f } from "./Dashboard/Charts/PieChart/OcPieChart.js";
+import { BarChart as d } from "./Dashboard/Charts/BarChart/OcBarChart.js";
+import { BarRaceChart as h } from "./Dashboard/Charts/BarRaceChart/OcBarRaceChart.js";
+import { Card as l } from "./Dashboard/Card/OcCard.js";
+const t = o(
+  () => import("./OcColorPicker-BZ3zytCj.js")
+), e = o(
+  () => import("./OcTextEditor-BWOvVmgS.js")
+), i = o(
+  () => import("./OcColorPickerPopup-sjvpeV8l.js")
+), p = o(
+  () => import("./OcOnboardingProgressbar-BsqF90Gn.js")
+), m = o(
   () => import("./OcCodeBlock-chTpuRDc.js")
-), Ul = it(
-  () => import("./OcLottieAnimation-EBkAB8-y.js")
+), n = o(
+  () => import("./OcLottieAnimation-cF06yacT.js")
 );
 export {
-  Ql as BarChart,
-  Nl as BarRaceChart,
-  Xl as Card,
-  Ml as CodeBlock,
-  Vt as ColorPicker,
-  xl as ColorPickerPopup,
-  Ol as LineChart,
-  Ul as LottieAnimation,
-  El as OnboardingProgressbar,
-  Ct as PieChart,
-  Rl as TextEditor
+  d as BarChart,
+  h as BarRaceChart,
+  l as Card,
+  m as CodeBlock,
+  t as ColorPicker,
+  i as ColorPickerPopup,
+  s as LineChart,
+  n as LottieAnimation,
+  p as OnboardingProgressbar,
+  f as PieChart,
+  e as TextEditor
 };