@roku-ui/vue 0.1.0

package/dist/index.js

@@ -0,0 +1,2230 @@
+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({
+  __name: "Btn",
+  props: {
+    type: { default: "button" },
+    size: { default: "md" },
+    is: { default: "button" },
+    icon: { type: Boolean, default: !1 },
+    pressEffect: { default: "translate" },
+    variant: {},
+    color: {},
+    disabled: { type: Boolean },
+    animate: { type: Boolean },
+    rounded: { default: "md" }
+  },
+  setup(e) {
+    const t = e, r = m(() => {
+      switch (t.rounded) {
+        case "none":
+          return "rounded-none";
+        case "sm":
+          return "rounded-sm";
+        case "md":
+          return "rounded-md";
+        case "lg":
+          return "rounded-lg";
+        case "full":
+          return "rounded-full";
+      }
+    }), n = m(() => {
+      switch (t.size) {
+        case "sm":
+          return {
+            normalContent: "min-w-16 h-6 px-2 py-1 text-xs",
+            iconContent: "h-6 w-6 p-1"
+          };
+        case "md":
+          return {
+            normalContent: "min-w-20 h-8 px-3 py-1 text-sm",
+            iconContent: "h-8 w-8 p-2"
+          };
+        case "lg":
+          return {
+            normalContent: "min-w-24 h-10 px-4 py-2 text-base",
+            iconContent: "h-10 w-10 p-3"
+          };
+      }
+    }), s = m(() => {
+      switch (t.variant) {
+        case "filled":
+          switch (t.color) {
+            case "secondary":
+              return "btn-filled-secondary";
+            case "tertiary":
+              return "btn-filled-tertiary";
+            case "error":
+              return "btn-filled-error";
+            default:
+              return "btn-filled-primary";
+          }
+        case "ghost":
+        case "light":
+          switch (t.color) {
+            case "secondary":
+              return "btn-light-secondary";
+            case "tertiary":
+              return "btn-light-tertiary";
+            case "error":
+              return "btn-light-error";
+            default:
+              return "btn-light-primary";
+          }
+        case "constrast":
+          switch (t.color) {
+            case "secondary":
+              return "btn-constrast-secondary";
+            case "tertiary":
+              return "btn-constrast-tertiary";
+            case "error":
+              return "btn-constrast-error";
+            default:
+              return "btn-constrast-primary";
+          }
+        case "outline":
+          switch (t.color) {
+            case "secondary":
+              return "btn-outline-secondary";
+            case "tertiary":
+              return "btn-outline-tertiary";
+            case "error":
+              return "btn-outline-error";
+            default:
+              return "btn-outline-primary";
+          }
+        case "subtle":
+          switch (t.color) {
+            case "secondary":
+              return "btn-subtle-secondary";
+            case "tertiary":
+              return "btn-subtle-tertiary";
+            case "error":
+              return "btn-subtle-error";
+            default:
+              return "btn-subtle-primary";
+          }
+        case "transparent":
+          switch (t.color) {
+            case "secondary":
+              return "btn-transparent-secondary";
+            case "tertiary":
+              return "btn-transparent-tertiary";
+            case "error":
+              return "btn-transparent-error";
+            default:
+              return "btn-transparent-primary";
+          }
+        default:
+          return "btn-default";
+      }
+    });
+    return (a, o) => (g(), L(xe(a.is), {
+      "data-size": a.size,
+      type: a.type,
+      class: w(["flex items-center justify-center gap-1 decoration-none", [
+        c(s),
+        c(r),
+        a.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
+        }
+      ]]),
+      disabled: a.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)
+      ]),
+      _: 3
+    }, 8, ["data-size", "type", "class", "disabled"]));
+  }
+});
+function Fe(e) {
+  return Ke() ? (Qe(e), !0) : !1;
+}
+function ke(e) {
+  return typeof e == "function" ? e() : c(e);
+}
+const dt = 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 = () => {
+};
+function gt(e) {
+  return e || Ve();
+}
+function mt(e, t = !0, r) {
+  const n = gt(r);
+  n ? de(e, n) : t ? e() : Ze(e);
+}
+function U(e) {
+  var t;
+  const r = ke(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;
+  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)
+        return;
+      const p = ht(f) ? { ...f } : f;
+      a.push(
+        ...r.flatMap((v) => n.map((b) => i(u, v, b, p)))
+      );
+    },
+    { immediate: !0, flush: "post" }
+  ), d = () => {
+    l(), o();
+  };
+  return Fe(d), d;
+}
+function bt(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) {
+  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(() => {
+    e.value = !0;
+  }), e;
+}
+function yt(e) {
+  const t = vt();
+  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(
+    l,
+    (f) => {
+      if (i(), o.value && n) {
+        a = new ResizeObserver(t);
+        for (const p of f)
+          p && a.observe(p, s);
+      }
+    },
+    { immediate: !0, flush: "post", deep: !0 }
+  ), u = () => {
+    i(), d();
+  };
+  return Fe(u), {
+    isSupported: o,
+    stop: u
+  };
+}
+function _t(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);
+      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;
+  }
+  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();
+  }), {
+    height: o,
+    bottom: i,
+    left: l,
+    right: d,
+    top: u,
+    width: f,
+    x: p,
+    y: v,
+    update: b
+  };
+}
+function xt(e, t = {}) {
+  const { initialValue: r = !1, focusVisible: n = !1 } = t, s = k(!1), a = m(() => U(e));
+  F(a, "focus", (i) => {
+    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) {
+      var l, d;
+      !i && s.value ? (l = a.value) == null || l.blur() : i && !s.value && ((d = a.value) == null || d.focus());
+    }
+  });
+  return ae(
+    a,
+    () => {
+      o.value = r;
+    },
+    { immediate: !0, flush: "post" }
+  ), { focused: o };
+}
+const kt = { class: "relative inline-block" }, Hr = /* @__PURE__ */ R({
+  __name: "Slider",
+  props: {
+    modelValue: {},
+    size: { default: "md" },
+    animate: { type: Boolean, default: !0 },
+    options: {},
+    width: { default: 12 }
+  },
+  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]);
+    });
+    const o = k(), i = k(), l = _t(o), d = k(!1);
+    function u(b) {
+      if (!d.value)
+        return;
+      if (!(b.buttons === 1)) {
+        d.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);
+    }
+    function f(b) {
+      b.preventDefault(), b.stopPropagation(), d.value = !0, u(b);
+    }
+    F(o, "pointerdown", f), de(() => {
+      F(document, "pointermove", u);
+    });
+    const p = m(() => {
+      switch (r.size) {
+        case "sm":
+          return {
+            wrapper: "h-2",
+            innerWrapper: "px-0.5 h-1",
+            content: "h-1",
+            tick: "h-0.5 w-0.5 -translate-x-0.25 -translate-y-0.25",
+            indicator: "h-2 w-2 -translate-x-1 -translate-y-1",
+            indicatorInner: "h-1 w-1 -translate-x-0.5 -translate-y-0.5",
+            progress: "-mx-0.5"
+          };
+        case "md":
+          return {
+            wrapper: "h-4",
+            innerWrapper: "px-1 h-2",
+            content: "h-2",
+            tick: "h-1 w-1 -translate-x-0.5 -translate-y-0.5",
+            indicator: "h-4 w-4 -translate-x-2 -translate-y-2",
+            indicatorInner: "h-2 w-2 -translate-x-1 -translate-y-1",
+            progress: "-mx-1"
+          };
+        case "lg":
+          return {
+            wrapper: "h-6",
+            innerWrapper: "px-1.5 h-3",
+            content: "h-3",
+            tick: "h-1.5 w-1.5 -translate-x-0.75 -translate-y-0.75",
+            indicator: "h-6 w-6 -translate-x-3 -translate-y-3",
+            indicatorInner: "h-3 w-3 -translate-x-1.5 -translate-y-1.5",
+            progress: "-mx-1.5"
+          };
+      }
+    }), v = m(() => r.animate ? {
+      indicator: "transition-left",
+      progress: "transition-width"
+    } : {
+      indicator: "",
+      progress: ""
+    });
+    return (b, _) => (g(), y("div", kt, [
+      S("div", {
+        ref_key: "wrapper",
+        ref: o,
+        type: "size",
+        class: w(["flex cursor-pointer items-center", c(p).wrapper]),
+        onTouchmove: _[0] || (_[0] = Oe(() => {
+        }, ["prevent"]))
+      }, [
+        S("div", {
+          class: w(["rounded-full bg-neutral-7", c(p).innerWrapper])
+        }, [
+          S("div", {
+            class: w(["relative flex", c(p).content]),
+            style: C({
+              width: `${r.width}rem`
+            })
+          }, [
+            (g(!0), y(X, null, te(b.options, (A, O) => (g(), y("div", {
+              key: A,
+              style: C({
+                left: `${O / (c(s) - 1) * 100}%`
+              }),
+              class: w(["absolute top-50% rounded-full bg-white", c(p).tick])
+            }, null, 6))), 128)),
+            S("div", {
+              ref_key: "indicator",
+              ref: i,
+              class: w(["absolute top-50% cursor-pointer rounded-full bg-white", [c(p).indicator, c(v).indicator]]),
+              style: C({
+                left: `${c(a) / (c(s) - 1) * 100}%`
+              })
+            }, [
+              S("div", {
+                class: w(["pointer-events-none absolute left-50% top-50% rounded-full bg-sky-5", c(p).indicatorInner])
+              }, null, 2)
+            ], 6),
+            S("div", {
+              class: w(["pointer-events-none h-full rounded-full bg-sky-5", [c(p).progress, c(v).progress]]),
+              style: C({
+                width: `${c(a) / (c(s) - 1) * 100}%`
+              })
+            }, null, 6)
+          ], 6)
+        ], 2)
+      ], 34),
+      S("div", {
+        class: "relative mx-1 h-1em text-xs op56",
+        style: C({
+          width: `${r.width}rem`
+        })
+      }, [
+        (g(!0), y(X, null, te(b.options, (A, O) => (g(), y("div", {
+          key: A,
+          style: C({
+            left: `${O / (c(s) - 1) * 100}%`
+          }),
+          class: w(["absolute w-auto flex rounded-full -translate-x-50%", c(p).tick])
+        }, q(A), 7))), 128))
+      ], 4)
+    ]));
+  }
+});
+function fe(e) {
+  return m(
+    () => ({ style: Mt(e.rounded), class: "rounded-[var(--r-rounded)]" })
+  );
+}
+function Mt(e) {
+  switch (e) {
+    case "none":
+      return "--r-rounded: 0";
+    case "sm":
+      return "--r-rounded: 0.125rem";
+    case "md":
+      return "--r-rounded: 0.25rem";
+    case "lg":
+      return "--r-rounded: 0.5rem";
+    case "full":
+      return "--r-rounded: 9999px";
+    default:
+      return typeof e == "number" || !Number.isNaN(Number(e)) ? `--r-rounded: ${e}rem;` : "rounded-[var(--r-rounded)]";
+  }
+}
+const St = ["id"], At = ["for"], $t = ["for"], Br = /* @__PURE__ */ R({
+  __name: "Switch",
+  props: {
+    modelValue: {},
+    size: { default: "md" },
+    animate: { type: Boolean, default: !0 },
+    options: {},
+    label: {},
+    id: {},
+    rounded: { default: "full" },
+    color: { default: "primary" },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const r = e, n = t, s = k(null), a = k(!1), o = m(() => {
+      switch (r.size) {
+        case "sm":
+          return {
+            wrapper: "h-4 w-8",
+            indicator: a.value ? "h-3 w-4" : "h-3 w-3",
+            inactive: "left-[calc(0.125rem-1px)]",
+            active: a.value ? "left-[calc(0.875rem-1px)]" : "left-[calc(1.125rem-1px)]"
+          };
+        case "md":
+          return {
+            wrapper: "h-6 w-12",
+            indicator: a.value ? "h-4 w-5" : "h-4 w-4",
+            inactive: "left-[calc(0.25rem-1px)]",
+            active: a.value ? "left-[calc(1.5rem-1px)]" : "left-[calc(1.75rem-1px)]"
+          };
+        case "lg":
+          return {
+            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 ? {
+      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;
+    }
+    const u = d(), f = m(() => {
+      let v = "bg-primary-7";
+      switch (r.color) {
+        case "secondary":
+          v = "bg-secondary-7";
+          break;
+        case "tertiary":
+          v = "bg-tertiary-7";
+          break;
+        case "error":
+          v = "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"
+      };
+    }), p = fe(r);
+    return (v, b) => (g(), y("div", {
+      role: "switch",
+      class: w(["relative flex items-center gap-2", {
+        "pointer-events-none filter-grayscale": r.disabled
+      }])
+    }, [
+      Ie(S("input", {
+        id: c(u),
+        "onUpdate:modelValue": b[0] || (b[0] = (_) => Je(l) ? l.value = _ : null),
+        class: "hidden",
+        type: "checkbox"
+      }, null, 8, St), [
+        [et, c(l)]
+      ]),
+      S("label", {
+        class: "leading-0 cursor-pointer!",
+        for: c(u)
+      }, [
+        S("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))
+        }, [
+          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)
+        ], 38)
+      ], 8, At),
+      v.label ? (g(), y("label", {
+        key: 0,
+        for: c(u)
+      }, q(v.label), 9, $t)) : $("", !0)
+    ], 2));
+  }
+});
+function ie(e) {
+  "@babel/helpers - typeof";
+  return ie = 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);
+}
+var Ct = /^\s+/, zt = /\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);
+  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 = {
+  isDark: function() {
+    return this.getBrightness() < 128;
+  },
+  isLight: function() {
+    return !this.isDark();
+  },
+  isValid: function() {
+    return this._ok;
+  },
+  getOriginalInput: function() {
+    return this._originalInput;
+  },
+  getFormat: function() {
+    return this._format;
+  },
+  getAlpha: function() {
+    return this._a;
+  },
+  getBrightness: function() {
+    var t = this.toRgb();
+    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;
+  },
+  setAlpha: function(t) {
+    return this._a = De(t), this._roundA = Math.round(100 * this._a) / 100, this;
+  },
+  toHsv: function() {
+    var t = Re(this._r, this._g, this._b);
+    return {
+      h: t.h * 360,
+      s: t.s,
+      v: t.v,
+      a: this._a
+    };
+  },
+  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 + ")";
+  },
+  toHsl: function() {
+    var t = ze(this._r, this._g, this._b);
+    return {
+      h: t.h * 360,
+      s: t.s,
+      l: t.l,
+      a: this._a
+    };
+  },
+  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 + ")";
+  },
+  toHex: function(t) {
+    return Te(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);
+  },
+  toHex8String: function(t) {
+    return "#" + this.toHex8(t);
+  },
+  toRgb: function() {
+    return {
+      r: Math.round(this._r),
+      g: Math.round(this._g),
+      b: Math.round(this._b),
+      a: this._a
+    };
+  },
+  toRgbString: function() {
+    return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
+  },
+  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) + "%",
+      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 + ")";
+  },
+  toName: function() {
+    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : Xt[Te(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, " : "";
+    if (t) {
+      var a = h(t);
+      n = "#" + Ee(a._r, a._g, a._b, a._a);
+    }
+    return "progid:DXImageTransform.Microsoft.gradient(" + s + "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());
+  },
+  clone: function() {
+    return h(this.toString());
+  },
+  _applyModification: function(t, r) {
+    var n = t.apply(null, [this].concat([].slice.call(r)));
+    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);
+  },
+  brighten: function() {
+    return this._applyModification(It, arguments);
+  },
+  darken: function() {
+    return this._applyModification(Ft, arguments);
+  },
+  desaturate: function() {
+    return this._applyModification(Ht, arguments);
+  },
+  saturate: function() {
+    return this._applyModification(Bt, arguments);
+  },
+  greyscale: function() {
+    return this._applyModification(Vt, arguments);
+  },
+  spin: function() {
+    return this._applyModification(Dt, arguments);
+  },
+  _applyCombination: function(t, r) {
+    return t.apply(null, [this].concat([].slice.call(r)));
+  },
+  analogous: function() {
+    return this._applyCombination(jt, arguments);
+  },
+  complement: function() {
+    return this._applyCombination(Lt, arguments);
+  },
+  monochromatic: function() {
+    return this._applyCombination(Gt, arguments);
+  },
+  splitcomplement: function() {
+    return this._applyCombination(Wt, 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]);
+  },
+  tetrad: function() {
+    return this._applyCombination(Ne, [4]);
+  }
+};
+h.fromRatio = function(e, t) {
+  if (ie(e) == "object") {
+    var r = {};
+    for (var n in e)
+      e.hasOwnProperty(n) && (n === "a" ? r[n] = e[n] : r[n] = J(e[n]));
+    e = r;
+  }
+  return h(e, t);
+};
+function Rt(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: 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) {
+  return {
+    r: M(e, 255) * 255,
+    g: M(t, 255) * 255,
+    b: M(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;
+  else {
+    var l = n - s;
+    switch (o = i > 0.5 ? l / (2 - n - s) : l / (n + s), n) {
+      case e:
+        a = (t - r) / l + (t < r ? 6 : 0);
+        break;
+      case t:
+        a = (r - e) / l + 2;
+        break;
+      case r:
+        a = (e - t) / l + 4;
+        break;
+    }
+    a /= 6;
+  }
+  return {
+    h: a,
+    s: o,
+    l: i
+  };
+}
+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;
+  }
+  if (t === 0)
+    n = s = a = 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);
+  }
+  return {
+    r: n * 255,
+    g: s * 255,
+    b: a * 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;
+  else {
+    switch (n) {
+      case e:
+        a = (t - r) / l + (t < r ? 6 : 0);
+        break;
+      case t:
+        a = (r - e) / l + 2;
+        break;
+      case r:
+        a = (e - t) / l + 4;
+        break;
+    }
+    a /= 6;
+  }
+  return {
+    h: a,
+    s: o,
+    v: i
+  };
+}
+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];
+  return {
+    r: d * 255,
+    g: u * 255,
+    b: f * 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 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 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("");
+}
+h.equals = function(e, t) {
+  return !e || !t ? !1 : h(e).toRgbString() == h(t).toRgbString();
+};
+h.random = function() {
+  return h.fromRatio({
+    r: Math.random(),
+    g: Math.random(),
+    b: Math.random()
+  });
+};
+function Ht(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);
+}
+function Bt(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);
+}
+function Vt(e) {
+  return h(e).desaturate(100);
+}
+function Ot(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);
+}
+function It(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) {
+  t = t === 0 ? 0 : t || 10;
+  var r = h(e).toHsl();
+  return r.l -= t / 100, r.l = he(r.l), h(r);
+}
+function Dt(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) {
+  var t = h(e).toHsl();
+  return t.h = (t.h + 180) % 360, h(t);
+}
+function Ne(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++)
+    n.push(h({
+      h: (r.h + a * s) % 360,
+      s: r.s,
+      l: r.l
+    }));
+  return n;
+}
+function Wt(e) {
+  var t = h(e).toHsl(), r = t.h;
+  return [h(e), h({
+    h: (r + 72) % 360,
+    s: t.s,
+    l: t.l
+  }), h({
+    h: (r + 216) % 360,
+    s: t.s,
+    l: t.l
+  })];
+}
+function jt(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;
+}
+function Gt(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({
+      h: n,
+      s,
+      v: a
+    })), a = (a + i) % 1;
+  return o;
+}
+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
+  };
+  return h(o);
+};
+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) {
+    case "AAsmall":
+    case "AAAlarge":
+      a = n >= 4.5;
+      break;
+    case "AAlarge":
+      a = n >= 3;
+      break;
+    case "AAAsmall":
+      a = n >= 7;
+      break;
+  }
+  return a;
+};
+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;
+  for (var d = 0; d < t.length; d++)
+    a = h.readability(e, t[d]), a > s && (s = a, n = h(t[d]));
+  return h.isReadable(e, n, {
+    level: i,
+    size: l
+  }) || !o ? n : (r.includeFallbackColors = !1, h.mostReadable(e, ["#fff", "#000"], r));
+};
+var ye = h.names = {
+  aliceblue: "f0f8ff",
+  antiquewhite: "faebd7",
+  aqua: "0ff",
+  aquamarine: "7fffd4",
+  azure: "f0ffff",
+  beige: "f5f5dc",
+  bisque: "ffe4c4",
+  black: "000",
+  blanchedalmond: "ffebcd",
+  blue: "00f",
+  blueviolet: "8a2be2",
+  brown: "a52a2a",
+  burlywood: "deb887",
+  burntsienna: "ea7e5d",
+  cadetblue: "5f9ea0",
+  chartreuse: "7fff00",
+  chocolate: "d2691e",
+  coral: "ff7f50",
+  cornflowerblue: "6495ed",
+  cornsilk: "fff8dc",
+  crimson: "dc143c",
+  cyan: "0ff",
+  darkblue: "00008b",
+  darkcyan: "008b8b",
+  darkgoldenrod: "b8860b",
+  darkgray: "a9a9a9",
+  darkgreen: "006400",
+  darkgrey: "a9a9a9",
+  darkkhaki: "bdb76b",
+  darkmagenta: "8b008b",
+  darkolivegreen: "556b2f",
+  darkorange: "ff8c00",
+  darkorchid: "9932cc",
+  darkred: "8b0000",
+  darksalmon: "e9967a",
+  darkseagreen: "8fbc8f",
+  darkslateblue: "483d8b",
+  darkslategray: "2f4f4f",
+  darkslategrey: "2f4f4f",
+  darkturquoise: "00ced1",
+  darkviolet: "9400d3",
+  deeppink: "ff1493",
+  deepskyblue: "00bfff",
+  dimgray: "696969",
+  dimgrey: "696969",
+  dodgerblue: "1e90ff",
+  firebrick: "b22222",
+  floralwhite: "fffaf0",
+  forestgreen: "228b22",
+  fuchsia: "f0f",
+  gainsboro: "dcdcdc",
+  ghostwhite: "f8f8ff",
+  gold: "ffd700",
+  goldenrod: "daa520",
+  gray: "808080",
+  green: "008000",
+  greenyellow: "adff2f",
+  grey: "808080",
+  honeydew: "f0fff0",
+  hotpink: "ff69b4",
+  indianred: "cd5c5c",
+  indigo: "4b0082",
+  ivory: "fffff0",
+  khaki: "f0e68c",
+  lavender: "e6e6fa",
+  lavenderblush: "fff0f5",
+  lawngreen: "7cfc00",
+  lemonchiffon: "fffacd",
+  lightblue: "add8e6",
+  lightcoral: "f08080",
+  lightcyan: "e0ffff",
+  lightgoldenrodyellow: "fafad2",
+  lightgray: "d3d3d3",
+  lightgreen: "90ee90",
+  lightgrey: "d3d3d3",
+  lightpink: "ffb6c1",
+  lightsalmon: "ffa07a",
+  lightseagreen: "20b2aa",
+  lightskyblue: "87cefa",
+  lightslategray: "789",
+  lightslategrey: "789",
+  lightsteelblue: "b0c4de",
+  lightyellow: "ffffe0",
+  lime: "0f0",
+  limegreen: "32cd32",
+  linen: "faf0e6",
+  magenta: "f0f",
+  maroon: "800000",
+  mediumaquamarine: "66cdaa",
+  mediumblue: "0000cd",
+  mediumorchid: "ba55d3",
+  mediumpurple: "9370db",
+  mediumseagreen: "3cb371",
+  mediumslateblue: "7b68ee",
+  mediumspringgreen: "00fa9a",
+  mediumturquoise: "48d1cc",
+  mediumvioletred: "c71585",
+  midnightblue: "191970",
+  mintcream: "f5fffa",
+  mistyrose: "ffe4e1",
+  moccasin: "ffe4b5",
+  navajowhite: "ffdead",
+  navy: "000080",
+  oldlace: "fdf5e6",
+  olive: "808000",
+  olivedrab: "6b8e23",
+  orange: "ffa500",
+  orangered: "ff4500",
+  orchid: "da70d6",
+  palegoldenrod: "eee8aa",
+  palegreen: "98fb98",
+  paleturquoise: "afeeee",
+  palevioletred: "db7093",
+  papayawhip: "ffefd5",
+  peachpuff: "ffdab9",
+  peru: "cd853f",
+  pink: "ffc0cb",
+  plum: "dda0dd",
+  powderblue: "b0e0e6",
+  purple: "800080",
+  rebeccapurple: "663399",
+  red: "f00",
+  rosybrown: "bc8f8f",
+  royalblue: "4169e1",
+  saddlebrown: "8b4513",
+  salmon: "fa8072",
+  sandybrown: "f4a460",
+  seagreen: "2e8b57",
+  seashell: "fff5ee",
+  sienna: "a0522d",
+  silver: "c0c0c0",
+  skyblue: "87ceeb",
+  slateblue: "6a5acd",
+  slategray: "708090",
+  slategrey: "708090",
+  snow: "fffafa",
+  springgreen: "00ff7f",
+  steelblue: "4682b4",
+  tan: "d2b48c",
+  teal: "008080",
+  thistle: "d8bfd8",
+  tomato: "ff6347",
+  turquoise: "40e0d0",
+  violet: "ee82ee",
+  wheat: "f5deb3",
+  white: "fff",
+  whitesmoke: "f5f5f5",
+  yellow: "ff0",
+  yellowgreen: "9acd32"
+}, Xt = h.hexNames = qt(ye);
+function qt(e) {
+  var t = {};
+  for (var r in e)
+    e.hasOwnProperty(r) && (t[e[r]] = r);
+  return t;
+}
+function De(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);
+  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) {
+  return Math.min(1, Math.max(0, e));
+}
+function T(e) {
+  return parseInt(e, 16);
+}
+function Ut(e) {
+  return typeof e == "string" && e.indexOf(".") != -1 && parseFloat(e) === 1;
+}
+function Yt(e) {
+  return typeof e == "string" && e.indexOf("%") != -1;
+}
+function N(e) {
+  return e.length == 1 ? "0" + e : "" + e;
+}
+function J(e) {
+  return e <= 1 && (e = e * 100 + "%"), e;
+}
+function Le(e) {
+  return Math.round(parseFloat(e) * 255).toString(16);
+}
+function Pe(e) {
+  return T(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*\\)?";
+  return {
+    CSS_UNIT: new RegExp(r),
+    rgb: new RegExp("rgb" + n),
+    rgba: new RegExp("rgba" + s),
+    hsl: new RegExp("hsl" + n),
+    hsla: new RegExp("hsla" + s),
+    hsv: new RegExp("hsv" + n),
+    hsva: new RegExp("hsva" + s),
+    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 Kt(e) {
+  e = e.replace(Ct, "").replace(zt, "").toLowerCase();
+  var t = !1;
+  if (ye[e])
+    e = ye[e], t = !0;
+  else if (e == "transparent")
+    return {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0,
+      format: "name"
+    };
+  var r;
+  return (r = E.rgb.exec(e)) ? {
+    r: r[1],
+    g: r[2],
+    b: r[3]
+  } : (r = E.rgba.exec(e)) ? {
+    r: r[1],
+    g: r[2],
+    b: r[3],
+    a: r[4]
+  } : (r = E.hsl.exec(e)) ? {
+    h: r[1],
+    s: r[2],
+    l: r[3]
+  } : (r = E.hsla.exec(e)) ? {
+    h: r[1],
+    s: r[2],
+    l: r[3],
+    a: r[4]
+  } : (r = E.hsv.exec(e)) ? {
+    h: r[1],
+    s: r[2],
+    v: r[3]
+  } : (r = E.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]),
+    format: t ? "name" : "hex8"
+  } : (r = E.hex6.exec(e)) ? {
+    r: T(r[1]),
+    g: T(r[2]),
+    b: T(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]),
+    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]),
+    format: t ? "name" : "hex"
+  } : !1;
+}
+function Qt(e) {
+  var t, r;
+  return e = e || {
+    level: "AA",
+    size: "small"
+  }, t = (e.level || "AA").toUpperCase(), r = (e.size || "small").toLowerCase(), t !== "AA" && t !== "AAA" && (t = "AA"), r !== "small" && r !== "large" && (r = "small"), {
+    level: t,
+    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"],
+  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 {
+  static show(t) {
+    t.hash = Math.random().toString(36), We.push(t);
+  }
+}
+const Ir = /* @__PURE__ */ R({
+  __name: "RokuProvider",
+  props: {
+    is: { default: "div" },
+    theme: { default() {
+      return se;
+    } }
+  },
+  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")
+      ]),
+      _: 3
+    }));
+  }
+}), 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 = {
+  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({
+  __name: "Select",
+  props: {
+    options: { default() {
+      return [];
+    } },
+    modelValue: { default: void 0 },
+    size: { default: "md" },
+    noneText: { default: "No options" }
+  },
+  emits: ["update:modelValue", "change"],
+  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 f = r.options, p = m(() => f[l.value]), v = m(() => b(p.value));
+    function b(x) {
+      if (x)
+        return typeof x == "string" || typeof x == "symbol" || typeof x == "number" ? x : x.label;
+    }
+    function _(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);
+    });
+    function A(x) {
+      if (!i.value) {
+        i.value = !0;
+        return;
+      }
+      s.value = _(x), i.value = !1;
+    }
+    const O = m(() => ({
+      input: "container-default focus:border-primary-7"
+    })), ge = m(() => {
+      switch (r.size) {
+        case "sm":
+          return {
+            wrapper: "h-6 w-full py-1 pl-1.5 pr-6 text-sm",
+            dropdown: "text-sm children:py-1"
+          };
+        case "lg":
+          return {
+            wrapper: "h-10 w-full py-2 pl-3 pr-10 text-lg",
+            dropdown: "text-lg children:py-2"
+          };
+        default:
+          return {
+            wrapper: "h-8 w-full py-1 pl-2 pr-8 text-base",
+            dropdown: "text-base children:py-1"
+          };
+      }
+    });
+    return (x, j) => (g(), y("div", {
+      ref_key: "wrapperRef",
+      ref: o,
+      class: "r-select-wrapper relative"
+    }, [
+      S("div", er, [
+        S("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",
+          readonly: "",
+          value: c(v),
+          "aria-haspopup": "listbox",
+          autocomplete: "off",
+          onFocus: j[0] || (j[0] = (Z) => i.value = !0)
+        }, null, 42, tr),
+        rr
+      ]),
+      c(i) ? (g(), y("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"])
+      }, [
+        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),
+          class: w([{
+            "hover:bg-surface-7": c(u) !== me,
+            "container-filled-primary": c(u) === me
+          }, "flex cursor-pointer items-center justify-between gap-2 rounded p-1 px-2"]),
+          onPointerdown: (Ye) => A(Z),
+          onHover: (Ye) => d.value = me
+        }, [
+          nt(q(b(Z)) + " ", 1),
+          Z === c(p) ? (g(), y("div", sr, ir)) : $("", !0)
+        ], 42, ar))), 128))
+      ], 2)) : $("", !0)
+    ], 512));
+  }
+}), lr = ["value", "placeholder", "type"], ur = /* @__PURE__ */ R({
+  __name: "TextField",
+  props: {
+    modelValue: {},
+    onChange: {},
+    color: { default: "primary" },
+    error: { type: Boolean },
+    disabled: { type: Boolean },
+    rounded: { 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(() => {
+      if (n.error)
+        return "text-error-5 bg-error-10 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";
+        case "tertiary":
+          return "text-surface-2 bg-surface-8 border-surface-6 focus:border-tertiary-5";
+        case "error":
+          return "text-surface-2 bg-surface-8 border-surface-6 focus:border-error-5";
+        case "primary":
+        default:
+          return "text-surface-2 bg-surface-8 border-surface-6 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);
+    }
+    return t({
+      el: l
+    }), (u, f) => (g(), y("input", {
+      ref_key: "input",
+      ref: l,
+      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]),
+      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));
+  }
+}), cr = {
+  key: 0,
+  class: "i-tabler-loader-2 h-5 w-5 shrink-0 animate-spin"
+}, dr = { key: 1 }, fr = { class: "grow-1" }, hr = {
+  key: 1,
+  class: "text-sm text-surface-4"
+}, pr = /* @__PURE__ */ S("i", { class: "i-tabler-x" }, null, -1), gr = /* @__PURE__ */ R({
+  __name: "Notification",
+  props: {
+    title: {},
+    message: {},
+    icon: {},
+    loading: { type: Boolean },
+    withBorder: { type: Boolean },
+    closeable: { type: Boolean },
+    color: { default: "primary" }
+  },
+  emits: ["close"],
+  setup(e) {
+    const t = e, r = m(() => {
+      switch (t.color) {
+        case "secondary":
+          return "bg-secondary-5";
+        case "tertiary":
+          return "bg-tertiary-5";
+        case "error":
+          return "bg-error-5";
+        default:
+          return "bg-primary-5";
+      }
+    }), n = m(() => {
+      switch (t.color) {
+        case "secondary":
+          return "text-secondary-5";
+        case "tertiary":
+          return "text-tertiary-5";
+        case "error":
+          return "text-error-5";
+        default:
+          return "text-primary-5";
+      }
+    });
+    return (s, a) => {
+      const o = ct;
+      return g(), y("div", {
+        class: w(["relative max-w-100 min-h-16 min-w-80 w-full flex items-center gap-2 container-default rounded p-3", [
+          { "border-0": !s.withBorder }
+        ]])
+      }, [
+        s.icon ? (g(), y("div", {
+          key: 0,
+          class: w(["leading-0", c(n)])
+        }, [
+          s.loading ? (g(), y("i", cr)) : (g(), y("i", {
+            key: 1,
+            class: w(["h-5 w-5 shrink-0", s.icon])
+          }, null, 2))
+        ], 2)) : (g(), y("div", dr, [
+          S("div", {
+            class: w(["absolute left-[0.25rem] top-[0.25rem] h-[calc(100%-0.5rem)] w-1 rounded-full", [{
+              "animate-pulse": s.loading
+            }, c(r)]])
+          }, null, 2)
+        ])),
+        S("div", fr, [
+          s.title ? (g(), y("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)
+        ]),
+        s.closeable ? (g(), L(o, {
+          key: 2,
+          icon: "",
+          variant: "transparent",
+          class: "text-white hover:text-white",
+          onClick: a[0] || (a[0] = (i) => s.$emit("close"))
+        }, {
+          default: ce(() => [
+            pr
+          ]),
+          _: 1
+        })) : $("", !0)
+      ], 2);
+    };
+  }
+}), Dr = /* @__PURE__ */ R({
+  __name: "Modal",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    persistent: { type: Boolean, default: !1 },
+    blur: { type: [String, Boolean] }
+  },
+  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);
+    }
+    const i = m(() => {
+      switch (r.blur) {
+        case "sm":
+          return "backdrop-blur-sm";
+        case "md":
+        case !0:
+          return "backdrop-blur-md";
+        case "lg":
+          return "backdrop-blur-lg";
+        default:
+          return "";
+      }
+    });
+    return oe(() => {
+      r.modelValue ? (document.body.style.overflow = "hidden", document.body.style.marginRight = "15px") : setTimeout(() => {
+        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)
+          ]),
+          _: 3
+        })
+      ], 2)
+    ]));
+  }
+}), 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) => {
+  e.forEach((t) => {
+    t.target === I && wr(), z.has(t.target) && W(t.target);
+  });
+};
+function yr(e) {
+  const t = we.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);
+  }, {
+    root: I,
+    threshold: 1,
+    rootMargin: l
+  });
+  d.observe(e), we.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);
+    try {
+      await (n == null ? void 0 : n.finished), z.set(e, Q(e)), yr(e);
+    } catch {
+    }
+  }, r));
+}
+function wr() {
+  clearTimeout(le.get(I)), le.set(I, setTimeout(() => {
+    je.forEach((e) => Ue(e, (t) => Ge(() => W(t))));
+  }, 100));
+}
+function _r(e) {
+  setTimeout(() => {
+    mr.set(e, setInterval(() => Ge(W.bind(null, e)), 2e3));
+  }, Math.round(2e3 * Math.random()));
+}
+function Ge(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) => [
+    ...n,
+    ...Array.from(s.addedNodes),
+    ...Array.from(s.removedNodes)
+  ], []).every((n) => n.nodeName === "#comment") ? !1 : e.reduce((n, s) => {
+    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)
+              return !1;
+            ve(s.target, o), n.add(o);
+          }
+        }
+      }
+      if (s.removedNodes.length)
+        for (let a = 0; a < s.removedNodes.length; a++) {
+          const o = s.removedNodes[a];
+          if (re in o)
+            return !1;
+          o instanceof Element && (n.add(o), ve(s.target, o), Y.set(o, [
+            s.previousSibling,
+            s.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 kr(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);
+}
+function H(e) {
+  return Number(e.replace(/[^0-9.\-]/g, ""));
+}
+function Mr(e) {
+  let t = e.parentElement;
+  for (; t; ) {
+    if (t.scrollLeft || t.scrollTop)
+      return { x: t.scrollLeft, y: t.scrollTop };
+    t = t.parentElement;
+  }
+  return { x: 0, y: 0 };
+}
+function Q(e) {
+  const t = e.getBoundingClientRect(), { x: r, y: n } = Mr(e);
+  return {
+    top: t.top + n,
+    left: t.left + r,
+    width: t.width,
+    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;
+  }
+  return [n, a, s, o].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 qe(e) {
+  if (V in e)
+    return e[V];
+}
+function $e(e) {
+  const t = qe(e);
+  return t ? ee.has(t) : !1;
+}
+function Ue(e, ...t) {
+  t.forEach((r) => r(e, K.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)));
+  }
+}
+function Ce(e) {
+  return Array.isArray(e) ? e : [e];
+}
+function ne(e) {
+  return typeof e == "function";
+}
+function Sr(e) {
+  const t = z.get(e), r = Q(e);
+  if (!$e(e))
+    return z.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)`
+    }, 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
+    });
+  } else {
+    const [a] = Ce(s(e, "remain", t, r));
+    n = new Animation(a), 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))
+    return;
+  let n;
+  if (typeof r != "function")
+    n = e.animate([
+      { transform: "scale(.98)", opacity: 0 },
+      { transform: "scale(0.98)", opacity: 0, offset: 0.5 },
+      { transform: "scale(1)", opacity: 1 }
+    ], {
+      duration: r.duration * 1.5,
+      easing: "ease-in"
+    });
+  else {
+    const [s] = Ce(r(e, "add", t));
+    n = new Animation(s), n.play();
+  }
+  D.set(e, n), n.addEventListener("finish", W.bind(null, e));
+}
+function Be(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)
+      for (const n in t)
+        e.style[n] = "";
+  }, 0);
+}
+function Ar(e) {
+  var t;
+  if (!Y.has(e) || !z.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 = {
+    position: "absolute",
+    top: `${o}px`,
+    left: `${i}px`,
+    width: `${l}px`,
+    height: `${d}px`,
+    margin: "0",
+    pointerEvents: "none",
+    transformOrigin: "center",
+    zIndex: "100"
+  };
+  if (!ne(u))
+    Object.assign(e.style, v), p = e.animate([
+      {
+        transform: "scale(1)",
+        opacity: 1
+      },
+      {
+        transform: "scale(.98)",
+        opacity: 0
+      }
+    ], { duration: u.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();
+  }
+  D.set(e, p), p.addEventListener("finish", Be.bind(null, e, v));
+}
+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)
+    return;
+  const l = e.parentElement;
+  let d = l.clientHeight, u = l.clientWidth;
+  const f = 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;
+      }
+    });
+  }
+  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({
+    parent: e,
+    enable: () => {
+      ee.add(e);
+    },
+    disable: () => {
+      ee.delete(e);
+    },
+    isEnabled: () => ee.has(e)
+  });
+}
+const Rr = {
+  mounted: (e, t) => {
+    zr(e, t.value || {});
+  },
+  // ignore ssr see #96:
+  getSSRProps: () => ({})
+}, Tr = { class: "absolute z-20 flex flex-col gap-2 p-2" }, Lr = /* @__PURE__ */ R({
+  __name: "NotificationSystem",
+  setup(e) {
+    const t = Jt();
+    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": "",
+          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)
+        }, null, 8, ["title", "message", "icon", "loading", "color", "onClose"]))), 128))
+      ])), [
+        [c(Rr)]
+      ]);
+    };
+  }
+}), Er = { class: "flex gap-2" }, Wr = /* @__PURE__ */ R({
+  __name: "PinInput",
+  props: {
+    modelValue: {},
+    length: { default: 6 },
+    size: {},
+    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());
+      });
+    }
+    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 = ""));
+    }
+    return (a, o) => (g(), y("div", Er, [
+      (g(!0), y(X, null, te(t.length, (i) => (g(), L(c(ur), {
+        ref_for: !0,
+        ref_key: "inputs",
+        ref: r,
+        key: i,
+        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"])
+      }, null, 8, ["password"]))), 128))
+    ]));
+  }
+}), jr = /* @__PURE__ */ R({
+  __name: "Progress",
+  props: {
+    value: { default: 0 },
+    max: { default: 100 },
+    min: { default: 0 },
+    size: { default: "md" },
+    color: { default: "primary" },
+    rounded: { default: "full" },
+    loading: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, r = m(() => {
+      switch (t.size) {
+        case "sm":
+          return "h-0.5";
+        case "md":
+          return "h-1";
+        case "lg":
+          return "h-2";
+      }
+    }), n = m(() => {
+      switch (t.color) {
+        case "primary":
+          return "bg-primary-7";
+        case "secondary":
+          return "bg-secondary-7";
+        case "tertiary":
+          return "bg-tertiary-7";
+        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.loading ? (g(), y("div", {
+        key: 1,
+        class: w(["loading-progress h-full", [c(n)]])
+      }, null, 2)) : (g(), y("div", {
+        key: 0,
+        class: w(["h-full", [c(n)]]),
+        style: C([{
+          width: `${(a.value - a.min) / (a.max - a.min) * 100}%`
+        }])
+      }, null, 6))
+    ], 6));
+  }
+});
+const Nr = { class: "relative" }, Gr = /* @__PURE__ */ R({
+  __name: "Indicator",
+  props: {
+    color: { default: "primary" },
+    size: { default: "md" },
+    position: { default: "top-right" },
+    ping: { type: Boolean }
+  },
+  setup(e) {
+    const t = e, r = m(() => {
+      switch (t.size) {
+        case "sm":
+          return "w-2 h-2";
+        case "md":
+          return "w-3 h-3";
+        case "lg":
+          return "w-4 h-4";
+        default:
+          return typeof t.size == "number" || !Number.isNaN(Number(t.size)) ? `w-${t.size} h-${t.size}` : t.size;
+      }
+    }), n = lt(), s = m(() => {
+      if (!n.label)
+        return "";
+      switch (t.size) {
+        case "sm":
+          return "text-sm children:px-1.5";
+        case "md":
+          return "text-md children:px-2";
+        case "lg":
+          return "text-lg children:px-2.5";
+      }
+    }), a = m(() => {
+      switch (t.position) {
+        case "top-left":
+          return "top-0 left-0 -translate-x-1/2 -translate-y-1/2";
+        case "top-right":
+          return "top-0 right-0 translate-x-1/2 -translate-y-1/2";
+        case "bottom-left":
+          return "bottom-0 left-0 -translate-x-1/2 translate-y-1/2";
+        case "bottom-right":
+          return "bottom-0 right-0 translate-x-1/2 translate-y-1/2";
+      }
+    }), o = m(() => {
+      switch (t.color) {
+        case "primary":
+          return "bg-primary-7";
+        case "secondary":
+          return "bg-secondary-7";
+        case "tertiary":
+          return "bg-tertiary-7";
+        case "error":
+          return "bg-error-7";
+      }
+    });
+    return (i, l) => (g(), y("div", Nr, [
+      S("div", {
+        class: w([[c(a), c(s)], "absolute z-1"])
+      }, [
+        t.ping ? (g(), y("div", {
+          key: 0,
+          class: w(["absolute animate-ping rounded-full", [
+            {
+              [c(r)]: !i.$slots.label
+            },
+            c(o)
+          ]])
+        }, [
+          i.$slots.label ? P(i.$slots, "label", { key: 0 }) : $("", !0)
+        ], 2)) : $("", !0),
+        S("div", {
+          class: w(["top-0 rounded-full", [
+            {
+              [c(r)]: !i.$slots.label
+            },
+            c(o)
+          ]])
+        }, [
+          i.$slots.label ? P(i.$slots, "label", { key: 0 }) : $("", !0)
+        ], 2)
+      ], 2),
+      P(i.$slots, "default")
+    ]));
+  }
+}), Xr = /* @__PURE__ */ R({
+  __name: "Chip",
+  props: {
+    is: { default: "img" },
+    src: {},
+    size: { default: "md" },
+    style: {},
+    class: {},
+    modelValue: { type: Boolean },
+    rounded: { default: "full" }
+  },
+  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) {
+        case "sm":
+          return "px-3 text-sm h-6";
+        case "md":
+          return "px-6 h-8 text-base";
+        case "lg":
+          return "px-8 h-10 text-lg";
+      }
+    }), 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))
+    }, [
+      u.$slots.leftSection ? P(u.$slots, "leftSection", { key: 0 }) : $("", !0),
+      P(u.$slots, "default"),
+      u.$slots.rightSection ? P(u.$slots, "rightSection", { key: 1 }) : $("", !0)
+    ], 38));
+  }
+}), qr = /* @__PURE__ */ R({
+  __name: "Avatar",
+  props: {
+    is: { default: "img" },
+    src: {},
+    size: { default: "md" },
+    style: {},
+    class: {}
+  },
+  setup(e) {
+    const t = e, r = m(() => {
+      switch (t.size) {
+        case "sm":
+          return "--size: 1.5rem;";
+        case "md":
+          return "--size: 2rem;";
+        case "lg":
+          return "--size: 3rem;";
+        default:
+          return typeof t.size == "number" || !Number.isNaN(Number(t.size)) ? `--size: ${t.size}rem;` : `--size: ${t.size};`;
+      }
+    }), n = k(!1);
+    return (s, a) => (g(), y(X, null, [
+      s.src ? (g(), L(xe(s.is), {
+        key: 0,
+        style: C([s.style, c(r)]),
+        placeholder: "",
+        src: s.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", {
+        key: 1,
+        class: "h-[var(--size)] w-[var(--size)] animate-pulse rounded-full bg-surface-5 object-cover",
+        style: C([s.style, c(r)])
+      }, null, 4))
+    ], 64));
+  }
+});
+function Ur() {
+  return ut("theme");
+}
+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
+};