@orchidui/dashboard 1.8.1-83 → 1.8.1-85

package/dist/index.js

@@ -1,32 +1,1852 @@
-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(
+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 $e, openBlock as m, createBlock as X, unref as w, normalizeClass as Q, withCtx as W, createVNode as T, createCommentVNode as D, createSlots as vt, renderSlot as ze, createElementBlock as E, normalizeStyle as te, onMounted as Je, watch as fe, createElementVNode as h, Fragment as ge, renderList as Ke, toDisplayString as Fe, createTextVNode as ve, 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 we, Icon as A, Modal as xt, Select as Ze, Slider as Ae } from "@orchidui/core";
+import { hslToRgb as et, hsl2Hex as tt, rgb2Hex as lt, rgbaToHex8 as kt, hexToRgb as je, rgbToHue as Qe, 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 Al } from "./Dashboard/Charts/BarChart/OcBarChart.js";
+import { BarRaceChart as Nl } from "./Dashboard/Charts/BarRaceChart/OcBarRaceChart.js";
+import { _ as Xl } from "./OcCard-BpqC7suH.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
+    },
+    placement: {
+      type: String,
+      default: "auto"
+    }
+  },
+  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));
+    }, p = $e(() => 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: Q(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: n.placement,
+          "popper-options": {
+            strategy: "fixed"
+          }
+        }, {
+          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(A), {
+                  class: "cursor-pointer",
+                  style: te(`color: ${f.value}`),
+                  name: "drop"
+                }, null, 8, ["style"])
+              ])
+            ])) : (m(), X(w(we), {
+              key: 0,
+              "model-value": f.value,
+              icon: "drop",
+              "icon-props": p.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", "placement"])
+      ]),
+      _: 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" }, Qt = { class: "grid cursor-pointer px-5" }, At = {
+  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 = $e(() => u[r.variant]), C = Y.import("attributors/style/size");
+    C.whitelist = r.fontSizes.map((c) => c.value), Y.register(C, !0);
+    const p = Y.import("attributors/style/align");
+    Y.register(p, !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(""), y = v(), Se = v(!1), ue = v(r.image), ie = (c) => {
+      console.log(c, 123), M.value = y.value.getQuill().history.stack.undo.length > 0, F.value = y.value.getQuill().history.stack.redo.length > 0, U.value = y.value.getQuill().getFormat().bold, le.value = y.value.getQuill().getFormat().italic, J.value = y.value.getQuill().getFormat().underline, R.value = y.value.getQuill().getFormat().blockquote, ae.value = y.value.getQuill().getFormat().list, ee.value = y.value.getQuill().getFormat().align;
+      let o = document.createElement("div");
+      o.innerHTML = c, Se.value && (o.innerText ? b("update:modelValue", c || "") : b("update:modelValue", ""), o.remove());
+    }, Ne = () => {
+      if (y.value.getQuill().getSelection(!0)) {
+        const o = y.value.getQuill().getSelection(!0);
+        y.value.getQuill().insertText(o.index, `
+`, Y.sources.USER), y.value.getQuill().insertEmbed(o.index + 1, "divider", !0, Y.sources.USER), y.value.getQuill().setSelection(o.index + 2, Y.sources.SILENT);
+      }
+    }, Ee = () => {
+      y.value.getQuill().history.undo(), ie(r.modelValue);
+    }, Me = () => {
+      y.value.getQuill().history.redo(), ie(r.modelValue);
+    }, Ce = () => {
+      var c;
+      y.value.getQuill().format("bold", !U.value), (c = y.value.getQuill().getSelection()) != null && c.length || (U.value = !U.value);
+    }, ne = () => {
+      var c;
+      y.value.getQuill().format("italic", !le.value), (c = y.value.getQuill().getSelection()) != null && c.length || (le.value = !le.value);
+    }, Ie = () => {
+      var c;
+      y.value.getQuill().format("underline", !J.value), (c = y.value.getQuill().getSelection()) != null && c.length || (J.value = !J.value);
+    }, Ue = (c) => {
+      y.value.getQuill().format("size", c), N.value = c, z.value = !1;
+    }, me = () => {
+      const c = y.value.getQuill().getSelection();
+      c && c.length > 0 && y.value.getQuill().theme.tooltip.edit();
+    }, Pe = () => {
+      y.value.getQuill().format("blockquote", !R.value);
+    }, oe = (c) => {
+      const o = y.value.getQuill().getSelection();
+      o && (y.value.getQuill().clipboard.dangerouslyPasteHTML(o.index, `<img src="${c}" />`), ue.value = c, b("update:image", ue.value));
+    }, De = () => {
+      y.value.getQuill().getSelection() || y.value.getQuill().setSelection(y.value.getQuill().getLength() - 1);
+      const c = document.createElement("input");
+      c.type = "file", c.accept = "jpg,.jpeg,.png,.webp,.gif", c.onchange = () => {
+        const o = c.files[0], x = new FileReader();
+        x.onload = () => oe(x.result), x.readAsDataURL(o);
+      }, c.click();
+    }, He = (c) => /^data:image\/(png|jpg|jpeg|gif);base64,/.test(c), P = (c) => {
+      setTimeout(() => {
+        var x;
+        if (c) {
+          const G = y.value.getHTML(), se = document.createElement("div");
+          se.innerHTML = G;
+          let xe = se.getElementsByTagName("img");
+          if (xe && xe.length > 0)
+            for (let pe = 0; pe < xe.length; pe++) {
+              const ke = (x = xe[pe]) == null ? void 0 : x.getAttribute("src");
+              He(ke) && b("update:image", ke);
+            }
+        }
+      }, 100);
+      const { items: o } = c.clipboardData;
+      o.length && o[0].getAsString((x) => {
+        He(x) && (y.value.getQuill().getSelection() || y.value.getQuill().setSelection(y.value.getQuill().getLength() - 1));
+      });
+    }, _ = () => {
+      y.value.getQuill().theme.tooltip.edit("video");
+    }, Ve = (c) => {
+      y.value.getQuill().format("list", c), ae.value = c;
+    }, he = (c = void 0) => {
+      y.value.getQuill().format("align", c), ee.value = c;
+    }, de = v(""), Xe = () => {
+      y.value.getQuill().format("color", de.value);
+    };
+    Je(() => {
+      Ue(r.initialFontSize || r.fontSizes[0].value), Se.value = !0;
+    });
+    const be = v(100), ce = v(!1), Le = (c) => {
+      var x, G;
+      be.value = c;
+      const o = (x = window.getSelection()) == null ? void 0 : x.focusNode;
+      o && o.nodeName !== "#text" && (y.value.getQuill().format("width", `${be.value}%`), (G = o == null ? void 0 : o.querySelector("img")) == null || G.setAttribute("style", "margin:auto;display:block;"));
+    }, ye = (c = "left") => {
+      var x, G;
+      const o = (x = window.getSelection()) == null ? void 0 : x.focusNode;
+      if (o && o.nodeName !== "#text") {
+        let se = "float:left";
+        c == "center" ? se = "" : c == "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 c = (o = window.getSelection()) == null ? void 0 : o.focusNode;
+      ce.value = c.innerHTML && c.innerHTML.includes("<img");
+    }, K = v(!1), q = v(3), Te = v(3), qe = $e(() => {
+      let c = [];
+      for (let o = 1; o < 30; o++)
+        c.push({
+          label: o.toString(),
+          value: o.toString()
+        });
+      return c;
+    }), Ge = $e(() => {
+      let c = [];
+      for (let o = 1; o < 12; o++)
+        c.push({
+          label: o.toString(),
+          value: o.toString()
+        });
+      return c;
+    }), Ye = () => {
+      y.value.getQuill().getModule("better-table").insertTable(parseInt(q.value), parseInt(Te.value)), K.value = !1;
+    };
+    return fe(() => r.modelValue, (c) => {
+      c || y.value.getQuill().setContents([], "silent");
+    }), (c, 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] = (x) => K.value = x),
+          class: "!w-full !h-full",
+          confirmButtonProps: {
+            label: "Save",
+            onClick: () => Ye()
+          }
+        }, {
+          default: W(() => [
+            T(w(Ze), {
+              modelValue: Te.value,
+              "onUpdate:modelValue": o[0] || (o[0] = (x) => Te.value = x),
+              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] = (x) => q.value = x),
+              options: qe.value,
+              label: "Table rows"
+            }, null, 8, ["modelValue", "options"])
+          ]),
+          _: 1
+        }, 8, ["modelValue", "confirmButtonProps"]),
+        h("div", {
+          class: Q(["grid", { "has-error": n.errorMessage }]),
+          onClick: Oe
+        }, [
+          j.value ? (m(), X(w(yt), {
+            key: 0,
+            id: `#${j.value}`,
+            ref_key: "quill",
+            ref: y,
+            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(A), {
+                      class: Q(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(A), {
+                      class: Q(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] = (x) => z.value = x),
+                    class: "px-5"
+                  }, {
+                    menu: W(() => [
+                      h("div", Rt, [
+                        (m(!0), E(ge, null, Ke(n.fontSizes, (x) => (m(), E("div", {
+                          key: x.value,
+                          class: Q(["min-w-[120px] cursor-pointer py-2 px-3 hover:bg-oc-gray-50", N.value === x.value ? "font-medium" : ""]),
+                          onClick: (G) => Ue(x.value)
+                        }, Fe(x.label), 11, Et))), 128))
+                      ])
+                    ]),
+                    default: W(() => {
+                      var x;
+                      return [
+                        h("div", Bt, [
+                          ve(Fe((x = n.fontSizes.find((G) => G.value === N.value)) == null ? void 0 : x.label) + " ", 1),
+                          T(w(A), {
+                            width: "20",
+                            height: "20",
+                            name: "chevron-down",
+                            class: Q(["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(A), {
+                      class: Q(["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(A), {
+                      class: Q(["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(A), {
+                      class: Q(["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(A), {
+                    key: 0,
+                    class: "cursor-pointer",
+                    width: "20",
+                    height: "20",
+                    name: "text-editor/link",
+                    onClick: me
+                  })) : D("", !0),
+                  f.value.includes("image") ? (m(), X(w(A), {
+                    key: 1,
+                    class: "cursor-pointer",
+                    width: "20",
+                    height: "20",
+                    name: "text-editor/image",
+                    onClick: De
+                  })) : D("", !0),
+                  f.value.includes("quote") ? (m(), X(w(A), {
+                    key: 2,
+                    class: Q(["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(A), {
+                    key: 3,
+                    class: "cursor-pointer",
+                    width: "20",
+                    height: "20",
+                    name: "text-editor/media",
+                    onClick: _
+                  })) : D("", !0),
+                  T(w(A), {
+                    class: "cursor-pointer",
+                    width: "20",
+                    height: "20",
+                    name: "table",
+                    onClick: o[4] || (o[4] = (x) => 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(A), {
+                      class: Q(["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] = (x) => Ve("bullet"))
+                    }, null, 8, ["class"]),
+                    T(w(A), {
+                      class: Q(["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] = (x) => 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(A), {
+                      class: Q(["cursor-pointer", ee.value ? "text-oc-text-300" : "text-oc-text"]),
+                      width: "20",
+                      height: "20",
+                      name: "text-editor/left",
+                      onClick: o[7] || (o[7] = (x) => he())
+                    }, null, 8, ["class"]),
+                    T(w(A), {
+                      class: Q(["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] = (x) => he("center"))
+                    }, null, 8, ["class"]),
+                    T(w(A), {
+                      class: Q(["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] = (x) => he("right"))
+                    }, null, 8, ["class"]),
+                    T(w(A), {
+                      class: Q(["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] = (x) => he("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] = (x) => de.value = x),
+                      Xe
+                    ],
+                    "hide-input-color": ""
+                  }, {
+                    "picker-icon": W(() => [
+                      h("div", Qt, [
+                        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", At, [
+                  T(w(Ae), {
+                    label: "Image width",
+                    class: "w-[120px]",
+                    "model-value": be.value,
+                    "min-limit": 0,
+                    "max-limit": 100,
+                    "onUpdate:modelValue": Le
+                  }, null, 8, ["model-value"]),
+                  h("div", Ft, [
+                    T(w(A), {
+                      class: "cursor-pointer",
+                      width: "20",
+                      height: "20",
+                      name: "text-editor/left",
+                      onClick: o[12] || (o[12] = (x) => ye())
+                    }),
+                    T(w(A), {
+                      class: "cursor-pointer",
+                      width: "20",
+                      height: "20",
+                      name: "text-editor/center",
+                      onClick: o[13] || (o[13] = (x) => ye("center"))
+                    }),
+                    T(w(A), {
+                      class: "cursor-pointer",
+                      width: "20",
+                      height: "20",
+                      name: "text-editor/right",
+                      onClick: o[14] || (o[14] = (x) => ye("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] = (x) => 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 = (p) => {
+      u.value = p, u.value = `#${p.replace(/#/g, "")}`;
+    }, C = () => {
+      let p = u.value;
+      if (p === r.modelValue) return;
+      if (!/^#[0-9a-fA-F]+$/.test(p)) {
+        u.value = r.modelValue;
+        return;
+      }
+      let a = p.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 fe(
+      () => r.modelValue,
+      (p, a) => {
+        p !== a && (u.value = p);
+      },
+      { immediate: !0 }
+    ), (p, a) => (m(), X(w(we), {
+      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(), p = 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 = p.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" ? fe(
+      () => r.rgbValue,
+      (O, L) => {
+        O !== L && (u.value = O);
+      },
+      { immediate: !0, deep: !0 }
+    ) : fe(
+      () => 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(we), {
+        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(we), {
+        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(we), {
+        ref_key: "bInputEl",
+        ref: p,
+        "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 = (p) => {
+      u.value = p;
+    }, C = () => {
+      let p = parseInt(u.value);
+      p && p <= 100 ? b("update:modelValue", p) : u.value = r.modelValue;
+    };
+    return fe(
+      () => r.modelValue,
+      (p, a) => {
+        p !== a && (u.value = p);
+      },
+      { immediate: !0 }
+    ), (p, a) => (m(), X(w(we), {
+      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, p) => (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"), p = 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 ? p.value = !0 : p.value = !1;
+    }, O = (L) => {
+      p.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: Q(["absolute top-[-18px] text-oc-accent-3 rounded-[4px] border-2 border-oc-gray-200 p-2 bg-oc-bg-light", p.value ? "" : "!hidden"]),
+        style: te(C.value),
+        onClick: B[0] || (B[0] = (j) => L.$emit("onDeleteColor"))
+      }, [
+        T(w(A), {
+          name: "bin",
+          width: "14",
+          height: "14"
+        })
+      ], 6),
+      h("div", {
+        class: Q(["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, p) => {
+      let a = parseInt(C);
+      switch (p) {
+        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, p) => (m(), E("div", el, [
+      n.gradientType == "linear" && r.value ? (m(), X(w(Ae), {
+        key: 0,
+        label: "Angle",
+        "model-value": n.angle,
+        "min-limit": 0,
+        "max-limit": 360,
+        "onUpdate:modelValue": p[0] || (p[0] = (a) => f(a, "angle"))
+      }, {
+        "min-limit-label": W(() => p[3] || (p[3] = [
+          ve("0 ")
+        ])),
+        "max-limit-label": W(() => p[4] || (p[4] = [
+          ve("360"),
+          h("span", null, "°", -1)
+        ])),
+        _: 1
+      }, 8, ["model-value"])) : D("", !0),
+      n.gradientType == "radial" && b.value ? (m(), E("div", tl, [
+        T(w(Ae), {
+          label: "Position X",
+          "model-value": n.percentageX,
+          "min-limit": 0,
+          "max-limit": 100,
+          "onUpdate:modelValue": p[1] || (p[1] = (a) => f(a, "percentageX"))
+        }, {
+          "min-limit-label": W(() => p[5] || (p[5] = [
+            ve("0")
+          ])),
+          "max-limit-label": W(() => p[6] || (p[6] = [
+            ve("100%")
+          ])),
+          _: 1
+        }, 8, ["model-value"]),
+        T(w(Ae), {
+          label: "Position Y",
+          "model-value": n.percentageY,
+          "min-limit": 0,
+          "max-limit": 100,
+          "onUpdate:modelValue": p[2] || (p[2] = (a) => f(a, "percentageY"))
+        }, {
+          "min-limit-label": W(() => p[7] || (p[7] = [
+            ve("0")
+          ])),
+          "max-limit-label": W(() => p[8] || (p[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] = (p) => f.$emit("onMouseDown", p)),
+      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: Q(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: Q(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: Q(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), p = (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);
+    fe(
+      () => r.lastUsedColors,
+      () => {
+        H.value = r.lastUsedColors;
+      },
+      {
+        deep: !0
+      }
+    );
+    const Z = $e(() => 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, y = 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, y = t.clientX - t.target.getBoundingClientRect().left, Se = t.clientY - t.target.getBoundingClientRect().top, ae = y - 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", he);
+      }
+    }, he = () => {
+      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], ye(d), _ = ($ = u.value) == null ? void 0 : $.querySelector(`#clr-gb-${d.id}`), q();
+    }, be = (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 (be({ 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) => ye(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();
+    }, ye = (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 && p(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;
+        }
+        p(d);
+      }
+    }, Te = () => {
+      a.value.forEach((t) => {
+        t.hue = Qe(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 = Qe(k.r, k.g, k.b);
+          if (d && (d.hue = I, d.r = k.r, d.g = k.g, d.b = k.b), be(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");
+      });
+    }, c = (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 = Qe(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();
+      }
+    }, x = () => {
+      if (j.value) {
+        const t = je(j.value);
+        if (t) {
+          const e = Qe(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 xe = (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;
+      }
+    }, ke = (t) => {
+      t && xe(t), Le();
+    };
+    fe(
+      () => 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();
+        }), ke(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(() => {
+        ke(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")), ke(r.modelValue), pe(M.value), mt(() => {
+        F.value = !0;
+      });
+    }), (t, e) => (m(), E("div", {
+      ref_key: "pickerTemplateRef",
+      ref: u,
+      class: Q(["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: Q(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),
+              x
+            ]
+          }, null, 8, ["modelValue"])) : D("", !0),
+          M.value == "RGB" ? (m(), X(nt, {
+            key: 1,
+            "rgb-value": a.value.find((l) => l.select == !0),
+            onUpdateRgbValue: c
+          }, 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 = $e(() => ({
+      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("./OcCodeBlock-chTpuRDc.js")
-), n = o(
-  () => import("./OcLottieAnimation-cF06yacT.js")
+), Ul = it(
+  () => import("./OcLottieAnimation-EBkAB8-y.js")
 );
 export {
-  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
+  Al 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
 };