@roku-ui/vue 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as R, computed as m, openBlock as g, createBlock as L, resolveDynamicComponent as xe, normalizeClass as w, unref as c, withCtx as ce, renderSlot as P, createCommentVNode as $, getCurrentScope as Ke, onScopeDispose as Qe, onMounted as de, nextTick as Ze, getCurrentInstance as Ve, watch as ae, ref as k, watchEffect as oe, createElementBlock as y, createElementVNode as S, withModifiers as Oe, normalizeStyle as C, Fragment as X, renderList as te, toDisplayString as q, withDirectives as Ie, isRef as Je, vModelCheckbox as et, reactive as tt, provide as rt, createTextVNode as nt, Teleport as at, createVNode as st, Transition as ot, withKeys as it, useSlots as lt, inject as ut } from "vue";
-const ct = /* @__PURE__ */ R({
+import { defineComponent as z, computed as m, openBlock as g, createBlock as U, resolveDynamicComponent as Ee, normalizeClass as w, unref as c, withCtx as ue, renderSlot as I, createCommentVNode as T, getCurrentScope as ht, onScopeDispose as pt, onMounted as pe, nextTick as mt, getCurrentInstance as Qe, watch as ae, ref as y, mergeModels as J, useModel as me, watchEffect as X, createElementBlock as v, createElementVNode as $, withModifiers as Ze, normalizeStyle as C, Fragment as ee, renderList as de, toDisplayString as te, withDirectives as Je, mergeProps as gt, vModelCheckbox as bt, reactive as vt, inject as et, provide as Fe, createTextVNode as yt, Teleport as wt, createVNode as We, Transition as xt, withKeys as _t, useSlots as Mt, isRef as $t } from "vue";
+const St = /* @__PURE__ */ z({
   __name: "Btn",
   props: {
     type: { default: "button" },
@@ -45,7 +45,7 @@ const ct = /* @__PURE__ */ R({
             iconContent: "h-10 w-10 p-3"
           };
       }
-    }), s = m(() => {
+    }), a = m(() => {
       switch (t.variant) {
         case "filled":
           switch (t.color) {
@@ -118,212 +118,286 @@ const ct = /* @__PURE__ */ R({
           return "btn-default";
       }
     });
-    return (a, o) => (g(), L(xe(a.is), {
-      "data-size": a.size,
-      type: a.type,
+    return (o, i) => (g(), U(Ee(o.is), {
+      "data-size": o.size,
+      type: o.type,
       class: w(["flex items-center justify-center gap-1 decoration-none", [
-        c(s),
+        c(a),
         c(r),
-        a.icon ? c(n).iconContent : c(n).normalContent,
+        o.icon ? c(n).iconContent : c(n).normalContent,
         {
-          "filter-grayscale": a.disabled,
-          "active:translate-y-0.25": !a.disabled && a.pressEffect === "translate",
-          "active:scale-98": !a.disabled && a.pressEffect === "scale",
-          "transition-all": a.animate
+          "filter-grayscale": o.disabled,
+          "active:translate-y-0.25": !o.disabled && o.pressEffect === "translate",
+          "active:scale-98": !o.disabled && o.pressEffect === "scale",
+          "transition-all": o.animate
         }
       ]]),
-      disabled: a.disabled
+      disabled: o.disabled
     }, {
-      default: ce(() => [
-        a.$slots.leftSection ? P(a.$slots, "leftSection", { key: 0 }) : $("", !0),
-        P(a.$slots, "default"),
-        a.$slots.rightSection ? P(a.$slots, "rightSection", { key: 1 }) : $("", !0)
+      default: ue(() => [
+        o.$slots.leftSection ? I(o.$slots, "leftSection", { key: 0 }) : T("", !0),
+        I(o.$slots, "default"),
+        o.$slots.rightSection ? I(o.$slots, "rightSection", { key: 1 }) : T("", !0)
       ]),
       _: 3
     }, 8, ["data-size", "type", "class", "disabled"]));
   }
 });
-function Fe(e) {
-  return Ke() ? (Qe(e), !0) : !1;
+function Ne(e) {
+  return ht() ? (pt(e), !0) : !1;
 }
-function ke(e) {
+function Pe(e) {
   return typeof e == "function" ? e() : c(e);
 }
-const dt = typeof window < "u" && typeof document < "u";
+const ge = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const ft = Object.prototype.toString, ht = (e) => ft.call(e) === "[object Object]", pt = () => {
+const kt = Object.prototype.toString, At = (e) => kt.call(e) === "[object Object]", Ct = () => {
 };
-function gt(e) {
-  return e || Ve();
+function Tt(e) {
+  return e || Qe();
 }
-function mt(e, t = !0, r) {
-  const n = gt(r);
-  n ? de(e, n) : t ? e() : Ze(e);
+function zt(e, t = !0, r) {
+  Tt() ? pe(e, r) : t ? e() : mt(e);
 }
-function U(e) {
+function q(e) {
   var t;
-  const r = ke(e);
+  const r = Pe(e);
   return (t = r == null ? void 0 : r.$el) != null ? t : r;
 }
-const Me = dt ? window : void 0;
-function F(...e) {
-  let t, r, n, s;
-  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([r, n, s] = e, t = Me) : [t, r, n, s] = e, !t)
-    return pt;
+const we = ge ? window : void 0;
+function Y(...e) {
+  let t, r, n, a;
+  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([r, n, a] = e, t = we) : [t, r, n, a] = e, !t)
+    return Ct;
   Array.isArray(r) || (r = [r]), Array.isArray(n) || (n = [n]);
-  const a = [], o = () => {
-    a.forEach((u) => u()), a.length = 0;
-  }, i = (u, f, p, v) => (u.addEventListener(f, p, v), () => u.removeEventListener(f, p, v)), l = ae(
-    () => [U(t), ke(s)],
-    ([u, f]) => {
-      if (o(), !u)
+  const o = [], i = () => {
+    o.forEach((f) => f()), o.length = 0;
+  }, s = (f, u, p, b) => (f.addEventListener(u, p, b), () => f.removeEventListener(u, p, b)), l = ae(
+    () => [q(t), Pe(a)],
+    ([f, u]) => {
+      if (i(), !f)
         return;
-      const p = ht(f) ? { ...f } : f;
-      a.push(
-        ...r.flatMap((v) => n.map((b) => i(u, v, b, p)))
+      const p = At(u) ? { ...u } : u;
+      o.push(
+        ...r.flatMap((b) => n.map((M) => s(f, b, M, p)))
       );
     },
     { immediate: !0, flush: "post" }
   ), d = () => {
-    l(), o();
+    l(), i();
   };
-  return Fe(d), d;
+  return Ne(d), d;
 }
-function bt(e) {
+function Rt(e) {
   return typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
 }
-function be(...e) {
+function Se(...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: s = Me,
-    eventName: a = "keydown",
-    passive: o = !1,
-    dedupe: i = !1
-  } = n, l = bt(t);
-  return F(s, a, (u) => {
-    u.repeat && ke(i) || l(u) && r(u);
-  }, o);
-}
-function vt() {
-  const e = k(!1);
-  return Ve() && de(() => {
+    target: a = we,
+    eventName: o = "keydown",
+    passive: i = !1,
+    dedupe: s = !1
+  } = n, l = Rt(t);
+  return Y(a, o, (f) => {
+    f.repeat && Pe(s) || l(f) && r(f);
+  }, i);
+}
+function Et() {
+  const e = y(!1);
+  return Qe() && pe(() => {
     e.value = !0;
   }), e;
 }
-function yt(e) {
-  const t = vt();
+function tt(e) {
+  const t = Et();
   return m(() => (t.value, !!e()));
 }
-function wt(e, t, r = {}) {
-  const { window: n = Me, ...s } = r;
-  let a;
-  const o = yt(() => n && "ResizeObserver" in n), i = () => {
-    a && (a.disconnect(), a = void 0);
-  }, l = m(() => Array.isArray(e) ? e.map((f) => U(f)) : [U(e)]), d = ae(
+function Nt(e, t, r = {}) {
+  const { window: n = we, ...a } = r;
+  let o;
+  const i = tt(() => n && "MutationObserver" in n), s = () => {
+    o && (o.disconnect(), o = void 0);
+  }, l = ae(
+    () => q(e),
+    (u) => {
+      s(), i.value && n && u && (o = new MutationObserver(t), o.observe(u, a));
+    },
+    { immediate: !0 }
+  ), d = () => o == null ? void 0 : o.takeRecords(), f = () => {
+    s(), l();
+  };
+  return Ne(f), {
+    isSupported: i,
+    stop: f,
+    takeRecords: d
+  };
+}
+function Pt(e, t, r = {}) {
+  const { window: n = we, ...a } = r;
+  let o;
+  const i = tt(() => n && "ResizeObserver" in n), s = () => {
+    o && (o.disconnect(), o = void 0);
+  }, l = m(() => Array.isArray(e) ? e.map((u) => q(u)) : [q(e)]), d = ae(
     l,
-    (f) => {
-      if (i(), o.value && n) {
-        a = new ResizeObserver(t);
-        for (const p of f)
-          p && a.observe(p, s);
+    (u) => {
+      if (s(), i.value && n) {
+        o = new ResizeObserver(t);
+        for (const p of u)
+          p && o.observe(p, a);
       }
     },
     { immediate: !0, flush: "post", deep: !0 }
-  ), u = () => {
-    i(), d();
+  ), f = () => {
+    s(), d();
   };
-  return Fe(u), {
-    isSupported: o,
-    stop: u
+  return Ne(f), {
+    isSupported: i,
+    stop: f
   };
 }
-function _t(e, t = {}) {
+function Ht(e, t = {}) {
   const {
     reset: r = !0,
     windowResize: n = !0,
-    windowScroll: s = !0,
-    immediate: a = !0
-  } = t, o = k(0), i = k(0), l = k(0), d = k(0), u = k(0), f = k(0), p = k(0), v = k(0);
-  function b() {
-    const _ = U(e);
-    if (!_) {
-      r && (o.value = 0, i.value = 0, l.value = 0, d.value = 0, u.value = 0, f.value = 0, p.value = 0, v.value = 0);
+    windowScroll: a = !0,
+    immediate: o = !0
+  } = t, i = y(0), s = y(0), l = y(0), d = y(0), f = y(0), u = y(0), p = y(0), b = y(0);
+  function M() {
+    const S = q(e);
+    if (!S) {
+      r && (i.value = 0, s.value = 0, l.value = 0, d.value = 0, f.value = 0, u.value = 0, p.value = 0, b.value = 0);
       return;
     }
-    const A = _.getBoundingClientRect();
-    o.value = A.height, i.value = A.bottom, l.value = A.left, d.value = A.right, u.value = A.top, f.value = A.width, p.value = A.x, v.value = A.y;
+    const A = S.getBoundingClientRect();
+    i.value = A.height, s.value = A.bottom, l.value = A.left, d.value = A.right, f.value = A.top, u.value = A.width, p.value = A.x, b.value = A.y;
   }
-  return wt(e, b), ae(() => U(e), (_) => !_ && b()), s && F("scroll", b, { capture: !0, passive: !0 }), n && F("resize", b, { passive: !0 }), mt(() => {
-    a && b();
+  return Pt(e, M), ae(() => q(e), (S) => !S && M()), Nt(e, M, {
+    attributeFilter: ["style", "class"]
+  }), a && Y("scroll", M, { capture: !0, passive: !0 }), n && Y("resize", M, { passive: !0 }), zt(() => {
+    o && M();
   }), {
-    height: o,
-    bottom: i,
+    height: i,
+    bottom: s,
     left: l,
     right: d,
-    top: u,
-    width: f,
+    top: f,
+    width: u,
     x: p,
-    y: v,
-    update: b
+    y: b,
+    update: M
   };
 }
-function xt(e, t = {}) {
-  const { initialValue: r = !1, focusVisible: n = !1 } = t, s = k(!1), a = m(() => U(e));
-  F(a, "focus", (i) => {
+function It(e, t = {}) {
+  const { initialValue: r = !1, focusVisible: n = !1 } = t, a = y(!1), o = m(() => q(e));
+  Y(o, "focus", (s) => {
     var l, d;
-    (!n || (d = (l = i.target).matches) != null && d.call(l, ":focus-visible")) && (s.value = !0);
-  }), F(a, "blur", () => s.value = !1);
-  const o = m({
-    get: () => s.value,
-    set(i) {
+    (!n || (d = (l = s.target).matches) != null && d.call(l, ":focus-visible")) && (a.value = !0);
+  }), Y(o, "blur", () => a.value = !1);
+  const i = m({
+    get: () => a.value,
+    set(s) {
       var l, d;
-      !i && s.value ? (l = a.value) == null || l.blur() : i && !s.value && ((d = a.value) == null || d.focus());
+      !s && a.value ? (l = o.value) == null || l.blur() : s && !a.value && ((d = o.value) == null || d.focus());
     }
   });
   return ae(
-    a,
+    o,
     () => {
-      o.value = r;
+      i.value = r;
     },
     { immediate: !0, flush: "post" }
-  ), { focused: o };
+  ), { focused: i };
 }
-const kt = { class: "relative inline-block" }, Hr = /* @__PURE__ */ R({
+const Ot = { class: "relative inline-block" }, nn = /* @__PURE__ */ z({
   __name: "Slider",
-  props: {
-    modelValue: {},
+  props: /* @__PURE__ */ J({
     size: { default: "md" },
-    animate: { type: Boolean, default: !0 },
+    animate: { type: Boolean, default: !1 },
+    width: { default: 12 },
     options: {},
-    width: { default: 12 }
-  },
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    tickNum: {},
+    color: { default: "primary" }
+  }, {
+    modelValue: {
+      default: void 0
+    },
+    modelModifiers: {}
+  }),
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const r = e, n = t, s = m(() => r.options.length ?? 0), a = k(r.options.includes(r.modelValue) ? r.options.indexOf(r.modelValue) : 0);
-    oe(() => {
-      n("update:modelValue", r.options[a.value]);
+  setup(e) {
+    const t = e;
+    function r(k, R, E) {
+      const H = [];
+      for (let j = k; j <= R; j += E)
+        H.push(j);
+      return H[H.length - 1] !== R && H.push(R), H;
+    }
+    function n(k, R) {
+      const E = [];
+      E.push(R[0]);
+      const H = (R.length - 1) / (k - 1);
+      for (let j = 1; j < k - 1; j++)
+        E.push(R[Math.round(j * 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), i = m(() => n(a.value, o.value)), s = me(e, "modelValue"), l = m(() => o.value.length ?? 0), d = y(o.value.includes(s.value) ? o.value.indexOf(s.value) : 0);
+    function f(k) {
+      return o.value.indexOf(k);
+    }
+    const u = 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";
+      }
+    }), p = m(() => `dark:bg-white bg-${t.color}-container`), b = 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";
+      }
     });
-    const o = k(), i = k(), l = _t(o), d = k(!1);
-    function u(b) {
-      if (!d.value)
+    X(() => {
+      s.value = o.value[d.value];
+    });
+    const M = y(), S = y(), A = Ht(M), se = y(!1);
+    function ie(k) {
+      if (!se.value)
         return;
-      if (!(b.buttons === 1)) {
-        d.value = !1;
+      if (!(k.buttons === 1)) {
+        se.value = !1;
         return;
       }
-      b.preventDefault(), b.stopPropagation();
-      const { clientX: A } = b, O = l.left.value, x = l.right.value - O, j = Math.round((A - O) / x * (s.value - 1));
-      j < 0 || j > s.value - 1 || (a.value = j);
+      k.preventDefault(), k.stopPropagation();
+      const { clientX: E } = k, H = A.left.value, ft = A.right.value - H, $e = Math.round((E - H) / ft * (l.value - 1));
+      $e < 0 || $e > l.value - 1 || (d.value = $e);
     }
-    function f(b) {
-      b.preventDefault(), b.stopPropagation(), d.value = !0, u(b);
+    X(() => {
+      d.value = f(s.value);
+    });
+    function x(k) {
+      k.preventDefault(), k.stopPropagation(), se.value = !0, ie(k);
     }
-    F(o, "pointerdown", f), de(() => {
-      F(document, "pointermove", u);
+    Y(M, "pointerdown", x), pe(() => {
+      Y(document, "pointermove", ie), d.value = Math.max(0, f(s.value));
     });
-    const p = m(() => {
-      switch (r.size) {
+    const O = m(() => {
+      switch (t.size) {
         case "sm":
           return {
             wrapper: "h-2",
@@ -355,82 +429,82 @@ const kt = { class: "relative inline-block" }, Hr = /* @__PURE__ */ R({
             progress: "-mx-1.5"
           };
       }
-    }), v = m(() => r.animate ? {
+    }), D = m(() => t.animate ? {
       indicator: "transition-left",
       progress: "transition-width"
     } : {
       indicator: "",
       progress: ""
     });
-    return (b, _) => (g(), y("div", kt, [
-      S("div", {
+    return (k, R) => (g(), v("div", Ot, [
+      $("div", {
         ref_key: "wrapper",
-        ref: o,
+        ref: M,
         type: "size",
-        class: w(["flex cursor-pointer items-center", c(p).wrapper]),
-        onTouchmove: _[0] || (_[0] = Oe(() => {
+        class: w(["flex cursor-pointer items-center", c(O).wrapper]),
+        onTouchmove: R[0] || (R[0] = Ze(() => {
         }, ["prevent"]))
       }, [
-        S("div", {
-          class: w(["rounded-full bg-neutral-7", c(p).innerWrapper])
+        $("div", {
+          class: w(["rounded-full bg-surface-high transition-background-color,border-color,color", c(O).innerWrapper])
         }, [
-          S("div", {
-            class: w(["relative flex", c(p).content]),
+          $("div", {
+            class: w(["relative flex", c(O).content]),
             style: C({
-              width: `${r.width}rem`
+              width: `${t.width}rem`
             })
           }, [
-            (g(!0), y(X, null, te(b.options, (A, O) => (g(), y("div", {
-              key: A,
+            (g(!0), v(ee, null, de(c(i), (E) => (g(), v("div", {
+              key: E,
               style: C({
-                left: `${O / (c(s) - 1) * 100}%`
+                left: `${f(E) / (c(l) - 1) * 100}%`
               }),
-              class: w(["absolute top-50% rounded-full bg-white", c(p).tick])
+              class: w(["absolute top-50% rounded-full bg-white", c(O).tick])
             }, null, 6))), 128)),
-            S("div", {
+            $("div", {
               ref_key: "indicator",
-              ref: i,
-              class: w(["absolute top-50% cursor-pointer rounded-full bg-white", [c(p).indicator, c(v).indicator]]),
+              ref: S,
+              class: w(["absolute top-50% cursor-pointer rounded-full transition-background-color,border-color,color", [c(O).indicator, c(D).indicator, c(p)]]),
               style: C({
-                left: `${c(a) / (c(s) - 1) * 100}%`
+                left: `${c(d) / (c(l) - 1) * 100}%`
               })
             }, [
-              S("div", {
-                class: w(["pointer-events-none absolute left-50% top-50% rounded-full bg-sky-5", c(p).indicatorInner])
+              $("div", {
+                class: w(["pointer-events-none absolute left-50% top-50% rounded-full transition-background-color,border-color,color", [c(O).indicatorInner, c(b)]])
               }, null, 2)
             ], 6),
-            S("div", {
-              class: w(["pointer-events-none h-full rounded-full bg-sky-5", [c(p).progress, c(v).progress]]),
+            $("div", {
+              class: w(["pointer-events-none h-full rounded-full", [c(O).progress, c(D).progress, c(u)]]),
               style: C({
-                width: `${c(a) / (c(s) - 1) * 100}%`
+                width: `${c(d) / (c(l) - 1) * 100}%`
               })
             }, null, 6)
           ], 6)
         ], 2)
       ], 34),
-      S("div", {
-        class: "relative mx-1 h-1em text-xs op56",
+      $("div", {
+        class: "relative mx-1 h-1em text-xs text-surface-onlow",
         style: C({
-          width: `${r.width}rem`
+          width: `${t.width}rem`
         })
       }, [
-        (g(!0), y(X, null, te(b.options, (A, O) => (g(), y("div", {
-          key: A,
+        (g(!0), v(ee, null, de(c(i), (E, H) => (g(), v("div", {
+          key: H,
           style: C({
-            left: `${O / (c(s) - 1) * 100}%`
+            left: `${f(E) / (c(l) - 1) * 100}%`
           }),
-          class: w(["absolute w-auto flex rounded-full -translate-x-50%", c(p).tick])
-        }, q(A), 7))), 128))
+          class: w(["absolute w-auto flex rounded-full -translate-x-50%", c(O).tick])
+        }, te(E), 7))), 128))
       ], 4)
     ]));
   }
 });
-function fe(e) {
+function xe(e) {
   return m(
-    () => ({ style: Mt(e.rounded), class: "rounded-[var(--r-rounded)]" })
+    () => ({ style: Bt(e.rounded), class: "rounded-[var(--r-rounded)]" })
   );
 }
-function Mt(e) {
+function Bt(e) {
   switch (e) {
     case "none":
       return "--r-rounded: 0";
@@ -446,10 +520,10 @@ function Mt(e) {
       return typeof e == "number" || !Number.isNaN(Number(e)) ? `--r-rounded: ${e}rem;` : "rounded-[var(--r-rounded)]";
   }
 }
-const St = ["id"], At = ["for"], $t = ["for"], Br = /* @__PURE__ */ R({
+const Vt = ["id"], Ft = ["for"], Wt = ["for"], Lt = /* @__PURE__ */ z({
+  inheritAttrs: !1,
   __name: "Switch",
-  props: {
-    modelValue: {},
+  props: /* @__PURE__ */ J({
     size: { default: "md" },
     animate: { type: Boolean, default: !0 },
     options: {},
@@ -457,14 +531,20 @@ const St = ["id"], At = ["for"], $t = ["for"], Br = /* @__PURE__ */ R({
     id: {},
     rounded: { default: "full" },
     color: { default: "primary" },
-    disabled: { type: Boolean }
-  },
+    disabled: { type: Boolean },
+    offIcon: {},
+    onIcon: {}
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const r = e, n = t, s = k(null), a = k(!1), o = m(() => {
-      switch (r.size) {
+  setup(e) {
+    const t = e, r = me(e, "modelValue"), n = y(null), a = y(!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)]",
@@ -472,6 +552,7 @@ const St = ["id"], At = ["for"], $t = ["for"], Br = /* @__PURE__ */ R({
           };
         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)]",
@@ -479,106 +560,109 @@ const St = ["id"], At = ["for"], $t = ["for"], Br = /* @__PURE__ */ R({
           };
         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)]"
           };
       }
-    }), i = m(() => r.animate ? {
+    }), i = m(() => t.animate ? {
       indicator: "transition-all",
       progress: "transition-width"
     } : {
       indicator: "",
       progress: ""
-    }), l = r.modelValue !== void 0 ? m({
-      get() {
-        return r.modelValue;
-      },
-      set(v) {
-        n("update:modelValue", v);
-      }
-    }) : k(!1);
-    function d() {
-      const v = k("");
-      return de(() => {
-        r.id ? v.value = r.id : v.value = `switch-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
-      }), v;
+    });
+    function s() {
+      const u = y("");
+      return pe(() => {
+        t.id ? u.value = t.id : u.value = `switch-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
+      }), u;
     }
-    const u = d(), f = m(() => {
-      let v = "bg-primary-7";
-      switch (r.color) {
+    const l = s(), d = m(() => {
+      let u = "bg-primary-container";
+      switch (t.color) {
         case "secondary":
-          v = "bg-secondary-7";
+          u = "bg-secondary-7";
           break;
         case "tertiary":
-          v = "bg-tertiary-7";
+          u = "bg-tertiary-7";
           break;
         case "error":
-          v = "bg-error-7";
+          u = "bg-error-7";
           break;
       }
       return {
-        wrapper: l.value ? `border border-transparent ${v}` : "bg-surface-8 border border-surface-7",
-        indicator: r.disabled ? "bg-surface-7" : "bg-white"
+        wrapper: r.value ? `border border-transparent ${u}` : "bg-surface-lowest border border-surface-border",
+        indicator: t.disabled ? "bg-surface-high" : "bg-white text-primary-container"
       };
-    }), p = fe(r);
-    return (v, b) => (g(), y("div", {
+    }), f = xe(t);
+    return (u, p) => (g(), v("div", {
       role: "switch",
       class: w(["relative flex items-center gap-2", {
-        "pointer-events-none filter-grayscale": r.disabled
+        "pointer-events-none filter-grayscale op60": t.disabled
       }])
     }, [
-      Ie(S("input", {
-        id: c(u),
-        "onUpdate:modelValue": b[0] || (b[0] = (_) => Je(l) ? l.value = _ : null),
+      Je($("input", gt({
+        id: c(l),
+        "onUpdate:modelValue": p[0] || (p[0] = (b) => r.value = b)
+      }, u.$attrs, {
         class: "hidden",
         type: "checkbox"
-      }, null, 8, St), [
-        [et, c(l)]
+      }), null, 16, Vt), [
+        [bt, r.value]
       ]),
-      S("label", {
+      $("label", {
         class: "leading-0 cursor-pointer!",
-        for: c(u)
+        for: c(l)
       }, [
-        S("div", {
+        $("div", {
           ref_key: "wrapper",
-          ref: s,
-          class: w([[c(o).wrapper, c(f).wrapper, c(p).class], "relative inline-block transition-all"]),
-          style: C([c(p).style]),
-          onPointerdown: b[1] || (b[1] = (_) => a.value = !0),
-          onPointerup: b[2] || (b[2] = (_) => a.value = !1),
-          onPointerleave: b[3] || (b[3] = (_) => a.value = !1),
-          onPointerenter: b[4] || (b[4] = (_) => _.buttons === 1 && (a.value = !0))
+          ref: n,
+          class: w([[c(o).wrapper, c(d).wrapper, c(f).class], "relative inline-block transition-all"]),
+          style: C([c(f).style]),
+          onPointerdown: p[1] || (p[1] = (b) => a.value = !0),
+          onPointerup: p[2] || (p[2] = (b) => a.value = !1),
+          onPointerleave: p[3] || (p[3] = (b) => a.value = !1),
+          onPointerenter: p[4] || (p[4] = (b) => b.buttons === 1 && (a.value = !0))
         }, [
-          S("div", {
-            class: w(["absolute top-50% -translate-y-50%", [c(o).indicator, c(f).indicator, c(i).indicator, c(l) ? c(o).active : c(o).inactive, c(p).class]]),
-            style: C([c(p).style])
-          }, null, 6)
+          $("div", {
+            class: w(["absolute top-50% -translate-y-50%", [c(o).indicator, c(d).indicator, c(i).indicator, r.value ? c(o).active : c(o).inactive, c(f).class]]),
+            style: C([c(f).style])
+          }, null, 6),
+          $("i", {
+            class: w(["absolute top-1/2 -translate-y-50%", [c(o).icon, {
+              [`left-0 text-${u.color}-on`]: r.value,
+              "right-0 text-surface-on ": !r.value,
+              [u.onIcon ?? ""]: r.value && u.onIcon,
+              [u.offIcon ?? ""]: !r.value && u.offIcon
+            }]])
+          }, null, 2)
         ], 38)
-      ], 8, At),
-      v.label ? (g(), y("label", {
+      ], 8, Ft),
+      u.label ? (g(), v("label", {
         key: 0,
-        for: c(u)
-      }, q(v.label), 9, $t)) : $("", !0)
+        for: c(l)
+      }, te(u.label), 9, Wt)) : T("", !0)
     ], 2));
   }
 });
-function ie(e) {
+function be(e) {
   "@babel/helpers - typeof";
-  return ie = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(t) {
+  return be = 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;
-  }, ie(e);
+  }, be(e);
 }
-var Ct = /^\s+/, zt = /\s+$/;
+var Dt = /^\s+/, jt = /\s+$/;
 function h(e, t) {
   if (e = e || "", t = t || {}, e instanceof h)
     return e;
   if (!(this instanceof h))
     return new h(e, t);
-  var r = Rt(e);
+  var r = Gt(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;
 }
 h.prototype = {
@@ -605,14 +689,14 @@ h.prototype = {
     return (t.r * 299 + t.g * 587 + t.b * 114) / 1e3;
   },
   getLuminance: function() {
-    var t = this.toRgb(), r, n, s, a, o, i;
-    return r = t.r / 255, n = t.g / 255, s = t.b / 255, r <= 0.03928 ? a = r / 12.92 : a = Math.pow((r + 0.055) / 1.055, 2.4), n <= 0.03928 ? o = n / 12.92 : o = Math.pow((n + 0.055) / 1.055, 2.4), s <= 0.03928 ? i = s / 12.92 : i = Math.pow((s + 0.055) / 1.055, 2.4), 0.2126 * a + 0.7152 * o + 0.0722 * i;
+    var t = this.toRgb(), r, n, a, o, i, s;
+    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 ? i = n / 12.92 : i = Math.pow((n + 0.055) / 1.055, 2.4), a <= 0.03928 ? s = a / 12.92 : s = Math.pow((a + 0.055) / 1.055, 2.4), 0.2126 * o + 0.7152 * i + 0.0722 * s;
   },
   setAlpha: function(t) {
-    return this._a = De(t), this._roundA = Math.round(100 * this._a) / 100, this;
+    return this._a = rt(t), this._roundA = Math.round(100 * this._a) / 100, this;
   },
   toHsv: function() {
-    var t = Re(this._r, this._g, this._b);
+    var t = De(this._r, this._g, this._b);
     return {
       h: t.h * 360,
       s: t.s,
@@ -621,11 +705,11 @@ h.prototype = {
     };
   },
   toHsvString: function() {
-    var t = Re(this._r, this._g, this._b), r = Math.round(t.h * 360), n = Math.round(t.s * 100), s = Math.round(t.v * 100);
-    return this._a == 1 ? "hsv(" + r + ", " + n + "%, " + s + "%)" : "hsva(" + r + ", " + n + "%, " + s + "%, " + this._roundA + ")";
+    var t = De(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() {
-    var t = ze(this._r, this._g, this._b);
+    var t = Le(this._r, this._g, this._b);
     return {
       h: t.h * 360,
       s: t.s,
@@ -634,17 +718,17 @@ h.prototype = {
     };
   },
   toHslString: function() {
-    var t = ze(this._r, this._g, this._b), r = Math.round(t.h * 360), n = Math.round(t.s * 100), s = Math.round(t.l * 100);
-    return this._a == 1 ? "hsl(" + r + ", " + n + "%, " + s + "%)" : "hsla(" + r + ", " + n + "%, " + s + "%, " + this._roundA + ")";
+    var t = Le(this._r, this._g, this._b), r = Math.round(t.h * 360), n = Math.round(t.s * 100), a = Math.round(t.l * 100);
+    return this._a == 1 ? "hsl(" + r + ", " + n + "%, " + a + "%)" : "hsla(" + r + ", " + n + "%, " + a + "%, " + this._roundA + ")";
   },
   toHex: function(t) {
-    return Te(this._r, this._g, this._b, t);
+    return je(this._r, this._g, this._b, t);
   },
   toHexString: function(t) {
     return "#" + this.toHex(t);
   },
   toHex8: function(t) {
-    return Pt(this._r, this._g, this._b, this._a, t);
+    return Yt(this._r, this._g, this._b, this._a, t);
   },
   toHex8String: function(t) {
     return "#" + this.toHex8(t);
@@ -662,31 +746,31 @@ h.prototype = {
   },
   toPercentageRgb: function() {
     return {
-      r: Math.round(M(this._r, 255) * 100) + "%",
-      g: Math.round(M(this._g, 255) * 100) + "%",
-      b: Math.round(M(this._b, 255) * 100) + "%",
+      r: Math.round(_(this._r, 255) * 100) + "%",
+      g: Math.round(_(this._g, 255) * 100) + "%",
+      b: Math.round(_(this._b, 255) * 100) + "%",
       a: this._a
     };
   },
   toPercentageRgbString: function() {
-    return this._a == 1 ? "rgb(" + Math.round(M(this._r, 255) * 100) + "%, " + Math.round(M(this._g, 255) * 100) + "%, " + Math.round(M(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(M(this._r, 255) * 100) + "%, " + Math.round(M(this._g, 255) * 100) + "%, " + Math.round(M(this._b, 255) * 100) + "%, " + this._roundA + ")";
+    return this._a == 1 ? "rgb(" + Math.round(_(this._r, 255) * 100) + "%, " + Math.round(_(this._g, 255) * 100) + "%, " + Math.round(_(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(_(this._r, 255) * 100) + "%, " + Math.round(_(this._g, 255) * 100) + "%, " + Math.round(_(this._b, 255) * 100) + "%, " + this._roundA + ")";
   },
   toName: function() {
-    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : Xt[Te(this._r, this._g, this._b, !0)] || !1;
+    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : ir[je(this._r, this._g, this._b, !0)] || !1;
   },
   toFilter: function(t) {
-    var r = "#" + Ee(this._r, this._g, this._b, this._a), n = r, s = this._gradientType ? "GradientType = 1, " : "";
+    var r = "#" + Ge(this._r, this._g, this._b, this._a), n = r, a = this._gradientType ? "GradientType = 1, " : "";
     if (t) {
-      var a = h(t);
-      n = "#" + Ee(a._r, a._g, a._b, a._a);
+      var o = h(t);
+      n = "#" + Ge(o._r, o._g, o._b, o._a);
     }
-    return "progid:DXImageTransform.Microsoft.gradient(" + s + "startColorstr=" + r + ",endColorstr=" + n + ")";
+    return "progid:DXImageTransform.Microsoft.gradient(" + a + "startColorstr=" + r + ",endColorstr=" + n + ")";
   },
   toString: function(t) {
     var r = !!t;
     t = t || this._format;
-    var n = !1, s = this._a < 1 && this._a >= 0, a = !r && s && (t === "hex" || t === "hex6" || t === "hex3" || t === "hex4" || t === "hex8" || t === "name");
-    return a ? t === "name" && this._a === 0 ? this.toName() : this.toRgbString() : (t === "rgb" && (n = this.toRgbString()), t === "prgb" && (n = this.toPercentageRgbString()), (t === "hex" || t === "hex6") && (n = this.toHexString()), t === "hex3" && (n = this.toHexString(!0)), t === "hex4" && (n = this.toHex8String(!0)), t === "hex8" && (n = this.toHex8String()), t === "name" && (n = this.toName()), t === "hsl" && (n = this.toHslString()), t === "hsv" && (n = this.toHsvString()), n || this.toHexString());
+    var n = !1, a = this._a < 1 && this._a >= 0, o = !r && a && (t === "hex" || t === "hex6" || t === "hex3" || t === "hex4" || t === "hex8" || t === "name");
+    return o ? t === "name" && this._a === 0 ? this.toName() : this.toRgbString() : (t === "rgb" && (n = this.toRgbString()), t === "prgb" && (n = this.toPercentageRgbString()), (t === "hex" || t === "hex6") && (n = this.toHexString()), t === "hex3" && (n = this.toHexString(!0)), t === "hex4" && (n = this.toHex8String(!0)), t === "hex8" && (n = this.toHex8String()), t === "name" && (n = this.toName()), t === "hsl" && (n = this.toHslString()), t === "hsv" && (n = this.toHsvString()), n || this.toHexString());
   },
   clone: function() {
     return h(this.toString());
@@ -696,172 +780,172 @@ h.prototype = {
     return this._r = n._r, this._g = n._g, this._b = n._b, this.setAlpha(n._a), this;
   },
   lighten: function() {
-    return this._applyModification(Ot, arguments);
+    return this._applyModification(Jt, arguments);
   },
   brighten: function() {
-    return this._applyModification(It, arguments);
+    return this._applyModification(er, arguments);
   },
   darken: function() {
-    return this._applyModification(Ft, arguments);
+    return this._applyModification(tr, arguments);
   },
   desaturate: function() {
-    return this._applyModification(Ht, arguments);
+    return this._applyModification(Kt, arguments);
   },
   saturate: function() {
-    return this._applyModification(Bt, arguments);
+    return this._applyModification(Qt, arguments);
   },
   greyscale: function() {
-    return this._applyModification(Vt, arguments);
+    return this._applyModification(Zt, arguments);
   },
   spin: function() {
-    return this._applyModification(Dt, arguments);
+    return this._applyModification(rr, arguments);
   },
   _applyCombination: function(t, r) {
     return t.apply(null, [this].concat([].slice.call(r)));
   },
   analogous: function() {
-    return this._applyCombination(jt, arguments);
+    return this._applyCombination(ar, arguments);
   },
   complement: function() {
-    return this._applyCombination(Lt, arguments);
+    return this._applyCombination(nr, arguments);
   },
   monochromatic: function() {
-    return this._applyCombination(Gt, arguments);
+    return this._applyCombination(sr, arguments);
   },
   splitcomplement: function() {
-    return this._applyCombination(Wt, arguments);
+    return this._applyCombination(or, arguments);
   },
   // Disabled until https://github.com/bgrins/TinyColor/issues/254
   // polyad: function (number) {
   //   return this._applyCombination(polyad, [number]);
   // },
   triad: function() {
-    return this._applyCombination(Ne, [3]);
+    return this._applyCombination(Ue, [3]);
   },
   tetrad: function() {
-    return this._applyCombination(Ne, [4]);
+    return this._applyCombination(Ue, [4]);
   }
 };
 h.fromRatio = function(e, t) {
-  if (ie(e) == "object") {
+  if (be(e) == "object") {
     var r = {};
     for (var n in e)
-      e.hasOwnProperty(n) && (n === "a" ? r[n] = e[n] : r[n] = J(e[n]));
+      e.hasOwnProperty(n) && (n === "a" ? r[n] = e[n] : r[n] = le(e[n]));
     e = r;
   }
   return h(e, t);
 };
-function Rt(e) {
+function Gt(e) {
   var t = {
     r: 0,
     g: 0,
     b: 0
-  }, r = 1, n = null, s = null, a = null, o = !1, i = !1;
-  return typeof e == "string" && (e = Kt(e)), ie(e) == "object" && (B(e.r) && B(e.g) && B(e.b) ? (t = Tt(e.r, e.g, e.b), o = !0, i = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : B(e.h) && B(e.s) && B(e.v) ? (n = J(e.s), s = J(e.v), t = Nt(e.h, n, s), o = !0, i = "hsv") : B(e.h) && B(e.s) && B(e.l) && (n = J(e.s), a = J(e.l), t = Et(e.h, n, a), o = !0, i = "hsl"), e.hasOwnProperty("a") && (r = e.a)), r = De(r), {
-    ok: o,
-    format: e.format || i,
+  }, r = 1, n = null, a = null, o = null, i = !1, s = !1;
+  return typeof e == "string" && (e = dr(e)), be(e) == "object" && (W(e.r) && W(e.g) && W(e.b) ? (t = Ut(e.r, e.g, e.b), i = !0, s = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : W(e.h) && W(e.s) && W(e.v) ? (n = le(e.s), a = le(e.v), t = qt(e.h, n, a), i = !0, s = "hsv") : W(e.h) && W(e.s) && W(e.l) && (n = le(e.s), o = le(e.l), t = Xt(e.h, n, o), i = !0, s = "hsl"), e.hasOwnProperty("a") && (r = e.a)), r = rt(r), {
+    ok: i,
+    format: e.format || s,
     r: Math.min(255, Math.max(t.r, 0)),
     g: Math.min(255, Math.max(t.g, 0)),
     b: Math.min(255, Math.max(t.b, 0)),
     a: r
   };
 }
-function Tt(e, t, r) {
+function Ut(e, t, r) {
   return {
-    r: M(e, 255) * 255,
-    g: M(t, 255) * 255,
-    b: M(r, 255) * 255
+    r: _(e, 255) * 255,
+    g: _(t, 255) * 255,
+    b: _(r, 255) * 255
   };
 }
-function ze(e, t, r) {
-  e = M(e, 255), t = M(t, 255), r = M(r, 255);
-  var n = Math.max(e, t, r), s = Math.min(e, t, r), a, o, i = (n + s) / 2;
-  if (n == s)
-    a = o = 0;
+function Le(e, t, r) {
+  e = _(e, 255), t = _(t, 255), r = _(r, 255);
+  var n = Math.max(e, t, r), a = Math.min(e, t, r), o, i, s = (n + a) / 2;
+  if (n == a)
+    o = i = 0;
   else {
-    var l = n - s;
-    switch (o = i > 0.5 ? l / (2 - n - s) : l / (n + s), n) {
+    var l = n - a;
+    switch (i = s > 0.5 ? l / (2 - n - a) : l / (n + a), n) {
       case e:
-        a = (t - r) / l + (t < r ? 6 : 0);
+        o = (t - r) / l + (t < r ? 6 : 0);
         break;
       case t:
-        a = (r - e) / l + 2;
+        o = (r - e) / l + 2;
         break;
       case r:
-        a = (e - t) / l + 4;
+        o = (e - t) / l + 4;
         break;
     }
-    a /= 6;
+    o /= 6;
   }
   return {
-    h: a,
-    s: o,
-    l: i
+    h: o,
+    s: i,
+    l: s
   };
 }
-function Et(e, t, r) {
-  var n, s, a;
-  e = M(e, 360), t = M(t, 100), r = M(r, 100);
-  function o(d, u, f) {
-    return f < 0 && (f += 1), f > 1 && (f -= 1), f < 1 / 6 ? d + (u - d) * 6 * f : f < 1 / 2 ? u : f < 2 / 3 ? d + (u - d) * (2 / 3 - f) * 6 : d;
+function Xt(e, t, r) {
+  var n, a, o;
+  e = _(e, 360), t = _(t, 100), r = _(r, 100);
+  function i(d, f, u) {
+    return u < 0 && (u += 1), u > 1 && (u -= 1), u < 1 / 6 ? d + (f - d) * 6 * u : u < 1 / 2 ? f : u < 2 / 3 ? d + (f - d) * (2 / 3 - u) * 6 : d;
   }
   if (t === 0)
-    n = s = a = r;
+    n = a = o = r;
   else {
-    var i = r < 0.5 ? r * (1 + t) : r + t - r * t, l = 2 * r - i;
-    n = o(l, i, e + 1 / 3), s = o(l, i, e), a = o(l, i, e - 1 / 3);
+    var s = r < 0.5 ? r * (1 + t) : r + t - r * t, l = 2 * r - s;
+    n = i(l, s, e + 1 / 3), a = i(l, s, e), o = i(l, s, e - 1 / 3);
   }
   return {
     r: n * 255,
-    g: s * 255,
-    b: a * 255
+    g: a * 255,
+    b: o * 255
   };
 }
-function Re(e, t, r) {
-  e = M(e, 255), t = M(t, 255), r = M(r, 255);
-  var n = Math.max(e, t, r), s = Math.min(e, t, r), a, o, i = n, l = n - s;
-  if (o = n === 0 ? 0 : l / n, n == s)
-    a = 0;
+function De(e, t, r) {
+  e = _(e, 255), t = _(t, 255), r = _(r, 255);
+  var n = Math.max(e, t, r), a = Math.min(e, t, r), o, i, s = n, l = n - a;
+  if (i = n === 0 ? 0 : l / n, n == a)
+    o = 0;
   else {
     switch (n) {
       case e:
-        a = (t - r) / l + (t < r ? 6 : 0);
+        o = (t - r) / l + (t < r ? 6 : 0);
         break;
       case t:
-        a = (r - e) / l + 2;
+        o = (r - e) / l + 2;
         break;
       case r:
-        a = (e - t) / l + 4;
+        o = (e - t) / l + 4;
         break;
     }
-    a /= 6;
+    o /= 6;
   }
   return {
-    h: a,
-    s: o,
-    v: i
+    h: o,
+    s: i,
+    v: s
   };
 }
-function Nt(e, t, r) {
-  e = M(e, 360) * 6, t = M(t, 100), r = M(r, 100);
-  var n = Math.floor(e), s = e - n, a = r * (1 - t), o = r * (1 - s * t), i = r * (1 - (1 - s) * t), l = n % 6, d = [r, o, a, a, i, r][l], u = [i, r, r, o, a, a][l], f = [a, a, i, r, r, o][l];
+function qt(e, t, r) {
+  e = _(e, 360) * 6, t = _(t, 100), r = _(r, 100);
+  var n = Math.floor(e), a = e - n, o = r * (1 - t), i = r * (1 - a * t), s = r * (1 - (1 - a) * t), l = n % 6, d = [r, i, o, o, s, r][l], f = [s, r, r, i, o, o][l], u = [o, o, s, r, r, i][l];
   return {
     r: d * 255,
-    g: u * 255,
-    b: f * 255
+    g: f * 255,
+    b: u * 255
   };
 }
-function Te(e, t, r, n) {
-  var s = [N(Math.round(e).toString(16)), N(Math.round(t).toString(16)), N(Math.round(r).toString(16))];
-  return n && s[0].charAt(0) == s[0].charAt(1) && s[1].charAt(0) == s[1].charAt(1) && s[2].charAt(0) == s[2].charAt(1) ? s[0].charAt(0) + s[1].charAt(0) + s[2].charAt(0) : s.join("");
+function je(e, t, r, n) {
+  var a = [V(Math.round(e).toString(16)), V(Math.round(t).toString(16)), V(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 Pt(e, t, r, n, s) {
-  var a = [N(Math.round(e).toString(16)), N(Math.round(t).toString(16)), N(Math.round(r).toString(16)), N(Le(n))];
-  return s && 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[3].charAt(0) == a[3].charAt(1) ? a[0].charAt(0) + a[1].charAt(0) + a[2].charAt(0) + a[3].charAt(0) : a.join("");
+function Yt(e, t, r, n, a) {
+  var o = [V(Math.round(e).toString(16)), V(Math.round(t).toString(16)), V(Math.round(r).toString(16)), V(nt(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 Ee(e, t, r, n) {
-  var s = [N(Le(n)), N(Math.round(e).toString(16)), N(Math.round(t).toString(16)), N(Math.round(r).toString(16))];
-  return s.join("");
+function Ge(e, t, r, n) {
+  var a = [V(nt(n)), V(Math.round(e).toString(16)), V(Math.round(t).toString(16)), V(Math.round(r).toString(16))];
+  return a.join("");
 }
 h.equals = function(e, t) {
   return !e || !t ? !1 : h(e).toRgbString() == h(t).toRgbString();
@@ -873,54 +957,54 @@ h.random = function() {
     b: Math.random()
   });
 };
-function Ht(e, t) {
+function Kt(e, t) {
   t = t === 0 ? 0 : t || 10;
   var r = h(e).toHsl();
-  return r.s -= t / 100, r.s = he(r.s), h(r);
+  return r.s -= t / 100, r.s = _e(r.s), h(r);
 }
-function Bt(e, t) {
+function Qt(e, t) {
   t = t === 0 ? 0 : t || 10;
   var r = h(e).toHsl();
-  return r.s += t / 100, r.s = he(r.s), h(r);
+  return r.s += t / 100, r.s = _e(r.s), h(r);
 }
-function Vt(e) {
+function Zt(e) {
   return h(e).desaturate(100);
 }
-function Ot(e, t) {
+function Jt(e, t) {
   t = t === 0 ? 0 : t || 10;
   var r = h(e).toHsl();
-  return r.l += t / 100, r.l = he(r.l), h(r);
+  return r.l += t / 100, r.l = _e(r.l), h(r);
 }
-function It(e, t) {
+function er(e, t) {
   t = t === 0 ? 0 : t || 10;
   var r = h(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)))), h(r);
 }
-function Ft(e, t) {
+function tr(e, t) {
   t = t === 0 ? 0 : t || 10;
   var r = h(e).toHsl();
-  return r.l -= t / 100, r.l = he(r.l), h(r);
+  return r.l -= t / 100, r.l = _e(r.l), h(r);
 }
-function Dt(e, t) {
+function rr(e, t) {
   var r = h(e).toHsl(), n = (r.h + t) % 360;
   return r.h = n < 0 ? 360 + n : n, h(r);
 }
-function Lt(e) {
+function nr(e) {
   var t = h(e).toHsl();
   return t.h = (t.h + 180) % 360, h(t);
 }
-function Ne(e, t) {
+function Ue(e, t) {
   if (isNaN(t) || t <= 0)
     throw new Error("Argument to polyad must be a positive number");
-  for (var r = h(e).toHsl(), n = [h(e)], s = 360 / t, a = 1; a < t; a++)
+  for (var r = h(e).toHsl(), n = [h(e)], a = 360 / t, o = 1; o < t; o++)
     n.push(h({
-      h: (r.h + a * s) % 360,
+      h: (r.h + o * a) % 360,
       s: r.s,
       l: r.l
     }));
   return n;
 }
-function Wt(e) {
+function or(e) {
   var t = h(e).toHsl(), r = t.h;
   return [h(e), h({
     h: (r + 72) % 360,
@@ -932,64 +1016,64 @@ function Wt(e) {
     l: t.l
   })];
 }
-function jt(e, t, r) {
+function ar(e, t, r) {
   t = t || 6, r = r || 30;
-  var n = h(e).toHsl(), s = 360 / r, a = [h(e)];
-  for (n.h = (n.h - (s * t >> 1) + 720) % 360; --t; )
-    n.h = (n.h + s) % 360, a.push(h(n));
-  return a;
+  var n = h(e).toHsl(), a = 360 / r, o = [h(e)];
+  for (n.h = (n.h - (a * t >> 1) + 720) % 360; --t; )
+    n.h = (n.h + a) % 360, o.push(h(n));
+  return o;
 }
-function Gt(e, t) {
+function sr(e, t) {
   t = t || 6;
-  for (var r = h(e).toHsv(), n = r.h, s = r.s, a = r.v, o = [], i = 1 / t; t--; )
-    o.push(h({
+  for (var r = h(e).toHsv(), n = r.h, a = r.s, o = r.v, i = [], s = 1 / t; t--; )
+    i.push(h({
       h: n,
-      s,
-      v: a
-    })), a = (a + i) % 1;
-  return o;
+      s: a,
+      v: o
+    })), o = (o + s) % 1;
+  return i;
 }
 h.mix = function(e, t, r) {
   r = r === 0 ? 0 : r || 50;
-  var n = h(e).toRgb(), s = h(t).toRgb(), a = r / 100, o = {
-    r: (s.r - n.r) * a + n.r,
-    g: (s.g - n.g) * a + n.g,
-    b: (s.b - n.b) * a + n.b,
-    a: (s.a - n.a) * a + n.a
+  var n = h(e).toRgb(), a = h(t).toRgb(), o = r / 100, i = {
+    r: (a.r - n.r) * o + n.r,
+    g: (a.g - n.g) * o + n.g,
+    b: (a.b - n.b) * o + n.b,
+    a: (a.a - n.a) * o + n.a
   };
-  return h(o);
+  return h(i);
 };
 h.readability = function(e, t) {
   var r = h(e), n = h(t);
   return (Math.max(r.getLuminance(), n.getLuminance()) + 0.05) / (Math.min(r.getLuminance(), n.getLuminance()) + 0.05);
 };
 h.isReadable = function(e, t, r) {
-  var n = h.readability(e, t), s, a;
-  switch (a = !1, s = Qt(r), s.level + s.size) {
+  var n = h.readability(e, t), a, o;
+  switch (o = !1, a = fr(r), a.level + a.size) {
     case "AAsmall":
     case "AAAlarge":
-      a = n >= 4.5;
+      o = n >= 4.5;
       break;
     case "AAlarge":
-      a = n >= 3;
+      o = n >= 3;
       break;
     case "AAAsmall":
-      a = n >= 7;
+      o = n >= 7;
       break;
   }
-  return a;
+  return o;
 };
 h.mostReadable = function(e, t, r) {
-  var n = null, s = 0, a, o, i, l;
-  r = r || {}, o = r.includeFallbackColors, i = r.level, l = r.size;
+  var n = null, a = 0, o, i, s, l;
+  r = r || {}, i = r.includeFallbackColors, s = r.level, l = r.size;
   for (var d = 0; d < t.length; d++)
-    a = h.readability(e, t[d]), a > s && (s = a, n = h(t[d]));
+    o = h.readability(e, t[d]), o > a && (a = o, n = h(t[d]));
   return h.isReadable(e, n, {
-    level: i,
+    level: s,
     size: l
-  }) || !o ? n : (r.includeFallbackColors = !1, h.mostReadable(e, ["#fff", "#000"], r));
+  }) || !i ? n : (r.includeFallbackColors = !1, h.mostReadable(e, ["#fff", "#000"], r));
 };
-var ye = h.names = {
+var Ae = h.names = {
   aliceblue: "f0f8ff",
   antiquewhite: "faebd7",
   aqua: "0ff",
@@ -1139,69 +1223,69 @@ var ye = h.names = {
   whitesmoke: "f5f5f5",
   yellow: "ff0",
   yellowgreen: "9acd32"
-}, Xt = h.hexNames = qt(ye);
-function qt(e) {
+}, ir = h.hexNames = lr(Ae);
+function lr(e) {
   var t = {};
   for (var r in e)
     e.hasOwnProperty(r) && (t[e[r]] = r);
   return t;
 }
-function De(e) {
+function rt(e) {
   return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
 }
-function M(e, t) {
-  Ut(e) && (e = "100%");
-  var r = Yt(e);
+function _(e, t) {
+  cr(e) && (e = "100%");
+  var r = ur(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 he(e) {
+function _e(e) {
   return Math.min(1, Math.max(0, e));
 }
-function T(e) {
+function P(e) {
   return parseInt(e, 16);
 }
-function Ut(e) {
+function cr(e) {
   return typeof e == "string" && e.indexOf(".") != -1 && parseFloat(e) === 1;
 }
-function Yt(e) {
+function ur(e) {
   return typeof e == "string" && e.indexOf("%") != -1;
 }
-function N(e) {
+function V(e) {
   return e.length == 1 ? "0" + e : "" + e;
 }
-function J(e) {
+function le(e) {
   return e <= 1 && (e = e * 100 + "%"), e;
 }
-function Le(e) {
+function nt(e) {
   return Math.round(parseFloat(e) * 255).toString(16);
 }
-function Pe(e) {
-  return T(e) / 255;
+function Xe(e) {
+  return P(e) / 255;
 }
-var E = function() {
-  var e = "[-\\+]?\\d+%?", t = "[-\\+]?\\d*\\.\\d+%?", r = "(?:" + t + ")|(?:" + e + ")", n = "[\\s|\\(]+(" + r + ")[,|\\s]+(" + r + ")[,|\\s]+(" + r + ")\\s*\\)?", s = "[\\s|\\(]+(" + r + ")[,|\\s]+(" + r + ")[,|\\s]+(" + r + ")[,|\\s]+(" + r + ")\\s*\\)?";
+var B = 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),
     rgb: new RegExp("rgb" + n),
-    rgba: new RegExp("rgba" + s),
+    rgba: new RegExp("rgba" + a),
     hsl: new RegExp("hsl" + n),
-    hsla: new RegExp("hsla" + s),
+    hsla: new RegExp("hsla" + a),
     hsv: new RegExp("hsv" + n),
-    hsva: new RegExp("hsva" + s),
+    hsva: new RegExp("hsva" + a),
     hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
     hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
     hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
     hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
   };
 }();
-function B(e) {
-  return !!E.CSS_UNIT.exec(e);
+function W(e) {
+  return !!B.CSS_UNIT.exec(e);
 }
-function Kt(e) {
-  e = e.replace(Ct, "").replace(zt, "").toLowerCase();
+function dr(e) {
+  e = e.replace(Dt, "").replace(jt, "").toLowerCase();
   var t = !1;
-  if (ye[e])
-    e = ye[e], t = !0;
+  if (Ae[e])
+    e = Ae[e], t = !0;
   else if (e == "transparent")
     return {
       r: 0,
@@ -1211,58 +1295,58 @@ function Kt(e) {
       format: "name"
     };
   var r;
-  return (r = E.rgb.exec(e)) ? {
+  return (r = B.rgb.exec(e)) ? {
     r: r[1],
     g: r[2],
     b: r[3]
-  } : (r = E.rgba.exec(e)) ? {
+  } : (r = B.rgba.exec(e)) ? {
     r: r[1],
     g: r[2],
     b: r[3],
     a: r[4]
-  } : (r = E.hsl.exec(e)) ? {
+  } : (r = B.hsl.exec(e)) ? {
     h: r[1],
     s: r[2],
     l: r[3]
-  } : (r = E.hsla.exec(e)) ? {
+  } : (r = B.hsla.exec(e)) ? {
     h: r[1],
     s: r[2],
     l: r[3],
     a: r[4]
-  } : (r = E.hsv.exec(e)) ? {
+  } : (r = B.hsv.exec(e)) ? {
     h: r[1],
     s: r[2],
     v: r[3]
-  } : (r = E.hsva.exec(e)) ? {
+  } : (r = B.hsva.exec(e)) ? {
     h: r[1],
     s: r[2],
     v: r[3],
     a: r[4]
-  } : (r = E.hex8.exec(e)) ? {
-    r: T(r[1]),
-    g: T(r[2]),
-    b: T(r[3]),
-    a: Pe(r[4]),
+  } : (r = B.hex8.exec(e)) ? {
+    r: P(r[1]),
+    g: P(r[2]),
+    b: P(r[3]),
+    a: Xe(r[4]),
     format: t ? "name" : "hex8"
-  } : (r = E.hex6.exec(e)) ? {
-    r: T(r[1]),
-    g: T(r[2]),
-    b: T(r[3]),
+  } : (r = B.hex6.exec(e)) ? {
+    r: P(r[1]),
+    g: P(r[2]),
+    b: P(r[3]),
     format: t ? "name" : "hex"
-  } : (r = E.hex4.exec(e)) ? {
-    r: T(r[1] + "" + r[1]),
-    g: T(r[2] + "" + r[2]),
-    b: T(r[3] + "" + r[3]),
-    a: Pe(r[4] + "" + r[4]),
+  } : (r = B.hex4.exec(e)) ? {
+    r: P(r[1] + "" + r[1]),
+    g: P(r[2] + "" + r[2]),
+    b: P(r[3] + "" + r[3]),
+    a: Xe(r[4] + "" + r[4]),
     format: t ? "name" : "hex8"
-  } : (r = E.hex3.exec(e)) ? {
-    r: T(r[1] + "" + r[1]),
-    g: T(r[2] + "" + r[2]),
-    b: T(r[3] + "" + r[3]),
+  } : (r = B.hex3.exec(e)) ? {
+    r: P(r[1] + "" + r[1]),
+    g: P(r[2] + "" + r[2]),
+    b: P(r[3] + "" + r[3]),
     format: t ? "name" : "hex"
   } : !1;
 }
-function Qt(e) {
+function fr(e) {
   var t, r;
   return e = e || {
     level: "AA",
@@ -1272,114 +1356,232 @@ function Qt(e) {
     size: r
   };
 }
-const Zt = {
-  primary: ["#f0f9ff", "#e0f2fe", "#bae6fd", "#7dd3fc", "#38bdf8", "#0ea5e9", "#0284c7", "#0369a1", "#075985", "#0c4a6e", "#082f49"],
-  secondary: ["#f0fdf4", "#dcfce7", "#bbf7d0", "#86efac", "#4ade80", "#22c55e", "#059669", "#047857", "#065f46", "#064e3b", "#033d2f"],
-  tertiary: ["#fffbeb", "#fef3c7", "#fde68a", "#fcd34d", "#fbbf24", "#f59e0b", "#d97706", "#b45309", "#92400e", "#78350f", "#572508"],
-  error: ["#fff5f5", "#fed7d7", "#feb2b2", "#fc8181", "#f56565", "#e53e3e", "#9b2c2c", "#7c1d1d", "#6b1616", "#581414", "#450a0a"],
+const He = {
+  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", "#0a0a0a"]
-}, se = {
-  theme: "dark",
-  colors: Zt
-}, Vr = Symbol("Notifications"), We = tt([]);
-function Jt() {
-  return We;
-}
-class Or {
+}, Ce = {
+  name: "dark",
+  scheme: "dark",
+  colors: He
+}, hr = {
+  name: "light",
+  scheme: "light",
+  colors: He
+}, on = Symbol("Notifications"), ot = vt([]);
+function pr() {
+  return ot;
+}
+class an {
   static show(t) {
-    t.hash = Math.random().toString(36), We.push(t);
+    t.hash = Math.random().toString(36), ot.push(t);
   }
 }
-const Ir = /* @__PURE__ */ R({
+const Te = [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 mr(e) {
+  const t = h(e).toHsl().l;
+  return Te.reduce(
+    (r, n) => Math.abs(n - t) < Math.abs(r - t) ? n : r
+  );
+}
+function gr(e) {
+  const t = h(e), r = mr(t), n = Te.findIndex((o) => o === r), a = Te.map((o) => {
+    const i = h({ h: t.toHsl().h, s: t.toHsl().s, l: o }), s = qe[n] - qe[n];
+    return s >= 0 ? i.saturate(s * 100) : i.desaturate(s * -100), i;
+  });
+  return { baseColorIndex: n, colors: a.map((o) => o.toHexString()) };
+}
+function sn(e) {
+  return gr(e).colors;
+}
+function br() {
+  if (typeof window > "u")
+    return y("dark");
+  const e = y(document.documentElement.dataset.theme);
+  return new MutationObserver((r) => {
+    r.forEach((n) => {
+      n.type === "attributes" && n.attributeName === "data-theme" && (e.value = document.documentElement.dataset.theme);
+    });
+  }).observe(document.documentElement, {
+    attributes: !0,
+    attributeFilter: ["data-theme"]
+  }), e;
+}
+function ln() {
+  return et("currentThemeScheme", null);
+}
+function vr() {
+  return et("currentTheme", y(Ce));
+}
+function at(e, t = !0) {
+  const r = y(e), n = y(e.scheme), a = br();
+  X(() => {
+    a.value && (n.value = a.value);
+  }), Fe("currentTheme", r), Fe("currentThemeScheme", n);
+  const i = {
+    ...Object.keys(r.value.colors).map((f) => {
+      const u = f;
+      return r.value.colors[u].reduce((b, M, S) => {
+        const A = h(M).toRgb();
+        return b[`--r-color-${u}-${S}`] = `${A.r} ${A.g} ${A.b}`, b;
+      }, {});
+    }).reduce((f, u) => ({
+      ...f,
+      ...u
+    }), {})
+  }, s = {
+    "color-scheme": n.value,
+    "font-family": "'Roboto', sans-serif",
+    "background-color": "rgb(var(--r-color-surface-low))",
+    color: "rgb(var(--r-color-surface-on))"
+  }, l = m(() => {
+    if (t)
+      return {};
+    switch (e.scheme) {
+      case "dark":
+        return {
+          colorScheme: "dark",
+          "--r-color-surface-on": "var(--r-color-surface-3)",
+          "--r-color-surface-oninverted": "var(--r-color-surface-8)",
+          "--r-color-surface-onlow": "var(--r-color-surface-4)",
+          "--r-color-surface-onlowinverted": "var(--r-color-surface-7)",
+          "--r-color-surface-lowest": "var(--r-color-surface-9)",
+          "--r-color-surface-low": "var(--r-color-surface-9)",
+          "--r-color-surface-base": "var(--r-color-surface-8)",
+          "--r-color-surface-high": "var(--r-color-surface-7)",
+          "--r-color-surface-highest": "var(--r-color-surface-6)",
+          "--r-color-surface-border": "var(--r-color-surface-7)",
+          "--r-color-primary-container": "var(--r-color-primary-8)",
+          "--r-color-secondary-container": "var(--r-color-secondary-8)",
+          "--r-color-tertiary-container": "var(--r-color-tertiary-8)",
+          "--r-color-error-container": "var(--r-color-error-8)",
+          "--r-color-primary-containerd": "var(--r-color-primary-9)",
+          "--r-color-secondary-containerd": "var(--r-color-secondary-9)",
+          "--r-color-tertiary-containerd": "var(--r-color-tertiary-9)",
+          "--r-color-error-containerd": "var(--r-color-error-9)",
+          "--r-color-primary-containerl": "var(--r-color-primary-6)",
+          "--r-color-secondary-containerl": "var(--r-color-secondary-6)",
+          "--r-color-tertiary-containerl": "var(--r-color-tertiary-6)",
+          "--r-color-error-containerl": "var(--r-color-error-6)"
+        };
+      case "light":
+        return {
+          colorScheme: "light",
+          "--r-color-surface-on": "var(--r-color-surface-7)",
+          "--r-color-surface-oninverted": "var(--r-color-surface-2)",
+          "--r-color-surface-onlow": "var(--r-color-surface-6)",
+          "--r-color-surface-onlowinverted": "var(--r-color-surface-3)",
+          "--r-color-surface-lowest": "var(--r-color-surface-3)",
+          "--r-color-surface-low": "var(--r-color-surface-2)",
+          "--r-color-surface-base": "var(--r-color-surface-1)",
+          "--r-color-surface-high": "var(--r-color-surface-0)",
+          "--r-color-surface-highest": "var(--r-color-surface-0)",
+          "--r-color-surface-border": "var(--r-color-surface-4)",
+          "--r-color-primary-container": "var(--r-color-primary-6)",
+          "--r-color-secondary-container": "var(--r-color-secondary-6)",
+          "--r-color-tertiary-container": "var(--r-color-tertiary-6)",
+          "--r-color-error-container": "var(--r-color-error-6)",
+          "--r-color-primary-containerd": "var(--r-color-primary-7)",
+          "--r-color-secondary-containerd": "var(--r-color-secondary-7)",
+          "--r-color-tertiary-containerd": "var(--r-color-tertiary-7)",
+          "--r-color-error-containerd": "var(--r-color-error-7)",
+          "--r-color-primary-containerl": "var(--r-color-primary-4)",
+          "--r-color-secondary-containerl": "var(--r-color-secondary-4)",
+          "--r-color-tertiary-containerl": "var(--r-color-tertiary-4)",
+          "--r-color-error-containerl": "var(--r-color-error-4)"
+        };
+    }
+  });
+  return {
+    ...i,
+    ...s,
+    ...l.value
+  };
+}
+const cn = /* @__PURE__ */ z({
   __name: "RokuProvider",
   props: {
     is: { default: "div" },
     theme: { default() {
-      return se;
+      return typeof window > "u" || document.documentElement.dataset.theme === "dark" ? Ce : hr;
     } }
   },
   setup(e) {
-    const t = e, r = Object.keys(se.colors).map((s) => {
-      const a = s;
-      return se.colors[a].reduce((i, l, d) => {
-        const u = h(l).toRgb();
-        return i[`--r-color-${a}-${d}`] = `${u.r} ${u.g} ${u.b}`, i;
-      }, {});
-    }).reduce((s, a) => ({
-      ...s,
-      ...a
-    }), {}), n = {
-      "--r-color-theme": se.theme,
-      ...r,
-      "color-scheme": "dark light",
-      "font-family": "'Roboto', sans-serif",
-      "background-color": "rgb(var(--r-color-surface-9))"
-    };
-    return rt("theme", t.theme), (s, a) => (g(), L(xe(s.is), { style: n }, {
-      default: ce(() => [
-        P(s.$slots, "default")
+    const t = e, r = y(0), n = y(0);
+    ge && new ResizeObserver(() => {
+      const s = window.innerWidth - document.body.clientWidth;
+      s !== 0 && (r.value = s), n.value = s;
+    }).observe(document.body);
+    const a = m(() => n.value === r.value ? "0px" : `${r.value}px`), o = at(t.theme);
+    return (i, s) => (g(), U(Ee(i.is), {
+      style: C([
+        c(o),
+        { paddingRight: c(a) }
+      ]),
+      class: "text-surface-on transition-background-color,border-color,color"
+    }, {
+      default: ue(() => [
+        I(i.$slots, "default")
       ]),
       _: 3
-    }));
+    }, 8, ["style"]));
   }
-}), er = { class: "w-full flex items-center" }, tr = ["value"], rr = /* @__PURE__ */ S("i", { class: "i-tabler-chevron-down pointer-events-none absolute right-2" }, null, -1), nr = {
+}), yr = { class: "w-full flex items-center" }, wr = ["placeholder", "value"], xr = /* @__PURE__ */ $("i", { class: "i-tabler-chevron-down pointer-events-none absolute right-2" }, null, -1), _r = {
   key: 0,
   class: "flex cursor-default items-center justify-between gap-2 rounded p-1 px-2"
-}, ar = ["onPointerdown", "onHover"], sr = { key: 0 }, or = /* @__PURE__ */ S("i", { class: "i-tabler-check h-3 w-3" }, null, -1), ir = [
-  or
-], Fr = /* @__PURE__ */ R({
+}, Mr = ["onPointerdown", "onHover"], $r = { key: 0 }, Sr = /* @__PURE__ */ $("i", { class: "i-tabler-check h-3 w-3" }, null, -1), kr = [
+  Sr
+], un = /* @__PURE__ */ z({
   __name: "Select",
-  props: {
+  props: /* @__PURE__ */ J({
     options: { default() {
       return [];
     } },
-    modelValue: { default: void 0 },
     size: { default: "md" },
-    noneText: { default: "No options" }
-  },
-  emits: ["update:modelValue", "change"],
+    noneText: { default: "No options" },
+    placeholder: { default: "" }
+  }, {
+    modelValue: { default: void 0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ J(["change"], ["update:modelValue"]),
   setup(e, { emit: t }) {
-    const r = e, n = t, s = m({
-      get() {
-        return r.modelValue;
-      },
-      set(x) {
-        n("update:modelValue", x);
-      }
-    }), a = k(null), o = k(null), { focused: i } = xt(a), l = m(() => r.options.map((x) => _(x)).indexOf(s.value)), d = k(-1), u = k(-1);
-    oe(() => {
-      i.value || (u.value = -1);
-    }), oe(() => {
-      s.value = _(r.options[l.value]);
-    }), ae(s, () => {
-      n("change", s.value);
+    const r = e, n = t, a = me(e, "modelValue"), o = y(null), i = y(null), { focused: s } = It(o), l = m(() => r.options.map((x) => S(x)).indexOf(a.value)), d = y(-1), f = y(-1);
+    X(() => {
+      s.value || (f.value = -1);
+    }), X(() => {
+      a.value = S(r.options[l.value]);
+    }), ae(a, () => {
+      n("change", a.value);
     });
-    const f = r.options, p = m(() => f[l.value]), v = m(() => b(p.value));
-    function b(x) {
+    const u = r.options, p = m(() => u[l.value]), b = m(() => M(p.value));
+    function M(x) {
       if (x)
         return typeof x == "string" || typeof x == "symbol" || typeof x == "number" ? x : x.label;
     }
-    function _(x) {
+    function S(x) {
       if (x)
         return typeof x == "string" || typeof x == "symbol" || typeof x == "number" ? x : x.id;
     }
-    be("ArrowDown", (x) => {
-      i.value && (x.preventDefault(), u.value = (u.value + 1) % f.length);
-    }), be("ArrowUp", (x) => {
-      i.value && (x.preventDefault(), u.value = (u.value - 1 + f.length) % f.length);
-    }), be("Enter", () => {
-      i.value && u.value !== -1 && (s.value = _(f[u.value]), i.value = !1);
+    Se("ArrowDown", (x) => {
+      s.value && (x.preventDefault(), f.value = (f.value + 1) % u.length);
+    }), Se("ArrowUp", (x) => {
+      s.value && (x.preventDefault(), f.value = (f.value - 1 + u.length) % u.length);
+    }), Se("Enter", () => {
+      s.value && f.value !== -1 && (a.value = S(u[f.value]), s.value = !1);
     });
     function A(x) {
-      if (!i.value) {
-        i.value = !0;
+      if (!s.value) {
+        s.value = !0;
         return;
       }
-      s.value = _(x), i.value = !1;
+      a.value = S(x), s.value = !1;
     }
-    const O = m(() => ({
+    const se = m(() => ({
       input: "container-default focus:border-primary-7"
-    })), ge = m(() => {
+    })), ie = m(() => {
       switch (r.size) {
         case "sm":
           return {
@@ -1398,45 +1600,45 @@ const Ir = /* @__PURE__ */ R({
           };
       }
     });
-    return (x, j) => (g(), y("div", {
+    return (x, O) => (g(), v("div", {
       ref_key: "wrapperRef",
-      ref: o,
+      ref: i,
       class: "r-select-wrapper relative"
     }, [
-      S("div", er, [
-        S("input", {
+      $("div", yr, [
+        $("input", {
           ref_key: "inputRef",
-          ref: a,
-          class: w([[c(O).input, c(ge).wrapper], "r-select-input cursor-pointer border rounded outline-none"]),
-          placeholder: "Select",
+          ref: o,
+          class: w([[c(se).input, c(ie).wrapper], "r-select-input cursor-pointer border rounded outline-none"]),
+          placeholder: x.placeholder,
           readonly: "",
-          value: c(v),
+          value: c(b),
           "aria-haspopup": "listbox",
           autocomplete: "off",
-          onFocus: j[0] || (j[0] = (Z) => i.value = !0)
-        }, null, 42, tr),
-        rr
+          onFocus: O[0] || (O[0] = (D) => s.value = !0)
+        }, null, 42, wr),
+        xr
       ]),
-      c(i) ? (g(), y("div", {
+      c(s) ? (g(), v("div", {
         key: 0,
-        class: w([c(ge).dropdown, "absolute z-1 mt-2 w-full flex-col overflow-hidden border container-default rounded p-1"])
+        class: w([c(ie).dropdown, "absolute z-1 mt-2 w-full flex-col overflow-hidden border container-default rounded p-1"])
       }, [
-        c(f).length === 0 ? (g(), y("div", nr, q(x.noneText), 1)) : (g(!0), y(X, { key: 1 }, te(c(f), (Z, me) => (g(), y("div", {
-          key: _(Z),
+        c(u).length === 0 ? (g(), v("div", _r, te(x.noneText), 1)) : (g(!0), v(ee, { key: 1 }, de(c(u), (D, k) => (g(), v("div", {
+          key: S(D),
           class: w([{
-            "hover:bg-surface-7": c(u) !== me,
-            "container-filled-primary": c(u) === me
+            "hover:bg-surface-high": c(f) !== k,
+            "container-filled-primary": c(f) === k
           }, "flex cursor-pointer items-center justify-between gap-2 rounded p-1 px-2"]),
-          onPointerdown: (Ye) => A(Z),
-          onHover: (Ye) => d.value = me
+          onPointerdown: (R) => A(D),
+          onHover: (R) => d.value = k
         }, [
-          nt(q(b(Z)) + " ", 1),
-          Z === c(p) ? (g(), y("div", sr, ir)) : $("", !0)
-        ], 42, ar))), 128))
-      ], 2)) : $("", !0)
+          yt(te(M(D)) + " ", 1),
+          D === c(p) ? (g(), v("div", $r, kr)) : T("", !0)
+        ], 42, Mr))), 128))
+      ], 2)) : T("", !0)
     ], 512));
   }
-}), lr = ["value", "placeholder", "type"], ur = /* @__PURE__ */ R({
+}), Ar = ["value", "placeholder", "type"], Cr = /* @__PURE__ */ z({
   __name: "TextField",
   props: {
     modelValue: {},
@@ -1445,54 +1647,70 @@ const Ir = /* @__PURE__ */ R({
     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, s = r, a = m(() => {
+    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"
+          };
+      }
+    }), i = m(() => {
       if (n.error)
-        return "text-error-5 bg-error-10 border-error-5 focus:border-error-5";
+        return "text-error-container bg-surface-base border-error-5 focus:border-error-5";
       switch (n.color) {
         case "secondary":
-          return "text-surface-2 bg-surface-8 border-surface-6 focus:border-secondary-5";
+          return "text-surface-on bg-surface-base border-surface-border focus:border-secondary-5";
         case "tertiary":
-          return "text-surface-2 bg-surface-8 border-surface-6 focus:border-tertiary-5";
+          return "text-surface-on bg-surface-base border-surface-border focus:border-tertiary-5";
         case "error":
-          return "text-surface-2 bg-surface-8 border-surface-6 focus:border-error-5";
+          return "text-surface-on bg-surface-base border-surface-border focus:border-error-5";
         case "primary":
         default:
-          return "text-surface-2 bg-surface-8 border-surface-6 focus:border-primary-5";
+          return "text-surface-on bg-surface-base border-surface-border focus:border-primary-5";
       }
-    }), o = m(() => n.disabled ? "pointer-events-none filter grayscale opacity-60" : ""), i = fe(n), l = k(null);
-    function d(u) {
-      var f;
-      s("update:modelValue", ((f = u.target) == null ? void 0 : f.value) ?? ""), s("input", u);
+    }), s = m(() => n.disabled ? "pointer-events-none filter grayscale opacity-60" : ""), l = xe(n), d = y(null);
+    function f(u) {
+      var p;
+      a("update:modelValue", ((p = u.target) == null ? void 0 : p.value) ?? ""), a("input", u);
     }
     return t({
-      el: l
-    }), (u, f) => (g(), y("input", {
+      el: d
+    }), (u, p) => (g(), v("input", {
       ref_key: "input",
-      ref: l,
+      ref: d,
       value: u.modelValue,
-      class: w(["bg-back-2 border px-2 py-1 outline-none", [c(a), c(o), c(i).class]]),
-      style: C([c(i).style]),
+      class: w(["bg-back-2 border px-2 py-1 outline-none transition-background-color,border-color,color", [c(i), c(s), c(l).class, c(o).base]]),
+      style: C([c(l).style]),
       placeholder: u.placeholder,
       type: n.password ? "password" : "text",
-      onChange: f[0] || (f[0] = (p) => u.$emit("change", p)),
-      onInput: d,
-      onClick: f[1] || (f[1] = (p) => u.$emit("click", p)),
-      onPointerdown: f[2] || (f[2] = (p) => u.$emit("pointerdown", p)),
-      onPointerup: f[3] || (f[3] = (p) => u.$emit("pointerup", p))
-    }, null, 46, lr));
+      onChange: p[0] || (p[0] = (b) => u.$emit("change", b)),
+      onInput: f,
+      onClick: p[1] || (p[1] = (b) => u.$emit("click", b)),
+      onPointerdown: p[2] || (p[2] = (b) => u.$emit("pointerdown", b)),
+      onPointerup: p[3] || (p[3] = (b) => u.$emit("pointerup", b))
+    }, null, 46, Ar));
   }
-}), cr = {
+}), Tr = {
   key: 0,
   class: "i-tabler-loader-2 h-5 w-5 shrink-0 animate-spin"
-}, dr = { key: 1 }, fr = { class: "grow-1" }, hr = {
+}, zr = { key: 1 }, Rr = { class: "grow-1" }, Er = {
   key: 1,
-  class: "text-sm text-surface-4"
-}, pr = /* @__PURE__ */ S("i", { class: "i-tabler-x" }, null, -1), gr = /* @__PURE__ */ R({
+  class: "text-sm text-surface-5"
+}, Nr = /* @__PURE__ */ $("i", { class: "i-tabler-x" }, null, -1), Pr = /* @__PURE__ */ z({
   __name: "Notification",
   props: {
     title: {},
@@ -1514,7 +1732,7 @@ const Ir = /* @__PURE__ */ R({
         case "error":
           return "bg-error-5";
         default:
-          return "bg-primary-5";
+          return "bg-primary-container";
       }
     }), n = m(() => {
       switch (t.color) {
@@ -1528,72 +1746,80 @@ const Ir = /* @__PURE__ */ R({
           return "text-primary-5";
       }
     });
-    return (s, a) => {
-      const o = ct;
-      return g(), y("div", {
+    return (a, o) => {
+      const i = St;
+      return g(), v("div", {
         class: w(["relative max-w-100 min-h-16 min-w-80 w-full flex items-center gap-2 container-default rounded p-3", [
-          { "border-0": !s.withBorder }
+          { "border-0": !a.withBorder }
         ]])
       }, [
-        s.icon ? (g(), y("div", {
+        a.icon ? (g(), v("div", {
           key: 0,
           class: w(["leading-0", c(n)])
         }, [
-          s.loading ? (g(), y("i", cr)) : (g(), y("i", {
+          a.loading ? (g(), v("i", Tr)) : (g(), v("i", {
             key: 1,
-            class: w(["h-5 w-5 shrink-0", s.icon])
+            class: w(["h-5 w-5 shrink-0", a.icon])
           }, null, 2))
-        ], 2)) : (g(), y("div", dr, [
-          S("div", {
+        ], 2)) : (g(), v("div", zr, [
+          $("div", {
             class: w(["absolute left-[0.25rem] top-[0.25rem] h-[calc(100%-0.5rem)] w-1 rounded-full", [{
-              "animate-pulse": s.loading
+              "animate-pulse": a.loading
             }, c(r)]])
           }, null, 2)
         ])),
-        S("div", fr, [
-          s.title ? (g(), y("div", {
+        $("div", Rr, [
+          a.title ? (g(), v("div", {
             key: 0,
             class: w([c(n), "text-base"])
-          }, q(s.title), 3)) : $("", !0),
-          s.message ? (g(), y("div", hr, q(s.message), 1)) : $("", !0)
+          }, te(a.title), 3)) : T("", !0),
+          a.message ? (g(), v("div", Er, te(a.message), 1)) : T("", !0)
         ]),
-        s.closeable ? (g(), L(o, {
+        a.closeable ? (g(), U(i, {
           key: 2,
           icon: "",
           variant: "transparent",
-          class: "text-white hover:text-white",
-          onClick: a[0] || (a[0] = (i) => s.$emit("close"))
+          class: "text-surface-on hover:text-surface-on",
+          onClick: o[0] || (o[0] = (s) => a.$emit("close"))
         }, {
-          default: ce(() => [
-            pr
+          default: ue(() => [
+            Nr
           ]),
           _: 1
-        })) : $("", !0)
+        })) : T("", !0)
       ], 2);
     };
   }
-}), Dr = /* @__PURE__ */ R({
-  __name: "Modal",
+}), Hr = /* @__PURE__ */ z({
+  __name: "ThemeProvider",
   props: {
-    modelValue: { type: Boolean, default: !1 },
+    theme: {}
+  },
+  setup(e) {
+    const r = at(e.theme, !1);
+    return (n, a) => (g(), v("div", {
+      style: C([c(r)])
+    }, [
+      I(n.$slots, "default")
+    ], 4));
+  }
+}), dn = /* @__PURE__ */ z({
+  __name: "Modal",
+  props: /* @__PURE__ */ J({
     persistent: { type: Boolean, default: !1 },
     blur: { type: [String, Boolean] }
-  },
+  }, {
+    modelValue: { type: Boolean },
+    modelModifiers: {}
+  }),
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const r = e, n = t, s = m({
-      get() {
-        return r.modelValue;
-      },
-      set(l) {
-        n("update:modelValue", l);
-      }
-    }), a = k(null);
-    function o(l) {
-      r.persistent || l.target === a.value && (s.value = !1);
+  setup(e) {
+    const t = e, r = me(e, "modelValue"), n = y(null);
+    function a(s) {
+      t.persistent || s.target === n.value && (r.value = !1);
     }
-    const i = m(() => {
-      switch (r.blur) {
+    const o = m(() => {
+      switch (t.blur) {
         case "sm":
           return "backdrop-blur-sm";
         case "md":
@@ -1605,140 +1831,150 @@ const Ir = /* @__PURE__ */ R({
           return "";
       }
     });
-    return oe(() => {
-      r.modelValue ? (document.body.style.overflow = "hidden", document.body.style.marginRight = "15px") : setTimeout(() => {
-        document.body.style.overflow = "", document.body.style.marginRight = "";
+    X(() => {
+      r.value ? document.body.style.overflow = "hidden" : setTimeout(() => {
+        document.querySelector(".modal-wrapper.op100") || (document.body.style.overflow = "", document.body.style.marginRight = "");
       }, 300);
-    }), (l, d) => (g(), L(at, { to: "body" }, [
-      S("div", {
-        ref_key: "wrapperRef",
-        ref: a,
-        class: w(["fixed left-0 top-0 z-100 h-full w-full flex items-end justify-center bg-surface-10/50 transition-all duration-300 md:items-center", [i.value, {
-          "opacity-0 pointer-events-none": !s.value,
-          "opacity-100": s.value
-        }]]),
-        onClick: o
-      }, [
-        st(ot, {
-          "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: ce(() => [
-            s.value ? P(l.$slots, "default", { key: 0 }) : $("", !0)
+    });
+    const i = vr();
+    return (s, l) => {
+      const d = Hr;
+      return g(), U(wt, { to: "body" }, [
+        We(d, { theme: c(i) }, {
+          default: ue(() => [
+            $("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, {
+                "op0 pointer-events-none": !r.value,
+                op100: r.value
+              }]]),
+              onClick: a
+            }, [
+              We(xt, {
+                "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: ue(() => [
+                  r.value ? I(s.$slots, "default", { key: 0 }) : T("", !0)
+                ]),
+                _: 3
+              })
+            ], 2)
           ]),
           _: 3
-        })
-      ], 2)
-    ]));
+        }, 8, ["theme"])
+      ]);
+    };
   }
-}), je = /* @__PURE__ */ new Set(), z = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), we = /* @__PURE__ */ new WeakMap(), mr = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), le = /* @__PURE__ */ new WeakMap(), ee = /* @__PURE__ */ new WeakSet();
-let I, Se = 0, Ae = 0;
-const V = "__aa_tgt", re = "__aa_del", ue = "__aa_new", br = (e) => {
-  const t = xr(e);
-  t && t.forEach((r) => kr(r));
-}, vr = (e) => {
+}), st = /* @__PURE__ */ new Set(), N = /* @__PURE__ */ new WeakMap(), re = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), ze = /* @__PURE__ */ new WeakMap(), Ir = /* @__PURE__ */ new WeakMap(), ne = /* @__PURE__ */ new WeakMap(), ve = /* @__PURE__ */ new WeakMap(), ce = /* @__PURE__ */ new WeakSet();
+let G, Ie = 0, Oe = 0;
+const L = "__aa_tgt", fe = "__aa_del", ye = "__aa_new", Or = (e) => {
+  const t = Lr(e);
+  t && t.forEach((r) => Dr(r));
+}, Br = (e) => {
   e.forEach((t) => {
-    t.target === I && wr(), z.has(t.target) && W(t.target);
+    t.target === G && Fr(), N.has(t.target) && Q(t.target);
   });
 };
-function yr(e) {
-  const t = we.get(e);
+function Vr(e) {
+  const t = ze.get(e);
   t == null || t.disconnect();
-  let r = z.get(e), n = 0;
-  const s = 5;
-  r || (r = Q(e), z.set(e, r));
-  const { offsetWidth: a, offsetHeight: o } = I, l = [
-    r.top - s,
-    a - (r.left + s + r.width),
-    o - (r.top + s + r.height),
-    r.left - s
-  ].map((u) => `${-1 * Math.floor(u)}px`).join(" "), d = new IntersectionObserver(() => {
-    ++n > 1 && W(e);
+  let r = N.get(e), n = 0;
+  const a = 5;
+  r || (r = oe(e), N.set(e, r));
+  const { offsetWidth: o, offsetHeight: i } = G, l = [
+    r.top - a,
+    o - (r.left + a + r.width),
+    i - (r.top + a + r.height),
+    r.left - a
+  ].map((f) => `${-1 * Math.floor(f)}px`).join(" "), d = new IntersectionObserver(() => {
+    ++n > 1 && Q(e);
   }, {
-    root: I,
+    root: G,
     threshold: 1,
     rootMargin: l
   });
-  d.observe(e), we.set(e, d);
+  d.observe(e), ze.set(e, d);
 }
-function W(e) {
-  clearTimeout(le.get(e));
-  const t = pe(e), r = ne(t) ? 500 : t.duration;
-  le.set(e, setTimeout(async () => {
-    const n = D.get(e);
+function Q(e) {
+  clearTimeout(ve.get(e));
+  const t = Me(e), r = he(t) ? 500 : t.duration;
+  ve.set(e, setTimeout(async () => {
+    const n = K.get(e);
     try {
-      await (n == null ? void 0 : n.finished), z.set(e, Q(e)), yr(e);
+      await (n == null ? void 0 : n.finished), N.set(e, oe(e)), Vr(e);
     } catch {
     }
   }, r));
 }
-function wr() {
-  clearTimeout(le.get(I)), le.set(I, setTimeout(() => {
-    je.forEach((e) => Ue(e, (t) => Ge(() => W(t))));
+function Fr() {
+  clearTimeout(ve.get(G)), ve.set(G, setTimeout(() => {
+    st.forEach((e) => ut(e, (t) => it(() => Q(t))));
   }, 100));
 }
-function _r(e) {
+function Wr(e) {
   setTimeout(() => {
-    mr.set(e, setInterval(() => Ge(W.bind(null, e)), 2e3));
+    Ir.set(e, setInterval(() => it(Q.bind(null, e)), 2e3));
   }, Math.round(2e3 * Math.random()));
 }
-function Ge(e) {
+function it(e) {
   typeof requestIdleCallback == "function" ? requestIdleCallback(() => e()) : requestAnimationFrame(() => e());
 }
-let _e, G;
-typeof window < "u" && (I = document.documentElement, _e = new MutationObserver(br), G = new ResizeObserver(vr), window.addEventListener("scroll", () => {
-  Ae = window.scrollY, Se = window.scrollX;
-}), G.observe(I));
-function xr(e) {
-  return e.reduce((n, s) => [
+let Re, Z;
+typeof window < "u" && (G = document.documentElement, Re = new MutationObserver(Or), Z = new ResizeObserver(Br), window.addEventListener("scroll", () => {
+  Oe = window.scrollY, Ie = window.scrollX;
+}), Z.observe(G));
+function Lr(e) {
+  return e.reduce((n, a) => [
     ...n,
-    ...Array.from(s.addedNodes),
-    ...Array.from(s.removedNodes)
-  ], []).every((n) => n.nodeName === "#comment") ? !1 : e.reduce((n, s) => {
+    ...Array.from(a.addedNodes),
+    ...Array.from(a.removedNodes)
+  ], []).every((n) => n.nodeName === "#comment") ? !1 : e.reduce((n, a) => {
     if (n === !1)
       return !1;
-    if (s.target instanceof Element) {
-      if (ve(s.target), !n.has(s.target)) {
-        n.add(s.target);
-        for (let a = 0; a < s.target.children.length; a++) {
-          const o = s.target.children.item(a);
-          if (o) {
-            if (re in o)
+    if (a.target instanceof Element) {
+      if (ke(a.target), !n.has(a.target)) {
+        n.add(a.target);
+        for (let o = 0; o < a.target.children.length; o++) {
+          const i = a.target.children.item(o);
+          if (i) {
+            if (fe in i)
               return !1;
-            ve(s.target, o), n.add(o);
+            ke(a.target, i), n.add(i);
           }
         }
       }
-      if (s.removedNodes.length)
-        for (let a = 0; a < s.removedNodes.length; a++) {
-          const o = s.removedNodes[a];
-          if (re in o)
+      if (a.removedNodes.length)
+        for (let o = 0; o < a.removedNodes.length; o++) {
+          const i = a.removedNodes[o];
+          if (fe in i)
             return !1;
-          o instanceof Element && (n.add(o), ve(s.target, o), Y.set(o, [
-            s.previousSibling,
-            s.nextSibling
+          i instanceof Element && (n.add(i), ke(a.target, i), re.set(i, [
+            a.previousSibling,
+            a.nextSibling
           ]));
         }
     }
     return n;
   }, /* @__PURE__ */ new Set());
 }
-function ve(e, t) {
-  !t && !(V in e) ? Object.defineProperty(e, V, { value: e }) : t && !(V in t) && Object.defineProperty(t, V, { value: e });
+function ke(e, t) {
+  !t && !(L in e) ? Object.defineProperty(e, L, { value: e }) : t && !(L in t) && Object.defineProperty(t, L, { value: e });
 }
-function kr(e) {
+function Dr(e) {
   var t;
-  const r = e.isConnected, n = z.has(e);
-  r && Y.has(e) && Y.delete(e), D.has(e) && ((t = D.get(e)) === null || t === void 0 || t.cancel()), ue in e ? He(e) : n && r ? Sr(e) : n && !r ? Ar(e) : He(e);
+  const r = e.isConnected, n = N.has(e);
+  r && re.has(e) && re.delete(e), K.has(e) && ((t = K.get(e)) === null || t === void 0 || t.cancel()), ye in e ? Ye(e) : n && r ? Gr(e) : n && !r ? Ur(e) : Ye(e);
 }
-function H(e) {
+function F(e) {
   return Number(e.replace(/[^0-9.\-]/g, ""));
 }
-function Mr(e) {
+function jr(e) {
   let t = e.parentElement;
   for (; t; ) {
     if (t.scrollLeft || t.scrollTop)
@@ -1747,8 +1983,8 @@ function Mr(e) {
   }
   return { x: 0, y: 0 };
 }
-function Q(e) {
-  const t = e.getBoundingClientRect(), { x: r, y: n } = Mr(e);
+function oe(e) {
+  const t = e.getBoundingClientRect(), { x: r, y: n } = jr(e);
   return {
     top: t.top + n,
     left: t.left + r,
@@ -1756,69 +1992,69 @@ function Q(e) {
     height: t.height
   };
 }
-function Xe(e, t, r) {
-  let n = t.width, s = t.height, a = r.width, o = r.height;
-  const i = getComputedStyle(e);
-  if (i.getPropertyValue("box-sizing") === "content-box") {
-    const d = H(i.paddingTop) + H(i.paddingBottom) + H(i.borderTopWidth) + H(i.borderBottomWidth), u = H(i.paddingLeft) + H(i.paddingRight) + H(i.borderRightWidth) + H(i.borderLeftWidth);
-    n -= u, a -= u, s -= d, o -= d;
+function lt(e, t, r) {
+  let n = t.width, a = t.height, o = r.width, i = r.height;
+  const s = getComputedStyle(e);
+  if (s.getPropertyValue("box-sizing") === "content-box") {
+    const d = F(s.paddingTop) + F(s.paddingBottom) + F(s.borderTopWidth) + F(s.borderBottomWidth), f = F(s.paddingLeft) + F(s.paddingRight) + F(s.borderRightWidth) + F(s.borderLeftWidth);
+    n -= f, o -= f, a -= d, i -= d;
   }
-  return [n, a, s, o].map(Math.round);
+  return [n, o, a, i].map(Math.round);
 }
-function pe(e) {
-  return V in e && K.has(e[V]) ? K.get(e[V]) : { duration: 250, easing: "ease-in-out" };
+function Me(e) {
+  return L in e && ne.has(e[L]) ? ne.get(e[L]) : { duration: 250, easing: "ease-in-out" };
 }
-function qe(e) {
-  if (V in e)
-    return e[V];
+function ct(e) {
+  if (L in e)
+    return e[L];
 }
-function $e(e) {
-  const t = qe(e);
-  return t ? ee.has(t) : !1;
+function Be(e) {
+  const t = ct(e);
+  return t ? ce.has(t) : !1;
 }
-function Ue(e, ...t) {
-  t.forEach((r) => r(e, K.has(e)));
+function ut(e, ...t) {
+  t.forEach((r) => r(e, ne.has(e)));
   for (let r = 0; r < e.children.length; r++) {
     const n = e.children.item(r);
-    n && t.forEach((s) => s(n, K.has(n)));
+    n && t.forEach((a) => a(n, ne.has(n)));
   }
 }
-function Ce(e) {
+function Ve(e) {
   return Array.isArray(e) ? e : [e];
 }
-function ne(e) {
+function he(e) {
   return typeof e == "function";
 }
-function Sr(e) {
-  const t = z.get(e), r = Q(e);
-  if (!$e(e))
-    return z.set(e, r);
+function Gr(e) {
+  const t = N.get(e), r = oe(e);
+  if (!Be(e))
+    return N.set(e, r);
   let n;
   if (!t)
     return;
-  const s = pe(e);
-  if (typeof s != "function") {
-    const a = t.left - r.left, o = t.top - r.top, [i, l, d, u] = Xe(e, t, r), f = {
-      transform: `translate(${a}px, ${o}px)`
+  const a = Me(e);
+  if (typeof a != "function") {
+    const o = t.left - r.left, i = t.top - r.top, [s, l, d, f] = lt(e, t, r), u = {
+      transform: `translate(${o}px, ${i}px)`
     }, p = {
       transform: "translate(0, 0)"
     };
-    i !== l && (f.width = `${i}px`, p.width = `${l}px`), d !== u && (f.height = `${d}px`, p.height = `${u}px`), n = e.animate([f, p], {
-      duration: s.duration,
-      easing: s.easing
+    s !== l && (u.width = `${s}px`, p.width = `${l}px`), d !== f && (u.height = `${d}px`, p.height = `${f}px`), n = e.animate([u, p], {
+      duration: a.duration,
+      easing: a.easing
     });
   } else {
-    const [a] = Ce(s(e, "remain", t, r));
-    n = new Animation(a), n.play();
+    const [o] = Ve(a(e, "remain", t, r));
+    n = new Animation(o), n.play();
   }
-  D.set(e, n), z.set(e, r), n.addEventListener("finish", W.bind(null, e));
-}
-function He(e) {
-  ue in e && delete e[ue];
-  const t = Q(e);
-  z.set(e, t);
-  const r = pe(e);
-  if (!$e(e))
+  K.set(e, n), N.set(e, r), n.addEventListener("finish", Q.bind(null, e));
+}
+function Ye(e) {
+  ye in e && delete e[ye];
+  const t = oe(e);
+  N.set(e, t);
+  const r = Me(e);
+  if (!Be(e))
     return;
   let n;
   if (typeof r != "function")
@@ -1831,34 +2067,34 @@ function He(e) {
       easing: "ease-in"
     });
   else {
-    const [s] = Ce(r(e, "add", t));
-    n = new Animation(s), n.play();
+    const [a] = Ve(r(e, "add", t));
+    n = new Animation(a), n.play();
   }
-  D.set(e, n), n.addEventListener("finish", W.bind(null, e));
+  K.set(e, n), n.addEventListener("finish", Q.bind(null, e));
 }
-function Be(e, t) {
+function Ke(e, t) {
   var r;
-  e.remove(), z.delete(e), Y.delete(e), D.delete(e), (r = we.get(e)) === null || r === void 0 || r.disconnect(), setTimeout(() => {
-    if (re in e && delete e[re], Object.defineProperty(e, ue, { value: !0, configurable: !0 }), t && e instanceof HTMLElement)
+  e.remove(), N.delete(e), re.delete(e), K.delete(e), (r = ze.get(e)) === null || r === void 0 || r.disconnect(), setTimeout(() => {
+    if (fe in e && delete e[fe], Object.defineProperty(e, ye, { value: !0, configurable: !0 }), t && e instanceof HTMLElement)
       for (const n in t)
         e.style[n] = "";
   }, 0);
 }
-function Ar(e) {
+function Ur(e) {
   var t;
-  if (!Y.has(e) || !z.has(e))
+  if (!re.has(e) || !N.has(e))
     return;
-  const [r, n] = Y.get(e);
-  Object.defineProperty(e, re, { value: !0, configurable: !0 });
-  const s = window.scrollX, a = window.scrollY;
-  if (n && n.parentNode && n.parentNode instanceof Element ? n.parentNode.insertBefore(e, n) : r && r.parentNode ? r.parentNode.appendChild(e) : (t = qe(e)) === null || t === void 0 || t.appendChild(e), !$e(e))
-    return Be(e);
-  const [o, i, l, d] = Cr(e), u = pe(e), f = z.get(e);
-  (s !== Se || a !== Ae) && $r(e, s, a, u);
-  let p, v = {
+  const [r, n] = re.get(e);
+  Object.defineProperty(e, fe, { 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 = ct(e)) === null || t === void 0 || t.appendChild(e), !Be(e))
+    return Ke(e);
+  const [i, s, l, d] = qr(e), f = Me(e), u = N.get(e);
+  (a !== Ie || o !== Oe) && Xr(e, a, o, f);
+  let p, b = {
     position: "absolute",
-    top: `${o}px`,
-    left: `${i}px`,
+    top: `${i}px`,
+    left: `${s}px`,
     width: `${l}px`,
     height: `${d}px`,
     margin: "0",
@@ -1866,8 +2102,8 @@ function Ar(e) {
     transformOrigin: "center",
     zIndex: "100"
   };
-  if (!ne(u))
-    Object.assign(e.style, v), p = e.animate([
+  if (!he(f))
+    Object.assign(e.style, b), p = e.animate([
       {
         transform: "scale(1)",
         opacity: 1
@@ -1876,84 +2112,84 @@ function Ar(e) {
         transform: "scale(.98)",
         opacity: 0
       }
-    ], { duration: u.duration, easing: "ease-out" });
+    ], { duration: f.duration, easing: "ease-out" });
   else {
-    const [b, _] = Ce(u(e, "remove", f));
-    (_ == null ? void 0 : _.styleReset) !== !1 && (v = (_ == null ? void 0 : _.styleReset) || v, Object.assign(e.style, v)), p = new Animation(b), p.play();
+    const [M, S] = Ve(f(e, "remove", u));
+    (S == null ? void 0 : S.styleReset) !== !1 && (b = (S == null ? void 0 : S.styleReset) || b, Object.assign(e.style, b)), p = new Animation(M), p.play();
   }
-  D.set(e, p), p.addEventListener("finish", Be.bind(null, e, v));
+  K.set(e, p), p.addEventListener("finish", Ke.bind(null, e, b));
 }
-function $r(e, t, r, n) {
-  const s = Se - t, a = Ae - r, o = document.documentElement.style.scrollBehavior;
-  if (getComputedStyle(I).scrollBehavior === "smooth" && (document.documentElement.style.scrollBehavior = "auto"), window.scrollTo(window.scrollX + s, window.scrollY + a), !e.parentElement)
+function Xr(e, t, r, n) {
+  const a = Ie - t, o = Oe - r, i = document.documentElement.style.scrollBehavior;
+  if (getComputedStyle(G).scrollBehavior === "smooth" && (document.documentElement.style.scrollBehavior = "auto"), window.scrollTo(window.scrollX + a, window.scrollY + o), !e.parentElement)
     return;
   const l = e.parentElement;
-  let d = l.clientHeight, u = l.clientWidth;
-  const f = performance.now();
+  let d = l.clientHeight, f = l.clientWidth;
+  const u = performance.now();
   function p() {
     requestAnimationFrame(() => {
-      if (!ne(n)) {
-        const v = d - l.clientHeight, b = u - l.clientWidth;
-        f + n.duration > performance.now() ? (window.scrollTo({
-          left: window.scrollX - b,
-          top: window.scrollY - v
-        }), d = l.clientHeight, u = l.clientWidth, p()) : document.documentElement.style.scrollBehavior = o;
+      if (!he(n)) {
+        const b = d - l.clientHeight, M = f - l.clientWidth;
+        u + n.duration > performance.now() ? (window.scrollTo({
+          left: window.scrollX - M,
+          top: window.scrollY - b
+        }), d = l.clientHeight, f = l.clientWidth, p()) : document.documentElement.style.scrollBehavior = i;
       }
     });
   }
   p();
 }
-function Cr(e) {
-  const t = z.get(e), [r, , n] = Xe(e, t, Q(e));
-  let s = e.parentElement;
-  for (; s && (getComputedStyle(s).position === "static" || s instanceof HTMLBodyElement); )
-    s = s.parentElement;
-  s || (s = document.body);
-  const a = getComputedStyle(s), o = z.get(s) || Q(s), i = Math.round(t.top - o.top) - H(a.borderTopWidth), l = Math.round(t.left - o.left) - H(a.borderLeftWidth);
-  return [i, l, r, n];
-}
-function zr(e, t = {}) {
-  return _e && G && (window.matchMedia("(prefers-reduced-motion: reduce)").matches && !ne(t) && !t.disrespectUserMotionPreference || (ee.add(e), getComputedStyle(e).position === "static" && Object.assign(e.style, { position: "relative" }), Ue(e, W, _r, (s) => G == null ? void 0 : G.observe(s)), ne(t) ? K.set(e, t) : K.set(e, { duration: 250, easing: "ease-in-out", ...t }), _e.observe(e, { childList: !0 }), je.add(e))), Object.freeze({
+function qr(e) {
+  const t = N.get(e), [r, , n] = lt(e, t, oe(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), i = N.get(a) || oe(a), s = Math.round(t.top - i.top) - F(o.borderTopWidth), l = Math.round(t.left - i.left) - F(o.borderLeftWidth);
+  return [s, l, r, n];
+}
+function Yr(e, t = {}) {
+  return Re && Z && (window.matchMedia("(prefers-reduced-motion: reduce)").matches && !he(t) && !t.disrespectUserMotionPreference || (ce.add(e), getComputedStyle(e).position === "static" && Object.assign(e.style, { position: "relative" }), ut(e, Q, Wr, (a) => Z == null ? void 0 : Z.observe(a)), he(t) ? ne.set(e, t) : ne.set(e, { duration: 250, easing: "ease-in-out", ...t }), Re.observe(e, { childList: !0 }), st.add(e))), Object.freeze({
     parent: e,
     enable: () => {
-      ee.add(e);
+      ce.add(e);
     },
     disable: () => {
-      ee.delete(e);
+      ce.delete(e);
     },
-    isEnabled: () => ee.has(e)
+    isEnabled: () => ce.has(e)
   });
 }
-const Rr = {
+const Kr = {
   mounted: (e, t) => {
-    zr(e, t.value || {});
+    Yr(e, t.value || {});
   },
   // ignore ssr see #96:
   getSSRProps: () => ({})
-}, Tr = { class: "absolute z-20 flex flex-col gap-2 p-2" }, Lr = /* @__PURE__ */ R({
+}, Qr = { class: "fixed z-20 flex flex-col gap-2 p-2" }, fn = /* @__PURE__ */ z({
   __name: "NotificationSystem",
   setup(e) {
-    const t = Jt();
+    const t = pr();
     return (r, n) => {
-      const s = gr;
-      return Ie((g(), y("div", Tr, [
-        (g(!0), y(X, null, te(c(t), (a) => (g(), L(s, {
-          key: a.hash,
-          "with-border": "",
+      const a = Pr;
+      return Je((g(), v("div", Qr, [
+        (g(!0), v(ee, null, de(c(t), (o) => (g(), U(a, {
+          key: o.hash,
           closeable: "",
-          title: a.title,
-          message: a.message,
-          icon: a.icon,
-          loading: a.loading,
-          color: a.color,
-          onClose: (o) => c(t).splice(c(t).indexOf(a), 1)
+          "with-border": "",
+          title: o.title,
+          message: o.message,
+          icon: o.icon,
+          loading: o.loading,
+          color: o.color,
+          onClose: (i) => c(t).splice(c(t).indexOf(o), 1)
         }, null, 8, ["title", "message", "icon", "loading", "color", "onClose"]))), 128))
       ])), [
-        [c(Rr)]
+        [c(Kr)]
       ]);
     };
   }
-}), Er = { class: "flex gap-2" }, Wr = /* @__PURE__ */ R({
+}), Zr = { class: "flex gap-2" }, hn = /* @__PURE__ */ z({
   __name: "PinInput",
   props: {
     modelValue: {},
@@ -1962,36 +2198,36 @@ const Rr = {
     password: { type: Boolean }
   },
   setup(e) {
-    const t = e, r = k([]);
-    function n(a) {
-      a.preventDefault(), a.stopPropagation();
-      const o = r.value.findIndex((l) => l.el === a.target), i = a.target.value ?? "";
-      a.target.value = "", Array.from(i).forEach((l, d) => {
-        o + d >= r.value.length || (r.value[o + d].el.value = l, o + d + 1 < r.value.length ? (r.value[o + d + 1].el.focus(), r.value[o + d + 1].el.select()) : r.value[o + d].el.blur());
+    const t = e, r = y([]);
+    function n(o) {
+      o.preventDefault(), o.stopPropagation();
+      const i = r.value.findIndex((l) => l.el === o.target), s = o.target.value ?? "";
+      o.target.value = "", Array.from(s).forEach((l, d) => {
+        i + d >= r.value.length || (r.value[i + d].el.value = l, i + d + 1 < r.value.length ? (r.value[i + d + 1].el.focus(), r.value[i + d + 1].el.select()) : r.value[i + d].el.blur());
       });
     }
-    function s(a) {
-      a.preventDefault(), a.stopPropagation();
-      const o = a.target.value !== "";
-      a.target.value = "";
-      const i = r.value.findIndex((l) => l.el === a.target);
-      i !== 0 && (r.value[i - 1].el.focus(), r.value[i - 1].el.select(), o || (r.value[i - 1].el.value = ""));
+    function a(o) {
+      o.preventDefault(), o.stopPropagation();
+      const i = o.target.value !== "";
+      o.target.value = "";
+      const s = r.value.findIndex((l) => l.el === o.target);
+      s !== 0 && (r.value[s - 1].el.focus(), r.value[s - 1].el.select(), i || (r.value[s - 1].el.value = ""));
     }
-    return (a, o) => (g(), y("div", Er, [
-      (g(!0), y(X, null, te(t.length, (i) => (g(), L(c(ur), {
+    return (o, i) => (g(), v("div", Zr, [
+      (g(!0), v(ee, null, de(t.length, (s) => (g(), U(c(Cr), {
         ref_for: !0,
         ref_key: "inputs",
         ref: r,
-        key: i,
+        key: s,
         class: "h-8 w-8 text-center",
         password: t.password,
-        onPointerup: o[0] || (o[0] = (l) => l.target.select()),
-        onInput: Oe(n, ["stop", "prevent"]),
-        onKeydown: it(s, ["backspace"])
+        onPointerup: i[0] || (i[0] = (l) => l.target.select()),
+        onInput: Ze(n, ["stop", "prevent"]),
+        onKeydown: _t(a, ["backspace"])
       }, null, 8, ["password"]))), 128))
     ]));
   }
-}), jr = /* @__PURE__ */ R({
+}), pn = /* @__PURE__ */ z({
   __name: "Progress",
   props: {
     value: { default: 0 },
@@ -2015,7 +2251,7 @@ const Rr = {
     }), n = m(() => {
       switch (t.color) {
         case "primary":
-          return "bg-primary-7";
+          return "bg-primary-container";
         case "secondary":
           return "bg-secondary-7";
         case "tertiary":
@@ -2023,25 +2259,24 @@ const Rr = {
         case "error":
           return "bg-error-7";
       }
-    }), s = fe(t);
-    return (a, o) => (g(), y("div", {
-      class: w(["relative w-full self-center overflow-hidden bg-surface-7", [c(r), c(s).class]]),
-      style: C([c(s).style])
+    }), a = xe(t);
+    return (o, i) => (g(), v("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: C([c(a).style])
     }, [
-      a.loading ? (g(), y("div", {
+      o.loading ? (g(), v("div", {
         key: 1,
         class: w(["loading-progress h-full", [c(n)]])
-      }, null, 2)) : (g(), y("div", {
+      }, null, 2)) : (g(), v("div", {
         key: 0,
         class: w(["h-full", [c(n)]]),
         style: C([{
-          width: `${(a.value - a.min) / (a.max - a.min) * 100}%`
+          width: `${(o.value - o.min) / (o.max - o.min) * 100}%`
         }])
       }, null, 6))
     ], 6));
   }
-});
-const Nr = { class: "relative" }, Gr = /* @__PURE__ */ R({
+}), Jr = { class: "relative" }, mn = /* @__PURE__ */ z({
   __name: "Indicator",
   props: {
     color: { default: "primary" },
@@ -2061,7 +2296,7 @@ const Nr = { class: "relative" }, Gr = /* @__PURE__ */ R({
         default:
           return typeof t.size == "number" || !Number.isNaN(Number(t.size)) ? `w-${t.size} h-${t.size}` : t.size;
       }
-    }), n = lt(), s = m(() => {
+    }), n = Mt(), a = m(() => {
       if (!n.label)
         return "";
       switch (t.size) {
@@ -2072,7 +2307,7 @@ const Nr = { class: "relative" }, Gr = /* @__PURE__ */ R({
         case "lg":
           return "text-lg children:px-2.5";
       }
-    }), a = m(() => {
+    }), o = m(() => {
       switch (t.position) {
         case "top-left":
           return "top-0 left-0 -translate-x-1/2 -translate-y-1/2";
@@ -2083,69 +2318,64 @@ const Nr = { class: "relative" }, Gr = /* @__PURE__ */ R({
         case "bottom-right":
           return "bottom-0 right-0 translate-x-1/2 translate-y-1/2";
       }
-    }), o = m(() => {
+    }), i = m(() => {
       switch (t.color) {
         case "primary":
-          return "bg-primary-7";
+          return "bg-primary-container text-primary-on";
         case "secondary":
-          return "bg-secondary-7";
+          return "bg-secondary-container text-secondary-on";
         case "tertiary":
-          return "bg-tertiary-7";
+          return "bg-tertiary-container text-tertiary-on";
         case "error":
-          return "bg-error-7";
+          return "bg-error-container text-error-on";
       }
     });
-    return (i, l) => (g(), y("div", Nr, [
-      S("div", {
-        class: w([[c(a), c(s)], "absolute z-1"])
+    return (s, l) => (g(), v("div", Jr, [
+      $("div", {
+        class: w([[c(o), c(a)], "absolute z-1"])
       }, [
-        t.ping ? (g(), y("div", {
+        t.ping ? (g(), v("div", {
           key: 0,
           class: w(["absolute animate-ping rounded-full", [
             {
-              [c(r)]: !i.$slots.label
+              [c(r)]: !s.$slots.label
             },
-            c(o)
+            c(i)
           ]])
         }, [
-          i.$slots.label ? P(i.$slots, "label", { key: 0 }) : $("", !0)
-        ], 2)) : $("", !0),
-        S("div", {
+          s.$slots.label ? I(s.$slots, "label", { key: 0 }) : T("", !0)
+        ], 2)) : T("", !0),
+        $("div", {
           class: w(["top-0 rounded-full", [
             {
-              [c(r)]: !i.$slots.label
+              [c(r)]: !s.$slots.label
             },
-            c(o)
+            c(i)
           ]])
         }, [
-          i.$slots.label ? P(i.$slots, "label", { key: 0 }) : $("", !0)
+          s.$slots.label ? I(s.$slots, "label", { key: 0 }) : T("", !0)
         ], 2)
       ], 2),
-      P(i.$slots, "default")
+      I(s.$slots, "default")
     ]));
   }
-}), Xr = /* @__PURE__ */ R({
+}), gn = /* @__PURE__ */ z({
   __name: "Chip",
-  props: {
+  props: /* @__PURE__ */ J({
     is: { default: "img" },
     src: {},
     size: { default: "md" },
     style: {},
     class: {},
-    modelValue: { type: Boolean },
     rounded: { default: "full" }
-  },
+  }, {
+    modelValue: { type: Boolean, default: void 0 },
+    modelModifiers: {}
+  }),
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const r = e, n = t, s = m({
-      get() {
-        return r.modelValue;
-      },
-      set(u) {
-        n("update:modelValue", u);
-      }
-    }), a = fe(r), o = m(() => {
-      switch (r.size) {
+  setup(e) {
+    const t = e, r = me(e, "modelValue"), n = xe(t), a = m(() => {
+      switch (t.size) {
         case "sm":
           return "px-3 text-sm h-6";
         case "md":
@@ -2153,18 +2383,18 @@ const Nr = { class: "relative" }, Gr = /* @__PURE__ */ R({
         case "lg":
           return "px-8 h-10 text-lg";
       }
-    }), i = m(() => s.value ? "container-filled-primary" : "container-default"), l = m(() => s.value !== void 0), d = m(() => l.value ? "cursor-pointer" : "");
-    return (u, f) => (g(), y("span", {
-      class: w(["inline-flex items-center gap-1", [c(a).class, c(o), c(i), c(d)]]),
-      style: C([c(a).style]),
-      onPointerup: f[0] || (f[0] = (p) => u.$emit("update:modelValue", !u.modelValue))
+    }), o = m(() => r.value ? "container-filled-primary" : "container-default"), i = m(() => r.value !== void 0), s = m(() => i.value ? "cursor-pointer" : "");
+    return (l, d) => (g(), v("span", {
+      class: w(["inline-flex items-center gap-1", [c(n).class, c(a), c(o), c(s)]]),
+      style: C([c(n).style]),
+      onPointerup: d[0] || (d[0] = (f) => c(i) && (r.value = !r.value))
     }, [
-      u.$slots.leftSection ? P(u.$slots, "leftSection", { key: 0 }) : $("", !0),
-      P(u.$slots, "default"),
-      u.$slots.rightSection ? P(u.$slots, "rightSection", { key: 1 }) : $("", !0)
+      l.$slots.leftSection ? I(l.$slots, "leftSection", { key: 0 }) : T("", !0),
+      I(l.$slots, "default"),
+      l.$slots.rightSection ? I(l.$slots, "rightSection", { key: 1 }) : T("", !0)
     ], 38));
   }
-}), qr = /* @__PURE__ */ R({
+}), bn = /* @__PURE__ */ z({
   __name: "Avatar",
   props: {
     is: { default: "img" },
@@ -2185,46 +2415,102 @@ const Nr = { class: "relative" }, Gr = /* @__PURE__ */ R({
         default:
           return typeof t.size == "number" || !Number.isNaN(Number(t.size)) ? `--size: ${t.size}rem;` : `--size: ${t.size};`;
       }
-    }), n = k(!1);
-    return (s, a) => (g(), y(X, null, [
-      s.src ? (g(), L(xe(s.is), {
+    }), n = y(!1);
+    return (a, o) => (g(), v(ee, null, [
+      a.src ? (g(), U(Ee(a.is), {
         key: 0,
-        style: C([s.style, c(r)]),
+        style: C([a.style, c(r)]),
         placeholder: "",
-        src: s.src,
+        src: a.src,
         class: w(["h-[var(--size)] w-[var(--size)] rounded-full object-cover", [{ hidden: !c(n) }, t.class]]),
-        onLoad: a[0] || (a[0] = (o) => n.value = !0)
-      }, null, 40, ["style", "src", "class"])) : $("", !0),
-      c(n) ? $("", !0) : (g(), y("img", {
+        onLoad: o[0] || (o[0] = (i) => n.value = !0)
+      }, null, 40, ["style", "src", "class"])) : T("", !0),
+      c(n) ? T("", !0) : (g(), v("img", {
         key: 1,
         class: "h-[var(--size)] w-[var(--size)] animate-pulse rounded-full bg-surface-5 object-cover",
-        style: C([s.style, c(r)])
+        style: C([a.style, c(r)])
       }, null, 4))
     ], 64));
   }
-});
-function Ur() {
-  return ut("theme");
+}), vn = /* @__PURE__ */ z({
+  __name: "ThemeSwitch",
+  setup(e) {
+    const t = y(void 0);
+    return X(() => {
+      ge && (t.value === !0 ? (document.documentElement.setAttribute("data-theme", "dark"), localStorage.setItem("theme", "dark")) : t.value === !1 && (document.documentElement.setAttribute("data-theme", "light"), localStorage.setItem("theme", "light")));
+    }), pe(() => {
+      if (ge) {
+        const r = localStorage.getItem("theme");
+        r === "dark" ? t.value = !0 : r === "light" ? t.value = !1 : t.value = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      }
+    }), (r, n) => {
+      const a = Lt;
+      return g(), U(a, {
+        modelValue: c(t),
+        "onUpdate:modelValue": n[0] || (n[0] = (o) => $t(t) ? t.value = o : null),
+        color: "secondary",
+        "on-icon": "i-tabler-moon",
+        "off-icon": "i-tabler-sun"
+      }, null, 8, ["modelValue"]);
+    };
+  }
+}), dt = Object.keys(He), en = dt.reduce((e, t) => (e[t] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((r) => `rgb(var(--r-color-${t}-${r}))`).reduce((r, n, a) => (r[a] = n, r), {}), t === "surface" ? ["lowest", "low", "base", "high", "highest", "on", "oninverted", "onlow", "onlowinverted", "border"].forEach((r) => {
+  e[t][r] = `rgb(var(--r-color-${t}-${r}))`;
+}) : ["container", "containerd", "containerl", "on"].forEach((r) => {
+  e[t][r] = `rgb(var(--r-color-${t}-${r}))`;
+}), e), {}), tn = dt.filter((e) => e !== "surface").reduce((e, t) => (e[`container-filled-${t}`] = `bg-${t}-container`, e[`btn-filled-${t}`] = `container-filled-${t} enabled:hover:bg-${t}-containerd text-${t}-on`, e[`container-light-${t}`] = `bg-${t}-container/10`, e[`btn-light-${t}`] = `container-light-${t} hover:bg-${t}-6/25 text-${t}-container`, e[`container-outline-${t}`] = `border-${t}-container border text-${t}-container`, e[`btn-outline-${t}`] = `container-outline-${t} hover:bg-${t}-container/10 text-${t}-container`, e[`container-subtle-${t}`] = `bg-${t}-container/0`, e[`btn-subtle-${t}`] = `container-subtle-${t} hover:bg-${t}-container/10 text-${t}-container`, e[`container-transparent-${t}`] = `bg-transparent text-${t}-container`, e[`btn-transparent-${t}`] = `container-transparent-${t} hover:text-${t}-containerl`, e[`container-constrast-${t}`] = `text-${t}-container`, e[`btn-constrast-${t}`] = `container-constrast-${t} hover:text-surface-base hover:bg-${t}-container`, e), {});
+function yn() {
+  return {
+    name: "roku",
+    theme: {
+      colors: {
+        ...en
+      }
+    },
+    shortcuts: {
+      ...tn,
+      "container-default": "bg-surface-base border-surface-border border text-surface-on transition-background-color,border-color,color",
+      "btn-default": "container-default enabled:hover:bg-surface-high transition-background-color,border-color,color"
+    },
+    presets: [],
+    content: {
+      pipeline: {
+        include: [
+          /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+          /@roku-ui/
+        ]
+      }
+    }
+  };
 }
 export {
-  qr as Avatar,
-  ct as Btn,
-  Xr as Chip,
-  Gr as Indicator,
-  Dr as Modal,
-  gr as Notification,
-  Lr as NotificationSystem,
-  Or as Notifications,
-  Wr as PinInput,
-  jr as Progress,
-  Ir as RokuProvider,
-  Fr as Select,
-  Hr as Slider,
-  Br as Switch,
-  ur as TextField,
-  se as darkTheme,
-  Vr as notificationsSymbol,
-  Zt as themeColors,
-  Jt as useNotifications,
-  Ur as useTheme
+  bn as Avatar,
+  St as Btn,
+  gn as Chip,
+  mn as Indicator,
+  dn as Modal,
+  Pr as Notification,
+  fn as NotificationSystem,
+  an as Notifications,
+  hn as PinInput,
+  pn as Progress,
+  cn as RokuProvider,
+  un as Select,
+  nn as Slider,
+  Lt as Switch,
+  Cr as TextField,
+  Hr as ThemeProvider,
+  vn as ThemeSwitch,
+  Ce as darkTheme,
+  sn as generateColors,
+  gr as generateColorsMap,
+  hr as lightTheme,
+  on as notificationsSymbol,
+  yn as rokuPreset,
+  He as themeColors,
+  vr as useCurrentTheme,
+  ln as useCurrentThemeScheme,
+  pr as useNotifications,
+  br as useRootTheme,
+  at as useThemeStyles
 };