@vue/devtools-ui 7.4.3 → 7.4.5

package/dist/index.js

@@ -1,44 +1,50 @@
 // @unocss-include
 
-/* empty css             */
 import { Dropdown as ae, VClosePopper as Y, Tooltip as re } from "floating-vue";
-import { vTooltip as It } from "floating-vue";
+import { vTooltip as Vt } from "floating-vue";
+/* empty css             */
 /* empty css               */
-import { openBlock as d, createElementBlock as f, createElementVNode as m, defineComponent as y, useAttrs as ne, computed as k, useSlots as q, createBlock as w, resolveDynamicComponent as J, mergeProps as D, withCtx as g, renderSlot as v, unref as b, createCommentVNode as $, normalizeClass as h, ref as S, onMounted as z, createVNode as _, Transition as H, normalizeStyle as N, toDisplayString as V, h as le, render as U, normalizeProps as X, guardReactiveProps as G, nextTick as j, watchEffect as E, Teleport as Q, createTextVNode as B, withDirectives as x, isRef as A, vModelDynamic as se, provide as ie, createSlots as Z, inject as de, Fragment as P, renderList as R, withModifiers as ue, shallowRef as ce } from "vue";
-import { useColorMode as pe, useVModel as T, useScrollLock as me, onKeyStroke as ee, refDebounced as fe, refWithControl as ge, useToggle as ve, useElementSize as be } from "@vueuse/core";
-import { i as he } from "./ic-icons-data-B4q1VTSq.js";
-import { createJavaScriptRegexEngine as ye, createHighlighterCore as ke } from "shiki/core";
-const O = (l, o) => {
+import { openBlock as u, createElementBlock as f, renderSlot as v, createElementVNode as m, defineComponent as h, useAttrs as ne, computed as k, useSlots as q, createBlock as w, resolveDynamicComponent as J, mergeProps as D, withCtx as g, unref as b, createCommentVNode as $, normalizeClass as y, shallowRef as le, nextTick as H, Fragment as E, renderList as R, toDisplayString as B, watchEffect as P, ref as S, onMounted as z, Teleport as X, createVNode as C, Transition as N, normalizeStyle as j, createTextVNode as _, isRef as x, h as se, render as U, normalizeProps as G, guardReactiveProps as Q, withModifiers as ie, provide as de, createSlots as Z, inject as ue, withDirectives as A, vModelDynamic as ce } from "vue";
+import { useVModel as T, useScrollLock as pe, onKeyStroke as ee, useColorMode as me, useElementSize as fe, refDebounced as ge, refWithControl as ve, useToggle as be } from "@vueuse/core";
+import { createJavaScriptRegexEngine as ye, createHighlighterCore as he } from "shiki/core";
+import { i as ke } from "./ic-icons-data-B4q1VTSq.js";
+const O = (l, t) => {
   const e = l.__vccOpts || l;
-  for (const [s, t] of o)
-    e[s] = t;
+  for (const [s, o] of t)
+    e[s] = o;
   return e;
-}, we = {}, $e = { class: "h-3 w-3 $ui-inline-fcc" }, _e = /* @__PURE__ */ m("svg", {
-  class: "animate-spin",
-  xmlns: "http://www.w3.org/2000/svg",
-  fill: "none",
-  viewBox: "0 0 24 24"
-}, [
-  /* @__PURE__ */ m("circle", {
-    class: "opacity-25",
-    cx: "12",
-    cy: "12",
-    r: "10",
-    stroke: "currentColor",
-    "stroke-width": "4"
-  }),
-  /* @__PURE__ */ m("path", {
-    class: "opacity-75",
-    fill: "currentColor",
-    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-  })
-], -1), Ce = [
-  _e
-];
-function Ve(l, o) {
-  return d(), f("div", $e, Ce);
+}, we = {}, $e = { class: "mx-0.5 $ui-base inline-block select-none whitespace-nowrap rounded px-1.5 py-0.5 text-xs" };
+function Ce(l, t) {
+  return u(), f("span", $e, [
+    v(l.$slots, "default")
+  ]);
 }
-const te = /* @__PURE__ */ O(we, [["render", Ve]]), Be = { key: 2 }, M = /* @__PURE__ */ y({
+const it = /* @__PURE__ */ O(we, [["render", Ce]]), Ve = {}, Be = { class: "h-3 w-3 $ui-inline-fcc" };
+function _e(l, t) {
+  return u(), f("div", Be, t[0] || (t[0] = [
+    m("svg", {
+      class: "animate-spin",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24"
+    }, [
+      m("circle", {
+        class: "opacity-25",
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        "stroke-width": "4"
+      }),
+      m("path", {
+        class: "opacity-75",
+        fill: "currentColor",
+        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      })
+    ], -1)
+  ]));
+}
+const te = /* @__PURE__ */ O(Ve, [["render", _e]]), Te = { key: 2 }, M = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Button",
   props: {
@@ -51,14 +57,14 @@ const te = /* @__PURE__ */ O(we, [["render", Ve]]), Be = { key: 2 }, M = /* @__P
     outlined: { type: Boolean, default: !1 }
   },
   emits: ["click"],
-  setup(l, { emit: o }) {
-    const e = l, s = o, t = ne(), n = k(() => t.to ? "router-link" : t.href ? "a" : "button"), r = k(() => e.loading || e.disabled);
-    function i(u) {
+  setup(l, { emit: t }) {
+    const e = l, s = t, o = ne(), n = k(() => o.to ? "router-link" : o.href ? "a" : "button"), r = k(() => e.loading || e.disabled);
+    function d(c) {
       if (r.value) {
-        u.preventDefault(), u.stopPropagation(), u.stopImmediatePropagation();
+        c.preventDefault(), c.stopPropagation(), c.stopImmediatePropagation();
         return;
       }
-      s("click", u);
+      s("click", c);
     }
     const a = {
       common: {
@@ -97,8 +103,8 @@ const te = /* @__PURE__ */ O(we, [["render", Ve]]), Be = { key: 2 }, M = /* @__P
         info: "hover:border-info-500 hover:text-info-500 active:ring-info-500:5 active:bg-info-500:5",
         success: "hover:border-primary-500 hover:text-primary-500 active:ring-primary-500:5 active:bg-primary-500:5"
       }
-    }, c = q(), p = k(() => e.flat ? a.flat[e.type] : e.outlined ? a.outlined[e.type] : a.normal[e.type]);
-    return (u, C) => (d(), w(J(n.value), D(u.$attrs, {
+    }, i = q(), p = k(() => e.flat ? a.flat[e.type] : e.outlined ? a.outlined[e.type] : a.normal[e.type]);
+    return (c, V) => (u(), w(J(n.value), D(c.$attrs, {
       role: "button",
       "aria-disabled": r.value,
       class: ["$ui-base $ui-inline-fcc inline-flex cursor-pointer select-none gap1.25 py-0 no-underline $ui-transition", [
@@ -110,190 +116,137 @@ const te = /* @__PURE__ */ O(we, [["render", Ve]]), Be = { key: 2 }, M = /* @__P
           "bg-transparent": e.flat || e.outlined
         },
         [
-          u.outlined ? "b-1 $ui-border-base active:ring-3 shadow-sm" : "border-none",
-          u.size === "mini" ? "px1 text-3 h5.5" : "px3.5 text-3.5 h8",
+          c.outlined ? "b-1 $ui-border-base active:ring-3 shadow-sm" : "border-none",
+          c.size === "mini" ? "px1 text-3 h5.5" : "px3.5 text-3.5 h8",
           p.value
         ]
       ]],
-      onClickCapture: i
+      onClickCapture: d
     }), {
       default: g(() => [
-        u.loading ? (d(), w(te, {
+        c.loading ? (u(), w(te, {
           key: 0,
           class: "mt0.5 h-full w3"
-        })) : v(u.$slots, "icon", {
+        })) : v(c.$slots, "icon", {
           key: 1,
           class: "h-full w3 $ui-inline-fcc"
         }),
-        b(c).default ? (d(), f("div", Be, [
-          v(u.$slots, "default")
+        b(i).default ? (u(), f("div", Te, [
+          v(c.$slots, "default")
         ])) : $("", !0),
-        v(u.$slots, "icon-right")
+        v(c.$slots, "icon-right")
       ]),
       _: 3
     }, 16, ["aria-disabled", "class"]));
   }
-}), Te = {}, De = { class: "mx-0.5 $ui-base inline-block select-none whitespace-nowrap rounded px-1.5 py-0.5 text-xs" };
-function Me(l, o) {
-  return d(), f("span", De, [
+}), De = {}, Me = { class: "$ui-base border $ui-border-base rounded shadow-sm" };
+function Se(l, t) {
+  return u(), f("div", Me, [
     v(l.$slots, "default")
   ]);
 }
-const gt = /* @__PURE__ */ O(Te, [["render", Me]]), F = /* @__PURE__ */ y({
-  __name: "Icon",
-  props: {
-    icon: {},
-    inline: { type: Boolean },
-    action: { type: Boolean, default: !1 }
-  },
-  setup(l) {
-    return (o, e) => (d(), w(J(o.inline ? "span" : "div"), {
-      class: h(["$ui-base", [o.icon, o.action ? "cursor-pointer hover:op50" : ""]])
-    }, null, 8, ["class"]));
-  }
-}), Se = /* @__PURE__ */ y({
-  __name: "Notification",
+const dt = /* @__PURE__ */ O(De, [["render", Se]]), ut = /* @__PURE__ */ h({
+  __name: "Checkbox",
   props: {
-    message: {},
-    type: { default: "info" },
-    classes: {},
-    duration: { default: 3e3 },
-    placement: { default: "top-center" },
-    onClose: {}
+    modelValue: { type: Boolean },
+    variant: { default: "normal" }
   },
-  setup(l) {
-    const o = l, e = {
-      success: "i-carbon-checkmark",
-      info: "i-material-symbols-light-info",
-      warning: "i-carbon-warning",
-      error: "i-carbon-close"
-    }, s = {
-      success: "text-primary-500 border-primary-200 dark:text-primary-200 dark:border-primary-500",
-      info: "text-blue-4 border-blue-2 dark:text-blue-2 dark:border-blue-4",
-      warning: "text-amber-4 border-amber-2 dark:border-amber-4",
-      error: "text-red-4 border-red-2 dark:border-red-4"
-    }, t = S(!1);
-    z(() => {
-      t.value = !0, setTimeout(() => {
-        t.value = !1;
-      }, o.duration);
-    });
-    const n = k(() => o.placement.startsWith("top") ? "translate-y--300%" : "translate-y-300%");
-    return (r, i) => (d(), f("div", {
-      class: h(["fixed left-0 right-0 $ui-z-max-override text-center", [
-        { "top-0": r.placement.startsWith("top") },
-        { "bottom-0": r.placement.startsWith("bottom") }
-      ]])
+  emits: ["update:modelValue"],
+  setup(l, { emit: t }) {
+    const o = T(l, "modelValue", t);
+    return (n, r) => (u(), f("div", {
+      class: y(["relative $ui-base h5 w5 $ui-inline-fcc cursor-pointer border-0.125rem rounded-1.25 transition-colors duration-200 ease-in-out", [
+        b(o) ? n.variant === "normal" ? "bg-primary-500 border-primary-200 dark:border-primary-100" : "bg-accent-500 border-accent-200 dark:border-accent-100" : ""
+      ]]),
+      onClick: r[0] || (r[0] = (d) => o.value = !b(o))
     }, [
-      _(H, {
-        "enter-from-class": n.value,
-        "leave-to-class": n.value,
-        onAfterLeave: i[0] || (i[0] = () => {
-          var a;
-          t.value || (a = r.onClose) == null || a.call(r);
-        })
-      }, {
-        default: g(() => [
-          t.value ? (d(), f("div", {
-            key: 0,
-            class: "flex transition-all duration-300",
-            style: N({ justifyContent: r.placement.includes("right") ? "right" : r.placement.includes("left") ? "left" : "center" })
-          }, [
-            m("div", {
-              class: h(["m3 flex-inline items-center gap2 b-1 b-1 rounded px4 py1 shadow transition-all duration-300 $ui-bg-base", [r.classes, s[r.type]]])
-            }, [
-              m("div", {
-                class: h(e[r.type])
-              }, null, 2),
-              m("div", null, V(r.message), 1)
-            ], 2)
-          ], 4)) : $("", !0)
-        ]),
-        _: 1
-      }, 8, ["enter-from-class", "leave-to-class"])
+      m("div", {
+        class: y([[
+          b(o) ? "opacity-100" : "opacity-0"
+        ], "h-60% w-35% transform-translate-y--0.25 transform-rotate-45 border-width-[0_0.125rem_0.125rem_0] border-white border-solid transition-opacity duration-200 ease-in-out"])
+      }, null, 2)
     ], 2));
   }
-});
-function vt(l) {
-  const o = document.createElement("div");
-  o.classList.add("$ui-z-max-override", "fixed"), document.body.appendChild(o);
-  const e = l.onClose;
-  function s() {
-    U(null, o);
+}), I = le();
+let K = null;
+function Ie(l, t = "text") {
+  var s;
+  if (!K && !I.value) {
+    const o = ye();
+    K = he({
+      themes: [
+        import("shiki/themes/vitesse-dark.mjs"),
+        import("shiki/themes/vitesse-light.mjs")
+      ],
+      langs: [
+        import("shiki/langs/json.mjs"),
+        import("shiki/langs/yaml.mjs"),
+        import("shiki/langs/css.mjs"),
+        import("shiki/langs/javascript.mjs"),
+        import("shiki/langs/typescript.mjs"),
+        import("shiki/langs/vue.mjs"),
+        import("shiki/langs/vue-html.mjs"),
+        import("shiki/langs/html.mjs"),
+        import("shiki/langs/diff.mjs"),
+        import("shiki/langs/shellscript.mjs")
+      ],
+      engine: o
+    }).then((n) => {
+      I.value = n;
+    });
   }
-  l.onClose = () => {
-    s(), e == null || e(), document.body.removeChild(o);
-  };
-  const t = le(Se, l);
-  U(t, o);
-}
-const Ie = "__vue-devtools-theme__";
-function Ee(l = {}) {
-  const o = pe({
-    ...l,
-    storageKey: Ie
-  });
-  return {
-    colorMode: o,
-    isDark: k(() => o.value === "dark")
+  const e = (s = I.value) == null ? void 0 : s.getLoadedLanguages().includes(t);
+  return e ? {
+    code: I.value.codeToHtml(l, {
+      lang: t,
+      themes: {
+        dark: "vitesse-dark",
+        light: "vitesse-light"
+      }
+    }),
+    supported: !0
+  } : {
+    code: l,
+    supported: e
   };
 }
-const Pe = { class: "$ui-dark-toggle-vtr" }, bt = /* @__PURE__ */ y({
-  __name: "DarkToggle",
+const Ee = ["innerHTML"], Pe = { class: "shiki" }, ze = ["textContent"], ct = /* @__PURE__ */ h({
+  __name: "CodeBlock",
   props: {
-    isDark: { type: Boolean, default: !1 },
-    animation: { type: Boolean, default: !0 },
-    animationDuration: { default: 400 }
+    code: {},
+    lang: {},
+    lines: { type: Boolean, default: !0 },
+    transformRendered: {}
   },
-  setup(l) {
-    const o = l, e = T(o, "isDark"), { colorMode: s } = Ee({
-      initialValue: e.value ? "dark" : "light",
-      onChanged: (i) => {
-        e.value = i === "dark";
-      }
-    }), t = k({
-      get: () => s.value === "dark",
-      set: (i) => s.value = i ? "dark" : "light"
-    }), n = document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    function r(i) {
-      if (!n || !i || !o.animation) {
-        t.value = !t.value;
-        return;
-      }
-      const a = i.clientX, c = i.clientY, p = Math.hypot(
-        Math.max(a, innerWidth - a),
-        Math.max(c, innerHeight - c)
-      );
-      document.startViewTransition(async () => {
-        t.value = !t.value, await j();
-      }).ready.then(() => {
-        const C = [
-          `circle(0px at ${a}px ${c}px)`,
-          `circle(${p}px at ${a}px ${c}px)`
-        ];
-        document.documentElement.animate(
-          {
-            clipPath: t.value ? [...C].reverse() : C
-          },
-          {
-            duration: o.animationDuration,
-            easing: "ease-in",
-            pseudoElement: t.value ? "::view-transition-old(root)" : "::view-transition-new(root)"
-          }
-        );
-      });
-    }
-    return (i, a) => (d(), f("span", Pe, [
-      v(i.$slots, "default", X(G({ mode: b(s), isDark: t.value, toggle: r })))
-    ]));
+  emits: ["loaded"],
+  setup(l, { emit: t }) {
+    const e = l, s = t, o = k(() => {
+      const n = e.lang === "text" ? { code: e.code, supported: !1 } : Ie(e.code, e.lang) || { code: e.code, supported: !1 };
+      return n.supported && e.transformRendered && (n.code = e.transformRendered(n.code)), n.supported && H(() => s("loaded")), n;
+    });
+    return (n, r) => n.lang && o.value.supported ? (u(), f("pre", {
+      key: 0,
+      class: y(["code-block", n.lines ? "code-block-lines" : ""]),
+      innerHTML: o.value.code
+    }, null, 10, Ee)) : (u(), f("pre", {
+      key: 1,
+      class: y(["code-block", n.lines ? "code-block-lines" : ""])
+    }, [
+      m("pre", Pe, [
+        m("code", null, [
+          (u(!0), f(E, null, R(n.code.split(`
+`), (d, a) => (u(), f(E, { key: a }, [
+            m("span", {
+              class: "line",
+              textContent: B(d)
+            }, null, 8, ze),
+            r[0] || (r[0] = m("br", null, null, -1))
+          ], 64))), 128))
+        ])
+      ])
+    ], 2));
   }
-}), ze = {}, Le = { class: "$ui-base border $ui-border-base rounded shadow-sm" };
-function Re(l, o) {
-  return d(), f("div", Le, [
-    v(l.$slots, "default")
-  ]);
-}
-const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
+}), oe = /* @__PURE__ */ h({
   __name: "Overlay",
   props: {
     dim: { type: Boolean },
@@ -301,19 +254,17 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
     position: { default: "fixed" }
   },
   setup(l) {
-    return (o, e) => (d(), f("div", {
-      class: h(["left-0 top-0 $ui-z-max h-full w-full $ui-fcc transition-opacity transition-duration-300 $ui-bg-base", [
-        o.dim ? "bg-opacity-50!" : "bg-opacity-0!",
-        o.blur ? "backdrop-blur-sm" : "",
-        o.position
+    return (t, e) => (u(), f("div", {
+      class: y(["left-0 top-0 $ui-z-max h-full w-full $ui-fcc transition-opacity transition-duration-300 $ui-bg-base", [
+        t.dim ? "bg-opacity-50!" : "bg-opacity-0!",
+        t.blur ? "backdrop-blur-sm" : "",
+        t.position
       ]])
     }, [
-      v(o.$slots, "default")
+      v(t.$slots, "default")
     ], 2));
   }
-}), Fe = { class: "h7.5 w-full $ui-fbc" }, He = { class: "text-4.5" }, Ne = /* @__PURE__ */ m("div", { class: "i-carbon-close" }, null, -1), je = [
-  Ne
-], xe = { class: "content transition-all transition-duration-300" }, Ae = { class: "footer h8 w-full transition-all transition-duration-300 delay-250" }, Oe = { class: "$ui-fcc" }, We = /* @__PURE__ */ y({
+}), Le = { class: "h7.5 w-full $ui-fbc" }, Re = { class: "text-4.5" }, Fe = { class: "content transition-all transition-duration-300" }, He = { class: "footer h8 w-full transition-all transition-duration-300 delay-250" }, Ne = { class: "$ui-fcc" }, je = /* @__PURE__ */ h({
   __name: "Dialog",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -328,30 +279,30 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
     position: {}
   },
   emits: ["close", "update:modelValue"],
-  setup(l, { emit: o }) {
-    const e = l, t = T(e, "modelValue", o, { passive: !0 }), n = me(() => window.document.documentElement);
-    E(() => {
-      t.value ? n.value = !0 : n.value = !1;
+  setup(l, { emit: t }) {
+    const e = l, o = T(e, "modelValue", t, { passive: !0 }), n = pe(() => window.document.documentElement);
+    P(() => {
+      o.value ? n.value = !0 : n.value = !1;
     });
     function r() {
-      t.value && e.autoClose && (t.value = !1);
+      o.value && e.autoClose && (o.value = !1);
     }
     ee("Escape", () => {
       r();
     });
-    const i = S(!1);
-    return z(() => i.value = !0), (a, c) => i.value || a.mountTo === "body" ? (d(), w(Q, {
+    const d = S(!1);
+    return z(() => d.value = !0), (a, i) => d.value || a.mountTo === "body" ? (u(), w(X, {
       key: 0,
       to: a.mountTo
     }, [
-      _(H, {
+      C(N, {
         "enter-from-class": "opacity-0 [&_.modal]:scale-95 [&_.content,&_.footer]:translate-y--2.5 [&_.content,&_.footer]:opacity-0",
         "enter-to-class": "opacity-100 [&_.modal]:scale-100",
         "leave-from-class": "opacity-100 [&_.modal]:scale-100",
         "leave-to-class": "opacity-0 [&_.modal]:scale-95"
       }, {
         default: g(() => [
-          b(t) ? (d(), w(oe, {
+          b(o) ? (u(), w(oe, {
             key: 0,
             dim: a.dim,
             blur: a.blur,
@@ -360,37 +311,39 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
             default: g(() => [
               m("div", {
                 class: "modal relative grid grid-rows-[1.875rem_1fr_2.5rem] $ui-base max-h-[calc(100vh-6.25rem)] max-w-[calc(100vw-6.25rem)] min-h-6.25rem min-w-12.5rem gap-2.5 rounded-md bg-white px6 py4.5 color-gray-800 shadow-2xl transition-transform transition-duration-300 dark:bg-gray-900 dark:color-gray-200",
-                style: N({
+                style: j({
                   width: e.width,
                   height: e.height
                 })
               }, [
-                m("div", Fe, [
-                  m("div", He, [
+                m("div", Le, [
+                  m("div", Re, [
                     v(a.$slots, "title", {}, () => [
-                      B(V(e.title), 1)
+                      _(B(e.title), 1)
                     ])
                   ]),
-                  a.closable ? (d(), f("div", {
+                  a.closable ? (u(), f("div", {
                     key: 0,
                     class: "h6 w6 $ui-fcc cursor-pointer rounded-full transition-colors hover:bg-primary-100 dark:hover:bg-gray-700",
                     onClick: r
-                  }, je)) : $("", !0)
+                  }, i[0] || (i[0] = [
+                    m("div", { class: "i-carbon-close" }, null, -1)
+                  ]))) : $("", !0)
                 ]),
-                m("div", xe, [
+                m("div", Fe, [
                   v(a.$slots, "default")
                 ]),
-                m("div", Ae, [
+                m("div", He, [
                   v(a.$slots, "footer", {}, () => [
                     v(a.$slots, "footer", {}, () => [
-                      m("div", Oe, [
-                        _(M, {
+                      m("div", Ne, [
+                        C(M, {
                           type: "primary",
                           onClick: r
                         }, {
-                          default: g(() => [
-                            B(" close ")
-                          ]),
+                          default: g(() => i[1] || (i[1] = [
+                            _(" close ")
+                          ])),
                           _: 1
                         })
                       ])
@@ -406,133 +359,291 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
       })
     ], 8, ["to"])) : $("", !0);
   }
-}), Ue = ["type", "placeholder", "disabled"], Ke = {
-  key: 3,
-  class: "pointer-events-none absolute bottom--0.25 left-50% right-50% z-9999 h-0.75 bg-primary-500 opacity-0 transition-all duration-240 group-[&.focused]:left-0 group-[&.focused]:right-0 group-[&.focused]:opacity-100 group-[&.accent.focused]:bg-accent-500"
-}, L = "transition-colors $ui-fcc color-gray-500 dark:color-gray-300 group-[&.focused]:color-primary-500; group-[&.accent.focused]:color-accent-500", Ye = /* @__PURE__ */ y({
-  __name: "Input",
+}), xe = { class: "$ui-fec gap2.5" }, pt = /* @__PURE__ */ h({
+  __name: "Confirm",
   props: {
-    modelValue: {},
-    placeholder: { default: "" },
-    variant: { default: "normal" },
-    disabled: { type: Boolean, default: !1 },
-    leftIcon: {},
-    rightIcon: {},
+    modelValue: { type: Boolean },
+    content: {},
+    cancelText: { default: "Cancel" },
+    confirmText: { default: "Confirm" },
+    width: { default: "20%" },
+    height: { default: "9rem" },
+    title: { default: "Warning" },
     loading: { type: Boolean, default: !1 },
-    autoFocus: { type: Boolean, default: !1 },
-    loadingDebounceTime: { default: 0 },
-    readonly: { type: Boolean, default: !1 },
-    type: { default: "text" }
+    autoClose: { type: Boolean, default: !0 }
   },
-  emits: ["update:modelValue", "updateFocused", "keyTab"],
-  setup(l, { emit: o }) {
-    const e = l, s = o, t = T(e, "modelValue", s), n = fe(k(() => e.loading), e.loadingDebounceTime), r = ge(!1, {
-      onChanged(u) {
-        s("updateFocused", u);
-      }
-    }), i = k(() => e.variant === "flat" || e.variant === "warning" || e.disabled || e.readonly), a = k(() => e.disabled || n.value), c = S();
-    let p = !1;
-    return E(() => {
-      n.value && r.value ? p = !0 : !n.value && p && (p = !1, j(() => {
-        r.value = !0;
-      }));
-    }), z(() => {
-      e.autoFocus && (r.value = !0);
-    }), E(() => {
-      var u;
-      r.value && ((u = c.value) == null || u.focus());
-    }), (u, C) => (d(), f("div", {
-      class: h(["group relative w-50 w-auto flex items-center justify-between gap-0.5 overflow-hidden b-1 rounded-1 px3 py-0.75 color-gray-800 dark:color-gray-100", [
-        {
-          "border-none bg-transparent group": u.variant === "flat",
-          "cursor-not-allowed opacity-50": a.value,
-          accent: u.variant === "accent",
-          focused: b(r)
-        },
-        [
-          u.variant === "warning" ? "border-warning-500 dark:border-warning-300" : "border-primary-100 dark:border-gray-700"
-        ]
-      ]]),
-      onClick: C[2] || (C[2] = () => {
-        r.value = !0;
-      })
-    }, [
-      u.leftIcon ? (d(), f("div", {
-        key: 0,
-        class: h(L)
-      }, [
-        _(F, { icon: u.leftIcon }, null, 8, ["icon"])
-      ])) : $("", !0),
-      x(m("input", {
-        ref_key: "inputRef",
-        ref: c,
-        "onUpdate:modelValue": C[0] || (C[0] = (W) => A(t) ? t.value = W : null),
-        class: "$ui-base w-full bg-transparent color-inherit outline-none placeholder-color-gray-500 dark:placeholder-gray-300",
-        type: u.type,
-        placeholder: u.placeholder,
-        disabled: a.value || u.readonly,
-        onBlur: C[1] || (C[1] = (W) => r.value = !1)
-      }, null, 40, Ue), [
-        [se, b(t)]
+  emits: ["update:modelValue", "confirm", "cancel", "close"],
+  setup(l, { emit: t }) {
+    const e = l, s = t, o = T(e, "modelValue", s);
+    P(() => {
+      o.value || s("close");
+    });
+    function n(r = !1) {
+      (e.autoClose || r) && (o.value = !1);
+    }
+    return (r, d) => (u(), w(je, {
+      modelValue: b(o),
+      "onUpdate:modelValue": d[2] || (d[2] = (a) => x(o) ? o.value = a : null),
+      width: r.width,
+      height: r.height,
+      title: r.title,
+      closable: !1
+    }, {
+      footer: g(() => [
+        m("div", xe, [
+          C(M, {
+            onClick: d[0] || (d[0] = () => {
+              s("cancel"), n(!0);
+            })
+          }, {
+            default: g(() => [
+              _(B(r.cancelText), 1)
+            ]),
+            _: 1
+          }),
+          C(M, {
+            loading: r.loading,
+            type: "primary",
+            onClick: d[1] || (d[1] = () => {
+              s("confirm"), n();
+            })
+          }, {
+            default: g(() => [
+              _(B(r.confirmText), 1)
+            ]),
+            _: 1
+          }, 8, ["loading"])
+        ])
       ]),
-      b(n) ? (d(), f("div", {
-        key: 1,
-        class: h(L)
-      }, [
-        _(te)
-      ])) : u.rightIcon ? (d(), f("div", {
-        key: 2,
-        class: h(L)
-      }, [
-        _(F, { icon: u.rightIcon }, null, 8, ["icon"])
-      ])) : $("", !0),
-      i.value ? $("", !0) : (d(), f("div", Ke))
-    ], 2));
+      default: g(() => [
+        v(r.$slots, "default", { class: "h-auto w-auto" }, () => [
+          _(B(r.content), 1)
+        ])
+      ]),
+      _: 3
+    }, 8, ["modelValue", "width", "height", "title"]));
   }
-}), qe = { class: "$ui-base" }, yt = /* @__PURE__ */ y({
-  __name: "FormField",
+}), Ae = /* @__PURE__ */ h({
+  __name: "Notification",
   props: {
-    modelValue: {},
-    status: { default: "normal" },
-    showMessage: { type: Boolean, default: !0 },
-    message: { default: "" },
-    placeholder: {}
+    message: {},
+    type: { default: "info" },
+    classes: {},
+    duration: { default: 3e3 },
+    placement: { default: "top-center" },
+    onClose: {}
   },
-  emits: ["update:modelValue"],
-  setup(l, { emit: o }) {
-    const e = l, t = T(e, "modelValue", o), n = S(!1), r = k(() => e.message && e.message.length && e.showMessage), i = {
-      normal: "color-gray-600 dark:color-gray-400",
-      warning: "color-warning-500 dark:color-warning-200",
-      danger: "color-danger-500 dark:color-danger-200",
-      success: "color-primary-700 dark:color-primary-500"
-    }, a = {
-      warning: "i-bx:bxs-error",
-      danger: "i-ic-round-error",
-      success: "i-ep:success-filled"
-    };
-    return (c, p) => (d(), f("div", qe, [
-      _(Ye, {
-        modelValue: b(t),
-        "onUpdate:modelValue": p[0] || (p[0] = (u) => A(t) ? t.value = u : null),
-        placeholder: c.placeholder,
-        onUpdateFocused: p[1] || (p[1] = (u) => n.value = u)
-      }, null, 8, ["modelValue", "placeholder"]),
-      m("div", {
-        class: h(["mt2 $ui-base text-3.5", [
-          i[c.status],
-          { "opacity-65": !n.value }
-        ]])
-      }, [
-        c.status !== "normal" && r.value ? (d(), w(F, {
-          key: 0,
-          inline: "",
-          icon: a[c.status]
-        }, null, 8, ["icon"])) : $("", !0),
-        B(" " + V(r.value ? c.message : ""), 1)
-      ], 2)
+  setup(l) {
+    const t = l, e = {
+      success: "i-carbon-checkmark",
+      info: "i-material-symbols-light-info",
+      warning: "i-carbon-warning",
+      error: "i-carbon-close"
+    }, s = {
+      success: "text-primary-500 border-primary-200 dark:text-primary-200 dark:border-primary-500",
+      info: "text-blue-4 border-blue-2 dark:text-blue-2 dark:border-blue-4",
+      warning: "text-amber-4 border-amber-2 dark:border-amber-4",
+      error: "text-red-4 border-red-2 dark:border-red-4"
+    }, o = S(!1);
+    z(() => {
+      o.value = !0, setTimeout(() => {
+        o.value = !1;
+      }, t.duration);
+    });
+    const n = k(() => t.placement.startsWith("top") ? "translate-y--300%" : "translate-y-300%");
+    return (r, d) => (u(), f("div", {
+      class: y(["fixed left-0 right-0 $ui-z-max-override text-center", [
+        { "top-0": r.placement.startsWith("top") },
+        { "bottom-0": r.placement.startsWith("bottom") }
+      ]])
+    }, [
+      C(N, {
+        "enter-from-class": n.value,
+        "leave-to-class": n.value,
+        onAfterLeave: d[0] || (d[0] = () => {
+          var a;
+          o.value || (a = r.onClose) == null || a.call(r);
+        })
+      }, {
+        default: g(() => [
+          o.value ? (u(), f("div", {
+            key: 0,
+            class: "flex transition-all duration-300",
+            style: j({ justifyContent: r.placement.includes("right") ? "right" : r.placement.includes("left") ? "left" : "center" })
+          }, [
+            m("div", {
+              class: y(["m3 flex-inline items-center gap2 b-1 b-1 rounded px4 py1 shadow transition-all duration-300 $ui-bg-base", [r.classes, s[r.type]]])
+            }, [
+              m("div", {
+                class: y(e[r.type])
+              }, null, 2),
+              m("div", null, B(r.message), 1)
+            ], 2)
+          ], 4)) : $("", !0)
+        ]),
+        _: 1
+      }, 8, ["enter-from-class", "leave-to-class"])
+    ], 2));
+  }
+});
+function mt(l) {
+  const t = document.createElement("div");
+  t.classList.add("$ui-z-max-override", "fixed"), document.body.appendChild(t);
+  const e = l.onClose;
+  function s() {
+    U(null, t);
+  }
+  l.onClose = () => {
+    s(), e == null || e(), document.body.removeChild(t);
+  };
+  const o = se(Ae, l);
+  U(o, t);
+}
+const Oe = "__vue-devtools-theme__";
+function We(l = {}) {
+  const t = me({
+    ...l,
+    storageKey: Oe
+  });
+  return {
+    colorMode: t,
+    isDark: k(() => t.value === "dark")
+  };
+}
+const Ue = { class: "$ui-dark-toggle-vtr" }, ft = /* @__PURE__ */ h({
+  __name: "DarkToggle",
+  props: {
+    isDark: { type: Boolean, default: !1 },
+    animation: { type: Boolean, default: !0 },
+    animationDuration: { default: 400 }
+  },
+  setup(l) {
+    const t = l, e = T(t, "isDark"), { colorMode: s } = We({
+      initialValue: e.value ? "dark" : "light",
+      onChanged: (d) => {
+        e.value = d === "dark";
+      }
+    }), o = k({
+      get: () => s.value === "dark",
+      set: (d) => s.value = d ? "dark" : "light"
+    }), n = document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    function r(d) {
+      if (!n || !d || !t.animation) {
+        o.value = !o.value;
+        return;
+      }
+      const a = d.clientX, i = d.clientY, p = Math.hypot(
+        Math.max(a, innerWidth - a),
+        Math.max(i, innerHeight - i)
+      );
+      document.startViewTransition(async () => {
+        o.value = !o.value, await H();
+      }).ready.then(() => {
+        const V = [
+          `circle(0px at ${a}px ${i}px)`,
+          `circle(${p}px at ${a}px ${i}px)`
+        ];
+        document.documentElement.animate(
+          {
+            clipPath: o.value ? [...V].reverse() : V
+          },
+          {
+            duration: t.animationDuration,
+            easing: "ease-in",
+            pseudoElement: o.value ? "::view-transition-old(root)" : "::view-transition-new(root)"
+          }
+        );
+      });
+    }
+    return (d, a) => (u(), f("span", Ue, [
+      v(d.$slots, "default", G(Q({ mode: b(s), isDark: o.value, toggle: r })))
     ]));
   }
-}), Je = { class: "overflow-hidden rounded-lg shadow-lg" }, Xe = /* @__PURE__ */ m("div", { class: "p2 opacity-40" }, " Empty... ", -1), Ge = /* @__PURE__ */ y({
+}), gt = /* @__PURE__ */ h({
+  __name: "Drawer",
+  props: {
+    modelValue: { type: Boolean },
+    mountTo: { default: "body" },
+    placement: { default: "right" },
+    closeOutside: { type: Boolean, default: !0 },
+    closable: { type: Boolean, default: !0 },
+    contentClass: {},
+    permanent: { type: Boolean, default: !1 },
+    contentBlur: { type: Boolean, default: !1 },
+    top: {},
+    dim: { type: Boolean },
+    blur: { type: Boolean },
+    position: {}
+  },
+  emits: ["update:modelValue", "close"],
+  setup(l, { emit: t }) {
+    const e = l, s = t, { height: o } = fe(() => typeof e.top == "string" ? document.querySelector(e.top) : e.top, void 0, { box: "border-box" }), n = T(e, "modelValue", s), r = {
+      left: {
+        class: "left-0 h-full b-r",
+        transition: "[&_.drawer]:translate-x--100%"
+      },
+      right: {
+        class: "right-0 h-full b-l",
+        transition: "[&_.drawer]:translate-x-full"
+      },
+      top: {
+        class: "w-full b-b",
+        transition: "[&_.drawer]:translate-y--100%"
+      },
+      bottom: {
+        class: "bottom-0 w-full b-t",
+        transition: "[&_.drawer]:translate-y-100%"
+      }
+    };
+    ee("Escape", () => {
+      e.closable && (n.value = !1);
+    });
+    const d = k(() => r[e.placement]), a = S(!1);
+    return z(() => a.value = !0), (i, p) => a.value || i.mountTo === "body" ? (u(), w(X, {
+      key: 0,
+      to: i.mountTo
+    }, [
+      C(N, {
+        "enter-from-class": `${d.value.transition}`,
+        "leave-to-class": `${d.value.transition}`
+      }, {
+        default: g(() => [
+          b(n) ? (u(), w(oe, {
+            key: 0,
+            class: y({
+              "pointer-events-none": i.permanent
+            }),
+            dim: i.dim,
+            blur: i.blur,
+            position: i.position,
+            onClick: p[2] || (p[2] = (c) => i.closeOutside && i.closable && (n.value = !1))
+          }, {
+            default: g(() => [
+              m("div", {
+                class: y([[d.value.class, i.contentClass ?? "", i.contentBlur ? "$ui-glass-effect" : "$ui-bg-base"], "drawer pointer-events-auto absolute min-w-25 of-auto $ui-border-base transition-transform transition-duration-300"]),
+                style: j({
+                  top: i.placement === "bottom" ? "auto" : `${b(o)}px`,
+                  height: ["top", "bottom"].includes(i.placement) ? "auto" : `calc(100% - ${b(o)}px)`
+                }),
+                onClick: p[1] || (p[1] = ie(() => {
+                }, ["stop"]))
+              }, [
+                i.closable ? (u(), f("div", {
+                  key: 0,
+                  class: "i-carbon-close absolute right-1.5 top-1.5 $ui-z-max cursor-pointer p1 text-lg $ui-text",
+                  onClick: p[0] || (p[0] = (c) => n.value = !1)
+                })) : $("", !0),
+                v(i.$slots, "default")
+              ], 6)
+            ]),
+            _: 3
+          }, 8, ["class", "dim", "blur", "position"])) : $("", !0)
+        ]),
+        _: 3
+      }, 8, ["enter-from-class", "leave-to-class"])
+    ], 8, ["to"])) : $("", !0);
+  }
+}), Ke = { class: "overflow-hidden rounded-lg shadow-lg" }, Ye = /* @__PURE__ */ h({
   __name: "Dropdown",
   props: {
     label: {},
@@ -547,8 +658,8 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
   },
   emits: ["update:visible"],
   setup(l) {
-    const o = l;
-    return ie("$ui-dropdown-disabled", k(() => o.disabled)), (e, s) => (d(), w(b(ae), {
+    const t = l;
+    return de("$ui-dropdown-disabled", k(() => t.disabled)), (e, s) => (u(), w(b(ae), {
       disabled: e.disabled,
       class: "inline-block w-auto",
       shown: e.shown,
@@ -556,21 +667,21 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
       distance: e.distance + 6,
       placement: e.placement,
       skidding: e.skidding,
-      "onUpdate:shown": s[0] || (s[0] = (t) => e.$emit("update:visible", t)),
-      onClick: s[1] || (s[1] = (t) => {
-        t.stopPropagation();
+      "onUpdate:shown": s[0] || (s[0] = (o) => e.$emit("update:visible", o)),
+      onClick: s[1] || (s[1] = (o) => {
+        o.stopPropagation();
       })
     }, {
-      popper: g(({ hide: t }) => [
-        m("div", Je, [
-          v(e.$slots, "popper", X(G({ hide: t })), () => [
-            Xe
+      popper: g(({ hide: o }) => [
+        m("div", Ke, [
+          v(e.$slots, "popper", G(Q({ hide: o })), () => [
+            s[2] || (s[2] = m("div", { class: "p2 opacity-40" }, " Empty... ", -1))
           ])
         ])
       ]),
       default: g(() => [
         v(e.$slots, "default", {}, () => [
-          _(M, D({
+          C(M, D({
             ...e.buttonProps,
             disabled: e.disabled
           }, { class: e.buttonClass }), Z({
@@ -585,7 +696,7 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
             e.label ? {
               name: "default",
               fn: g(() => [
-                B(V(e.label), 1)
+                _(B(e.label), 1)
               ]),
               key: "0"
             } : void 0
@@ -595,7 +706,7 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
       _: 3
     }, 8, ["disabled", "shown", "triggers", "distance", "placement", "skidding"]));
   }
-}), kt = /* @__PURE__ */ y({
+}), vt = /* @__PURE__ */ h({
   __name: "DropdownButton",
   props: {
     type: {},
@@ -608,9 +719,9 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
     keepOpen: { type: Boolean, default: !1 }
   },
   setup(l) {
-    const o = l, e = de("$ui-dropdown-disabled", void 0);
-    return (s, t) => x((d(), w(M, D({
-      ...o,
+    const t = l, e = ue("$ui-dropdown-disabled", void 0);
+    return (s, o) => A((u(), w(M, D({
+      ...t,
       round: !1
     }, {
       disabled: b(e),
@@ -627,71 +738,161 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
       [b(Y)]
     ]);
   }
-}), Qe = { class: "$ui-fec gap2.5" }, wt = /* @__PURE__ */ y({
-  __name: "Confirm",
+}), F = /* @__PURE__ */ h({
+  __name: "Icon",
   props: {
-    modelValue: { type: Boolean },
-    content: {},
-    cancelText: { default: "Cancel" },
-    confirmText: { default: "Confirm" },
-    width: { default: "20%" },
-    height: { default: "9rem" },
-    title: { default: "Warning" },
+    icon: {},
+    inline: { type: Boolean },
+    action: { type: Boolean, default: !1 }
+  },
+  setup(l) {
+    return (t, e) => (u(), w(J(t.inline ? "span" : "div"), {
+      class: y(["$ui-base", [t.icon, t.action ? "cursor-pointer hover:op50" : ""]])
+    }, null, 8, ["class"]));
+  }
+}), qe = ["type", "placeholder", "disabled"], Je = {
+  key: 3,
+  class: "pointer-events-none absolute bottom--0.25 left-50% right-50% z-9999 h-0.75 bg-primary-500 opacity-0 transition-all duration-240 group-[&.focused]:left-0 group-[&.focused]:right-0 group-[&.focused]:opacity-100 group-[&.accent.focused]:bg-accent-500"
+}, L = "transition-colors $ui-fcc color-gray-500 dark:color-gray-300 group-[&.focused]:color-primary-500; group-[&.accent.focused]:color-accent-500", Xe = /* @__PURE__ */ h({
+  __name: "Input",
+  props: {
+    modelValue: {},
+    placeholder: { default: "" },
+    variant: { default: "normal" },
+    disabled: { type: Boolean, default: !1 },
+    leftIcon: {},
+    rightIcon: {},
     loading: { type: Boolean, default: !1 },
-    autoClose: { type: Boolean, default: !0 }
+    autoFocus: { type: Boolean, default: !1 },
+    loadingDebounceTime: { default: 0 },
+    readonly: { type: Boolean, default: !1 },
+    type: { default: "text" }
   },
-  emits: ["update:modelValue", "confirm", "cancel", "close"],
-  setup(l, { emit: o }) {
-    const e = l, s = o, t = T(e, "modelValue", s);
-    E(() => {
-      t.value || s("close");
-    });
-    function n(r = !1) {
-      (e.autoClose || r) && (t.value = !1);
-    }
-    return (r, i) => (d(), w(We, {
-      modelValue: b(t),
-      "onUpdate:modelValue": i[2] || (i[2] = (a) => A(t) ? t.value = a : null),
-      width: r.width,
-      height: r.height,
-      title: r.title,
-      closable: !1
-    }, {
-      footer: g(() => [
-        m("div", Qe, [
-          _(M, {
-            onClick: i[0] || (i[0] = () => {
-              s("cancel"), n(!0);
-            })
-          }, {
-            default: g(() => [
-              B(V(r.cancelText), 1)
-            ]),
-            _: 1
-          }),
-          _(M, {
-            loading: r.loading,
-            type: "primary",
-            onClick: i[1] || (i[1] = () => {
-              s("confirm"), n();
-            })
-          }, {
-            default: g(() => [
-              B(V(r.confirmText), 1)
-            ]),
-            _: 1
-          }, 8, ["loading"])
-        ])
-      ]),
-      default: g(() => [
-        v(r.$slots, "default", { class: "h-auto w-auto" }, () => [
-          B(V(r.content), 1)
-        ])
+  emits: ["update:modelValue", "updateFocused", "keyTab"],
+  setup(l, { emit: t }) {
+    const e = l, s = t, o = T(e, "modelValue", s), n = ge(k(() => e.loading), e.loadingDebounceTime), r = ve(!1, {
+      onChanged(c) {
+        s("updateFocused", c);
+      }
+    }), d = k(() => e.variant === "flat" || e.variant === "warning" || e.disabled || e.readonly), a = k(() => e.disabled || n.value), i = S();
+    let p = !1;
+    return P(() => {
+      n.value && r.value ? p = !0 : !n.value && p && (p = !1, H(() => {
+        r.value = !0;
+      }));
+    }), z(() => {
+      e.autoFocus && (r.value = !0);
+    }), P(() => {
+      var c;
+      r.value && ((c = i.value) == null || c.focus());
+    }), (c, V) => (u(), f("div", {
+      class: y(["group relative w-50 w-auto flex items-center justify-between gap-0.5 overflow-hidden b-1 rounded-1 px3 py-0.75 color-gray-800 dark:color-gray-100", [
+        {
+          "border-none bg-transparent group": c.variant === "flat",
+          "cursor-not-allowed opacity-50": a.value,
+          accent: c.variant === "accent",
+          focused: b(r)
+        },
+        [
+          c.variant === "warning" ? "border-warning-500 dark:border-warning-300" : "border-primary-100 dark:border-gray-700"
+        ]
+      ]]),
+      onClick: V[2] || (V[2] = () => {
+        r.value = !0;
+      })
+    }, [
+      c.leftIcon ? (u(), f("div", {
+        key: 0,
+        class: y(L)
+      }, [
+        C(F, { icon: c.leftIcon }, null, 8, ["icon"])
+      ])) : $("", !0),
+      A(m("input", {
+        ref_key: "inputRef",
+        ref: i,
+        "onUpdate:modelValue": V[0] || (V[0] = (W) => x(o) ? o.value = W : null),
+        class: "$ui-base w-full bg-transparent color-inherit outline-none placeholder-color-gray-500 dark:placeholder-gray-300",
+        type: c.type,
+        placeholder: c.placeholder,
+        disabled: a.value || c.readonly,
+        onBlur: V[1] || (V[1] = (W) => r.value = !1)
+      }, null, 40, qe), [
+        [ce, b(o)]
       ]),
-      _: 3
-    }, 8, ["modelValue", "width", "height", "title"]));
+      b(n) ? (u(), f("div", {
+        key: 1,
+        class: y(L)
+      }, [
+        C(te)
+      ])) : c.rightIcon ? (u(), f("div", {
+        key: 2,
+        class: y(L)
+      }, [
+        C(F, { icon: c.rightIcon }, null, 8, ["icon"])
+      ])) : $("", !0),
+      d.value ? $("", !0) : (u(), f("div", Je))
+    ], 2));
+  }
+}), Ge = { class: "$ui-base" }, bt = /* @__PURE__ */ h({
+  __name: "FormField",
+  props: {
+    modelValue: {},
+    status: { default: "normal" },
+    showMessage: { type: Boolean, default: !0 },
+    message: { default: "" },
+    placeholder: {}
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: t }) {
+    const e = l, o = T(e, "modelValue", t), n = S(!1), r = k(() => e.message && e.message.length && e.showMessage), d = {
+      normal: "color-gray-600 dark:color-gray-400",
+      warning: "color-warning-500 dark:color-warning-200",
+      danger: "color-danger-500 dark:color-danger-200",
+      success: "color-primary-700 dark:color-primary-500"
+    }, a = {
+      warning: "i-bx:bxs-error",
+      danger: "i-ic-round-error",
+      success: "i-ep:success-filled"
+    };
+    return (i, p) => (u(), f("div", Ge, [
+      C(Xe, {
+        modelValue: b(o),
+        "onUpdate:modelValue": p[0] || (p[0] = (c) => x(o) ? o.value = c : null),
+        placeholder: i.placeholder,
+        onUpdateFocused: p[1] || (p[1] = (c) => n.value = c)
+      }, null, 8, ["modelValue", "placeholder"]),
+      m("div", {
+        class: y(["mt2 $ui-base text-3.5", [
+          d[i.status],
+          { "opacity-65": !n.value }
+        ]])
+      }, [
+        i.status !== "normal" && r.value ? (u(), w(F, {
+          key: 0,
+          inline: "",
+          icon: a[i.status]
+        }, null, 8, ["icon"])) : $("", !0),
+        _(" " + B(r.value ? i.message : ""), 1)
+      ], 2)
+    ]));
   }
-}), Ze = { class: "m1 min-w-35 w-auto flex flex-col" }, et = ["onClick"], tt = /* @__PURE__ */ m("div", { class: "i-mdi-chevron-down" }, null, -1), $t = /* @__PURE__ */ y({
+}), Qe = ["innerHTML"], yt = /* @__PURE__ */ h({
+  __name: "IcIcon",
+  props: {
+    name: {}
+  },
+  setup(l) {
+    const t = l, e = k(() => ke[t.name] ?? "");
+    return (s, o) => (u(), f("div", null, [
+      (u(), f("svg", {
+        class: "custom-svg h-1em w-1em",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        innerHTML: e.value
+      }, null, 8, Qe))
+    ]));
+  }
+}), Ze = { class: "m1 min-w-35 w-auto flex flex-col" }, et = ["onClick"], ht = /* @__PURE__ */ h({
   __name: "Select",
   props: {
     modelValue: {},
@@ -704,44 +905,44 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
     buttonProps: { default: () => ({}) }
   },
   emits: ["update:modelValue"],
-  setup(l, { emit: o }) {
-    const e = l, s = o, t = q(), n = k({
+  setup(l, { emit: t }) {
+    const e = l, s = t, o = q(), n = k({
       get: () => e.modelValue,
       set: (a) => s("update:modelValue", a)
     }), r = k(() => {
-      const a = e.options.find((c) => c.value === n.value);
+      const a = e.options.find((i) => i.value === n.value);
       return a != null && a.label ? e.labelRenderer(a.label) : e.placeholder;
     });
-    function i(a) {
-      e.multiple ? n.value = n.value.includes(a.value) ? n.value.filter((c) => c !== a.value) : [...n.value, a.value] : n.value = a.value;
+    function d(a) {
+      e.multiple ? n.value = n.value.includes(a.value) ? n.value.filter((i) => i !== a.value) : [...n.value, a.value] : n.value = a.value;
     }
-    return (a, c) => (d(), w(Ge, D({ label: r.value }, {
+    return (a, i) => (u(), w(Ye, D({ label: r.value }, {
       buttonProps: a.buttonProps,
       disabled: a.disabled
     }), Z({
       popper: g(() => [
         m("div", Ze, [
-          b(t).item ? (d(!0), f(P, { key: 0 }, R(a.options, (p) => (d(), f("div", {
+          b(o).item ? (u(!0), f(E, { key: 0 }, R(a.options, (p) => (u(), f("div", {
             key: p.value,
             class: "cursor-pointer",
-            onClick: (u) => i(p)
+            onClick: (c) => d(p)
           }, [
             v(a.$slots, "item", D({ ref_for: !0 }, {
               item: p,
               active: a.multiple ? n.value.includes(p.value) : p.value === n.value,
               disabled: a.disabled
             }))
-          ], 8, et))), 128)) : (d(!0), f(P, { key: 1 }, R(a.options, (p) => x((d(), w(M, {
+          ], 8, et))), 128)) : (u(!0), f(E, { key: 1 }, R(a.options, (p) => A((u(), w(M, {
             key: p.value,
             disabled: a.disabled,
             round: "normal",
-            class: h(["flex-[auto_1_1] not-hover:[&:not(.active)]:bg-transparent!", {
+            class: y(["flex-[auto_1_1] not-hover:[&:not(.active)]:bg-transparent!", {
               active: a.multiple ? n.value.includes(p.value) : p.value === n.value
             }]),
-            onClick: (u) => i(p)
+            onClick: (c) => d(p)
           }, {
             default: g(() => [
-              B(V(p.label), 1)
+              _(B(p.label), 1)
             ]),
             _: 2
           }, 1032, ["disabled", "class", "onClick"])), [
@@ -750,11 +951,11 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
         ])
       ]),
       "button-icon-right": g(() => [
-        tt
+        i[0] || (i[0] = m("div", { class: "i-mdi-chevron-down" }, null, -1))
       ]),
       _: 2
     }, [
-      b(t).button ? {
+      b(o).button ? {
         name: "default",
         fn: g(() => [
           v(a.$slots, "button")
@@ -763,30 +964,30 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
       } : void 0
     ]), 1040, ["label"]));
   }
-}), _t = /* @__PURE__ */ y({
+}), kt = /* @__PURE__ */ h({
   __name: "Switch",
   props: {
     modelValue: { type: Boolean },
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(l, { emit: o }) {
-    const t = T(l, "modelValue", o), n = ve(t);
-    return (r, i) => (d(), f("div", {
-      class: h([[
+  setup(l, { emit: t }) {
+    const o = T(l, "modelValue", t), n = be(o);
+    return (r, d) => (u(), f("div", {
+      class: y([[
         r.disabled ? "cursor-not-allowed" : "cursor-pointer"
       ], "$ui-base $ui-if-sc cursor-pointer select-none gap1.25 vertical-mid text-3.5"]),
       role: "checkbox",
-      onClick: i[0] || (i[0] = (a) => !r.disabled && b(n)())
+      onClick: d[0] || (d[0] = (a) => !r.disabled && b(n)())
     }, [
       v(r.$slots, "default"),
       m("div", {
-        class: h([{
-          selected: b(t)
+        class: y([{
+          selected: b(o)
         }, "group relative $ui-base h4 w8 rounded-2 bg-primary-100 transition-colors dark:bg-gray-700 [&.selected]:bg-primary-500!"])
       }, [
         m("div", {
-          class: h(["h4 w4 rounded-full bg-primary-800 transition-transform group-[&.selected]:transform-translate-x-4 dark:bg-white", [
+          class: y(["h4 w4 rounded-full bg-primary-800 transition-transform group-[&.selected]:transform-translate-x-4 dark:bg-white", [
             { "group-hover:opacity-75 group-active:scale-85": !r.disabled },
             { "opacity-65": r.disabled }
           ]])
@@ -794,113 +995,7 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
       ], 2)
     ], 2));
   }
-}), Ct = /* @__PURE__ */ y({
-  __name: "Checkbox",
-  props: {
-    modelValue: { type: Boolean },
-    variant: { default: "normal" }
-  },
-  emits: ["update:modelValue"],
-  setup(l, { emit: o }) {
-    const t = T(l, "modelValue", o);
-    return (n, r) => (d(), f("div", {
-      class: h(["relative $ui-base h5 w5 $ui-inline-fcc cursor-pointer border-0.125rem rounded-1.25 transition-colors duration-200 ease-in-out", [
-        b(t) ? n.variant === "normal" ? "bg-primary-500 border-primary-200 dark:border-primary-100" : "bg-accent-500 border-accent-200 dark:border-accent-100" : ""
-      ]]),
-      onClick: r[0] || (r[0] = (i) => t.value = !b(t))
-    }, [
-      m("div", {
-        class: h([[
-          b(t) ? "opacity-100" : "opacity-0"
-        ], "h-60% w-35% transform-translate-y--0.25 transform-rotate-45 border-width-[0_0.125rem_0.125rem_0] border-white border-solid transition-opacity duration-200 ease-in-out"])
-      }, null, 2)
-    ], 2));
-  }
-}), Vt = /* @__PURE__ */ y({
-  __name: "Drawer",
-  props: {
-    modelValue: { type: Boolean },
-    mountTo: { default: "body" },
-    placement: { default: "right" },
-    closeOutside: { type: Boolean, default: !0 },
-    closable: { type: Boolean, default: !0 },
-    contentClass: {},
-    permanent: { type: Boolean, default: !1 },
-    contentBlur: { type: Boolean, default: !1 },
-    top: {},
-    dim: { type: Boolean },
-    blur: { type: Boolean },
-    position: {}
-  },
-  emits: ["update:modelValue", "close"],
-  setup(l, { emit: o }) {
-    const e = l, s = o, { height: t } = be(() => typeof e.top == "string" ? document.querySelector(e.top) : e.top, void 0, { box: "border-box" }), n = T(e, "modelValue", s), r = {
-      left: {
-        class: "left-0 h-full b-r",
-        transition: "[&_.drawer]:translate-x--100%"
-      },
-      right: {
-        class: "right-0 h-full b-l",
-        transition: "[&_.drawer]:translate-x-full"
-      },
-      top: {
-        class: "w-full b-b",
-        transition: "[&_.drawer]:translate-y--100%"
-      },
-      bottom: {
-        class: "bottom-0 w-full b-t",
-        transition: "[&_.drawer]:translate-y-100%"
-      }
-    };
-    ee("Escape", () => {
-      e.closable && (n.value = !1);
-    });
-    const i = k(() => r[e.placement]), a = S(!1);
-    return z(() => a.value = !0), (c, p) => a.value || c.mountTo === "body" ? (d(), w(Q, {
-      key: 0,
-      to: c.mountTo
-    }, [
-      _(H, {
-        "enter-from-class": `${i.value.transition}`,
-        "leave-to-class": `${i.value.transition}`
-      }, {
-        default: g(() => [
-          b(n) ? (d(), w(oe, {
-            key: 0,
-            class: h({
-              "pointer-events-none": c.permanent
-            }),
-            dim: c.dim,
-            blur: c.blur,
-            position: c.position,
-            onClick: p[2] || (p[2] = (u) => c.closeOutside && c.closable && (n.value = !1))
-          }, {
-            default: g(() => [
-              m("div", {
-                class: h([[i.value.class, c.contentClass ?? "", c.contentBlur ? "$ui-glass-effect" : "$ui-bg-base"], "drawer pointer-events-auto absolute min-w-25 of-auto $ui-border-base transition-transform transition-duration-300"]),
-                style: N({
-                  top: c.placement === "bottom" ? "auto" : `${b(t)}px`,
-                  height: ["top", "bottom"].includes(c.placement) ? "auto" : `calc(100% - ${b(t)}px)`
-                }),
-                onClick: p[1] || (p[1] = ue(() => {
-                }, ["stop"]))
-              }, [
-                c.closable ? (d(), f("div", {
-                  key: 0,
-                  class: "i-carbon-close absolute right-1.5 top-1.5 $ui-z-max cursor-pointer p1 text-lg $ui-text",
-                  onClick: p[0] || (p[0] = (u) => n.value = !1)
-                })) : $("", !0),
-                v(c.$slots, "default")
-              ], 6)
-            ]),
-            _: 3
-          }, 8, ["class", "dim", "blur", "position"])) : $("", !0)
-        ]),
-        _: 3
-      }, 8, ["enter-from-class", "leave-to-class"])
-    ], 8, ["to"])) : $("", !0);
-  }
-}), Bt = /* @__PURE__ */ y({
+}), wt = /* @__PURE__ */ h({
   __name: "Tooltip",
   props: {
     trigger: {},
@@ -911,139 +1006,44 @@ const ht = /* @__PURE__ */ O(ze, [["render", Re]]), oe = /* @__PURE__ */ y({
     shown: { type: Boolean }
   },
   setup(l) {
-    return (o, e) => (d(), w(b(re), D({
-      disabled: o.disabled,
-      placement: o.placement
-    }, o.$attrs), {
+    return (t, e) => (u(), w(b(re), D({
+      disabled: t.disabled,
+      placement: t.placement
+    }, t.$attrs), {
       popper: g(() => [
-        v(o.$slots, "popper")
+        v(t.$slots, "popper")
       ]),
       default: g(() => [
-        v(o.$slots, "default")
+        v(t.$slots, "default")
       ]),
       _: 3
     }, 16, ["disabled", "placement"]));
   }
-}), ot = ["innerHTML"], Tt = /* @__PURE__ */ y({
-  __name: "IcIcon",
-  props: {
-    name: {}
-  },
-  setup(l) {
-    const o = l, e = k(() => he[o.name] ?? "");
-    return (s, t) => (d(), f("div", null, [
-      (d(), f("svg", {
-        class: "custom-svg h-1em w-1em",
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 24 24",
-        innerHTML: e.value
-      }, null, 8, ot))
-    ]));
-  }
-}), I = ce();
-let K = null;
-function at(l, o = "text") {
-  var s;
-  if (!K && !I.value) {
-    const t = ye();
-    K = ke({
-      themes: [
-        import("shiki/themes/vitesse-dark.mjs"),
-        import("shiki/themes/vitesse-light.mjs")
-      ],
-      langs: [
-        import("shiki/langs/json.mjs"),
-        import("shiki/langs/yaml.mjs"),
-        import("shiki/langs/css.mjs"),
-        import("shiki/langs/javascript.mjs"),
-        import("shiki/langs/typescript.mjs"),
-        import("shiki/langs/vue.mjs"),
-        import("shiki/langs/vue-html.mjs"),
-        import("shiki/langs/html.mjs"),
-        import("shiki/langs/diff.mjs"),
-        import("shiki/langs/shellscript.mjs")
-      ],
-      engine: t
-    }).then((n) => {
-      I.value = n;
-    });
-  }
-  const e = (s = I.value) == null ? void 0 : s.getLoadedLanguages().includes(o);
-  return e ? {
-    code: I.value.codeToHtml(l, {
-      lang: o,
-      themes: {
-        dark: "vitesse-dark",
-        light: "vitesse-light"
-      }
-    }),
-    supported: !0
-  } : {
-    code: l,
-    supported: e
-  };
-}
-const rt = ["innerHTML"], nt = { class: "shiki" }, lt = ["textContent"], st = /* @__PURE__ */ m("br", null, null, -1), Dt = /* @__PURE__ */ y({
-  __name: "CodeBlock",
-  props: {
-    code: {},
-    lang: {},
-    lines: { type: Boolean, default: !0 },
-    transformRendered: {}
-  },
-  emits: ["loaded"],
-  setup(l, { emit: o }) {
-    const e = l, s = o, t = k(() => {
-      const n = e.lang === "text" ? { code: e.code, supported: !1 } : at(e.code, e.lang) || { code: e.code, supported: !1 };
-      return n.supported && e.transformRendered && (n.code = e.transformRendered(n.code)), n.supported && j(() => s("loaded")), n;
-    });
-    return (n, r) => n.lang && t.value.supported ? (d(), f("pre", {
-      key: 0,
-      class: h(["code-block", n.lines ? "code-block-lines" : ""]),
-      innerHTML: t.value.code
-    }, null, 10, rt)) : (d(), f("pre", {
-      key: 1,
-      class: h(["code-block", n.lines ? "code-block-lines" : ""])
-    }, [
-      m("pre", nt, [
-        m("code", null, [
-          (d(!0), f(P, null, R(n.code.split(`
-`), (i, a) => (d(), f(P, { key: a }, [
-            m("span", {
-              class: "line",
-              textContent: V(i)
-            }, null, 8, lt),
-            st
-          ], 64))), 128))
-        ])
-      ])
-    ], 2));
-  }
 });
 export {
-  Ie as THEME_KEY,
-  gt as VueBadge,
+  Oe as THEME_KEY,
+  it as VueBadge,
   M as VueButton,
-  ht as VueCard,
-  Ct as VueCheckbox,
-  Dt as VueCodeBlock,
-  wt as VueConfirm,
-  bt as VueDarkToggle,
-  We as VueDialog,
-  Vt as VueDrawer,
-  Ge as VueDropdown,
-  kt as VueDropdownButton,
-  yt as VueFormField,
-  Tt as VueIcIcon,
+  dt as VueCard,
+  ut as VueCheckbox,
+  ct as VueCodeBlock,
+  pt as VueConfirm,
+  ft as VueDarkToggle,
+  je as VueDialog,
+  gt as VueDrawer,
+  Ye as VueDropdown,
+  vt as VueDropdownButton,
+  bt as VueFormField,
+  yt as VueIcIcon,
   F as VueIcon,
-  Ye as VueInput,
+  Xe as VueInput,
   te as VueLoadingIndicator,
-  Se as VueNotification,
+  Ae as VueNotification,
   oe as VueOverlay,
-  $t as VueSelect,
-  _t as VueSwitch,
-  Bt as VueTooltip,
-  vt as showVueNotification,
-  Ee as useDevToolsColorMode,
-  It as vTooltip
+  ht as VueSelect,
+  kt as VueSwitch,
+  wt as VueTooltip,
+  mt as showVueNotification,
+  We as useDevToolsColorMode,
+  Vt as vTooltip
 };