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

package/dist/index.es.js

@@ -1,24 +1,23 @@
-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";
+var Sr = Object.defineProperty;
+var Pr = (t, e, n) => e in t ? Sr(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var B = (t, e, n) => Pr(t, typeof e != "symbol" ? e + "" : e, n);
+import { makeObservable as wr, action as y, computed as A, observable as Z, reaction as Or } 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 Pt } from "lodash-es";
-import Tn from "ajv";
-class Jt {
+import Dt, { forwardRef as _r, useContext as ot, memo as me, useState as q, useCallback as D, useMemo as at, createContext as zt, useEffect as Ar, useLayoutEffect as kr } from "react";
+import Mr from "@emotion/cache";
+import { useNostalgicDiva as ne, findVideoService as Fr, NostalgicDivaProvider as jr, NostalgicDiva as Nr, nullPlayerController as $r } from "@aigamo/nostalgic-diva";
+import { EuiButton as re, useGeneratedHtmlId as Dr, EuiModalHeaderTitle as zr, EuiModalHeader as Lr, EuiForm as Vr, EuiFormRow as et, EuiFieldText as Rt, EuiModalBody as Yr, EuiModalFooter as Br, EuiButtonEmpty as Lt, EuiModal as Wr, useEuiTheme as Vt, EuiCheckbox as Yt, EuiTableHeaderCellCheckbox as Ur, EuiTableHeader as qr, EuiTableRowCell as tt, EuiTableRowCellCheckbox as Hr, EuiLink as Gr, EuiTableRow as Jr, EuiTable as Kr, EuiButtonIcon as G, EuiPopover as st, EuiIcon as H, EuiContextMenu as Bt, EuiTableHeaderCell as Ke, EuiCodeBlock as Xr, EuiFlyout as Zr, EuiFlexGroup as se, EuiFlexItem as J, EuiSpacer as Wt, EuiEmptyPrompt as Qr, EuiRange as Ut, EuiBottomBar as en, EuiPageTemplate as tn } from "@elastic/eui";
+import { AddRegular as lt, PlayRegular as rn, DismissRegular as ct, MoreHorizontalFilled as qt, ArrowUploadRegular as nn, ArrowDownloadRegular as on, WindowDevToolsRegular as an, DeleteRegular as sn, ArrowRepeat1Filled as ln, ArrowRepeatAllFilled as cn, ArrowRepeatAllOffFilled as un, ArrowShuffleFilled as dn, ArrowShuffleOffFilled as fn, PreviousFilled as mn, PauseFilled as hn, PlayFilled as vn, NextFilled as pn, Speaker2Regular as Ht, TopSpeedRegular as yn, SkipBack10Regular as gn, SkipForward30Regular as bn, NavigationPlayRegular as En } from "@fluentui/react-icons";
+import { observer as N } from "mobx-react-lite";
+import { ReactSortable as Tn } from "react-sortablejs";
+import { pull as St } from "lodash-es";
+import xn from "ajv";
+class Gt {
   makeObservable(e, n) {
-    return Or(e, n);
+    return wr(e, n);
   }
 }
-class Mi {
+class ki {
   makeObservable(e, n) {
     return e;
   }
@@ -33,21 +32,21 @@ var $e = { exports: {} }, xe = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var wt;
-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, 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;
+var Pt;
+function Cn() {
+  if (Pt) return xe;
+  Pt = 1;
+  var t = Dt, 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 d(h, m, p) {
+    var E, S = {}, I = null, $ = null;
+    p !== void 0 && (I = "" + p), m.key !== void 0 && (I = "" + m.key), m.ref !== void 0 && ($ = m.ref);
+    for (E in m) i.call(m, E) && !l.hasOwnProperty(E) && (S[E] = m[E]);
+    if (h && h.defaultProps) for (E in m = h.defaultProps, m) S[E] === void 0 && (S[E] = m[E]);
+    return { $$typeof: e, type: h, key: I, ref: $, props: S, _owner: a.current };
+  }
+  return xe.Fragment = n, xe.jsx = d, xe.jsxs = d, xe;
 }
-var Se = {};
+var Ce = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -57,47 +56,47 @@ var Se = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-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"), 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) {
+var wt;
+function In() {
+  return wt || (wt = 1, process.env.NODE_ENV !== "production" && (function() {
+    var t = Dt, 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"), d = 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"), S = Symbol.for("react.memo"), I = Symbol.for("react.lazy"), $ = Symbol.for("react.offscreen"), k = Symbol.iterator, W = "@@iterator";
+    function Q(r) {
       if (r === null || typeof r != "object")
         return null;
-      var s = A && r[A] || r[B];
+      var s = k && r[k] || r[W];
       return typeof s == "function" ? s : null;
     }
     var L = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function C(r) {
+    function P(r) {
       {
-        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);
+        for (var s = arguments.length, u = new Array(s > 1 ? s - 1 : 0), v = 1; v < s; v++)
+          u[v - 1] = arguments[v];
+        M("error", r, u);
       }
     }
-    function k(r, s, u) {
+    function M(r, s, u) {
       {
-        var p = L.ReactDebugCurrentFrame, T = p.getStackAddendum();
+        var v = L.ReactDebugCurrentFrame, T = v.getStackAddendum();
         T !== "" && (s += "%s", u = u.concat([T]));
-        var I = u.map(function(b) {
+        var R = u.map(function(b) {
           return String(b);
         });
-        I.unshift("Warning: " + s), Function.prototype.apply.call(console[r], console, I);
+        R.unshift("Warning: " + s), Function.prototype.apply.call(console[r], console, R);
       }
     }
-    var w = !1, c = !1, V = !1, he = !1, Pe = !1, we;
+    var O = !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 || 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
+    function Le(r) {
+      return !!(typeof r == "string" || typeof r == "function" || r === i || r === l || Pe || r === a || r === p || r === E || he || r === $ || O || c || V || typeof r == "object" && r !== null && (r.$$typeof === I || r.$$typeof === S || r.$$typeof === d || r.$$typeof === h || r.$$typeof === m || // 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 p = r.displayName;
-      if (p)
-        return p;
+    function Ve(r, s, u) {
+      var v = r.displayName;
+      if (v)
+        return v;
       var T = s.displayName || s.name || "";
       return T !== "" ? u + "(" + T + ")" : u;
     }
@@ -107,7 +106,7 @@ function Sn() {
     function K(r) {
       if (r == null)
         return null;
-      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")
+      if (typeof r.tag == "number" && P("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;
@@ -120,7 +119,7 @@ function Sn() {
           return "Profiler";
         case a:
           return "StrictMode";
-        case m:
+        case p:
           return "Suspense";
         case E:
           return "SuspenseList";
@@ -130,18 +129,18 @@ function Sn() {
           case h:
             var s = r;
             return Oe(s) + ".Consumer";
-          case f:
+          case d:
             var u = r;
             return Oe(u._context) + ".Provider";
-          case v:
-            return Ye(r, r.render, "ForwardRef");
-          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;
+          case m:
+            return Ve(r, r.render, "ForwardRef");
+          case S:
+            var v = r.displayName || null;
+            return v !== null ? v : K(r.type) || "Memo";
+          case I: {
+            var T = r, R = T._payload, b = T._init;
             try {
-              return K(b(I));
+              return K(b(R));
             } catch {
               return null;
             }
@@ -149,13 +148,13 @@ function Sn() {
         }
       return null;
     }
-    var Q = Object.assign, oe = 0, _e, Ae, ve, ke, pe, Me, Fe;
+    var ee = Object.assign, ie = 0, _e, Ae, ve, ke, pe, Me, Fe;
     function je() {
     }
     je.__reactDisabledLog = !0;
-    function Be() {
+    function Ye() {
       {
-        if (oe === 0) {
+        if (ie === 0) {
           _e = console.log, Ae = console.info, ve = console.warn, ke = console.error, pe = console.group, Me = console.groupCollapsed, Fe = console.groupEnd;
           var r = {
             configurable: !0,
@@ -173,77 +172,77 @@ function Sn() {
             groupEnd: r
           });
         }
-        oe++;
+        ie++;
       }
     }
-    function We() {
+    function Be() {
       {
-        if (oe--, oe === 0) {
+        if (ie--, ie === 0) {
           var r = {
             configurable: !0,
             enumerable: !0,
             writable: !0
           };
           Object.defineProperties(console, {
-            log: Q({}, r, {
+            log: ee({}, r, {
               value: _e
             }),
-            info: Q({}, r, {
+            info: ee({}, r, {
               value: Ae
             }),
-            warn: Q({}, r, {
+            warn: ee({}, r, {
               value: ve
             }),
-            error: Q({}, r, {
+            error: ee({}, r, {
               value: ke
             }),
-            group: Q({}, r, {
+            group: ee({}, r, {
               value: pe
             }),
-            groupCollapsed: Q({}, r, {
+            groupCollapsed: ee({}, r, {
               value: Me
             }),
-            groupEnd: Q({}, r, {
+            groupEnd: ee({}, r, {
               value: Fe
             })
           });
         }
-        oe < 0 && C("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        ie < 0 && P("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
     var ye = L.ReactCurrentDispatcher, ge;
-    function ce(r, s, u) {
+    function le(r, s, u) {
       {
         if (ge === void 0)
           try {
             throw Error();
           } catch (T) {
-            var p = T.stack.trim().match(/\n( *(at )?)/);
-            ge = p && p[1] || "";
+            var v = T.stack.trim().match(/\n( *(at )?)/);
+            ge = v && v[1] || "";
           }
         return `
 ` + ge + r;
       }
     }
-    var be = !1, ue;
+    var be = !1, ce;
     {
-      var Ue = typeof WeakMap == "function" ? WeakMap : Map;
-      ue = new Ue();
+      var We = typeof WeakMap == "function" ? WeakMap : Map;
+      ce = new We();
     }
-    function d(r, s) {
+    function f(r, s) {
       if (!r || be)
         return "";
       {
-        var u = ue.get(r);
+        var u = ce.get(r);
         if (u !== void 0)
           return u;
       }
-      var p;
+      var v;
       be = !0;
       var T = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
-      var I;
-      I = ye.current, ye.current = null, Be();
+      var R;
+      R = ye.current, ye.current = null, Ye();
       try {
         if (s) {
           var b = function() {
@@ -257,14 +256,14 @@ function Sn() {
             try {
               Reflect.construct(b, []);
             } catch (Y) {
-              p = Y;
+              v = Y;
             }
             Reflect.construct(r, [], b);
           } else {
             try {
               b.call();
             } catch (Y) {
-              p = Y;
+              v = Y;
             }
             r.call(b.prototype);
           }
@@ -272,129 +271,129 @@ function Sn() {
           try {
             throw Error();
           } catch (Y) {
-            p = Y;
+            v = Y;
           }
           r();
         }
       } catch (Y) {
-        if (Y && p && typeof Y.stack == "string") {
+        if (Y && v && 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--)
-            if (g[O] !== N[M]) {
-              if (O !== 1 || M !== 1)
+`), z = v.stack.split(`
+`), _ = g.length - 1, F = z.length - 1; _ >= 1 && F >= 0 && g[_] !== z[F]; )
+            F--;
+          for (; _ >= 1 && F >= 0; _--, F--)
+            if (g[_] !== z[F]) {
+              if (_ !== 1 || F !== 1)
                 do
-                  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" && ue.set(r, W), W;
+                  if (_--, F--, F < 0 || g[_] !== z[F]) {
+                    var U = `
+` + g[_].replace(" at new ", " at ");
+                    return r.displayName && U.includes("<anonymous>") && (U = U.replace("<anonymous>", r.displayName)), typeof r == "function" && ce.set(r, U), U;
                   }
-                while (O >= 1 && M >= 0);
+                while (_ >= 1 && F >= 0);
               break;
             }
         }
       } finally {
-        be = !1, ye.current = I, We(), Error.prepareStackTrace = T;
+        be = !1, ye.current = R, Be(), Error.prepareStackTrace = T;
       }
-      var me = r ? r.displayName || r.name : "", se = me ? ce(me) : "";
-      return typeof r == "function" && ue.set(r, se), se;
+      var fe = r ? r.displayName || r.name : "", ae = fe ? le(fe) : "";
+      return typeof r == "function" && ce.set(r, ae), ae;
     }
     function Ee(r, s, u) {
-      return d(r, !1);
+      return f(r, !1);
     }
-    function fe(r) {
+    function ue(r) {
       var s = r.prototype;
       return !!(s && s.isReactComponent);
     }
-    function ae(r, s, u) {
+    function oe(r, s, u) {
       if (r == null)
         return "";
       if (typeof r == "function")
-        return d(r, fe(r));
+        return f(r, ue(r));
       if (typeof r == "string")
-        return ce(r);
+        return le(r);
       switch (r) {
-        case m:
-          return ce("Suspense");
+        case p:
+          return le("Suspense");
         case E:
-          return ce("SuspenseList");
+          return le("SuspenseList");
       }
       if (typeof r == "object")
         switch (r.$$typeof) {
-          case v:
+          case m:
             return Ee(r.render);
-          case R:
-            return ae(r.type, s, u);
-          case z: {
-            var p = r, T = p._payload, I = p._init;
+          case S:
+            return oe(r.type, s, u);
+          case I: {
+            var v = r, T = v._payload, R = v._init;
             try {
-              return ae(I(T), s, u);
+              return oe(R(T), s, u);
             } catch {
             }
           }
         }
       return "";
     }
-    var Te = Object.prototype.hasOwnProperty, dt = {}, mt = L.ReactDebugCurrentFrame;
+    var Te = Object.prototype.hasOwnProperty, dt = {}, ft = L.ReactDebugCurrentFrame;
     function Ne(r) {
       if (r) {
-        var s = r._owner, u = ae(r.type, r._source, s ? s.type : null);
-        mt.setExtraStackFrame(u);
+        var s = r._owner, u = oe(r.type, r._source, s ? s.type : null);
+        ft.setExtraStackFrame(u);
       } else
-        mt.setExtraStackFrame(null);
+        ft.setExtraStackFrame(null);
     }
-    function or(r, s, u, p, T) {
+    function ir(r, s, u, v, T) {
       {
-        var I = Function.call.bind(Te);
+        var R = Function.call.bind(Te);
         for (var b in r)
-          if (I(r, b)) {
+          if (R(r, b)) {
             var g = void 0;
             try {
               if (typeof r[b] != "function") {
-                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;
+                var z = 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`.");
+                throw z.name = "Invariant Violation", z;
               }
-              g = r[b](s, b, p, u, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (O) {
-              g = O;
+              g = r[b](s, b, v, u, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (_) {
+              g = _;
             }
-            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));
+            g && !(g instanceof Error) && (Ne(T), P("%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 dt) && (dt[g.message] = !0, Ne(T), P("Failed %s type: %s", u, g.message), Ne(null));
           }
       }
     }
-    var ar = Array.isArray;
-    function qe(r) {
-      return ar(r);
+    var or = Array.isArray;
+    function Ue(r) {
+      return or(r);
     }
-    function sr(r) {
+    function ar(r) {
       {
         var s = typeof Symbol == "function" && Symbol.toStringTag, u = s && r[Symbol.toStringTag] || r.constructor.name || "Object";
         return u;
       }
     }
-    function lr(r) {
+    function sr(r) {
       try {
-        return ht(r), !1;
+        return mt(r), !1;
       } catch {
         return !0;
       }
     }
-    function ht(r) {
+    function mt(r) {
       return "" + 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);
+    function ht(r) {
+      if (sr(r))
+        return P("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", ar(r)), mt(r);
     }
-    var pt = L.ReactCurrentOwner, cr = {
+    var vt = L.ReactCurrentOwner, lr = {
       key: !0,
       ref: !0,
       __self: !0,
       __source: !0
-    }, yt, gt;
-    function ur(r) {
+    }, pt, yt;
+    function cr(r) {
       if (Te.call(r, "ref")) {
         var s = Object.getOwnPropertyDescriptor(r, "ref").get;
         if (s && s.isReactWarning)
@@ -402,7 +401,7 @@ function Sn() {
       }
       return r.ref !== void 0;
     }
-    function fr(r) {
+    function ur(r) {
       if (Te.call(r, "key")) {
         var s = Object.getOwnPropertyDescriptor(r, "key").get;
         if (s && s.isReactWarning)
@@ -411,12 +410,12 @@ function Sn() {
       return r.key !== void 0;
     }
     function dr(r, s) {
-      typeof r.ref == "string" && pt.current;
+      typeof r.ref == "string" && vt.current;
     }
-    function mr(r, s) {
+    function fr(r, s) {
       {
         var u = function() {
-          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));
+          pt || (pt = !0, P("%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,
@@ -424,10 +423,10 @@ function Sn() {
         });
       }
     }
-    function hr(r, s) {
+    function mr(r, s) {
       {
         var u = function() {
-          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));
+          yt || (yt = !0, P("%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,
@@ -435,7 +434,7 @@ function Sn() {
         });
       }
     }
-    var vr = function(r, s, u, p, T, I, b) {
+    var hr = function(r, s, u, v, T, R, b) {
       var g = {
         // This tag allows us to uniquely identify this as a React Element
         $$typeof: e,
@@ -445,7 +444,7 @@ function Sn() {
         ref: u,
         props: b,
         // Record the component responsible for creating this element.
-        _owner: I
+        _owner: R
       };
       return g._store = {}, Object.defineProperty(g._store, "validated", {
         configurable: !1,
@@ -456,7 +455,7 @@ function Sn() {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: p
+        value: v
       }), Object.defineProperty(g, "_source", {
         configurable: !1,
         enumerable: !1,
@@ -464,41 +463,41 @@ function Sn() {
         value: T
       }), Object.freeze && (Object.freeze(g.props), Object.freeze(g)), g;
     };
-    function pr(r, s, u, p, T) {
+    function vr(r, s, u, v, T) {
       {
-        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]);
+        var R, b = {}, g = null, z = null;
+        u !== void 0 && (ht(u), g = "" + u), ur(s) && (ht(s.key), g = "" + s.key), cr(s) && (z = s.ref, dr(s, T));
+        for (R in s)
+          Te.call(s, R) && !lr.hasOwnProperty(R) && (b[R] = s[R]);
         if (r && r.defaultProps) {
-          var O = r.defaultProps;
-          for (I in O)
-            b[I] === void 0 && (b[I] = O[I]);
+          var _ = r.defaultProps;
+          for (R in _)
+            b[R] === void 0 && (b[R] = _[R]);
         }
-        if (g || N) {
-          var M = typeof r == "function" ? r.displayName || r.name || "Unknown" : r;
-          g && mr(b, M), N && hr(b, M);
+        if (g || z) {
+          var F = typeof r == "function" ? r.displayName || r.name || "Unknown" : r;
+          g && fr(b, F), z && mr(b, F);
         }
-        return vr(r, g, N, T, p, pt.current, b);
+        return hr(r, g, z, T, v, vt.current, b);
       }
     }
-    var He = L.ReactCurrentOwner, bt = L.ReactDebugCurrentFrame;
+    var qe = L.ReactCurrentOwner, gt = L.ReactDebugCurrentFrame;
     function de(r) {
       if (r) {
-        var s = r._owner, u = ae(r.type, r._source, s ? s.type : null);
-        bt.setExtraStackFrame(u);
+        var s = r._owner, u = oe(r.type, r._source, s ? s.type : null);
+        gt.setExtraStackFrame(u);
       } else
-        bt.setExtraStackFrame(null);
+        gt.setExtraStackFrame(null);
     }
-    var Ge;
-    Ge = !1;
-    function Je(r) {
+    var He;
+    He = !1;
+    function Ge(r) {
       return typeof r == "object" && r !== null && r.$$typeof === e;
     }
-    function Et() {
+    function bt() {
       {
-        if (He.current) {
-          var r = K(He.current.type);
+        if (qe.current) {
+          var r = K(qe.current.type);
           if (r)
             return `
 
@@ -507,13 +506,13 @@ Check the render method of \`` + r + "`.";
         return "";
       }
     }
-    function yr(r) {
+    function pr(r) {
       return "";
     }
-    var Tt = {};
-    function gr(r) {
+    var Et = {};
+    function yr(r) {
       {
-        var s = Et();
+        var s = bt();
         if (!s) {
           var u = typeof r == "string" ? r : r.displayName || r.name;
           u && (s = `
@@ -523,39 +522,39 @@ Check the top-level render call using <` + u + ">.");
         return s;
       }
     }
-    function xt(r, s) {
+    function Tt(r, s) {
       {
         if (!r._store || r._store.validated || r.key != null)
           return;
         r._store.validated = !0;
-        var u = gr(s);
-        if (Tt[u])
+        var u = yr(s);
+        if (Et[u])
           return;
-        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);
+        Et[u] = !0;
+        var v = "";
+        r && r._owner && r._owner !== qe.current && (v = " It was passed a child from " + K(r._owner.type) + "."), de(r), P('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), de(null);
       }
     }
-    function St(r, s) {
+    function xt(r, s) {
       {
         if (typeof r != "object")
           return;
-        if (qe(r))
+        if (Ue(r))
           for (var u = 0; u < r.length; u++) {
-            var p = r[u];
-            Je(p) && xt(p, s);
+            var v = r[u];
+            Ge(v) && Tt(v, s);
           }
-        else if (Je(r))
+        else if (Ge(r))
           r._store && (r._store.validated = !0);
         else if (r) {
-          var T = Z(r);
+          var T = Q(r);
           if (typeof T == "function" && T !== r.entries)
-            for (var I = T.call(r), b; !(b = I.next()).done; )
-              Je(b.value) && xt(b.value, s);
+            for (var R = T.call(r), b; !(b = R.next()).done; )
+              Ge(b.value) && Tt(b.value, s);
         }
       }
     }
-    function br(r) {
+    function gr(r) {
       {
         var s = r.type;
         if (s == null || typeof s == "string")
@@ -563,95 +562,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 === v || // Note: Memo only checks outer props here.
+        else if (typeof s == "object" && (s.$$typeof === m || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
-        s.$$typeof === R))
+        s.$$typeof === S))
           u = s.propTypes;
         else
           return;
         if (u) {
-          var p = K(s);
-          or(u, r.props, "prop", p, r);
-        } else if (s.PropTypes !== void 0 && !Ge) {
-          Ge = !0;
+          var v = K(s);
+          ir(u, r.props, "prop", v, r);
+        } else if (s.PropTypes !== void 0 && !He) {
+          He = !0;
           var T = K(s);
-          C("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", T || "Unknown");
+          P("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", T || "Unknown");
         }
-        typeof s.getDefaultProps == "function" && !s.getDefaultProps.isReactClassApproved && C("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+        typeof s.getDefaultProps == "function" && !s.getDefaultProps.isReactClassApproved && P("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
     }
-    function Er(r) {
+    function br(r) {
       {
         for (var s = Object.keys(r.props), u = 0; u < s.length; u++) {
-          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);
+          var v = s[u];
+          if (v !== "children" && v !== "key") {
+            de(r), P("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", v), de(null);
             break;
           }
         }
-        r.ref !== null && (de(r), C("Invalid attribute `ref` supplied to `React.Fragment`."), de(null));
+        r.ref !== null && (de(r), P("Invalid attribute `ref` supplied to `React.Fragment`."), de(null));
       }
     }
-    var It = {};
-    function Ct(r, s, u, p, T, I) {
+    var Ct = {};
+    function It(r, s, u, v, T, R) {
       {
-        var b = Ve(r);
+        var b = Le(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 = 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, 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 z = pr();
+          z ? g += z : g += bt();
+          var _;
+          r === null ? _ = "null" : Ue(r) ? _ = "array" : r !== void 0 && r.$$typeof === e ? (_ = "<" + (K(r.type) || "Unknown") + " />", g = " Did you accidentally export a JSX literal instead of a component?") : _ = typeof r, P("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", _, g);
         }
-        var M = pr(r, s, u, T, I);
-        if (M == null)
-          return M;
+        var F = vr(r, s, u, T, R);
+        if (F == null)
+          return F;
         if (b) {
-          var W = s.children;
-          if (W !== void 0)
-            if (p)
-              if (qe(W)) {
-                for (var me = 0; me < W.length; me++)
-                  St(W[me], r);
-                Object.freeze && Object.freeze(W);
+          var U = s.children;
+          if (U !== void 0)
+            if (v)
+              if (Ue(U)) {
+                for (var fe = 0; fe < U.length; fe++)
+                  xt(U[fe], r);
+                Object.freeze && Object.freeze(U);
               } else
-                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.");
+                P("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
-              St(W, r);
+              xt(U, r);
         }
         if (Te.call(s, "key")) {
-          var se = K(r), Y = Object.keys(s).filter(function(Rr) {
+          var ae = 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:
+          }), Je = Y.length > 0 ? "{key: someKey, " + Y.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!Ct[ae + Je]) {
+            var Ir = Y.length > 0 ? "{" + Y.join(": ..., ") + ": ...}" : "{}";
+            P(`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, Cr, se), It[se + Ke] = !0;
+  <%s key={someKey} {...props} />`, Je, ae, Ir, ae), Ct[ae + Je] = !0;
           }
         }
-        return r === i ? Er(M) : br(M), M;
+        return r === i ? br(F) : gr(F), F;
       }
     }
-    function Tr(r, s, u) {
-      return Ct(r, s, u, !0);
+    function Er(r, s, u) {
+      return It(r, s, u, !0);
     }
-    function xr(r, s, u) {
-      return Ct(r, s, u, !1);
+    function Tr(r, s, u) {
+      return It(r, s, u, !1);
     }
-    var Sr = xr, Ir = Tr;
-    Se.Fragment = i, Se.jsx = Sr, Se.jsxs = Ir;
-  })()), Se;
+    var xr = Tr, Cr = Er;
+    Ce.Fragment = i, Ce.jsx = xr, Ce.jsxs = Cr;
+  })()), Ce;
 }
-var _t;
-function In() {
-  return _t || (_t = 1, process.env.NODE_ENV === "production" ? $e.exports = xn() : $e.exports = Sn()), $e.exports;
+var Ot;
+function Rn() {
+  return Ot || (Ot = 1, process.env.NODE_ENV === "production" ? $e.exports = Cn() : $e.exports = In()), $e.exports;
 }
-var Ce = In(), De = { exports: {} }, x = {};
+var Re = Rn(), De = { exports: {} }, x = {};
 /** @license React v16.13.1
  * react-is.production.min.js
  *
@@ -660,31 +659,31 @@ var Ce = In(), De = { exports: {} }, x = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var At;
-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, 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) {
+var _t;
+function Sn() {
+  if (_t) return x;
+  _t = 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, d = 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, S = t ? Symbol.for("react.suspense") : 60113, I = t ? Symbol.for("react.suspense_list") : 60120, $ = t ? Symbol.for("react.memo") : 60115, k = t ? Symbol.for("react.lazy") : 60116, W = t ? Symbol.for("react.block") : 60121, Q = t ? Symbol.for("react.fundamental") : 60117, L = t ? Symbol.for("react.responder") : 60118, P = t ? Symbol.for("react.scope") : 60119;
+  function M(c) {
     if (typeof c == "object" && c !== null) {
       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 R:
+            case S:
               return c;
             default:
               switch (c = c && c.$$typeof, c) {
                 case h:
                 case E:
-                case A:
-                case j:
-                case f:
+                case k:
+                case $:
+                case d:
                   return c;
                 default:
                   return V;
@@ -695,38 +694,38 @@ function Cn() {
       }
     }
   }
-  function w(c) {
-    return k(c) === m;
+  function O(c) {
+    return M(c) === p;
   }
-  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;
+  return x.AsyncMode = m, x.ConcurrentMode = p, x.ContextConsumer = h, x.ContextProvider = d, x.Element = e, x.ForwardRef = E, x.Fragment = i, x.Lazy = k, x.Memo = $, x.Portal = n, x.Profiler = l, x.StrictMode = a, x.Suspense = S, x.isAsyncMode = function(c) {
+    return O(c) || M(c) === m;
+  }, x.isConcurrentMode = O, x.isContextConsumer = function(c) {
+    return M(c) === h;
   }, x.isContextProvider = function(c) {
-    return k(c) === f;
+    return M(c) === d;
   }, x.isElement = function(c) {
     return typeof c == "object" && c !== null && c.$$typeof === e;
   }, x.isForwardRef = function(c) {
-    return k(c) === E;
+    return M(c) === E;
   }, x.isFragment = function(c) {
-    return k(c) === i;
+    return M(c) === i;
   }, x.isLazy = function(c) {
-    return k(c) === A;
+    return M(c) === k;
   }, x.isMemo = function(c) {
-    return k(c) === j;
+    return M(c) === $;
   }, x.isPortal = function(c) {
-    return k(c) === n;
+    return M(c) === n;
   }, x.isProfiler = function(c) {
-    return k(c) === l;
+    return M(c) === l;
   }, x.isStrictMode = function(c) {
-    return k(c) === a;
+    return M(c) === a;
   }, x.isSuspense = function(c) {
-    return k(c) === R;
+    return M(c) === S;
   }, x.isValidElementType = function(c) {
-    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;
+    return typeof c == "string" || typeof c == "function" || c === i || c === p || c === l || c === a || c === S || c === I || typeof c == "object" && c !== null && (c.$$typeof === k || c.$$typeof === $ || c.$$typeof === d || c.$$typeof === h || c.$$typeof === E || c.$$typeof === Q || c.$$typeof === L || c.$$typeof === P || c.$$typeof === W);
+  }, x.typeOf = M, x;
 }
-var S = {};
+var C = {};
 /** @license React v16.13.1
  * react-is.development.js
  *
@@ -735,37 +734,37 @@ var S = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var kt;
-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 === 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;
+var At;
+function Pn() {
+  return At || (At = 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, d = 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, S = t ? Symbol.for("react.suspense") : 60113, I = t ? Symbol.for("react.suspense_list") : 60120, $ = t ? Symbol.for("react.memo") : 60115, k = t ? Symbol.for("react.lazy") : 60116, W = t ? Symbol.for("react.block") : 60121, Q = t ? Symbol.for("react.fundamental") : 60117, L = t ? Symbol.for("react.responder") : 60118, P = t ? Symbol.for("react.scope") : 60119;
+    function M(f) {
+      return typeof f == "string" || typeof f == "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+      f === i || f === p || f === l || f === a || f === S || f === I || typeof f == "object" && f !== null && (f.$$typeof === k || f.$$typeof === $ || f.$$typeof === d || f.$$typeof === h || f.$$typeof === E || f.$$typeof === Q || f.$$typeof === L || f.$$typeof === P || f.$$typeof === W);
+    }
+    function O(f) {
+      if (typeof f == "object" && f !== null) {
+        var Ee = f.$$typeof;
         switch (Ee) {
           case e:
-            var fe = d.type;
-            switch (fe) {
-              case v:
+            var ue = f.type;
+            switch (ue) {
               case m:
+              case p:
               case i:
               case l:
               case a:
-              case R:
-                return fe;
+              case S:
+                return ue;
               default:
-                var ae = fe && fe.$$typeof;
-                switch (ae) {
+                var oe = ue && ue.$$typeof;
+                switch (oe) {
                   case h:
                   case E:
-                  case A:
-                  case j:
-                  case f:
-                    return ae;
+                  case k:
+                  case $:
+                  case d:
+                    return oe;
                   default:
                     return Ee;
                 }
@@ -775,58 +774,58 @@ function Rn() {
         }
       }
     }
-    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) === v;
+    var c = m, V = p, he = h, Pe = d, we = e, Le = E, Ve = i, Oe = k, K = $, ee = n, ie = l, _e = a, Ae = S, ve = !1;
+    function ke(f) {
+      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(f) || O(f) === m;
     }
-    function pe(d) {
-      return w(d) === m;
+    function pe(f) {
+      return O(f) === p;
     }
-    function Me(d) {
-      return w(d) === h;
+    function Me(f) {
+      return O(f) === h;
     }
-    function Fe(d) {
-      return w(d) === f;
+    function Fe(f) {
+      return O(f) === d;
     }
-    function je(d) {
-      return typeof d == "object" && d !== null && d.$$typeof === e;
+    function je(f) {
+      return typeof f == "object" && f !== null && f.$$typeof === e;
     }
-    function Be(d) {
-      return w(d) === E;
+    function Ye(f) {
+      return O(f) === E;
     }
-    function We(d) {
-      return w(d) === i;
+    function Be(f) {
+      return O(f) === i;
     }
-    function ye(d) {
-      return w(d) === A;
+    function ye(f) {
+      return O(f) === k;
     }
-    function ge(d) {
-      return w(d) === j;
+    function ge(f) {
+      return O(f) === $;
     }
-    function ce(d) {
-      return w(d) === n;
+    function le(f) {
+      return O(f) === n;
     }
-    function be(d) {
-      return w(d) === l;
+    function be(f) {
+      return O(f) === l;
     }
-    function ue(d) {
-      return w(d) === a;
+    function ce(f) {
+      return O(f) === a;
     }
-    function Ue(d) {
-      return w(d) === R;
+    function We(f) {
+      return O(f) === 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 Pn() {
-  return Mt || (Mt = 1, process.env.NODE_ENV === "production" ? De.exports = Cn() : De.exports = Rn()), De.exports;
+    C.AsyncMode = c, C.ConcurrentMode = V, C.ContextConsumer = he, C.ContextProvider = Pe, C.Element = we, C.ForwardRef = Le, C.Fragment = Ve, C.Lazy = Oe, C.Memo = K, C.Portal = ee, C.Profiler = ie, C.StrictMode = _e, C.Suspense = Ae, C.isAsyncMode = ke, C.isConcurrentMode = pe, C.isContextConsumer = Me, C.isContextProvider = Fe, C.isElement = je, C.isForwardRef = Ye, C.isFragment = Be, C.isLazy = ye, C.isMemo = ge, C.isPortal = le, C.isProfiler = be, C.isStrictMode = ce, C.isSuspense = We, C.isValidElementType = M, C.typeOf = O;
+  })()), C;
 }
-var Ze, Ft;
+var kt;
 function wn() {
-  if (Ft) return Ze;
-  Ft = 1;
-  var t = Pn(), e = {
+  return kt || (kt = 1, process.env.NODE_ENV === "production" ? De.exports = Sn() : De.exports = Pn()), De.exports;
+}
+var Xe, Mt;
+function On() {
+  if (Mt) return Xe;
+  Mt = 1;
+  var t = wn(), e = {
     childContextTypes: !0,
     contextType: !0,
     contextTypes: !0,
@@ -861,42 +860,42 @@ function wn() {
     type: !0
   }, l = {};
   l[t.ForwardRef] = i, l[t.Memo] = a;
-  function f(A) {
-    return t.isMemo(A) ? a : l[A.$$typeof] || e;
-  }
-  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 (z) {
-        var L = R(B);
-        L && L !== z && j(A, L, Z);
+  function d(k) {
+    return t.isMemo(k) ? a : l[k.$$typeof] || e;
+  }
+  var h = Object.defineProperty, m = Object.getOwnPropertyNames, p = Object.getOwnPropertySymbols, E = Object.getOwnPropertyDescriptor, S = Object.getPrototypeOf, I = Object.prototype;
+  function $(k, W, Q) {
+    if (typeof W != "string") {
+      if (I) {
+        var L = S(W);
+        L && L !== I && $(k, L, Q);
       }
-      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);
+      var P = m(W);
+      p && (P = P.concat(p(W)));
+      for (var M = d(k), O = d(W), c = 0; c < P.length; ++c) {
+        var V = P[c];
+        if (!n[V] && !(Q && Q[V]) && !(O && O[V]) && !(M && M[V])) {
+          var he = E(W, V);
           try {
-            h(A, V, he);
+            h(k, V, he);
           } catch {
           }
         }
       }
     }
-    return A;
+    return k;
   }
-  return Ze = j, Ze;
+  return Xe = $, Xe;
 }
-wn();
-var On = !0;
-function _n(t, e, n) {
+On();
+var _n = !0;
+function An(t, e, n) {
   var i = "";
   return n.split(" ").forEach(function(a) {
     t[a] !== void 0 ? e.push(t[a] + ";") : a && (i += a + " ");
   }), i;
 }
-var Kt = function(e, n, i) {
+var Jt = 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
@@ -907,9 +906,9 @@ var Kt = function(e, n, i) {
   // in node since emotion-server relies on whether a style is in
   // the registered cache to know whether a style is global or not
   // 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) {
-  Kt(e, n, i);
+  _n === !1) && e.registered[a] === void 0 && (e.registered[a] = n.styles);
+}, kn = function(e, n, i) {
+  Jt(e, n, i);
   var a = e.key + "-" + n.name;
   if (e.inserted[n.name] === void 0) {
     var l = n;
@@ -918,7 +917,7 @@ var Kt = function(e, n, i) {
     while (l !== void 0);
   }
 };
-function kn(t) {
+function Mn(t) {
   for (var e = 0, n, i = 0, a = t.length; a >= 4; ++i, a -= 4)
     n = t.charCodeAt(i) & 255 | (t.charCodeAt(++i) & 255) << 8 | (t.charCodeAt(++i) & 255) << 16 | (t.charCodeAt(++i) & 255) << 24, n = /* Math.imul(k, m): */
     (n & 65535) * 1540483477 + ((n >>> 16) * 59797 << 16), n ^= /* k >>> r: */
@@ -937,7 +936,7 @@ function kn(t) {
   return e ^= e >>> 13, e = /* Math.imul(h, m): */
   (e & 65535) * 1540483477 + ((e >>> 16) * 59797 << 16), ((e ^ e >>> 15) >>> 0).toString(36);
 }
-var Mn = {
+var Fn = {
   animationIterationCount: 1,
   aspectRatio: 1,
   borderImageOutset: 1,
@@ -987,24 +986,24 @@ var Mn = {
   strokeOpacity: 1,
   strokeWidth: 1
 };
-function Fn(t) {
+function jn(t) {
   var e = /* @__PURE__ */ Object.create(null);
   return function(n) {
     return e[n] === void 0 && (e[n] = t(n)), e[n];
   };
 }
-var jn = /[A-Z]|^ms/g, Nn = /_EMO_([^_]+?)_([^]*?)_EMO_/g, Xt = function(e) {
+var Nn = /[A-Z]|^ms/g, $n = /_EMO_([^_]+?)_([^]*?)_EMO_/g, Kt = function(e) {
   return e.charCodeAt(1) === 45;
-}, jt = function(e) {
+}, Ft = function(e) {
   return e != null && typeof e != "boolean";
-}, Qe = /* @__PURE__ */ Fn(function(t) {
-  return Xt(t) ? t : t.replace(jn, "-$&").toLowerCase();
-}), Nt = function(e, n) {
+}, Ze = /* @__PURE__ */ jn(function(t) {
+  return Kt(t) ? t : t.replace(Nn, "-$&").toLowerCase();
+}), jt = function(e, n) {
   switch (e) {
     case "animation":
     case "animationName":
       if (typeof n == "string")
-        return n.replace(Nn, function(i, a, l) {
+        return n.replace($n, function(i, a, l) {
           return X = {
             name: a,
             styles: l,
@@ -1012,9 +1011,9 @@ var jn = /[A-Z]|^ms/g, Nn = /_EMO_([^_]+?)_([^]*?)_EMO_/g, Xt = function(e) {
           }, a;
         });
   }
-  return Mn[e] !== 1 && !Xt(e) && typeof n == "number" && n !== 0 ? n + "px" : n;
+  return Fn[e] !== 1 && !Kt(e) && typeof n == "number" && n !== 0 ? n + "px" : n;
 };
-function Re(t, e, n) {
+function Se(t, e, n) {
   if (n == null)
     return "";
   var i = n;
@@ -1033,23 +1032,23 @@ function Re(t, e, n) {
         }, a.name;
       var l = n;
       if (l.styles !== void 0) {
-        var f = l.next;
-        if (f !== void 0)
-          for (; f !== void 0; )
+        var d = l.next;
+        if (d !== void 0)
+          for (; d !== void 0; )
             X = {
-              name: f.name,
-              styles: f.styles,
+              name: d.name,
+              styles: d.styles,
               next: X
-            }, f = f.next;
+            }, d = d.next;
         var h = l.styles + ";";
         return h;
       }
-      return $n(t, e, n);
+      return Dn(t, e, n);
     }
     case "function": {
       if (t !== void 0) {
-        var v = X, m = n(t);
-        return X = v, Re(t, e, m);
+        var m = X, p = n(t);
+        return X = m, Se(t, e, p);
       }
       break;
     }
@@ -1057,186 +1056,154 @@ function Re(t, e, n) {
   var E = n;
   return E;
 }
-function $n(t, e, n) {
+function Dn(t, e, n) {
   var i = "";
   if (Array.isArray(n))
     for (var a = 0; a < n.length; a++)
-      i += Re(t, e, n[a]) + ";";
+      i += Se(t, e, n[a]) + ";";
   else
     for (var l in n) {
-      var f = n[l];
-      if (typeof f != "object") {
-        var h = f;
-        jt(h) && (i += Qe(l) + ":" + Nt(l, h) + ";");
-      } else if (Array.isArray(f) && typeof f[0] == "string" && e == null)
-        for (var v = 0; v < f.length; v++)
-          jt(f[v]) && (i += Qe(l) + ":" + Nt(l, f[v]) + ";");
+      var d = n[l];
+      if (typeof d != "object") {
+        var h = d;
+        Ft(h) && (i += Ze(l) + ":" + jt(l, h) + ";");
+      } else if (Array.isArray(d) && typeof d[0] == "string" && e == null)
+        for (var m = 0; m < d.length; m++)
+          Ft(d[m]) && (i += Ze(l) + ":" + jt(l, d[m]) + ";");
       else {
-        var m = Re(t, e, f);
+        var p = Se(t, e, d);
         switch (l) {
           case "animation":
           case "animationName": {
-            i += Qe(l) + ":" + m + ";";
+            i += Ze(l) + ":" + p + ";";
             break;
           }
           default:
-            i += l + "{" + m + "}";
+            i += l + "{" + p + "}";
         }
       }
     }
   return i;
 }
-var $t = /label:\s*([^\s;{]+)\s*(;|$)/g, X;
-function Dn(t, e, n) {
+var Nt = /label:\s*([^\s;{]+)\s*(;|$)/g, X;
+function zn(t, e, n) {
   if (t.length === 1 && typeof t[0] == "object" && t[0] !== null && t[0].styles !== void 0)
     return t[0];
   var i = !0, a = "";
   X = void 0;
   var l = t[0];
   if (l == null || l.raw === void 0)
-    i = !1, a += Re(n, e, l);
+    i = !1, a += Se(n, e, l);
   else {
-    var f = l;
-    a += f[0];
+    var d = l;
+    a += d[0];
   }
   for (var h = 1; h < t.length; h++)
-    if (a += Re(n, e, t[h]), i) {
-      var v = l;
-      a += v[h];
-    }
-  $t.lastIndex = 0;
-  for (var m = "", E; (E = $t.exec(a)) !== null; )
-    m += "-" + E[1];
-  var R = kn(a) + m;
+    if (a += Se(n, e, t[h]), i) {
+      var m = l;
+      a += m[h];
+    }
+  Nt.lastIndex = 0;
+  for (var p = "", E; (E = Nt.exec(a)) !== null; )
+    p += "-" + E[1];
+  var S = Mn(a) + p;
   return {
-    name: R,
+    name: S,
     styles: a,
     next: X
   };
 }
-var zn = function(e) {
+var Ln = function(e) {
   return e();
-}, Ln = te.useInsertionEffect ? te.useInsertionEffect : !1, Vn = Ln || zn, Zt = /* @__PURE__ */ te.createContext(
+}, Vn = te.useInsertionEffect ? te.useInsertionEffect : !1, Yn = Vn || Ln, Xt = /* @__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__ */ Fr({
+  typeof HTMLElement < "u" ? /* @__PURE__ */ Mr({
     key: "css"
   }) : null
 );
-Zt.Provider;
-var Yn = function(e) {
-  return /* @__PURE__ */ Ar(function(n, i) {
-    var a = at(Zt);
+Xt.Provider;
+var Bn = function(e) {
+  return /* @__PURE__ */ _r(function(n, i) {
+    var a = ot(Xt);
     return e(n, a, i);
   });
-}, Bn = /* @__PURE__ */ te.createContext({}), ze = {}.hasOwnProperty, nt = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__", Qt = function(e, n) {
+}, Wn = /* @__PURE__ */ te.createContext({}), ze = {}.hasOwnProperty, rt = "__EMOTION_TYPE_PLEASE_DO_NOT_USE__", Zt = function(e, n) {
   var i = {};
   for (var a in n)
     ze.call(n, a) && (i[a] = n[a]);
-  return i[nt] = e, i;
-}, Wn = function(e) {
+  return i[rt] = e, i;
+}, Un = function(e) {
   var n = e.cache, i = e.serialized, a = e.isStringTag;
-  return Kt(n, i, a), Vn(function() {
-    return An(n, i, a);
+  return Jt(n, i, a), Yn(function() {
+    return kn(n, i, a);
   }), null;
-}, Un = /* @__PURE__ */ Yn(function(t, e, n) {
+}, qn = /* @__PURE__ */ Bn(function(t, e, n) {
   var i = t.css;
   typeof i == "string" && e.registered[i] !== void 0 && (i = e.registered[i]);
-  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, te.useContext(Bn));
-  f += e.key + "-" + h.name;
-  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, {
+  var a = t[rt], l = [i], d = "";
+  typeof t.className == "string" ? d = An(e.registered, l, t.className) : t.className != null && (d = t.className + " ");
+  var h = zn(l, void 0, te.useContext(Wn));
+  d += e.key + "-" + h.name;
+  var m = {};
+  for (var p in t)
+    ze.call(t, p) && p !== "css" && p !== rt && (m[p] = t[p]);
+  return m.className = d, n && (m.ref = n), /* @__PURE__ */ te.createElement(te.Fragment, null, /* @__PURE__ */ te.createElement(Un, {
     cache: e,
     serialized: h,
     isStringTag: typeof a == "string"
-  }), /* @__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") ? Ce.jsxs(er, Qt(e, n), i) : Ce.jsxs(e, n, i);
+  }), /* @__PURE__ */ te.createElement(a, m));
+}), Qt = qn, ut = Re.Fragment, o = function(e, n, i) {
+  return ze.call(n, "css") ? Re.jsx(Qt, Zt(e, n), i) : Re.jsx(e, n, i);
+}, j = function(e, n, i) {
+  return ze.call(n, "css") ? Re.jsxs(Qt, Zt(e, n), i) : Re.jsxs(e, n, i);
 };
-const qn = ({
-  breadcrumbs: t,
-  tabs: e,
-  ...n
-}) => {
-  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);
-        }
-      })),
-      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);
-        }
-      }))
-    }
-  );
-}, Hn = ({
+const 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,
+  const n = Dr({ prefix: "modalForm" }), [i, a] = q(""), [l, d] = q(""), [h, m] = q(!1);
+  return /* @__PURE__ */ j(Wr, { onClose: t, initialFocus: "[name=url]", children: [
+    /* @__PURE__ */ o(Lr, { children: /* @__PURE__ */ o(zr, { children: "Add video" }) }),
+    /* @__PURE__ */ o(Yr, { children: /* @__PURE__ */ j(
+      Vr,
       {
         id: n,
         component: "form",
-        onSubmit: async (m) => {
-          m.preventDefault();
+        onSubmit: async (p) => {
+          p.preventDefault();
           try {
-            v(!0), await e({ url: i, title: l });
+            m(!0), await e({ url: i, title: l });
           } finally {
-            v(!1);
+            m(!1);
           }
         },
         children: [
-          /* @__PURE__ */ o(tt, { label: "URL", children: /* @__PURE__ */ o(
+          /* @__PURE__ */ o(et, { label: "URL", children: /* @__PURE__ */ o(
             Rt,
             {
               name: "url",
               value: i,
-              onChange: (m) => a(m.target.value)
+              onChange: (p) => a(p.target.value)
             }
           ) }),
-          /* @__PURE__ */ o(tt, { label: "Title", children: /* @__PURE__ */ o(
+          /* @__PURE__ */ o(et, { label: "Title", children: /* @__PURE__ */ o(
             Rt,
             {
               name: "title",
               value: l,
-              onChange: (m) => f(m.target.value)
+              onChange: (p) => d(p.target.value)
             }
           ) })
         ]
       }
     ) }),
-    /* @__PURE__ */ F(Yr, { children: [
-      /* @__PURE__ */ o(Vt, { onClick: t, children: "Cancel" }),
+    /* @__PURE__ */ j(Br, { children: [
+      /* @__PURE__ */ o(Lt, { onClick: t, children: "Cancel" }),
       /* @__PURE__ */ o(
         re,
         {
@@ -1250,20 +1217,20 @@ const qn = ({
       )
     ] })
   ] });
-}, Dt = ne(
+}, $t = me(
   ({ onSave: t }) => {
-    const [e, n] = q(!1), i = $(
+    const [e, n] = q(!1), i = D(
       async (a) => {
         await t(a), n(!1);
       },
       [t]
     );
-    return /* @__PURE__ */ F(Le, { children: [
+    return /* @__PURE__ */ j(ut, { children: [
       /* @__PURE__ */ o(
         re,
         {
           onClick: () => n(!0),
-          iconType: ut,
+          iconType: lt,
           color: "primary",
           children: "Add video"
         }
@@ -1277,7 +1244,7 @@ const qn = ({
       )
     ] });
   }
-), tr = {
+), er = {
   Audio: "",
   Dailymotion: "https://www.dailymotion.com/favicon.ico",
   Niconico: "https://www.nicovideo.jp/favicon.ico",
@@ -1285,11 +1252,11 @@ const qn = ({
   Twitch: "https://www.twitch.tv/favicon.ico",
   Vimeo: "https://vimeo.com/favicon.ico",
   YouTube: "https://www.youtube.com/favicon.ico"
-}, Gn = D(
+}, Gn = N(
   ({ playQueueStore: t }) => {
-    const { euiTheme: e } = Yt();
-    return /* @__PURE__ */ F(
-      Ur,
+    const { euiTheme: e } = Vt();
+    return /* @__PURE__ */ j(
+      qr,
       {
         style: {
           position: "sticky",
@@ -1298,8 +1265,8 @@ const qn = ({
           background: e.colors.backgroundBasePlain
         },
         children: [
-          /* @__PURE__ */ o(Wr, { children: /* @__PURE__ */ o(
-            Bt,
+          /* @__PURE__ */ o(Ur, { children: /* @__PURE__ */ o(
+            Yt,
             {
               id: "",
               checked: t.allItemsSelected,
@@ -1308,19 +1275,19 @@ const qn = ({
               }
             }
           ) }),
-          /* @__PURE__ */ o(Xe, { width: 24 }),
-          /* @__PURE__ */ o(Xe, { children: "Title" }),
-          /* @__PURE__ */ o(Xe, {})
+          /* @__PURE__ */ o(Ke, { width: 24 }),
+          /* @__PURE__ */ o(Ke, { children: "Title" }),
+          /* @__PURE__ */ o(Ke, {})
         ]
       }
     );
   }
-), Jn = ne(
+), Jn = me(
   ({
     item: t,
     closePopover: e
   }) => {
-    const n = st(
+    const n = at(
       () => [
         {
           id: 0,
@@ -1341,7 +1308,7 @@ const qn = ({
             },
             {
               name: "Add to play queue",
-              icon: /* @__PURE__ */ o(H, { type: ut }),
+              icon: /* @__PURE__ */ o(H, { type: lt }),
               onClick: async () => {
                 e(), await t.addToPlayQueue();
               }
@@ -1351,7 +1318,7 @@ const qn = ({
             },
             {
               name: "Move to the top",
-              icon: /* @__PURE__ */ o(H, { type: tn }),
+              icon: /* @__PURE__ */ o(H, { type: nn }),
               onClick: async () => {
                 e(), t.moveToTop();
               },
@@ -1359,7 +1326,7 @@ const qn = ({
             },
             {
               name: "Move to the bottom",
-              icon: /* @__PURE__ */ o(H, { type: rn }),
+              icon: /* @__PURE__ */ o(H, { type: on }),
               onClick: async () => {
                 e(), t.moveToBottom();
               },
@@ -1389,20 +1356,20 @@ const qn = ({
       ],
       [e, t]
     );
-    return /* @__PURE__ */ o(Wt, { initialPanelId: 0, panels: n });
+    return /* @__PURE__ */ o(Bt, { initialPanelId: 0, panels: n });
   }
-), Kn = ne(
+), Kn = me(
   ({ item: t }) => {
-    const [e, n] = q(!1), i = $(() => n(!e), [e]), a = $(() => n(!1), []);
+    const [e, n] = q(!1), i = D(() => n(!e), [e]), a = D(() => n(!1), []);
     return /* @__PURE__ */ o(
-      ct,
+      st,
       {
         button: /* @__PURE__ */ o(
           G,
           {
             title: "More options",
             "aria-label": "More options",
-            iconType: Ht,
+            iconType: qt,
             size: "s",
             color: "text",
             onClick: i
@@ -1422,14 +1389,14 @@ const qn = ({
       }
     );
   }
-), Xn = D(
+), Xn = N(
   ({ item: t }) => {
-    const e = ie();
-    return /* @__PURE__ */ F(rt, { textOnly: !1, hasActions: !0, align: "right", children: [
+    const e = ne();
+    return /* @__PURE__ */ j(tt, { textOnly: !1, hasActions: !0, align: "right", children: [
       /* @__PURE__ */ o(
         re,
         {
-          iconType: en,
+          iconType: rn,
           size: "s",
           onClick: async () => {
             t.isCurrent ? await e.setCurrentTime(0) : t.play();
@@ -1440,7 +1407,7 @@ const qn = ({
       /* @__PURE__ */ o(
         re,
         {
-          iconType: ft,
+          iconType: ct,
           size: "s",
           onClick: t.remove,
           children: "Remove"
@@ -1449,29 +1416,29 @@ const qn = ({
       /* @__PURE__ */ o(Kn, { item: t })
     ] });
   }
-), Zn = D(
+), Zn = N(
   ({ item: t }) => {
-    const e = ie();
-    return /* @__PURE__ */ F(Gr, { isSelected: t.isCurrent, children: [
-      /* @__PURE__ */ o(qr, { children: /* @__PURE__ */ o(
-        Bt,
+    const e = ne();
+    return /* @__PURE__ */ j(Jr, { isSelected: t.isCurrent, children: [
+      /* @__PURE__ */ o(Hr, { children: /* @__PURE__ */ o(
+        Yt,
         {
           id: t.id.toString(),
           checked: t.isSelected,
           onChange: t.toggleSelected
         }
       ) }),
-      /* @__PURE__ */ o(rt, { textOnly: !1, children: /* @__PURE__ */ o(
+      /* @__PURE__ */ o(tt, { textOnly: !1, children: /* @__PURE__ */ o(
         "img",
         {
-          src: tr[t.type],
+          src: er[t.type],
           width: 16,
           height: 16,
           alt: t.type
         }
       ) }),
-      /* @__PURE__ */ o(rt, { children: /* @__PURE__ */ o(
-        Hr,
+      /* @__PURE__ */ o(tt, { children: /* @__PURE__ */ o(
+        Gr,
         {
           href: t.url,
           target: "_blank",
@@ -1483,9 +1450,9 @@ const qn = ({
       /* @__PURE__ */ o(Xn, { item: t })
     ] }, t.id);
   }
-), Qn = D(
+), Qn = N(
   ({ playQueueStore: t }) => /* @__PURE__ */ o(
-    En,
+    Tn,
     {
       tag: "tbody",
       list: t.items,
@@ -1493,8 +1460,8 @@ const qn = ({
       children: t.items.map((e) => /* @__PURE__ */ o(Zn, { item: e }, e.id))
     }
   )
-), ei = D(
-  ({ playQueueStore: t }) => /* @__PURE__ */ F(Jr, { children: [
+), ei = N(
+  ({ playQueueStore: t }) => /* @__PURE__ */ j(Kr, { children: [
     /* @__PURE__ */ o(Gn, { playQueueStore: t }),
     /* @__PURE__ */ o(Qn, { playQueueStore: t })
   ] })
@@ -1502,29 +1469,29 @@ const qn = ({
 function ti(t) {
   return t !== null && typeof t == "object" && "title" in t && typeof t.title == "string";
 }
-const ri = D(
+const ri = N(
   ({ playQueueStore: t }) => /* @__PURE__ */ o(
     re,
     {
-      iconType: ut,
+      iconType: lt,
       onClick: t.addSelectedItems,
       disabled: t.isEmpty || t.selectedItems.length === 0,
       children: "Add to play queue"
     }
   )
 );
-D(
+N(
   ({ playQueueStore: t }) => {
     const [e, n] = q(!1);
-    return /* @__PURE__ */ F(Le, { children: [
+    return /* @__PURE__ */ j(ut, { children: [
       e && /* @__PURE__ */ o(
-        Xr,
+        Zr,
         {
           type: "push",
           size: "s",
           onClose: () => n(!1),
           children: /* @__PURE__ */ o("div", { style: { blockSize: "100%" }, children: /* @__PURE__ */ o(
-            Kr,
+            Xr,
             {
               language: "json",
               overflowHeight: "100%",
@@ -1543,18 +1510,18 @@ D(
         re,
         {
           onClick: () => n((i) => !i),
-          iconType: nn,
+          iconType: an,
           children: "Developer tools"
         }
       )
     ] });
   }
 );
-const ni = D(
+const Mi = N(
   ({ playQueueStore: t }) => {
-    const { euiTheme: e } = Yt(), n = $(
+    const { euiTheme: e } = Vt(), n = D(
       async (i) => {
-        const a = jr(i.url);
+        const a = Fr(i.url);
         if (a !== void 0) {
           const l = a.extractVideoId(i.url);
           if (l !== void 0) {
@@ -1576,9 +1543,9 @@ const ni = D(
       },
       [t]
     );
-    return /* @__PURE__ */ F(Le, { children: [
-      /* @__PURE__ */ F(
-        le,
+    return /* @__PURE__ */ j(ut, { children: [
+      /* @__PURE__ */ j(
+        se,
         {
           alignItems: "center",
           gutterSize: "m",
@@ -1601,7 +1568,7 @@ const ni = D(
             /* @__PURE__ */ o(J, { grow: !1, children: /* @__PURE__ */ o(
               re,
               {
-                iconType: ft,
+                iconType: ct,
                 onClick: t.removeSelectedItems,
                 disabled: t.isEmpty || t.selectedItems.length === 0,
                 children: "Remove"
@@ -1610,22 +1577,22 @@ const ni = D(
             /* @__PURE__ */ o(J, { grow: !1, children: /* @__PURE__ */ o(
               re,
               {
-                iconType: on,
+                iconType: sn,
                 onClick: t.clear,
                 disabled: t.isEmpty,
                 children: "Clear"
               }
             ) }),
             /* @__PURE__ */ o(J, { grow: !0 }),
-            /* @__PURE__ */ F(J, { grow: !1, children: [
+            /* @__PURE__ */ j(J, { grow: !1, children: [
               !1,
-              /* @__PURE__ */ o(Dt, { onSave: n })
+              /* @__PURE__ */ o($t, { onSave: n })
             ] })
           ]
         }
       ),
       /* @__PURE__ */ o(
-        Ut,
+        Wt,
         {
           size: "l",
           style: {
@@ -1637,32 +1604,21 @@ const ni = D(
         }
       ),
       t.isEmpty ? /* @__PURE__ */ o(
-        Zr,
+        Qr,
         {
           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, { onSave: n })
+          actions: /* @__PURE__ */ o($t, { onSave: n })
         }
       ) : /* @__PURE__ */ o(ei, { playQueueStore: t })
     ] });
   }
-), Fi = D(
-  ({ playQueueStore: t }) => /* @__PURE__ */ F(Le, { children: [
-    /* @__PURE__ */ o(
-      qn,
-      {
-        pageTitle: "Play queue",
-        rightSideItems: []
-      }
-    ),
-    /* @__PURE__ */ o(lt.Section, { children: /* @__PURE__ */ o(ni, { playQueueStore: t }) })
-  ] })
-), et = new Tn({
+), Qe = new xn({
   coerceTypes: !0
 });
-function ii(t, e) {
+function ni(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)
+  if (n = Qe.getSchema(e), n === void 0 && (Qe.addSchema(t, e), n = Qe.getSchema(e)), n === void 0 || n.schema !== t)
     throw new Error(
       `Invalid schema. Expected: '${JSON.stringify(
         t
@@ -1670,7 +1626,7 @@ function ii(t, e) {
     );
   return n;
 }
-const oi = {
+const ii = {
   type: "object",
   properties: {
     url: {
@@ -1688,8 +1644,8 @@ const oi = {
   },
   required: ["url", "type", "videoId", "title"]
 };
-var P = /* @__PURE__ */ ((t) => (t.Off = "Off", t.All = "All", t.One = "One", t))(P || {});
-const ai = {
+var w = /* @__PURE__ */ ((t) => (t.Off = "Off", t.All = "All", t.One = "One", t))(w || {});
+const oi = {
   type: "object",
   properties: {
     version: {
@@ -1698,7 +1654,7 @@ const ai = {
     },
     repeat: {
       type: "string",
-      enum: Object.values(P),
+      enum: Object.values(w),
       nullable: !0
     },
     shuffle: {
@@ -1708,7 +1664,7 @@ const ai = {
     items: {
       type: "array",
       nullable: !0,
-      items: oi
+      items: ii
     },
     currentIndex: {
       type: "integer",
@@ -1717,18 +1673,18 @@ const ai = {
   }
 }, Ie = class Ie {
   constructor(e, n, i) {
-    U(this, "id");
-    U(this, "isSelected", !1);
+    B(this, "id");
+    B(this, "isSelected", !1);
     this.observableStateProvider = e, this.playQueueStore = n, this.dto = i, this.id = Ie.nextId++, e.makeObservable(this, {
-      isSelected: ee,
-      isCurrent: _,
-      index: _,
-      isFirst: _,
-      isLast: _,
-      canMoveToTop: _,
-      canMoveToBottom: _,
-      canRemoveToTop: _,
-      canRemoveOthers: _,
+      isSelected: Z,
+      isCurrent: A,
+      index: A,
+      isFirst: A,
+      isLast: A,
+      canMoveToTop: A,
+      canMoveToBottom: A,
+      canRemoveToTop: A,
+      canRemoveOthers: A,
       unselect: y,
       toggleSelected: y.bound,
       play: y,
@@ -1825,34 +1781,34 @@ const ai = {
     return this.playQueueStore.removeOtherItems(this);
   }
 };
-U(Ie, "nextId", 1);
-let it = Ie;
-class si {
+B(Ie, "nextId", 1);
+let nt = Ie;
+class ai {
   constructor(e) {
-    U(this, "interacted", !1);
-    U(this, "items", []);
-    U(this, "currentId");
-    U(this, "repeat", P.Off);
-    U(this, "shuffle", !1);
+    B(this, "interacted", !1);
+    B(this, "items", []);
+    B(this, "currentId");
+    B(this, "repeat", w.Off);
+    B(this, "shuffle", !1);
     this.observableStateProvider = e, e.makeObservable(this, {
-      interacted: ee,
-      items: ee,
-      currentId: ee,
-      repeat: ee,
-      shuffle: ee,
-      localStorageState: _.struct,
-      isEmpty: _,
-      currentItem: _,
-      canPlay: _,
-      canPause: _,
-      hasMultipleItems: _,
-      currentIndex: _,
-      hasPreviousItem: _,
-      hasNextItem: _,
-      isLastItem: _,
-      selectedItems: _,
-      allItemsSelected: _,
-      selectedItemsOrAllItems: _,
+      interacted: Z,
+      items: Z,
+      currentId: Z,
+      repeat: Z,
+      shuffle: Z,
+      localStorageState: A.struct,
+      isEmpty: A,
+      currentItem: A,
+      canPlay: A,
+      canPause: A,
+      hasMultipleItems: A,
+      currentIndex: A,
+      hasPreviousItem: A,
+      hasNextItem: A,
+      isLastItem: A,
+      selectedItems: A,
+      allItemsSelected: A,
+      selectedItemsOrAllItems: A,
       setItems: y,
       interact: y,
       clear: y.bound,
@@ -1878,7 +1834,7 @@ class si {
     });
   }
   createItem(e) {
-    return it.fromDto(
+    return nt.fromDto(
       this.observableStateProvider,
       this,
       e
@@ -1895,11 +1851,11 @@ class si {
   }
   set localStorageState(e) {
     var n;
-    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;
+    this.repeat = e.repeat ?? w.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 ii(
-      ai,
+    return ni(
+      oi,
       "PlayQueueDto"
     )(e);
   }
@@ -2007,9 +1963,9 @@ class si {
   }
   async removeItems(e) {
     const { currentItem: n } = this;
-    Pt(this.items, ...e.filter((l) => l !== n));
+    St(this.items, ...e.filter((l) => l !== n));
     const { currentIndex: i, isLastItem: a } = this;
-    Pt(
+    St(
       this.items,
       e.find((l) => l === n)
     ), this.currentItem !== n && (this.interact(), a ? await this.goToFirst() : this.currentIndex = i);
@@ -2031,14 +1987,14 @@ class si {
   }
   toggleRepeat() {
     switch (this.repeat) {
-      case P.Off:
-        this.repeat = P.All;
+      case w.Off:
+        this.repeat = w.All;
         break;
-      case P.All:
-        this.repeat = P.One;
+      case w.All:
+        this.repeat = w.One;
         break;
-      case P.One:
-        this.repeat = P.Off;
+      case w.One:
+        this.repeat = w.Off;
         break;
     }
   }
@@ -2055,36 +2011,36 @@ class si {
     this.currentIndex !== void 0 && (this.currentIndex = 0);
   }
 }
-const rr = Lt(void 0), ji = ({
+const tr = zt(void 0), Fi = ({
   children: t
 }) => {
   const [e] = q(
-    () => new si(new Jt())
-  ), n = ie();
-  return kr(() => _r(
+    () => new ai(new Gt())
+  ), n = ne();
+  return Ar(() => Or(
     () => 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(rr.Provider, { value: e, children: t });
-}, li = () => at(rr), ci = {
-  [P.Off]: ln,
-  [P.All]: sn,
-  [P.One]: an
-}, ui = D(
+  ), [e, n]), /* @__PURE__ */ o(tr.Provider, { value: e, children: t });
+}, si = () => ot(tr), li = {
+  [w.Off]: un,
+  [w.All]: cn,
+  [w.One]: ln
+}, ci = N(
   ({
     playerStore: t,
     playQueueStore: e
   }) => {
-    const n = ie(), i = $(async () => {
+    const n = ne(), i = D(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,
+    return /* @__PURE__ */ j(
+      se,
       {
         responsive: !1,
         gutterSize: "s",
@@ -2096,7 +2052,7 @@ const rr = Lt(void 0), ji = ({
             {
               title: `Shuffle: ${e.shuffle ? "On" : "Off"}`,
               "aria-label": `Shuffle: ${e.shuffle ? "On" : "Off"}`,
-              iconType: e.shuffle ? cn : un,
+              iconType: e.shuffle ? dn : fn,
               size: "s",
               iconSize: "l",
               onClick: e.toggleShuffle,
@@ -2108,7 +2064,7 @@ const rr = Lt(void 0), ji = ({
             {
               title: "Previous",
               "aria-label": "Previous",
-              iconType: fn,
+              iconType: mn,
               size: "s",
               iconSize: "l",
               onClick: i,
@@ -2120,22 +2076,22 @@ const rr = Lt(void 0), ji = ({
             {
               title: "Pause",
               "aria-label": "Pause",
-              iconType: dn,
+              iconType: hn,
               size: "s",
               iconSize: "l",
               onClick: () => n.pause(),
-              disabled: !e.canPause
+              disabled: !e.canPause || !t.controller.supports("pause")
             }
           ) : /* @__PURE__ */ o(
             G,
             {
               title: "Play",
               "aria-label": "Play",
-              iconType: mn,
+              iconType: vn,
               size: "s",
               iconSize: "l",
               onClick: () => n.play(),
-              disabled: !e.canPlay
+              disabled: !e.canPlay || !t.controller.supports("play")
             }
           ),
           /* @__PURE__ */ o(
@@ -2143,7 +2099,7 @@ const rr = Lt(void 0), ji = ({
             {
               title: "Next",
               "aria-label": "Next",
-              iconType: hn,
+              iconType: pn,
               size: "s",
               iconSize: "l",
               onClick: e.next,
@@ -2153,9 +2109,9 @@ const rr = Lt(void 0), ji = ({
           /* @__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],
+              title: `Repeat: ${e.repeat === w.All ? "All" : e.repeat === w.One ? "One" : "Off"}`,
+              "aria-label": `Repeat: ${e.repeat === w.All ? "All" : e.repeat === w.One ? "One" : "Off"}`,
+              iconType: li[e.repeat],
               size: "s",
               iconSize: "l",
               onClick: e.toggleRepeat
@@ -2165,22 +2121,22 @@ const rr = Lt(void 0), ji = ({
       }
     );
   }
-), fi = D(
+), ui = N(
   ({ playQueueStore: t }) => {
-    const e = ie();
+    const e = ne();
     return /* @__PURE__ */ o(
-      le,
+      se,
       {
         responsive: !1,
         gutterSize: "s",
         justifyContent: "flexStart",
         alignItems: "center",
         children: t.currentItem && /* @__PURE__ */ o(
-          Vt,
+          Lt,
           {
             href: t.currentItem.url,
             target: "_blank",
-            iconType: tr[t.currentItem.type],
+            iconType: er[t.currentItem.type],
             size: "s",
             onClick: () => e.pause(),
             children: t.currentItem.title
@@ -2189,54 +2145,63 @@ const rr = Lt(void 0), ji = ({
       }
     );
   }
-), di = ne(
-  ({ button: t, isOpen: e, closePopover: n }) => {
-    const [i, a] = q("0"), l = ie();
-    Mr(() => {
-      e && l.getVolume().then((h) => {
-        h !== void 0 && a(Math.floor(h * 100).toString());
+), di = N(
+  ({ playerStore: t }) => /* @__PURE__ */ o(
+    G,
+    {
+      title: "Mute",
+      "aria-label": "Mute",
+      iconType: Ht,
+      size: "s",
+      iconSize: "l",
+      disabled: !t.controller.supports("setMuted")
+    }
+  )
+), fi = N(
+  ({
+    playerStore: t,
+    button: e,
+    isOpen: n,
+    closePopover: i
+  }) => {
+    const [a, l] = q("0"), d = ne();
+    kr(() => {
+      n && d.getVolume().then((m) => {
+        m !== void 0 && l(Math.floor(m * 100).toString());
       });
-    }, [e, l]);
-    const f = $(
-      async (h) => {
-        a(h.currentTarget.value), await l.setVolume(Number(h.currentTarget.value) / 100);
+    }, [n, d]);
+    const h = D(
+      async (m) => {
+        l(m.currentTarget.value), await d.setVolume(Number(m.currentTarget.value) / 100);
       },
-      [l]
+      [d]
     );
     return /* @__PURE__ */ o(
-      ct,
+      st,
       {
-        button: t,
-        isOpen: e,
-        closePopover: n,
+        button: e,
+        isOpen: n,
+        closePopover: i,
         anchorPosition: "upRight",
-        children: /* @__PURE__ */ o(tt, { children: /* @__PURE__ */ F(
-          le,
+        children: /* @__PURE__ */ o(et, { children: /* @__PURE__ */ j(
+          se,
           {
             responsive: !1,
             gutterSize: "s",
             justifyContent: "center",
             alignItems: "center",
             children: [
+              /* @__PURE__ */ o(di, { playerStore: t }),
               /* @__PURE__ */ o(
-                G,
-                {
-                  title: "Mute",
-                  "aria-label": "Mute",
-                  iconType: Gt,
-                  size: "s",
-                  iconSize: "l"
-                }
-              ),
-              /* @__PURE__ */ o(
-                qt,
+                Ut,
                 {
                   min: 0,
                   max: 100,
                   step: 1,
-                  value: i,
-                  onChange: f,
-                  css: { blockSize: 32 }
+                  value: a,
+                  onChange: h,
+                  css: { blockSize: 32 },
+                  disabled: !t.controller.supports("setVolume")
                 }
               )
             ]
@@ -2245,88 +2210,103 @@ const rr = Lt(void 0), ji = ({
       }
     );
   }
-), 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 = ({
+), mi = N(
+  ({ playerStore: t }) => {
+    const [e, n] = q(!1);
+    return /* @__PURE__ */ o(
+      fi,
+      {
+        playerStore: t,
+        button: /* @__PURE__ */ o(
+          G,
+          {
+            title: "Volume",
+            "aria-label": "Volume",
+            iconType: Ht,
+            size: "s",
+            iconSize: "l",
+            onClick: () => n(!e),
+            disabled: !t.controller.supports("getVolume")
+          }
+        ),
+        isOpen: e,
+        closePopover: () => n(!1)
+      }
+    );
+  }
+), hi = ({
   onClickPlayQueueButton: t
 }) => /* @__PURE__ */ o(
   G,
   {
     title: "Play queue",
     "aria-label": "Play queue",
-    iconType: gn,
+    iconType: En,
     size: "s",
     iconSize: "l",
     onClick: t
   }
-), vi = ne(
+), vi = N(
   ({
-    playQueueStore: t,
-    closePopover: e
+    playerStore: t,
+    playQueueStore: e,
+    closePopover: n
   }) => {
-    const n = ie(), i = $(async () => {
-      const m = await n.getCurrentTime();
-      m !== void 0 && await n.setCurrentTime(m - 10), e();
-    }, [n, e]), a = $(async () => {
-      const m = await n.getCurrentTime();
-      m !== void 0 && await n.setCurrentTime(m + 30), e();
-    }, [n, e]), l = $(
-      async (m) => {
-        await n.setPlaybackRate(m), e();
+    const i = ne(), a = D(async () => {
+      const I = await i.getCurrentTime();
+      I !== void 0 && await i.setCurrentTime(I - 10), n();
+    }, [i, n]), l = D(async () => {
+      const I = await i.getCurrentTime();
+      I !== void 0 && await i.setCurrentTime(I + 30), n();
+    }, [i, n]), d = D(
+      async (I) => {
+        await i.setPlaybackRate(I), n();
       },
-      [n, e]
-    ), f = $(async () => {
-      t.currentItem !== void 0 && await t.removeItems([
-        t.currentItem
-      ]), e();
-    }, [t, e]), [h] = q(), v = st(
+      [i, n]
+    ), h = D(async () => {
+      e.currentItem !== void 0 && await e.removeItems([
+        e.currentItem
+      ]), n();
+    }, [e, n]), [m, p] = q(), E = D(async () => {
+      await t.controller.getPlaybackRate().then((I) => p(I));
+    }, [t]), S = at(
       () => [
         {
           id: 0,
           items: [
             {
               name: "Speed",
-              icon: /* @__PURE__ */ o(H, { type: vn }),
-              panel: 1
+              icon: /* @__PURE__ */ o(H, { type: yn }),
+              panel: 1,
+              onClick: E,
+              disabled: !t.controller.supports(
+                "getPlaybackRate"
+              )
             },
             {
               name: "Skip back 10 seconds",
-              icon: /* @__PURE__ */ o(H, { type: pn }),
-              onClick: i,
-              disabled: t.isEmpty
+              icon: /* @__PURE__ */ o(H, { type: gn }),
+              onClick: a,
+              disabled: e.isEmpty || !t.controller.supports(
+                "setCurrentTime"
+              )
             },
             {
               name: "Skip forward 30 seconds",
-              icon: /* @__PURE__ */ o(H, { type: yn }),
-              onClick: a,
-              disabled: t.isEmpty
+              icon: /* @__PURE__ */ o(H, { type: bn }),
+              onClick: l,
+              disabled: e.isEmpty || !t.controller.supports(
+                "setCurrentTime"
+              )
             },
             {
               isSeparator: !0
             },
             {
               name: "Remove from play queue",
-              icon: /* @__PURE__ */ o(H, { type: ft }),
-              onClick: f,
-              disabled: t.isEmpty
+              icon: /* @__PURE__ */ o(H, { type: ct }),
+              onClick: h,
+              disabled: e.isEmpty
             }
           ]
         },
@@ -2334,120 +2314,135 @@ const rr = Lt(void 0), ji = ({
           id: 1,
           title: "Speed",
           items: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2].map(
-            (m) => ({
-              name: m.toString(),
-              onClick: () => l(m),
-              icon: m === h ? "check" : "empty"
+            (I) => ({
+              name: I.toString(),
+              onClick: () => d(I),
+              icon: I === m ? "check" : "empty",
+              disabled: !t.controller.supports(
+                "setPlaybackRate"
+              )
             })
           )
         }
       ],
       [
         t,
-        i,
+        e,
+        E,
         a,
-        f,
         l,
-        h
+        h,
+        d,
+        m
       ]
     );
-    return /* @__PURE__ */ o(Wt, { initialPanelId: 0, panels: v });
+    return /* @__PURE__ */ o(Bt, { initialPanelId: 0, panels: S });
   }
-), pi = ne(
+), pi = me(
   ({
-    playQueueStore: t,
-    button: e,
-    isOpen: n,
-    closePopover: i
+    playerStore: t,
+    playQueueStore: e,
+    button: n,
+    isOpen: i,
+    closePopover: a
   }) => /* @__PURE__ */ o(
-    ct,
+    st,
     {
-      button: e,
-      isOpen: n,
-      closePopover: i,
+      button: n,
+      isOpen: i,
+      closePopover: a,
       panelPaddingSize: "none",
       anchorPosition: "upRight",
       children: /* @__PURE__ */ o(
         vi,
         {
-          playQueueStore: t,
-          closePopover: i
+          playerStore: t,
+          playQueueStore: e,
+          closePopover: a
         }
       )
     }
   )
-), yi = ne(
-  ({ playQueueStore: t }) => {
-    const [e, n] = q(!1);
+), yi = me(
+  ({ playerStore: t, playQueueStore: e }) => {
+    const [n, i] = q(!1);
     return /* @__PURE__ */ o(
       pi,
       {
-        playQueueStore: t,
+        playerStore: t,
+        playQueueStore: e,
         button: /* @__PURE__ */ o(
           G,
           {
             title: "More options",
             "aria-label": "More options",
-            iconType: Ht,
+            iconType: qt,
             size: "s",
             iconSize: "l",
-            onClick: () => n(!e)
+            onClick: () => i(!n)
           }
         ),
-        isOpen: e,
-        closePopover: () => n(!1)
+        isOpen: n,
+        closePopover: () => i(!1)
       }
     );
   }
-), gi = ne(
+), gi = me(
   ({
-    playQueueStore: t,
-    onClickPlayQueueButton: e
-  }) => /* @__PURE__ */ F(
-    le,
+    playerStore: t,
+    playQueueStore: e,
+    onClickPlayQueueButton: n
+  }) => /* @__PURE__ */ j(
+    se,
     {
       responsive: !1,
       gutterSize: "s",
       justifyContent: "flexEnd",
       alignItems: "center",
       children: [
-        /* @__PURE__ */ o(mi, {}),
-        e && /* @__PURE__ */ o(
+        /* @__PURE__ */ o(mi, { playerStore: t }),
+        n && /* @__PURE__ */ o(
           hi,
           {
-            onClickPlayQueueButton: e
+            onClickPlayQueueButton: n
           }
         ),
-        /* @__PURE__ */ o(yi, { playQueueStore: t })
+        /* @__PURE__ */ o(
+          yi,
+          {
+            playerStore: t,
+            playQueueStore: e
+          }
+        )
       ]
     }
   )
-), bi = D(
+), bi = N(
   ({ playerStore: t, playQueueStore: e }) => {
-    const n = ie(), i = $(
-      (f) => {
-        const h = Number(f.currentTarget.value) / 100;
+    const n = ne(), i = D(
+      (d) => {
+        const h = Number(d.currentTarget.value) / 100;
         t.setPercent(h);
       },
       [t]
-    ), a = $(
-      (f) => {
-        f.button === 0 && t.setSeeking(!0);
+    ), a = D(
+      (d) => {
+        d.button === 0 && t.setSeeking(!0);
       },
       [t]
-    ), l = $(
-      async (f) => {
-        if (f.button === 0) {
-          const h = Number(f.currentTarget.value) / 100;
+    ), l = D(
+      async (d) => {
+        if (d.button === 0) {
+          const h = Number(d.currentTarget.value) / 100;
           t.setSeeking(!1);
-          const v = await n.getDuration();
-          v !== void 0 && await n.setCurrentTime(v * h);
+          const m = await n.getDuration();
+          m !== void 0 && await n.setCurrentTime(m * h);
         }
       },
       [t, n]
     );
     return /* @__PURE__ */ o(
-      qt,
+      Ut,
       {
         min: 0,
         max: 100,
@@ -2463,12 +2458,12 @@ const rr = Lt(void 0), ji = ({
       }
     );
   }
-), nr = 81, Ni = D(
+), ji = N(
   ({
     playerStore: t,
     playQueueStore: e,
     onClickPlayQueueButton: n
-  }) => /* @__PURE__ */ o(Qr, { paddingSize: "s", children: /* @__PURE__ */ F(le, { direction: "column", gutterSize: "none", children: [
+  }) => /* @__PURE__ */ o(en, { paddingSize: "s", children: /* @__PURE__ */ j(se, { direction: "column", gutterSize: "none", children: [
     /* @__PURE__ */ o(J, { children: /* @__PURE__ */ o(
       bi,
       {
@@ -2476,15 +2471,15 @@ const rr = Lt(void 0), ji = ({
         playQueueStore: e
       }
     ) }),
-    /* @__PURE__ */ o(J, { children: /* @__PURE__ */ F(le, { responsive: !1, children: [
+    /* @__PURE__ */ o(J, { children: /* @__PURE__ */ j(se, { responsive: !1, children: [
       /* @__PURE__ */ o(J, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
-        fi,
+        ui,
         {
           playQueueStore: e
         }
       ) }),
       /* @__PURE__ */ o(J, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
-        ui,
+        ci,
         {
           playerStore: t,
           playQueueStore: e
@@ -2493,32 +2488,50 @@ const rr = Lt(void 0), ji = ({
       /* @__PURE__ */ o(J, { css: { width: "calc(100% / 3)" }, children: /* @__PURE__ */ o(
         gi,
         {
+          playerStore: t,
           playQueueStore: e,
           onClickPlayQueueButton: n
         }
       ) })
     ] }) })
   ] }) })
-), ot = {
+), Ni = (t) => /* @__PURE__ */ o(jr, { ...t }), rr = 81, it = {
   width: 400,
   height: 225
-}, $i = D(
+}, $i = N(
+  ({ children: t }) => {
+    const e = si();
+    return /* @__PURE__ */ j(
+      tn,
+      {
+        panelled: !0,
+        style: {
+          minBlockSize: `max(460px, 100vh - ${rr}px)`
+        },
+        children: [
+          t,
+          !e.isEmpty && /* @__PURE__ */ o(Wt, { style: { blockSize: it.height } })
+        ]
+      }
+    );
+  }
+), Di = N(
   ({ playerStore: t, playQueueStore: e }) => {
-    const n = ie(), i = $(async () => {
+    const n = ne(), i = D(async () => {
       e.interacted && await n.play();
-    }, [e, n]), a = $(async () => {
+    }, [e, n]), a = D(async () => {
       switch (e.repeat) {
-        case P.One:
+        case w.One:
           await n.setCurrentTime(0);
           break;
-        case P.Off:
-        case P.All:
+        case w.Off:
+        case w.All:
           if (e.isLastItem)
             switch (e.repeat) {
-              case P.Off:
+              case w.Off:
                 t.onEnded();
                 break;
-              case P.All:
+              case w.All:
                 e.hasMultipleItems ? await e.goToFirst() : await n.setCurrentTime(0);
                 break;
             }
@@ -2526,7 +2539,7 @@ const rr = Lt(void 0), ji = ({
             await e.next();
           break;
       }
-    }, [e, t, n]), l = st(
+    }, [e, t, n]), l = at(
       () => ({
         onLoaded: i,
         onPlay: t.onPlay,
@@ -2542,9 +2555,9 @@ const rr = Lt(void 0), ji = ({
         css: {
           position: "fixed",
           right: 0,
-          bottom: nr,
-          width: ot.width,
-          height: ot.height,
+          bottom: rr,
+          width: it.width,
+          height: it.height,
           zIndex: 998,
           backgroundColor: "rgb(39, 39, 39)",
           display: "flex",
@@ -2554,42 +2567,29 @@ const rr = Lt(void 0), ji = ({
           Nr,
           {
             src: e.currentItem.url,
-            options: l
+            options: l,
+            onControllerChange: t.onControllerChange
           }
         ) })
       }
     );
   }
-), Di = D(
-  ({ children: t }) => {
-    const e = li();
-    return /* @__PURE__ */ F(
-      lt,
-      {
-        panelled: !0,
-        style: {
-          minBlockSize: `max(460px, 100vh - ${nr}px)`
-        },
-        children: [
-          t,
-          !e.isEmpty && /* @__PURE__ */ o(Ut, { style: { blockSize: ot.height } })
-        ]
-      }
-    );
-  }
 );
 class Ei {
   constructor(e) {
-    U(this, "playing", !1);
-    U(this, "percent", 0);
-    U(this, "seeking", !1);
+    B(this, "controller", $r);
+    B(this, "playing", !1);
+    B(this, "percent", 0);
+    B(this, "seeking", !1);
     e.makeObservable(this, {
-      playing: ee,
-      percent: ee,
-      seeking: ee,
+      controller: Z,
+      playing: Z,
+      percent: Z,
+      seeking: Z,
       setPlaying: y,
       setPercent: y,
       setSeeking: y,
+      onControllerChange: y.bound,
       onPlay: y.bound,
       onPause: y.bound,
       onEnded: y.bound,
@@ -2605,6 +2605,9 @@ class Ei {
   setSeeking(e) {
     this.seeking = e;
   }
+  onControllerChange(e) {
+    this.controller = e;
+  }
   onPlay() {
     this.playing = !0;
   }
@@ -2618,27 +2621,26 @@ class Ei {
     e !== void 0 && (this.seeking || (this.percent = e));
   }
 }
-const ir = Lt(void 0), zi = ({
+const nr = zt(void 0), zi = ({
   children: t
 }) => {
   const [e] = q(
-    () => new Ei(new Jt())
+    () => new Ei(new Gt())
   );
-  return /* @__PURE__ */ o(ir.Provider, { value: e, children: t });
-}, Li = () => at(ir);
+  return /* @__PURE__ */ o(nr.Provider, { value: e, children: t });
+}, Li = () => ot(nr);
 export {
-  Ni as BottomBar,
-  Fi as HydrangeanDiva,
-  Di as MediaPlayerLayout,
-  $i as MiniPlayer,
-  Jt as MobXObservableStateProvider,
-  Mi as ObservableStateProvider,
-  ji as PlayQueueStoreProvider,
+  ji as BottomBar,
+  Ni as HydrangeanDivaProvider,
+  $i as MediaPlayerLayout,
+  Di as MiniPlayer,
+  Gt as MobXObservableStateProvider,
+  ki as ObservableStateProvider,
+  Mi as PlayQueue,
+  Fi as PlayQueueStoreProvider,
   zi as PlayerStoreProvider,
-  P as RepeatMode,
-  nr as bottomBarHeight,
-  ot as miniPlayerSize,
-  li as usePlayQueueStore,
+  w as RepeatMode,
+  si as usePlayQueueStore,
   Li as usePlayerStore
 };
 //# sourceMappingURL=index.es.js.map