@aigamo/hydrangean-diva 0.0.1-alpha.13 → 0.0.1-alpha.14

package/dist/index.es.js

@@ -1,23 +1,24 @@
-var Ir = Object.defineProperty;
-var Pr = (t, e, n) => e in t ? Ir(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var U = (t, e, n) => Pr(t, typeof e != "symbol" ? e + "" : e, n);
-import { makeObservable as Rr, action as y, computed as _, observable as te, reaction as wr } from "mobx";
-import * as re from "react";
-import zt, { forwardRef as Or, useContext as st, memo as Z, useState as q, useCallback as $, createContext as Lt, useEffect as _r, useLayoutEffect as Ar, useMemo as Vt } from "react";
-import kr from "@emotion/cache";
-import { EuiButton as ne, EuiModalHeaderTitle as Mr, EuiModalHeader as Fr, EuiForm as jr, EuiFormRow as tt, EuiFieldText as It, EuiModalBody as Nr, EuiModalFooter as $r, EuiButtonEmpty as Dr, EuiModal as zr, useEuiTheme as Yt, EuiCheckbox as Bt, EuiTableHeaderCellCheckbox as Lr, EuiTableHeader as Vr, EuiContextMenuItem as Yr, EuiContextMenuPanel as Br, EuiTableRowCell as rt, EuiTableRowCellCheckbox as Wr, EuiLink as Ur, EuiTableRow as qr, EuiTable as Hr, EuiButtonIcon as G, EuiPopover as lt, EuiIcon as H, EuiHorizontalRule as Pt, EuiTableHeaderCell as Xe, EuiCodeBlock as Gr, EuiFlyout as Jr, EuiFlexGroup as me, EuiFlexItem as J, EuiSpacer as Wt, EuiEmptyPrompt as Kr, EuiPageTemplate as nt, EuiRange as Ut, EuiContextMenu as Xr, EuiBottomBar as Zr } from "@elastic/eui";
-import { AddRegular as ct, PlayRegular as Qr, DismissRegular as ut, MoreHorizontalFilled as qt, ArrowUploadRegular as en, ArrowDownloadRegular as tn, WindowDevToolsRegular as rn, DeleteRegular as nn, Speaker2Regular as Ht, TopSpeedRegular as on, SkipBack10Regular as an, SkipForward30Regular as sn, ArrowRepeat1Filled as ln, ArrowRepeatAllFilled as cn, ArrowRepeatAllOffFilled as un, ArrowShuffleFilled as fn, ArrowShuffleOffFilled as dn, PreviousFilled as mn, PauseFilled as hn, PlayFilled as vn, NextFilled as pn, NavigationPlayRegular as yn } from "@fluentui/react-icons";
-import { observer as Y } from "mobx-react-lite";
-import { findVideoService as gn, useNostalgicDiva as ie, NostalgicDiva as bn } from "@aigamo/nostalgic-diva";
+var Pr = Object.defineProperty;
+var wr = (t, e, n) => e in t ? Pr(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var U = (t, e, n) => wr(t, typeof e != "symbol" ? e + "" : e, n);
+import { makeObservable as Or, action as y, computed as _, observable as ee, reaction as _r } from "mobx";
+import * as te from "react";
+import zt, { forwardRef as Ar, useContext as at, memo as ne, useState as q, useCallback as $, useMemo as st, createContext as Lt, useEffect as kr, useLayoutEffect as Mr } from "react";
+import Fr from "@emotion/cache";
+import { useNostalgicDiva as ie, findVideoService as jr, NostalgicDiva as Nr } from "@aigamo/nostalgic-diva";
+import { EuiPageTemplate as lt, EuiButton as re, useGeneratedHtmlId as $r, EuiModalHeaderTitle as Dr, EuiModalHeader as zr, EuiForm as Lr, EuiFormRow as tt, EuiFieldText as Rt, EuiModalBody as Vr, EuiModalFooter as Yr, EuiButtonEmpty as Vt, EuiModal as Br, useEuiTheme as Yt, EuiCheckbox as Bt, EuiTableHeaderCellCheckbox as Wr, EuiTableHeader as Ur, EuiTableRowCell as rt, EuiTableRowCellCheckbox as qr, EuiLink as Hr, EuiTableRow as Gr, EuiTable as Jr, EuiButtonIcon as G, EuiPopover as ct, EuiIcon as H, EuiContextMenu as Wt, EuiTableHeaderCell as Xe, EuiCodeBlock as Kr, EuiFlyout as Xr, EuiFlexGroup as le, EuiFlexItem as J, EuiSpacer as Ut, EuiEmptyPrompt as Zr, EuiRange as qt, EuiBottomBar as Qr } from "@elastic/eui";
+import { AddRegular as ut, PlayRegular as en, DismissRegular as ft, MoreHorizontalFilled as Ht, ArrowUploadRegular as tn, ArrowDownloadRegular as rn, WindowDevToolsRegular as nn, DeleteRegular as on, ArrowRepeat1Filled as an, ArrowRepeatAllFilled as sn, ArrowRepeatAllOffFilled as ln, ArrowShuffleFilled as cn, ArrowShuffleOffFilled as un, PreviousFilled as fn, PauseFilled as dn, PlayFilled as mn, NextFilled as hn, Speaker2Regular as Gt, TopSpeedRegular as vn, SkipBack10Regular as pn, SkipForward30Regular as yn, NavigationPlayRegular as gn } from "@fluentui/react-icons";
+import { observer as D } from "mobx-react-lite";
+import { useRouter as bn } from "@tanstack/react-router";
 import { ReactSortable as En } from "react-sortablejs";
-import { pull as Rt } from "lodash-es";
+import { pull as Pt } from "lodash-es";
 import Tn from "ajv";
-class Gt {
+class Jt {
   makeObservable(e, n) {
-    return Rr(e, n);
+    return Or(e, n);
   }
 }
-class _i {
+class Mi {
   makeObservable(e, n) {
     return e;
   }
@@ -37,12 +38,12 @@ function xn() {
   if (wt) return xe;
   wt = 1;
   var t = zt, e = Symbol.for("react.element"), n = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, a = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, l = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function f(h, m, p) {
-    var E, P = {}, D = null, j = null;
-    p !== void 0 && (D = "" + p), m.key !== void 0 && (D = "" + m.key), m.ref !== void 0 && (j = m.ref);
-    for (E in m) i.call(m, E) && !l.hasOwnProperty(E) && (P[E] = m[E]);
-    if (h && h.defaultProps) for (E in m = h.defaultProps, m) P[E] === void 0 && (P[E] = m[E]);
-    return { $$typeof: e, type: h, key: D, ref: j, props: P, _owner: a.current };
+  function f(h, v, m) {
+    var E, R = {}, z = null, j = null;
+    m !== void 0 && (z = "" + m), v.key !== void 0 && (z = "" + v.key), v.ref !== void 0 && (j = v.ref);
+    for (E in v) i.call(v, E) && !l.hasOwnProperty(E) && (R[E] = v[E]);
+    if (h && h.defaultProps) for (E in v = h.defaultProps, v) R[E] === void 0 && (R[E] = v[E]);
+    return { $$typeof: e, type: h, key: z, ref: j, props: R, _owner: a.current };
   }
   return xe.Fragment = n, xe.jsx = f, xe.jsxs = f, xe;
 }
@@ -58,45 +59,45 @@ var Se = {};
  */
 var Ot;
 function Sn() {
-  return Ot || (Ot = 1, process.env.NODE_ENV !== "production" && function() {
-    var t = zt, e = Symbol.for("react.element"), n = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), l = Symbol.for("react.profiler"), f = Symbol.for("react.provider"), h = Symbol.for("react.context"), m = Symbol.for("react.forward_ref"), p = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), P = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), j = Symbol.for("react.offscreen"), A = Symbol.iterator, B = "@@iterator";
-    function Q(r) {
+  return Ot || (Ot = 1, process.env.NODE_ENV !== "production" && (function() {
+    var t = zt, e = Symbol.for("react.element"), n = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), l = Symbol.for("react.profiler"), f = Symbol.for("react.provider"), h = Symbol.for("react.context"), v = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), R = Symbol.for("react.memo"), z = Symbol.for("react.lazy"), j = Symbol.for("react.offscreen"), A = Symbol.iterator, B = "@@iterator";
+    function Z(r) {
       if (r === null || typeof r != "object")
         return null;
       var s = A && r[A] || r[B];
       return typeof s == "function" ? s : null;
     }
-    var z = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function I(r) {
+    var L = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function C(r) {
       {
-        for (var s = arguments.length, u = new Array(s > 1 ? s - 1 : 0), v = 1; v < s; v++)
-          u[v - 1] = arguments[v];
+        for (var s = arguments.length, u = new Array(s > 1 ? s - 1 : 0), p = 1; p < s; p++)
+          u[p - 1] = arguments[p];
         k("error", r, u);
       }
     }
     function k(r, s, u) {
       {
-        var v = z.ReactDebugCurrentFrame, T = v.getStackAddendum();
+        var p = L.ReactDebugCurrentFrame, T = p.getStackAddendum();
         T !== "" && (s += "%s", u = u.concat([T]));
-        var C = u.map(function(b) {
+        var I = u.map(function(b) {
           return String(b);
         });
-        C.unshift("Warning: " + s), Function.prototype.apply.call(console[r], console, C);
+        I.unshift("Warning: " + s), Function.prototype.apply.call(console[r], console, I);
       }
     }
-    var w = !1, c = !1, L = !1, he = !1, Re = !1, we;
+    var w = !1, c = !1, V = !1, he = !1, Pe = !1, we;
     we = Symbol.for("react.module.reference");
     function Ve(r) {
-      return !!(typeof r == "string" || typeof r == "function" || r === i || r === l || Re || r === a || r === p || r === E || he || r === j || w || c || L || typeof r == "object" && r !== null && (r.$$typeof === D || r.$$typeof === P || r.$$typeof === f || r.$$typeof === h || r.$$typeof === m || // This needs to include all possible module reference object
+      return !!(typeof r == "string" || typeof r == "function" || r === i || r === l || Pe || r === a || r === m || r === E || he || r === j || w || c || V || typeof r == "object" && r !== null && (r.$$typeof === z || r.$$typeof === R || r.$$typeof === f || r.$$typeof === h || r.$$typeof === v || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
       r.$$typeof === we || r.getModuleId !== void 0));
     }
     function Ye(r, s, u) {
-      var v = r.displayName;
-      if (v)
-        return v;
+      var p = r.displayName;
+      if (p)
+        return p;
       var T = s.displayName || s.name || "";
       return T !== "" ? u + "(" + T + ")" : u;
     }
@@ -106,7 +107,7 @@ function Sn() {
     function K(r) {
       if (r == null)
         return null;
-      if (typeof r.tag == "number" && I("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof r == "function")
+      if (typeof r.tag == "number" && C("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof r == "function")
         return r.displayName || r.name || null;
       if (typeof r == "string")
         return r;
@@ -119,7 +120,7 @@ function Sn() {
           return "Profiler";
         case a:
           return "StrictMode";
-        case p:
+        case m:
           return "Suspense";
         case E:
           return "SuspenseList";
@@ -132,15 +133,15 @@ function Sn() {
           case f:
             var u = r;
             return Oe(u._context) + ".Provider";
-          case m:
+          case v:
             return Ye(r, r.render, "ForwardRef");
-          case P:
-            var v = r.displayName || null;
-            return v !== null ? v : K(r.type) || "Memo";
-          case D: {
-            var T = r, C = T._payload, b = T._init;
+          case R:
+            var p = r.displayName || null;
+            return p !== null ? p : K(r.type) || "Memo";
+          case z: {
+            var T = r, I = T._payload, b = T._init;
             try {
-              return K(b(C));
+              return K(b(I));
             } catch {
               return null;
             }
@@ -148,7 +149,7 @@ function Sn() {
         }
       return null;
     }
-    var ee = Object.assign, oe = 0, _e, Ae, ve, ke, pe, Me, Fe;
+    var Q = Object.assign, oe = 0, _e, Ae, ve, ke, pe, Me, Fe;
     function je() {
     }
     je.__reactDisabledLog = !0;
@@ -184,65 +185,65 @@ function Sn() {
             writable: !0
           };
           Object.defineProperties(console, {
-            log: ee({}, r, {
+            log: Q({}, r, {
               value: _e
             }),
-            info: ee({}, r, {
+            info: Q({}, r, {
               value: Ae
             }),
-            warn: ee({}, r, {
+            warn: Q({}, r, {
               value: ve
             }),
-            error: ee({}, r, {
+            error: Q({}, r, {
               value: ke
             }),
-            group: ee({}, r, {
+            group: Q({}, r, {
               value: pe
             }),
-            groupCollapsed: ee({}, r, {
+            groupCollapsed: Q({}, r, {
               value: Me
             }),
-            groupEnd: ee({}, r, {
+            groupEnd: Q({}, r, {
               value: Fe
             })
           });
         }
-        oe < 0 && I("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        oe < 0 && C("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var ye = z.ReactCurrentDispatcher, ge;
-    function le(r, s, u) {
+    var ye = L.ReactCurrentDispatcher, ge;
+    function ce(r, s, u) {
       {
         if (ge === void 0)
           try {
             throw Error();
           } catch (T) {
-            var v = T.stack.trim().match(/\n( *(at )?)/);
-            ge = v && v[1] || "";
+            var p = T.stack.trim().match(/\n( *(at )?)/);
+            ge = p && p[1] || "";
           }
         return `
 ` + ge + r;
       }
     }
-    var be = !1, ce;
+    var be = !1, ue;
     {
       var Ue = typeof WeakMap == "function" ? WeakMap : Map;
-      ce = new Ue();
+      ue = new Ue();
     }
     function d(r, s) {
       if (!r || be)
         return "";
       {
-        var u = ce.get(r);
+        var u = ue.get(r);
         if (u !== void 0)
           return u;
       }
-      var v;
+      var p;
       be = !0;
       var T = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
-      var C;
-      C = ye.current, ye.current = null, Be();
+      var I;
+      I = ye.current, ye.current = null, Be();
       try {
         if (s) {
           var b = function() {
@@ -255,30 +256,30 @@ function Sn() {
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
               Reflect.construct(b, []);
-            } catch (V) {
-              v = V;
+            } catch (Y) {
+              p = Y;
             }
             Reflect.construct(r, [], b);
           } else {
             try {
               b.call();
-            } catch (V) {
-              v = V;
+            } catch (Y) {
+              p = Y;
             }
             r.call(b.prototype);
           }
         } else {
           try {
             throw Error();
-          } catch (V) {
-            v = V;
+          } catch (Y) {
+            p = Y;
           }
           r();
         }
-      } catch (V) {
-        if (V && v && typeof V.stack == "string") {
-          for (var g = V.stack.split(`
-`), N = v.stack.split(`
+      } catch (Y) {
+        if (Y && p && typeof Y.stack == "string") {
+          for (var g = Y.stack.split(`
+`), N = p.stack.split(`
 `), O = g.length - 1, M = N.length - 1; O >= 1 && M >= 0 && g[O] !== N[M]; )
             M--;
           for (; O >= 1 && M >= 0; O--, M--)
@@ -288,22 +289,22 @@ function Sn() {
                   if (O--, M--, M < 0 || g[O] !== N[M]) {
                     var W = `
 ` + g[O].replace(" at new ", " at ");
-                    return r.displayName && W.includes("<anonymous>") && (W = W.replace("<anonymous>", r.displayName)), typeof r == "function" && ce.set(r, W), W;
+                    return r.displayName && W.includes("<anonymous>") && (W = W.replace("<anonymous>", r.displayName)), typeof r == "function" && ue.set(r, W), W;
                   }
                 while (O >= 1 && M >= 0);
               break;
             }
         }
       } finally {
-        be = !1, ye.current = C, We(), Error.prepareStackTrace = T;
+        be = !1, ye.current = I, We(), Error.prepareStackTrace = T;
       }
-      var de = r ? r.displayName || r.name : "", se = de ? le(de) : "";
-      return typeof r == "function" && ce.set(r, se), se;
+      var me = r ? r.displayName || r.name : "", se = me ? ce(me) : "";
+      return typeof r == "function" && ue.set(r, se), se;
     }
     function Ee(r, s, u) {
       return d(r, !1);
     }
-    function ue(r) {
+    function fe(r) {
       var s = r.prototype;
       return !!(s && s.isReactComponent);
     }
@@ -311,89 +312,89 @@ function Sn() {
       if (r == null)
         return "";
       if (typeof r == "function")
-        return d(r, ue(r));
+        return d(r, fe(r));
       if (typeof r == "string")
-        return le(r);
+        return ce(r);
       switch (r) {
-        case p:
-          return le("Suspense");
+        case m:
+          return ce("Suspense");
         case E:
-          return le("SuspenseList");
+          return ce("SuspenseList");
       }
       if (typeof r == "object")
         switch (r.$$typeof) {
-          case m:
+          case v:
             return Ee(r.render);
-          case P:
+          case R:
             return ae(r.type, s, u);
-          case D: {
-            var v = r, T = v._payload, C = v._init;
+          case z: {
+            var p = r, T = p._payload, I = p._init;
             try {
-              return ae(C(T), s, u);
+              return ae(I(T), s, u);
             } catch {
             }
           }
         }
       return "";
     }
-    var Te = Object.prototype.hasOwnProperty, ft = {}, dt = z.ReactDebugCurrentFrame;
+    var Te = Object.prototype.hasOwnProperty, dt = {}, mt = L.ReactDebugCurrentFrame;
     function Ne(r) {
       if (r) {
         var s = r._owner, u = ae(r.type, r._source, s ? s.type : null);
-        dt.setExtraStackFrame(u);
+        mt.setExtraStackFrame(u);
       } else
-        dt.setExtraStackFrame(null);
+        mt.setExtraStackFrame(null);
     }
-    function nr(r, s, u, v, T) {
+    function or(r, s, u, p, T) {
       {
-        var C = Function.call.bind(Te);
+        var I = Function.call.bind(Te);
         for (var b in r)
-          if (C(r, b)) {
+          if (I(r, b)) {
             var g = void 0;
             try {
               if (typeof r[b] != "function") {
-                var N = Error((v || "React class") + ": " + u + " type `" + b + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof r[b] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                var N = Error((p || "React class") + ": " + u + " type `" + b + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof r[b] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                 throw N.name = "Invariant Violation", N;
               }
-              g = r[b](s, b, v, u, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+              g = r[b](s, b, p, u, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
             } catch (O) {
               g = O;
             }
-            g && !(g instanceof Error) && (Ne(T), I("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", v || "React class", u, b, typeof g), Ne(null)), g instanceof Error && !(g.message in ft) && (ft[g.message] = !0, Ne(T), I("Failed %s type: %s", u, g.message), Ne(null));
+            g && !(g instanceof Error) && (Ne(T), C("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", p || "React class", u, b, typeof g), Ne(null)), g instanceof Error && !(g.message in dt) && (dt[g.message] = !0, Ne(T), C("Failed %s type: %s", u, g.message), Ne(null));
           }
       }
     }
-    var ir = Array.isArray;
+    var ar = Array.isArray;
     function qe(r) {
-      return ir(r);
+      return ar(r);
     }
-    function or(r) {
+    function sr(r) {
       {
         var s = typeof Symbol == "function" && Symbol.toStringTag, u = s && r[Symbol.toStringTag] || r.constructor.name || "Object";
         return u;
       }
     }
-    function ar(r) {
+    function lr(r) {
       try {
-        return mt(r), !1;
+        return ht(r), !1;
       } catch {
         return !0;
       }
     }
-    function mt(r) {
+    function ht(r) {
       return "" + r;
     }
-    function ht(r) {
-      if (ar(r))
-        return I("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", or(r)), mt(r);
+    function vt(r) {
+      if (lr(r))
+        return C("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", sr(r)), ht(r);
     }
-    var vt = z.ReactCurrentOwner, sr = {
+    var pt = L.ReactCurrentOwner, cr = {
       key: !0,
       ref: !0,
       __self: !0,
       __source: !0
-    }, pt, yt;
-    function lr(r) {
+    }, yt, gt;
+    function ur(r) {
       if (Te.call(r, "ref")) {
         var s = Object.getOwnPropertyDescriptor(r, "ref").get;
         if (s && s.isReactWarning)
@@ -401,7 +402,7 @@ function Sn() {
       }
       return r.ref !== void 0;
     }
-    function cr(r) {
+    function fr(r) {
       if (Te.call(r, "key")) {
         var s = Object.getOwnPropertyDescriptor(r, "key").get;
         if (s && s.isReactWarning)
@@ -409,13 +410,13 @@ function Sn() {
       }
       return r.key !== void 0;
     }
-    function ur(r, s) {
-      typeof r.ref == "string" && vt.current;
+    function dr(r, s) {
+      typeof r.ref == "string" && pt.current;
     }
-    function fr(r, s) {
+    function mr(r, s) {
       {
         var u = function() {
-          pt || (pt = !0, I("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
+          yt || (yt = !0, C("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
         };
         u.isReactWarning = !0, Object.defineProperty(r, "key", {
           get: u,
@@ -423,10 +424,10 @@ function Sn() {
         });
       }
     }
-    function dr(r, s) {
+    function hr(r, s) {
       {
         var u = function() {
-          yt || (yt = !0, I("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
+          gt || (gt = !0, C("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
         };
         u.isReactWarning = !0, Object.defineProperty(r, "ref", {
           get: u,
@@ -434,7 +435,7 @@ function Sn() {
         });
       }
     }
-    var mr = function(r, s, u, v, T, C, b) {
+    var vr = function(r, s, u, p, T, I, b) {
       var g = {
         // This tag allows us to uniquely identify this as a React Element
         $$typeof: e,
@@ -444,7 +445,7 @@ function Sn() {
         ref: u,
         props: b,
         // Record the component responsible for creating this element.
-        _owner: C
+        _owner: I
       };
       return g._store = {}, Object.defineProperty(g._store, "validated", {
         configurable: !1,
@@ -455,7 +456,7 @@ function Sn() {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: v
+        value: p
       }), Object.defineProperty(g, "_source", {
         configurable: !1,
         enumerable: !1,
@@ -463,38 +464,38 @@ function Sn() {
         value: T
       }), Object.freeze && (Object.freeze(g.props), Object.freeze(g)), g;
     };
-    function hr(r, s, u, v, T) {
+    function pr(r, s, u, p, T) {
       {
-        var C, b = {}, g = null, N = null;
-        u !== void 0 && (ht(u), g = "" + u), cr(s) && (ht(s.key), g = "" + s.key), lr(s) && (N = s.ref, ur(s, T));
-        for (C in s)
-          Te.call(s, C) && !sr.hasOwnProperty(C) && (b[C] = s[C]);
+        var I, b = {}, g = null, N = null;
+        u !== void 0 && (vt(u), g = "" + u), fr(s) && (vt(s.key), g = "" + s.key), ur(s) && (N = s.ref, dr(s, T));
+        for (I in s)
+          Te.call(s, I) && !cr.hasOwnProperty(I) && (b[I] = s[I]);
         if (r && r.defaultProps) {
           var O = r.defaultProps;
-          for (C in O)
-            b[C] === void 0 && (b[C] = O[C]);
+          for (I in O)
+            b[I] === void 0 && (b[I] = O[I]);
         }
         if (g || N) {
           var M = typeof r == "function" ? r.displayName || r.name || "Unknown" : r;
-          g && fr(b, M), N && dr(b, M);
+          g && mr(b, M), N && hr(b, M);
         }
-        return mr(r, g, N, T, v, vt.current, b);
+        return vr(r, g, N, T, p, pt.current, b);
       }
     }
-    var He = z.ReactCurrentOwner, gt = z.ReactDebugCurrentFrame;
-    function fe(r) {
+    var He = L.ReactCurrentOwner, bt = L.ReactDebugCurrentFrame;
+    function de(r) {
       if (r) {
         var s = r._owner, u = ae(r.type, r._source, s ? s.type : null);
-        gt.setExtraStackFrame(u);
+        bt.setExtraStackFrame(u);
       } else
-        gt.setExtraStackFrame(null);
+        bt.setExtraStackFrame(null);
     }
     var Ge;
     Ge = !1;
     function Je(r) {
       return typeof r == "object" && r !== null && r.$$typeof === e;
     }
-    function bt() {
+    function Et() {
       {
         if (He.current) {
           var r = K(He.current.type);
@@ -506,13 +507,13 @@ Check the render method of \`` + r + "`.";
         return "";
       }
     }
-    function vr(r) {
+    function yr(r) {
       return "";
     }
-    var Et = {};
-    function pr(r) {
+    var Tt = {};
+    function gr(r) {
       {
-        var s = bt();
+        var s = Et();
         if (!s) {
           var u = typeof r == "string" ? r : r.displayName || r.name;
           u && (s = `
@@ -522,39 +523,39 @@ Check the top-level render call using <` + u + ">.");
         return s;
       }
     }
-    function Tt(r, s) {
+    function xt(r, s) {
       {
         if (!r._store || r._store.validated || r.key != null)
           return;
         r._store.validated = !0;
-        var u = pr(s);
-        if (Et[u])
+        var u = gr(s);
+        if (Tt[u])
           return;
-        Et[u] = !0;
-        var v = "";
-        r && r._owner && r._owner !== He.current && (v = " It was passed a child from " + K(r._owner.type) + "."), fe(r), I('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', u, v), fe(null);
+        Tt[u] = !0;
+        var p = "";
+        r && r._owner && r._owner !== He.current && (p = " It was passed a child from " + K(r._owner.type) + "."), de(r), C('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', u, p), de(null);
       }
     }
-    function xt(r, s) {
+    function St(r, s) {
       {
         if (typeof r != "object")
           return;
         if (qe(r))
           for (var u = 0; u < r.length; u++) {
-            var v = r[u];
-            Je(v) && Tt(v, s);
+            var p = r[u];
+            Je(p) && xt(p, s);
           }
         else if (Je(r))
           r._store && (r._store.validated = !0);
         else if (r) {
-          var T = Q(r);
+          var T = Z(r);
           if (typeof T == "function" && T !== r.entries)
-            for (var C = T.call(r), b; !(b = C.next()).done; )
-              Je(b.value) && Tt(b.value, s);
+            for (var I = T.call(r), b; !(b = I.next()).done; )
+              Je(b.value) && xt(b.value, s);
         }
       }
     }
-    function yr(r) {
+    function br(r) {
       {
         var s = r.type;
         if (s == null || typeof s == "string")
@@ -562,95 +563,95 @@ Check the top-level render call using <` + u + ">.");
         var u;
         if (typeof s == "function")
           u = s.propTypes;
-        else if (typeof s == "object" && (s.$$typeof === m || // Note: Memo only checks outer props here.
+        else if (typeof s == "object" && (s.$$typeof === v || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
-        s.$$typeof === P))
+        s.$$typeof === R))
           u = s.propTypes;
         else
           return;
         if (u) {
-          var v = K(s);
-          nr(u, r.props, "prop", v, r);
+          var p = K(s);
+          or(u, r.props, "prop", p, r);
         } else if (s.PropTypes !== void 0 && !Ge) {
           Ge = !0;
           var T = K(s);
-          I("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", T || "Unknown");
+          C("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", T || "Unknown");
         }
-        typeof s.getDefaultProps == "function" && !s.getDefaultProps.isReactClassApproved && I("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+        typeof s.getDefaultProps == "function" && !s.getDefaultProps.isReactClassApproved && C("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
     }
-    function gr(r) {
+    function Er(r) {
       {
         for (var s = Object.keys(r.props), u = 0; u < s.length; u++) {
-          var v = s[u];
-          if (v !== "children" && v !== "key") {
-            fe(r), I("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", v), fe(null);
+          var p = s[u];
+          if (p !== "children" && p !== "key") {
+            de(r), C("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", p), de(null);
             break;
           }
         }
-        r.ref !== null && (fe(r), I("Invalid attribute `ref` supplied to `React.Fragment`."), fe(null));
+        r.ref !== null && (de(r), C("Invalid attribute `ref` supplied to `React.Fragment`."), de(null));
       }
     }
-    var St = {};
-    function Ct(r, s, u, v, T, C) {
+    var It = {};
+    function Ct(r, s, u, p, T, I) {
       {
         var b = Ve(r);
         if (!b) {
           var g = "";
           (r === void 0 || typeof r == "object" && r !== null && Object.keys(r).length === 0) && (g += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var N = vr();
-          N ? g += N : g += bt();
+          var N = yr();
+          N ? g += N : g += Et();
           var O;
-          r === null ? O = "null" : qe(r) ? O = "array" : r !== void 0 && r.$$typeof === e ? (O = "<" + (K(r.type) || "Unknown") + " />", g = " Did you accidentally export a JSX literal instead of a component?") : O = typeof r, I("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", O, g);
+          r === null ? O = "null" : qe(r) ? O = "array" : r !== void 0 && r.$$typeof === e ? (O = "<" + (K(r.type) || "Unknown") + " />", g = " Did you accidentally export a JSX literal instead of a component?") : O = typeof r, C("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", O, g);
         }
-        var M = hr(r, s, u, T, C);
+        var M = pr(r, s, u, T, I);
         if (M == null)
           return M;
         if (b) {
           var W = s.children;
           if (W !== void 0)
-            if (v)
+            if (p)
               if (qe(W)) {
-                for (var de = 0; de < W.length; de++)
-                  xt(W[de], r);
+                for (var me = 0; me < W.length; me++)
+                  St(W[me], r);
                 Object.freeze && Object.freeze(W);
               } else
-                I("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+                C("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
             else
-              xt(W, r);
+              St(W, r);
         }
         if (Te.call(s, "key")) {
-          var se = K(r), V = Object.keys(s).filter(function(Cr) {
-            return Cr !== "key";
-          }), Ke = V.length > 0 ? "{key: someKey, " + V.join(": ..., ") + ": ...}" : "{key: someKey}";
-          if (!St[se + Ke]) {
-            var Sr = V.length > 0 ? "{" + V.join(": ..., ") + ": ...}" : "{}";
-            I(`A props object containing a "key" prop is being spread into JSX:
+          var se = K(r), Y = Object.keys(s).filter(function(Rr) {
+            return Rr !== "key";
+          }), Ke = Y.length > 0 ? "{key: someKey, " + Y.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!It[se + Ke]) {
+            var Cr = Y.length > 0 ? "{" + Y.join(": ..., ") + ": ...}" : "{}";
+            C(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`, Ke, se, Sr, se), St[se + Ke] = !0;
+  <%s key={someKey} {...props} />`, Ke, se, Cr, se), It[se + Ke] = !0;
           }
         }
-        return r === i ? gr(M) : yr(M), M;
+        return r === i ? Er(M) : br(M), M;
       }
     }
-    function br(r, s, u) {
+    function Tr(r, s, u) {
       return Ct(r, s, u, !0);
     }
-    function Er(r, s, u) {
+    function xr(r, s, u) {
       return Ct(r, s, u, !1);
     }
-    var Tr = Er, xr = br;
-    Se.Fragment = i, Se.jsx = Tr, Se.jsxs = xr;
-  }()), Se;
+    var Sr = xr, Ir = Tr;
+    Se.Fragment = i, Se.jsx = Sr, Se.jsxs = Ir;
+  })()), Se;
 }
 var _t;
-function Cn() {
+function In() {
   return _t || (_t = 1, process.env.NODE_ENV === "production" ? $e.exports = xn() : $e.exports = Sn()), $e.exports;
 }
-var Ie = Cn(), De = { exports: {} }, x = {};
+var Ce = In(), De = { exports: {} }, x = {};
 /** @license React v16.13.1
  * react-is.production.min.js
  *
@@ -660,22 +661,22 @@ var Ie = Cn(), De = { exports: {} }, x = {};
  * LICENSE file in the root directory of this source tree.
  */
 var At;
-function In() {
+function Cn() {
   if (At) return x;
   At = 1;
-  var t = typeof Symbol == "function" && Symbol.for, e = t ? Symbol.for("react.element") : 60103, n = t ? Symbol.for("react.portal") : 60106, i = t ? Symbol.for("react.fragment") : 60107, a = t ? Symbol.for("react.strict_mode") : 60108, l = t ? Symbol.for("react.profiler") : 60114, f = t ? Symbol.for("react.provider") : 60109, h = t ? Symbol.for("react.context") : 60110, m = t ? Symbol.for("react.async_mode") : 60111, p = t ? Symbol.for("react.concurrent_mode") : 60111, E = t ? Symbol.for("react.forward_ref") : 60112, P = t ? Symbol.for("react.suspense") : 60113, D = t ? Symbol.for("react.suspense_list") : 60120, j = t ? Symbol.for("react.memo") : 60115, A = t ? Symbol.for("react.lazy") : 60116, B = t ? Symbol.for("react.block") : 60121, Q = t ? Symbol.for("react.fundamental") : 60117, z = t ? Symbol.for("react.responder") : 60118, I = t ? Symbol.for("react.scope") : 60119;
+  var t = typeof Symbol == "function" && Symbol.for, e = t ? Symbol.for("react.element") : 60103, n = t ? Symbol.for("react.portal") : 60106, i = t ? Symbol.for("react.fragment") : 60107, a = t ? Symbol.for("react.strict_mode") : 60108, l = t ? Symbol.for("react.profiler") : 60114, f = t ? Symbol.for("react.provider") : 60109, h = t ? Symbol.for("react.context") : 60110, v = t ? Symbol.for("react.async_mode") : 60111, m = t ? Symbol.for("react.concurrent_mode") : 60111, E = t ? Symbol.for("react.forward_ref") : 60112, R = t ? Symbol.for("react.suspense") : 60113, z = t ? Symbol.for("react.suspense_list") : 60120, j = t ? Symbol.for("react.memo") : 60115, A = t ? Symbol.for("react.lazy") : 60116, B = t ? Symbol.for("react.block") : 60121, Z = t ? Symbol.for("react.fundamental") : 60117, L = t ? Symbol.for("react.responder") : 60118, C = t ? Symbol.for("react.scope") : 60119;
   function k(c) {
     if (typeof c == "object" && c !== null) {
-      var L = c.$$typeof;
-      switch (L) {
+      var V = c.$$typeof;
+      switch (V) {
         case e:
           switch (c = c.type, c) {
+            case v:
             case m:
-            case p:
             case i:
             case l:
             case a:
-            case P:
+            case R:
               return c;
             default:
               switch (c = c && c.$$typeof, c) {
@@ -686,19 +687,19 @@ function In() {
                 case f:
                   return c;
                 default:
-                  return L;
+                  return V;
               }
           }
         case n:
-          return L;
+          return V;
       }
     }
   }
   function w(c) {
-    return k(c) === p;
+    return k(c) === m;
   }
-  return x.AsyncMode = m, x.ConcurrentMode = p, x.ContextConsumer = h, x.ContextProvider = f, x.Element = e, x.ForwardRef = E, x.Fragment = i, x.Lazy = A, x.Memo = j, x.Portal = n, x.Profiler = l, x.StrictMode = a, x.Suspense = P, x.isAsyncMode = function(c) {
-    return w(c) || k(c) === m;
+  return x.AsyncMode = v, x.ConcurrentMode = m, x.ContextConsumer = h, x.ContextProvider = f, x.Element = e, x.ForwardRef = E, x.Fragment = i, x.Lazy = A, x.Memo = j, x.Portal = n, x.Profiler = l, x.StrictMode = a, x.Suspense = R, x.isAsyncMode = function(c) {
+    return w(c) || k(c) === v;
   }, x.isConcurrentMode = w, x.isContextConsumer = function(c) {
     return k(c) === h;
   }, x.isContextProvider = function(c) {
@@ -720,9 +721,9 @@ function In() {
   }, x.isStrictMode = function(c) {
     return k(c) === a;
   }, x.isSuspense = function(c) {
-    return k(c) === P;
+    return k(c) === R;
   }, x.isValidElementType = function(c) {
-    return typeof c == "string" || typeof c == "function" || c === i || c === p || c === l || c === a || c === P || c === D || typeof c == "object" && c !== null && (c.$$typeof === A || c.$$typeof === j || c.$$typeof === f || c.$$typeof === h || c.$$typeof === E || c.$$typeof === Q || c.$$typeof === z || c.$$typeof === I || c.$$typeof === B);
+    return typeof c == "string" || typeof c == "function" || c === i || c === m || c === l || c === a || c === R || c === z || typeof c == "object" && c !== null && (c.$$typeof === A || c.$$typeof === j || c.$$typeof === f || c.$$typeof === h || c.$$typeof === E || c.$$typeof === Z || c.$$typeof === L || c.$$typeof === C || c.$$typeof === B);
   }, x.typeOf = k, x;
 }
 var S = {};
@@ -735,29 +736,29 @@ var S = {};
  * LICENSE file in the root directory of this source tree.
  */
 var kt;
-function Pn() {
-  return kt || (kt = 1, process.env.NODE_ENV !== "production" && function() {
-    var t = typeof Symbol == "function" && Symbol.for, e = t ? Symbol.for("react.element") : 60103, n = t ? Symbol.for("react.portal") : 60106, i = t ? Symbol.for("react.fragment") : 60107, a = t ? Symbol.for("react.strict_mode") : 60108, l = t ? Symbol.for("react.profiler") : 60114, f = t ? Symbol.for("react.provider") : 60109, h = t ? Symbol.for("react.context") : 60110, m = t ? Symbol.for("react.async_mode") : 60111, p = t ? Symbol.for("react.concurrent_mode") : 60111, E = t ? Symbol.for("react.forward_ref") : 60112, P = t ? Symbol.for("react.suspense") : 60113, D = t ? Symbol.for("react.suspense_list") : 60120, j = t ? Symbol.for("react.memo") : 60115, A = t ? Symbol.for("react.lazy") : 60116, B = t ? Symbol.for("react.block") : 60121, Q = t ? Symbol.for("react.fundamental") : 60117, z = t ? Symbol.for("react.responder") : 60118, I = t ? Symbol.for("react.scope") : 60119;
+function Rn() {
+  return kt || (kt = 1, process.env.NODE_ENV !== "production" && (function() {
+    var t = typeof Symbol == "function" && Symbol.for, e = t ? Symbol.for("react.element") : 60103, n = t ? Symbol.for("react.portal") : 60106, i = t ? Symbol.for("react.fragment") : 60107, a = t ? Symbol.for("react.strict_mode") : 60108, l = t ? Symbol.for("react.profiler") : 60114, f = t ? Symbol.for("react.provider") : 60109, h = t ? Symbol.for("react.context") : 60110, v = t ? Symbol.for("react.async_mode") : 60111, m = t ? Symbol.for("react.concurrent_mode") : 60111, E = t ? Symbol.for("react.forward_ref") : 60112, R = t ? Symbol.for("react.suspense") : 60113, z = t ? Symbol.for("react.suspense_list") : 60120, j = t ? Symbol.for("react.memo") : 60115, A = t ? Symbol.for("react.lazy") : 60116, B = t ? Symbol.for("react.block") : 60121, Z = t ? Symbol.for("react.fundamental") : 60117, L = t ? Symbol.for("react.responder") : 60118, C = t ? Symbol.for("react.scope") : 60119;
     function k(d) {
       return typeof d == "string" || typeof d == "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-      d === i || d === p || d === l || d === a || d === P || d === D || typeof d == "object" && d !== null && (d.$$typeof === A || d.$$typeof === j || d.$$typeof === f || d.$$typeof === h || d.$$typeof === E || d.$$typeof === Q || d.$$typeof === z || d.$$typeof === I || d.$$typeof === B);
+      d === i || d === m || d === l || d === a || d === R || d === z || typeof d == "object" && d !== null && (d.$$typeof === A || d.$$typeof === j || d.$$typeof === f || d.$$typeof === h || d.$$typeof === E || d.$$typeof === Z || d.$$typeof === L || d.$$typeof === C || d.$$typeof === B);
     }
     function w(d) {
       if (typeof d == "object" && d !== null) {
         var Ee = d.$$typeof;
         switch (Ee) {
           case e:
-            var ue = d.type;
-            switch (ue) {
+            var fe = d.type;
+            switch (fe) {
+              case v:
               case m:
-              case p:
               case i:
               case l:
               case a:
-              case P:
-                return ue;
+              case R:
+                return fe;
               default:
-                var ae = ue && ue.$$typeof;
+                var ae = fe && fe.$$typeof;
                 switch (ae) {
                   case h:
                   case E:
@@ -774,12 +775,12 @@ function Pn() {
         }
       }
     }
-    var c = m, L = p, he = h, Re = f, we = e, Ve = E, Ye = i, Oe = A, K = j, ee = n, oe = l, _e = a, Ae = P, ve = !1;
+    var c = v, V = m, he = h, Pe = f, we = e, Ve = E, Ye = i, Oe = A, K = j, Q = n, oe = l, _e = a, Ae = R, ve = !1;
     function ke(d) {
-      return ve || (ve = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), pe(d) || w(d) === m;
+      return ve || (ve = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), pe(d) || w(d) === v;
     }
     function pe(d) {
-      return w(d) === p;
+      return w(d) === m;
     }
     function Me(d) {
       return w(d) === h;
@@ -802,30 +803,30 @@ function Pn() {
     function ge(d) {
       return w(d) === j;
     }
-    function le(d) {
+    function ce(d) {
       return w(d) === n;
     }
     function be(d) {
       return w(d) === l;
     }
-    function ce(d) {
+    function ue(d) {
       return w(d) === a;
     }
     function Ue(d) {
-      return w(d) === P;
+      return w(d) === R;
     }
-    S.AsyncMode = c, S.ConcurrentMode = L, S.ContextConsumer = he, S.ContextProvider = Re, S.Element = we, S.ForwardRef = Ve, S.Fragment = Ye, S.Lazy = Oe, S.Memo = K, S.Portal = ee, S.Profiler = oe, S.StrictMode = _e, S.Suspense = Ae, S.isAsyncMode = ke, S.isConcurrentMode = pe, S.isContextConsumer = Me, S.isContextProvider = Fe, S.isElement = je, S.isForwardRef = Be, S.isFragment = We, S.isLazy = ye, S.isMemo = ge, S.isPortal = le, S.isProfiler = be, S.isStrictMode = ce, S.isSuspense = Ue, S.isValidElementType = k, S.typeOf = w;
-  }()), S;
+    S.AsyncMode = c, S.ConcurrentMode = V, S.ContextConsumer = he, S.ContextProvider = Pe, S.Element = we, S.ForwardRef = Ve, S.Fragment = Ye, S.Lazy = Oe, S.Memo = K, S.Portal = Q, S.Profiler = oe, S.StrictMode = _e, S.Suspense = Ae, S.isAsyncMode = ke, S.isConcurrentMode = pe, S.isContextConsumer = Me, S.isContextProvider = Fe, S.isElement = je, S.isForwardRef = Be, S.isFragment = We, S.isLazy = ye, S.isMemo = ge, S.isPortal = ce, S.isProfiler = be, S.isStrictMode = ue, S.isSuspense = Ue, S.isValidElementType = k, S.typeOf = w;
+  })()), S;
 }
 var Mt;
-function Rn() {
-  return Mt || (Mt = 1, process.env.NODE_ENV === "production" ? De.exports = In() : De.exports = Pn()), De.exports;
+function Pn() {
+  return Mt || (Mt = 1, process.env.NODE_ENV === "production" ? De.exports = Cn() : De.exports = Rn()), De.exports;
 }
 var Ze, Ft;
 function wn() {
   if (Ft) return Ze;
   Ft = 1;
-  var t = Rn(), e = {
+  var t = Pn(), e = {
     childContextTypes: !0,
     contextType: !0,
     contextTypes: !0,
@@ -863,21 +864,21 @@ function wn() {
   function f(A) {
     return t.isMemo(A) ? a : l[A.$$typeof] || e;
   }
-  var h = Object.defineProperty, m = Object.getOwnPropertyNames, p = Object.getOwnPropertySymbols, E = Object.getOwnPropertyDescriptor, P = Object.getPrototypeOf, D = Object.prototype;
-  function j(A, B, Q) {
+  var h = Object.defineProperty, v = Object.getOwnPropertyNames, m = Object.getOwnPropertySymbols, E = Object.getOwnPropertyDescriptor, R = Object.getPrototypeOf, z = Object.prototype;
+  function j(A, B, Z) {
     if (typeof B != "string") {
-      if (D) {
-        var z = P(B);
-        z && z !== D && j(A, z, Q);
+      if (z) {
+        var L = R(B);
+        L && L !== z && j(A, L, Z);
       }
-      var I = m(B);
-      p && (I = I.concat(p(B)));
-      for (var k = f(A), w = f(B), c = 0; c < I.length; ++c) {
-        var L = I[c];
-        if (!n[L] && !(Q && Q[L]) && !(w && w[L]) && !(k && k[L])) {
-          var he = E(B, L);
+      var C = v(B);
+      m && (C = C.concat(m(B)));
+      for (var k = f(A), w = f(B), c = 0; c < C.length; ++c) {
+        var V = C[c];
+        if (!n[V] && !(Z && Z[V]) && !(w && w[V]) && !(k && k[V])) {
+          var he = E(B, V);
           try {
-            h(A, L, he);
+            h(A, V, he);
           } catch {
           }
         }
@@ -895,7 +896,7 @@ function _n(t, e, n) {
     t[a] !== void 0 ? e.push(t[a] + ";") : a && (i += a + " ");
   }), i;
 }
-var Jt = function(e, n, i) {
+var Kt = function(e, n, i) {
   var a = e.key + "-" + n.name;
   // we only need to add the styles to the registered cache if the
   // class name could be used further down
@@ -908,7 +909,7 @@ var Jt = function(e, n, i) {
   // also, note that this check will be dead code eliminated in the browser
   On === !1) && e.registered[a] === void 0 && (e.registered[a] = n.styles);
 }, An = function(e, n, i) {
-  Jt(e, n, i);
+  Kt(e, n, i);
   var a = e.key + "-" + n.name;
   if (e.inserted[n.name] === void 0) {
     var l = n;
@@ -992,12 +993,12 @@ function Fn(t) {
     return e[n] === void 0 && (e[n] = t(n)), e[n];
   };
 }
-var jn = /[A-Z]|^ms/g, Nn = /_EMO_([^_]+?)_([^]*?)_EMO_/g, Kt = function(e) {
+var jn = /[A-Z]|^ms/g, Nn = /_EMO_([^_]+?)_([^]*?)_EMO_/g, Xt = function(e) {
   return e.charCodeAt(1) === 45;
 }, jt = function(e) {
   return e != null && typeof e != "boolean";
 }, Qe = /* @__PURE__ */ Fn(function(t) {
-  return Kt(t) ? t : t.replace(jn, "-$&").toLowerCase();
+  return Xt(t) ? t : t.replace(jn, "-$&").toLowerCase();
 }), Nt = function(e, n) {
   switch (e) {
     case "animation":
@@ -1011,9 +1012,9 @@ var jn = /[A-Z]|^ms/g, Nn = /_EMO_([^_]+?)_([^]*?)_EMO_/g, Kt = function(e) {
           }, a;
         });
   }
-  return Mn[e] !== 1 && !Kt(e) && typeof n == "number" && n !== 0 ? n + "px" : n;
+  return Mn[e] !== 1 && !Xt(e) && typeof n == "number" && n !== 0 ? n + "px" : n;
 };
-function Pe(t, e, n) {
+function Re(t, e, n) {
   if (n == null)
     return "";
   var i = n;
@@ -1047,8 +1048,8 @@ function Pe(t, e, n) {
     }
     case "function": {
       if (t !== void 0) {
-        var m = X, p = n(t);
-        return X = m, Pe(t, e, p);
+        var v = X, m = n(t);
+        return X = v, Re(t, e, m);
       }
       break;
     }
@@ -1060,7 +1061,7 @@ function $n(t, e, n) {
   var i = "";
   if (Array.isArray(n))
     for (var a = 0; a < n.length; a++)
-      i += Pe(t, e, n[a]) + ";";
+      i += Re(t, e, n[a]) + ";";
   else
     for (var l in n) {
       var f = n[l];
@@ -1068,18 +1069,18 @@ function $n(t, e, n) {
         var h = f;
         jt(h) && (i += Qe(l) + ":" + Nt(l, h) + ";");
       } else if (Array.isArray(f) && typeof f[0] == "string" && e == null)
-        for (var m = 0; m < f.length; m++)
-          jt(f[m]) && (i += Qe(l) + ":" + Nt(l, f[m]) + ";");
+        for (var v = 0; v < f.length; v++)
+          jt(f[v]) && (i += Qe(l) + ":" + Nt(l, f[v]) + ";");
       else {
-        var p = Pe(t, e, f);
+        var m = Re(t, e, f);
         switch (l) {
           case "animation":
           case "animationName": {
-            i += Qe(l) + ":" + p + ";";
+            i += Qe(l) + ":" + m + ";";
             break;
           }
           default:
-            i += l + "{" + p + "}";
+            i += l + "{" + m + "}";
         }
       }
     }
@@ -1093,164 +1094,182 @@ function Dn(t, e, n) {
   X = void 0;
   var l = t[0];
   if (l == null || l.raw === void 0)
-    i = !1, a += Pe(n, e, l);
+    i = !1, a += Re(n, e, l);
   else {
     var f = l;
     a += f[0];
   }
   for (var h = 1; h < t.length; h++)
-    if (a += Pe(n, e, t[h]), i) {
-      var m = l;
-      a += m[h];
+    if (a += Re(n, e, t[h]), i) {
+      var v = l;
+      a += v[h];
     }
   $t.lastIndex = 0;
-  for (var p = "", E; (E = $t.exec(a)) !== null; )
-    p += "-" + E[1];
-  var P = kn(a) + p;
+  for (var m = "", E; (E = $t.exec(a)) !== null; )
+    m += "-" + E[1];
+  var R = kn(a) + m;
   return {
-    name: P,
+    name: R,
     styles: a,
     next: X
   };
 }
 var zn = function(e) {
   return e();
-}, Ln = re.useInsertionEffect ? re.useInsertionEffect : !1, Vn = Ln || zn, Xt = /* @__PURE__ */ re.createContext(
+}, Ln = te.useInsertionEffect ? te.useInsertionEffect : !1, Vn = Ln || zn, Zt = /* @__PURE__ */ te.createContext(
   // we're doing this to avoid preconstruct's dead code elimination in this one case
   // because this module is primarily intended for the browser and node
   // but it's also required in react native and similar environments sometimes
   // and we could have a special build just for that
   // but this is much easier and the native packages
   // might use a different theme context in the future anyway
-  typeof HTMLElement < "u" ? /* @__PURE__ */ kr({
+  typeof HTMLElement < "u" ? /* @__PURE__ */ Fr({
     key: "css"
   }) : null
 );
-Xt.Provider;
+Zt.Provider;
 var Yn = function(e) {
-  return /* @__PURE__ */ Or(function(n, i) {
-    var a = st(Xt);
+  return /* @__PURE__ */ Ar(function(n, i) {
+    var a = at(Zt);
     return e(n, a, i);
   });
-}, Bn = /* @__PURE__ */ re.createContext({}), ze = {}.hasOwnProperty, it = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__", Zt = function(e, n) {
+}, Bn = /* @__PURE__ */ te.createContext({}), ze = {}.hasOwnProperty, nt = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__", Qt = function(e, n) {
   var i = {};
   for (var a in n)
     ze.call(n, a) && (i[a] = n[a]);
-  return i[it] = e, i;
+  return i[nt] = e, i;
 }, Wn = function(e) {
   var n = e.cache, i = e.serialized, a = e.isStringTag;
-  return Jt(n, i, a), Vn(function() {
+  return Kt(n, i, a), Vn(function() {
     return An(n, i, a);
   }), null;
 }, Un = /* @__PURE__ */ Yn(function(t, e, n) {
   var i = t.css;
   typeof i == "string" && e.registered[i] !== void 0 && (i = e.registered[i]);
-  var a = t[it], l = [i], f = "";
+  var a = t[nt], l = [i], f = "";
   typeof t.className == "string" ? f = _n(e.registered, l, t.className) : t.className != null && (f = t.className + " ");
-  var h = Dn(l, void 0, re.useContext(Bn));
+  var h = Dn(l, void 0, te.useContext(Bn));
   f += e.key + "-" + h.name;
-  var m = {};
-  for (var p in t)
-    ze.call(t, p) && p !== "css" && p !== it && (m[p] = t[p]);
-  return m.className = f, n && (m.ref = n), /* @__PURE__ */ re.createElement(re.Fragment, null, /* @__PURE__ */ re.createElement(Wn, {
+  var v = {};
+  for (var m in t)
+    ze.call(t, m) && m !== "css" && m !== nt && (v[m] = t[m]);
+  return v.className = f, n && (v.ref = n), /* @__PURE__ */ te.createElement(te.Fragment, null, /* @__PURE__ */ te.createElement(Wn, {
     cache: e,
     serialized: h,
     isStringTag: typeof a == "string"
-  }), /* @__PURE__ */ re.createElement(a, m));
-}), Qt = Un, Le = Ie.Fragment, o = function(e, n, i) {
-  return ze.call(n, "css") ? Ie.jsx(Qt, Zt(e, n), i) : Ie.jsx(e, n, i);
+  }), /* @__PURE__ */ te.createElement(a, v));
+}), er = Un, Le = Ce.Fragment, o = function(e, n, i) {
+  return ze.call(n, "css") ? Ce.jsx(er, Qt(e, n), i) : Ce.jsx(e, n, i);
 }, F = function(e, n, i) {
-  return ze.call(n, "css") ? Ie.jsxs(Qt, Zt(e, n), i) : Ie.jsxs(e, n, i);
+  return ze.call(n, "css") ? Ce.jsxs(er, Qt(e, n), i) : Ce.jsxs(e, n, i);
 };
 const qn = ({
-  onCancel: t,
-  onSave: e
+  breadcrumbs: t,
+  tabs: e,
+  ...n
 }) => {
-  const [n, i] = q(""), [a, l] = q(""), [f, h] = q(!1);
-  return /* @__PURE__ */ F(zr, { onClose: t, initialFocus: "[name=url]", children: [
-    /* @__PURE__ */ o(Fr, { children: /* @__PURE__ */ o(Mr, { children: "Add video" }) }),
-    /* @__PURE__ */ o(Nr, { children: /* @__PURE__ */ F(jr, { component: "form", children: [
-      /* @__PURE__ */ o(tt, { label: "URL", children: /* @__PURE__ */ o(
-        It,
-        {
-          name: "url",
-          value: n,
-          onChange: (m) => i(m.target.value)
+  const i = bn();
+  return /* @__PURE__ */ o(
+    lt.Header,
+    {
+      ...n,
+      breadcrumbs: t == null ? void 0 : t.map(({ linkProps: a, ...l }) => ({
+        ...l,
+        href: a === void 0 ? void 0 : i.buildLocation(
+          a
+          /* FIXME */
+        ).href,
+        onClick: a === void 0 ? void 0 : async (f) => {
+          f.preventDefault(), await i.navigate(a);
         }
-      ) }),
-      /* @__PURE__ */ o(tt, { label: "Title", children: /* @__PURE__ */ o(
-        It,
-        {
-          name: "title",
-          value: a,
-          onChange: (m) => l(m.target.value)
+      })),
+      tabs: e == null ? void 0 : e.map(({ linkProps: a, ...l }) => ({
+        ...l,
+        href: a === void 0 ? void 0 : i.buildLocation(
+          a
+          /* FIXME */
+        ).href,
+        onClick: a === void 0 ? void 0 : async (f) => {
+          f.preventDefault(), await i.navigate(a);
         }
-      ) })
-    ] }) }),
-    /* @__PURE__ */ F($r, { children: [
-      /* @__PURE__ */ o(Dr, { onClick: t, children: "Cancel" }),
+      }))
+    }
+  );
+}, Hn = ({
+  onCancel: t,
+  onSave: e
+}) => {
+  const n = $r({ prefix: "modalForm" }), [i, a] = q(""), [l, f] = q(""), [h, v] = q(!1);
+  return /* @__PURE__ */ F(Br, { onClose: t, initialFocus: "[name=url]", children: [
+    /* @__PURE__ */ o(zr, { children: /* @__PURE__ */ o(Dr, { children: "Add video" }) }),
+    /* @__PURE__ */ o(Vr, { children: /* @__PURE__ */ F(
+      Lr,
+      {
+        id: n,
+        component: "form",
+        onSubmit: async (m) => {
+          m.preventDefault();
+          try {
+            v(!0), await e({ url: i, title: l });
+          } finally {
+            v(!1);
+          }
+        },
+        children: [
+          /* @__PURE__ */ o(tt, { label: "URL", children: /* @__PURE__ */ o(
+            Rt,
+            {
+              name: "url",
+              value: i,
+              onChange: (m) => a(m.target.value)
+            }
+          ) }),
+          /* @__PURE__ */ o(tt, { label: "Title", children: /* @__PURE__ */ o(
+            Rt,
+            {
+              name: "title",
+              value: l,
+              onChange: (m) => f(m.target.value)
+            }
+          ) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ F(Yr, { children: [
+      /* @__PURE__ */ o(Vt, { onClick: t, children: "Cancel" }),
       /* @__PURE__ */ o(
-        ne,
+        re,
         {
           type: "submit",
-          onClick: async () => {
-            try {
-              h(!0), await e({ url: n, title: a });
-            } finally {
-              h(!1);
-            }
-          },
+          form: n,
           fill: !0,
-          disabled: n.trim().length === 0,
-          isLoading: f,
-          children: "Save"
+          disabled: i.trim().length === 0,
+          isLoading: h,
+          children: "Add video"
         }
       )
     ] })
   ] });
-};
-function Hn(t) {
-  return t !== null && typeof t == "object" && "title" in t && typeof t.title == "string";
-}
-const Dt = Z(
-  ({ playQueueStore: t }) => {
+}, Dt = ne(
+  ({ onSave: t }) => {
     const [e, n] = q(!1), i = $(
       async (a) => {
-        const l = gn(a.url);
-        if (l !== void 0) {
-          const f = l.extractVideoId(a.url);
-          if (f !== void 0) {
-            const m = await (await fetch(
-              `https://noembed.com/embed?url=${encodeURIComponent(
-                a.url
-              )}`
-            )).json();
-            await t.addItems([
-              t.createItem({
-                url: a.url,
-                type: l.type,
-                videoId: f,
-                title: a.title || (Hn(m) ? m.title : f)
-              })
-            ]);
-          }
-        }
-        n(!1);
+        await t(a), n(!1);
       },
       [t]
     );
     return /* @__PURE__ */ F(Le, { children: [
       /* @__PURE__ */ o(
-        ne,
+        re,
         {
           onClick: () => n(!0),
-          iconType: ct,
+          iconType: ut,
           color: "primary",
           children: "Add video"
         }
       ),
       e && /* @__PURE__ */ o(
-        qn,
+        Hn,
         {
           onCancel: () => n(!1),
           onSave: i
@@ -1258,11 +1277,19 @@ const Dt = Z(
       )
     ] });
   }
-), Gn = Y(
+), tr = {
+  Audio: "",
+  Dailymotion: "https://www.dailymotion.com/favicon.ico",
+  Niconico: "https://www.nicovideo.jp/favicon.ico",
+  SoundCloud: "https://soundcloud.com/favicon.ico",
+  Twitch: "https://www.twitch.tv/favicon.ico",
+  Vimeo: "https://vimeo.com/favicon.ico",
+  YouTube: "https://www.youtube.com/favicon.ico"
+}, Gn = D(
   ({ playQueueStore: t }) => {
     const { euiTheme: e } = Yt();
     return /* @__PURE__ */ F(
-      Vr,
+      Ur,
       {
         style: {
           position: "sticky",
@@ -1271,7 +1298,7 @@ const Dt = Z(
           background: e.colors.backgroundBasePlain
         },
         children: [
-          /* @__PURE__ */ o(Lr, { children: /* @__PURE__ */ o(
+          /* @__PURE__ */ o(Wr, { children: /* @__PURE__ */ o(
             Bt,
             {
               id: "",
@@ -1288,102 +1315,94 @@ const Dt = Z(
       }
     );
   }
-), Jn = Z(
+), Jn = ne(
   ({
     item: t,
     closePopover: e
   }) => {
-    const n = Z(
-      ({
-        onClick: i,
-        ...a
-      }) => {
-        const l = $(
-          (f) => {
-            e(), i == null || i(f);
-          },
-          [i]
-        );
-        return /* @__PURE__ */ o(Yr, { ...a, onClick: l });
-      }
-    );
-    return /* @__PURE__ */ F(Br, { children: [
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: "" }),
-          onClick: t.playFirst,
-          children: "Play first"
-        }
-      ),
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: "" }),
-          onClick: t.playNext,
-          children: "Play next"
-        }
-      ),
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: ct }),
-          onClick: t.addToPlayQueue,
-          children: "Add to play queue"
-        }
-      ),
-      /* @__PURE__ */ o(Pt, { margin: "none" }),
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: en }),
-          onClick: t.moveToTop,
-          disabled: !t.canMoveToTop,
-          children: "Move to the top"
-        }
-      ),
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: tn }),
-          onClick: t.moveToBottom,
-          disabled: !t.canMoveToBottom,
-          children: "Move to the bottom"
-        }
-      ),
-      /* @__PURE__ */ o(Pt, { margin: "none" }),
-      /* @__PURE__ */ o(
-        n,
-        {
-          icon: /* @__PURE__ */ o(H, { type: "" }),
-          onClick: t.removeToTop,
-          disabled: !t.canRemoveToTop,
-          children: "Remove to the top"
-        }
-      ),
-      /* @__PURE__ */ o(
-        n,
+    const n = st(
+      () => [
         {
-          icon: /* @__PURE__ */ o(H, { type: "" }),
-          onClick: t.removeOthers,
-          disabled: !t.canRemoveOthers,
-          children: "Remove others"
+          id: 0,
+          items: [
+            {
+              name: "Play first",
+              icon: /* @__PURE__ */ o(H, { type: "" }),
+              onClick: async () => {
+                e(), await t.playFirst();
+              }
+            },
+            {
+              name: "Play next",
+              icon: /* @__PURE__ */ o(H, { type: "" }),
+              onClick: async () => {
+                e(), await t.playNext();
+              }
+            },
+            {
+              name: "Add to play queue",
+              icon: /* @__PURE__ */ o(H, { type: ut }),
+              onClick: async () => {
+                e(), await t.addToPlayQueue();
+              }
+            },
+            {
+              isSeparator: !0
+            },
+            {
+              name: "Move to the top",
+              icon: /* @__PURE__ */ o(H, { type: tn }),
+              onClick: async () => {
+                e(), t.moveToTop();
+              },
+              disabled: !t.canMoveToTop
+            },
+            {
+              name: "Move to the bottom",
+              icon: /* @__PURE__ */ o(H, { type: rn }),
+              onClick: async () => {
+                e(), t.moveToBottom();
+              },
+              disabled: !t.canMoveToBottom
+            },
+            {
+              isSeparator: !0
+            },
+            {
+              name: "Remove to the top",
+              icon: /* @__PURE__ */ o(H, { type: "" }),
+              onClick: async () => {
+                e(), await t.removeToTop();
+              },
+              disabled: !t.canRemoveToTop
+            },
+            {
+              name: "Remove others",
+              icon: /* @__PURE__ */ o(H, { type: "" }),
+              onClick: async () => {
+                e(), await t.removeOthers();
+              },
+              disabled: !t.canRemoveOthers
+            }
+          ]
         }
-      )
-    ] });
+      ],
+      [e, t]
+    );
+    return /* @__PURE__ */ o(Wt, { initialPanelId: 0, panels: n });
   }
-), Kn = Z(
+), Kn = ne(
   ({ item: t }) => {
     const [e, n] = q(!1), i = $(() => n(!e), [e]), a = $(() => n(!1), []);
     return /* @__PURE__ */ o(
-      lt,
+      ct,
       {
         button: /* @__PURE__ */ o(
           G,
           {
             title: "More options",
             "aria-label": "More options",
-            iconType: qt,
+            iconType: Ht,
             size: "s",
             color: "text",
             onClick: i
@@ -1403,14 +1422,14 @@ const Dt = Z(
       }
     );
   }
-), Xn = Y(
+), Xn = D(
   ({ item: t }) => {
     const e = ie();
     return /* @__PURE__ */ F(rt, { textOnly: !1, hasActions: !0, align: "right", children: [
       /* @__PURE__ */ o(
-        ne,
+        re,
         {
-          iconType: Qr,
+          iconType: en,
           size: "s",
           onClick: async () => {
             t.isCurrent ? await e.setCurrentTime(0) : t.play();
@@ -1419,9 +1438,9 @@ const Dt = Z(
         }
       ),
       /* @__PURE__ */ o(
-        ne,
+        re,
         {
-          iconType: ut,
+          iconType: ft,
           size: "s",
           onClick: t.remove,
           children: "Remove"
@@ -1430,19 +1449,11 @@ const Dt = Z(
       /* @__PURE__ */ o(Kn, { item: t })
     ] });
   }
-), Zn = {
-  Audio: "",
-  Dailymotion: "https://www.dailymotion.com/favicon.ico",
-  Niconico: "https://www.nicovideo.jp/favicon.ico",
-  SoundCloud: "https://soundcloud.com/favicon.ico",
-  Twitch: "https://www.twitch.tv/favicon.ico",
-  Vimeo: "https://vimeo.com/favicon.ico",
-  YouTube: "https://www.youtube.com/favicon.ico"
-}, Qn = Y(
+), Zn = D(
   ({ item: t }) => {
     const e = ie();
-    return /* @__PURE__ */ F(qr, { isSelected: t.isCurrent, children: [
-      /* @__PURE__ */ o(Wr, { children: /* @__PURE__ */ o(
+    return /* @__PURE__ */ F(Gr, { isSelected: t.isCurrent, children: [
+      /* @__PURE__ */ o(qr, { children: /* @__PURE__ */ o(
         Bt,
         {
           id: t.id.toString(),
@@ -1453,14 +1464,14 @@ const Dt = Z(
       /* @__PURE__ */ o(rt, { textOnly: !1, children: /* @__PURE__ */ o(
         "img",
         {
-          src: Zn[t.type],
+          src: tr[t.type],
           width: 16,
           height: 16,
           alt: t.type
         }
       ) }),
       /* @__PURE__ */ o(rt, { children: /* @__PURE__ */ o(
-        Ur,
+        Hr,
         {
           href: t.url,
           target: "_blank",
@@ -1472,34 +1483,48 @@ const Dt = Z(
       /* @__PURE__ */ o(Xn, { item: t })
     ] }, t.id);
   }
-), ei = Y(
+), Qn = D(
   ({ playQueueStore: t }) => /* @__PURE__ */ o(
     En,
     {
       tag: "tbody",
       list: t.items,
       setList: (e) => t.setItems(e),
-      children: t.items.map((e) => /* @__PURE__ */ o(Qn, { item: e }, e.id))
+      children: t.items.map((e) => /* @__PURE__ */ o(Zn, { item: e }, e.id))
     }
   )
-), ti = Y(
-  ({ playQueueStore: t }) => /* @__PURE__ */ F(Hr, { children: [
+), ei = D(
+  ({ playQueueStore: t }) => /* @__PURE__ */ F(Jr, { children: [
     /* @__PURE__ */ o(Gn, { playQueueStore: t }),
-    /* @__PURE__ */ o(ei, { playQueueStore: t })
+    /* @__PURE__ */ o(Qn, { playQueueStore: t })
   ] })
 );
-Y(
+function ti(t) {
+  return t !== null && typeof t == "object" && "title" in t && typeof t.title == "string";
+}
+const ri = D(
+  ({ playQueueStore: t }) => /* @__PURE__ */ o(
+    re,
+    {
+      iconType: ut,
+      onClick: t.addSelectedItems,
+      disabled: t.isEmpty || t.selectedItems.length === 0,
+      children: "Add to play queue"
+    }
+  )
+);
+D(
   ({ playQueueStore: t }) => {
     const [e, n] = q(!1);
     return /* @__PURE__ */ F(Le, { children: [
       e && /* @__PURE__ */ o(
-        Jr,
+        Xr,
         {
           type: "push",
           size: "s",
           onClose: () => n(!1),
           children: /* @__PURE__ */ o("div", { style: { blockSize: "100%" }, children: /* @__PURE__ */ o(
-            Gr,
+            Kr,
             {
               language: "json",
               overflowHeight: "100%",
@@ -1515,22 +1540,45 @@ Y(
         }
       ),
       /* @__PURE__ */ o(
-        ne,
+        re,
         {
           onClick: () => n((i) => !i),
-          iconType: rn,
+          iconType: nn,
           children: "Developer tools"
         }
       )
     ] });
   }
 );
-const ri = Y(
+const ni = D(
   ({ playQueueStore: t }) => {
-    const { euiTheme: e } = Yt();
+    const { euiTheme: e } = Yt(), n = $(
+      async (i) => {
+        const a = jr(i.url);
+        if (a !== void 0) {
+          const l = a.extractVideoId(i.url);
+          if (l !== void 0) {
+            const h = await (await fetch(
+              `https://noembed.com/embed?url=${encodeURIComponent(
+                i.url
+              )}`
+            )).json();
+            await t.addItems([
+              t.createItem({
+                url: i.url,
+                type: a.type,
+                videoId: l,
+                title: i.title || (ti(h) ? h.title : l)
+              })
+            ]);
+          }
+        }
+      },
+      [t]
+    );
     return /* @__PURE__ */ F(Le, { children: [
       /* @__PURE__ */ F(
-        me,
+        le,
         {
           alignItems: "center",
           gutterSize: "m",
@@ -1542,35 +1590,27 @@ const ri = Y(
           },
           children: [
             /* @__PURE__ */ o(J, { grow: !1, children: /* @__PURE__ */ o(
-              ne,
+              re,
               {
                 disabled: t.isEmpty || t.selectedItems.length === 0,
                 onClick: t.playSelectedItemsNext,
                 children: "Play next"
               }
             ) }),
+            /* @__PURE__ */ o(J, { grow: !1, children: /* @__PURE__ */ o(ri, { playQueueStore: t }) }),
             /* @__PURE__ */ o(J, { grow: !1, children: /* @__PURE__ */ o(
-              ne,
-              {
-                iconType: ct,
-                onClick: t.addSelectedItems,
-                disabled: t.isEmpty || t.selectedItems.length === 0,
-                children: "Add to play queue"
-              }
-            ) }),
-            /* @__PURE__ */ o(J, { grow: !1, children: /* @__PURE__ */ o(
-              ne,
+              re,
               {
-                iconType: ut,
+                iconType: ft,
                 onClick: t.removeSelectedItems,
                 disabled: t.isEmpty || t.selectedItems.length === 0,
                 children: "Remove"
               }
             ) }),
             /* @__PURE__ */ o(J, { grow: !1, children: /* @__PURE__ */ o(
-              ne,
+              re,
               {
-                iconType: nn,
+                iconType: on,
                 onClick: t.clear,
                 disabled: t.isEmpty,
                 children: "Clear"
@@ -1579,13 +1619,13 @@ const ri = Y(
             /* @__PURE__ */ o(J, { grow: !0 }),
             /* @__PURE__ */ F(J, { grow: !1, children: [
               !1,
-              /* @__PURE__ */ o(Dt, { playQueueStore: t })
+              /* @__PURE__ */ o(Dt, { onSave: n })
             ] })
           ]
         }
       ),
       /* @__PURE__ */ o(
-        Wt,
+        Ut,
         {
           size: "l",
           style: {
@@ -1597,30 +1637,30 @@ const ri = Y(
         }
       ),
       t.isEmpty ? /* @__PURE__ */ o(
-        Kr,
+        Zr,
         {
           title: /* @__PURE__ */ o("h2", { children: "We couldn't find any videos" }),
           body: /* @__PURE__ */ o("p", { children: "Your video library doesn't contain any video content." }),
-          actions: /* @__PURE__ */ o(Dt, { playQueueStore: t })
+          actions: /* @__PURE__ */ o(Dt, { onSave: n })
         }
-      ) : /* @__PURE__ */ o(ti, { playQueueStore: t })
+      ) : /* @__PURE__ */ o(ei, { playQueueStore: t })
     ] });
   }
-), Ai = Y(
+), Fi = D(
   ({ playQueueStore: t }) => /* @__PURE__ */ F(Le, { children: [
     /* @__PURE__ */ o(
-      nt.Header,
+      qn,
       {
         pageTitle: "Play queue",
         rightSideItems: []
       }
     ),
-    /* @__PURE__ */ o(nt.Section, { children: /* @__PURE__ */ o(ri, { playQueueStore: t }) })
+    /* @__PURE__ */ o(lt.Section, { children: /* @__PURE__ */ o(ni, { playQueueStore: t }) })
   ] })
 ), et = new Tn({
   coerceTypes: !0
 });
-function ni(t, e) {
+function ii(t, e) {
   let n;
   if (n = et.getSchema(e), n === void 0 && (et.addSchema(t, e), n = et.getSchema(e)), n === void 0 || n.schema !== t)
     throw new Error(
@@ -1630,7 +1670,7 @@ function ni(t, e) {
     );
   return n;
 }
-const ii = {
+const oi = {
   type: "object",
   properties: {
     url: {
@@ -1648,8 +1688,8 @@ const ii = {
   },
   required: ["url", "type", "videoId", "title"]
 };
-var R = /* @__PURE__ */ ((t) => (t.Off = "Off", t.All = "All", t.One = "One", t))(R || {});
-const oi = {
+var P = /* @__PURE__ */ ((t) => (t.Off = "Off", t.All = "All", t.One = "One", t))(P || {});
+const ai = {
   type: "object",
   properties: {
     version: {
@@ -1658,7 +1698,7 @@ const oi = {
     },
     repeat: {
       type: "string",
-      enum: Object.values(R),
+      enum: Object.values(P),
       nullable: !0
     },
     shuffle: {
@@ -1668,19 +1708,19 @@ const oi = {
     items: {
       type: "array",
       nullable: !0,
-      items: ii
+      items: oi
     },
     currentIndex: {
       type: "integer",
       nullable: !0
     }
   }
-}, Ce = class Ce {
+}, Ie = class Ie {
   constructor(e, n, i) {
     U(this, "id");
     U(this, "isSelected", !1);
-    this.observableStateProvider = e, this.playQueueStore = n, this.dto = i, this.id = Ce.nextId++, e.makeObservable(this, {
-      isSelected: te,
+    this.observableStateProvider = e, this.playQueueStore = n, this.dto = i, this.id = Ie.nextId++, e.makeObservable(this, {
+      isSelected: ee,
       isCurrent: _,
       index: _,
       isFirst: _,
@@ -1703,7 +1743,7 @@ const oi = {
     });
   }
   static fromDto(e, n, i) {
-    return new Ce(
+    return new Ie(
       e,
       n,
       i
@@ -1785,21 +1825,21 @@ const oi = {
     return this.playQueueStore.removeOtherItems(this);
   }
 };
-U(Ce, "nextId", 1);
-let ot = Ce;
-class ai {
+U(Ie, "nextId", 1);
+let it = Ie;
+class si {
   constructor(e) {
     U(this, "interacted", !1);
     U(this, "items", []);
     U(this, "currentId");
-    U(this, "repeat", R.Off);
+    U(this, "repeat", P.Off);
     U(this, "shuffle", !1);
     this.observableStateProvider = e, e.makeObservable(this, {
-      interacted: te,
-      items: te,
-      currentId: te,
-      repeat: te,
-      shuffle: te,
+      interacted: ee,
+      items: ee,
+      currentId: ee,
+      repeat: ee,
+      shuffle: ee,
       localStorageState: _.struct,
       isEmpty: _,
       currentItem: _,
@@ -1838,7 +1878,7 @@ class ai {
     });
   }
   createItem(e) {
-    return ot.fromDto(
+    return it.fromDto(
       this.observableStateProvider,
       this,
       e
@@ -1855,11 +1895,11 @@ class ai {
   }
   set localStorageState(e) {
     var n;
-    this.repeat = e.repeat ?? R.Off, this.shuffle = e.shuffle ?? !1, this.items = ((n = e.items) == null ? void 0 : n.map((i) => this.createItem(i))) ?? [], this.currentIndex = e.currentIndex;
+    this.repeat = e.repeat ?? P.Off, this.shuffle = e.shuffle ?? !1, this.items = ((n = e.items) == null ? void 0 : n.map((i) => this.createItem(i))) ?? [], this.currentIndex = e.currentIndex;
   }
   validateLocalStorageState(e) {
-    return ni(
-      oi,
+    return ii(
+      ai,
       "PlayQueueDto"
     )(e);
   }
@@ -1967,9 +2007,9 @@ class ai {
   }
   async removeItems(e) {
     const { currentItem: n } = this;
-    Rt(this.items, ...e.filter((l) => l !== n));
+    Pt(this.items, ...e.filter((l) => l !== n));
     const { currentIndex: i, isLastItem: a } = this;
-    Rt(
+    Pt(
       this.items,
       e.find((l) => l === n)
     ), this.currentItem !== n && (this.interact(), a ? await this.goToFirst() : this.currentIndex = i);
@@ -1991,14 +2031,14 @@ class ai {
   }
   toggleRepeat() {
     switch (this.repeat) {
-      case R.Off:
-        this.repeat = R.All;
+      case P.Off:
+        this.repeat = P.All;
         break;
-      case R.All:
-        this.repeat = R.One;
+      case P.All:
+        this.repeat = P.One;
         break;
-      case R.One:
-        this.repeat = R.Off;
+      case P.One:
+        this.repeat = P.Off;
         break;
     }
   }
@@ -2015,63 +2055,144 @@ class ai {
     this.currentIndex !== void 0 && (this.currentIndex = 0);
   }
 }
-const er = Lt(void 0), ki = ({
+const rr = Lt(void 0), ji = ({
   children: t
 }) => {
   const [e] = q(
-    () => new ai(new Gt())
+    () => new si(new Jt())
   ), n = ie();
-  return _r(() => wr(
+  return kr(() => _r(
     () => e.currentItem,
     async (i, a) => {
       i === void 0 || a === void 0 || i.type === a.type && i.videoId === a.videoId && await n.setCurrentTime(0);
     }
-  ), [e, n]), /* @__PURE__ */ o(er.Provider, { value: e, children: t });
-}, si = () => st(er), tr = 81, li = Y(
-  ({ playerStore: t, playQueueStore: e }) => {
-    const n = ie(), i = $(
-      (f) => {
-        const h = Number(f.currentTarget.value) / 100;
-        t.setPercent(h);
-      },
-      [t]
-    ), a = $(
-      (f) => {
-        f.button === 0 && t.setSeeking(!0);
-      },
-      [t]
-    ), l = $(
-      async (f) => {
-        if (f.button === 0) {
-          const h = Number(f.currentTarget.value) / 100;
-          t.setSeeking(!1);
-          const m = await n.getDuration();
-          m !== void 0 && await n.setCurrentTime(m * h);
-        }
-      },
-      [t, n]
+  ), [e, n]), /* @__PURE__ */ o(rr.Provider, { value: e, children: t });
+}, li = () => at(rr), ci = {
+  [P.Off]: ln,
+  [P.All]: sn,
+  [P.One]: an
+}, ui = D(
+  ({
+    playerStore: t,
+    playQueueStore: e
+  }) => {
+    const n = ie(), i = $(async () => {
+      if (e.hasPreviousItem) {
+        const a = await n.getCurrentTime();
+        a === void 0 || a < 5 ? await e.previous() : await n.setCurrentTime(0);
+      } else
+        await n.setCurrentTime(0);
+    }, [e, n]);
+    return /* @__PURE__ */ F(
+      le,
+      {
+        responsive: !1,
+        gutterSize: "s",
+        justifyContent: "center",
+        alignItems: "center",
+        children: [
+          /* @__PURE__ */ o(
+            G,
+            {
+              title: `Shuffle: ${e.shuffle ? "On" : "Off"}`,
+              "aria-label": `Shuffle: ${e.shuffle ? "On" : "Off"}`,
+              iconType: e.shuffle ? cn : un,
+              size: "s",
+              iconSize: "l",
+              onClick: e.toggleShuffle,
+              disabled: !0
+            }
+          ),
+          /* @__PURE__ */ o(
+            G,
+            {
+              title: "Previous",
+              "aria-label": "Previous",
+              iconType: fn,
+              size: "s",
+              iconSize: "l",
+              onClick: i,
+              disabled: e.isEmpty
+            }
+          ),
+          t.playing ? /* @__PURE__ */ o(
+            G,
+            {
+              title: "Pause",
+              "aria-label": "Pause",
+              iconType: dn,
+              size: "s",
+              iconSize: "l",
+              onClick: () => n.pause(),
+              disabled: !e.canPause
+            }
+          ) : /* @__PURE__ */ o(
+            G,
+            {
+              title: "Play",
+              "aria-label": "Play",
+              iconType: mn,
+              size: "s",
+              iconSize: "l",
+              onClick: () => n.play(),
+              disabled: !e.canPlay
+            }
+          ),
+          /* @__PURE__ */ o(
+            G,
+            {
+              title: "Next",
+              "aria-label": "Next",
+              iconType: hn,
+              size: "s",
+              iconSize: "l",
+              onClick: e.next,
+              disabled: !e.hasNextItem
+            }
+          ),
+          /* @__PURE__ */ o(
+            G,
+            {
+              title: `Repeat: ${e.repeat === P.All ? "All" : e.repeat === P.One ? "One" : "Off"}`,
+              "aria-label": `Repeat: ${e.repeat === P.All ? "All" : e.repeat === P.One ? "One" : "Off"}`,
+              iconType: ci[e.repeat],
+              size: "s",
+              iconSize: "l",
+              onClick: e.toggleRepeat
+            }
+          )
+        ]
+      }
     );
+  }
+), fi = D(
+  ({ playQueueStore: t }) => {
+    const e = ie();
     return /* @__PURE__ */ o(
-      Ut,
+      le,
       {
-        min: 0,
-        max: 100,
-        step: 1e-7,
-        value: t.percent * 100,
-        onChange: i,
-        onMouseDown: a,
-        onMouseUp: l,
-        fullWidth: !0,
-        showRange: !0,
-        css: { blockSize: 32 },
-        disabled: e.isEmpty
+        responsive: !1,
+        gutterSize: "s",
+        justifyContent: "flexStart",
+        alignItems: "center",
+        children: t.currentItem && /* @__PURE__ */ o(
+          Vt,
+          {
+            href: t.currentItem.url,
+            target: "_blank",
+            iconType: tr[t.currentItem.type],
+            size: "s",
+            onClick: () => e.pause(),
+            children: t.currentItem.title
+          }
+        )
       }
     );
   }
-), ci = Z(
+), di = ne(
   ({ button: t, isOpen: e, closePopover: n }) => {
     const [i, a] = q("0"), l = ie();
-    Ar(() => {
+    Mr(() => {
       e && l.getVolume().then((h) => {
         h !== void 0 && a(Math.floor(h * 100).toString());
       });
@@ -2083,14 +2204,14 @@ const er = Lt(void 0), ki = ({
       [l]
     );
     return /* @__PURE__ */ o(
-      lt,
+      ct,
       {
         button: t,
         isOpen: e,
         closePopover: n,
         anchorPosition: "upRight",
         children: /* @__PURE__ */ o(tt, { children: /* @__PURE__ */ F(
-          me,
+          le,
           {
             responsive: !1,
             gutterSize: "s",
@@ -2102,13 +2223,13 @@ const er = Lt(void 0), ki = ({
                 {
                   title: "Mute",
                   "aria-label": "Mute",
-                  iconType: Ht,
+                  iconType: Gt,
                   size: "s",
                   iconSize: "l"
                 }
               ),
               /* @__PURE__ */ o(
-                Ut,
+                qt,
                 {
                   min: 0,
                   max: 100,
@@ -2124,45 +2245,77 @@ const er = Lt(void 0), ki = ({
       }
     );
   }
-), ui = Z(
+), mi = ne(() => {
+  const [t, e] = q(!1);
+  return /* @__PURE__ */ o(
+    di,
+    {
+      button: /* @__PURE__ */ o(
+        G,
+        {
+          title: "Volume",
+          "aria-label": "Volume",
+          iconType: Gt,
+          size: "s",
+          iconSize: "l",
+          onClick: () => e(!t)
+        }
+      ),
+      isOpen: t,
+      closePopover: () => e(!1)
+    }
+  );
+}), hi = ({
+  onClickPlayQueueButton: t
+}) => /* @__PURE__ */ o(
+  G,
+  {
+    title: "Play queue",
+    "aria-label": "Play queue",
+    iconType: gn,
+    size: "s",
+    iconSize: "l",
+    onClick: t
+  }
+), vi = ne(
   ({
     playQueueStore: t,
     closePopover: e
   }) => {
     const n = ie(), i = $(async () => {
-      const p = await n.getCurrentTime();
-      p !== void 0 && await n.setCurrentTime(p - 10), e();
+      const m = await n.getCurrentTime();
+      m !== void 0 && await n.setCurrentTime(m - 10), e();
     }, [n, e]), a = $(async () => {
-      const p = await n.getCurrentTime();
-      p !== void 0 && await n.setCurrentTime(p + 30), e();
+      const m = await n.getCurrentTime();
+      m !== void 0 && await n.setCurrentTime(m + 30), e();
     }, [n, e]), l = $(
-      async (p) => {
-        await n.setPlaybackRate(p), e();
+      async (m) => {
+        await n.setPlaybackRate(m), e();
       },
       [n, e]
     ), f = $(async () => {
       t.currentItem !== void 0 && await t.removeItems([
         t.currentItem
       ]), e();
-    }, [t, e]), [h] = q(), m = Vt(
+    }, [t, e]), [h] = q(), v = st(
       () => [
         {
           id: 0,
           items: [
             {
               name: "Speed",
-              icon: /* @__PURE__ */ o(H, { type: on, size: "m" }),
+              icon: /* @__PURE__ */ o(H, { type: vn }),
               panel: 1
             },
             {
               name: "Skip back 10 seconds",
-              icon: /* @__PURE__ */ o(H, { type: an, size: "m" }),
+              icon: /* @__PURE__ */ o(H, { type: pn }),
               onClick: i,
               disabled: t.isEmpty
             },
             {
               name: "Skip forward 30 seconds",
-              icon: /* @__PURE__ */ o(H, { type: sn, size: "m" }),
+              icon: /* @__PURE__ */ o(H, { type: yn }),
               onClick: a,
               disabled: t.isEmpty
             },
@@ -2171,7 +2324,7 @@ const er = Lt(void 0), ki = ({
             },
             {
               name: "Remove from play queue",
-              icon: /* @__PURE__ */ o(H, { type: ut, size: "m" }),
+              icon: /* @__PURE__ */ o(H, { type: ft }),
               onClick: f,
               disabled: t.isEmpty
             }
@@ -2181,10 +2334,10 @@ const er = Lt(void 0), ki = ({
           id: 1,
           title: "Speed",
           items: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
-            (p) => ({
-              name: p.toString(),
-              onClick: () => l(p),
-              icon: p === h ? "check" : "empty"
+            (m) => ({
+              name: m.toString(),
+              onClick: () => l(m),
+              icon: m === h ? "check" : "empty"
             })
           )
         }
@@ -2198,16 +2351,16 @@ const er = Lt(void 0), ki = ({
         h
       ]
     );
-    return /* @__PURE__ */ o(Xr, { initialPanelId: 0, panels: m });
+    return /* @__PURE__ */ o(Wt, { initialPanelId: 0, panels: v });
   }
-), fi = Z(
+), pi = ne(
   ({
     playQueueStore: t,
     button: e,
     isOpen: n,
     closePopover: i
   }) => /* @__PURE__ */ o(
-    lt,
+    ct,
     {
       button: e,
       isOpen: n,
@@ -2215,7 +2368,7 @@ const er = Lt(void 0), ki = ({
       panelPaddingSize: "none",
       anchorPosition: "upRight",
       children: /* @__PURE__ */ o(
-        ui,
+        vi,
         {
           playQueueStore: t,
           closePopover: i
@@ -2223,141 +2376,11 @@ const er = Lt(void 0), ki = ({
       )
     }
   )
-), di = {
-  [R.Off]: un,
-  [R.All]: cn,
-  [R.One]: ln
-}, mi = Y(
-  ({
-    playerStore: t,
-    playQueueStore: e
-  }) => {
-    const n = ie(), i = $(async () => {
-      if (e.hasPreviousItem) {
-        const a = await n.getCurrentTime();
-        a === void 0 || a < 5 ? await e.previous() : await n.setCurrentTime(0);
-      } else
-        await n.setCurrentTime(0);
-    }, [e, n]);
-    return /* @__PURE__ */ F(
-      me,
-      {
-        responsive: !1,
-        gutterSize: "s",
-        justifyContent: "center",
-        alignItems: "center",
-        children: [
-          /* @__PURE__ */ o(
-            G,
-            {
-              title: `Shuffle: ${e.shuffle ? "On" : "Off"}`,
-              "aria-label": `Shuffle: ${e.shuffle ? "On" : "Off"}`,
-              iconType: e.shuffle ? fn : dn,
-              size: "s",
-              iconSize: "l",
-              onClick: e.toggleShuffle,
-              disabled: !0
-            }
-          ),
-          /* @__PURE__ */ o(
-            G,
-            {
-              title: "Previous",
-              "aria-label": "Previous",
-              iconType: mn,
-              size: "s",
-              iconSize: "l",
-              onClick: i,
-              disabled: e.isEmpty
-            }
-          ),
-          t.playing ? /* @__PURE__ */ o(
-            G,
-            {
-              title: "Pause",
-              "aria-label": "Pause",
-              iconType: hn,
-              size: "s",
-              iconSize: "l",
-              onClick: () => n.pause(),
-              disabled: !e.canPlay
-            }
-          ) : /* @__PURE__ */ o(
-            G,
-            {
-              title: "Play",
-              "aria-label": "Play",
-              iconType: vn,
-              size: "s",
-              iconSize: "l",
-              onClick: () => n.play(),
-              disabled: !e.canPlay
-            }
-          ),
-          /* @__PURE__ */ o(
-            G,
-            {
-              title: "Next",
-              "aria-label": "Next",
-              iconType: pn,
-              size: "s",
-              iconSize: "l",
-              onClick: e.next,
-              disabled: !e.hasNextItem
-            }
-          ),
-          /* @__PURE__ */ o(
-            G,
-            {
-              title: `Repeat: ${e.repeat === R.All ? "All" : e.repeat === R.One ? "One" : "Off"}`,
-              "aria-label": `Repeat: ${e.repeat === R.All ? "All" : e.repeat === R.One ? "One" : "Off"}`,
-              iconType: di[e.repeat],
-              size: "s",
-              iconSize: "l",
-              onClick: e.toggleRepeat
-            }
-          )
-        ]
-      }
-    );
-  }
-), hi = Z(() => {
-  const [t, e] = q(!1);
-  return /* @__PURE__ */ o(
-    ci,
-    {
-      button: /* @__PURE__ */ o(
-        G,
-        {
-          title: "Volume",
-          "aria-label": "Volume",
-          iconType: Ht,
-          size: "s",
-          iconSize: "l",
-          onClick: () => e(!t)
-        }
-      ),
-      isOpen: t,
-      closePopover: () => e(!1)
-    }
-  );
-}), vi = ({
-  onClickPlayQueueButton: t
-}) => /* @__PURE__ */ o(
-  G,
-  {
-    title: "Play queue",
-    "aria-label": "Play queue",
-    iconType: yn,
-    size: "s",
-    iconSize: "l",
-    onClick: t
-  }
-), pi = Z(
+), yi = ne(
   ({ playQueueStore: t }) => {
     const [e, n] = q(!1);
     return /* @__PURE__ */ o(
-      fi,
+      pi,
       {
         playQueueStore: t,
         button: /* @__PURE__ */ o(
@@ -2365,7 +2388,7 @@ const er = Lt(void 0), ki = ({
           {
             title: "More options",
             "aria-label": "More options",
-            iconType: qt,
+            iconType: Ht,
             size: "s",
             iconSize: "l",
             onClick: () => n(!e)
@@ -2376,53 +2399,99 @@ const er = Lt(void 0), ki = ({
       }
     );
   }
-), yi = Z(
+), gi = ne(
   ({
     playQueueStore: t,
     onClickPlayQueueButton: e
   }) => /* @__PURE__ */ F(
-    me,
+    le,
     {
       responsive: !1,
       gutterSize: "s",
       justifyContent: "flexEnd",
       alignItems: "center",
       children: [
-        /* @__PURE__ */ o(hi, {}),
+        /* @__PURE__ */ o(mi, {}),
         e && /* @__PURE__ */ o(
-          vi,
+          hi,
           {
             onClickPlayQueueButton: e
           }
         ),
-        /* @__PURE__ */ o(pi, { playQueueStore: t })
+        /* @__PURE__ */ o(yi, { playQueueStore: t })
       ]
     }
   )
-), Mi = Y(
+), bi = D(
+  ({ playerStore: t, playQueueStore: e }) => {
+    const n = ie(), i = $(
+      (f) => {
+        const h = Number(f.currentTarget.value) / 100;
+        t.setPercent(h);
+      },
+      [t]
+    ), a = $(
+      (f) => {
+        f.button === 0 && t.setSeeking(!0);
+      },
+      [t]
+    ), l = $(
+      async (f) => {
+        if (f.button === 0) {
+          const h = Number(f.currentTarget.value) / 100;
+          t.setSeeking(!1);
+          const v = await n.getDuration();
+          v !== void 0 && await n.setCurrentTime(v * h);
+        }
+      },
+      [t, n]
+    );
+    return /* @__PURE__ */ o(
+      qt,
+      {
+        min: 0,
+        max: 100,
+        step: 1e-7,
+        value: t.percent * 100,
+        onChange: i,
+        onMouseDown: a,
+        onMouseUp: l,
+        fullWidth: !0,
+        showRange: !0,
+        css: { blockSize: 32 },
+        disabled: e.isEmpty
+      }
+    );
+  }
+), nr = 81, Ni = D(
   ({
     playerStore: t,
     playQueueStore: e,
     onClickPlayQueueButton: n
-  }) => /* @__PURE__ */ o(Zr, { paddingSize: "s", children: /* @__PURE__ */ F(me, { direction: "column", gutterSize: "none", children: [
+  }) => /* @__PURE__ */ o(Qr, { paddingSize: "s", children: /* @__PURE__ */ F(le, { direction: "column", gutterSize: "none", children: [
     /* @__PURE__ */ o(J, { children: /* @__PURE__ */ o(
-      li,
+      bi,
       {
         playerStore: t,
         playQueueStore: e
       }
     ) }),
-    /* @__PURE__ */ o(J, { children: /* @__PURE__ */ F(me, { responsive: !1, children: [
-      /* @__PURE__ */ o(J, { css: { width: "calc(100% / 3)" } }),
+    /* @__PURE__ */ o(J, { children: /* @__PURE__ */ F(le, { responsive: !1, children: [
       /* @__PURE__ */ o(J, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
-        mi,
+        fi,
+        {
+          playQueueStore: e
+        }
+      ) }),
+      /* @__PURE__ */ o(J, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
+        ui,
         {
           playerStore: t,
           playQueueStore: e
         }
       ) }),
       /* @__PURE__ */ o(J, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
-        yi,
+        gi,
         {
           playQueueStore: e,
           onClickPlayQueueButton: n
@@ -2430,26 +2499,26 @@ const er = Lt(void 0), ki = ({
       ) })
     ] }) })
   ] }) })
-), at = {
-  width: 16 * 25,
-  height: 9 * 25
-}, Fi = Y(
+), ot = {
+  width: 400,
+  height: 225
+}, $i = D(
   ({ playerStore: t, playQueueStore: e }) => {
     const n = ie(), i = $(async () => {
       e.interacted && await n.play();
     }, [e, n]), a = $(async () => {
       switch (e.repeat) {
-        case R.One:
+        case P.One:
           await n.setCurrentTime(0);
           break;
-        case R.Off:
-        case R.All:
+        case P.Off:
+        case P.All:
           if (e.isLastItem)
             switch (e.repeat) {
-              case R.Off:
+              case P.Off:
                 t.onEnded();
                 break;
-              case R.All:
+              case P.All:
                 e.hasMultipleItems ? await e.goToFirst() : await n.setCurrentTime(0);
                 break;
             }
@@ -2457,7 +2526,7 @@ const er = Lt(void 0), ki = ({
             await e.next();
           break;
       }
-    }, [e, t, n]), l = Vt(
+    }, [e, t, n]), l = st(
       () => ({
         onLoaded: i,
         onPlay: t.onPlay,
@@ -2473,16 +2542,16 @@ const er = Lt(void 0), ki = ({
         css: {
           position: "fixed",
           right: 0,
-          bottom: tr,
-          width: at.width,
-          height: at.height,
+          bottom: nr,
+          width: ot.width,
+          height: ot.height,
           zIndex: 998,
           backgroundColor: "rgb(39, 39, 39)",
           display: "flex",
           flexDirection: "column"
         },
         children: /* @__PURE__ */ o("div", { css: { flexGrow: 1, backgroundColor: "black" }, children: e.currentItem && /* @__PURE__ */ o(
-          bn,
+          Nr,
           {
             src: e.currentItem.url,
             options: l
@@ -2491,33 +2560,33 @@ const er = Lt(void 0), ki = ({
       }
     );
   }
-), ji = Y(
+), Di = D(
   ({ children: t }) => {
-    const e = si();
+    const e = li();
     return /* @__PURE__ */ F(
-      nt,
+      lt,
       {
         panelled: !0,
         style: {
-          minBlockSize: `max(460px, 100vh - ${tr}px)`
+          minBlockSize: `max(460px, 100vh - ${nr}px)`
         },
         children: [
           t,
-          !e.isEmpty && /* @__PURE__ */ o(Wt, { style: { blockSize: at.height } })
+          !e.isEmpty && /* @__PURE__ */ o(Ut, { style: { blockSize: ot.height } })
         ]
       }
     );
   }
 );
-class gi {
+class Ei {
   constructor(e) {
     U(this, "playing", !1);
     U(this, "percent", 0);
     U(this, "seeking", !1);
     e.makeObservable(this, {
-      playing: te,
-      percent: te,
-      seeking: te,
+      playing: ee,
+      percent: ee,
+      seeking: ee,
       setPlaying: y,
       setPercent: y,
       setSeeking: y,
@@ -2549,27 +2618,27 @@ class gi {
     e !== void 0 && (this.seeking || (this.percent = e));
   }
 }
-const rr = Lt(void 0), Ni = ({
+const ir = Lt(void 0), zi = ({
   children: t
 }) => {
   const [e] = q(
-    () => new gi(new Gt())
+    () => new Ei(new Jt())
   );
-  return /* @__PURE__ */ o(rr.Provider, { value: e, children: t });
-}, $i = () => st(rr);
+  return /* @__PURE__ */ o(ir.Provider, { value: e, children: t });
+}, Li = () => at(ir);
 export {
-  Mi as BottomBar,
-  Ai as HydrangeanDiva,
-  ji as MediaPlayerLayout,
-  Fi as MiniPlayer,
-  Gt as MobXObservableStateProvider,
-  _i as ObservableStateProvider,
-  ki as PlayQueueStoreProvider,
-  Ni as PlayerStoreProvider,
-  R as RepeatMode,
-  tr as bottomBarHeight,
-  at as miniPlayerSize,
-  si as usePlayQueueStore,
-  $i as usePlayerStore
+  Ni as BottomBar,
+  Fi as HydrangeanDiva,
+  Di as MediaPlayerLayout,
+  $i as MiniPlayer,
+  Jt as MobXObservableStateProvider,
+  Mi as ObservableStateProvider,
+  ji as PlayQueueStoreProvider,
+  zi as PlayerStoreProvider,
+  P as RepeatMode,
+  nr as bottomBarHeight,
+  ot as miniPlayerSize,
+  li as usePlayQueueStore,
+  Li as usePlayerStore
 };
 //# sourceMappingURL=index.es.js.map