@roku-ui/vue 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,5 +1,73 @@
-import { defineComponent as C, computed as m, useAttrs as ht, openBlock as g, createBlock as j, resolveDynamicComponent as _e, mergeProps as Ne, unref as c, withCtx as J, renderSlot as P, createCommentVNode as z, getCurrentScope as pt, onScopeDispose as mt, onMounted as ie, nextTick as gt, getCurrentInstance as Ke, watch as le, ref as b, shallowRef as vt, readonly as bt, mergeModels as ee, useModel as ge, watchEffect as q, createElementBlock as y, createElementVNode as S, normalizeClass as w, withModifiers as Qe, normalizeStyle as T, Fragment as te, renderList as he, toDisplayString as re, withDirectives as Je, vModelCheckbox as yt, reactive as wt, inject as et, provide as Fe, createTextVNode as _t, Teleport as xt, createVNode as Ve, Transition as kt, withKeys as St, useSlots as Mt, isRef as At } from "vue";
-const Ct = /* @__PURE__ */ C({
+import { defineComponent as x, openBlock as m, createElementBlock as b, normalizeStyle as A, renderSlot as M, computed as v, ref as g, onMounted as ne, Fragment as ee, createBlock as P, resolveDynamicComponent as de, mergeProps as we, unref as c, createCommentVNode as T, withCtx as L, normalizeClass as y, createElementVNode as w, mergeModels as Z, useModel as Q, inject as Qe, watchEffect as G, provide as We, useAttrs as gt, withDirectives as Pe, vModelText as yt, createVNode as Y, Teleport as wt, Transition as Je, getCurrentScope as _t, onScopeDispose as xt, nextTick as et, getCurrentInstance as tt, watch as fe, shallowRef as kt, readonly as St, useSlots as Mt, toDisplayString as se, renderList as be, withModifiers as rt, withKeys as $t, reactive as Ct, vModelCheckbox as At, isRef as Tt, createTextVNode as Rt } from "vue";
+const Rn = /* @__PURE__ */ x({
+  __name: "AspectRatio",
+  props: {
+    ratio: { default: 1 },
+    width: {},
+    maxWidth: {},
+    height: {},
+    maxHeight: {}
+  },
+  setup(e) {
+    return (t, r) => (m(), b("div", {
+      style: A({
+        "--ar-ratio": t.ratio,
+        width: t.width,
+        "max-width": t.maxWidth,
+        height: t.height,
+        "max-height": t.maxHeight
+      }),
+      class: "relative children:absolute children:top-0 before:block before:h-0 children:h-full children:w-full before:pb-[calc((1/var(--ar-ratio,1))*100%)] before:content-['']"
+    }, [
+      M(t.$slots, "default")
+    ], 4));
+  }
+}), zt = /* @__PURE__ */ x({
+  __name: "Avatar",
+  props: {
+    is: { default: "img" },
+    src: {},
+    size: { default: "md" },
+    style: {},
+    class: {}
+  },
+  setup(e) {
+    const t = e, r = v(() => {
+      switch (t.size) {
+        case "sm":
+          return "--size: 1.5rem;";
+        case "md":
+          return "--size: 2rem;";
+        case "lg":
+          return "--size: 3rem;";
+        default:
+          return typeof t.size == "number" || !Number.isNaN(Number(t.size)) ? `--size: ${t.size}rem;` : `--size: ${t.size};`;
+      }
+    }), n = g(!1), a = g(null);
+    function o() {
+      n.value = !0;
+    }
+    return ne(() => {
+      var s;
+      (s = a.value) != null && s.complete && o();
+    }), (s, i) => (m(), b(ee, null, [
+      s.src ? (m(), P(de(s.is), we({
+        key: 0,
+        ref_key: "img",
+        ref: a,
+        style: [s.style, c(r)],
+        placeholder: "",
+        src: s.src,
+        class: ["h-[var(--size)] w-[var(--size)] rounded-full object-cover", [{ hidden: !c(n) }, t.class]]
+      }, s.$attrs, { onLoad: o }), null, 16, ["style", "src", "class"])) : T("", !0),
+      c(n) ? T("", !0) : (m(), b("div", {
+        key: 1,
+        class: "h-[var(--size)] w-[var(--size)] animate-pulse border-transparent rounded-full bg-surface-high object-cover",
+        style: A([s.style, c(r)])
+      }, null, 4))
+    ], 64));
+  }
+}), nt = /* @__PURE__ */ x({
   __name: "Btn",
   props: {
     type: { default: "button" },
@@ -10,10 +78,11 @@ const Ct = /* @__PURE__ */ C({
     variant: {},
     color: {},
     animate: { type: Boolean },
-    rounded: { default: "md" }
+    rounded: { default: "md" },
+    disabled: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, r = m(() => {
+    const t = e, r = v(() => {
       switch (t.rounded) {
         case "none":
           return "rounded-none";
@@ -26,7 +95,7 @@ const Ct = /* @__PURE__ */ C({
         case "full":
           return "rounded-full";
       }
-    }), n = m(() => {
+    }), n = v(() => {
       switch (t.size) {
         case "sm":
           return {
@@ -44,7 +113,7 @@ const Ct = /* @__PURE__ */ C({
             iconContent: "h-10 w-10 p-3"
           };
       }
-    }), a = m(() => {
+    }), a = v(() => {
       switch (t.variant) {
         case "filled":
           switch (t.color) {
@@ -116,636 +185,230 @@ const Ct = /* @__PURE__ */ C({
         default:
           return "btn-default";
       }
-    }), o = ht();
-    return (s, i) => (g(), j(_e(s.is), Ne({
-      "data-size": s.size,
-      type: s.type,
+    });
+    return (o, s) => (m(), P(de(o.is), we({
+      "data-size": o.size,
+      type: o.type,
       class: ["flex items-center justify-center gap-1 decoration-none", [
         c(a),
         c(r),
-        s.icon ? c(n).iconContent : c(n).normalContent,
+        o.icon ? c(n).iconContent : c(n).normalContent,
         {
-          "filter-grayscale": c(o).disabled,
-          "active:translate-y-0.25": !c(o).disabled && s.pressEffect === "translate",
-          "active:scale-98": !c(o).disabled && s.pressEffect === "scale",
-          "transition-all": s.animate
+          "filter-grayscale pointer-events-none": o.disabled,
+          "active:translate-y-0.25": o.pressEffect === "translate",
+          "active:scale-98": o.pressEffect === "scale",
+          "transition-all": o.animate
         }
-      ]]
-    }, s.$attrs), {
-      default: J(() => [
-        s.$slots.leftSection ? P(s.$slots, "leftSection", { key: 0 }) : z("", !0),
-        P(s.$slots, "default"),
-        s.$slots.rightSection ? P(s.$slots, "rightSection", { key: 1 }) : z("", !0)
+      ]],
+      disabled: o.disabled
+    }, o.$attrs), {
+      default: L(() => [
+        o.$slots.leftSection ? M(o.$slots, "leftSection", { key: 0 }) : T("", !0),
+        M(o.$slots, "default"),
+        o.$slots.rightSection ? M(o.$slots, "rightSection", { key: 1 }) : T("", !0)
       ]),
       _: 3
-    }, 16, ["data-size", "type", "class"]));
+    }, 16, ["data-size", "type", "class", "disabled"]));
   }
-});
-function xe(e) {
-  return pt() ? (mt(e), !0) : !1;
-}
-function $t() {
-  const e = /* @__PURE__ */ new Set(), t = (a) => {
-    e.delete(a);
-  };
-  return {
-    on: (a) => {
-      e.add(a);
-      const o = () => t(a);
-      return xe(o), {
-        off: o
-      };
-    },
-    off: t,
-    trigger: (...a) => Promise.all(Array.from(e).map((o) => o(...a)))
-  };
-}
-function Oe(e) {
-  return typeof e == "function" ? e() : c(e);
-}
-const ne = typeof window < "u" && typeof document < "u";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const Tt = (e) => e != null, zt = Object.prototype.toString, Rt = (e) => zt.call(e) === "[object Object]", Et = () => {
-}, Pt = (e, t) => Object.prototype.hasOwnProperty.call(e, t);
-function Nt(e) {
-  return e || Ke();
-}
-function Ot(e, t = !0, r) {
-  Nt() ? ie(e, r) : t ? e() : gt(e);
-}
-function Y(e) {
-  var t;
-  const r = Oe(e);
-  return (t = r == null ? void 0 : r.$el) != null ? t : r;
-}
-const ke = ne ? window : void 0, Ht = ne ? window.document : void 0;
-function D(...e) {
-  let t, r, n, a;
-  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([r, n, a] = e, t = ke) : [t, r, n, a] = e, !t)
-    return Et;
-  Array.isArray(r) || (r = [r]), Array.isArray(n) || (n = [n]);
-  const o = [], s = () => {
-    o.forEach((f) => f()), o.length = 0;
-  }, i = (f, d, h, v) => (f.addEventListener(d, h, v), () => f.removeEventListener(d, h, v)), l = le(
-    () => [Y(t), Oe(a)],
-    ([f, d]) => {
-      if (s(), !f)
-        return;
-      const h = Rt(d) ? { ...d } : d;
-      o.push(
-        ...r.flatMap((v) => n.map((k) => i(f, v, k, h)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), u = () => {
-    l(), s();
-  };
-  return xe(u), u;
-}
-function It(e) {
-  return typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
-}
-function Ce(...e) {
-  let t, r, n = {};
-  e.length === 3 ? (t = e[0], r = e[1], n = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, r = e[0], n = e[1]) : (t = e[0], r = e[1]) : (t = !0, r = e[0]);
-  const {
-    target: a = ke,
-    eventName: o = "keydown",
-    passive: s = !1,
-    dedupe: i = !1
-  } = n, l = It(t);
-  return D(a, o, (f) => {
-    f.repeat && Oe(i) || l(f) && r(f);
-  }, s);
-}
-function Bt() {
-  const e = b(!1);
-  return Ke() && ie(() => {
-    e.value = !0;
-  }), e;
-}
-function tt(e) {
-  const t = Bt();
-  return m(() => (t.value, !!e()));
-}
-function Dt(e, t, r = {}) {
-  const { window: n = ke, ...a } = r;
-  let o;
-  const s = tt(() => n && "MutationObserver" in n), i = () => {
-    o && (o.disconnect(), o = void 0);
-  }, l = le(
-    () => Y(e),
-    (d) => {
-      i(), s.value && n && d && (o = new MutationObserver(t), o.observe(d, a));
-    },
-    { immediate: !0 }
-  ), u = () => o == null ? void 0 : o.takeRecords(), f = () => {
-    i(), l();
-  };
-  return xe(f), {
-    isSupported: s,
-    stop: f,
-    takeRecords: u
-  };
-}
-function Ft(e, t = {}) {
-  const r = b(!1), n = vt(null);
-  let a = 0, o = !0;
-  if (ne) {
-    const s = typeof t == "function" ? { onDrop: t } : t, i = (l) => {
-      var u, f;
-      const d = Array.from((f = (u = l.dataTransfer) == null ? void 0 : u.files) != null ? f : []);
-      return n.value = d.length === 0 ? null : d;
-    };
-    D(e, "dragenter", (l) => {
-      var u, f;
-      const d = Array.from(((u = l == null ? void 0 : l.dataTransfer) == null ? void 0 : u.items) || []).map((h) => h.kind === "file" ? h.type : null).filter(Tt);
-      if (s.dataTypes && l.dataTransfer) {
-        const h = c(s.dataTypes);
-        if (o = typeof h == "function" ? h(d) : h ? h.some((v) => d.includes(v)) : !0, !o)
-          return;
+}), Bt = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [n, a] of t)
+    r[n] = a;
+  return r;
+}, Et = {}, Ot = { class: "flex flex-col gap-4 container" };
+function Nt(e, t) {
+  return m(), b("div", Ot, [
+    M(e.$slots, "default")
+  ]);
+}
+const zn = /* @__PURE__ */ Bt(Et, [["render", Nt]]), Bn = /* @__PURE__ */ x({
+  __name: "ChatMessage",
+  props: {
+    avatar: {},
+    position: { default: "left" },
+    color: {},
+    variant: { default: "default" },
+    withBorder: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, r = v(() => {
+      switch (t.variant) {
+        case "default":
+          return "bg-surface-base";
+        case "filled":
+          switch (t.color) {
+            case "secondary":
+              return "bg-secondary-container text-secondary-on";
+            case "tertiary":
+              return "bg-tertiary-container text-tertiary-on";
+            case "error":
+              return "bg-error-container text-error-on";
+            default:
+              return "bg-primary-container text-primary-on";
+          }
+        case "transparent":
+          return "bg-transparent";
       }
-      l.preventDefault(), a += 1, r.value = !0, (f = s.onEnter) == null || f.call(s, i(l), l);
-    }), D(e, "dragover", (l) => {
-      var u;
-      o && (l.preventDefault(), (u = s.onOver) == null || u.call(s, i(l), l));
-    }), D(e, "dragleave", (l) => {
-      var u;
-      o && (l.preventDefault(), a -= 1, a === 0 && (r.value = !1), (u = s.onLeave) == null || u.call(s, i(l), l));
-    }), D(e, "drop", (l) => {
-      var u;
-      l.preventDefault(), a = 0, r.value = !1, (u = s.onDrop) == null || u.call(s, i(l), l);
     });
+    return (n, a) => {
+      const o = zt;
+      return m(), b("div", {
+        class: y(["flex gap-2", [
+          {
+            "flex-row-reverse": n.position === "right",
+            "flex-row": n.position === "left"
+          }
+        ]])
+      }, [
+        n.$slots.avatar ? M(n.$slots, "avatar", { key: 0 }) : n.avatar ? (m(), P(o, {
+          key: 1,
+          src: n.avatar
+        }, null, 8, ["src"])) : T("", !0),
+        w("div", {
+          class: y(["rounded-xl px-3 py-2 transition-background-color,border-color", [
+            {
+              "rounded-tr": n.position === "right",
+              "rounded-tl": n.position === "left",
+              border: n.withBorder
+            },
+            c(r)
+          ]])
+        }, [
+          M(n.$slots, "default")
+        ], 2)
+      ], 2);
+    };
   }
-  return {
-    files: n,
-    isOverDropZone: r
-  };
-}
-function Vt(e, t, r = {}) {
-  const { window: n = ke, ...a } = r;
-  let o;
-  const s = tt(() => n && "ResizeObserver" in n), i = () => {
-    o && (o.disconnect(), o = void 0);
-  }, l = m(() => Array.isArray(e) ? e.map((d) => Y(d)) : [Y(e)]), u = le(
-    l,
-    (d) => {
-      if (i(), s.value && n) {
-        o = new ResizeObserver(t);
-        for (const h of d)
-          h && o.observe(h, a);
+}), Pt = { class: "w-full flex self-center gap-2 text-center" }, En = /* @__PURE__ */ x({
+  __name: "ChatSystem",
+  props: {
+    position: {},
+    color: {},
+    variant: { default: "default" },
+    withBorder: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, r = v(() => {
+      switch (t.variant) {
+        case "default":
+          return "bg-surface-base";
+        case "fill":
+          switch (t.color) {
+            case "secondary":
+              return "bg-secondary-container text-secondary-on";
+            case "tertiary":
+              return "bg-tertiary-container text-tertiary-on";
+            case "error":
+              return "bg-error-container text-error-on";
+            default:
+              return "bg-primary-container text-primary-on";
+          }
+        case "transparent":
+          return "bg-transparent";
       }
-    },
-    { immediate: !0, flush: "post", deep: !0 }
-  ), f = () => {
-    i(), u();
-  };
-  return xe(f), {
-    isSupported: s,
-    stop: f
-  };
-}
-function Lt(e, t = {}) {
-  const {
-    reset: r = !0,
-    windowResize: n = !0,
-    windowScroll: a = !0,
-    immediate: o = !0
-  } = t, s = b(0), i = b(0), l = b(0), u = b(0), f = b(0), d = b(0), h = b(0), v = b(0);
-  function k() {
-    const M = Y(e);
-    if (!M) {
-      r && (s.value = 0, i.value = 0, l.value = 0, u.value = 0, f.value = 0, d.value = 0, h.value = 0, v.value = 0);
-      return;
-    }
-    const $ = M.getBoundingClientRect();
-    s.value = $.height, i.value = $.bottom, l.value = $.left, u.value = $.right, f.value = $.top, d.value = $.width, h.value = $.x, v.value = $.y;
+    });
+    return (n, a) => (m(), b("div", Pt, [
+      w("div", {
+        class: y(["w-full rounded-xl px-3 py-2 transition-background-color,border-color", [
+          c(r)
+        ]])
+      }, [
+        M(n.$slots, "default")
+      ], 2)
+    ]));
   }
-  return Vt(e, k), le(() => Y(e), (M) => !M && k()), Dt(e, k, {
-    attributeFilter: ["style", "class"]
-  }), a && D("scroll", k, { capture: !0, passive: !0 }), n && D("resize", k, { passive: !0 }), Ot(() => {
-    o && k();
-  }), {
-    height: s,
-    bottom: i,
-    left: l,
-    right: u,
-    top: f,
-    width: d,
-    x: h,
-    y: v,
-    update: k
-  };
-}
-const Wt = {
-  multiple: !0,
-  accept: "*",
-  reset: !1,
-  directory: !1
-};
-function jt(e = {}) {
-  const {
-    document: t = Ht
-  } = e, r = b(null), { on: n, trigger: a } = $t();
-  let o;
-  t && (o = t.createElement("input"), o.type = "file", o.onchange = (l) => {
-    const u = l.target;
-    r.value = u.files, a(r.value);
-  });
-  const s = () => {
-    r.value = null, o && (o.value = "", a(null));
-  }, i = (l) => {
-    if (!o)
-      return;
-    const u = {
-      ...Wt,
-      ...e,
-      ...l
-    };
-    o.multiple = u.multiple, o.accept = u.accept, o.webkitdirectory = u.directory, Pt(u, "capture") && (o.capture = u.capture), u.reset && s(), o.click();
-  };
-  return {
-    files: bt(r),
-    open: i,
-    reset: s,
-    onChange: n
-  };
+});
+function J(e) {
+  return v(
+    () => ({ style: Ht(e.rounded), class: "rounded-[var(--r-rounded)]" })
+  );
 }
-function Gt(e, t = {}) {
-  const { initialValue: r = !1, focusVisible: n = !1 } = t, a = b(!1), o = m(() => Y(e));
-  D(o, "focus", (i) => {
-    var l, u;
-    (!n || (u = (l = i.target).matches) != null && u.call(l, ":focus-visible")) && (a.value = !0);
-  }), D(o, "blur", () => a.value = !1);
-  const s = m({
-    get: () => a.value,
-    set(i) {
-      var l, u;
-      !i && a.value ? (l = o.value) == null || l.blur() : i && !a.value && ((u = o.value) == null || u.focus());
-    }
-  });
-  return le(
-    o,
-    () => {
-      s.value = r;
-    },
-    { immediate: !0, flush: "post" }
-  ), { focused: s };
+function Ht(e) {
+  const t = /^-?\d*\.?\d+(px|em|rem|vh|vw|in|cm|mm|pt|pc|%)?$/;
+  switch (e) {
+    case "none":
+      return "--r-rounded: 0";
+    case "sm":
+      return "--r-rounded: 0.125rem";
+    case "md":
+      return "--r-rounded: 0.25rem";
+    case "lg":
+      return "--r-rounded: 0.5rem";
+    case "full":
+      return "--r-rounded: 9999px";
+    default:
+      return typeof e == "string" && t.test(e) ? `--r-rounded: ${e};` : typeof e == "number" || !Number.isNaN(Number(e)) ? `--r-rounded: ${e}rem;` : "rounded-[var(--r-rounded)]";
+  }
 }
-const Ut = { class: "relative inline-block" }, fn = /* @__PURE__ */ C({
-  __name: "Slider",
-  props: /* @__PURE__ */ ee({
+const On = /* @__PURE__ */ x({
+  __name: "Chip",
+  props: /* @__PURE__ */ Z({
+    is: { default: "img" },
+    src: {},
     size: { default: "md" },
-    animate: { type: Boolean, default: !1 },
-    width: { default: 12 },
-    options: {},
-    min: { default: 0 },
-    max: { default: 100 },
-    step: { default: 1 },
-    tickNum: {},
-    color: { default: "primary" }
+    style: {},
+    class: {},
+    rounded: { default: "full" }
   }, {
-    modelValue: {
-      default: void 0
-    },
+    modelValue: { type: Boolean, default: void 0 },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e;
-    function r(A, R, E) {
-      const H = [];
-      for (let U = A; U <= R; U += E)
-        H.push(U);
-      return H[H.length - 1] !== R && H.push(R), H;
-    }
-    function n(A, R) {
-      const E = [];
-      E.push(R[0]);
-      const H = (R.length - 1) / (A - 1);
-      for (let U = 1; U < A - 1; U++)
-        E.push(R[Math.round(U * H)]);
-      return E.push(R[R.length - 1]), E;
-    }
-    const a = m(() => t.options ? t.options.length : t.tickNum ?? 0), o = m(() => t.options === void 0 ? r(t.min, t.max, t.step) : t.options), s = m(() => n(a.value, o.value)), i = ge(e, "modelValue"), l = m(() => o.value.length ?? 0), u = b(o.value.includes(i.value) ? o.value.indexOf(i.value) : 0);
-    function f(A) {
-      return o.value.indexOf(A);
-    }
-    const d = m(() => {
-      switch (t.color) {
-        case "primary":
-          return "bg-primary-container";
-        case "secondary":
-          return "bg-secondary-container";
-        case "tertiary":
-          return "bg-tertiary-container";
-        case "error":
-          return "bg-error-container";
-      }
-    }), h = m(() => `dark:bg-white bg-${t.color}-container`), v = m(() => {
-      switch (t.color) {
-        case "primary":
-          return "dark:bg-primary-container bg-white";
-        case "secondary":
-          return "dark:bg-secondary-container bg-white";
-        case "tertiary":
-          return "dark:bg-tertiary-container bg-white";
-        case "error":
-          return "dark:bg-error-container bg-white";
-      }
-    });
-    q(() => {
-      i.value = o.value[u.value];
-    });
-    const k = b(), M = b(), $ = Lt(k), ce = b(!1);
-    function ue(A) {
-      if (!ce.value)
-        return;
-      if (!(A.buttons === 1)) {
-        ce.value = !1;
-        return;
-      }
-      A.preventDefault(), A.stopPropagation();
-      const { clientX: E } = A, H = $.left.value, ft = $.right.value - H, Ae = Math.round((E - H) / ft * (l.value - 1));
-      Ae < 0 || Ae > l.value - 1 || (u.value = Ae);
-    }
-    q(() => {
-      u.value = f(i.value);
-    });
-    function _(A) {
-      A.preventDefault(), A.stopPropagation(), ce.value = !0, ue(A);
-    }
-    D(k, "pointerdown", _), ie(() => {
-      D(document, "pointermove", ue), u.value = Math.max(0, f(i.value));
-    });
-    const I = m(() => {
+    const t = e, r = Q(e, "modelValue"), n = J(t), a = v(() => {
       switch (t.size) {
         case "sm":
-          return {
-            wrapper: "h-2",
-            innerWrapper: "px-0.5 h-1",
-            content: "h-1",
-            tick: "h-0.5 w-0.5 -translate-x-0.25 -translate-y-0.25",
-            indicator: "h-2 w-2 -translate-x-1 -translate-y-1",
-            indicatorInner: "h-1 w-1 -translate-x-0.5 -translate-y-0.5",
-            progress: "-mx-0.5"
-          };
+          return "px-3 text-sm h-6";
         case "md":
-          return {
-            wrapper: "h-4",
-            innerWrapper: "px-1 h-2",
-            content: "h-2",
-            tick: "h-1 w-1 -translate-x-0.5 -translate-y-0.5",
-            indicator: "h-4 w-4 -translate-x-2 -translate-y-2",
-            indicatorInner: "h-2 w-2 -translate-x-1 -translate-y-1",
-            progress: "-mx-1"
-          };
+          return "px-6 h-8 text-base";
         case "lg":
-          return {
-            wrapper: "h-6",
-            innerWrapper: "px-1.5 h-3",
-            content: "h-3",
-            tick: "h-1.5 w-1.5 -translate-x-0.75 -translate-y-0.75",
-            indicator: "h-6 w-6 -translate-x-3 -translate-y-3",
-            indicatorInner: "h-3 w-3 -translate-x-1.5 -translate-y-1.5",
-            progress: "-mx-1.5"
-          };
+          return "px-8 h-10 text-lg";
       }
-    }), G = m(() => t.animate ? {
-      indicator: "transition-left",
-      progress: "transition-width"
-    } : {
-      indicator: "",
-      progress: ""
-    });
-    return (A, R) => (g(), y("div", Ut, [
-      S("div", {
-        ref_key: "wrapper",
-        ref: k,
-        type: "size",
-        class: w(["flex cursor-pointer items-center", c(I).wrapper]),
-        onTouchmove: R[0] || (R[0] = Qe(() => {
-        }, ["prevent"]))
-      }, [
-        S("div", {
-          class: w(["rounded-full bg-surface-lowest transition-background-color,border-color,color", c(I).innerWrapper])
-        }, [
-          S("div", {
-            class: w(["relative flex", c(I).content]),
-            style: T({
-              width: `${t.width}rem`
-            })
-          }, [
-            (g(!0), y(te, null, he(c(s), (E) => (g(), y("div", {
-              key: E,
-              style: T({
-                left: `${f(E) / (c(l) - 1) * 100}%`
-              }),
-              class: w(["absolute top-50% rounded-full bg-white", c(I).tick])
-            }, null, 6))), 128)),
-            S("div", {
-              ref_key: "indicator",
-              ref: M,
-              class: w(["absolute top-50% cursor-pointer rounded-full transition-background-color,border-color,color", [c(I).indicator, c(G).indicator, c(h)]]),
-              style: T({
-                left: `${c(u) / (c(l) - 1) * 100}%`
-              })
-            }, [
-              S("div", {
-                class: w(["pointer-events-none absolute left-50% top-50% rounded-full transition-background-color,border-color,color", [c(I).indicatorInner, c(v)]])
-              }, null, 2)
-            ], 6),
-            S("div", {
-              class: w(["pointer-events-none h-full rounded-full", [c(I).progress, c(G).progress, c(d)]]),
-              style: T({
-                width: `${c(u) / (c(l) - 1) * 100}%`
-              })
-            }, null, 6)
-          ], 6)
-        ], 2)
-      ], 34),
-      S("div", {
-        class: "relative mx-1 h-1em text-xs text-surface-onlow",
-        style: T({
-          width: `${t.width}rem`
-        })
-      }, [
-        (g(!0), y(te, null, he(c(s), (E, H) => (g(), y("div", {
-          key: H,
-          style: T({
-            left: `${f(E) / (c(l) - 1) * 100}%`
-          }),
-          class: w(["absolute w-auto flex rounded-full -translate-x-50%", c(I).tick])
-        }, re(E), 7))), 128))
-      ], 4)
-    ]));
-  }
-});
-function ve(e) {
-  return m(
-    () => ({ style: Xt(e.rounded), class: "rounded-[var(--r-rounded)]" })
-  );
-}
-function Xt(e) {
-  const t = /^-?\d*\.?\d+(px|em|rem|vh|vw|in|cm|mm|pt|pc|%)?$/;
-  switch (e) {
-    case "none":
-      return "--r-rounded: 0";
-    case "sm":
-      return "--r-rounded: 0.125rem";
-    case "md":
-      return "--r-rounded: 0.25rem";
-    case "lg":
-      return "--r-rounded: 0.5rem";
-    case "full":
-      return "--r-rounded: 9999px";
-    default:
-      return typeof e == "string" && t.test(e) ? `--r-rounded: ${e};` : typeof e == "number" || !Number.isNaN(Number(e)) ? `--r-rounded: ${e}rem;` : "rounded-[var(--r-rounded)]";
+    }), o = v(() => r.value ? "container-filled-primary border-transparent" : "container-base"), s = v(() => r.value !== void 0), i = v(() => s.value ? "cursor-pointer" : "");
+    return (l, u) => (m(), b("span", {
+      class: y(["inline-flex items-center gap-1", [c(n).class, c(a), c(o), c(i)]]),
+      style: A([c(n).style]),
+      onPointerup: u[0] || (u[0] = (d) => c(s) && (r.value = !r.value))
+    }, [
+      l.$slots.leftSection ? M(l.$slots, "leftSection", { key: 0 }) : T("", !0),
+      M(l.$slots, "default"),
+      l.$slots.rightSection ? M(l.$slots, "rightSection", { key: 1 }) : T("", !0)
+    ], 38));
   }
-}
-const qt = ["id"], Yt = ["for"], Zt = ["for"], Kt = /* @__PURE__ */ C({
-  inheritAttrs: !1,
-  __name: "Switch",
-  props: /* @__PURE__ */ ee({
-    size: { default: "md" },
-    animate: { type: Boolean, default: !0 },
-    options: {},
-    label: {},
-    id: {},
-    rounded: { default: "full" },
-    color: { default: "primary" },
-    disabled: { type: Boolean },
-    offIcon: {},
-    onIcon: {}
-  }, {
-    modelValue: { type: Boolean },
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
+}), It = /* @__PURE__ */ x({
+  __name: "ColorSwatch",
+  props: {
+    color: {},
+    is: { default: "div" },
+    withBorder: { type: Boolean, default: !1 }
+  },
   setup(e) {
-    const t = e, r = ge(e, "modelValue"), n = b(null), a = b(!1), o = m(() => {
-      switch (t.size) {
-        case "sm":
-          return {
-            icon: "text-xs mx-0.5",
-            wrapper: "h-4 w-8",
-            indicator: a.value ? "h-3 w-4" : "h-3 w-3",
-            inactive: "left-[calc(0.125rem-1px)]",
-            active: a.value ? "left-[calc(0.875rem-1px)]" : "left-[calc(1.125rem-1px)]"
-          };
-        case "md":
-          return {
-            icon: "text-sm mx-1",
-            wrapper: "h-6 w-12",
-            indicator: a.value ? "h-4 w-5" : "h-4 w-4",
-            inactive: "left-[calc(0.25rem-1px)]",
-            active: a.value ? "left-[calc(1.5rem-1px)]" : "left-[calc(1.75rem-1px)]"
-          };
-        case "lg":
-          return {
-            icon: "text-lg mx-2",
-            wrapper: "h-8 w-16",
-            indicator: a.value ? "h-6 w-8" : "h-6 w-6",
-            inactive: "left-[calc(0.25rem-1px)]",
-            active: a.value ? "left-[calc(1.75rem-1px)]" : "left-[calc(2.25rem-1px)]"
-          };
-      }
-    }), s = m(() => t.animate ? {
-      indicator: "transition-all",
-      progress: "transition-width"
-    } : {
-      indicator: "",
-      progress: ""
-    });
-    function i() {
-      const d = b("");
-      return ie(() => {
-        t.id ? d.value = t.id : d.value = `switch-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
-      }), d;
-    }
-    const l = i(), u = m(() => {
-      let d = "bg-primary-container";
-      switch (t.color) {
-        case "secondary":
-          d = "bg-secondary-7";
-          break;
-        case "tertiary":
-          d = "bg-tertiary-7";
-          break;
-        case "error":
-          d = "bg-error-7";
-          break;
-      }
-      return {
-        wrapper: r.value ? `border border-transparent ${d}` : "bg-surface-lowest border border-surface-border-low",
-        indicator: t.disabled ? "bg-surface-high" : "bg-white text-primary-container"
-      };
-    }), f = ve(t);
-    return (d, h) => (g(), y("div", {
-      role: "switch",
-      class: w(["relative flex items-center gap-2", {
-        "pointer-events-none filter-grayscale op60": t.disabled
-      }])
-    }, [
-      Je(S("input", Ne({
-        id: c(l),
-        "onUpdate:modelValue": h[0] || (h[0] = (v) => r.value = v)
-      }, d.$attrs, {
-        class: "hidden",
-        type: "checkbox"
-      }), null, 16, qt), [
-        [yt, r.value]
-      ]),
-      S("label", {
-        class: "leading-0 cursor-pointer!",
-        for: c(l)
-      }, [
-        S("div", {
-          ref_key: "wrapper",
-          ref: n,
-          class: w([[c(o).wrapper, c(u).wrapper, c(f).class], "relative inline-block transition-all"]),
-          style: T([c(f).style]),
-          onPointerdown: h[1] || (h[1] = (v) => a.value = !0),
-          onPointerup: h[2] || (h[2] = (v) => a.value = !1),
-          onPointerleave: h[3] || (h[3] = (v) => a.value = !1),
-          onPointerenter: h[4] || (h[4] = (v) => v.buttons === 1 && (a.value = !0))
-        }, [
-          S("div", {
-            class: w(["absolute top-50% -translate-y-50%", [c(o).indicator, c(u).indicator, c(s).indicator, r.value ? c(o).active : c(o).inactive, c(f).class]]),
-            style: T([c(f).style])
-          }, null, 6),
-          S("i", {
-            class: w(["absolute top-1/2 -translate-y-50%", [c(o).icon, {
-              [`left-0 text-${d.color}-on`]: r.value,
-              "right-0 text-surface-on ": !r.value,
-              [d.onIcon ?? ""]: r.value && d.onIcon,
-              [d.offIcon ?? ""]: !r.value && d.offIcon
-            }]])
-          }, null, 2)
-        ], 38)
-      ], 8, Yt),
-      d.label ? (g(), y("label", {
-        key: 0,
-        for: c(l)
-      }, re(d.label), 9, Zt)) : z("", !0)
-    ], 2));
+    return (t, r) => (m(), P(de(t.is), {
+      class: y(["h-6 w-6 border rounded-full", [{
+        "border border-surface-border-base": t.withBorder,
+        "border border-transparent": !t.withBorder
+      }]]),
+      style: A({
+        backgroundColor: t.color
+      })
+    }, null, 8, ["class", "style"]));
   }
 });
-function be(e) {
+function _e(e) {
   "@babel/helpers - typeof";
-  return be = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(t) {
+  return _e = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(t) {
     return typeof t;
   } : function(t) {
     return t && typeof Symbol == "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
-  }, be(e);
+  }, _e(e);
 }
-var Qt = /^\s+/, Jt = /\s+$/;
+var Vt = /^\s+/, Dt = /\s+$/;
 function p(e, t) {
   if (e = e || "", t = t || {}, e instanceof p)
     return e;
   if (!(this instanceof p))
     return new p(e, t);
-  var r = er(e);
+  var r = Ft(e);
   this._originalInput = e, this._r = r.r, this._g = r.g, this._b = r.b, this._a = r.a, this._roundA = Math.round(100 * this._a) / 100, this._format = t.format || r.format, this._gradientType = t.gradientType, this._r < 1 && (this._r = Math.round(this._r)), this._g < 1 && (this._g = Math.round(this._g)), this._b < 1 && (this._b = Math.round(this._b)), this._ok = r.ok;
 }
 p.prototype = {
@@ -776,10 +439,10 @@ p.prototype = {
     return r = t.r / 255, n = t.g / 255, a = t.b / 255, r <= 0.03928 ? o = r / 12.92 : o = Math.pow((r + 0.055) / 1.055, 2.4), n <= 0.03928 ? s = n / 12.92 : s = Math.pow((n + 0.055) / 1.055, 2.4), a <= 0.03928 ? i = a / 12.92 : i = Math.pow((a + 0.055) / 1.055, 2.4), 0.2126 * o + 0.7152 * s + 0.0722 * i;
   },
   setAlpha: function(t) {
-    return this._a = rt(t), this._roundA = Math.round(100 * this._a) / 100, this;
+    return this._a = ot(t), this._roundA = Math.round(100 * this._a) / 100, this;
   },
   toHsv: function() {
-    var t = We(this._r, this._g, this._b);
+    var t = je(this._r, this._g, this._b);
     return {
       h: t.h * 360,
       s: t.s,
@@ -788,7 +451,7 @@ p.prototype = {
     };
   },
   toHsvString: function() {
-    var t = We(this._r, this._g, this._b), r = Math.round(t.h * 360), n = Math.round(t.s * 100), a = Math.round(t.v * 100);
+    var t = je(this._r, this._g, this._b), r = Math.round(t.h * 360), n = Math.round(t.s * 100), a = Math.round(t.v * 100);
     return this._a == 1 ? "hsv(" + r + ", " + n + "%, " + a + "%)" : "hsva(" + r + ", " + n + "%, " + a + "%, " + this._roundA + ")";
   },
   toHsl: function() {
@@ -805,13 +468,13 @@ p.prototype = {
     return this._a == 1 ? "hsl(" + r + ", " + n + "%, " + a + "%)" : "hsla(" + r + ", " + n + "%, " + a + "%, " + this._roundA + ")";
   },
   toHex: function(t) {
-    return je(this._r, this._g, this._b, t);
+    return Ue(this._r, this._g, this._b, t);
   },
   toHexString: function(t) {
     return "#" + this.toHex(t);
   },
   toHex8: function(t) {
-    return or(this._r, this._g, this._b, this._a, t);
+    return Ut(this._r, this._g, this._b, this._a, t);
   },
   toHex8String: function(t) {
     return "#" + this.toHex8(t);
@@ -829,17 +492,17 @@ p.prototype = {
   },
   toPercentageRgb: function() {
     return {
-      r: Math.round(x(this._r, 255) * 100) + "%",
-      g: Math.round(x(this._g, 255) * 100) + "%",
-      b: Math.round(x(this._b, 255) * 100) + "%",
+      r: Math.round(S(this._r, 255) * 100) + "%",
+      g: Math.round(S(this._g, 255) * 100) + "%",
+      b: Math.round(S(this._b, 255) * 100) + "%",
       a: this._a
     };
   },
   toPercentageRgbString: function() {
-    return this._a == 1 ? "rgb(" + Math.round(x(this._r, 255) * 100) + "%, " + Math.round(x(this._g, 255) * 100) + "%, " + Math.round(x(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(x(this._r, 255) * 100) + "%, " + Math.round(x(this._g, 255) * 100) + "%, " + Math.round(x(this._b, 255) * 100) + "%, " + this._roundA + ")";
+    return this._a == 1 ? "rgb(" + Math.round(S(this._r, 255) * 100) + "%, " + Math.round(S(this._g, 255) * 100) + "%, " + Math.round(S(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(S(this._r, 255) * 100) + "%, " + Math.round(S(this._g, 255) * 100) + "%, " + Math.round(S(this._b, 255) * 100) + "%, " + this._roundA + ")";
   },
   toName: function() {
-    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : gr[je(this._r, this._g, this._b, !0)] || !1;
+    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : nr[Ue(this._r, this._g, this._b, !0)] || !1;
   },
   toFilter: function(t) {
     var r = "#" + Ge(this._r, this._g, this._b, this._a), n = r, a = this._gradientType ? "GradientType = 1, " : "";
@@ -863,68 +526,68 @@ p.prototype = {
     return this._r = n._r, this._g = n._g, this._b = n._b, this.setAlpha(n._a), this;
   },
   lighten: function() {
-    return this._applyModification(lr, arguments);
+    return this._applyModification(Yt, arguments);
   },
   brighten: function() {
-    return this._applyModification(cr, arguments);
+    return this._applyModification(Zt, arguments);
   },
   darken: function() {
-    return this._applyModification(ur, arguments);
+    return this._applyModification(Kt, arguments);
   },
   desaturate: function() {
-    return this._applyModification(ar, arguments);
+    return this._applyModification(Gt, arguments);
   },
   saturate: function() {
-    return this._applyModification(sr, arguments);
+    return this._applyModification(qt, arguments);
   },
   greyscale: function() {
-    return this._applyModification(ir, arguments);
+    return this._applyModification(Xt, arguments);
   },
   spin: function() {
-    return this._applyModification(dr, arguments);
+    return this._applyModification(Qt, arguments);
   },
   _applyCombination: function(t, r) {
     return t.apply(null, [this].concat([].slice.call(r)));
   },
   analogous: function() {
-    return this._applyCombination(pr, arguments);
+    return this._applyCombination(tr, arguments);
   },
   complement: function() {
-    return this._applyCombination(fr, arguments);
+    return this._applyCombination(Jt, arguments);
   },
   monochromatic: function() {
-    return this._applyCombination(mr, arguments);
+    return this._applyCombination(rr, arguments);
   },
   splitcomplement: function() {
-    return this._applyCombination(hr, arguments);
+    return this._applyCombination(er, arguments);
   },
   // Disabled until https://github.com/bgrins/TinyColor/issues/254
   // polyad: function (number) {
   //   return this._applyCombination(polyad, [number]);
   // },
   triad: function() {
-    return this._applyCombination(Ue, [3]);
+    return this._applyCombination(qe, [3]);
   },
   tetrad: function() {
-    return this._applyCombination(Ue, [4]);
+    return this._applyCombination(qe, [4]);
   }
 };
 p.fromRatio = function(e, t) {
-  if (be(e) == "object") {
+  if (_e(e) == "object") {
     var r = {};
     for (var n in e)
-      e.hasOwnProperty(n) && (n === "a" ? r[n] = e[n] : r[n] = de(e[n]));
+      e.hasOwnProperty(n) && (n === "a" ? r[n] = e[n] : r[n] = me(e[n]));
     e = r;
   }
   return p(e, t);
 };
-function er(e) {
+function Ft(e) {
   var t = {
     r: 0,
     g: 0,
     b: 0
   }, r = 1, n = null, a = null, o = null, s = !1, i = !1;
-  return typeof e == "string" && (e = wr(e)), be(e) == "object" && (L(e.r) && L(e.g) && L(e.b) ? (t = tr(e.r, e.g, e.b), s = !0, i = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : L(e.h) && L(e.s) && L(e.v) ? (n = de(e.s), a = de(e.v), t = nr(e.h, n, a), s = !0, i = "hsv") : L(e.h) && L(e.s) && L(e.l) && (n = de(e.s), o = de(e.l), t = rr(e.h, n, o), s = !0, i = "hsl"), e.hasOwnProperty("a") && (r = e.a)), r = rt(r), {
+  return typeof e == "string" && (e = ir(e)), _e(e) == "object" && (j(e.r) && j(e.g) && j(e.b) ? (t = Wt(e.r, e.g, e.b), s = !0, i = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : j(e.h) && j(e.s) && j(e.v) ? (n = me(e.s), a = me(e.v), t = jt(e.h, n, a), s = !0, i = "hsv") : j(e.h) && j(e.s) && j(e.l) && (n = me(e.s), o = me(e.l), t = Lt(e.h, n, o), s = !0, i = "hsl"), e.hasOwnProperty("a") && (r = e.a)), r = ot(r), {
     ok: s,
     format: e.format || i,
     r: Math.min(255, Math.max(t.r, 0)),
@@ -933,15 +596,15 @@ function er(e) {
     a: r
   };
 }
-function tr(e, t, r) {
+function Wt(e, t, r) {
   return {
-    r: x(e, 255) * 255,
-    g: x(t, 255) * 255,
-    b: x(r, 255) * 255
+    r: S(e, 255) * 255,
+    g: S(t, 255) * 255,
+    b: S(r, 255) * 255
   };
 }
 function Le(e, t, r) {
-  e = x(e, 255), t = x(t, 255), r = x(r, 255);
+  e = S(e, 255), t = S(t, 255), r = S(r, 255);
   var n = Math.max(e, t, r), a = Math.min(e, t, r), o, s, i = (n + a) / 2;
   if (n == a)
     o = s = 0;
@@ -966,11 +629,11 @@ function Le(e, t, r) {
     l: i
   };
 }
-function rr(e, t, r) {
+function Lt(e, t, r) {
   var n, a, o;
-  e = x(e, 360), t = x(t, 100), r = x(r, 100);
-  function s(u, f, d) {
-    return d < 0 && (d += 1), d > 1 && (d -= 1), d < 1 / 6 ? u + (f - u) * 6 * d : d < 1 / 2 ? f : d < 2 / 3 ? u + (f - u) * (2 / 3 - d) * 6 : u;
+  e = S(e, 360), t = S(t, 100), r = S(r, 100);
+  function s(u, d, f) {
+    return f < 0 && (f += 1), f > 1 && (f -= 1), f < 1 / 6 ? u + (d - u) * 6 * f : f < 1 / 2 ? d : f < 2 / 3 ? u + (d - u) * (2 / 3 - f) * 6 : u;
   }
   if (t === 0)
     n = a = o = r;
@@ -984,8 +647,8 @@ function rr(e, t, r) {
     b: o * 255
   };
 }
-function We(e, t, r) {
-  e = x(e, 255), t = x(t, 255), r = x(r, 255);
+function je(e, t, r) {
+  e = S(e, 255), t = S(t, 255), r = S(r, 255);
   var n = Math.max(e, t, r), a = Math.min(e, t, r), o, s, i = n, l = n - a;
   if (s = n === 0 ? 0 : l / n, n == a)
     o = 0;
@@ -1009,25 +672,25 @@ function We(e, t, r) {
     v: i
   };
 }
-function nr(e, t, r) {
-  e = x(e, 360) * 6, t = x(t, 100), r = x(r, 100);
-  var n = Math.floor(e), a = e - n, o = r * (1 - t), s = r * (1 - a * t), i = r * (1 - (1 - a) * t), l = n % 6, u = [r, s, o, o, i, r][l], f = [i, r, r, s, o, o][l], d = [o, o, i, r, r, s][l];
+function jt(e, t, r) {
+  e = S(e, 360) * 6, t = S(t, 100), r = S(r, 100);
+  var n = Math.floor(e), a = e - n, o = r * (1 - t), s = r * (1 - a * t), i = r * (1 - (1 - a) * t), l = n % 6, u = [r, s, o, o, i, r][l], d = [i, r, r, s, o, o][l], f = [o, o, i, r, r, s][l];
   return {
     r: u * 255,
-    g: f * 255,
-    b: d * 255
+    g: d * 255,
+    b: f * 255
   };
 }
-function je(e, t, r, n) {
-  var a = [F(Math.round(e).toString(16)), F(Math.round(t).toString(16)), F(Math.round(r).toString(16))];
+function Ue(e, t, r, n) {
+  var a = [D(Math.round(e).toString(16)), D(Math.round(t).toString(16)), D(Math.round(r).toString(16))];
   return n && a[0].charAt(0) == a[0].charAt(1) && a[1].charAt(0) == a[1].charAt(1) && a[2].charAt(0) == a[2].charAt(1) ? a[0].charAt(0) + a[1].charAt(0) + a[2].charAt(0) : a.join("");
 }
-function or(e, t, r, n, a) {
-  var o = [F(Math.round(e).toString(16)), F(Math.round(t).toString(16)), F(Math.round(r).toString(16)), F(nt(n))];
+function Ut(e, t, r, n, a) {
+  var o = [D(Math.round(e).toString(16)), D(Math.round(t).toString(16)), D(Math.round(r).toString(16)), D(at(n))];
   return a && o[0].charAt(0) == o[0].charAt(1) && o[1].charAt(0) == o[1].charAt(1) && o[2].charAt(0) == o[2].charAt(1) && o[3].charAt(0) == o[3].charAt(1) ? o[0].charAt(0) + o[1].charAt(0) + o[2].charAt(0) + o[3].charAt(0) : o.join("");
 }
 function Ge(e, t, r, n) {
-  var a = [F(nt(n)), F(Math.round(e).toString(16)), F(Math.round(t).toString(16)), F(Math.round(r).toString(16))];
+  var a = [D(at(n)), D(Math.round(e).toString(16)), D(Math.round(t).toString(16)), D(Math.round(r).toString(16))];
   return a.join("");
 }
 p.equals = function(e, t) {
@@ -1040,43 +703,43 @@ p.random = function() {
     b: Math.random()
   });
 };
-function ar(e, t) {
+function Gt(e, t) {
   t = t === 0 ? 0 : t || 10;
   var r = p(e).toHsl();
   return r.s -= t / 100, r.s = Se(r.s), p(r);
 }
-function sr(e, t) {
+function qt(e, t) {
   t = t === 0 ? 0 : t || 10;
   var r = p(e).toHsl();
   return r.s += t / 100, r.s = Se(r.s), p(r);
 }
-function ir(e) {
+function Xt(e) {
   return p(e).desaturate(100);
 }
-function lr(e, t) {
+function Yt(e, t) {
   t = t === 0 ? 0 : t || 10;
   var r = p(e).toHsl();
   return r.l += t / 100, r.l = Se(r.l), p(r);
 }
-function cr(e, t) {
+function Zt(e, t) {
   t = t === 0 ? 0 : t || 10;
   var r = p(e).toRgb();
   return r.r = Math.max(0, Math.min(255, r.r - Math.round(255 * -(t / 100)))), r.g = Math.max(0, Math.min(255, r.g - Math.round(255 * -(t / 100)))), r.b = Math.max(0, Math.min(255, r.b - Math.round(255 * -(t / 100)))), p(r);
 }
-function ur(e, t) {
+function Kt(e, t) {
   t = t === 0 ? 0 : t || 10;
   var r = p(e).toHsl();
   return r.l -= t / 100, r.l = Se(r.l), p(r);
 }
-function dr(e, t) {
+function Qt(e, t) {
   var r = p(e).toHsl(), n = (r.h + t) % 360;
   return r.h = n < 0 ? 360 + n : n, p(r);
 }
-function fr(e) {
+function Jt(e) {
   var t = p(e).toHsl();
   return t.h = (t.h + 180) % 360, p(t);
 }
-function Ue(e, t) {
+function qe(e, t) {
   if (isNaN(t) || t <= 0)
     throw new Error("Argument to polyad must be a positive number");
   for (var r = p(e).toHsl(), n = [p(e)], a = 360 / t, o = 1; o < t; o++)
@@ -1087,7 +750,7 @@ function Ue(e, t) {
     }));
   return n;
 }
-function hr(e) {
+function er(e) {
   var t = p(e).toHsl(), r = t.h;
   return [p(e), p({
     h: (r + 72) % 360,
@@ -1099,14 +762,14 @@ function hr(e) {
     l: t.l
   })];
 }
-function pr(e, t, r) {
+function tr(e, t, r) {
   t = t || 6, r = r || 30;
   var n = p(e).toHsl(), a = 360 / r, o = [p(e)];
   for (n.h = (n.h - (a * t >> 1) + 720) % 360; --t; )
     n.h = (n.h + a) % 360, o.push(p(n));
   return o;
 }
-function mr(e, t) {
+function rr(e, t) {
   t = t || 6;
   for (var r = p(e).toHsv(), n = r.h, a = r.s, o = r.v, s = [], i = 1 / t; t--; )
     s.push(p({
@@ -1132,7 +795,7 @@ p.readability = function(e, t) {
 };
 p.isReadable = function(e, t, r) {
   var n = p.readability(e, t), a, o;
-  switch (o = !1, a = _r(r), a.level + a.size) {
+  switch (o = !1, a = lr(r), a.level + a.size) {
     case "AAsmall":
     case "AAAlarge":
       o = n >= 4.5;
@@ -1156,7 +819,7 @@ p.mostReadable = function(e, t, r) {
     size: l
   }) || !s ? n : (r.includeFallbackColors = !1, p.mostReadable(e, ["#fff", "#000"], r));
 };
-var Te = p.names = {
+var ze = p.names = {
   aliceblue: "f0f8ff",
   antiquewhite: "faebd7",
   aqua: "0ff",
@@ -1306,46 +969,46 @@ var Te = p.names = {
   whitesmoke: "f5f5f5",
   yellow: "ff0",
   yellowgreen: "9acd32"
-}, gr = p.hexNames = vr(Te);
-function vr(e) {
+}, nr = p.hexNames = or(ze);
+function or(e) {
   var t = {};
   for (var r in e)
     e.hasOwnProperty(r) && (t[e[r]] = r);
   return t;
 }
-function rt(e) {
+function ot(e) {
   return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
 }
-function x(e, t) {
-  br(e) && (e = "100%");
-  var r = yr(e);
+function S(e, t) {
+  ar(e) && (e = "100%");
+  var r = sr(e);
   return e = Math.min(t, Math.max(0, parseFloat(e))), r && (e = parseInt(e * t, 10) / 100), Math.abs(e - t) < 1e-6 ? 1 : e % t / parseFloat(t);
 }
 function Se(e) {
   return Math.min(1, Math.max(0, e));
 }
-function O(e) {
+function N(e) {
   return parseInt(e, 16);
 }
-function br(e) {
+function ar(e) {
   return typeof e == "string" && e.indexOf(".") != -1 && parseFloat(e) === 1;
 }
-function yr(e) {
+function sr(e) {
   return typeof e == "string" && e.indexOf("%") != -1;
 }
-function F(e) {
+function D(e) {
   return e.length == 1 ? "0" + e : "" + e;
 }
-function de(e) {
+function me(e) {
   return e <= 1 && (e = e * 100 + "%"), e;
 }
-function nt(e) {
+function at(e) {
   return Math.round(parseFloat(e) * 255).toString(16);
 }
 function Xe(e) {
-  return O(e) / 255;
+  return N(e) / 255;
 }
-var B = function() {
+var V = function() {
   var e = "[-\\+]?\\d+%?", t = "[-\\+]?\\d*\\.\\d+%?", r = "(?:" + t + ")|(?:" + e + ")", n = "[\\s|\\(]+(" + r + ")[,|\\s]+(" + r + ")[,|\\s]+(" + r + ")\\s*\\)?", a = "[\\s|\\(]+(" + r + ")[,|\\s]+(" + r + ")[,|\\s]+(" + r + ")[,|\\s]+(" + r + ")\\s*\\)?";
   return {
     CSS_UNIT: new RegExp(r),
@@ -1361,14 +1024,14 @@ var B = function() {
     hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
   };
 }();
-function L(e) {
-  return !!B.CSS_UNIT.exec(e);
+function j(e) {
+  return !!V.CSS_UNIT.exec(e);
 }
-function wr(e) {
-  e = e.replace(Qt, "").replace(Jt, "").toLowerCase();
+function ir(e) {
+  e = e.replace(Vt, "").replace(Dt, "").toLowerCase();
   var t = !1;
-  if (Te[e])
-    e = Te[e], t = !0;
+  if (ze[e])
+    e = ze[e], t = !0;
   else if (e == "transparent")
     return {
       r: 0,
@@ -1378,58 +1041,58 @@ function wr(e) {
       format: "name"
     };
   var r;
-  return (r = B.rgb.exec(e)) ? {
+  return (r = V.rgb.exec(e)) ? {
     r: r[1],
     g: r[2],
     b: r[3]
-  } : (r = B.rgba.exec(e)) ? {
+  } : (r = V.rgba.exec(e)) ? {
     r: r[1],
     g: r[2],
     b: r[3],
     a: r[4]
-  } : (r = B.hsl.exec(e)) ? {
+  } : (r = V.hsl.exec(e)) ? {
     h: r[1],
     s: r[2],
     l: r[3]
-  } : (r = B.hsla.exec(e)) ? {
+  } : (r = V.hsla.exec(e)) ? {
     h: r[1],
     s: r[2],
     l: r[3],
     a: r[4]
-  } : (r = B.hsv.exec(e)) ? {
+  } : (r = V.hsv.exec(e)) ? {
     h: r[1],
     s: r[2],
     v: r[3]
-  } : (r = B.hsva.exec(e)) ? {
+  } : (r = V.hsva.exec(e)) ? {
     h: r[1],
     s: r[2],
     v: r[3],
     a: r[4]
-  } : (r = B.hex8.exec(e)) ? {
-    r: O(r[1]),
-    g: O(r[2]),
-    b: O(r[3]),
+  } : (r = V.hex8.exec(e)) ? {
+    r: N(r[1]),
+    g: N(r[2]),
+    b: N(r[3]),
     a: Xe(r[4]),
     format: t ? "name" : "hex8"
-  } : (r = B.hex6.exec(e)) ? {
-    r: O(r[1]),
-    g: O(r[2]),
-    b: O(r[3]),
+  } : (r = V.hex6.exec(e)) ? {
+    r: N(r[1]),
+    g: N(r[2]),
+    b: N(r[3]),
     format: t ? "name" : "hex"
-  } : (r = B.hex4.exec(e)) ? {
-    r: O(r[1] + "" + r[1]),
-    g: O(r[2] + "" + r[2]),
-    b: O(r[3] + "" + r[3]),
+  } : (r = V.hex4.exec(e)) ? {
+    r: N(r[1] + "" + r[1]),
+    g: N(r[2] + "" + r[2]),
+    b: N(r[3] + "" + r[3]),
     a: Xe(r[4] + "" + r[4]),
     format: t ? "name" : "hex8"
-  } : (r = B.hex3.exec(e)) ? {
-    r: O(r[1] + "" + r[1]),
-    g: O(r[2] + "" + r[2]),
-    b: O(r[3] + "" + r[3]),
+  } : (r = V.hex3.exec(e)) ? {
+    r: N(r[1] + "" + r[1]),
+    g: N(r[2] + "" + r[2]),
+    b: N(r[3] + "" + r[3]),
     format: t ? "name" : "hex"
   } : !1;
 }
-function _r(e) {
+function lr(e) {
   var t, r;
   return e = e || {
     level: "AA",
@@ -1439,50 +1102,10 @@ function _r(e) {
     size: r
   };
 }
-const ot = {
-  primary: ["#e5f7ff", "#d3ebfa", "#a9d4f1", "#7cbde9", "#57a9e0", "#3f9cdc", "#3096dc", "#1f82c4", "#0f73b0", "#00649c", "#082f49"],
-  secondary: ["#e9fbf0", "#dcf1e3", "#badfc7", "#96cea9", "#77bf90", "#63b580", "#58b077", "#479a64", "#3b8a58", "#2c7749", "#022c22"],
-  tertiary: ["#fff7e1", "#ffedcd", "#fcd99e", "#f9c46b", "#f7b23f", "#f6a724", "#f5a113", "#da8c04", "#c37d00", "#aa6a00", "#572508"],
-  error: ["#ffeaea", "#fcd5d5", "#f2a8a9", "#ea7a7a", "#e25353", "#de3939", "#dd2b2b", "#c41e1f", "#af171a", "#9a0913", "#450a0a"],
-  surface: ["#fafafa", "#f5f5f5", "#e5e5e5", "#d4d4d4", "#a3a3a3", "#737373", "#525252", "#404040", "#262626", "#171717", "#121212"]
-}, ze = {
-  name: "dark",
-  scheme: "dark",
-  colors: ot
-}, xr = {
-  name: "light",
-  scheme: "light",
-  colors: ot
-}, hn = Symbol("Notifications"), at = wt([]);
-function kr() {
-  return at;
-}
-class pn {
-  static show(t) {
-    t.hash = Math.random().toString(36), at.push(t);
-  }
-}
-const Re = [0.96, 0.907, 0.805, 0.697, 0.605, 0.547, 0.518, 0.445, 0.395, 0.34, 0.28], qe = [0.32, 0.16, 0.08, 0.04, 0, 0, 0.04, 0.08, 0.16, 0.32, 0.64];
-function Sr(e) {
-  const t = p(e).toHsl().l;
-  return Re.reduce(
-    (r, n) => Math.abs(n - t) < Math.abs(r - t) ? n : r
-  );
-}
-function Mr(e) {
-  const t = p(e), r = Sr(t), n = Re.findIndex((o) => o === r), a = Re.map((o) => {
-    const s = p({ h: t.toHsl().h, s: t.toHsl().s, l: o }), i = qe[n] - qe[n];
-    return i >= 0 ? s.saturate(i * 100) : s.desaturate(i * -100), s;
-  });
-  return { baseColorIndex: n, colors: a.map((o) => o.toHexString()) };
-}
-function mn(e) {
-  return Mr(e).colors;
-}
-function Ar() {
+function cr() {
   if (typeof window > "u")
-    return b("dark");
-  const e = b(document.documentElement.dataset.scheme);
+    return g("dark");
+  const e = g(document.documentElement.dataset.scheme);
   return new MutationObserver((r) => {
     r.forEach((n) => {
       n.type === "attributes" && n.attributeName === "data-scheme" && (e.value = document.documentElement.dataset.scheme);
@@ -1492,37 +1115,37 @@ function Ar() {
     attributeFilter: ["data-scheme"]
   }), e;
 }
-function gn() {
-  return et("currentThemeScheme", null);
+function Nn() {
+  return Qe("currentThemeScheme", null);
 }
-function Cr() {
-  return et("currentTheme", b(ze));
+function ur() {
+  return Qe("currentTheme", g(Oe));
 }
 function st(e, t = !0) {
-  const r = b(e), n = b(e.scheme), a = Ar();
-  q(() => {
+  const r = g(e), n = g(e.scheme), a = cr();
+  G(() => {
     a.value && (n.value = a.value);
-  }), Fe("currentTheme", r), Fe("currentThemeScheme", n);
+  }), We("currentTheme", r), We("currentThemeScheme", n);
   const s = {
-    ...Object.keys(r.value.colors).map((f) => {
-      const d = f;
-      return r.value.colors[d].reduce((v, k, M) => {
-        const $ = p(k).toRgb();
-        return v[`--r-color-${d}-${M}`] = `${$.r} ${$.g} ${$.b}`, v;
+    ...Object.keys(r.value.colors).map((u) => {
+      const d = u;
+      return r.value.colors[d].reduce((h, _, C) => {
+        const $ = p(_).toRgb();
+        return h[`--r-color-${d}-${C}`] = `${$.r} ${$.g} ${$.b}`, h;
       }, {});
-    }).reduce((f, d) => ({
-      ...f,
+    }).reduce((u, d) => ({
+      ...u,
       ...d
     }), {})
   }, i = {
-    "color-scheme": n.value,
     "font-family": "'Roboto', sans-serif",
     "background-color": "rgb(var(--r-color-surface-lowest))",
     color: "rgb(var(--r-color-surface-on))"
-  }, l = m(() => {
+  }, l = v(() => {
     if (t)
       return {};
-    switch (e.scheme) {
+    const { scheme: u } = e;
+    switch (u) {
       case "dark":
         return {
           colorScheme: "dark",
@@ -1583,327 +1206,75 @@ function st(e, t = !0) {
     ...l.value
   };
 }
-const vn = /* @__PURE__ */ C({
-  __name: "RokuProvider",
-  props: {
-    is: { default: "div" },
-    theme: { default() {
-      return typeof window > "u" || document.documentElement.dataset.scheme === "dark" ? ze : xr;
-    } }
-  },
-  setup(e) {
-    const t = e, r = b(0), n = b(0);
-    ne && new ResizeObserver(() => {
-      const i = window.innerWidth - document.body.clientWidth;
-      i !== 0 && (r.value = i), n.value = i;
-    }).observe(document.body);
-    const a = m(() => n.value === r.value ? "0px" : `${r.value}px`), o = st(t.theme);
-    return (s, i) => (g(), j(_e(s.is), {
-      style: T([
-        c(o),
-        { paddingRight: c(a) }
-      ]),
-      class: "text-surface-on transition-background-color,border-color,color"
-    }, {
-      default: J(() => [
-        P(s.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["style"]));
-  }
-}), $r = { class: "w-full flex items-center" }, Tr = ["placeholder", "value"], zr = /* @__PURE__ */ S("i", { class: "i-tabler-chevron-down pointer-events-none absolute right-2" }, null, -1), Rr = {
-  key: 0,
-  class: "flex cursor-default items-center justify-between gap-2 rounded p-1 px-2"
-}, Er = ["onPointerdown", "onHover"], Pr = { key: 0 }, Nr = /* @__PURE__ */ S("i", { class: "i-tabler-check h-3 w-3" }, null, -1), Or = [
-  Nr
-], bn = /* @__PURE__ */ C({
-  __name: "Select",
-  props: /* @__PURE__ */ ee({
-    options: { default() {
-      return [];
-    } },
-    size: { default: "md" },
-    noneText: { default: "No options" },
-    placeholder: { default: "" }
-  }, {
-    modelValue: { default: void 0 },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ ee(["change"], ["update:modelValue"]),
-  setup(e, { emit: t }) {
-    const r = e, n = t, a = ge(e, "modelValue"), o = b(null), s = b(null), { focused: i } = Gt(o), l = m(() => r.options.map((_) => M(_)).indexOf(a.value)), u = b(-1), f = b(-1);
-    q(() => {
-      i.value || (f.value = -1);
-    }), q(() => {
-      a.value = M(r.options[l.value]);
-    }), le(a, () => {
-      n("change", a.value);
-    });
-    const d = r.options, h = m(() => d[l.value]), v = m(() => k(h.value));
-    function k(_) {
-      if (_)
-        return typeof _ == "string" || typeof _ == "symbol" || typeof _ == "number" ? _ : _.label;
-    }
-    function M(_) {
-      if (_)
-        return typeof _ == "string" || typeof _ == "symbol" || typeof _ == "number" ? _ : _.id;
-    }
-    Ce("ArrowDown", (_) => {
-      i.value && (_.preventDefault(), f.value = (f.value + 1) % d.length);
-    }), Ce("ArrowUp", (_) => {
-      i.value && (_.preventDefault(), f.value = (f.value - 1 + d.length) % d.length);
-    }), Ce("Enter", () => {
-      i.value && f.value !== -1 && (a.value = M(d[f.value]), i.value = !1);
-    });
-    function $(_) {
-      if (!i.value) {
-        i.value = !0;
-        return;
-      }
-      a.value = M(_), i.value = !1;
-    }
-    const ce = m(() => ({
-      input: "container-base focus:border-primary-container"
-    })), ue = m(() => {
-      switch (r.size) {
-        case "sm":
-          return {
-            wrapper: "h-6 w-full py-1 pl-1.5 pr-6 text-sm",
-            dropdown: "text-sm children:py-1"
-          };
-        case "lg":
-          return {
-            wrapper: "h-10 w-full py-2 pl-3 pr-10 text-lg",
-            dropdown: "text-lg children:py-2"
-          };
-        default:
-          return {
-            wrapper: "h-8 w-full py-1 pl-2 pr-8 text-base",
-            dropdown: "text-base children:py-1"
-          };
-      }
-    });
-    return (_, I) => (g(), y("div", {
-      ref_key: "wrapperRef",
-      ref: s,
-      class: "r-select-wrapper relative"
-    }, [
-      S("div", $r, [
-        S("input", {
-          ref_key: "inputRef",
-          ref: o,
-          class: w([[c(ce).input, c(ue).wrapper], "r-select-input cursor-pointer border rounded outline-none"]),
-          placeholder: _.placeholder,
-          readonly: "",
-          value: c(v),
-          "aria-haspopup": "listbox",
-          autocomplete: "off",
-          onFocus: I[0] || (I[0] = (G) => i.value = !0)
-        }, null, 42, Tr),
-        zr
-      ]),
-      c(i) ? (g(), y("div", {
-        key: 0,
-        class: w([c(ue).dropdown, "absolute z-1 mt-2 w-full flex-col overflow-hidden border container-base rounded p-1"])
-      }, [
-        c(d).length === 0 ? (g(), y("div", Rr, re(_.noneText), 1)) : (g(!0), y(te, { key: 1 }, he(c(d), (G, A) => (g(), y("div", {
-          key: M(G),
-          class: w([{
-            "hover:bg-surface-high": c(f) !== A,
-            "container-filled-primary": c(f) === A
-          }, "flex cursor-pointer items-center justify-between gap-2 rounded p-1 px-2"]),
-          onPointerdown: (R) => $(G),
-          onHover: (R) => u.value = A
-        }, [
-          _t(re(k(G)) + " ", 1),
-          G === c(h) ? (g(), y("div", Pr, Or)) : z("", !0)
-        ], 42, Er))), 128))
-      ], 2)) : z("", !0)
-    ], 512));
-  }
-}), Hr = ["value", "placeholder", "type"], Ir = /* @__PURE__ */ C({
-  __name: "TextField",
+function it(e) {
+  const t = g("");
+  return ne(() => {
+    e.id ? t.value = e.id : t.value = `switch-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
+  }), t;
+}
+const dr = ["id"], fr = ["for"], Pn = /* @__PURE__ */ x({
+  __name: "ColorInput",
   props: {
     modelValue: {},
-    onChange: {},
-    color: { default: "primary" },
-    error: { type: Boolean },
-    disabled: { type: Boolean },
-    rounded: { default: "md" },
-    size: { default: "md" },
-    password: { type: Boolean },
-    placeholder: {}
-  },
-  emits: ["change", "update:modelValue", "input", "click", "pointerdown", "pointerup"],
-  setup(e, { expose: t, emit: r }) {
-    const n = e, a = r, o = m(() => {
-      switch (n.size) {
-        case "sm":
-          return {
-            base: "h-6 px-2 py-1 text-xs"
-          };
-        case "md":
-          return {
-            base: "h-8 px-3 py-1 text-sm"
-          };
-        case "lg":
-          return {
-            base: "h-10 px-4 py-2 text-base"
-          };
-      }
-    }), s = m(() => {
-      if (n.error)
-        return "text-error-container bg-surface-base border-error-container focus:border-error-container";
-      switch (n.color) {
-        case "secondary":
-          return "text-surface-on bg-surface-base border-surface-border-base focus:border-secondary-container";
-        case "tertiary":
-          return "text-surface-on bg-surface-base border-surface-border-base focus:border-tertiary-container";
-        case "error":
-          return "text-surface-on bg-surface-base border-surface-border-base focus:border-error-container";
-        case "primary":
-        default:
-          return "text-surface-on bg-surface-base border-surface-border-base focus:border-primary-container";
-      }
-    }), i = m(() => n.disabled ? "pointer-events-none filter grayscale opacity-60" : ""), l = ve(n), u = b(null);
-    function f(d) {
-      var h;
-      a("update:modelValue", ((h = d.target) == null ? void 0 : h.value) ?? ""), a("input", d);
-    }
-    return t({
-      el: u
-    }), (d, h) => (g(), y("input", {
-      ref_key: "input",
-      ref: u,
-      value: d.modelValue,
-      class: w(["bg-back-2 border px-2 py-1 outline-none transition-background-color,border-color,color", [c(s), c(i), c(l).class, c(o).base]]),
-      style: T([c(l).style]),
-      placeholder: d.placeholder,
-      type: n.password ? "password" : "text",
-      onChange: h[0] || (h[0] = (v) => d.$emit("change", v)),
-      onInput: f,
-      onClick: h[1] || (h[1] = (v) => d.$emit("click", v)),
-      onPointerdown: h[2] || (h[2] = (v) => d.$emit("pointerdown", v)),
-      onPointerup: h[3] || (h[3] = (v) => d.$emit("pointerup", v))
-    }, null, 46, Hr));
-  }
-}), Br = {
-  key: 0,
-  class: "i-tabler-loader-2 h-container w-container shrink-0 animate-spin"
-}, Dr = { key: 1 }, Fr = { class: "grow-1" }, Vr = {
-  key: 1,
-  class: "text-sm text-surface-container"
-}, Lr = /* @__PURE__ */ S("i", { class: "i-tabler-x" }, null, -1), Wr = /* @__PURE__ */ C({
-  __name: "Notification",
-  props: {
-    title: {},
-    message: {},
-    icon: {},
-    loading: { type: Boolean },
-    withBorder: { type: Boolean },
-    closeable: { type: Boolean },
-    color: { default: "primary" }
+    modelModifiers: {}
   },
-  emits: ["close"],
+  emits: ["update:modelValue"],
   setup(e) {
-    const t = e, r = m(() => {
-      switch (t.color) {
-        case "secondary":
-          return "bg-secondary-container";
-        case "tertiary":
-          return "bg-tertiary-container";
-        case "error":
-          return "bg-error-container";
-        default:
-          return "bg-primary-container";
-      }
-    }), n = m(() => {
-      switch (t.color) {
-        case "secondary":
-          return "text-secondary-container";
-        case "tertiary":
-          return "text-tertiary-container";
-        case "error":
-          return "text-error-container";
-        default:
-          return "text-primary-container";
-      }
-    });
-    return (a, o) => {
-      const s = Ct;
-      return g(), y("div", {
-        class: w(["relative max-w-100 min-h-16 min-w-80 w-full flex items-center gap-2 container-low rounded p-3", [
-          { "border-0": !a.withBorder }
-        ]])
-      }, [
-        a.icon ? (g(), y("div", {
-          key: 0,
-          class: w(["leading-0", c(n)])
-        }, [
-          a.loading ? (g(), y("i", Br)) : (g(), y("i", {
-            key: 1,
-            class: w(["h-container w-container shrink-0", a.icon])
-          }, null, 2))
-        ], 2)) : (g(), y("div", Dr, [
-          S("div", {
-            class: w(["absolute left-[0.25rem] top-[0.25rem] h-[calc(100%-0.5rem)] w-1 rounded-full", [{
-              "animate-pulse": a.loading
-            }, c(r)]])
-          }, null, 2)
-        ])),
-        S("div", Fr, [
-          a.title ? (g(), y("div", {
-            key: 0,
-            class: w([c(n), "text-base"])
-          }, re(a.title), 3)) : z("", !0),
-          a.message ? (g(), y("div", Vr, re(a.message), 1)) : z("", !0)
+    const t = Q(e, "modelValue"), r = gt(), n = it(r), a = g(null);
+    return (o, s) => {
+      const i = It;
+      return m(), b("div", null, [
+        Pe(w("input", {
+          id: c(n),
+          ref_key: "input",
+          ref: a,
+          "onUpdate:modelValue": s[0] || (s[0] = (l) => t.value = l),
+          type: "color",
+          class: "pointer-events-none absolute opacity-0"
+        }, null, 8, dr), [
+          [yt, t.value]
         ]),
-        a.closeable ? (g(), j(s, {
-          key: 2,
-          icon: "",
-          variant: "transparent",
-          class: "text-surface-on hover:text-surface-on",
-          onClick: o[0] || (o[0] = (i) => a.$emit("close"))
-        }, {
-          default: J(() => [
-            Lr
-          ]),
-          _: 1
-        })) : z("", !0)
-      ], 2);
+        w("label", { for: c(n) }, [
+          Y(i, {
+            class: "cursor-pointer",
+            color: t.value ?? "#222"
+          }, null, 8, ["color"])
+        ], 8, fr)
+      ]);
     };
   }
-}), jr = ["data-scheme", "data-theme"], Gr = /* @__PURE__ */ C({
+}), pr = ["data-scheme", "data-theme"], hr = /* @__PURE__ */ x({
   __name: "ThemeProvider",
   props: {
     theme: {}
   },
   setup(e) {
     const r = st(e.theme, !1);
-    return (n, a) => (g(), y("div", {
-      style: T([c(r)]),
+    return (n, a) => (m(), b("div", {
+      style: A([c(r)]),
       "data-scheme": n.theme.scheme,
       "data-theme": n.theme.name
     }, [
-      P(n.$slots, "default")
-    ], 12, jr));
+      M(n.$slots, "default")
+    ], 12, pr));
   }
-}), yn = /* @__PURE__ */ C({
-  __name: "Modal",
-  props: /* @__PURE__ */ ee({
+}), lt = /* @__PURE__ */ x({
+  __name: "FullscreenOverlay",
+  props: /* @__PURE__ */ Z({
     persistent: { type: Boolean, default: !1 },
-    blur: { type: [String, Boolean] }
+    blur: { type: [String, Boolean], default: !1 },
+    wrapperClass: {}
   }, {
     modelValue: { type: Boolean },
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, r = ge(e, "modelValue"), n = b(null);
+    const t = e, r = Q(e, "modelValue"), n = g(null);
     function a(i) {
       t.persistent || i.target === n.value && (r.value = !1);
     }
-    const o = m(() => {
+    const o = v(() => {
       switch (t.blur) {
         case "sm":
           return "backdrop-blur-sm";
@@ -1916,39 +1287,27 @@ const vn = /* @__PURE__ */ C({
           return "";
       }
     });
-    q(() => {
+    G(() => {
       r.value ? document.body.style.overflow = "hidden" : setTimeout(() => {
         document.querySelector(".modal-wrapper.op100") || (document.body.style.overflow = "", document.body.style.marginRight = "");
       }, 300);
     });
-    const s = Cr();
+    const s = ur();
     return (i, l) => {
-      const u = Gr;
-      return g(), j(xt, { to: "body" }, [
-        Ve(u, { theme: c(s) }, {
-          default: J(() => [
-            S("div", {
+      const u = hr;
+      return m(), P(wt, { to: "body" }, [
+        Y(u, { theme: c(s) }, {
+          default: L(() => [
+            w("div", {
               ref_key: "wrapperRef",
               ref: n,
-              class: w(["modal-wrapper fixed left-0 top-0 z-100 h-full w-full flex items-end justify-center bg-surface-lowest/50 transition-all duration-300 md:items-center", [o.value, {
+              class: y(["modal-wrapper fixed left-0 top-0 z-100 h-full w-full bg-surface-lowest/50 transition-all duration-300 md:items-center", [o.value, i.wrapperClass, {
                 "op0 pointer-events-none": !r.value,
                 op100: r.value
               }]]),
               onClick: a
             }, [
-              Ve(kt, {
-                "enter-from-class": "translate-y-1/2",
-                "enter-to-class": "translate-y-0",
-                "leave-from-class": "translate-y-0",
-                "leave-to-class": "translate-y-1/2",
-                "enter-active-class": "transition ease-out duration-300",
-                "leave-active-class": "transition ease-in duration-200"
-              }, {
-                default: J(() => [
-                  r.value ? P(i.$slots, "default", { key: 0 }) : z("", !0)
-                ]),
-                _: 3
-              })
+              M(i.$slots, "default")
             ], 2)
           ]),
           _: 3
@@ -1956,110 +1315,740 @@ const vn = /* @__PURE__ */ C({
       ]);
     };
   }
-}), it = /* @__PURE__ */ new Set(), N = /* @__PURE__ */ new WeakMap(), oe = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new WeakMap(), Ee = /* @__PURE__ */ new WeakMap(), Ur = /* @__PURE__ */ new WeakMap(), ae = /* @__PURE__ */ new WeakMap(), ye = /* @__PURE__ */ new WeakMap(), fe = /* @__PURE__ */ new WeakSet();
-let X, He = 0, Ie = 0;
-const W = "__aa_tgt", pe = "__aa_del", we = "__aa_new", Xr = (e) => {
-  const t = Qr(e);
-  t && t.forEach((r) => Jr(r));
-}, qr = (e) => {
-  e.forEach((t) => {
-    t.target === X && Zr(), N.has(t.target) && K(t.target);
-  });
-};
-function Yr(e) {
-  const t = Ee.get(e);
-  t == null || t.disconnect();
-  let r = N.get(e), n = 0;
-  const a = 5;
-  r || (r = se(e), N.set(e, r));
-  const { offsetWidth: o, offsetHeight: s } = X, l = [
-    r.top - a,
-    o - (r.left + a + r.width),
-    s - (r.top + a + r.height),
-    r.left - a
-  ].map((f) => `${-1 * Math.floor(f)}px`).join(" "), u = new IntersectionObserver(() => {
-    ++n > 1 && K(e);
+}), mr = { class: "flex justify-end p-4 md:px-6 md:py-4 md:pb-0" }, vr = /* @__PURE__ */ w("i", { class: "i-tabler-x" }, null, -1), br = { class: "h-full flex flex-col items-center justify-center px-4 md:px-6" }, Hn = /* @__PURE__ */ x({
+  __name: "Drawer",
+  props: /* @__PURE__ */ Z({
+    persistent: { type: Boolean, default: !1 },
+    blur: { type: [String, Boolean], default: !1 },
+    position: { default: "left" }
   }, {
-    root: X,
-    threshold: 1,
-    rootMargin: l
-  });
-  u.observe(e), Ee.set(e, u);
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = e, r = Q(e, "modelValue");
+    return G(() => {
+      r.value ? document.body.style.overflow = "hidden" : setTimeout(() => {
+        document.querySelector(".modal-wrapper.op100") || (document.body.style.overflow = "", document.body.style.marginRight = "");
+      }, 300);
+    }), (n, a) => {
+      const o = nt, s = lt;
+      return m(), P(s, {
+        modelValue: r.value,
+        "onUpdate:modelValue": a[1] || (a[1] = (i) => r.value = i),
+        blur: t.blur,
+        persistent: t.persistent
+      }, {
+        default: L(() => [
+          Y(Je, {
+            "enter-from-class": n.position === "left" ? "-translate-x-1/1" : "translate-x-1/1",
+            "enter-to-class": (n.position === "left", "translate-x-0"),
+            "leave-from-class": (n.position === "left", "translate-x-0"),
+            "leave-to-class": n.position === "left" ? "-translate-x-1/1" : "translate-x-1/1",
+            "enter-active-class": "transition ease-out duration-300",
+            "leave-active-class": "transition ease-in duration-200"
+          }, {
+            default: L(() => [
+              r.value ? (m(), b("div", {
+                key: 0,
+                class: y(["fixed h-full w-full bg-surface-low md:w-md", n.position === "left" ? "left-0" : "right-0"])
+              }, [
+                w("div", mr, [
+                  Y(o, {
+                    icon: "",
+                    variant: "transparent",
+                    class: "text-surface-on hover:text-surface-on",
+                    onPointerup: a[0] || (a[0] = (i) => r.value = !1)
+                  }, {
+                    default: L(() => [
+                      vr
+                    ]),
+                    _: 1
+                  })
+                ]),
+                w("div", br, [
+                  M(n.$slots, "default")
+                ])
+              ], 2)) : T("", !0)
+            ]),
+            _: 3
+          }, 8, ["enter-from-class", "enter-to-class", "leave-from-class", "leave-to-class"])
+        ]),
+        _: 3
+      }, 8, ["modelValue", "blur", "persistent"]);
+    };
+  }
+});
+function Me(e) {
+  return _t() ? (xt(e), !0) : !1;
 }
-function K(e) {
-  clearTimeout(ye.get(e));
-  const t = Me(e), r = me(t) ? 500 : t.duration;
-  ye.set(e, setTimeout(async () => {
-    const n = Z.get(e);
-    try {
-      await (n == null ? void 0 : n.finished), N.set(e, se(e)), Yr(e);
-    } catch {
-    }
-  }, r));
+function gr() {
+  const e = /* @__PURE__ */ new Set(), t = (a) => {
+    e.delete(a);
+  };
+  return {
+    on: (a) => {
+      e.add(a);
+      const o = () => t(a);
+      return Me(o), {
+        off: o
+      };
+    },
+    off: t,
+    trigger: (...a) => Promise.all(Array.from(e).map((o) => o(...a)))
+  };
 }
-function Zr() {
-  clearTimeout(ye.get(X)), ye.set(X, setTimeout(() => {
-    it.forEach((e) => dt(e, (t) => lt(() => K(t))));
-  }, 100));
+function He(e) {
+  return typeof e == "function" ? e() : c(e);
 }
-function Kr(e) {
-  setTimeout(() => {
-    Ur.set(e, setInterval(() => lt(K.bind(null, e)), 2e3));
-  }, Math.round(2e3 * Math.random()));
+const ie = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const yr = (e) => e != null, wr = Object.prototype.toString, _r = (e) => wr.call(e) === "[object Object]", xr = () => {
+}, kr = (e, t) => Object.prototype.hasOwnProperty.call(e, t);
+function Sr(e) {
+  return e || tt();
 }
-function lt(e) {
-  typeof requestIdleCallback == "function" ? requestIdleCallback(() => e()) : requestAnimationFrame(() => e());
+function Mr(e, t = !0, r) {
+  Sr() ? ne(e, r) : t ? e() : et(e);
 }
-let Pe, Q;
-typeof window < "u" && (X = document.documentElement, Pe = new MutationObserver(Xr), Q = new ResizeObserver(qr), window.addEventListener("scroll", () => {
-  Ie = window.scrollY, He = window.scrollX;
-}), Q.observe(X));
-function Qr(e) {
-  return e.reduce((n, a) => [
-    ...n,
-    ...Array.from(a.addedNodes),
-    ...Array.from(a.removedNodes)
-  ], []).every((n) => n.nodeName === "#comment") ? !1 : e.reduce((n, a) => {
-    if (n === !1)
-      return !1;
-    if (a.target instanceof Element) {
-      if ($e(a.target), !n.has(a.target)) {
-        n.add(a.target);
-        for (let o = 0; o < a.target.children.length; o++) {
-          const s = a.target.children.item(o);
-          if (s) {
-            if (pe in s)
-              return !1;
-            $e(a.target, s), n.add(s);
-          }
-        }
-      }
-      if (a.removedNodes.length)
-        for (let o = 0; o < a.removedNodes.length; o++) {
-          const s = a.removedNodes[o];
-          if (pe in s)
-            return !1;
-          s instanceof Element && (n.add(s), $e(a.target, s), oe.set(s, [
-            a.previousSibling,
-            a.nextSibling
-          ]));
-        }
+function te(e) {
+  var t;
+  const r = He(e);
+  return (t = r == null ? void 0 : r.$el) != null ? t : r;
+}
+const $e = ie ? window : void 0, $r = ie ? window.document : void 0;
+function F(...e) {
+  let t, r, n, a;
+  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([r, n, a] = e, t = $e) : [t, r, n, a] = e, !t)
+    return xr;
+  Array.isArray(r) || (r = [r]), Array.isArray(n) || (n = [n]);
+  const o = [], s = () => {
+    o.forEach((d) => d()), o.length = 0;
+  }, i = (d, f, h, _) => (d.addEventListener(f, h, _), () => d.removeEventListener(f, h, _)), l = fe(
+    () => [te(t), He(a)],
+    ([d, f]) => {
+      if (s(), !d)
+        return;
+      const h = _r(f) ? { ...f } : f;
+      o.push(
+        ...r.flatMap((_) => n.map((C) => i(d, _, C, h)))
+      );
+    },
+    { immediate: !0, flush: "post" }
+  ), u = () => {
+    l(), s();
+  };
+  return Me(u), u;
+}
+function Cr(e) {
+  return typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
+}
+function Te(...e) {
+  let t, r, n = {};
+  e.length === 3 ? (t = e[0], r = e[1], n = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, r = e[0], n = e[1]) : (t = e[0], r = e[1]) : (t = !0, r = e[0]);
+  const {
+    target: a = $e,
+    eventName: o = "keydown",
+    passive: s = !1,
+    dedupe: i = !1
+  } = n, l = Cr(t);
+  return F(a, o, (d) => {
+    d.repeat && He(i) || l(d) && r(d);
+  }, s);
+}
+function Ar() {
+  const e = g(!1);
+  return tt() && ne(() => {
+    e.value = !0;
+  }), e;
+}
+function ct(e) {
+  const t = Ar();
+  return v(() => (t.value, !!e()));
+}
+function Tr(e, t, r = {}) {
+  const { window: n = $e, ...a } = r;
+  let o;
+  const s = ct(() => n && "MutationObserver" in n), i = () => {
+    o && (o.disconnect(), o = void 0);
+  }, l = fe(
+    () => te(e),
+    (f) => {
+      i(), s.value && n && f && (o = new MutationObserver(t), o.observe(f, a));
+    },
+    { immediate: !0 }
+  ), u = () => o == null ? void 0 : o.takeRecords(), d = () => {
+    i(), l();
+  };
+  return Me(d), {
+    isSupported: s,
+    stop: d,
+    takeRecords: u
+  };
+}
+function Rr(e, t = {}) {
+  const r = g(!1), n = kt(null);
+  let a = 0, o = !0;
+  if (ie) {
+    const s = typeof t == "function" ? { onDrop: t } : t, i = (l) => {
+      var u, d;
+      const f = Array.from((d = (u = l.dataTransfer) == null ? void 0 : u.files) != null ? d : []);
+      return n.value = f.length === 0 ? null : f;
+    };
+    F(e, "dragenter", (l) => {
+      var u, d;
+      const f = Array.from(((u = l == null ? void 0 : l.dataTransfer) == null ? void 0 : u.items) || []).map((h) => h.kind === "file" ? h.type : null).filter(yr);
+      if (s.dataTypes && l.dataTransfer) {
+        const h = c(s.dataTypes);
+        if (o = typeof h == "function" ? h(f) : h ? h.some((_) => f.includes(_)) : !0, !o)
+          return;
+      }
+      l.preventDefault(), a += 1, r.value = !0, (d = s.onEnter) == null || d.call(s, i(l), l);
+    }), F(e, "dragover", (l) => {
+      var u;
+      o && (l.preventDefault(), (u = s.onOver) == null || u.call(s, i(l), l));
+    }), F(e, "dragleave", (l) => {
+      var u;
+      o && (l.preventDefault(), a -= 1, a === 0 && (r.value = !1), (u = s.onLeave) == null || u.call(s, i(l), l));
+    }), F(e, "drop", (l) => {
+      var u;
+      l.preventDefault(), a = 0, r.value = !1, (u = s.onDrop) == null || u.call(s, i(l), l);
+    });
+  }
+  return {
+    files: n,
+    isOverDropZone: r
+  };
+}
+function zr(e, t, r = {}) {
+  const { window: n = $e, ...a } = r;
+  let o;
+  const s = ct(() => n && "ResizeObserver" in n), i = () => {
+    o && (o.disconnect(), o = void 0);
+  }, l = v(() => Array.isArray(e) ? e.map((f) => te(f)) : [te(e)]), u = fe(
+    l,
+    (f) => {
+      if (i(), s.value && n) {
+        o = new ResizeObserver(t);
+        for (const h of f)
+          h && o.observe(h, a);
+      }
+    },
+    { immediate: !0, flush: "post", deep: !0 }
+  ), d = () => {
+    i(), u();
+  };
+  return Me(d), {
+    isSupported: s,
+    stop: d
+  };
+}
+function Br(e, t = {}) {
+  const {
+    reset: r = !0,
+    windowResize: n = !0,
+    windowScroll: a = !0,
+    immediate: o = !0
+  } = t, s = g(0), i = g(0), l = g(0), u = g(0), d = g(0), f = g(0), h = g(0), _ = g(0);
+  function C() {
+    const $ = te(e);
+    if (!$) {
+      r && (s.value = 0, i.value = 0, l.value = 0, u.value = 0, d.value = 0, f.value = 0, h.value = 0, _.value = 0);
+      return;
+    }
+    const O = $.getBoundingClientRect();
+    s.value = O.height, i.value = O.bottom, l.value = O.left, u.value = O.right, d.value = O.top, f.value = O.width, h.value = O.x, _.value = O.y;
+  }
+  return zr(e, C), fe(() => te(e), ($) => !$ && C()), Tr(e, C, {
+    attributeFilter: ["style", "class"]
+  }), a && F("scroll", C, { capture: !0, passive: !0 }), n && F("resize", C, { passive: !0 }), Mr(() => {
+    o && C();
+  }), {
+    height: s,
+    bottom: i,
+    left: l,
+    right: u,
+    top: d,
+    width: f,
+    x: h,
+    y: _,
+    update: C
+  };
+}
+const Er = {
+  multiple: !0,
+  accept: "*",
+  reset: !1,
+  directory: !1
+};
+function Or(e = {}) {
+  const {
+    document: t = $r
+  } = e, r = g(null), { on: n, trigger: a } = gr();
+  let o;
+  t && (o = t.createElement("input"), o.type = "file", o.onchange = (l) => {
+    const u = l.target;
+    r.value = u.files, a(r.value);
+  });
+  const s = () => {
+    r.value = null, o && (o.value = "", a(null));
+  }, i = (l) => {
+    if (!o)
+      return;
+    const u = {
+      ...Er,
+      ...e,
+      ...l
+    };
+    o.multiple = u.multiple, o.accept = u.accept, o.webkitdirectory = u.directory, kr(u, "capture") && (o.capture = u.capture), u.reset && s(), o.click();
+  };
+  return {
+    files: St(r),
+    open: i,
+    reset: s,
+    onChange: n
+  };
+}
+function Nr(e, t = {}) {
+  const { initialValue: r = !1, focusVisible: n = !1 } = t, a = g(!1), o = v(() => te(e));
+  F(o, "focus", (i) => {
+    var l, u;
+    (!n || (u = (l = i.target).matches) != null && u.call(l, ":focus-visible")) && (a.value = !0);
+  }), F(o, "blur", () => a.value = !1);
+  const s = v({
+    get: () => a.value,
+    set(i) {
+      var l, u;
+      !i && a.value ? (l = o.value) == null || l.blur() : i && !a.value && ((u = o.value) == null || u.focus());
+    }
+  });
+  return fe(
+    o,
+    () => {
+      s.value = r;
+    },
+    { immediate: !0, flush: "post" }
+  ), { focused: s };
+}
+const In = /* @__PURE__ */ x({
+  __name: "Dropzone",
+  props: {
+    dashed: { type: Boolean, default: !0 },
+    accept: { default: "*" }
+  },
+  emits: ["drop"],
+  setup(e, { emit: t }) {
+    const r = e, n = t, a = g(), { onChange: o, open: s } = Or({
+      accept: r.accept
+    });
+    o((l) => {
+      l ? n("drop", Array.from(l)) : n("drop", null);
+    });
+    const { isOverDropZone: i } = Rr(a, {
+      onDrop: (l) => {
+        n("drop", l);
+      }
+    });
+    return (l, u) => (m(), b("div", {
+      ref_key: "dropZoneRef",
+      ref: a,
+      class: y([{
+        "": c(i),
+        " bg-surface-low": !c(i),
+        "border-dashed": l.dashed
+      }, "h-full w-full flex cursor-pointer items-center justify-center rounded"]),
+      onPointerup: u[0] || (u[0] = () => c(s)())
+    }, [
+      M(l.$slots, "default")
+    ], 34));
+  }
+}), Vn = /* @__PURE__ */ x({
+  __name: "Image",
+  props: {
+    is: { default: "img" },
+    src: {},
+    style: {},
+    class: {},
+    width: {},
+    maxWidth: {},
+    height: {},
+    maxHeight: {},
+    rounded: { default: "md" }
+  },
+  setup(e) {
+    const t = e, r = g(!1), n = g(null);
+    function a() {
+      r.value = !0;
+    }
+    ne(() => {
+      var s;
+      (s = n.value) != null && s.complete && a();
+    });
+    const o = J(t);
+    return (s, i) => (m(), b("div", {
+      style: A({
+        height: s.height,
+        width: s.width,
+        maxHeight: s.maxHeight,
+        maxWidth: s.maxWidth
+      })
+    }, [
+      s.src ? (m(), P(de(s.is), we({
+        key: 0,
+        ref_key: "img",
+        ref: n,
+        style: [
+          s.style,
+          c(o).style
+        ],
+        src: s.src,
+        class: ["h-full w-full object-cover", [
+          t.class,
+          c(o).class,
+          {
+            hidden: !c(r)
+          }
+        ]]
+      }, s.$attrs, { onLoad: a }), null, 16, ["style", "src", "class"])) : T("", !0),
+      c(r) ? T("", !0) : (m(), b("div", {
+        key: 1,
+        class: y(["h-full w-full animate-pulse border-transparent bg-surface-high object-cover", [
+          t.class,
+          c(o).class
+        ]]),
+        style: A([
+          s.style,
+          c(o).style
+        ])
+      }, null, 6))
+    ], 4));
+  }
+}), Pr = { class: "relative" }, Dn = /* @__PURE__ */ x({
+  __name: "Indicator",
+  props: {
+    color: { default: "primary" },
+    size: { default: "md" },
+    position: { default: "top-right" },
+    ping: { type: Boolean }
+  },
+  setup(e) {
+    const t = e, r = v(() => {
+      switch (t.size) {
+        case "sm":
+          return "w-2 h-2";
+        case "md":
+          return "w-3 h-3";
+        case "lg":
+          return "w-4 h-4";
+        default:
+          return typeof t.size == "number" || !Number.isNaN(Number(t.size)) ? `w-${t.size} h-${t.size}` : t.size;
+      }
+    }), n = Mt(), a = v(() => {
+      if (!n.label)
+        return "";
+      switch (t.size) {
+        case "sm":
+          return "text-sm children:px-1.5";
+        case "md":
+          return "text-md children:px-2";
+        case "lg":
+          return "text-lg children:px-2.5";
+      }
+    }), o = v(() => {
+      switch (t.position) {
+        case "top-left":
+          return "top-0 left-0 -translate-x-1/2 -translate-y-1/2";
+        case "top-right":
+          return "top-0 right-0 translate-x-1/2 -translate-y-1/2";
+        case "bottom-left":
+          return "bottom-0 left-0 -translate-x-1/2 translate-y-1/2";
+        case "bottom-right":
+          return "bottom-0 right-0 translate-x-1/2 translate-y-1/2";
+      }
+    }), s = v(() => {
+      switch (t.color) {
+        case "primary":
+          return "bg-primary-container text-primary-on";
+        case "secondary":
+          return "bg-secondary-container text-secondary-on";
+        case "tertiary":
+          return "bg-tertiary-container text-tertiary-on";
+        case "error":
+          return "bg-error-container text-error-on";
+      }
+    });
+    return (i, l) => (m(), b("div", Pr, [
+      w("div", {
+        class: y([[c(o), c(a)], "absolute z-1"])
+      }, [
+        t.ping ? (m(), b("div", {
+          key: 0,
+          class: y(["absolute box-content animate-ping border-2 border-transparent rounded-full", [
+            {
+              [c(r)]: !i.$slots.label
+            },
+            c(s)
+          ]])
+        }, [
+          i.$slots.label ? M(i.$slots, "label", { key: 0 }) : T("", !0)
+        ], 2)) : T("", !0),
+        w("div", {
+          class: y(["top-0 box-content border-2 border-surface-low rounded-full", [
+            {
+              [c(r)]: !i.$slots.label
+            },
+            c(s)
+          ]])
+        }, [
+          i.$slots.label ? M(i.$slots, "label", { key: 0 }) : T("", !0)
+        ], 2)
+      ], 2),
+      M(i.$slots, "default")
+    ]));
+  }
+}), Fn = /* @__PURE__ */ x({
+  __name: "Modal",
+  props: /* @__PURE__ */ Z({
+    persistent: { type: Boolean, default: !1 },
+    blur: { type: [String, Boolean], default: !1 }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = e, r = Q(e, "modelValue");
+    return G(() => {
+      r.value ? document.body.style.overflow = "hidden" : setTimeout(() => {
+        document.querySelector(".modal-wrapper.op100") || (document.body.style.overflow = "", document.body.style.marginRight = "");
+      }, 300);
+    }), (n, a) => {
+      const o = lt;
+      return m(), P(o, {
+        modelValue: r.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (s) => r.value = s),
+        blur: t.blur,
+        persistent: t.persistent,
+        "wrapper-class": "flex items-end justify-center"
+      }, {
+        default: L(() => [
+          Y(Je, {
+            "enter-from-class": "translate-y-1/2",
+            "enter-to-class": "translate-y-0",
+            "leave-from-class": "translate-y-0",
+            "leave-to-class": "translate-y-1/2",
+            "enter-active-class": "transition ease-out duration-300",
+            "leave-active-class": "transition ease-in duration-200"
+          }, {
+            default: L(() => [
+              r.value ? M(n.$slots, "default", { key: 0 }) : T("", !0)
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["modelValue", "blur", "persistent"]);
+    };
+  }
+}), Hr = {
+  key: 0,
+  class: "h-container w-container i-tabler-loader-2 shrink-0 animate-spin"
+}, Ir = { key: 1 }, Vr = { class: "grow-1" }, Dr = {
+  key: 2,
+  class: "text-sm text-surface-onlow"
+}, Fr = /* @__PURE__ */ w("i", { class: "i-tabler-x" }, null, -1), Wr = /* @__PURE__ */ x({
+  __name: "Notification",
+  props: {
+    title: {},
+    message: {},
+    icon: {},
+    loading: { type: Boolean },
+    withBorder: { type: Boolean },
+    closeable: { type: Boolean },
+    rounded: { default: "md" },
+    block: { type: Boolean, default: !1 },
+    color: { default: "primary" }
+  },
+  emits: ["close"],
+  setup(e) {
+    const t = e, r = J(t), n = v(() => {
+      switch (t.color) {
+        case "secondary":
+          return "bg-secondary-container";
+        case "tertiary":
+          return "bg-tertiary-container";
+        case "error":
+          return "bg-error-container";
+        default:
+          return "bg-primary-container";
+      }
+    }), a = v(() => {
+      switch (t.color) {
+        case "secondary":
+          return "text-secondary-container";
+        case "tertiary":
+          return "text-tertiary-container";
+        case "error":
+          return "text-error-container";
+        default:
+          return "text-primary-container";
+      }
+    });
+    return (o, s) => {
+      const i = nt;
+      return m(), b("div", {
+        class: y(["relative min-h-16 min-w-80 w-full flex items-center gap-2 container-low p-3", [
+          { "border-0": !o.withBorder },
+          c(r).class,
+          {
+            "max-w-100": !o.block,
+            "w-full": o.block
+          }
+        ]]),
+        style: A(c(r).style)
+      }, [
+        o.icon ? (m(), b("div", {
+          key: 0,
+          class: y(["leading-0", c(a)])
+        }, [
+          o.loading ? (m(), b("i", Hr)) : (m(), b("i", {
+            key: 1,
+            class: y(["h-container w-container shrink-0", o.icon])
+          }, null, 2))
+        ], 2)) : (m(), b("div", Ir, [
+          w("div", {
+            class: y(["absolute left-[0.25rem] top-[0.25rem] h-[calc(100%-0.5rem)] w-1 rounded-full", [{
+              "animate-pulse": o.loading
+            }, c(n)]])
+          }, null, 2)
+        ])),
+        w("div", Vr, [
+          o.title ? (m(), b("div", {
+            key: 0,
+            class: y([c(a), "text-base"])
+          }, se(o.title), 3)) : T("", !0),
+          o.$slots.message ? M(o.$slots, "message", { key: 1 }) : o.message ? (m(), b("div", Dr, se(o.message), 1)) : T("", !0)
+        ]),
+        o.closeable ? (m(), P(i, {
+          key: 2,
+          icon: "",
+          variant: "transparent",
+          class: "text-surface-on hover:text-surface-on",
+          onClick: s[0] || (s[0] = (l) => o.$emit("close"))
+        }, {
+          default: L(() => [
+            Fr
+          ]),
+          _: 1
+        })) : T("", !0)
+      ], 6);
+    };
+  }
+}), ut = /* @__PURE__ */ new Set(), E = /* @__PURE__ */ new WeakMap(), le = /* @__PURE__ */ new WeakMap(), re = /* @__PURE__ */ new WeakMap(), Be = /* @__PURE__ */ new WeakMap(), Lr = /* @__PURE__ */ new WeakMap(), ce = /* @__PURE__ */ new WeakMap(), xe = /* @__PURE__ */ new WeakMap(), ve = /* @__PURE__ */ new WeakSet();
+let K, Ie = 0, Ve = 0;
+const U = "__aa_tgt", ge = "__aa_del", ke = "__aa_new", jr = (e) => {
+  const t = Yr(e);
+  t && t.forEach((r) => Zr(r));
+}, Ur = (e) => {
+  e.forEach((t) => {
+    t.target === K && qr(), E.has(t.target) && oe(t.target);
+  });
+};
+function Gr(e) {
+  const t = Be.get(e);
+  t == null || t.disconnect();
+  let r = E.get(e), n = 0;
+  const a = 5;
+  r || (r = ue(e), E.set(e, r));
+  const { offsetWidth: o, offsetHeight: s } = K, l = [
+    r.top - a,
+    o - (r.left + a + r.width),
+    s - (r.top + a + r.height),
+    r.left - a
+  ].map((d) => `${-1 * Math.floor(d)}px`).join(" "), u = new IntersectionObserver(() => {
+    ++n > 1 && oe(e);
+  }, {
+    root: K,
+    threshold: 1,
+    rootMargin: l
+  });
+  u.observe(e), Be.set(e, u);
+}
+function oe(e) {
+  clearTimeout(xe.get(e));
+  const t = Ce(e), r = ye(t) ? 500 : t.duration;
+  xe.set(e, setTimeout(async () => {
+    const n = re.get(e);
+    try {
+      await (n == null ? void 0 : n.finished), E.set(e, ue(e)), Gr(e);
+    } catch {
+    }
+  }, r));
+}
+function qr() {
+  clearTimeout(xe.get(K)), xe.set(K, setTimeout(() => {
+    ut.forEach((e) => ht(e, (t) => dt(() => oe(t))));
+  }, 100));
+}
+function Xr(e) {
+  setTimeout(() => {
+    Lr.set(e, setInterval(() => dt(oe.bind(null, e)), 2e3));
+  }, Math.round(2e3 * Math.random()));
+}
+function dt(e) {
+  typeof requestIdleCallback == "function" ? requestIdleCallback(() => e()) : requestAnimationFrame(() => e());
+}
+let Ee, ae;
+typeof window < "u" && (K = document.documentElement, Ee = new MutationObserver(jr), ae = new ResizeObserver(Ur), window.addEventListener("scroll", () => {
+  Ve = window.scrollY, Ie = window.scrollX;
+}), ae.observe(K));
+function Yr(e) {
+  return e.reduce((n, a) => [
+    ...n,
+    ...Array.from(a.addedNodes),
+    ...Array.from(a.removedNodes)
+  ], []).every((n) => n.nodeName === "#comment") ? !1 : e.reduce((n, a) => {
+    if (n === !1)
+      return !1;
+    if (a.target instanceof Element) {
+      if (Re(a.target), !n.has(a.target)) {
+        n.add(a.target);
+        for (let o = 0; o < a.target.children.length; o++) {
+          const s = a.target.children.item(o);
+          if (s) {
+            if (ge in s)
+              return !1;
+            Re(a.target, s), n.add(s);
+          }
+        }
+      }
+      if (a.removedNodes.length)
+        for (let o = 0; o < a.removedNodes.length; o++) {
+          const s = a.removedNodes[o];
+          if (ge in s)
+            return !1;
+          s instanceof Element && (n.add(s), Re(a.target, s), le.set(s, [
+            a.previousSibling,
+            a.nextSibling
+          ]));
+        }
     }
     return n;
   }, /* @__PURE__ */ new Set());
 }
-function $e(e, t) {
-  !t && !(W in e) ? Object.defineProperty(e, W, { value: e }) : t && !(W in t) && Object.defineProperty(t, W, { value: e });
+function Re(e, t) {
+  !t && !(U in e) ? Object.defineProperty(e, U, { value: e }) : t && !(U in t) && Object.defineProperty(t, U, { value: e });
 }
-function Jr(e) {
+function Zr(e) {
   var t;
-  const r = e.isConnected, n = N.has(e);
-  r && oe.has(e) && oe.delete(e), Z.has(e) && ((t = Z.get(e)) === null || t === void 0 || t.cancel()), we in e ? Ye(e) : n && r ? tn(e) : n && !r ? rn(e) : Ye(e);
+  const r = e.isConnected, n = E.has(e);
+  r && le.has(e) && le.delete(e), re.has(e) && ((t = re.get(e)) === null || t === void 0 || t.cancel()), ke in e ? Ye(e) : n && r ? Qr(e) : n && !r ? Jr(e) : Ye(e);
 }
-function V(e) {
+function W(e) {
   return Number(e.replace(/[^0-9.\-]/g, ""));
 }
-function en(e) {
+function Kr(e) {
   let t = e.parentElement;
   for (; t; ) {
     if (t.scrollLeft || t.scrollTop)
@@ -2068,8 +2057,8 @@ function en(e) {
   }
   return { x: 0, y: 0 };
 }
-function se(e) {
-  const t = e.getBoundingClientRect(), { x: r, y: n } = en(e);
+function ue(e) {
+  const t = e.getBoundingClientRect(), { x: r, y: n } = Kr(e);
   return {
     top: t.top + n,
     left: t.left + r,
@@ -2077,69 +2066,69 @@ function se(e) {
     height: t.height
   };
 }
-function ct(e, t, r) {
+function ft(e, t, r) {
   let n = t.width, a = t.height, o = r.width, s = r.height;
   const i = getComputedStyle(e);
   if (i.getPropertyValue("box-sizing") === "content-box") {
-    const u = V(i.paddingTop) + V(i.paddingBottom) + V(i.borderTopWidth) + V(i.borderBottomWidth), f = V(i.paddingLeft) + V(i.paddingRight) + V(i.borderRightWidth) + V(i.borderLeftWidth);
-    n -= f, o -= f, a -= u, s -= u;
+    const u = W(i.paddingTop) + W(i.paddingBottom) + W(i.borderTopWidth) + W(i.borderBottomWidth), d = W(i.paddingLeft) + W(i.paddingRight) + W(i.borderRightWidth) + W(i.borderLeftWidth);
+    n -= d, o -= d, a -= u, s -= u;
   }
   return [n, o, a, s].map(Math.round);
 }
-function Me(e) {
-  return W in e && ae.has(e[W]) ? ae.get(e[W]) : { duration: 250, easing: "ease-in-out" };
+function Ce(e) {
+  return U in e && ce.has(e[U]) ? ce.get(e[U]) : { duration: 250, easing: "ease-in-out" };
 }
-function ut(e) {
-  if (W in e)
-    return e[W];
+function pt(e) {
+  if (U in e)
+    return e[U];
 }
-function Be(e) {
-  const t = ut(e);
-  return t ? fe.has(t) : !1;
+function De(e) {
+  const t = pt(e);
+  return t ? ve.has(t) : !1;
 }
-function dt(e, ...t) {
-  t.forEach((r) => r(e, ae.has(e)));
+function ht(e, ...t) {
+  t.forEach((r) => r(e, ce.has(e)));
   for (let r = 0; r < e.children.length; r++) {
     const n = e.children.item(r);
-    n && t.forEach((a) => a(n, ae.has(n)));
+    n && t.forEach((a) => a(n, ce.has(n)));
   }
 }
-function De(e) {
+function Fe(e) {
   return Array.isArray(e) ? e : [e];
 }
-function me(e) {
+function ye(e) {
   return typeof e == "function";
 }
-function tn(e) {
-  const t = N.get(e), r = se(e);
-  if (!Be(e))
-    return N.set(e, r);
+function Qr(e) {
+  const t = E.get(e), r = ue(e);
+  if (!De(e))
+    return E.set(e, r);
   let n;
   if (!t)
     return;
-  const a = Me(e);
+  const a = Ce(e);
   if (typeof a != "function") {
-    const o = t.left - r.left, s = t.top - r.top, [i, l, u, f] = ct(e, t, r), d = {
+    const o = t.left - r.left, s = t.top - r.top, [i, l, u, d] = ft(e, t, r), f = {
       transform: `translate(${o}px, ${s}px)`
     }, h = {
       transform: "translate(0, 0)"
     };
-    i !== l && (d.width = `${i}px`, h.width = `${l}px`), u !== f && (d.height = `${u}px`, h.height = `${f}px`), n = e.animate([d, h], {
+    i !== l && (f.width = `${i}px`, h.width = `${l}px`), u !== d && (f.height = `${u}px`, h.height = `${d}px`), n = e.animate([f, h], {
       duration: a.duration,
       easing: a.easing
     });
   } else {
-    const [o] = De(a(e, "remain", t, r));
+    const [o] = Fe(a(e, "remain", t, r));
     n = new Animation(o), n.play();
   }
-  Z.set(e, n), N.set(e, r), n.addEventListener("finish", K.bind(null, e));
+  re.set(e, n), E.set(e, r), n.addEventListener("finish", oe.bind(null, e));
 }
 function Ye(e) {
-  we in e && delete e[we];
-  const t = se(e);
-  N.set(e, t);
-  const r = Me(e);
-  if (!Be(e))
+  ke in e && delete e[ke];
+  const t = ue(e);
+  E.set(e, t);
+  const r = Ce(e);
+  if (!De(e))
     return;
   let n;
   if (typeof r != "function")
@@ -2152,31 +2141,31 @@ function Ye(e) {
       easing: "ease-in"
     });
   else {
-    const [a] = De(r(e, "add", t));
+    const [a] = Fe(r(e, "add", t));
     n = new Animation(a), n.play();
   }
-  Z.set(e, n), n.addEventListener("finish", K.bind(null, e));
+  re.set(e, n), n.addEventListener("finish", oe.bind(null, e));
 }
 function Ze(e, t) {
   var r;
-  e.remove(), N.delete(e), oe.delete(e), Z.delete(e), (r = Ee.get(e)) === null || r === void 0 || r.disconnect(), setTimeout(() => {
-    if (pe in e && delete e[pe], Object.defineProperty(e, we, { value: !0, configurable: !0 }), t && e instanceof HTMLElement)
+  e.remove(), E.delete(e), le.delete(e), re.delete(e), (r = Be.get(e)) === null || r === void 0 || r.disconnect(), setTimeout(() => {
+    if (ge in e && delete e[ge], Object.defineProperty(e, ke, { value: !0, configurable: !0 }), t && e instanceof HTMLElement)
       for (const n in t)
         e.style[n] = "";
   }, 0);
 }
-function rn(e) {
+function Jr(e) {
   var t;
-  if (!oe.has(e) || !N.has(e))
+  if (!le.has(e) || !E.has(e))
     return;
-  const [r, n] = oe.get(e);
-  Object.defineProperty(e, pe, { value: !0, configurable: !0 });
+  const [r, n] = le.get(e);
+  Object.defineProperty(e, ge, { value: !0, configurable: !0 });
   const a = window.scrollX, o = window.scrollY;
-  if (n && n.parentNode && n.parentNode instanceof Element ? n.parentNode.insertBefore(e, n) : r && r.parentNode ? r.parentNode.appendChild(e) : (t = ut(e)) === null || t === void 0 || t.appendChild(e), !Be(e))
+  if (n && n.parentNode && n.parentNode instanceof Element ? n.parentNode.insertBefore(e, n) : r && r.parentNode ? r.parentNode.appendChild(e) : (t = pt(e)) === null || t === void 0 || t.appendChild(e), !De(e))
     return Ze(e);
-  const [s, i, l, u] = on(e), f = Me(e), d = N.get(e);
-  (a !== He || o !== Ie) && nn(e, a, o, f);
-  let h, v = {
+  const [s, i, l, u] = tn(e), d = Ce(e), f = E.get(e);
+  (a !== Ie || o !== Ve) && en(e, a, o, d);
+  let h, _ = {
     position: "absolute",
     top: `${s}px`,
     left: `${i}px`,
@@ -2187,8 +2176,8 @@ function rn(e) {
     transformOrigin: "center",
     zIndex: "100"
   };
-  if (!me(f))
-    Object.assign(e.style, v), h = e.animate([
+  if (!ye(d))
+    Object.assign(e.style, _), h = e.animate([
       {
         transform: "scale(1)",
         opacity: 1
@@ -2197,68 +2186,68 @@ function rn(e) {
         transform: "scale(.98)",
         opacity: 0
       }
-    ], { duration: f.duration, easing: "ease-out" });
+    ], { duration: d.duration, easing: "ease-out" });
   else {
-    const [k, M] = De(f(e, "remove", d));
-    (M == null ? void 0 : M.styleReset) !== !1 && (v = (M == null ? void 0 : M.styleReset) || v, Object.assign(e.style, v)), h = new Animation(k), h.play();
+    const [C, $] = Fe(d(e, "remove", f));
+    ($ == null ? void 0 : $.styleReset) !== !1 && (_ = ($ == null ? void 0 : $.styleReset) || _, Object.assign(e.style, _)), h = new Animation(C), h.play();
   }
-  Z.set(e, h), h.addEventListener("finish", Ze.bind(null, e, v));
+  re.set(e, h), h.addEventListener("finish", Ze.bind(null, e, _));
 }
-function nn(e, t, r, n) {
-  const a = He - t, o = Ie - r, s = document.documentElement.style.scrollBehavior;
-  if (getComputedStyle(X).scrollBehavior === "smooth" && (document.documentElement.style.scrollBehavior = "auto"), window.scrollTo(window.scrollX + a, window.scrollY + o), !e.parentElement)
+function en(e, t, r, n) {
+  const a = Ie - t, o = Ve - r, s = document.documentElement.style.scrollBehavior;
+  if (getComputedStyle(K).scrollBehavior === "smooth" && (document.documentElement.style.scrollBehavior = "auto"), window.scrollTo(window.scrollX + a, window.scrollY + o), !e.parentElement)
     return;
   const l = e.parentElement;
-  let u = l.clientHeight, f = l.clientWidth;
-  const d = performance.now();
+  let u = l.clientHeight, d = l.clientWidth;
+  const f = performance.now();
   function h() {
     requestAnimationFrame(() => {
-      if (!me(n)) {
-        const v = u - l.clientHeight, k = f - l.clientWidth;
-        d + n.duration > performance.now() ? (window.scrollTo({
-          left: window.scrollX - k,
-          top: window.scrollY - v
-        }), u = l.clientHeight, f = l.clientWidth, h()) : document.documentElement.style.scrollBehavior = s;
+      if (!ye(n)) {
+        const _ = u - l.clientHeight, C = d - l.clientWidth;
+        f + n.duration > performance.now() ? (window.scrollTo({
+          left: window.scrollX - C,
+          top: window.scrollY - _
+        }), u = l.clientHeight, d = l.clientWidth, h()) : document.documentElement.style.scrollBehavior = s;
       }
     });
   }
   h();
 }
-function on(e) {
-  const t = N.get(e), [r, , n] = ct(e, t, se(e));
+function tn(e) {
+  const t = E.get(e), [r, , n] = ft(e, t, ue(e));
   let a = e.parentElement;
   for (; a && (getComputedStyle(a).position === "static" || a instanceof HTMLBodyElement); )
     a = a.parentElement;
   a || (a = document.body);
-  const o = getComputedStyle(a), s = N.get(a) || se(a), i = Math.round(t.top - s.top) - V(o.borderTopWidth), l = Math.round(t.left - s.left) - V(o.borderLeftWidth);
+  const o = getComputedStyle(a), s = E.get(a) || ue(a), i = Math.round(t.top - s.top) - W(o.borderTopWidth), l = Math.round(t.left - s.left) - W(o.borderLeftWidth);
   return [i, l, r, n];
 }
-function an(e, t = {}) {
-  return Pe && Q && (window.matchMedia("(prefers-reduced-motion: reduce)").matches && !me(t) && !t.disrespectUserMotionPreference || (fe.add(e), getComputedStyle(e).position === "static" && Object.assign(e.style, { position: "relative" }), dt(e, K, Kr, (a) => Q == null ? void 0 : Q.observe(a)), me(t) ? ae.set(e, t) : ae.set(e, { duration: 250, easing: "ease-in-out", ...t }), Pe.observe(e, { childList: !0 }), it.add(e))), Object.freeze({
+function rn(e, t = {}) {
+  return Ee && ae && (window.matchMedia("(prefers-reduced-motion: reduce)").matches && !ye(t) && !t.disrespectUserMotionPreference || (ve.add(e), getComputedStyle(e).position === "static" && Object.assign(e.style, { position: "relative" }), ht(e, oe, Xr, (a) => ae == null ? void 0 : ae.observe(a)), ye(t) ? ce.set(e, t) : ce.set(e, { duration: 250, easing: "ease-in-out", ...t }), Ee.observe(e, { childList: !0 }), ut.add(e))), Object.freeze({
     parent: e,
     enable: () => {
-      fe.add(e);
+      ve.add(e);
     },
     disable: () => {
-      fe.delete(e);
+      ve.delete(e);
     },
-    isEnabled: () => fe.has(e)
+    isEnabled: () => ve.has(e)
   });
 }
-const sn = {
+const nn = {
   mounted: (e, t) => {
-    an(e, t.value || {});
+    rn(e, t.value || {});
   },
   // ignore ssr see #96:
   getSSRProps: () => ({})
-}, ln = { class: "fixed z-20 flex flex-col gap-2 p-2" }, wn = /* @__PURE__ */ C({
+}, on = { class: "fixed z-20 flex flex-col gap-2 p-2" }, Wn = /* @__PURE__ */ x({
   __name: "NotificationSystem",
   setup(e) {
-    const t = kr();
+    const t = dn();
     return (r, n) => {
       const a = Wr;
-      return Je((g(), y("div", ln, [
-        (g(!0), y(te, null, he(c(t), (o) => (g(), j(a, {
+      return Pe((m(), b("div", on, [
+        (m(!0), b(ee, null, be(c(t), (o) => (m(), P(a, {
           key: o.hash,
           closeable: "",
           "with-border": "",
@@ -2270,11 +2259,138 @@ const sn = {
           onClose: (s) => c(t).splice(c(t).indexOf(o), 1)
         }, null, 8, ["title", "message", "icon", "loading", "color", "onClose"]))), 128))
       ])), [
-        [c(sn)]
+        [c(nn)]
       ]);
     };
   }
-}), cn = { class: "flex gap-2" }, _n = /* @__PURE__ */ C({
+}), an = { class: "relative" }, Ln = /* @__PURE__ */ x({
+  __name: "Overlay",
+  props: {
+    blur: { type: [Boolean, String], default: !1 },
+    rounded: { default: "none" },
+    opacity: { default: 30 },
+    color: { default: "black" }
+  },
+  setup(e) {
+    const t = e, r = v(() => {
+      switch (t.blur) {
+        case "sm":
+          return "backdrop-blur-sm";
+        case "md":
+        case !0:
+          return "backdrop-blur-md";
+        case "lg":
+          return "backdrop-blur-lg";
+        default:
+          return "";
+      }
+    }), n = J(t), a = g(null), o = p(t.color).toRgb(), s = v(() => ({
+      backgroundColor: `rgba(${o.r}, ${o.g}, ${o.b}, ${t.opacity / 100})`
+    }));
+    return (i, l) => (m(), b("div", an, [
+      M(i.$slots, "default"),
+      w("div", we(i.$attrs, {
+        ref_key: "wrapperRef",
+        ref: a,
+        class: [[c(r), c(n).class], "absolute left-0 top-0 h-full w-full overflow-hidden md:items-center"],
+        style: [c(n).style, c(s)]
+      }), [
+        M(i.$slots, "content")
+      ], 16)
+    ]));
+  }
+}), jn = /* @__PURE__ */ x({
+  __name: "Paper",
+  props: {
+    size: { default: "md" },
+    rounded: { default: "md" },
+    withBorder: { type: Boolean, default: !1 },
+    is: { default: "div" }
+  },
+  setup(e) {
+    const r = J(e);
+    return (n, a) => (m(), P(de(n.is), {
+      class: y(["container-low rounded-lg p-4", [
+        {
+          "border-transparent": !n.withBorder
+        },
+        c(r).class
+      ]]),
+      style: A([c(r).style])
+    }, {
+      default: L(() => [
+        M(n.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class", "style"]));
+  }
+}), sn = ["value", "placeholder", "type"], ln = /* @__PURE__ */ x({
+  __name: "TextField",
+  props: {
+    modelValue: {},
+    onChange: {},
+    color: { default: "primary" },
+    error: { type: Boolean },
+    disabled: { type: Boolean },
+    rounded: { default: "md" },
+    size: { default: "md" },
+    password: { type: Boolean },
+    placeholder: {}
+  },
+  emits: ["change", "update:modelValue", "input", "click", "pointerdown", "pointerup"],
+  setup(e, { expose: t, emit: r }) {
+    const n = e, a = r, o = v(() => {
+      switch (n.size) {
+        case "sm":
+          return {
+            base: "h-6 px-2 py-1 text-xs"
+          };
+        case "md":
+          return {
+            base: "h-8 px-3 py-1 text-sm"
+          };
+        case "lg":
+          return {
+            base: "h-10 px-4 py-2 text-base"
+          };
+      }
+    }), s = v(() => {
+      if (n.error)
+        return "text-error-container bg-surface-base border-error-container focus:border-error-container";
+      switch (n.color) {
+        case "secondary":
+          return "text-surface-on bg-surface-base border-surface-border-base focus:border-secondary-container";
+        case "tertiary":
+          return "text-surface-on bg-surface-base border-surface-border-base focus:border-tertiary-container";
+        case "error":
+          return "text-surface-on bg-surface-base border-surface-border-base focus:border-error-container";
+        case "primary":
+        default:
+          return "text-surface-on bg-surface-base border-surface-border-base focus:border-primary-container";
+      }
+    }), i = v(() => n.disabled ? "pointer-events-none filter grayscale opacity-60" : ""), l = J(n), u = g(null);
+    function d(f) {
+      var h;
+      a("update:modelValue", ((h = f.target) == null ? void 0 : h.value) ?? ""), a("input", f);
+    }
+    return t({
+      el: u
+    }), (f, h) => (m(), b("input", {
+      ref_key: "input",
+      ref: u,
+      value: f.modelValue,
+      class: y(["bg-back-2 border px-2 py-1 outline-none transition-background-color,border-color,color", [c(s), c(i), c(l).class, c(o).base]]),
+      style: A([c(l).style]),
+      placeholder: f.placeholder,
+      type: n.password ? "password" : "text",
+      onChange: h[0] || (h[0] = (_) => f.$emit("change", _)),
+      onInput: d,
+      onClick: h[1] || (h[1] = (_) => f.$emit("click", _)),
+      onPointerdown: h[2] || (h[2] = (_) => f.$emit("pointerdown", _)),
+      onPointerup: h[3] || (h[3] = (_) => f.$emit("pointerup", _))
+    }, null, 46, sn));
+  }
+}), cn = { class: "flex gap-2" }, Un = /* @__PURE__ */ x({
   __name: "PinInput",
   props: {
     modelValue: {},
@@ -2283,7 +2399,7 @@ const sn = {
     password: { type: Boolean }
   },
   setup(e) {
-    const t = e, r = b([]);
+    const t = e, r = g([]);
     function n(o) {
       o.preventDefault(), o.stopPropagation();
       const s = r.value.findIndex((l) => l.el === o.target), i = o.target.value ?? "";
@@ -2298,336 +2414,656 @@ const sn = {
       const i = r.value.findIndex((l) => l.el === o.target);
       i !== 0 && (r.value[i - 1].el.focus(), r.value[i - 1].el.select(), s || (r.value[i - 1].el.value = ""));
     }
-    return (o, s) => (g(), y("div", cn, [
-      (g(!0), y(te, null, he(t.length, (i) => (g(), j(c(Ir), {
+    return (o, s) => (m(), b("div", cn, [
+      (m(!0), b(ee, null, be(t.length, (i) => (m(), P(ln, {
         ref_for: !0,
         ref_key: "inputs",
         ref: r,
         key: i,
-        class: "h-8 w-8 text-center",
+        class: "w-8 text-center",
+        style: { padding: "0" },
         password: t.password,
         onPointerup: s[0] || (s[0] = (l) => l.target.select()),
-        onInput: Qe(n, ["stop", "prevent"]),
-        onKeydown: St(a, ["backspace"])
+        onInput: rt(n, ["stop", "prevent"]),
+        onKeydown: $t(a, ["backspace"])
       }, null, 8, ["password"]))), 128))
     ]));
   }
-}), xn = /* @__PURE__ */ C({
+}), Gn = /* @__PURE__ */ x({
   __name: "Progress",
   props: {
     value: { default: 0 },
     max: { default: 100 },
     min: { default: 0 },
-    size: { default: "md" },
+    size: { default: "md" },
+    color: { default: "primary" },
+    rounded: { default: "full" },
+    loading: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, r = v(() => {
+      switch (t.size) {
+        case "sm":
+          return "h-0.25";
+        case "md":
+          return "h-0.5";
+        case "lg":
+          return "h-1";
+      }
+    }), n = v(() => {
+      switch (t.color) {
+        case "primary":
+          return "bg-primary-container";
+        case "secondary":
+          return "bg-secondary-7";
+        case "tertiary":
+          return "bg-tertiary-7";
+        case "error":
+          return "bg-error-7";
+      }
+    }), a = J(t);
+    return (o, s) => (m(), b("div", {
+      class: y(["relative w-full self-center overflow-hidden bg-surface-high transition-background-color,border-color,color", [c(r), c(a).class]]),
+      style: A([c(a).style])
+    }, [
+      o.loading ? (m(), b("div", {
+        key: 1,
+        class: y(["loading-progress h-full", [c(n)]])
+      }, null, 2)) : (m(), b("div", {
+        key: 0,
+        class: y(["h-full", [c(n)]]),
+        style: A([{
+          width: `${(Number(o.value) - Number(o.min)) / (Number(o.max) - Number(o.min)) * 100}%`
+        }])
+      }, null, 6))
+    ], 6));
+  }
+}), mt = {
+  primary: ["#e5f7ff", "#d3ebfa", "#a9d4f1", "#7cbde9", "#57a9e0", "#3f9cdc", "#3096dc", "#1f82c4", "#0f73b0", "#00649c", "#082f49"],
+  secondary: ["#e9fbf0", "#dcf1e3", "#badfc7", "#96cea9", "#77bf90", "#63b580", "#58b077", "#479a64", "#3b8a58", "#2c7749", "#022c22"],
+  tertiary: ["#fff7e1", "#ffedcd", "#fcd99e", "#f9c46b", "#f7b23f", "#f6a724", "#f5a113", "#da8c04", "#c37d00", "#aa6a00", "#572508"],
+  error: ["#ffeaea", "#fcd5d5", "#f2a8a9", "#ea7a7a", "#e25353", "#de3939", "#dd2b2b", "#c41e1f", "#af171a", "#9a0913", "#450a0a"],
+  surface: ["#fafafa", "#f5f5f5", "#e5e5e5", "#d4d4d4", "#a3a3a3", "#737373", "#525252", "#404040", "#262626", "#171717", "#121212"]
+}, Oe = {
+  name: "dark",
+  scheme: "dark",
+  colors: mt
+}, un = {
+  name: "light",
+  scheme: "light",
+  colors: mt
+}, qn = Symbol("Notifications"), vt = Ct([]);
+function dn() {
+  return vt;
+}
+class Xn {
+  static show(t) {
+    t.hash = Math.random().toString(36), vt.push(t);
+  }
+}
+const Ne = [0.96, 0.907, 0.805, 0.697, 0.605, 0.547, 0.518, 0.445, 0.395, 0.34, 0.28], Ke = [0.32, 0.16, 0.08, 0.04, 0, 0, 0.04, 0.08, 0.16, 0.32, 0.64];
+function fn(e) {
+  const t = p(e).toHsl().l;
+  return Ne.reduce(
+    (r, n) => Math.abs(n - t) < Math.abs(r - t) ? n : r
+  );
+}
+function pn(e) {
+  const t = p(e), r = fn(t), n = Ne.findIndex((o) => o === r), a = Ne.map((o) => {
+    const s = p({ h: t.toHsl().h, s: t.toHsl().s, l: o }), i = Ke[n] - Ke[n];
+    return i >= 0 ? s.saturate(i * 100) : s.desaturate(i * -100), s;
+  });
+  return { baseColorIndex: n, colors: a.map((o) => o.toHexString()) };
+}
+function Yn(e) {
+  return pn(e).colors;
+}
+const Zn = /* @__PURE__ */ x({
+  __name: "RokuProvider",
+  props: {
+    is: { default: "div" },
+    theme: { default() {
+      return typeof window > "u" || document.documentElement.dataset.scheme === "dark" ? Oe : un;
+    } }
+  },
+  setup(e) {
+    const t = e, r = g(0), n = g(0);
+    ie && new ResizeObserver(() => {
+      const i = window.innerWidth - document.body.clientWidth;
+      i !== 0 && (r.value = i), n.value = i;
+    }).observe(document.body);
+    const a = v(() => n.value === r.value ? "0px" : `${r.value}px`), o = st(t.theme);
+    return (s, i) => (m(), P(de(s.is), {
+      style: A([
+        c(o),
+        { paddingRight: c(a) }
+      ]),
+      class: "text-surface-on transition-background-color,border-color,color"
+    }, {
+      default: L(() => [
+        M(s.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["style"]));
+  }
+}), hn = ["id"], mn = ["for"], vn = ["for"], bn = /* @__PURE__ */ x({
+  inheritAttrs: !1,
+  __name: "Switch",
+  props: /* @__PURE__ */ Z({
+    size: { default: "md" },
+    animate: { type: Boolean, default: !0 },
+    options: {},
+    label: {},
+    id: {},
+    rounded: { default: "full" },
+    color: { default: "primary" },
+    disabled: { type: Boolean },
+    offIcon: {},
+    onIcon: {},
+    value: { type: Boolean }
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const t = e, r = Q(e, "modelValue");
+    t.value && (r.value = t.value);
+    const n = g(null), a = g(!1), o = v(() => {
+      switch (t.size) {
+        case "sm":
+          return {
+            icon: "text-xs mx-0.5",
+            wrapper: "h-4 w-8",
+            indicator: a.value ? "h-3 w-4" : "h-3 w-3",
+            inactive: "left-[calc(0.125rem-1px)]",
+            active: a.value ? "left-[calc(0.875rem-1px)]" : "left-[calc(1.125rem-1px)]"
+          };
+        case "md":
+          return {
+            icon: "text-sm mx-1",
+            wrapper: "h-6 w-12",
+            indicator: a.value ? "h-4 w-5" : "h-4 w-4",
+            inactive: "left-[calc(0.25rem-1px)]",
+            active: a.value ? "left-[calc(1.5rem-1px)]" : "left-[calc(1.75rem-1px)]"
+          };
+        case "lg":
+          return {
+            icon: "text-lg mx-2",
+            wrapper: "h-8 w-16",
+            indicator: a.value ? "h-6 w-8" : "h-6 w-6",
+            inactive: "left-[calc(0.25rem-1px)]",
+            active: a.value ? "left-[calc(1.75rem-1px)]" : "left-[calc(2.25rem-1px)]"
+          };
+      }
+    }), s = v(() => t.animate ? {
+      indicator: "transition-all",
+      progress: "transition-width"
+    } : {
+      indicator: "",
+      progress: ""
+    }), i = it(t), l = v(() => {
+      let d = "bg-primary-container";
+      switch (t.color) {
+        case "secondary":
+          d = "bg-secondary-7";
+          break;
+        case "tertiary":
+          d = "bg-tertiary-7";
+          break;
+        case "error":
+          d = "bg-error-7";
+          break;
+      }
+      return {
+        wrapper: r.value ? `border border-transparent ${d}` : "bg-surface-lowest border border-surface-border-low",
+        indicator: t.disabled ? "bg-surface-high" : "bg-white text-primary-container"
+      };
+    }), u = J(t);
+    return (d, f) => (m(), b("div", {
+      role: "switch",
+      class: y(["relative flex items-center gap-2", {
+        "pointer-events-none filter-grayscale op60": t.disabled
+      }])
+    }, [
+      Pe(w("input", we({
+        id: c(i),
+        "onUpdate:modelValue": f[0] || (f[0] = (h) => r.value = h)
+      }, d.$attrs, {
+        class: "hidden",
+        type: "checkbox"
+      }), null, 16, hn), [
+        [At, r.value]
+      ]),
+      w("label", {
+        class: "leading-0 cursor-pointer!",
+        for: c(i)
+      }, [
+        w("div", {
+          ref_key: "wrapper",
+          ref: n,
+          class: y([[c(o).wrapper, c(l).wrapper, c(u).class], "relative inline-block transition-all"]),
+          style: A([c(u).style]),
+          onPointerdown: f[1] || (f[1] = (h) => a.value = !0),
+          onPointerup: f[2] || (f[2] = (h) => a.value = !1),
+          onPointerleave: f[3] || (f[3] = (h) => a.value = !1),
+          onPointerenter: f[4] || (f[4] = (h) => h.buttons === 1 && (a.value = !0))
+        }, [
+          w("div", {
+            class: y(["absolute top-50% -translate-y-50%", [c(o).indicator, c(l).indicator, c(s).indicator, r.value ? c(o).active : c(o).inactive, c(u).class]]),
+            style: A([c(u).style])
+          }, null, 6),
+          w("i", {
+            class: y(["absolute top-1/2 -translate-y-50%", [c(o).icon, {
+              [`left-0 text-${d.color}-on`]: r.value,
+              "right-0 text-surface-on ": !r.value,
+              [d.onIcon ?? ""]: r.value && d.onIcon,
+              [d.offIcon ?? ""]: !r.value && d.offIcon
+            }]])
+          }, null, 2)
+        ], 38)
+      ], 8, mn),
+      d.label ? (m(), b("label", {
+        key: 0,
+        for: c(i)
+      }, se(d.label), 9, vn)) : T("", !0)
+    ], 2));
+  }
+}), gn = { class: "dark:hidden" }, yn = { class: "light:hidden" }, Kn = /* @__PURE__ */ x({
+  __name: "SchemeSwitch",
+  setup(e) {
+    const t = g(void 0);
+    G(() => {
+      ie && (t.value === !0 ? (document.documentElement.setAttribute("data-scheme", "dark"), localStorage.setItem("scheme", "dark")) : t.value === !1 && (document.documentElement.setAttribute("data-scheme", "light"), localStorage.setItem("scheme", "light")));
+    });
+    const r = g(!0), n = g(!1);
+    return ne(() => {
+      if (ie) {
+        const a = localStorage.getItem("scheme");
+        a === "dark" ? t.value = !0 : a === "light" ? t.value = !1 : t.value = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      }
+      r.value = !1;
+    }), et(() => {
+      n.value = !0;
+    }), (a, o) => {
+      const s = bn;
+      return m(), b(ee, null, [
+        w("div", {
+          class: y({ hidden: !c(r) })
+        }, [
+          w("div", gn, [
+            Y(s, {
+              value: !1,
+              "on-icon": "i-tabler-moon",
+              "off-icon": "i-tabler-sun"
+            })
+          ]),
+          w("div", yn, [
+            Y(s, {
+              value: !0,
+              color: "secondary",
+              "on-icon": "i-tabler-moon",
+              "off-icon": "i-tabler-sun"
+            })
+          ])
+        ], 2),
+        w("div", {
+          class: y({ hidden: c(r) })
+        }, [
+          Y(s, {
+            modelValue: c(t),
+            "onUpdate:modelValue": o[0] || (o[0] = (i) => Tt(t) ? t.value = i : null),
+            animate: c(n),
+            color: "secondary",
+            "on-icon": "i-tabler-moon",
+            "off-icon": "i-tabler-sun"
+          }, null, 8, ["modelValue", "animate"])
+        ], 2)
+      ], 64);
+    };
+  }
+}), wn = { class: "w-full flex items-center" }, _n = ["placeholder", "value"], xn = /* @__PURE__ */ w("i", { class: "i-tabler-chevron-down pointer-events-none absolute right-2" }, null, -1), kn = {
+  key: 0,
+  class: "flex cursor-default items-center justify-between gap-2 rounded p-1 px-2"
+}, Sn = ["onPointerdown", "onHover"], Mn = { key: 0 }, $n = /* @__PURE__ */ w("i", { class: "i-tabler-check h-3 w-3" }, null, -1), Cn = [
+  $n
+], Qn = /* @__PURE__ */ x({
+  __name: "Select",
+  props: /* @__PURE__ */ Z({
+    options: { default() {
+      return [];
+    } },
+    size: { default: "md" },
+    noneText: { default: "No options" },
+    placeholder: { default: "" }
+  }, {
+    modelValue: { default: void 0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Z(["change"], ["update:modelValue"]),
+  setup(e, { emit: t }) {
+    const r = e, n = t, a = Q(e, "modelValue"), o = g(null), s = g(null), { focused: i } = Nr(o), l = v(() => r.options.map((k) => $(k)).indexOf(a.value)), u = g(-1), d = g(-1);
+    G(() => {
+      i.value || (d.value = -1);
+    }), G(() => {
+      a.value = $(r.options[l.value]);
+    }), fe(a, () => {
+      n("change", a.value);
+    });
+    const f = r.options, h = v(() => f[l.value]), _ = v(() => C(h.value));
+    function C(k) {
+      if (k)
+        return typeof k == "string" || typeof k == "symbol" || typeof k == "number" ? k : k.label;
+    }
+    function $(k) {
+      if (k)
+        return typeof k == "string" || typeof k == "symbol" || typeof k == "number" ? k : k.id;
+    }
+    Te("ArrowDown", (k) => {
+      i.value && (k.preventDefault(), d.value = (d.value + 1) % f.length);
+    }), Te("ArrowUp", (k) => {
+      i.value && (k.preventDefault(), d.value = (d.value - 1 + f.length) % f.length);
+    }), Te("Enter", () => {
+      i.value && d.value !== -1 && (a.value = $(f[d.value]), i.value = !1);
+    });
+    function O(k) {
+      if (!i.value) {
+        i.value = !0;
+        return;
+      }
+      a.value = $(k), i.value = !1;
+    }
+    const pe = v(() => ({
+      input: "container-base focus:border-primary-container"
+    })), he = v(() => {
+      switch (r.size) {
+        case "sm":
+          return {
+            wrapper: "h-6 w-full py-1 pl-1.5 pr-6 text-sm",
+            dropdown: "text-sm children:py-1"
+          };
+        case "lg":
+          return {
+            wrapper: "h-10 w-full py-2 pl-3 pr-10 text-lg",
+            dropdown: "text-lg children:py-2"
+          };
+        default:
+          return {
+            wrapper: "h-8 w-full py-1 pl-2 pr-8 text-base",
+            dropdown: "text-base children:py-1"
+          };
+      }
+    });
+    return (k, I) => (m(), b("div", {
+      ref_key: "wrapperRef",
+      ref: s,
+      class: "r-select-wrapper relative"
+    }, [
+      w("div", wn, [
+        w("input", {
+          ref_key: "inputRef",
+          ref: o,
+          class: y([[c(pe).input, c(he).wrapper], "r-select-input cursor-pointer border rounded outline-none outline-none focus-visible:outline-2"]),
+          placeholder: k.placeholder,
+          readonly: "",
+          value: c(_),
+          "aria-haspopup": "listbox",
+          autocomplete: "off",
+          onFocus: I[0] || (I[0] = (q) => i.value = !0)
+        }, null, 42, _n),
+        xn
+      ]),
+      c(i) ? (m(), b("div", {
+        key: 0,
+        class: y([c(he).dropdown, "absolute z-1 mt-2 w-full flex-col overflow-hidden border container-base rounded p-1"])
+      }, [
+        c(f).length === 0 ? (m(), b("div", kn, se(k.noneText), 1)) : (m(!0), b(ee, { key: 1 }, be(c(f), (q, R) => (m(), b("div", {
+          key: $(q),
+          class: y([{
+            "hover:bg-surface-high": c(d) !== R,
+            "container-filled-primary": c(d) === R
+          }, "flex cursor-pointer items-center justify-between gap-2 rounded p-1 px-2"]),
+          onPointerdown: (z) => O(q),
+          onHover: (z) => u.value = R
+        }, [
+          Rt(se(C(q)) + " ", 1),
+          q === c(h) ? (m(), b("div", Mn, Cn)) : T("", !0)
+        ], 42, Sn))), 128))
+      ], 2)) : T("", !0)
+    ], 512));
+  }
+}), An = { class: "relative inline-block w-full" }, Jn = /* @__PURE__ */ x({
+  __name: "Slider",
+  props: /* @__PURE__ */ Z({
+    size: { default: "md" },
+    animate: { type: Boolean, default: !1 },
+    width: {},
+    options: {},
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    tickNum: {},
     color: { default: "primary" },
-    rounded: { default: "full" },
-    loading: { type: Boolean, default: !1 }
-  },
+    minWidth: { default: 12 }
+  }, {
+    modelValue: {
+      default: void 0
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
   setup(e) {
-    const t = e, r = m(() => {
-      switch (t.size) {
-        case "sm":
-          return "h-0.25";
-        case "md":
-          return "h-0.5";
-        case "lg":
-          return "h-1";
-      }
-    }), n = m(() => {
+    const t = e;
+    function r(R, z, B) {
+      const H = [];
+      for (let X = R; X <= z; X += B)
+        H.push(X);
+      return H[H.length - 1] !== z && H.push(z), H;
+    }
+    function n(R, z) {
+      const B = [];
+      B.push(z[0]);
+      const H = (z.length - 1) / (R - 1);
+      for (let X = 1; X < R - 1; X++)
+        B.push(z[Math.round(X * H)]);
+      return B.push(z[z.length - 1]), B;
+    }
+    const a = v(() => t.options ? t.options.length : t.tickNum ?? 0), o = v(() => t.options === void 0 ? r(t.min, t.max, t.step) : t.options), s = v(() => n(a.value, o.value)), i = Q(e, "modelValue"), l = v(() => o.value.length ?? 0), u = g(o.value.includes(i.value) ? o.value.indexOf(i.value) : 0);
+    function d(R) {
+      return o.value.indexOf(R);
+    }
+    const f = v(() => {
       switch (t.color) {
         case "primary":
           return "bg-primary-container";
         case "secondary":
-          return "bg-secondary-7";
+          return "bg-secondary-container";
         case "tertiary":
-          return "bg-tertiary-7";
+          return "bg-tertiary-container";
         case "error":
-          return "bg-error-7";
-      }
-    }), a = ve(t);
-    return (o, s) => (g(), y("div", {
-      class: w(["relative w-full self-center overflow-hidden bg-surface-high transition-background-color,border-color,color", [c(r), c(a).class]]),
-      style: T([c(a).style])
-    }, [
-      o.loading ? (g(), y("div", {
-        key: 1,
-        class: w(["loading-progress h-full", [c(n)]])
-      }, null, 2)) : (g(), y("div", {
-        key: 0,
-        class: w(["h-full", [c(n)]]),
-        style: T([{
-          width: `${(o.value - o.min) / (o.max - o.min) * 100}%`
-        }])
-      }, null, 6))
-    ], 6));
-  }
-}), un = { class: "relative" }, kn = /* @__PURE__ */ C({
-  __name: "Indicator",
-  props: {
-    color: { default: "primary" },
-    size: { default: "md" },
-    position: { default: "top-right" },
-    ping: { type: Boolean }
-  },
-  setup(e) {
-    const t = e, r = m(() => {
-      switch (t.size) {
-        case "sm":
-          return "w-2 h-2";
-        case "md":
-          return "w-3 h-3";
-        case "lg":
-          return "w-4 h-4";
-        default:
-          return typeof t.size == "number" || !Number.isNaN(Number(t.size)) ? `w-${t.size} h-${t.size}` : t.size;
-      }
-    }), n = Mt(), a = m(() => {
-      if (!n.label)
-        return "";
-      switch (t.size) {
-        case "sm":
-          return "text-sm children:px-1.5";
-        case "md":
-          return "text-md children:px-2";
-        case "lg":
-          return "text-lg children:px-2.5";
-      }
-    }), o = m(() => {
-      switch (t.position) {
-        case "top-left":
-          return "top-0 left-0 -translate-x-1/2 -translate-y-1/2";
-        case "top-right":
-          return "top-0 right-0 translate-x-1/2 -translate-y-1/2";
-        case "bottom-left":
-          return "bottom-0 left-0 -translate-x-1/2 translate-y-1/2";
-        case "bottom-right":
-          return "bottom-0 right-0 translate-x-1/2 translate-y-1/2";
+          return "bg-error-container";
       }
-    }), s = m(() => {
+    }), h = v(() => `dark:bg-white bg-${t.color}-container`), _ = v(() => {
       switch (t.color) {
         case "primary":
-          return "bg-primary-container text-primary-on";
+          return "dark:bg-primary-container bg-white";
         case "secondary":
-          return "bg-secondary-container text-secondary-on";
+          return "dark:bg-secondary-container bg-white";
         case "tertiary":
-          return "bg-tertiary-container text-tertiary-on";
+          return "dark:bg-tertiary-container bg-white";
         case "error":
-          return "bg-error-container text-error-on";
+          return "dark:bg-error-container bg-white";
       }
     });
-    return (i, l) => (g(), y("div", un, [
-      S("div", {
-        class: w([[c(o), c(a)], "absolute z-1"])
-      }, [
-        t.ping ? (g(), y("div", {
-          key: 0,
-          class: w(["absolute animate-ping rounded-full border-2 border-transparent box-content", [
-            {
-              [c(r)]: !i.$slots.label
-            },
-            c(s)
-          ]])
-        }, [
-          i.$slots.label ? P(i.$slots, "label", { key: 0 }) : z("", !0)
-        ], 2)) : z("", !0),
-        S("div", {
-          class: w(["top-0 rounded-full border-2 border-surface-low box-content", [
-            {
-              [c(r)]: !i.$slots.label
-            },
-            c(s)
-          ]])
-        }, [
-          i.$slots.label ? P(i.$slots, "label", { key: 0 }) : z("", !0)
-        ], 2)
-      ], 2),
-      P(i.$slots, "default")
-    ]));
-  }
-}), Sn = /* @__PURE__ */ C({
-  __name: "Chip",
-  props: /* @__PURE__ */ ee({
-    is: { default: "img" },
-    src: {},
-    size: { default: "md" },
-    style: {},
-    class: {},
-    rounded: { default: "full" }
-  }, {
-    modelValue: { type: Boolean, default: void 0 },
-    modelModifiers: {}
-  }),
-  emits: ["update:modelValue"],
-  setup(e) {
-    const t = e, r = ge(e, "modelValue"), n = ve(t), a = m(() => {
-      switch (t.size) {
-        case "sm":
-          return "px-3 text-sm h-6";
-        case "md":
-          return "px-6 h-8 text-base";
-        case "lg":
-          return "px-8 h-10 text-lg";
+    G(() => {
+      i.value = o.value[u.value];
+    });
+    const C = g(), $ = g(), O = Br(C), pe = g(!1);
+    function he(R) {
+      if (!pe.value)
+        return;
+      if (!(R.buttons === 1)) {
+        pe.value = !1;
+        return;
       }
-    }), o = m(() => r.value ? "container-filled-primary border-transparent" : "container-base"), s = m(() => r.value !== void 0), i = m(() => s.value ? "cursor-pointer" : "");
-    return (l, u) => (g(), y("span", {
-      class: w(["inline-flex items-center gap-1", [c(n).class, c(a), c(o), c(i)]]),
-      style: T([c(n).style]),
-      onPointerup: u[0] || (u[0] = (f) => c(s) && (r.value = !r.value))
-    }, [
-      l.$slots.leftSection ? P(l.$slots, "leftSection", { key: 0 }) : z("", !0),
-      P(l.$slots, "default"),
-      l.$slots.rightSection ? P(l.$slots, "rightSection", { key: 1 }) : z("", !0)
-    ], 38));
-  }
-}), Mn = /* @__PURE__ */ C({
-  __name: "Avatar",
-  props: {
-    is: { default: "img" },
-    src: {},
-    size: { default: "md" },
-    style: {},
-    class: {}
-  },
-  setup(e) {
-    const t = e, r = m(() => {
+      R.preventDefault(), R.stopPropagation();
+      const { clientX: B } = R, H = O.left.value, bt = O.right.value - H, Ae = Math.round((B - H) / bt * (l.value - 1));
+      Ae < 0 || Ae > l.value - 1 || (u.value = Ae);
+    }
+    G(() => {
+      u.value = d(i.value);
+    });
+    function k(R) {
+      R.preventDefault(), R.stopPropagation(), pe.value = !0, he(R);
+    }
+    F(C, "pointerdown", k), ne(() => {
+      F(document, "pointermove", he), u.value = Math.max(0, d(i.value));
+    });
+    const I = v(() => {
       switch (t.size) {
         case "sm":
-          return "--size: 1.5rem;";
+          return {
+            wrapper: "h-2",
+            innerWrapper: "px-0.5 h-1",
+            content: "h-1",
+            tick: "h-0.5 w-0.5 -translate-x-0.25 -translate-y-0.25",
+            indicator: "h-2 w-2 -translate-x-1 -translate-y-1",
+            indicatorInner: "h-1 w-1 -translate-x-0.5 -translate-y-0.5",
+            progress: "-mx-0.5"
+          };
         case "md":
-          return "--size: 2rem;";
+          return {
+            wrapper: "h-4",
+            innerWrapper: "px-1 h-2",
+            content: "h-2",
+            tick: "h-1 w-1 -translate-x-0.5 -translate-y-0.5",
+            indicator: "h-4 w-4 -translate-x-2 -translate-y-2",
+            indicatorInner: "h-2 w-2 -translate-x-1 -translate-y-1",
+            progress: "-mx-1"
+          };
         case "lg":
-          return "--size: 3rem;";
-        default:
-          return typeof t.size == "number" || !Number.isNaN(Number(t.size)) ? `--size: ${t.size}rem;` : `--size: ${t.size};`;
-      }
-    }), n = b(!1), a = b(null);
-    function o() {
-      n.value = !0;
-    }
-    return ie(() => {
-      var s;
-      (s = a.value) != null && s.complete && o();
-    }), (s, i) => (g(), y(te, null, [
-      s.src ? (g(), j(_e(s.is), Ne({
-        key: 0,
-        ref_key: "img",
-        ref: a,
-        style: [s.style, c(r)],
-        placeholder: "",
-        src: s.src,
-        class: ["h-[var(--size)] w-[var(--size)] rounded-full object-cover", [{ hidden: !c(n) }, t.class]]
-      }, s.$attrs, { onLoad: o }), null, 16, ["style", "src", "class"])) : z("", !0),
-      c(n) ? z("", !0) : (g(), y("div", {
-        key: 1,
-        class: "h-[var(--size)] w-[var(--size)] animate-pulse rounded-full bg-surface-high object-cover border-transparent",
-        style: T([s.style, c(r)])
-      }, null, 4))
-    ], 64));
-  }
-}), An = /* @__PURE__ */ C({
-  __name: "ThemeSwitch",
-  setup(e) {
-    const t = b(void 0);
-    return q(() => {
-      ne && (t.value === !0 ? (document.documentElement.setAttribute("data-scheme", "dark"), localStorage.setItem("scheme", "dark")) : t.value === !1 && (document.documentElement.setAttribute("data-scheme", "light"), localStorage.setItem("scheme", "light")));
-    }), ie(() => {
-      if (ne) {
-        const r = localStorage.getItem("scheme");
-        r === "dark" ? t.value = !0 : r === "light" ? t.value = !1 : t.value = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      }
-    }), (r, n) => {
-      const a = Kt;
-      return g(), j(a, {
-        modelValue: c(t),
-        "onUpdate:modelValue": n[0] || (n[0] = (o) => At(t) ? t.value = o : null),
-        color: "secondary",
-        "on-icon": "i-tabler-moon",
-        "off-icon": "i-tabler-sun"
-      }, null, 8, ["modelValue"]);
-    };
-  }
-}), Cn = /* @__PURE__ */ C({
-  __name: "Paper",
-  props: {
-    size: { default: "md" },
-    rounded: { default: "md" },
-    withBorder: { type: Boolean, default: !1 },
-    is: { default: "div" }
-  },
-  setup(e) {
-    const r = ve(e);
-    return (n, a) => (g(), j(_e(n.is), {
-      class: w(["container-low rounded-lg p-4", [
-        {
-          "border-transparent": !n.withBorder
-        },
-        c(r).class
-      ]]),
-      style: T([c(r).style])
-    }, {
-      default: J(() => [
-        P(n.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["class", "style"]));
-  }
-}), $n = /* @__PURE__ */ C({
-  __name: "Dragzone",
-  emits: ["drop"],
-  setup(e, { emit: t }) {
-    const r = t, n = b(), { onChange: a, open: o } = jt({
-      accept: "image/*"
-    });
-    a((i) => {
-      i ? r("drop", Array.from(i)) : r("drop", null);
-    });
-    const { isOverDropZone: s } = Ft(n, {
-      onDrop: (i) => {
-        r("drop", i);
+          return {
+            wrapper: "h-6",
+            innerWrapper: "px-1.5 h-3",
+            content: "h-3",
+            tick: "h-1.5 w-1.5 -translate-x-0.75 -translate-y-0.75",
+            indicator: "h-6 w-6 -translate-x-3 -translate-y-3",
+            indicatorInner: "h-3 w-3 -translate-x-1.5 -translate-y-1.5",
+            progress: "-mx-1.5"
+          };
       }
+    }), q = v(() => t.animate ? {
+      indicator: "transition-left",
+      progress: "transition-width"
+    } : {
+      indicator: "",
+      progress: ""
     });
-    return (i, l) => (g(), y("div", {
-      ref_key: "dropZoneRef",
-      ref: n,
-      class: w([{
-        "bg-primary-container/10 border-primary-container/40 border text-primary-on": c(s),
-        "btn-default hover:bg-surface-high": !c(s)
-      }, "w-full h-full flex items-center justify-center cursor-pointer rounded border-dotted"]),
-      onPointerup: l[0] || (l[0] = () => c(o)())
-    }, [
-      P(i.$slots, "default")
-    ], 34));
+    return (R, z) => (m(), b("div", An, [
+      w("div", {
+        ref_key: "wrapper",
+        ref: C,
+        type: "size",
+        class: y(["w-full flex cursor-pointer items-center", c(I).wrapper]),
+        onTouchmove: z[0] || (z[0] = rt(() => {
+        }, ["prevent"]))
+      }, [
+        w("div", {
+          class: y(["w-full rounded-full bg-surface-lowest transition-background-color,border-color,color", c(I).innerWrapper])
+        }, [
+          w("div", {
+            class: y(["relative flex", c(I).content]),
+            style: A({
+              width: `${t.width}rem`,
+              minWidth: `${t.minWidth}rem`
+            })
+          }, [
+            (m(!0), b(ee, null, be(c(s), (B) => (m(), b("div", {
+              key: B,
+              style: A({
+                left: `${d(B) / (c(l) - 1) * 100}%`
+              }),
+              class: y(["absolute top-50% rounded-full bg-white", c(I).tick])
+            }, null, 6))), 128)),
+            c(u) !== -1 ? (m(), b("div", {
+              key: 0,
+              ref_key: "indicator",
+              ref: $,
+              class: y(["absolute top-50% cursor-pointer rounded-full transition-background-color,border-color,color", [c(I).indicator, c(q).indicator, c(h)]]),
+              style: A({
+                left: `${c(u) / (c(l) - 1) * 100}%`
+              })
+            }, [
+              w("div", {
+                class: y(["pointer-events-none absolute left-50% top-50% rounded-full transition-background-color,border-color,color", [c(I).indicatorInner, c(_)]])
+              }, null, 2)
+            ], 6)) : T("", !0),
+            w("div", {
+              class: y(["pointer-events-none h-full rounded-full", [c(I).progress, c(q).progress, c(f)]]),
+              style: A({
+                width: `${c(u) / (c(l) - 1) * 100}%`
+              })
+            }, null, 6)
+          ], 6)
+        ], 2)
+      ], 34),
+      w("div", {
+        class: "relative mx-1 h-1em text-xs text-surface-onlow",
+        style: A({
+          width: `${t.width}rem`
+        })
+      }, [
+        (m(!0), b(ee, null, be(c(s), (B, H) => (m(), b("div", {
+          key: H,
+          style: A({
+            left: `${d(B) / (c(l) - 1) * 100}%`
+          }),
+          class: y(["absolute w-auto flex rounded-full -translate-x-50%", c(I).tick])
+        }, se(B), 7))), 128))
+      ], 4)
+    ]));
   }
 });
 export {
-  Mn as Avatar,
-  Ct as Btn,
-  Sn as Chip,
-  $n as Dragzone,
-  kn as Indicator,
-  yn as Modal,
+  Rn as AspectRatio,
+  zt as Avatar,
+  nt as Btn,
+  zn as ChatContainer,
+  Bn as ChatMessage,
+  En as ChatSystem,
+  On as Chip,
+  Pn as ColorInput,
+  It as ColorSwatch,
+  Hn as Drawer,
+  In as Dropzone,
+  lt as FullscreenOverlay,
+  Vn as Image,
+  Dn as Indicator,
+  Fn as Modal,
   Wr as Notification,
-  wn as NotificationSystem,
-  pn as Notifications,
-  Cn as Paper,
-  _n as PinInput,
-  xn as Progress,
-  vn as RokuProvider,
-  bn as Select,
-  fn as Slider,
-  Kt as Switch,
-  Ir as TextField,
-  Gr as ThemeProvider,
-  An as ThemeSwitch,
-  ze as darkTheme,
-  mn as generateColors,
-  Mr as generateColorsMap,
-  xr as lightTheme,
-  hn as notificationsSymbol,
-  ot as themeColors,
-  Cr as useCurrentTheme,
-  gn as useCurrentThemeScheme,
-  kr as useNotifications,
-  Ar as useRootTheme,
+  Wn as NotificationSystem,
+  Xn as Notifications,
+  Ln as Overlay,
+  jn as Paper,
+  Un as PinInput,
+  Gn as Progress,
+  Zn as RokuProvider,
+  Kn as SchemeSwitch,
+  Qn as Select,
+  Jn as Slider,
+  bn as Switch,
+  ln as TextField,
+  hr as ThemeProvider,
+  Oe as darkTheme,
+  Yn as generateColors,
+  pn as generateColorsMap,
+  un as lightTheme,
+  qn as notificationsSymbol,
+  mt as themeColors,
+  ur as useCurrentTheme,
+  Nn as useCurrentThemeScheme,
+  it as useId,
+  dn as useNotifications,
+  cr as useRootTheme,
   st as useThemeStyles
 };