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

package/dist/index.es.js

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