react-modern-audio-player 2.2.0 → 2.3.0

package/dist/index.es.js

@@ -1,16 +1,17 @@
 "use client";
 import './index.css';
-import { jsx as s, Fragment as R, jsxs as w } from "react/jsx-runtime";
-import ee, { createContext as O, useContext as he, useReducer as kt, useMemo as k, forwardRef as Pe, useCallback as g, useRef as A, useEffect as P, memo as G, useState as b, useId as Be, useLayoutEffect as Ct, cloneElement as xt, isValidElement as Mt } from "react";
-import _t, { flushSync as $e } from "react-dom";
-const H = {
+import { jsx as c, Fragment as G, jsxs as w } from "react/jsx-runtime";
+import te, { createContext as K, useContext as he, useReducer as xt, useMemo as x, forwardRef as Pe, useCallback as E, useRef as S, useEffect as P, memo as z, useState as N, useId as $e, useLayoutEffect as Mt, cloneElement as _t, isValidElement as Dt } from "react";
+import Rt, { flushSync as Fe } from "react-dom";
+const O = {
   isPlaying: !1,
   volume: 1,
   muted: !1,
   repeatType: "ALL",
   currentTime: 0,
-  duration: 0
-}, _r = 10, de = {
+  duration: 0,
+  playbackRate: 1
+}, Or = 11, de = {
   templateArea: {
     artwork: "row1-1",
     trackInfo: "row1-2",
@@ -20,17 +21,18 @@ const H = {
     repeatType: "row1-6",
     volume: "row1-7",
     playButton: "row1-8",
-    playList: "row1-9"
+    playList: "row1-9",
+    playbackRate: "row1-10"
   }
-}, L = O(null);
-L.displayName = "AudioPlayerDispatchContext";
-const Fe = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Oe = (e, t) => Math.round(Math.random() * (t - e) + e), Dt = 1, Ve = (e, t, n) => {
+}, b = K(null);
+b.displayName = "AudioPlayerDispatchContext";
+const He = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Ke = (e, t) => Math.round(Math.random() * (t - e) + e), Ut = 1, Ve = (e, t, n) => {
   if (n - t < 1) return e;
-  let a = Oe(t, n);
+  let a = Ke(t, n);
   for (; a === e; )
-    a = Oe(t, n);
+    a = Ke(t, n);
   return a;
-}, Ut = (e, t) => {
+}, Ot = (e, t) => {
   switch (t.type) {
     case "NEXT_AUDIO": {
       if (e.playList.length === 0) return e;
@@ -78,7 +80,7 @@ const Fe = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Oe = (e, t) =>
       };
     }
     case "PREV_AUDIO": {
-      const n = e.playList.length <= 1, a = t.currentTime > Dt, r = e.curAudioState.repeatType === "NONE" && e.curIdx === 0;
+      const n = e.playList.length <= 1, a = t.currentTime > Ut, r = e.curAudioState.repeatType === "NONE" && e.curIdx === 0;
       if (n || a || r)
         return {
           ...e,
@@ -86,21 +88,23 @@ const Fe = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Oe = (e, t) =>
           curAudioState: { ...e.curAudioState, currentTime: 0 }
         };
       if (e.curAudioState.repeatType === "SHUFFLE") {
-        const o = Ve(
+        const s = Ve(
           e.curIdx,
           0,
           e.playList.length - 1
         );
         return {
           ...e,
-          curPlayId: e.playList[o].id,
-          curIdx: o,
+          audioResetKey: e.audioResetKey + 1,
+          curPlayId: e.playList[s].id,
+          curIdx: s,
           curAudioState: { ...e.curAudioState, currentTime: 0 }
         };
       }
       const i = (e.curIdx - 1 + e.playList.length) % e.playList.length;
       return {
         ...e,
+        audioResetKey: e.audioResetKey + 1,
         curPlayId: e.playList[i].id,
         curIdx: i,
         curAudioState: {
@@ -154,7 +158,15 @@ const Fe = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Oe = (e, t) =>
         ...e,
         curAudioState: {
           ...e.curAudioState,
-          volume: Fe(t.volume)
+          volume: He(t.volume)
+        }
+      };
+    case "SET_PLAYBACK_RATE":
+      return {
+        ...e,
+        curAudioState: {
+          ...e.curAudioState,
+          playbackRate: t.playbackRate
         }
       };
     case "SET_AUDIO_STATE":
@@ -247,26 +259,26 @@ const Fe = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Oe = (e, t) =>
     default:
       throw new Error("Unhandled action");
   }
-}, Ae = O(null);
-Ae.displayName = "PlaybackContext";
-const Ie = O(null);
+}, Se = K(null);
+Se.displayName = "PlaybackContext";
+const Ie = K(null);
 Ie.displayName = "AudioAttrsContext";
-const Se = O(null);
-Se.displayName = "TrackContext";
-const we = O(null);
-we.displayName = "UIContext";
-const Le = O(null);
+const we = K(null);
+we.displayName = "TrackContext";
+const be = K(null);
+be.displayName = "UIContext";
+const Le = K(null);
 Le.displayName = "ResourceContext";
-const Ne = O(null);
+const Ne = K(null);
 Ne.displayName = "TimeContext";
-const E = (e) => {
+const A = (e) => {
   const t = he(e);
   if (!t) {
     const n = e.displayName || "Context";
     throw new Error(`${n} is not provided`);
   }
   return t;
-}, C = () => E(Ae), te = () => E(Ne), K = () => E(Se), x = () => E(we), N = () => E(Le), Ot = () => E(Ie);
+}, k = () => A(Se), re = () => A(Ne), $ = () => A(we), M = () => A(be), L = () => A(Le), Kt = () => A(Ie);
 function Vt(e) {
   const {
     playList: t,
@@ -274,12 +286,13 @@ function Vt(e) {
     activeUI: a,
     placement: r,
     customIcons: i,
-    coverImgsCss: o
-  } = e, c = {
-    isPlaying: (n == null ? void 0 : n.isPlaying) ?? H.isPlaying,
-    repeatType: (n == null ? void 0 : n.repeatType) ?? H.repeatType,
-    volume: typeof (n == null ? void 0 : n.volume) == "number" ? Fe(n.volume) : H.volume,
-    muted: (n == null ? void 0 : n.muted) ?? H.muted
+    coverImgsCss: s
+  } = e, o = {
+    isPlaying: (n == null ? void 0 : n.isPlaying) ?? O.isPlaying,
+    repeatType: (n == null ? void 0 : n.repeatType) ?? O.repeatType,
+    volume: typeof (n == null ? void 0 : n.volume) == "number" ? He(n.volume) : O.volume,
+    muted: (n == null ? void 0 : n.muted) ?? O.muted,
+    playbackRate: (n == null ? void 0 : n.playbackRate) ?? O.playbackRate
   }, u = a || { playButton: !0 }, d = {
     playerPlacement: r == null ? void 0 : r.player,
     playListPlacement: (r == null ? void 0 : r.playList) || "bottom",
@@ -288,35 +301,36 @@ function Vt(e) {
         playButton: de.templateArea.playButton
       }
     },
-    volumeSliderPlacement: r == null ? void 0 : r.volumeSlider
-  }, l = t.length === 0, p = n == null ? void 0 : n.curPlayId, m = p == null ? -1 : t.findIndex((y) => y.id === p);
+    volumeSliderPlacement: r == null ? void 0 : r.volumeSlider,
+    speedSelectorPlacement: r == null ? void 0 : r.speedSelector
+  }, l = t.length === 0, m = n == null ? void 0 : n.curPlayId, p = m == null ? -1 : t.findIndex((v) => v.id === m);
   return {
     playList: t,
-    curPlayId: l ? 0 : m >= 0 ? p : t[0].id,
-    curIdx: l ? -1 : m >= 0 ? m : 0,
-    curAudioState: c,
+    curPlayId: l ? 0 : p >= 0 ? m : t[0].id,
+    curIdx: l ? -1 : p >= 0 ? p : 0,
+    curAudioState: o,
     activeUI: u,
     audioResetKey: 0,
     seekRequestKey: 0,
     ...d,
     customIcons: i,
-    coverImgsCss: o
+    coverImgsCss: s
   };
 }
-const Kt = ({
+const Bt = ({
   children: e,
   colorScheme: t,
   ...n
 }) => {
-  var y, f;
-  const [a, r] = kt(
-    Ut,
+  var v, f;
+  const [a, r] = xt(
+    Ot,
     n,
     Vt
-  ), i = k(
+  ), i = x(
     () => ({
-      currentTime: a.curAudioState.currentTime ?? H.currentTime,
-      duration: a.curAudioState.duration ?? H.duration,
+      currentTime: a.curAudioState.currentTime ?? O.currentTime,
+      duration: a.curAudioState.duration ?? O.duration,
       seekRequestKey: a.seekRequestKey
     }),
     [
@@ -324,14 +338,15 @@ const Kt = ({
       a.curAudioState.duration,
       a.seekRequestKey
     ]
-  ), o = k(
+  ), s = x(
     () => ({
-      isPlaying: a.curAudioState.isPlaying ?? H.isPlaying,
-      volume: a.curAudioState.volume ?? H.volume,
-      muted: a.curAudioState.muted ?? H.muted,
+      isPlaying: a.curAudioState.isPlaying ?? O.isPlaying,
+      volume: a.curAudioState.volume ?? O.volume,
+      muted: a.curAudioState.muted ?? O.muted,
       repeatType: a.curAudioState.repeatType,
       isLoadedMetaData: a.curAudioState.isLoadedMetaData,
-      audioResetKey: a.audioResetKey
+      audioResetKey: a.audioResetKey,
+      playbackRate: a.curAudioState.playbackRate ?? O.playbackRate
     }),
     [
       a.curAudioState.isPlaying,
@@ -339,22 +354,24 @@ const Kt = ({
       a.curAudioState.volume,
       a.curAudioState.muted,
       a.curAudioState.repeatType,
+      a.curAudioState.playbackRate,
       a.audioResetKey
     ]
-  ), c = k(
+  ), o = x(
     () => ({
       playList: a.playList,
       curPlayId: a.curPlayId,
       curIdx: a.curIdx
     }),
     [a.playList, a.curPlayId, a.curIdx]
-  ), { audioInitialState: u } = n, d = u == null ? void 0 : u.playListExpanded, l = k(
+  ), { audioInitialState: u } = n, d = u == null ? void 0 : u.playListExpanded, l = x(
     () => ({
       activeUI: a.activeUI,
       playListPlacement: a.playListPlacement,
       playerPlacement: a.playerPlacement,
       interfacePlacement: a.interfacePlacement,
       volumeSliderPlacement: a.volumeSliderPlacement,
+      speedSelectorPlacement: a.speedSelectorPlacement,
       colorScheme: t,
       playListExpanded: d
     }),
@@ -364,82 +381,84 @@ const Kt = ({
       a.playerPlacement,
       a.interfacePlacement,
       a.volumeSliderPlacement,
+      a.speedSelectorPlacement,
       t,
       d
     ]
-  ), p = k(() => {
+  ), m = x(() => {
     if (!u) return {};
     const {
-      isPlaying: v,
+      isPlaying: y,
       repeatType: T,
       isLoadedMetaData: h,
-      currentTime: I,
-      duration: B,
-      volume: re,
+      currentTime: g,
+      duration: C,
+      volume: W,
       muted: se,
-      curPlayId: D,
-      playListExpanded: ce,
-      ...q
+      playbackRate: R,
+      curPlayId: ce,
+      playListExpanded: ae,
+      ...ye
     } = u;
-    return q;
-  }, [u]), m = k(
+    return ye;
+  }, [u]), p = x(
     () => ({
       elementRefs: a.elementRefs,
       customIcons: a.customIcons,
       coverImgsCss: a.coverImgsCss
     }),
     [
-      (y = a.elementRefs) == null ? void 0 : y.audioEl,
+      (v = a.elementRefs) == null ? void 0 : v.audioEl,
       (f = a.elementRefs) == null ? void 0 : f.waveformInst,
       a.customIcons,
       a.coverImgsCss
     ]
   );
-  return /* @__PURE__ */ s(Ne.Provider, { value: i, children: /* @__PURE__ */ s(Ae.Provider, { value: o, children: /* @__PURE__ */ s(Se.Provider, { value: c, children: /* @__PURE__ */ s(we.Provider, { value: l, children: /* @__PURE__ */ s(Le.Provider, { value: m, children: /* @__PURE__ */ s(Ie.Provider, { value: p, children: /* @__PURE__ */ s(L.Provider, { value: r, children: e }) }) }) }) }) }) });
-}, Q = {
+  return /* @__PURE__ */ c(Ne.Provider, { value: i, children: /* @__PURE__ */ c(Se.Provider, { value: s, children: /* @__PURE__ */ c(we.Provider, { value: o, children: /* @__PURE__ */ c(be.Provider, { value: l, children: /* @__PURE__ */ c(Le.Provider, { value: p, children: /* @__PURE__ */ c(Ie.Provider, { value: m, children: /* @__PURE__ */ c(b.Provider, { value: r, children: e }) }) }) }) }) }) });
+}, J = {
   top: "auto",
   right: "auto",
   bottom: "auto",
   left: "auto"
-}, Bt = {
-  bottom: { ...Q, bottom: 0 },
-  top: { ...Q, top: 0 },
-  "bottom-left": { ...Q, bottom: 0, left: 0 },
-  "bottom-right": { ...Q, bottom: 0, right: 0 },
-  "top-left": { ...Q, top: 0, left: 0 },
-  "top-right": { ...Q, top: 0, right: 0 }
-}, He = ee.memo(({ children: e, rootContainerProps: t }) => {
-  const { playerPlacement: n, colorScheme: a } = x(), r = k(
-    () => n ? Bt[n] : void 0,
+}, $t = {
+  bottom: { ...J, bottom: 0 },
+  top: { ...J, top: 0 },
+  "bottom-left": { ...J, bottom: 0, left: 0 },
+  "bottom-right": { ...J, bottom: 0, right: 0 },
+  "top-left": { ...J, top: 0, left: 0 },
+  "top-right": { ...J, top: 0, right: 0 }
+}, Ge = te.memo(({ children: e, rootContainerProps: t }) => {
+  const { playerPlacement: n, colorScheme: a } = M(), r = x(
+    () => n ? $t[n] : void 0,
     [n]
-  ), o = {
+  ), s = {
     width: "100%",
     position: n !== "static" && !!n ? "fixed" : "static",
     ...r,
     ...(t == null ? void 0 : t.style) ?? {}
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ c(
     "div",
     {
       ...t,
       className: `rmap-player-provider${t != null && t.className ? ` ${t.className}` : ""}`,
       "data-theme": a ?? void 0,
-      style: o,
+      style: s,
       children: e
     }
   );
 });
-He.displayName = "AudioPlayerContainer";
-const $t = ({
+Ge.displayName = "AudioPlayerContainer";
+const Ft = ({
   areas: e,
   columns: t,
   alignItems: n,
   justifyContent: a,
   minHeight: r,
   UNSAFE_className: i,
-  children: o
+  children: s
 }) => {
-  const c = {
+  const o = {
     display: "grid",
     gridTemplateAreas: e == null ? void 0 : e.map((u) => `"${u}"`).join(" "),
     gridTemplateColumns: t == null ? void 0 : t.join(" "),
@@ -447,8 +466,8 @@ const $t = ({
     justifyContent: a,
     minHeight: r
   };
-  return /* @__PURE__ */ s("div", { className: i, style: c, children: o });
-}, Ft = $t, Re = Pe(
+  return /* @__PURE__ */ c("div", { className: i, style: o, children: s });
+}, Ht = Ft, ze = Pe(
   ({
     children: e,
     visible: t = !0,
@@ -456,8 +475,8 @@ const $t = ({
     width: a,
     justifySelf: r = "center",
     padding: i,
-    UNSAFE_className: o,
-    style: c,
+    UNSAFE_className: s,
+    style: o,
     ...u
   }, d) => {
     if (!t) return null;
@@ -466,21 +485,21 @@ const $t = ({
       width: a,
       justifySelf: r,
       padding: i ?? "0 5px",
-      ...c
+      ...o
     };
-    return /* @__PURE__ */ s("div", { ref: d, className: o, style: l, ...u, children: e });
+    return /* @__PURE__ */ c("div", { ref: d, className: s, style: l, ...u, children: e });
   }
 );
-Re.displayName = "GridItem";
-const _ = Ft;
-_.Item = Re;
-const Ht = ({
+ze.displayName = "GridItem";
+const _ = Ht;
+_.Item = ze;
+const Gt = ({
   children: e,
   id: t,
   ...n
 }) => {
-  var l, p;
-  const a = C(), r = te(), i = K(), o = x(), c = N(), u = {
+  var l, m;
+  const a = k(), r = re(), i = $(), s = M(), o = L(), u = {
     curAudioState: {
       isPlaying: a.isPlaying,
       volume: a.volume,
@@ -493,123 +512,131 @@ const Ht = ({
     audioResetKey: a.audioResetKey,
     ...r,
     ...i,
-    ...o,
-    ...c
-  }, d = (p = (l = o.interfacePlacement) == null ? void 0 : l.customComponentsArea) == null ? void 0 : p[t];
-  return /* @__PURE__ */ s(
+    ...s,
+    ...o
+  }, d = (m = (l = s.interfacePlacement) == null ? void 0 : l.customComponentsArea) == null ? void 0 : m[t];
+  return /* @__PURE__ */ c(
     _.Item,
     {
       UNSAFE_className: "rmap-custom-component",
       gridArea: d,
       ...n,
-      children: ee.cloneElement(e, { audioPlayerState: u })
+      children: te.cloneElement(e, { audioPlayerState: u })
     }
   );
-}, ze = "PlayListEmpty", Ge = () => null;
-Ge.displayName = ze;
-const Rt = () => {
+}, We = "PlayListEmpty", je = () => null;
+je.displayName = We;
+const zt = () => {
   const {
     isPlaying: e,
     volume: t,
     repeatType: n,
-    audioResetKey: a
-  } = C(), { currentTime: r, seekRequestKey: i } = te(), { elementRefs: o } = N(), c = E(L), u = g(
+    audioResetKey: a,
+    playbackRate: r
+  } = k(), { currentTime: i, seekRequestKey: s } = re(), { elementRefs: o } = L(), u = A(b), d = E(
     (y) => {
       if (y.currentTarget.readyState === 0) return;
-      const f = y.currentTarget.currentTime;
-      c({
+      const T = y.currentTarget.currentTime;
+      u({
         type: "SET_AUDIO_STATE",
-        audioState: { currentTime: f }
+        audioState: { currentTime: T }
       });
     },
-    [c]
-  ), d = g(() => {
+    [u]
+  ), l = E(() => {
     if (o != null && o.audioEl) {
       if (n === "ONE") {
-        $e(() => {
-          c({ type: "SEEK", time: 0 });
+        Fe(() => {
+          u({ type: "SEEK", time: 0 });
         }), o.audioEl.play();
         return;
       }
-      c({ type: "NEXT_AUDIO" });
+      u({ type: "NEXT_AUDIO" });
     }
-  }, [c, n, o == null ? void 0 : o.audioEl]), l = g(
+  }, [u, n, o == null ? void 0 : o.audioEl]), m = E(
+    (y) => {
+      t != null && (y.volume = t), r != null && (y.playbackRate = r);
+    },
+    [t, r]
+  ), p = E(
     (y) => {
-      const { duration: f } = y.currentTarget;
-      t != null && (y.currentTarget.volume = t), c({
+      const { duration: T } = y.currentTarget;
+      m(y.currentTarget), u({
         type: "SET_AUDIO_STATE",
-        audioState: { isLoadedMetaData: !0, duration: f }
+        audioState: { isLoadedMetaData: !0, duration: T }
       });
     },
-    [c, t]
-  ), p = A(!1);
+    [u, m]
+  ), v = S(!1);
   P(() => {
     if (o != null && o.audioEl) {
-      if (!p.current) {
-        p.current = !0;
+      if (!v.current) {
+        v.current = !0;
         return;
       }
       o.audioEl.currentTime = 0;
     }
   }, [a, o == null ? void 0 : o.audioEl]), P(() => {
-    o != null && o.audioEl && (e ? o.audioEl.play().catch(() => {
-      c({
+    o != null && o.audioEl && (e ? o.audioEl.play().catch((y) => {
+      (y == null ? void 0 : y.name) !== "AbortError" && u({
         type: "SET_AUDIO_STATE",
         audioState: { isPlaying: !1 }
       });
     }) : o.audioEl.pause());
-  }, [o == null ? void 0 : o.audioEl, e, c]), P(() => {
+  }, [o == null ? void 0 : o.audioEl, e, u, a]), P(() => {
     !(o != null && o.audioEl) || t == null || (o.audioEl.volume = t);
-  }, [o == null ? void 0 : o.audioEl, t]);
-  const m = A(0);
+  }, [o == null ? void 0 : o.audioEl, t]), P(() => {
+    !(o != null && o.audioEl) || r == null || (o.audioEl.playbackRate = r);
+  }, [o == null ? void 0 : o.audioEl, r]);
+  const f = S(0);
   return P(() => {
-    if (i === m.current) return;
-    m.current = i;
+    if (s === f.current) return;
+    f.current = s;
     const y = o == null ? void 0 : o.audioEl;
-    if (!y || r == null) return;
-    y.currentTime = r;
-    const f = o == null ? void 0 : o.waveformInst, v = y.duration, T = Number.isFinite(v) && v > 0;
-    if (!f || !T) return;
-    const h = r / v, I = Math.min(1, Math.max(0, h));
-    f.seekTo(I);
+    if (!y || i == null) return;
+    y.currentTime = i;
+    const T = o == null ? void 0 : o.waveformInst, h = y.duration, g = Number.isFinite(h) && h > 0;
+    if (!T || !g) return;
+    const C = i / h, W = Math.min(1, Math.max(0, C));
+    T.seekTo(W);
   }, [
+    s,
     i,
-    r,
     o == null ? void 0 : o.audioEl,
     o == null ? void 0 : o.waveformInst
   ]), {
-    onTimeUpdate: u,
-    onEnded: d,
-    onLoadedMetadata: l
+    onTimeUpdate: d,
+    onEnded: l,
+    onLoadedMetadata: p
   };
-}, We = ee.memo(({ audioRef: e }) => {
-  const t = A(null), { muted: n } = C(), { curPlayId: a, playList: r } = K(), i = Ot(), o = E(L), c = r.find(
+}, Ye = te.memo(({ audioRef: e }) => {
+  const t = S(null), { muted: n } = k(), { curPlayId: a, playList: r } = $(), i = Kt(), s = A(b), o = r.find(
     (d) => d.id === a
-  ), u = Rt();
+  ), u = zt();
   return P(() => {
-    t.current && (o({
+    t.current && (s({
       type: "SET_ELEMENT_REFS",
       elementRefs: { audioEl: t.current }
     }), e && (e.current = t.current));
-  }, [o, e]), /* @__PURE__ */ s(
+  }, [s, e]), /* @__PURE__ */ c(
     "audio",
     {
       id: "rm-audio-player-audio",
       ...i,
       muted: n,
       ref: t,
-      src: c == null ? void 0 : c.src,
+      src: o == null ? void 0 : o.src,
       ...u
     }
   );
 });
-We.displayName = "Audio";
-function z(e, t) {
+Ye.displayName = "Audio";
+function B(e, t) {
   var a, r;
-  const { interfacePlacement: n } = x();
+  const { interfacePlacement: n } = M();
   return t ?? ((a = n == null ? void 0 : n.itemCustomArea) == null ? void 0 : a[e]) ?? ((r = n == null ? void 0 : n.templateArea) == null ? void 0 : r[e]) ?? de.templateArea[e];
 }
-const j = Pe(({ className: e, type: t = "button", ...n }, a) => /* @__PURE__ */ s(
+const q = Pe(({ className: e, type: t = "button", ...n }, a) => /* @__PURE__ */ c(
   "button",
   {
     ref: a,
@@ -618,10 +645,10 @@ const j = Pe(({ className: e, type: t = "button", ...n }, a) => /* @__PURE__ */
     ...n
   }
 ));
-j.displayName = "StyledBtn";
-const be = (e) => (
+q.displayName = "StyledBtn";
+const ke = (e) => (
   // eslint-disable-next-line react/display-name
-  ({ size: t = "1em", color: n, style: a, ...r }) => /* @__PURE__ */ s(
+  ({ size: t = "1em", color: n, style: a, ...r }) => /* @__PURE__ */ c(
     "svg",
     {
       "aria-hidden": "true",
@@ -639,9 +666,9 @@ const be = (e) => (
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), Y = (e) => (
+), X = (e) => (
   // eslint-disable-next-line react/display-name
-  ({ size: t = "1em", color: n, style: a, ...r }) => /* @__PURE__ */ s(
+  ({ size: t = "1em", color: n, style: a, ...r }) => /* @__PURE__ */ c(
     "svg",
     {
       "aria-hidden": "true",
@@ -661,9 +688,9 @@ const be = (e) => (
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), je = (e, t = "0 0 16 16") => (
+), qe = (e, t = "0 0 16 16") => (
   // eslint-disable-next-line react/display-name
-  ({ size: n = "1em", color: a, style: r, ...i }) => /* @__PURE__ */ s(
+  ({ size: n = "1em", color: a, style: r, ...i }) => /* @__PURE__ */ c(
     "svg",
     {
       "aria-hidden": "true",
@@ -681,94 +708,94 @@ const be = (e) => (
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), Ye = be(
+), Xe = ke(
   '<path fill="none" d="M0 0h24v24H0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>'
 );
-Ye.displayName = "MdPlayCircleFilled";
-const qe = be(
+Xe.displayName = "MdPlayCircleFilled";
+const Qe = ke(
   '<path fill="none" d="M0 0h24v24H0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"/>'
 );
-qe.displayName = "MdPauseCircleFilled";
-const Xe = be(
+Qe.displayName = "MdPauseCircleFilled";
+const Je = ke(
   '<path fill="none" d="M0 0h24v24H0z"/><path d="M3 10h11v2H3zM3 6h11v2H3zM3 14h7v2H3zM16 13v8l6-4z"/>'
 );
-Xe.displayName = "MdPlaylistPlay";
-const Qe = Y(
+Je.displayName = "MdPlaylistPlay";
+const Ze = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"/><path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"/>'
 );
-Qe.displayName = "TbRepeat";
-const Je = Y(
+Ze.displayName = "TbRepeat";
+const et = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"/><path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"/><path d="M11 11l1 -1v4"/>'
 );
-Je.displayName = "TbRepeatOnce";
-const Ze = Y(
+et.displayName = "TbRepeatOnce";
+const tt = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 12v-3c0 -1.336 .873 -2.468 2.08 -2.856m3.92 -.144h10m-3 -3l3 3l-3 3"/><path d="M20 12v3a3 3 0 0 1 -.133 .886m-1.99 1.984a3 3 0 0 1 -.877 .13h-13m3 3l-3 -3l3 -3"/><path d="M3 3l18 18"/>'
 );
-Ze.displayName = "TbRepeatOff";
-const et = Y(
+tt.displayName = "TbRepeatOff";
+const rt = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 4l3 3l-3 3"/><path d="M18 20l3 -3l-3 -3"/><path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5"/><path d="M21 7h-5a4.978 4.978 0 0 0 -2.998 .998m-4.002 8.003a4.984 4.984 0 0 1 -3 .999h-3"/>'
 );
-et.displayName = "TbArrowsShuffle";
-const tt = Y(
+rt.displayName = "TbArrowsShuffle";
+const at = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8a5 5 0 0 1 0 8"/><path d="M17.7 5a9 9 0 0 1 0 14"/><path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5"/>'
 );
-tt.displayName = "TbVolume";
-const rt = Y(
+at.displayName = "TbVolume";
+const nt = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8a5 5 0 0 1 0 8"/><path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5"/>'
 );
-rt.displayName = "TbVolume2";
-const at = Y(
+nt.displayName = "TbVolume2";
+const ot = X(
   '<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 15h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a0.8 .8 0 0 1 1.5 .5v14a0.8 .8 0 0 1 -1.5 .5l-3.5 -4.5"/><path d="M16 10l4 4m0 -4l-4 4"/>'
 );
-at.displayName = "TbVolume3";
-const nt = je(
+ot.displayName = "TbVolume3";
+const it = qe(
   '<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM8 14.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5 6.5 2.91 6.5 6.5-2.91 6.5-6.5 6.5z"/><path d="M7 8l4-3v6z"/><path d="M5 5h2v6h-2v-6z"/>'
 );
-nt.displayName = "ImPrevious";
-const ot = je(
+it.displayName = "ImPrevious";
+const st = qe(
   '<path d="M8 0c4.418 0 8 3.582 8 8s-3.582 8-8 8-8-3.582-8-8 3.582-8 8-8zM8 14.5c3.59 0 6.5-2.91 6.5-6.5s-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5 2.91 6.5 6.5 6.5z"/><path d="M9 8l-4-3v6z"/><path d="M11 5h-2v6h2v-6z"/>'
 );
-ot.displayName = "ImNext";
-const M = ({ render: e, customIcon: t }) => /* @__PURE__ */ s(R, { children: t ?? e }), zt = G(function() {
-  const { isPlaying: t } = C(), { customIcons: n } = N(), a = E(L);
-  return /* @__PURE__ */ s(
-    j,
+st.displayName = "ImNext";
+const D = ({ render: e, customIcon: t }) => /* @__PURE__ */ c(G, { children: t ?? e }), Wt = z(function() {
+  const { isPlaying: t } = k(), { customIcons: n } = L(), a = A(b);
+  return /* @__PURE__ */ c(
+    q,
     {
       type: "button",
       "aria-label": t ? "Pause" : "Play",
       onClick: () => a({ type: "CHANGE_PLAYING_STATE" }),
       className: "rmap-play-btn",
       "data-testid": "play-btn",
-      children: t ? /* @__PURE__ */ s(
-        M,
+      children: t ? /* @__PURE__ */ c(
+        D,
         {
-          render: /* @__PURE__ */ s(qe, {}),
+          render: /* @__PURE__ */ c(Qe, {}),
           customIcon: n == null ? void 0 : n.pause
         }
-      ) : /* @__PURE__ */ s(M, { render: /* @__PURE__ */ s(Ye, {}), customIcon: n == null ? void 0 : n.play })
+      ) : /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(Xe, {}), customIcon: n == null ? void 0 : n.play })
     }
   );
-}), Gt = G(function({ isVisible: t }) {
-  const { customIcons: n, elementRefs: a } = N(), r = E(L);
-  return t ? /* @__PURE__ */ s(
-    j,
+}), jt = z(function({ isVisible: t }) {
+  const { customIcons: n, elementRefs: a } = L(), r = A(b);
+  return t ? /* @__PURE__ */ c(
+    q,
     {
       type: "button",
       "aria-label": "Previous track",
       onClick: () => {
-        var c;
-        const o = ((c = a == null ? void 0 : a.audioEl) == null ? void 0 : c.currentTime) ?? 0;
-        r({ type: "PREV_AUDIO", currentTime: o });
+        var o;
+        const s = ((o = a == null ? void 0 : a.audioEl) == null ? void 0 : o.currentTime) ?? 0;
+        r({ type: "PREV_AUDIO", currentTime: s });
       },
       className: "rmap-prev-btn",
       "data-testid": "prev-btn",
-      children: /* @__PURE__ */ s(M, { render: /* @__PURE__ */ s(nt, {}), customIcon: n == null ? void 0 : n.prev })
+      children: /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(it, {}), customIcon: n == null ? void 0 : n.prev })
     }
   ) : null;
-}), Wt = G(function({ isVisible: t }) {
-  const { customIcons: n } = N(), a = E(L);
-  return t ? /* @__PURE__ */ s(
-    j,
+}), Yt = z(function({ isVisible: t }) {
+  const { customIcons: n } = L(), a = A(b);
+  return t ? /* @__PURE__ */ c(
+    q,
     {
       type: "button",
       "aria-label": "Next track",
@@ -777,83 +804,83 @@ const M = ({ render: e, customIcon: t }) => /* @__PURE__ */ s(R, { children: t ?
       },
       className: "rmap-next-btn",
       "data-testid": "next-btn",
-      children: /* @__PURE__ */ s(M, { render: /* @__PURE__ */ s(ot, {}), customIcon: n == null ? void 0 : n.next })
+      children: /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(st, {}), customIcon: n == null ? void 0 : n.next })
     }
   ) : null;
-}), it = ({
+}), ct = ({
   gridArea: e,
   visible: t,
   ...n
 }) => {
-  const { activeUI: a } = x(), r = !!(a.prevNnext ?? a.all), i = z("playButton", e);
-  return /* @__PURE__ */ s(_.Item, { gridArea: i, visible: t ?? !0, ...n, children: /* @__PURE__ */ w(
+  const { activeUI: a } = M(), r = !!(a.prevNnext ?? a.all), i = B("playButton", e);
+  return /* @__PURE__ */ c(_.Item, { gridArea: i, visible: t ?? !0, ...n, children: /* @__PURE__ */ w(
     "div",
     {
       className: "rmap-ctrl-btn-wrapper",
       role: "group",
       "aria-label": "Playback controls",
       children: [
-        /* @__PURE__ */ s(Gt, { isVisible: r }),
-        /* @__PURE__ */ s(zt, {}),
-        /* @__PURE__ */ s(Wt, { isVisible: r })
+        /* @__PURE__ */ c(jt, { isVisible: r }),
+        /* @__PURE__ */ c(Wt, {}),
+        /* @__PURE__ */ c(Yt, { isVisible: r })
       ]
     }
   ) });
-}, jt = {
+}, qt = {
   ALL: "Repeat: All tracks",
   ONE: "Repeat: One track",
   NONE: "Repeat: Off",
   SHUFFLE: "Shuffle"
-}, Yt = {
+}, Xt = {
   ALL: "ONE",
   ONE: "NONE",
   NONE: "SHUFFLE",
   SHUFFLE: "ALL"
-}, st = G(
+}, lt = z(
   function({ gridArea: t, visible: n, ...a }) {
-    const { repeatType: r } = C(), { customIcons: i } = N(), o = E(
-      L
-    ), c = () => {
-      o({
+    const { repeatType: r } = k(), { customIcons: i } = L(), s = A(
+      b
+    ), o = () => {
+      s({
         type: "SET_REPEAT_TYPE",
-        repeatType: Yt[r]
+        repeatType: Xt[r]
       });
-    }, u = z("repeatType", t);
-    return /* @__PURE__ */ s(
+    }, u = B("repeatType", t);
+    return /* @__PURE__ */ c(
       _.Item,
       {
         gridArea: u,
         visible: n ?? !0,
         ...a,
         children: /* @__PURE__ */ w(
-          j,
+          q,
           {
             type: "button",
-            "aria-label": jt[r],
-            onClick: c,
+            "aria-label": qt[r],
+            onClick: o,
             className: "rmap-repeat-btn",
             "data-testid": "repeat-btn",
             "data-repeattype": r,
             children: [
-              r === "ALL" && /* @__PURE__ */ s(M, { render: /* @__PURE__ */ s(Qe, {}), customIcon: i == null ? void 0 : i.repeatAll }),
-              r === "ONE" && /* @__PURE__ */ s(
-                M,
+              r === "ALL" && /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(Ze, {}), customIcon: i == null ? void 0 : i.repeatAll }),
+              r === "ONE" && /* @__PURE__ */ c(
+                D,
                 {
-                  render: /* @__PURE__ */ s(Je, {}),
+                  render: /* @__PURE__ */ c(et, {}),
                   customIcon: i == null ? void 0 : i.repeatOne
                 }
               ),
-              r === "NONE" && /* @__PURE__ */ s(
-                M,
+              r === "NONE" && /* @__PURE__ */ c(
+                D,
                 {
-                  render: /* @__PURE__ */ s(Ze, {}),
+                  render: /* @__PURE__ */ c(tt, {}),
                   customIcon: i == null ? void 0 : i.repeatNone
                 }
               ),
-              r === "SHUFFLE" && /* @__PURE__ */ s(
-                M,
+              r === "SHUFFLE" && /* @__PURE__ */ c(
+                D,
                 {
-                  render: /* @__PURE__ */ s(et, {}),
+                  render: /* @__PURE__ */ c(rt, {}),
                   customIcon: i == null ? void 0 : i.repeatShuffle
                 }
               )
@@ -863,33 +890,33 @@ const M = ({ render: e, customIcon: t }) => /* @__PURE__ */ s(R, { children: t ?
       }
     );
   }
-), fe = { size: "100%" }, ct = G(() => {
-  var o;
-  const { volume: e, muted: t } = C(), { customIcons: n, elementRefs: a } = N(), r = e ?? ((o = a == null ? void 0 : a.audioEl) == null ? void 0 : o.volume) ?? 0, i = r > 0 && r <= 0.5;
-  return t || r === 0 ? /* @__PURE__ */ s(
-    M,
+), Te = { size: "100%" }, ut = z(() => {
+  var s;
+  const { volume: e, muted: t } = k(), { customIcons: n, elementRefs: a } = L(), r = e ?? ((s = a == null ? void 0 : a.audioEl) == null ? void 0 : s.volume) ?? 0, i = r > 0 && r <= 0.5;
+  return t || r === 0 ? /* @__PURE__ */ c(
+    D,
     {
-      render: /* @__PURE__ */ s(at, { ...fe }),
+      render: /* @__PURE__ */ c(ot, { ...Te }),
       customIcon: n == null ? void 0 : n.volumeMuted
     }
-  ) : i ? /* @__PURE__ */ s(
-    M,
+  ) : i ? /* @__PURE__ */ c(
+    D,
     {
-      render: /* @__PURE__ */ s(rt, { ...fe }),
+      render: /* @__PURE__ */ c(nt, { ...Te }),
       customIcon: n == null ? void 0 : n.volumeHalf
     }
-  ) : /* @__PURE__ */ s(
-    M,
+  ) : /* @__PURE__ */ c(
+    D,
     {
-      render: /* @__PURE__ */ s(tt, { ...fe }),
+      render: /* @__PURE__ */ c(at, { ...Te }),
       customIcon: n == null ? void 0 : n.volumeFull
     }
   );
 });
-ct.displayName = "VolumeIcon";
-const ie = O(null);
+ut.displayName = "VolumeIcon";
+const ie = K(null);
 ie.displayName = "DrawerContext";
-const lt = (e, t) => {
+const dt = (e, t) => {
   P(() => {
     const n = (a) => {
       const r = e.current, { target: i } = a;
@@ -897,7 +924,7 @@ const lt = (e, t) => {
     };
     return document.addEventListener("click", n), () => document.removeEventListener("click", n);
   }, [e, t]);
-}, ne = ({
+}, oe = ({
   outboundClickActive: e = !1,
   placement: t = "bottom",
   children: n,
@@ -905,165 +932,165 @@ const lt = (e, t) => {
   onOpenChange: r,
   initialOpen: i
 }) => {
-  const o = A(null), [c, u] = ee.Children.toArray(n), [d, l] = b(
+  const s = S(null), [o, u] = te.Children.toArray(n), [d, l] = N(
     a !== void 0 ? a : i ?? !1
-  ), p = Be();
-  lt(o, () => {
+  ), m = $e();
+  dt(s, () => {
     e && (l(!1), r && r(!1));
   }), P(() => {
     a !== void 0 && l(a);
   }, [a]);
-  const m = k(
-    () => ({ isOpen: d, setIsOpen: l, onOpenChange: r, drawerId: p }),
-    [d, l, r, p]
+  const p = x(
+    () => ({ isOpen: d, setIsOpen: l, onOpenChange: r, drawerId: m }),
+    [d, l, r, m]
   );
-  return /* @__PURE__ */ s("div", { className: "rmap-drawer-container", ref: o, children: /* @__PURE__ */ s(ie.Provider, { value: m, children: /* @__PURE__ */ w(R, { children: [
+  return /* @__PURE__ */ c("div", { className: "rmap-drawer-container", ref: s, children: /* @__PURE__ */ c(ie.Provider, { value: p, children: /* @__PURE__ */ w(G, { children: [
     t === "top" && u,
-    c,
+    o,
     t === "bottom" && u
   ] }) }) });
-}, ut = typeof window < "u", Te = ut ? Ct : P, ke = ({
+}, pt = typeof window < "u", ge = pt ? Mt : P, Ce = ({
   visible: e,
   name: t,
   leaveTime: n,
   enterTime: a,
   clearTime: r,
   onExited: i,
-  onEntered: o,
-  children: c
+  onEntered: s,
+  children: o
 }) => {
-  const [u, d] = b(""), [l, p] = b(!1), m = A(o), y = A(i), f = A(t), v = A(a), T = A(n), h = A(r);
-  return Te(() => {
-    m.current = o, y.current = i, f.current = t, v.current = a, T.current = n, h.current = r;
-  }), Te(() => {
-    const I = e ? "enter" : "leave", B = f.current, re = e ? v.current : T.current;
-    e && !l && p(!0), d(`${B}-${I}`);
+  const [u, d] = N(""), [l, m] = N(!1), p = S(s), v = S(i), f = S(t), y = S(a), T = S(n), h = S(r);
+  return ge(() => {
+    p.current = s, v.current = i, f.current = t, y.current = a, T.current = n, h.current = r;
+  }), ge(() => {
+    const g = e ? "enter" : "leave", C = f.current, W = e ? y.current : T.current;
+    e && !l && m(!0), d(`${C}-${g}`);
     const se = setTimeout(() => {
-      var ce, q;
+      var ce, ae;
       d(
-        `${B}-${I} ${B}-${I}-active`
-      ), I === "leave" ? (ce = y.current) == null || ce.call(y) : (q = m.current) == null || q.call(m);
-    }, re), D = setTimeout(() => {
-      e || (d(B), p(!1));
-    }, re + h.current);
+        `${C}-${g} ${C}-${g}-active`
+      ), g === "leave" ? (ce = v.current) == null || ce.call(v) : (ae = p.current) == null || ae.call(p);
+    }, W), R = setTimeout(() => {
+      e || (d(C), m(!1));
+    }, W + h.current);
     return () => {
-      clearTimeout(se), clearTimeout(D);
+      clearTimeout(se), clearTimeout(R);
     };
-  }, [e, l]), l ? xt(c, {
-    className: `${c.props.className} ${u}`
+  }, [e, l]), l ? _t(o, {
+    className: `${o.props.className} ${u}`
   }) : null;
-}, qt = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [role="button"]:not([aria-disabled="true"])', Xt = ({
+}, Qt = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [role="button"]:not([aria-disabled="true"])', Jt = ({
   children: e,
   isWithAnimation: t = !0,
   "aria-label": n = "Dialog"
 }) => {
-  const { isOpen: a, setIsOpen: r, onOpenChange: i, drawerId: o } = E(ie), c = A(null), u = A(null), d = g(
+  const { isOpen: a, setIsOpen: r, onOpenChange: i, drawerId: s } = A(ie), o = S(null), u = S(null), d = E(
     () => {
-      var v;
-      return (v = c.current) == null ? void 0 : v.querySelectorAll(qt);
+      var y;
+      return (y = o.current) == null ? void 0 : y.querySelectorAll(Qt);
     },
     []
-  ), l = g(() => {
-    var v, T;
-    (T = (v = d()) == null ? void 0 : v[0]) == null || T.focus();
-  }, [d]), p = g(() => {
+  ), l = E(() => {
+    var y, T;
+    (T = (y = d()) == null ? void 0 : y[0]) == null || T.focus();
+  }, [d]), m = E(() => {
     u.current = document.activeElement, l();
-  }, [l]), m = g(() => {
-    var v;
-    (v = u.current) == null || v.focus();
+  }, [l]), p = E(() => {
+    var y;
+    (y = u.current) == null || y.focus();
   }, []);
   P(() => {
-    var v;
-    a && !t ? (u.current = document.activeElement, l()) : !a && !t && ((v = u.current) == null || v.focus());
+    var y;
+    a && !t ? (u.current = document.activeElement, l()) : !a && !t && ((y = u.current) == null || y.focus());
   }, [a, t, l]);
-  const y = g(
-    (v) => {
-      if (v.key === "Escape") {
+  const v = E(
+    (y) => {
+      if (y.key === "Escape") {
         r(!1), i && i(!1);
         return;
       }
-      if (v.key === "Tab") {
+      if (y.key === "Tab") {
         const T = d();
         if (!T || T.length === 0) return;
-        const h = T[0], I = T[T.length - 1];
-        v.shiftKey ? document.activeElement === h && (v.preventDefault(), I.focus()) : document.activeElement === I && (v.preventDefault(), h.focus());
+        const h = T[0], g = T[T.length - 1];
+        y.shiftKey ? document.activeElement === h && (y.preventDefault(), g.focus()) : document.activeElement === g && (y.preventDefault(), h.focus());
       }
     },
     [r, i, d]
-  ), f = /* @__PURE__ */ s(
+  ), f = /* @__PURE__ */ c(
     "div",
     {
-      ref: c,
+      ref: o,
       className: "rmap-drawer-content-container",
       role: "dialog",
       "aria-modal": "true",
       "aria-label": n,
-      id: o,
-      onKeyDown: y,
+      id: s,
+      onKeyDown: v,
       children: e
     }
   );
-  return t ? /* @__PURE__ */ s(
-    ke,
+  return t ? /* @__PURE__ */ c(
+    Ce,
     {
       visible: a,
       name: "rmap-drawer-content",
       enterTime: 20,
       leaveTime: 60,
       clearTime: 300,
-      onEntered: p,
-      onExited: m,
+      onEntered: m,
+      onExited: p,
       children: f
     }
   ) : a ? f : null;
-}, Qt = ({
+}, Zt = ({
   children: e,
   "aria-label": t,
   "data-testid": n
 }) => {
-  const { isOpen: a, setIsOpen: r, onOpenChange: i, drawerId: o } = E(ie), c = g(() => {
+  const { isOpen: a, setIsOpen: r, onOpenChange: i, drawerId: s } = A(ie), o = E(() => {
     const u = !a;
     r(u), i == null || i(u);
   }, [a, r, i]);
-  return /* @__PURE__ */ s(
-    j,
+  return /* @__PURE__ */ c(
+    q,
     {
       className: "rmap-drawer-trigger",
       type: "button",
       "aria-expanded": a,
-      "aria-controls": o,
+      "aria-controls": s,
       "aria-label": t,
       "data-testid": n,
-      onClick: c,
+      onClick: o,
       children: e
     }
   );
 };
-ne.Content = Xt;
-ne.Trigger = Qt;
-const ge = ({ children: e }) => /* @__PURE__ */ s("ul", { className: "rmap-sortable-list-container", "aria-label": "Sortable list", children: e }), Jt = ({
+oe.Content = Jt;
+oe.Trigger = Zt;
+const Ee = ({ children: e }) => /* @__PURE__ */ c("ul", { className: "rmap-sortable-list-container", "aria-label": "Sortable list", children: e }), er = ({
   index: e,
   dragStartIdx: t,
   listData: n,
   draggable: a = !0,
   onDragStart: r,
   onDragOver: i,
-  onDrop: o,
-  onReorder: c,
+  onDrop: s,
+  onReorder: o,
   onClick: u
 }) => {
-  const d = (l, p) => {
+  const d = (l, m) => {
     if (l < 0 || l >= n.length) return;
-    const m = [...n], y = m.splice(e, 1)[0];
-    m.splice(l, 0, y);
-    const f = m.map((T, h) => ({
+    const p = [...n], v = p.splice(e, 1)[0];
+    p.splice(l, 0, v);
+    const f = p.map((T, h) => ({
       ...T,
       index: h
-    })), v = (p == null ? void 0 : p.parentElement) ?? null;
-    if ($e(() => {
-      c == null || c(f);
-    }), v) {
-      const T = v.children[l];
+    })), y = (m == null ? void 0 : m.parentElement) ?? null;
+    if (Fe(() => {
+      o == null || o(f);
+    }), y) {
+      const T = y.children[l];
       T == null || T.focus();
     }
   };
@@ -1080,16 +1107,16 @@ const ge = ({ children: e }) => /* @__PURE__ */ s("ul", { className: "rmap-sorta
           if (l.preventDefault(), a && l.altKey)
             d(e - 1, l.currentTarget);
           else {
-            const p = l.currentTarget.previousElementSibling;
-            p == null || p.focus();
+            const m = l.currentTarget.previousElementSibling;
+            m == null || m.focus();
           }
           break;
         case "ArrowDown":
           if (l.preventDefault(), a && l.altKey)
             d(e + 1, l.currentTarget);
           else {
-            const p = l.currentTarget.nextElementSibling;
-            p == null || p.focus();
+            const m = l.currentTarget.nextElementSibling;
+            m == null || m.focus();
           }
           break;
       }
@@ -1111,40 +1138,40 @@ const ge = ({ children: e }) => /* @__PURE__ */ s("ul", { className: "rmap-sorta
     },
     onDrop: (l) => {
       l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
-      const p = [...n], m = n[t];
-      p.splice(t, 1);
-      const y = [
-        ...p.slice(0, e),
-        m,
-        ...p.slice(e, p.length)
-      ].map((f, v) => ({ ...f, index: v }));
-      o == null || o(l, y);
+      const m = [...n], p = n[t];
+      m.splice(t, 1);
+      const v = [
+        ...m.slice(0, e),
+        p,
+        ...m.slice(e, m.length)
+      ].map((f, y) => ({ ...f, index: y }));
+      s == null || s(l, v);
     },
     onClick: (l) => {
       l.stopPropagation(), u == null || u(l);
     }
   };
-}, Zt = (e) => {
-  const { children: t, ...n } = e, a = Jt(n);
-  return /* @__PURE__ */ s("li", { className: "rmap-sortable-item", ...a, children: /* @__PURE__ */ s("div", { className: "rmap-sortable-item-inner", children: t }) });
+}, tr = (e) => {
+  const { children: t, ...n } = e, a = er(n);
+  return /* @__PURE__ */ c("li", { className: "rmap-sortable-item", ...a, children: /* @__PURE__ */ c("div", { className: "rmap-sortable-item-inner", children: t }) });
 };
-ge.Item = Zt;
-const Ce = O(null);
-Ce.displayName = "PlayListPortalContext";
-const xe = O(null);
-xe.displayName = "PlayListEmptyContext";
-const er = G(function({
+Ee.Item = tr;
+const xe = K(null);
+xe.displayName = "PlayListPortalContext";
+const Me = K(null);
+Me.displayName = "PlayListEmptyContext";
+const rr = z(function({
   data: t
 }) {
-  const { curPlayId: n } = K(), { coverImgsCss: a } = N(), r = n === t.id;
-  return /* @__PURE__ */ s(
+  const { curPlayId: n } = $(), { coverImgsCss: a } = L(), r = n === t.id;
+  return /* @__PURE__ */ c(
     "div",
     {
       className: `rmap-playlist-item${r ? " rmap-cur-played" : ""}`,
       "data-testid": "playlist-item",
       "aria-current": r ? "true" : void 0,
       children: /* @__PURE__ */ w("div", { className: "rmap-playlist-item-contents", children: [
-        /* @__PURE__ */ s("div", { className: "rmap-playlist-album-cover", children: t.img && /* @__PURE__ */ s(
+        /* @__PURE__ */ c("div", { className: "rmap-playlist-album-cover", children: t.img && /* @__PURE__ */ c(
           "img",
           {
             src: t.img,
@@ -1153,22 +1180,22 @@ const er = G(function({
           }
         ) }),
         /* @__PURE__ */ w("div", { className: "rmap-playlist-album-info", children: [
-          t.writer && /* @__PURE__ */ s("span", { className: "rmap-playlist-writer", children: t.writer }),
-          t.name && /* @__PURE__ */ s("span", { className: "rmap-playlist-title", children: t.name }),
-          t.description && /* @__PURE__ */ s("div", { className: "rmap-playlist-description", children: t.description })
+          t.writer && /* @__PURE__ */ c("span", { className: "rmap-playlist-writer", children: t.writer }),
+          t.name && /* @__PURE__ */ c("span", { className: "rmap-playlist-title", children: t.name }),
+          t.description && /* @__PURE__ */ c("div", { className: "rmap-playlist-description", children: t.description })
         ] })
       ] })
     }
   );
-}), tr = ({
+}), ar = ({
   setIsOpen: e
 }) => {
-  const { playList: t } = K(), { activeUI: n } = x(), a = E(L), [r, i] = b(0), o = g(
-    (c) => {
+  const { playList: t } = $(), { activeUI: n } = M(), a = A(b), [r, i] = N(0), s = E(
+    (o) => {
       a({
         type: "SET_CURRENT_AUDIO",
-        currentIndex: c,
-        currentAudioId: t[c].id
+        currentIndex: o,
+        currentAudioId: t[o].id
       });
     },
     [a, t]
@@ -1181,31 +1208,31 @@ const er = G(function({
     sortableItemEventProps: {
       draggable: n.playList !== "unSortable",
       dragStartIdx: r,
-      onDragStart: (c) => i(c),
-      onDrop: (c, u) => a({
+      onDragStart: (o) => i(o),
+      onDrop: (o, u) => a({
         type: "UPDATE_PLAY_LIST",
         playList: u
       }),
-      onReorder: (c) => a({
+      onReorder: (o) => a({
         type: "UPDATE_PLAY_LIST",
-        playList: c
+        playList: o
       }),
-      onClick: (c) => o(c)
+      onClick: (o) => s(o)
     }
   };
-}, rr = () => {
-  const { playList: e } = K(), { isOpen: t, setIsOpen: n } = E(ie), a = he(Ce), r = he(xe), { cssTransitionEventProps: i, sortableItemEventProps: o } = tr({
+}, nr = () => {
+  const { playList: e } = $(), { isOpen: t, setIsOpen: n } = A(ie), a = he(xe), r = he(Me), { cssTransitionEventProps: i, sortableItemEventProps: s } = ar({
     setIsOpen: n
   }), {
-    onClick: c,
+    onClick: o,
     onDragStart: u,
     ...d
-  } = o;
-  if (!a) return /* @__PURE__ */ s(R, {});
+  } = s;
+  if (!a) return /* @__PURE__ */ c(G, {});
   const l = e.length === 0;
-  return l && !r ? /* @__PURE__ */ s(R, {}) : _t.createPortal(
-    /* @__PURE__ */ s(
-      ke,
+  return l && !r ? /* @__PURE__ */ c(G, {}) : Rt.createPortal(
+    /* @__PURE__ */ c(
+      Ce,
       {
         visible: t,
         name: "rmap-playlist-content",
@@ -1213,68 +1240,68 @@ const er = G(function({
         leaveTime: 20,
         clearTime: 300,
         ...i,
-        children: /* @__PURE__ */ s("div", { className: "rmap-playlist-container", children: l ? r : /* @__PURE__ */ s(ge, { children: e.map((p, m) => /* @__PURE__ */ s(
-          ge.Item,
+        children: /* @__PURE__ */ c("div", { className: "rmap-playlist-container", children: l ? r : /* @__PURE__ */ c(Ee, { children: e.map((m, p) => /* @__PURE__ */ c(
+          Ee.Item,
           {
-            index: m,
+            index: p,
             listData: e,
-            onClick: () => c(m),
-            onDragStart: () => u(m),
+            onClick: () => o(p),
+            onDragStart: () => u(p),
             ...d,
-            children: /* @__PURE__ */ s(er, { data: p })
+            children: /* @__PURE__ */ c(rr, { data: m })
           },
-          p.id
+          m.id
         )) }) })
       }
     ),
     a
   );
-}, ar = () => {
-  const { customIcons: e } = N();
-  return /* @__PURE__ */ s(
-    M,
+}, or = () => {
+  const { customIcons: e } = L();
+  return /* @__PURE__ */ c(
+    D,
     {
-      render: /* @__PURE__ */ s(Xe, { size: "100%" }),
+      render: /* @__PURE__ */ c(Je, { size: "100%" }),
       customIcon: e == null ? void 0 : e.playList
     }
   );
-}, dt = ({
+}, mt = ({
   initialExpanded: e,
   gridArea: t,
   visible: n,
   ...a
 }) => {
-  const { playListExpanded: r } = x(), i = e ?? r, o = z("playList", t);
-  return /* @__PURE__ */ s(_.Item, { gridArea: o, visible: n ?? !0, ...a, children: /* @__PURE__ */ w(ne, { initialOpen: i, children: [
-    /* @__PURE__ */ s(
-      ne.Trigger,
+  const { playListExpanded: r } = M(), i = e ?? r, s = B("playList", t);
+  return /* @__PURE__ */ c(_.Item, { gridArea: s, visible: n ?? !0, ...a, children: /* @__PURE__ */ w(oe, { initialOpen: i, children: [
+    /* @__PURE__ */ c(
+      oe.Trigger,
       {
         "aria-label": "Playlist",
         "data-testid": "playlist-trigger-btn",
-        children: /* @__PURE__ */ s(ar, {})
+        children: /* @__PURE__ */ c(or, {})
       }
     ),
-    /* @__PURE__ */ s(ne.Content, { "aria-label": "Playlist", children: /* @__PURE__ */ s(rr, {}) })
+    /* @__PURE__ */ c(oe.Content, { "aria-label": "Playlist", children: /* @__PURE__ */ c(nr, {}) })
   ] }) });
-}, Z = (e) => {
+}, ee = (e) => {
   const t = `${Math.floor(e / 60)}`.padStart(2, "0"), n = `${Math.floor(e % 60)}`.padStart(2, "0");
   return `${t}:${n}`;
-}, me = (e, t, n = 0) => {
+}, pe = (e, t, n = 0) => {
   if (!t) return n;
   const a = e / t;
   return isFinite(a) ? a : n;
-}, mt = () => {
-  const { isLoadedMetaData: e } = C(), { elementRefs: t } = N(), [n, a] = b(!1), r = g(
+}, yt = () => {
+  const { isLoadedMetaData: e } = k(), { elementRefs: t } = L(), [n, a] = N(!1), r = E(
     (i) => {
       if (!(t != null && t.audioEl) || !e) return;
-      const { clientX: o } = i, { clientWidth: c } = i.currentTarget, u = i.currentTarget.getBoundingClientRect(), d = o - u.x, l = me(d, c) * t.audioEl.duration;
+      const { clientX: s } = i, { clientWidth: o } = i.currentTarget, u = i.currentTarget.getBoundingClientRect(), d = s - u.x, l = pe(d, o) * t.audioEl.duration;
       t.audioEl.currentTime = l;
     },
     [e, t == null ? void 0 : t.audioEl]
   );
   return P(() => {
     if (!n) return;
-    const i = (o) => o.preventDefault();
+    const i = (s) => s.preventDefault();
     return document.addEventListener("selectstart", i), () => {
       document.removeEventListener("selectstart", i);
     };
@@ -1285,9 +1312,9 @@ const er = G(function({
     onMouseMove: n ? r : void 0,
     onClick: r
   };
-}, pt = (e) => {
-  const { isLoadedMetaData: t } = C(), { elementRefs: n } = N();
-  return g(
+}, vt = (e) => {
+  const { isLoadedMetaData: t } = k(), { elementRefs: n } = L();
+  return E(
     (a) => {
       if (!(n != null && n.audioEl) || !t) return;
       const r = n.audioEl;
@@ -1312,18 +1339,18 @@ const er = G(function({
     },
     [n == null ? void 0 : n.audioEl, t, e]
   );
-}, nr = () => {
-  const { currentTime: e, duration: t } = te(), n = A(null), [a, r] = b(0);
+}, ir = () => {
+  const { currentTime: e, duration: t } = re(), n = S(null), [a, r] = N(0);
   P(() => {
     const d = n.current;
     if (!d) return;
     r(d.offsetWidth);
-    const l = new ResizeObserver(([p]) => {
-      r(p.contentBoxSize[0].inlineSize);
+    const l = new ResizeObserver(([m]) => {
+      r(m.contentBoxSize[0].inlineSize);
     });
     return l.observe(d), () => l.disconnect();
   }, []);
-  const i = me(e, t), o = mt(), c = pt(), u = i * a;
+  const i = pe(e, t), s = yt(), o = vt(), u = i * a;
   return /* @__PURE__ */ w(
     "div",
     {
@@ -1336,20 +1363,20 @@ const er = G(function({
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": Math.round(i * 100),
-      "aria-valuetext": `${Z(
+      "aria-valuetext": `${ee(
         e
-      )} of ${Z(t)}`,
-      onKeyDown: c,
-      ...o,
+      )} of ${ee(t)}`,
+      onKeyDown: o,
+      ...s,
       children: [
-        /* @__PURE__ */ s("div", { className: "rmap-progress-bar", children: /* @__PURE__ */ s(
+        /* @__PURE__ */ c("div", { className: "rmap-progress-bar", children: /* @__PURE__ */ c(
           "div",
           {
             className: "rmap-progress-fill",
             style: { transform: `scaleX(${i})` }
           }
         ) }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ c(
           "div",
           {
             className: "rmap-progress-handle",
@@ -1361,65 +1388,65 @@ const er = G(function({
       ]
     }
   );
-}, or = (e, t) => {
-  const n = A(), a = g(() => {
+}, sr = (e, t) => {
+  const n = S(), a = E(() => {
     const r = document.getElementsByClassName("rmap-player-provider")[0];
     if (!r) return;
     const i = Object.entries(
       e
     ).reduce(
-      (o, [c, u]) => ({
-        ...o,
-        [c]: window.getComputedStyle(r).getPropertyValue(`${u}`)
+      (s, [o, u]) => ({
+        ...s,
+        [o]: window.getComputedStyle(r).getPropertyValue(`${u}`)
       }),
       {}
     );
     n.current = i;
   }, [e]);
-  return Te(() => {
+  return ge(() => {
     a();
     const r = window.matchMedia("(prefers-color-scheme: dark)");
     return r.addEventListener("change", a), () => r.removeEventListener("change", a);
   }, [a, t]), n;
-}, ir = {
+}, cr = {
   progressColor: "--rm-audio-player-waveform-bar",
   waveColor: "--rm-audio-player-waveform-background"
-}, sr = (e) => {
+}, lr = (e) => {
   const t = e.backend;
   if (!(!(t != null && t.media) || !t.mediaListeners))
     for (const [n, a] of Object.entries(t.mediaListeners))
       t.media.removeEventListener(n, a);
-}, cr = (e) => {
-  const t = E(L), { isPlaying: n } = C(), { curPlayId: a } = K(), { elementRefs: r } = N(), { colorScheme: i } = x(), o = or(ir, i), c = A(r == null ? void 0 : r.waveformInst);
-  c.current = r == null ? void 0 : r.waveformInst, P(() => {
-    var y, f;
-    if (r != null && r.waveformInst || !((y = o.current) != null && y.progressColor) || !((f = o.current) != null && f.waveColor))
+}, ur = (e) => {
+  const t = A(b), { isPlaying: n } = k(), { curPlayId: a } = $(), { elementRefs: r } = L(), { colorScheme: i } = M(), s = sr(cr, i), o = S(r == null ? void 0 : r.waveformInst);
+  o.current = r == null ? void 0 : r.waveformInst, P(() => {
+    var v, f;
+    if (r != null && r.waveformInst || !((v = s.current) != null && v.progressColor) || !((f = s.current) != null && f.waveColor))
       return;
-    let m = !1;
-    return import("./wavesurfer-_j5aw4gZ.mjs").then((v) => v.w).then(({ default: v }) => {
-      var h, I;
-      if (m || !e.current || !((h = o.current) != null && h.progressColor) || !((I = o.current) != null && I.waveColor)) {
+    let p = !1;
+    return import("./wavesurfer-_j5aw4gZ.mjs").then((y) => y.w).then(({ default: y }) => {
+      var h, g;
+      if (p || !e.current || !((h = s.current) != null && h.progressColor) || !((g = s.current) != null && g.waveColor)) {
         console.error("[useWaveSurfer] missing required dependencies");
         return;
       }
       let T;
       try {
-        T = v.create({
+        T = y.create({
           barWidth: 1,
           cursorWidth: 2,
           container: e.current,
           height: 80,
-          progressColor: o.current.progressColor,
+          progressColor: s.current.progressColor,
           responsive: !0,
-          waveColor: o.current.waveColor,
+          waveColor: s.current.waveColor,
           cursorColor: "var(--rm-audio-player-waveform-cursor)",
           backend: "MediaElement",
           removeMediaElementOnDestroy: !1
         });
-      } catch (B) {
+      } catch (C) {
         console.error(
           "[useWaveSurfer] failed to create WaveSurfer instance",
-          B
+          C
         );
         return;
       }
@@ -1427,41 +1454,41 @@ const er = G(function({
         type: "SET_ELEMENT_REFS",
         elementRefs: { waveformInst: T }
       });
-    }).catch((v) => {
-      console.error("[useWaveSurfer] failed to load wavesurfer.js", v);
+    }).catch((y) => {
+      console.error("[useWaveSurfer] failed to load wavesurfer.js", y);
     }), () => {
-      m = !0;
+      p = !0;
     };
-  }, [r == null ? void 0 : r.waveformInst, t, o]);
-  const u = A(a);
+  }, [r == null ? void 0 : r.waveformInst, t, s]);
+  const u = S(a);
   P(() => {
     if (!(r != null && r.audioEl) || !(r != null && r.waveformInst)) return;
-    const m = r.audioEl;
-    if (!m.getAttribute("src")) return;
-    const y = r.waveformInst, f = u.current !== a;
+    const p = r.audioEl;
+    if (!p.getAttribute("src")) return;
+    const v = r.waveformInst, f = u.current !== a;
     u.current = a;
-    const v = f ? 0 : m.currentTime, T = n;
-    sr(y), y.load(m);
+    const y = f ? 0 : p.currentTime, T = n;
+    lr(v), v.load(p);
     const h = () => {
-      !f && v > 0 && m.duration && (m.currentTime = v, y.seekTo(v / m.duration)), T && m.play();
+      !f && y > 0 && p.duration && (p.currentTime = y, v.seekTo(y / p.duration)), T && p.play();
     };
-    return y.on("ready", h), () => {
-      y.un("ready", h);
+    return v.on("ready", h), () => {
+      v.un("ready", h);
     };
   }, [a, r == null ? void 0 : r.audioEl, r == null ? void 0 : r.waveformInst]), P(() => {
     if (!e.current || !(r != null && r.waveformInst)) return;
-    const m = () => {
-      var f, v;
-      (v = (f = r.waveformInst) == null ? void 0 : f.drawer) == null || v.fireEvent("redraw");
-    }, y = new ResizeObserver(m);
-    return y.observe(e.current), () => {
-      y.disconnect();
+    const p = () => {
+      var f, y;
+      (y = (f = r.waveformInst) == null ? void 0 : f.drawer) == null || y.fireEvent("redraw");
+    }, v = new ResizeObserver(p);
+    return v.observe(e.current), () => {
+      v.disconnect();
     };
   }, [r == null ? void 0 : r.waveformInst, e]), P(
     () => () => {
-      var y, f;
-      const m = (y = e.current) == null ? void 0 : y.querySelector("wave");
-      m && m.remove(), (f = c.current) == null || f.destroy(), t({
+      var v, f;
+      const p = (v = e.current) == null ? void 0 : v.querySelector("wave");
+      p && p.remove(), (f = o.current) == null || f.destroy(), t({
         type: "SET_ELEMENT_REFS",
         elementRefs: { waveformInst: void 0 }
       });
@@ -1470,31 +1497,31 @@ const er = G(function({
     [t]
   );
   const d = () => {
-    var v, T;
-    const m = c.current;
-    if (!(m != null && m.isReady)) return;
-    const y = (v = o.current) == null ? void 0 : v.waveColor, f = (T = o.current) == null ? void 0 : T.progressColor;
-    y && m.setWaveColor(y), f && m.setProgressColor(f);
-  }, l = A(d);
+    var y, T;
+    const p = o.current;
+    if (!(p != null && p.isReady)) return;
+    const v = (y = s.current) == null ? void 0 : y.waveColor, f = (T = s.current) == null ? void 0 : T.progressColor;
+    v && p.setWaveColor(v), f && p.setProgressColor(f);
+  }, l = S(d);
   l.current = d;
-  const p = A(i);
+  const m = S(i);
   P(() => {
-    p.current !== i && (p.current = i, l.current());
+    m.current !== i && (m.current = i, l.current());
   }, [i, r == null ? void 0 : r.waveformInst]), P(() => {
-    const m = () => l.current(), y = window.matchMedia("(prefers-color-scheme: dark)");
-    return y.addEventListener("change", m), () => y.removeEventListener("change", m);
+    const p = () => l.current(), v = window.matchMedia("(prefers-color-scheme: dark)");
+    return v.addEventListener("change", p), () => v.removeEventListener("change", p);
   }, []);
-}, lr = ({ isActive: e }) => {
-  var u, d, l, p;
-  const t = A(null), { isLoadedMetaData: n, isPlaying: a } = C(), { elementRefs: r } = N();
-  cr(t), P(() => {
+}, dr = ({ isActive: e }) => {
+  var u, d, l, m;
+  const t = S(null), { isLoadedMetaData: n, isPlaying: a } = k(), { elementRefs: r } = L();
+  ur(t), P(() => {
     if (!e || !(r != null && r.waveformInst) || !(r != null && r.audioEl) || !n || a)
       return;
-    const m = me(
+    const p = pe(
       r.audioEl.currentTime,
       r.audioEl.duration
     );
-    r.waveformInst.seekTo(m);
+    r.waveformInst.seekTo(p);
   }, [
     e,
     n,
@@ -1502,14 +1529,14 @@ const er = G(function({
     r == null ? void 0 : r.audioEl,
     a
   ]);
-  const i = mt(), o = g(
-    (m, y) => {
+  const i = yt(), s = E(
+    (p, v) => {
       var f;
-      y && ((f = r == null ? void 0 : r.waveformInst) == null || f.seekTo(me(m, y)));
+      v && ((f = r == null ? void 0 : r.waveformInst) == null || f.seekTo(pe(p, v)));
     },
     [r == null ? void 0 : r.waveformInst]
-  ), c = pt(o);
-  return /* @__PURE__ */ s("div", { className: "rmap-waveform-wrapper", "data-active": e, children: /* @__PURE__ */ s(
+  ), o = vt(s);
+  return /* @__PURE__ */ c("div", { className: "rmap-waveform-wrapper", "data-active": e, children: /* @__PURE__ */ c(
     "div",
     {
       id: "rm-waveform",
@@ -1522,105 +1549,60 @@ const er = G(function({
       "aria-valuenow": Math.round(
         (((u = r == null ? void 0 : r.audioEl) == null ? void 0 : u.currentTime) ?? 0) / (((d = r == null ? void 0 : r.audioEl) == null ? void 0 : d.duration) || 1) * 100
       ),
-      "aria-valuetext": `${Z(
+      "aria-valuetext": `${ee(
         ((l = r == null ? void 0 : r.audioEl) == null ? void 0 : l.currentTime) ?? 0
-      )} of ${Z(((p = r == null ? void 0 : r.audioEl) == null ? void 0 : p.duration) ?? 0)}`,
-      onKeyDown: c,
+      )} of ${ee(((m = r == null ? void 0 : r.audioEl) == null ? void 0 : m.duration) ?? 0)}`,
+      onKeyDown: o,
       ...i
     }
   ) });
-}, yt = ({
+}, ft = ({
   gridArea: e,
   visible: t,
   type: n,
   width: a,
   ...r
 }) => {
-  const { activeUI: i } = x(), o = n ?? (i.progress === "waveform" ? "waveform" : "bar"), c = o === "waveform", u = o === "bar", [d, l] = b(c);
+  const { activeUI: i } = M(), s = n ?? (i.progress === "waveform" ? "waveform" : "bar"), o = s === "waveform", u = s === "bar", [d, l] = N(o);
   P(() => {
-    c && !d && l(!0);
-  }, [c, d]);
-  const p = z("progress", e);
-  return /* @__PURE__ */ s(
+    o && !d && l(!0);
+  }, [o, d]);
+  const m = B("progress", e);
+  return /* @__PURE__ */ c(
     _.Item,
     {
-      gridArea: p,
+      gridArea: m,
       width: a ?? "100%",
       visible: t ?? !0,
       ...r,
       children: /* @__PURE__ */ w("div", { className: "rmap-progress-container", children: [
-        d && /* @__PURE__ */ s(lr, { isActive: c }),
-        u && /* @__PURE__ */ s(nr, {})
+        d && /* @__PURE__ */ c(dr, { isActive: o }),
+        u && /* @__PURE__ */ c(ir, {})
       ] })
     }
   );
-}, ur = ({
-  placement: e
-}) => {
-  var p;
-  const t = A(null), { volume: n, muted: a } = C(), { elementRefs: r } = N(), i = E(L), o = g(
-    (m) => {
-      m.stopPropagation(), m.preventDefault(), a && i({ type: "SET_MUTED", muted: !1 });
-      const { value: y } = m.target, f = parseFloat(y);
-      i({
-        type: "SET_VOLUME",
-        volume: f
-      });
-    },
-    [a, i]
-  ), c = n ?? ((p = r == null ? void 0 : r.audioEl) == null ? void 0 : p.volume) ?? 0, u = c * 100, d = Math.round(u), l = k(
-    () => ({
-      "--rm-audio-player-volume-value": `${u}%`
-    }),
-    [u]
-  );
-  return /* @__PURE__ */ s(
-    "div",
-    {
-      ref: t,
-      className: "rmap-volume-container",
-      "data-placement": e,
-      "data-testid": "volume-slider",
-      style: l,
-      children: /* @__PURE__ */ s("div", { className: "rmap-volume-panel", children: /* @__PURE__ */ s(
-        "input",
-        {
-          className: "rmap-volume-slider",
-          type: "range",
-          style: { cursor: "pointer" },
-          value: c,
-          onChange: o,
-          min: "0",
-          max: "1",
-          step: "0.01",
-          "aria-label": a ? "Volume (muted)" : "Volume",
-          "aria-valuetext": `${d} percent`
-        }
-      ) })
-    }
-  );
-}, pe = O(null);
-pe.displayName = "DropdownContext";
-const vt = ({
+}, me = K(null);
+me.displayName = "DropdownContext";
+const Tt = ({
   clickArea: e,
   triggerType: t,
   isOpen: n,
   setIsOpen: a,
   onOpenChange: r
 }) => {
-  const i = A(), o = (l) => {
-    const p = () => {
+  const i = S(), s = (l) => {
+    const m = () => {
       clearTimeout(i.current), i.current = void 0;
-    }, m = (y) => {
-      a(y), r && r(y), p();
+    }, p = (v) => {
+      a(v), r && r(v), m();
     };
-    if (p(), l) {
-      i.current = window.setTimeout(() => m(!0), 100);
+    if (m(), l) {
+      i.current = window.setTimeout(() => p(!0), 100);
       return;
     }
-    i.current = window.setTimeout(() => m(!1), 100);
-  }, c = (l) => {
-    t === "hover" && o(l);
+    i.current = window.setTimeout(() => p(!1), 100);
+  }, o = (l) => {
+    t === "hover" && s(l);
   };
   return {
     onClick: e === "content" ? (l) => {
@@ -1628,56 +1610,56 @@ const vt = ({
     } : () => {
       t === "click" && (a(!n), r && r(!n));
     },
-    onKeyUp: () => c(!0),
-    onMouseEnter: () => c(!0),
-    onMouseLeave: () => c(!1),
-    onFocus: () => c(!0),
-    onBlur: () => c(!1)
+    onKeyUp: () => o(!0),
+    onMouseEnter: () => o(!0),
+    onMouseLeave: () => o(!1),
+    onFocus: () => o(!0),
+    onBlur: () => o(!1)
   };
-}, oe = ({
+}, j = ({
   triggerType: e = "click",
   outboundClickActive: t = !0,
   children: n,
   isOpen: a,
   placement: r = "bottom",
   disabled: i = !1,
-  onOpenChange: o,
-  "data-testid": c
+  onOpenChange: s,
+  "data-testid": o
 }) => {
-  const u = A(null), [d, l] = ee.Children.toArray(n), [p, m] = b(!1), y = vt({
-    setIsOpen: m,
-    isOpen: p,
+  const u = S(null), [d, l] = te.Children.toArray(n), [m, p] = N(!1), v = Tt({
+    setIsOpen: p,
+    isOpen: m,
     triggerType: e,
     clickArea: "root"
-  }), f = Be();
-  lt(u, () => t && m(!1)), P(() => {
-    a !== void 0 && m(a);
+  }), f = $e();
+  dt(u, () => t && p(!1)), P(() => {
+    a !== void 0 && p(a);
   }, [a]);
-  const v = k(
+  const y = x(
     () => ({
       dropdownRef: u,
       placement: r,
-      isOpen: p,
-      setIsOpen: m,
-      onOpenChange: o,
+      isOpen: m,
+      setIsOpen: p,
+      onOpenChange: s,
       dropdownId: f
     }),
-    [r, p, o, f]
+    [r, m, s, f]
   );
-  return /* @__PURE__ */ s(pe.Provider, { value: v, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ c(me.Provider, { value: y, children: /* @__PURE__ */ c(
     "div",
     {
       className: "rmap-dropdown-container",
       ref: u,
-      "data-testid": c,
-      ...y,
-      children: /* @__PURE__ */ w(R, { children: [
+      "data-testid": o,
+      ...v,
+      children: /* @__PURE__ */ w(G, { children: [
         d,
         !i && l
       ] })
     }
   ) });
-}, dr = (e, t) => k(() => {
+}, pr = (e, t) => x(() => {
   if (t)
     return {
       position: "absolute",
@@ -1693,46 +1675,46 @@ const vt = ({
   isWithAnimation: t = !0,
   ...n
 }) => {
-  const { dropdownRef: a, placement: r, isOpen: i, setIsOpen: o, dropdownId: c } = E(pe), [u, d] = b(), { onClick: l } = vt({
-    setIsOpen: o,
+  const { dropdownRef: a, placement: r, isOpen: i, setIsOpen: s, dropdownId: o } = A(me), [u, d] = N(), { onClick: l } = Tt({
+    setIsOpen: s,
     isOpen: i,
     clickArea: "content"
-  }), p = () => o(!1), m = () => o(!0);
+  }), m = () => s(!1), p = () => s(!0);
   P(() => {
     a.current && d({
       width: a.current.offsetWidth,
       height: a.current.offsetHeight
     });
   }, [a]);
-  const y = dr(r, u), f = u ? /* @__PURE__ */ s(
+  const v = pr(r, u), f = u ? /* @__PURE__ */ c(
     "div",
     {
       ...n,
-      id: c,
-      style: { ...y, ...n.style },
+      id: o,
+      style: { ...v, ...n.style },
       onClick: l,
       children: e
     }
   ) : null;
-  return t ? /* @__PURE__ */ s(
-    ke,
+  return t ? /* @__PURE__ */ c(
+    Ce,
     {
       visible: i,
       name: "rmap-dropdown-content",
       enterTime: 20,
       leaveTime: 60,
       clearTime: 300,
-      onExited: p,
-      onEntered: m,
+      onExited: m,
+      onEntered: p,
       children: f
     }
   ) : i ? f : null;
-}, ft = Pe(({ children: e, className: t, ...n }, a) => {
-  const { isOpen: r, dropdownId: i } = E(pe), o = t ? `rmap-dropdown-trigger ${t}` : "rmap-dropdown-trigger";
-  return /* @__PURE__ */ s(
-    j,
+}, ht = Pe(({ children: e, className: t, ...n }, a) => {
+  const { isOpen: r, dropdownId: i } = A(me), s = t ? `rmap-dropdown-trigger ${t}` : "rmap-dropdown-trigger";
+  return /* @__PURE__ */ c(
+    q,
     {
-      className: o,
+      className: s,
       type: "button",
       ...n,
       "aria-haspopup": "true",
@@ -1743,103 +1725,262 @@ const vt = ({
     }
   );
 });
-ft.displayName = "DropdownTrigger";
-oe.Content = mr;
-oe.Trigger = ft;
-const pr = ({
+ht.displayName = "DropdownTrigger";
+j.Content = mr;
+j.Trigger = ht;
+const yr = ({
   triggerRef: e,
   initialState: t
 }) => {
-  const { playerPlacement: n } = x(), [a, r] = b(t);
+  const { playerPlacement: n } = M(), [a, r] = N(t);
   return P(() => {
     if (e.current) {
-      const i = () => e.current.getBoundingClientRect().top < window.innerHeight / 2 ? "bottom" : "top", o = setTimeout(() => {
+      const i = () => e.current.getBoundingClientRect().top < window.innerHeight / 2 ? "bottom" : "top", s = setTimeout(() => {
         r(i());
       }, 0);
       return () => {
-        clearTimeout(o);
+        clearTimeout(s);
       };
     }
   }, [n, e]), a;
-}, ht = ({ gridArea: e, visible: t, ...n }) => {
-  const a = A(null), { muted: r } = C(), i = E(L), o = g(
-    () => i({ type: "SET_MUTED", muted: !r }),
-    [i, r]
-  ), {
-    activeUI: { volumeSlider: c },
-    volumeSliderPlacement: u
-  } = x(), d = pr({
+}, gt = ({
+  triggerType: e,
+  placement: t,
+  contextPlacement: n,
+  triggerRef: a,
+  defaults: r
+}) => {
+  const i = yr({
     triggerRef: a,
-    initialState: "bottom"
-  }), l = z("volume", e);
-  return /* @__PURE__ */ s(_.Item, { gridArea: l, visible: t ?? !0, ...n, children: /* @__PURE__ */ w(
-    oe,
+    initialState: r.placement
+  }), s = e ?? r.triggerType;
+  return {
+    triggerType: s,
+    placement: t ?? n ?? i,
+    contentRole: s === "hover" ? "tooltip" : "dialog"
+  };
+}, vr = [
+  0.5,
+  0.75,
+  1,
+  1.25,
+  1.5,
+  1.75,
+  2
+], fr = (e) => `${e}×`, _e = z(
+  function({
+    gridArea: t,
+    visible: n,
+    options: a,
+    formatRate: r,
+    triggerType: i,
+    placement: s,
+    ...o
+  }) {
+    const u = S(null), { playbackRate: d } = k(), l = A(
+      b
+    ), { speedSelectorPlacement: m } = M(), p = B("playbackRate", t), v = a ?? vr, f = r ?? fr, { triggerType: y, placement: T } = gt({
+      triggerType: i,
+      placement: s,
+      contextPlacement: m,
+      triggerRef: u,
+      defaults: { triggerType: "click", placement: "top" }
+    }), h = E(
+      (g) => {
+        l({ type: "SET_PLAYBACK_RATE", playbackRate: g });
+      },
+      [l]
+    );
+    return /* @__PURE__ */ c(
+      _.Item,
+      {
+        gridArea: p,
+        visible: n ?? !0,
+        ...o,
+        children: /* @__PURE__ */ w(
+          j,
+          {
+            triggerType: y,
+            placement: T,
+            "data-testid": "speed-selector-dropdown",
+            children: [
+              /* @__PURE__ */ c(
+                j.Trigger,
+                {
+                  ref: u,
+                  "aria-label": `Playback speed, currently ${f(
+                    d
+                  )}`,
+                  className: "rmap-speed-selector-trigger",
+                  "data-testid": "speed-selector-trigger",
+                  children: f(d)
+                }
+              ),
+              /* @__PURE__ */ c(j.Content, { children: /* @__PURE__ */ c(
+                "ul",
+                {
+                  role: "menu",
+                  "aria-label": "Playback speed",
+                  className: "rmap-speed-selector-menu",
+                  children: v.map((g) => {
+                    const C = g === d;
+                    return /* @__PURE__ */ c("li", { role: "none", children: /* @__PURE__ */ c(
+                      "button",
+                      {
+                        type: "button",
+                        role: "menuitemradio",
+                        "aria-checked": C,
+                        className: C ? "rmap-speed-selector-option rmap-speed-selector-option--active" : "rmap-speed-selector-option",
+                        "data-testid": "speed-selector-option",
+                        "data-rate": g,
+                        onClick: () => h(g),
+                        children: f(g)
+                      }
+                    ) }, g);
+                  })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+_e.displayName = "SpeedSelector";
+const Tr = ({
+  placement: e
+}) => {
+  var m;
+  const t = S(null), { volume: n, muted: a } = k(), { elementRefs: r } = L(), i = A(b), s = E(
+    (p) => {
+      p.stopPropagation(), p.preventDefault(), a && i({ type: "SET_MUTED", muted: !1 });
+      const { value: v } = p.target, f = parseFloat(v);
+      i({
+        type: "SET_VOLUME",
+        volume: f
+      });
+    },
+    [a, i]
+  ), o = n ?? ((m = r == null ? void 0 : r.audioEl) == null ? void 0 : m.volume) ?? 0, u = o * 100, d = Math.round(u), l = x(
+    () => ({
+      "--rm-audio-player-volume-value": `${u}%`
+    }),
+    [u]
+  );
+  return /* @__PURE__ */ c(
+    "div",
     {
-      placement: u || d,
-      triggerType: "hover",
-      disabled: c === !1,
+      ref: t,
+      className: "rmap-volume-container",
+      "data-placement": e,
+      "data-testid": "volume-slider",
+      style: l,
+      children: /* @__PURE__ */ c("div", { className: "rmap-volume-panel", children: /* @__PURE__ */ c(
+        "input",
+        {
+          className: "rmap-volume-slider",
+          type: "range",
+          style: { cursor: "pointer" },
+          value: o,
+          onChange: s,
+          min: "0",
+          max: "1",
+          step: "0.01",
+          "aria-label": a ? "Volume (muted)" : "Volume",
+          "aria-valuetext": `${d} percent`
+        }
+      ) })
+    }
+  );
+}, Et = ({
+  gridArea: e,
+  visible: t,
+  triggerType: n,
+  placement: a,
+  ...r
+}) => {
+  const i = S(null), { muted: s } = k(), o = A(b), u = E(
+    () => o({ type: "SET_MUTED", muted: !s }),
+    [o, s]
+  ), {
+    activeUI: { volumeSlider: d },
+    volumeSliderPlacement: l
+  } = M(), m = B("volume", e), {
+    triggerType: p,
+    placement: v,
+    contentRole: f
+  } = gt({
+    triggerType: n,
+    placement: a,
+    contextPlacement: l,
+    triggerRef: i,
+    defaults: { triggerType: "hover", placement: "bottom" }
+  });
+  return /* @__PURE__ */ c(_.Item, { gridArea: m, visible: t ?? !0, ...r, children: /* @__PURE__ */ w(
+    j,
+    {
+      placement: v,
+      triggerType: p,
+      disabled: d === !1,
       "data-testid": "volume-dropdown",
       children: [
-        /* @__PURE__ */ s(
-          oe.Trigger,
+        /* @__PURE__ */ c(
+          j.Trigger,
           {
-            ref: a,
-            "aria-label": r ? "Unmute" : "Mute",
-            "aria-pressed": r,
-            onClick: o,
+            ref: i,
+            "aria-label": s ? "Unmute" : "Mute",
+            "aria-pressed": s,
+            onClick: u,
             className: "rmap-volume-trigger",
             "data-testid": "volume-trigger-btn",
-            "data-muted": String(r),
-            children: /* @__PURE__ */ s(ct, {})
+            "data-muted": String(s),
+            children: /* @__PURE__ */ c(ut, {})
           }
         ),
-        /* @__PURE__ */ s(oe.Content, { role: "tooltip", children: /* @__PURE__ */ s(
-          ur,
-          {
-            placement: u || d
-          }
-        ) })
+        /* @__PURE__ */ c(j.Content, { role: f, children: /* @__PURE__ */ c(Tr, { placement: v }) })
       ]
     }
   ) });
-}, yr = () => {
-  const { activeUI: e } = x(), t = (n) => !!(e[n] ?? e.all);
-  return /* @__PURE__ */ w(R, { children: [
-    /* @__PURE__ */ s(yt, { visible: t("progress") }),
-    /* @__PURE__ */ s(st, { visible: t("repeatType") }),
-    /* @__PURE__ */ s(it, { visible: t("playButton") }),
-    /* @__PURE__ */ s(ht, { visible: t("volume") }),
-    /* @__PURE__ */ s(dt, { visible: t("playList") })
+}, hr = () => {
+  const { activeUI: e } = M(), t = (n) => !!(e[n] ?? e.all);
+  return /* @__PURE__ */ w(G, { children: [
+    /* @__PURE__ */ c(ft, { visible: t("progress") }),
+    /* @__PURE__ */ c(lt, { visible: t("repeatType") }),
+    /* @__PURE__ */ c(ct, { visible: t("playButton") }),
+    /* @__PURE__ */ c(Et, { visible: t("volume") }),
+    /* @__PURE__ */ c(_e, { visible: t("playbackRate") }),
+    /* @__PURE__ */ c(mt, { visible: t("playList") })
   ] });
-}, Tt = G(function({
+}, At = z(function({
   gridArea: t,
   visible: n,
   ...a
 }) {
-  const { playList: r, curIdx: i } = K(), { coverImgsCss: o } = N(), c = r[i], u = [c == null ? void 0 : c.writer, c == null ? void 0 : c.name].filter(Boolean).join(" - ") || "Album artwork", d = z("artwork", t);
-  return /* @__PURE__ */ s(_.Item, { gridArea: d, visible: n ?? !0, ...a, children: /* @__PURE__ */ s("div", { className: "rmap-artwork-container", children: c != null && c.img ? /* @__PURE__ */ s("img", { src: c.img, alt: u, style: o == null ? void 0 : o.artwork }) : /* @__PURE__ */ s(
+  const { playList: r, curIdx: i } = $(), { coverImgsCss: s } = L(), o = r[i], u = [o == null ? void 0 : o.writer, o == null ? void 0 : o.name].filter(Boolean).join(" - ") || "Album artwork", d = B("artwork", t);
+  return /* @__PURE__ */ c(_.Item, { gridArea: d, visible: n ?? !0, ...a, children: /* @__PURE__ */ c("div", { className: "rmap-artwork-container", children: o != null && o.img ? /* @__PURE__ */ c("img", { src: o.img, alt: u, style: s == null ? void 0 : s.artwork }) : /* @__PURE__ */ c(
     "div",
     {
       className: "rmap-artwork-fallback",
       role: "img",
       "aria-label": u,
-      style: o == null ? void 0 : o.artwork,
-      children: (c == null ? void 0 : c.name) || "♪"
+      style: s == null ? void 0 : s.artwork,
+      children: (o == null ? void 0 : o.name) || "♪"
     }
   ) }) });
-}), Me = G(function({
+}), De = z(function({
   gridArea: t,
   visible: n,
   ...a
 }) {
-  const { playList: r, curIdx: i } = K(), o = r[i], c = z("trackInfo", t);
-  return /* @__PURE__ */ s(_.Item, { gridArea: c, visible: n ?? !0, ...a, children: /* @__PURE__ */ s("div", { className: "rmap-track-info-container", children: o != null && o.customTrackInfo ? o.customTrackInfo : /* @__PURE__ */ w(R, { children: [
-    (o == null ? void 0 : o.name) && /* @__PURE__ */ s("span", { className: "title", "data-testid": "track-title", children: o.name }),
-    (o == null ? void 0 : o.writer) && /* @__PURE__ */ s("span", { className: "writer", children: o.writer })
+  const { playList: r, curIdx: i } = $(), s = r[i], o = B("trackInfo", t);
+  return /* @__PURE__ */ c(_.Item, { gridArea: o, visible: n ?? !0, ...a, children: /* @__PURE__ */ c("div", { className: "rmap-track-info-container", children: s != null && s.customTrackInfo ? s.customTrackInfo : /* @__PURE__ */ w(G, { children: [
+    (s == null ? void 0 : s.name) && /* @__PURE__ */ c("span", { className: "title", "data-testid": "track-title", children: s.name }),
+    (s == null ? void 0 : s.writer) && /* @__PURE__ */ c("span", { className: "writer", children: s.writer })
   ] }) }) });
 });
-Me.displayName = "TrackInfo";
-const gt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */ s(
+De.displayName = "TrackInfo";
+const Pt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */ c(
   "div",
   {
     className: `rmap-track-time-container${t ? ` ${t}` : ""}`,
@@ -1847,31 +1988,31 @@ const gt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */
     ...a,
     children: n
   }
-), vr = ({ position: e }) => {
-  const { currentTime: t } = te();
-  return /* @__PURE__ */ s(gt, { position: e, className: "rmap-track-time-current", children: /* @__PURE__ */ s(
+), gr = ({ position: e }) => {
+  const { currentTime: t } = re();
+  return /* @__PURE__ */ c(Pt, { position: e, className: "rmap-track-time-current", children: /* @__PURE__ */ c(
     "span",
     {
       className: "rmap-track-current-time",
       "data-testid": "track-current-time",
-      children: Z(t)
+      children: ee(t)
     }
   ) });
-}, fr = ({ position: e }) => {
-  const { duration: t } = te();
-  return /* @__PURE__ */ s(
-    gt,
+}, Er = ({ position: e }) => {
+  const { duration: t } = re();
+  return /* @__PURE__ */ c(
+    Pt,
     {
       position: e,
       className: "rmap-track-time-duration",
-      children: /* @__PURE__ */ s("span", { className: "rmap-track-duration", children: Z(t) })
+      children: /* @__PURE__ */ c("span", { className: "rmap-track-duration", children: ee(t) })
     }
   );
-}, Et = ({ visible: e }) => {
-  const t = z("trackTimeCurrent"), n = z("trackTimeDuration"), a = g(
+}, St = ({ visible: e }) => {
+  const t = B("trackTimeCurrent"), n = B("trackTimeDuration"), a = E(
     (d) => +d.split(/[^\d]/).join(""),
     []
-  ), r = a(t), i = a(n), o = g(
+  ), r = a(t), i = a(n), s = E(
     (d) => {
       switch (d) {
         case 1:
@@ -1883,28 +2024,28 @@ const gt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */
       }
     },
     []
-  ), c = {
-    current: o(r - i),
-    duration: o(i - r)
+  ), o = {
+    current: s(r - i),
+    duration: s(i - r)
   }, u = e ?? !0;
-  return /* @__PURE__ */ w(R, { children: [
-    /* @__PURE__ */ s(_.Item, { gridArea: t, visible: u, children: /* @__PURE__ */ s(vr, { position: c.current }) }),
-    /* @__PURE__ */ s(_.Item, { gridArea: n, visible: u, children: /* @__PURE__ */ s(fr, { position: c.duration }) })
+  return /* @__PURE__ */ w(G, { children: [
+    /* @__PURE__ */ c(_.Item, { gridArea: t, visible: u, children: /* @__PURE__ */ c(gr, { position: o.current }) }),
+    /* @__PURE__ */ c(_.Item, { gridArea: n, visible: u, children: /* @__PURE__ */ c(Er, { position: o.duration }) })
   ] });
-}, hr = () => {
-  var r, i, o, c;
-  const { playList: e, curIdx: t } = K(), { activeUI: n } = x(), a = !!(((r = e[t]) == null ? void 0 : r.customTrackInfo) ?? ((i = e[t]) == null ? void 0 : i.writer) ?? ((o = e[t]) == null ? void 0 : o.name)) && !!(n.trackInfo ?? n.all);
-  return /* @__PURE__ */ w(R, { children: [
-    /* @__PURE__ */ s(
-      Tt,
+}, Ar = () => {
+  var r, i, s, o;
+  const { playList: e, curIdx: t } = $(), { activeUI: n } = M(), a = !!(((r = e[t]) == null ? void 0 : r.customTrackInfo) ?? ((i = e[t]) == null ? void 0 : i.writer) ?? ((s = e[t]) == null ? void 0 : s.name)) && !!(n.trackInfo ?? n.all);
+  return /* @__PURE__ */ w(G, { children: [
+    /* @__PURE__ */ c(
+      At,
       {
-        visible: !!((c = e[t]) != null && c.img && (n.artwork ?? n.all))
+        visible: !!((o = e[t]) != null && o.img && (n.artwork ?? n.all))
       }
     ),
-    /* @__PURE__ */ s(Me, { visible: a }),
-    /* @__PURE__ */ s(Et, { visible: !!(n.trackTime ?? n.all) })
+    /* @__PURE__ */ c(De, { visible: a }),
+    /* @__PURE__ */ c(St, { visible: !!(n.trackTime ?? n.all) })
   ] });
-}, Ee = {
+}, Ae = {
   Progress: { displayName: "Progress", activeUIKey: "progress" },
   Volume: { displayName: "Volume", activeUIKey: "volume" },
   SortablePlayList: { displayName: "PlayList", activeUIKey: "playList" },
@@ -1912,201 +2053,202 @@ const gt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */
   RepeatTypeBtn: { displayName: "RepeatButton", activeUIKey: "repeatType" },
   Artwork: { displayName: "Artwork", activeUIKey: "artwork" },
   TrackInfo: { displayName: "TrackInfo", activeUIKey: "trackInfo" },
-  TrackTime: { displayName: "TrackTime", activeUIKey: "trackTime" }
+  TrackTime: { displayName: "TrackTime", activeUIKey: "trackTime" },
+  SpeedSelector: { displayName: "SpeedSelector", activeUIKey: "playbackRate" }
 };
-function Tr(e, t) {
+function Pr(e, t) {
   const n = e[t];
   return n === !1 ? !1 : n !== void 0 ? !0 : !!e.all;
 }
-function _e(e) {
+function Re(e) {
   const t = e.type;
   if (!t) return;
   const n = t.type ?? t;
   return n.displayName || n.name || void 0;
 }
-const gr = (e, t, n, a) => {
-  const r = k(
-    () => (a ?? []).map(_e).map(
+const Sr = (e, t, n, a) => {
+  const r = x(
+    () => (a ?? []).map(Re).map(
       (h) => {
-        var I;
-        return h ? (I = Ee[h]) == null ? void 0 : I.activeUIKey : void 0;
+        var g;
+        return h ? (g = Ae[h]) == null ? void 0 : g.activeUIKey : void 0;
       }
     ).filter((h) => h !== void 0),
     [a]
-  ), i = k(
+  ), i = x(
     () => [...r].sort().join(","),
     [r]
-  ), o = g(
-    (h, I, B, re) => {
+  ), s = E(
+    (h, g, C, W) => {
       const se = Object.keys(
         de.templateArea
-      ).filter((S) => (S === "trackTimeCurrent" || S === "trackTimeDuration") && h.trackTime === !1 ? !1 : h[S] !== void 0 ? h[S] : !0), D = h.all ? se : Object.entries(h).filter(([, S]) => S).map(([S]) => S);
-      for (const S of re)
-        D.includes(S) || D.push(S);
+      ).filter((I) => (I === "trackTimeCurrent" || I === "trackTimeDuration") && h.trackTime === !1 ? !1 : h[I] !== void 0 ? h[I] : !0), R = h.all ? se : Object.entries(h).filter(([, I]) => I).map(([I]) => I);
+      for (const I of W)
+        R.includes(I) || R.push(I);
       (() => {
-        D.find((S) => S === "trackTime") && (D.splice(D.indexOf("trackTime"), 1), D.push("trackTimeCurrent"), D.push("trackTimeDuration"));
+        R.find((I) => I === "trackTime") && (R.splice(R.indexOf("trackTime"), 1), R.push("trackTimeCurrent"), R.push("trackTimeDuration"));
       })();
-      const q = {
+      const ae = {
         ...de.templateArea,
-        ...I
-      }, At = Object.entries(
-        q
-      ).filter(([S]) => D.includes(S));
+        ...g
+      }, ye = Object.entries(
+        ae
+      ).filter(([I]) => R.includes(I));
       let le = 1;
-      const ue = {}, It = [
-        ...At,
-        ...Object.entries(B || {})
-      ].flatMap(([S, U]) => {
+      const ue = {}, wt = [
+        ...ye,
+        ...Object.entries(C || {})
+      ].flatMap(([I, U]) => {
         if (U == null) return [];
-        const [$, F] = U.split("-"), W = +$.split("row")[1];
-        return le = Math.max(le, W), ue[W] = ue[W] ? ue[W] + 1 : 1, [
+        const [F, H] = U.split("-"), Y = +F.split("row")[1];
+        return le = Math.max(le, Y), ue[Y] = ue[Y] ? ue[Y] + 1 : 1, [
           {
-            key: S,
-            row: W,
-            col: +F
+            key: I,
+            row: Y,
+            col: +H
           }
         ];
-      }).sort((S, U) => S.col - U.col), ye = Math.max(...Object.values(ue));
-      let De;
-      const St = new Array(le).fill("").map((S, U) => {
-        let $ = "", F;
-        const W = It.filter((V) => V.row !== U + 1 ? !1 : (V.key === "progress" && (F = V), !0));
-        if (F) {
+      }).sort((I, U) => I.col - U.col), ve = Math.max(...Object.values(ue));
+      let Ue;
+      const bt = new Array(le).fill("").map((I, U) => {
+        let F = "", H;
+        const Y = wt.filter((V) => V.row !== U + 1 ? !1 : (V.key === "progress" && (H = V), !0));
+        if (H) {
           const V = /* @__PURE__ */ new Map();
-          W.forEach((X) => V.set(X.col, X));
-          const ve = `row${U + 1}-${F.col}`, ae = [];
-          for (let X = 0; X < ye; X++) {
-            const Ue = X + 1;
-            V.has(Ue) ? ae.push(`row${U + 1}-${Ue}`) : ae.push(ve);
+          Y.forEach((Q) => V.set(Q.col, Q));
+          const fe = `row${U + 1}-${H.col}`, ne = [];
+          for (let Q = 0; Q < ve; Q++) {
+            const Oe = Q + 1;
+            V.has(Oe) ? ne.push(`row${U + 1}-${Oe}`) : ne.push(fe);
           }
-          const Nt = ae.indexOf(ve), bt = ae.lastIndexOf(ve);
-          De = Math.floor((Nt + bt) / 2), $ = " " + ae.join(" ");
+          const kt = ne.indexOf(fe), Ct = ne.lastIndexOf(fe);
+          Ue = Math.floor((kt + Ct) / 2), F = " " + ne.join(" ");
         } else
-          for (let V = 0; V < ye; V++)
-            $ += ` row${U + 1}-${V + 1}`;
-        return $.trimStart();
-      }), wt = ut ? window.innerWidth - 100 : 1500, Lt = new Array(le).fill("").map((S, U) => {
-        let $ = "";
-        for (let F = 0; F < ye; F++) {
-          if (De === F && U === 0) {
-            $ += " 1fr";
+          for (let V = 0; V < ve; V++)
+            F += ` row${U + 1}-${V + 1}`;
+        return F.trimStart();
+      }), Lt = pt ? window.innerWidth - 100 : 1500, Nt = new Array(le).fill("").map((I, U) => {
+        let F = "";
+        for (let H = 0; H < ve; H++) {
+          if (Ue === H && U === 0) {
+            F += " 1fr";
             continue;
           }
-          $ += ` fit-content(${wt}px)`;
+          F += ` fit-content(${Lt}px)`;
         }
-        return $.trimStart();
+        return F.trimStart();
       });
-      return { gridAreas: St, gridColumns: Lt };
+      return { gridAreas: bt, gridColumns: Nt };
     },
     []
-  ), [c, u] = b(e), [d, l] = b(i), [p, m] = b({
+  ), [o, u] = N(e), [d, l] = N(i), [m, p] = N({
     templateArea: t,
     customComponentsArea: n
-  }), [y, f] = b();
-  if (!y) {
-    const { gridAreas: h, gridColumns: I } = o(
-      c,
-      p.templateArea,
-      p.customComponentsArea,
+  }), [v, f] = N();
+  if (!v) {
+    const { gridAreas: h, gridColumns: g } = s(
+      o,
+      m.templateArea,
+      m.customComponentsArea,
       r
     );
-    return f({ gridAreas: h, gridColumns: I }), [h, I];
+    return f({ gridAreas: h, gridColumns: g }), [h, g];
   }
-  if (c !== e || d !== i || p.templateArea !== t || p.customComponentsArea !== n) {
-    u(e), l(i), m({ templateArea: t, customComponentsArea: n });
-    const { gridAreas: h, gridColumns: I } = o(
+  if (o !== e || d !== i || m.templateArea !== t || m.customComponentsArea !== n) {
+    u(e), l(i), p({ templateArea: t, customComponentsArea: n });
+    const { gridAreas: h, gridColumns: g } = s(
       e,
       t,
       n,
       r
     );
-    f({ gridAreas: h, gridColumns: I });
+    f({ gridAreas: h, gridColumns: g });
   }
-  const { gridAreas: v, gridColumns: T } = y;
-  return [v, T];
+  const { gridAreas: y, gridColumns: T } = v;
+  return [y, T];
 };
-function Er(e) {
-  return k(() => {
-    const t = ee.Children.toArray(e).filter(Mt), n = t.find(Ke);
+function Ir(e) {
+  return x(() => {
+    const t = te.Children.toArray(e).filter(Dt), n = t.find(Be);
     return {
       compoundChildren: t.filter(
-        (a) => !Ke(a)
+        (a) => !Be(a)
       ),
-      playListEmptyNode: Pr(n)
+      playListEmptyNode: wr(n)
     };
   }, [e]);
 }
-function Ke(e) {
-  return _e(e) === ze;
+function Be(e) {
+  return Re(e) === We;
 }
-function Pr(e) {
+function wr(e) {
   if (!e) return null;
   const t = e.props;
   return (t == null ? void 0 : t.children) ?? null;
 }
-function Ar({
+function br({
   compoundChildren: e,
   activeUI: t
 }) {
-  const n = e.map(_e).filter((a) => !!(a && Ee[a])).sort().join(",");
+  const n = e.map(Re).filter((a) => !!(a && Ae[a])).sort().join(",");
   P(() => {
     if (process.env.NODE_ENV === "production" || !n) return;
     const a = /* @__PURE__ */ new Set();
     for (const r of n.split(",")) {
-      const i = Ee[r];
-      i && (a.has(i.displayName) || Tr(t, i.activeUIKey) && (a.add(i.displayName), console.warn(
+      const i = Ae[r];
+      i && (a.has(i.displayName) || Pr(t, i.activeUIKey) && (a.add(i.displayName), console.warn(
         `[react-modern-audio-player] Both preset and compound '${i.displayName}' are rendered. Set \`activeUI.${i.activeUIKey}=false\` to replace the preset control.`
       )));
     }
   }, [n, t]);
 }
-const Ir = ({ children: e }) => {
-  const { interfacePlacement: t, activeUI: n, playListPlacement: a } = x(), { compoundChildren: r, playListEmptyNode: i } = Er(e);
-  Ar({ compoundChildren: r, activeUI: n });
-  const [o, c] = gr(
+const Lr = ({ children: e }) => {
+  const { interfacePlacement: t, activeUI: n, playListPlacement: a } = M(), { compoundChildren: r, playListEmptyNode: i } = Ir(e);
+  br({ compoundChildren: r, activeUI: n });
+  const [s, o] = Sr(
     n,
     t == null ? void 0 : t.templateArea,
     t == null ? void 0 : t.customComponentsArea,
     r
-  ), [u, d] = b(null);
-  return /* @__PURE__ */ s(
+  ), [u, d] = N(null);
+  return /* @__PURE__ */ c(
     "div",
     {
       className: "rmap-interface-container",
       "data-testid": "audio-player",
       role: "region",
       "aria-label": "Audio player",
-      children: /* @__PURE__ */ s(Ce.Provider, { value: u, children: /* @__PURE__ */ w(xe.Provider, { value: i, children: [
-        a === "top" && /* @__PURE__ */ s("div", { ref: d, className: "rmap-sortable-playlist" }),
+      children: /* @__PURE__ */ c(xe.Provider, { value: u, children: /* @__PURE__ */ w(Me.Provider, { value: i, children: [
+        a === "top" && /* @__PURE__ */ c("div", { ref: d, className: "rmap-sortable-playlist" }),
         /* @__PURE__ */ w(
           _,
           {
             alignItems: "center",
             justifyContent: "center",
-            areas: o,
+            areas: s,
             minHeight: "30px",
-            columns: c,
+            columns: o,
             UNSAFE_className: "rmap-interface-grid",
             children: [
-              /* @__PURE__ */ s(hr, {}),
-              /* @__PURE__ */ s(yr, {}),
+              /* @__PURE__ */ c(Ar, {}),
+              /* @__PURE__ */ c(hr, {}),
               r
             ]
           }
         ),
-        a === "bottom" && /* @__PURE__ */ s("div", { ref: d, className: "rmap-sortable-playlist" })
+        a === "bottom" && /* @__PURE__ */ c("div", { ref: d, className: "rmap-sortable-playlist" })
       ] }) })
     }
   );
-}, J = (e, t) => {
-  const n = A(!1);
+}, Z = (e, t) => {
+  const n = S(!1);
   P(() => {
     if (n.current)
       return e();
   }, t), P(() => (n.current = !0, () => {
     n.current = !1;
   }), []);
-}, Sr = ({
+}, Nr = ({
   placement: e = {},
   activeUI: t,
   coverImgsCss: n,
@@ -2114,73 +2256,87 @@ const Ir = ({ children: e }) => {
   playList: r,
   customIcons: i
 }) => {
-  const o = E(L);
-  J(() => {
+  const s = A(b);
+  Z(() => {
     const {
-      player: c,
+      player: o,
       playList: u,
       interface: d,
       volumeSlider: l
     } = e;
-    o({
+    s({
       type: "SET_PLACEMENTS",
-      playerPlacement: c,
+      playerPlacement: o,
       playListPlacement: u,
       interfacePlacement: d,
       volumeSliderPlacement: l
     });
-  }, [o, e]), J(() => {
-    t && o({ type: "SET_ACTIVE_UI", activeUI: t });
-  }, [t, o]), J(() => {
-    n && o({ type: "SET_COVER_IMGS_CSS", coverImgsCss: n });
-  }, [o, n]), J(() => {
-    a && o({
+  }, [s, e]), Z(() => {
+    t && s({ type: "SET_ACTIVE_UI", activeUI: t });
+  }, [t, s]), Z(() => {
+    n && s({ type: "SET_COVER_IMGS_CSS", coverImgsCss: n });
+  }, [s, n]), Z(() => {
+    a && s({
       type: "SET_INITIAL_STATES",
       audioState: a,
       curPlayId: a.curPlayId
     });
-  }, [a, o]), J(() => {
-    o({ type: "UPDATE_PLAY_LIST", playList: r });
-  }, [o, r]), J(() => {
-    i && o({ type: "SET_CUSTOM_ICONS", customIcons: i });
-  }, [i, o]);
-}, wr = ({
+  }, [a, s]), Z(() => {
+    s({ type: "UPDATE_PLAY_LIST", playList: r });
+  }, [s, r]), Z(() => {
+    i && s({ type: "SET_CUSTOM_ICONS", customIcons: i });
+  }, [i, s]);
+}, kr = ({
   audioRef: e,
   children: t,
   ...n
-}) => (Sr(n), /* @__PURE__ */ w("div", { id: "rm-audio-player", className: "rmap-player-container", children: [
-  /* @__PURE__ */ s(We, { audioRef: e }),
-  /* @__PURE__ */ s(Ir, { children: t })
+}) => (Nr(n), /* @__PURE__ */ w("div", { id: "rm-audio-player", className: "rmap-player-container", children: [
+  /* @__PURE__ */ c(Ye, { audioRef: e }),
+  /* @__PURE__ */ c(Lr, { children: t })
 ] }));
-function Pt({
+function It({
   rootContainerProps: e,
   ...t
 }) {
-  return /* @__PURE__ */ s(Kt, { ...t, children: /* @__PURE__ */ s(He, { rootContainerProps: e, children: /* @__PURE__ */ s(wr, { ...t }) }) });
+  return /* @__PURE__ */ c(Bt, { ...t, children: /* @__PURE__ */ c(Ge, { rootContainerProps: e, children: /* @__PURE__ */ c(kr, { ...t }) }) });
 }
-Pt.displayName = "AudioPlayerWithProviders";
-const Dr = Object.assign(Pt, {
-  Progress: yt,
-  Volume: ht,
-  PlayList: dt,
-  PlayListEmpty: Ge,
-  PlayButton: it,
-  RepeatButton: st,
-  Artwork: Tt,
-  TrackInfo: Me,
-  TrackTime: Et,
-  CustomComponent: Ht
-}), Lr = () => {
-  const e = E(L), { isPlaying: t, repeatType: n } = C(), a = g(() => {
+It.displayName = "AudioPlayerWithProviders";
+const Kr = Object.assign(It, {
+  Progress: ft,
+  Volume: Et,
+  PlayList: mt,
+  PlayListEmpty: je,
+  PlayButton: ct,
+  RepeatButton: lt,
+  SpeedSelector: _e,
+  Artwork: At,
+  TrackInfo: De,
+  TrackTime: St,
+  CustomComponent: Gt
+}), Cr = () => {
+  const e = A(b), { isPlaying: t, repeatType: n, playbackRate: a } = k(), r = E(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !0 });
-  }, [e]), r = g(() => {
+  }, [e]), i = E(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !1 });
-  }, [e]), i = g(() => {
+  }, [e]), s = E(() => {
     e({ type: "CHANGE_PLAYING_STATE" });
-  }, [e]);
-  return { isPlaying: t, repeatType: n, play: a, pause: r, togglePlay: i };
-}, Nr = () => {
-  const e = E(L), { playList: t, curIdx: n, curPlayId: a } = K(), { elementRefs: r } = N(), i = g(
+  }, [e]), o = E(
+    (u) => {
+      e({ type: "SET_PLAYBACK_RATE", playbackRate: u });
+    },
+    [e]
+  );
+  return {
+    isPlaying: t,
+    repeatType: n,
+    playbackRate: a,
+    play: r,
+    pause: i,
+    togglePlay: s,
+    setPlaybackRate: o
+  };
+}, xr = () => {
+  const e = A(b), { playList: t, curIdx: n, curPlayId: a } = $(), { elementRefs: r } = L(), i = E(
     (u) => {
       const d = t[u];
       d && e({
@@ -2190,9 +2346,9 @@ const Dr = Object.assign(Pt, {
       });
     },
     [e, t]
-  ), o = g(() => {
+  ), s = E(() => {
     t.length !== 0 && e({ type: "NEXT_AUDIO" });
-  }, [e, t.length]), c = g(() => {
+  }, [e, t.length]), o = E(() => {
     var d;
     if (t.length === 0) return;
     const u = ((d = r == null ? void 0 : r.audioEl) == null ? void 0 : d.currentTime) ?? 0;
@@ -2204,29 +2360,29 @@ const Dr = Object.assign(Pt, {
     playList: t,
     currentTrack: t[n] ?? null,
     setTrack: i,
-    next: o,
-    prev: c
+    next: s,
+    prev: o
   };
-}, br = () => {
-  const e = E(L), { volume: t, muted: n } = C(), a = g(
+}, Mr = () => {
+  const e = A(b), { volume: t, muted: n } = k(), a = E(
     (i) => {
       e({ type: "SET_VOLUME", volume: i });
     },
     [e]
-  ), r = g(() => {
+  ), r = E(() => {
     e({ type: "SET_MUTED", muted: !n });
   }, [e, n]);
   return { volume: t, muted: n, setVolume: a, toggleMute: r };
-}, kr = () => {
-  const e = E(L), { currentTime: t, duration: n } = te(), a = g(
+}, _r = () => {
+  const e = A(b), { currentTime: t, duration: n } = re(), a = E(
     (r) => {
       e({ type: "SEEK", time: r });
     },
     [e]
   );
   return { currentTime: t, duration: n, seek: a };
-}, Ur = () => {
-  const e = Lr(), t = Nr(), n = br(), a = kr();
+}, Vr = () => {
+  const e = Cr(), t = xr(), n = Mr(), a = _r();
   return {
     isPlaying: e.isPlaying,
     volume: n.volume,
@@ -2234,6 +2390,7 @@ const Dr = Object.assign(Pt, {
     duration: a.duration,
     repeatType: e.repeatType,
     muted: n.muted,
+    playbackRate: e.playbackRate,
     currentTrack: t.currentTrack,
     currentIndex: t.currentIndex,
     playList: t.playList,
@@ -2245,41 +2402,42 @@ const Dr = Object.assign(Pt, {
     seek: a.seek,
     setVolume: n.setVolume,
     toggleMute: n.toggleMute,
-    setTrack: t.setTrack
+    setTrack: t.setTrack,
+    setPlaybackRate: e.setPlaybackRate
   };
-}, Or = () => {
-  const { elementRefs: e } = N();
+}, Br = () => {
+  const { elementRefs: e } = L();
   return {
     audioEl: e == null ? void 0 : e.audioEl,
     waveformInst: e == null ? void 0 : e.waveformInst
   };
 };
 export {
-  wr as AudioPlayer,
-  He as AudioPlayerContainer,
-  Kt as AudioPlayerStateProvider,
-  H as DEFAULT_AUDIO_STATE,
+  kr as AudioPlayer,
+  Ge as AudioPlayerContainer,
+  Bt as AudioPlayerStateProvider,
+  O as DEFAULT_AUDIO_STATE,
+  Or as DEFAULT_INTERFACE_GRID_BOUND,
   Ie as audioAttrsContext,
-  L as audioPlayerDispatchContext,
-  Ut as audioPlayerReducer,
-  Dr as default,
+  b as audioPlayerDispatchContext,
+  Ot as audioPlayerReducer,
+  Kr as default,
   de as defaultInterfacePlacement,
-  _r as defaultInterfacePlacementMaxLength,
-  Ae as playbackContext,
+  Se as playbackContext,
   Le as resourceContext,
   Ne as timeContext,
-  Se as trackContext,
-  we as uiContext,
-  Ot as useAudioAttrsContext,
-  Ur as useAudioPlayer,
-  Or as useAudioPlayerElement,
-  Lr as useAudioPlayerPlayback,
-  kr as useAudioPlayerTime,
-  Nr as useAudioPlayerTrack,
-  br as useAudioPlayerVolume,
-  C as usePlaybackContext,
-  N as useResourceContext,
-  te as useTimeContext,
-  K as useTrackContext,
-  x as useUIContext
+  we as trackContext,
+  be as uiContext,
+  Kt as useAudioAttrsContext,
+  Vr as useAudioPlayer,
+  Br as useAudioPlayerElement,
+  Cr as useAudioPlayerPlayback,
+  _r as useAudioPlayerTime,
+  xr as useAudioPlayerTrack,
+  Mr as useAudioPlayerVolume,
+  k as usePlaybackContext,
+  L as useResourceContext,
+  re as useTimeContext,
+  $ as useTrackContext,
+  M as useUIContext
 };