react-modern-audio-player 2.3.0 → 2.3.2

package/dist/index.es.js

@@ -1,7 +1,7 @@
 "use client";
 import './index.css';
-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 { jsx as c, Fragment as G, jsxs as b } from "react/jsx-runtime";
+import te, { createContext as K, useContext as he, useReducer as xt, useMemo as C, forwardRef as Pe, useCallback as g, useRef as P, useEffect as A, 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,
@@ -11,7 +11,7 @@ const O = {
   currentTime: 0,
   duration: 0,
   playbackRate: 1
-}, Or = 11, de = {
+}, Kr = 11, pe = {
   templateArea: {
     artwork: "row1-1",
     trackInfo: "row1-2",
@@ -24,8 +24,8 @@ const O = {
     playList: "row1-9",
     playbackRate: "row1-10"
   }
-}, b = K(null);
-b.displayName = "AudioPlayerDispatchContext";
+}, w = K(null);
+w.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 = Ke(t, n);
@@ -88,7 +88,7 @@ const He = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Ke = (e, t) =>
           curAudioState: { ...e.curAudioState, currentTime: 0 }
         };
       if (e.curAudioState.repeatType === "SHUFFLE") {
-        const s = Ve(
+        const i = Ve(
           e.curIdx,
           0,
           e.playList.length - 1
@@ -96,17 +96,17 @@ const He = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Ke = (e, t) =>
         return {
           ...e,
           audioResetKey: e.audioResetKey + 1,
-          curPlayId: e.playList[s].id,
-          curIdx: s,
+          curPlayId: e.playList[i].id,
+          curIdx: i,
           curAudioState: { ...e.curAudioState, currentTime: 0 }
         };
       }
-      const i = (e.curIdx - 1 + e.playList.length) % e.playList.length;
+      const s = (e.curIdx - 1 + e.playList.length) % e.playList.length;
       return {
         ...e,
         audioResetKey: e.audioResetKey + 1,
-        curPlayId: e.playList[i].id,
-        curIdx: i,
+        curPlayId: e.playList[s].id,
+        curIdx: s,
         curAudioState: {
           ...e.curAudioState,
           isLoadedMetaData: !1,
@@ -263,30 +263,30 @@ const He = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Ke = (e, t) =>
 Se.displayName = "PlaybackContext";
 const Ie = K(null);
 Ie.displayName = "AudioAttrsContext";
-const we = K(null);
-we.displayName = "TrackContext";
 const be = K(null);
-be.displayName = "UIContext";
+be.displayName = "TrackContext";
+const we = K(null);
+we.displayName = "UIContext";
 const Le = K(null);
 Le.displayName = "ResourceContext";
 const Ne = K(null);
 Ne.displayName = "TimeContext";
-const A = (e) => {
+const E = (e) => {
   const t = he(e);
   if (!t) {
     const n = e.displayName || "Context";
     throw new Error(`${n} is not provided`);
   }
   return t;
-}, k = () => A(Se), re = () => A(Ne), $ = () => A(we), M = () => A(be), L = () => A(Le), Kt = () => A(Ie);
+}, k = () => E(Se), re = () => E(Ne), $ = () => E(be), x = () => E(we), L = () => E(Le), Kt = () => E(Ie);
 function Vt(e) {
   const {
     playList: t,
     audioInitialState: n,
     activeUI: a,
     placement: r,
-    customIcons: i,
-    coverImgsCss: s
+    customIcons: s,
+    coverImgsCss: i
   } = e, o = {
     isPlaying: (n == null ? void 0 : n.isPlaying) ?? O.isPlaying,
     repeatType: (n == null ? void 0 : n.repeatType) ?? O.repeatType,
@@ -298,7 +298,7 @@ function Vt(e) {
     playListPlacement: (r == null ? void 0 : r.playList) || "bottom",
     interfacePlacement: (r == null ? void 0 : r.interface) || {
       templateArea: {
-        playButton: de.templateArea.playButton
+        playButton: pe.templateArea.playButton
       }
     },
     volumeSliderPlacement: r == null ? void 0 : r.volumeSlider,
@@ -313,8 +313,8 @@ function Vt(e) {
     audioResetKey: 0,
     seekRequestKey: 0,
     ...d,
-    customIcons: i,
-    coverImgsCss: s
+    customIcons: s,
+    coverImgsCss: i
   };
 }
 const Bt = ({
@@ -327,7 +327,7 @@ const Bt = ({
     Ot,
     n,
     Vt
-  ), i = x(
+  ), s = C(
     () => ({
       currentTime: a.curAudioState.currentTime ?? O.currentTime,
       duration: a.curAudioState.duration ?? O.duration,
@@ -338,7 +338,7 @@ const Bt = ({
       a.curAudioState.duration,
       a.seekRequestKey
     ]
-  ), s = x(
+  ), i = C(
     () => ({
       isPlaying: a.curAudioState.isPlaying ?? O.isPlaying,
       volume: a.curAudioState.volume ?? O.volume,
@@ -357,14 +357,14 @@ const Bt = ({
       a.curAudioState.playbackRate,
       a.audioResetKey
     ]
-  ), o = x(
+  ), o = C(
     () => ({
       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 = x(
+  ), { audioInitialState: u } = n, d = u == null ? void 0 : u.playListExpanded, l = C(
     () => ({
       activeUI: a.activeUI,
       playListPlacement: a.playListPlacement,
@@ -385,23 +385,23 @@ const Bt = ({
       t,
       d
     ]
-  ), m = x(() => {
+  ), m = C(() => {
     if (!u) return {};
     const {
       isPlaying: y,
       repeatType: T,
       isLoadedMetaData: h,
-      currentTime: g,
-      duration: C,
-      volume: W,
-      muted: se,
+      currentTime: S,
+      duration: D,
+      volume: j,
+      muted: ce,
       playbackRate: R,
-      curPlayId: ce,
+      curPlayId: le,
       playListExpanded: ae,
       ...ye
     } = u;
     return ye;
-  }, [u]), p = x(
+  }, [u]), p = C(
     () => ({
       elementRefs: a.elementRefs,
       customIcons: a.customIcons,
@@ -414,7 +414,7 @@ const Bt = ({
       a.coverImgsCss
     ]
   );
-  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 }) }) }) }) }) }) });
+  return /* @__PURE__ */ c(Ne.Provider, { value: s, children: /* @__PURE__ */ c(Se.Provider, { value: i, children: /* @__PURE__ */ c(be.Provider, { value: o, children: /* @__PURE__ */ c(we.Provider, { value: l, children: /* @__PURE__ */ c(Le.Provider, { value: p, children: /* @__PURE__ */ c(Ie.Provider, { value: m, children: /* @__PURE__ */ c(w.Provider, { value: r, children: e }) }) }) }) }) }) });
 }, J = {
   top: "auto",
   right: "auto",
@@ -428,10 +428,10 @@ const Bt = ({
   "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(
+  const { playerPlacement: n, colorScheme: a } = x(), r = C(
     () => n ? $t[n] : void 0,
     [n]
-  ), s = {
+  ), i = {
     width: "100%",
     position: n !== "static" && !!n ? "fixed" : "static",
     ...r,
@@ -440,10 +440,11 @@ const Bt = ({
   return /* @__PURE__ */ c(
     "div",
     {
+      "data-testid": "player-provider",
       ...t,
       className: `rmap-player-provider${t != null && t.className ? ` ${t.className}` : ""}`,
       "data-theme": a ?? void 0,
-      style: s,
+      style: i,
       children: e
     }
   );
@@ -455,18 +456,19 @@ const Ft = ({
   alignItems: n,
   justifyContent: a,
   minHeight: r,
-  UNSAFE_className: i,
-  children: s
+  UNSAFE_className: s,
+  "data-testid": i,
+  children: o
 }) => {
-  const o = {
+  const u = {
     display: "grid",
-    gridTemplateAreas: e == null ? void 0 : e.map((u) => `"${u}"`).join(" "),
+    gridTemplateAreas: e == null ? void 0 : e.map((d) => `"${d}"`).join(" "),
     gridTemplateColumns: t == null ? void 0 : t.join(" "),
     alignItems: n,
     justifyContent: a,
     minHeight: r
   };
-  return /* @__PURE__ */ c("div", { className: i, style: o, children: s });
+  return /* @__PURE__ */ c("div", { className: s, style: u, "data-testid": i, children: o });
 }, Ht = Ft, ze = Pe(
   ({
     children: e,
@@ -474,8 +476,8 @@ const Ft = ({
     gridArea: n,
     width: a,
     justifySelf: r = "center",
-    padding: i,
-    UNSAFE_className: s,
+    padding: s,
+    UNSAFE_className: i,
     style: o,
     ...u
   }, d) => {
@@ -484,22 +486,22 @@ const Ft = ({
       gridArea: n,
       width: a,
       justifySelf: r,
-      padding: i ?? "0 5px",
+      padding: s ?? "0 5px",
       ...o
     };
-    return /* @__PURE__ */ c("div", { ref: d, className: s, style: l, ...u, children: e });
+    return /* @__PURE__ */ c("div", { ref: d, className: i, style: l, ...u, children: e });
   }
 );
 ze.displayName = "GridItem";
-const _ = Ht;
-_.Item = ze;
+const M = Ht;
+M.Item = ze;
 const Gt = ({
   children: e,
   id: t,
   ...n
 }) => {
   var l, m;
-  const a = k(), r = re(), i = $(), s = M(), o = L(), u = {
+  const a = k(), r = re(), s = $(), i = x(), o = L(), u = {
     curAudioState: {
       isPlaying: a.isPlaying,
       volume: a.volume,
@@ -511,12 +513,12 @@ const Gt = ({
     },
     audioResetKey: a.audioResetKey,
     ...r,
-    ...i,
     ...s,
+    ...i,
     ...o
-  }, d = (m = (l = s.interfacePlacement) == null ? void 0 : l.customComponentsArea) == null ? void 0 : m[t];
+  }, d = (m = (l = i.interfacePlacement) == null ? void 0 : l.customComponentsArea) == null ? void 0 : m[t];
   return /* @__PURE__ */ c(
-    _.Item,
+    M.Item,
     {
       UNSAFE_className: "rmap-custom-component",
       gridArea: d,
@@ -533,7 +535,7 @@ const zt = () => {
     repeatType: n,
     audioResetKey: a,
     playbackRate: r
-  } = k(), { currentTime: i, seekRequestKey: s } = re(), { elementRefs: o } = L(), u = A(b), d = E(
+  } = k(), { currentTime: s, seekRequestKey: i } = re(), { elementRefs: o } = L(), u = E(w), d = g(
     (y) => {
       if (y.currentTarget.readyState === 0) return;
       const T = y.currentTarget.currentTime;
@@ -543,7 +545,7 @@ const zt = () => {
       });
     },
     [u]
-  ), l = E(() => {
+  ), l = g(() => {
     if (o != null && o.audioEl) {
       if (n === "ONE") {
         Fe(() => {
@@ -553,12 +555,12 @@ const zt = () => {
       }
       u({ type: "NEXT_AUDIO" });
     }
-  }, [u, n, o == null ? void 0 : o.audioEl]), m = E(
+  }, [u, n, o == null ? void 0 : o.audioEl]), m = g(
     (y) => {
       t != null && (y.volume = t), r != null && (y.playbackRate = r);
     },
     [t, r]
-  ), p = E(
+  ), p = g(
     (y) => {
       const { duration: T } = y.currentTarget;
       m(y.currentTarget), u({
@@ -567,8 +569,8 @@ const zt = () => {
       });
     },
     [u, m]
-  ), v = S(!1);
-  P(() => {
+  ), v = P(!1);
+  A(() => {
     if (o != null && o.audioEl) {
       if (!v.current) {
         v.current = !0;
@@ -576,32 +578,32 @@ const zt = () => {
       }
       o.audioEl.currentTime = 0;
     }
-  }, [a, o == null ? void 0 : o.audioEl]), P(() => {
+  }, [a, o == null ? void 0 : o.audioEl]), A(() => {
     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, u, a]), P(() => {
+  }, [o == null ? void 0 : o.audioEl, e, u, a]), A(() => {
     !(o != null && o.audioEl) || t == null || (o.audioEl.volume = t);
-  }, [o == null ? void 0 : o.audioEl, t]), P(() => {
+  }, [o == null ? void 0 : o.audioEl, t]), A(() => {
     !(o != null && o.audioEl) || r == null || (o.audioEl.playbackRate = r);
   }, [o == null ? void 0 : o.audioEl, r]);
-  const f = S(0);
-  return P(() => {
-    if (s === f.current) return;
-    f.current = s;
+  const f = P(0);
+  return A(() => {
+    if (i === f.current) return;
+    f.current = i;
     const y = o == null ? void 0 : o.audioEl;
-    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);
+    if (!y || s == null) return;
+    y.currentTime = s;
+    const T = o == null ? void 0 : o.waveformInst, h = y.duration, S = Number.isFinite(h) && h > 0;
+    if (!T || !S) return;
+    const D = s / h, j = Math.min(1, Math.max(0, D));
+    T.seekTo(j);
   }, [
-    s,
     i,
+    s,
     o == null ? void 0 : o.audioEl,
     o == null ? void 0 : o.waveformInst
   ]), {
@@ -610,19 +612,19 @@ const zt = () => {
     onLoadedMetadata: p
   };
 }, Ye = te.memo(({ audioRef: e }) => {
-  const t = S(null), { muted: n } = k(), { curPlayId: a, playList: r } = $(), i = Kt(), s = A(b), o = r.find(
+  const t = P(null), { muted: n } = k(), { curPlayId: a, playList: r } = $(), s = Kt(), i = E(w), o = r.find(
     (d) => d.id === a
   ), u = zt();
-  return P(() => {
-    t.current && (s({
+  return A(() => {
+    t.current && (i({
       type: "SET_ELEMENT_REFS",
       elementRefs: { audioEl: t.current }
     }), e && (e.current = t.current));
-  }, [s, e]), /* @__PURE__ */ c(
+  }, [i, e]), /* @__PURE__ */ c(
     "audio",
     {
       id: "rm-audio-player-audio",
-      ...i,
+      ...s,
       muted: n,
       ref: t,
       src: o == null ? void 0 : o.src,
@@ -633,8 +635,8 @@ const zt = () => {
 Ye.displayName = "Audio";
 function B(e, t) {
   var a, r;
-  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 { interfacePlacement: n } = x();
+  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]) ?? pe.templateArea[e];
 }
 const q = Pe(({ className: e, type: t = "button", ...n }, a) => /* @__PURE__ */ c(
   "button",
@@ -690,7 +692,7 @@ const ke = (e) => (
   )
 ), qe = (e, t = "0 0 16 16") => (
   // eslint-disable-next-line react/display-name
-  ({ size: n = "1em", color: a, style: r, ...i }) => /* @__PURE__ */ c(
+  ({ size: n = "1em", color: a, style: r, ...s }) => /* @__PURE__ */ c(
     "svg",
     {
       "aria-hidden": "true",
@@ -704,7 +706,7 @@ const ke = (e) => (
       color: a,
       style: a ? { color: a, ...r } : r,
       xmlns: "http://www.w3.org/2000/svg",
-      ...i,
+      ...s,
       dangerouslySetInnerHTML: { __html: e }
     }
   )
@@ -748,16 +750,16 @@ 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"/>'
 );
 ot.displayName = "TbVolume3";
-const it = qe(
+const st = 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"/>'
 );
-it.displayName = "ImPrevious";
-const st = qe(
+st.displayName = "ImPrevious";
+const it = 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"/>'
 );
-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);
+it.displayName = "ImNext";
+const _ = ({ render: e, customIcon: t }) => /* @__PURE__ */ c(G, { children: t ?? e }), Wt = z(function() {
+  const { isPlaying: t } = k(), { customIcons: n } = L(), a = E(w);
   return /* @__PURE__ */ c(
     q,
     {
@@ -767,16 +769,16 @@ const D = ({ render: e, customIcon: t }) => /* @__PURE__ */ c(G, { children: t ?
       className: "rmap-play-btn",
       "data-testid": "play-btn",
       children: t ? /* @__PURE__ */ c(
-        D,
+        _,
         {
           render: /* @__PURE__ */ c(Qe, {}),
           customIcon: n == null ? void 0 : n.pause
         }
-      ) : /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(Xe, {}), customIcon: n == null ? void 0 : n.play })
+      ) : /* @__PURE__ */ c(_, { render: /* @__PURE__ */ c(Xe, {}), customIcon: n == null ? void 0 : n.play })
     }
   );
 }), jt = z(function({ isVisible: t }) {
-  const { customIcons: n, elementRefs: a } = L(), r = A(b);
+  const { customIcons: n, elementRefs: a } = L(), r = E(w);
   return t ? /* @__PURE__ */ c(
     q,
     {
@@ -784,16 +786,16 @@ const D = ({ render: e, customIcon: t }) => /* @__PURE__ */ c(G, { children: t ?
       "aria-label": "Previous track",
       onClick: () => {
         var o;
-        const s = ((o = a == null ? void 0 : a.audioEl) == null ? void 0 : o.currentTime) ?? 0;
-        r({ type: "PREV_AUDIO", currentTime: s });
+        const i = ((o = a == null ? void 0 : a.audioEl) == null ? void 0 : o.currentTime) ?? 0;
+        r({ type: "PREV_AUDIO", currentTime: i });
       },
       className: "rmap-prev-btn",
       "data-testid": "prev-btn",
-      children: /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(it, {}), customIcon: n == null ? void 0 : n.prev })
+      children: /* @__PURE__ */ c(_, { render: /* @__PURE__ */ c(st, {}), customIcon: n == null ? void 0 : n.prev })
     }
   ) : null;
 }), Yt = z(function({ isVisible: t }) {
-  const { customIcons: n } = L(), a = A(b);
+  const { customIcons: n } = L(), a = E(w);
   return t ? /* @__PURE__ */ c(
     q,
     {
@@ -804,7 +806,7 @@ const D = ({ render: e, customIcon: t }) => /* @__PURE__ */ c(G, { children: t ?
       },
       className: "rmap-next-btn",
       "data-testid": "next-btn",
-      children: /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(st, {}), customIcon: n == null ? void 0 : n.next })
+      children: /* @__PURE__ */ c(_, { render: /* @__PURE__ */ c(it, {}), customIcon: n == null ? void 0 : n.next })
     }
   ) : null;
 }), ct = ({
@@ -812,8 +814,8 @@ const D = ({ render: e, customIcon: t }) => /* @__PURE__ */ c(G, { children: t ?
   visible: t,
   ...n
 }) => {
-  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(
+  const { activeUI: a } = x(), r = !!(a.prevNnext ?? a.all), s = B("playButton", e);
+  return /* @__PURE__ */ c(M.Item, { gridArea: s, visible: t ?? !0, ...n, children: /* @__PURE__ */ b(
     "div",
     {
       className: "rmap-ctrl-btn-wrapper",
@@ -838,21 +840,21 @@ const D = ({ render: e, customIcon: t }) => /* @__PURE__ */ c(G, { children: t ?
   SHUFFLE: "ALL"
 }, lt = z(
   function({ gridArea: t, visible: n, ...a }) {
-    const { repeatType: r } = k(), { customIcons: i } = L(), s = A(
-      b
+    const { repeatType: r } = k(), { customIcons: s } = L(), i = E(
+      w
     ), o = () => {
-      s({
+      i({
         type: "SET_REPEAT_TYPE",
         repeatType: Xt[r]
       });
     }, u = B("repeatType", t);
     return /* @__PURE__ */ c(
-      _.Item,
+      M.Item,
       {
         gridArea: u,
         visible: n ?? !0,
         ...a,
-        children: /* @__PURE__ */ w(
+        children: /* @__PURE__ */ b(
           q,
           {
             type: "button",
@@ -862,26 +864,26 @@ const D = ({ render: e, customIcon: t }) => /* @__PURE__ */ c(G, { children: t ?
             "data-testid": "repeat-btn",
             "data-repeattype": r,
             children: [
-              r === "ALL" && /* @__PURE__ */ c(D, { render: /* @__PURE__ */ c(Ze, {}), customIcon: i == null ? void 0 : i.repeatAll }),
+              r === "ALL" && /* @__PURE__ */ c(_, { render: /* @__PURE__ */ c(Ze, {}), customIcon: s == null ? void 0 : s.repeatAll }),
               r === "ONE" && /* @__PURE__ */ c(
-                D,
+                _,
                 {
                   render: /* @__PURE__ */ c(et, {}),
-                  customIcon: i == null ? void 0 : i.repeatOne
+                  customIcon: s == null ? void 0 : s.repeatOne
                 }
               ),
               r === "NONE" && /* @__PURE__ */ c(
-                D,
+                _,
                 {
                   render: /* @__PURE__ */ c(tt, {}),
-                  customIcon: i == null ? void 0 : i.repeatNone
+                  customIcon: s == null ? void 0 : s.repeatNone
                 }
               ),
               r === "SHUFFLE" && /* @__PURE__ */ c(
-                D,
+                _,
                 {
                   render: /* @__PURE__ */ c(rt, {}),
-                  customIcon: i == null ? void 0 : i.repeatShuffle
+                  customIcon: s == null ? void 0 : s.repeatShuffle
                 }
               )
             ]
@@ -891,22 +893,22 @@ const D = ({ render: e, customIcon: t }) => /* @__PURE__ */ c(G, { children: t ?
     );
   }
 ), 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;
+  var i;
+  const { volume: e, muted: t } = k(), { customIcons: n, elementRefs: a } = L(), r = e ?? ((i = a == null ? void 0 : a.audioEl) == null ? void 0 : i.volume) ?? 0, s = r > 0 && r <= 0.5;
   return t || r === 0 ? /* @__PURE__ */ c(
-    D,
+    _,
     {
       render: /* @__PURE__ */ c(ot, { ...Te }),
       customIcon: n == null ? void 0 : n.volumeMuted
     }
-  ) : i ? /* @__PURE__ */ c(
-    D,
+  ) : s ? /* @__PURE__ */ c(
+    _,
     {
       render: /* @__PURE__ */ c(nt, { ...Te }),
       customIcon: n == null ? void 0 : n.volumeHalf
     }
   ) : /* @__PURE__ */ c(
-    D,
+    _,
     {
       render: /* @__PURE__ */ c(at, { ...Te }),
       customIcon: n == null ? void 0 : n.volumeFull
@@ -914,13 +916,13 @@ const D = ({ render: e, customIcon: t }) => /* @__PURE__ */ c(G, { children: t ?
   );
 });
 ut.displayName = "VolumeIcon";
-const ie = K(null);
-ie.displayName = "DrawerContext";
+const se = K(null);
+se.displayName = "DrawerContext";
 const dt = (e, t) => {
-  P(() => {
+  A(() => {
     const n = (a) => {
-      const r = e.current, { target: i } = a;
-      !a || !r || r.contains(i) || t(a);
+      const r = e.current, { target: s } = a;
+      !a || !r || r.contains(s) || t(a);
     };
     return document.addEventListener("click", n), () => document.removeEventListener("click", n);
   }, [e, t]);
@@ -930,51 +932,51 @@ const dt = (e, t) => {
   children: n,
   isOpen: a,
   onOpenChange: r,
-  initialOpen: i
+  initialOpen: s
 }) => {
-  const s = S(null), [o, u] = te.Children.toArray(n), [d, l] = N(
-    a !== void 0 ? a : i ?? !1
+  const i = P(null), [o, u] = te.Children.toArray(n), [d, l] = N(
+    a !== void 0 ? a : s ?? !1
   ), m = $e();
-  dt(s, () => {
+  dt(i, () => {
     e && (l(!1), r && r(!1));
-  }), P(() => {
+  }), A(() => {
     a !== void 0 && l(a);
   }, [a]);
-  const p = x(
+  const p = C(
     () => ({ isOpen: d, setIsOpen: l, onOpenChange: r, drawerId: m }),
     [d, l, r, m]
   );
-  return /* @__PURE__ */ c("div", { className: "rmap-drawer-container", ref: s, children: /* @__PURE__ */ c(ie.Provider, { value: p, children: /* @__PURE__ */ w(G, { children: [
+  return /* @__PURE__ */ c("div", { className: "rmap-drawer-container", ref: i, children: /* @__PURE__ */ c(se.Provider, { value: p, children: /* @__PURE__ */ b(G, { children: [
     t === "top" && u,
     o,
     t === "bottom" && u
   ] }) }) });
-}, pt = typeof window < "u", ge = pt ? Mt : P, Ce = ({
+}, pt = typeof window < "u", ge = pt ? Mt : A, Ce = ({
   visible: e,
   name: t,
   leaveTime: n,
   enterTime: a,
   clearTime: r,
-  onExited: i,
-  onEntered: s,
+  onExited: s,
+  onEntered: i,
   children: o
 }) => {
-  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);
+  const [u, d] = N(""), [l, m] = N(!1), p = P(i), v = P(s), f = P(t), y = P(a), T = P(n), h = P(r);
   return ge(() => {
-    p.current = s, v.current = i, f.current = t, y.current = a, T.current = n, h.current = r;
+    p.current = i, v.current = s, 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, ae;
+    const S = e ? "enter" : "leave", D = f.current, j = e ? y.current : T.current;
+    e && !l && m(!0), d(`${D}-${S}`);
+    const ce = setTimeout(() => {
+      var le, ae;
       d(
-        `${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);
+        `${D}-${S} ${D}-${S}-active`
+      ), S === "leave" ? (le = v.current) == null || le.call(v) : (ae = p.current) == null || ae.call(p);
+    }, j), R = setTimeout(() => {
+      e || (d(D), m(!1));
+    }, j + h.current);
     return () => {
-      clearTimeout(se), clearTimeout(R);
+      clearTimeout(ce), clearTimeout(R);
     };
   }, [e, l]), l ? _t(o, {
     className: `${o.props.className} ${u}`
@@ -984,39 +986,39 @@ const dt = (e, t) => {
   isWithAnimation: t = !0,
   "aria-label": n = "Dialog"
 }) => {
-  const { isOpen: a, setIsOpen: r, onOpenChange: i, drawerId: s } = A(ie), o = S(null), u = S(null), d = E(
+  const { isOpen: a, setIsOpen: r, onOpenChange: s, drawerId: i } = E(se), o = P(null), u = P(null), d = g(
     () => {
       var y;
       return (y = o.current) == null ? void 0 : y.querySelectorAll(Qt);
     },
     []
-  ), l = E(() => {
+  ), l = g(() => {
     var y, T;
     (T = (y = d()) == null ? void 0 : y[0]) == null || T.focus();
-  }, [d]), m = E(() => {
+  }, [d]), m = g(() => {
     u.current = document.activeElement, l();
-  }, [l]), p = E(() => {
+  }, [l]), p = g(() => {
     var y;
     (y = u.current) == null || y.focus();
   }, []);
-  P(() => {
+  A(() => {
     var y;
     a && !t ? (u.current = document.activeElement, l()) : !a && !t && ((y = u.current) == null || y.focus());
   }, [a, t, l]);
-  const v = E(
+  const v = g(
     (y) => {
       if (y.key === "Escape") {
-        r(!1), i && i(!1);
+        r(!1), s && s(!1);
         return;
       }
       if (y.key === "Tab") {
         const T = d();
         if (!T || T.length === 0) return;
-        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());
+        const h = T[0], S = T[T.length - 1];
+        y.shiftKey ? document.activeElement === h && (y.preventDefault(), S.focus()) : document.activeElement === S && (y.preventDefault(), h.focus());
       }
     },
-    [r, i, d]
+    [r, s, d]
   ), f = /* @__PURE__ */ c(
     "div",
     {
@@ -1025,7 +1027,7 @@ const dt = (e, t) => {
       role: "dialog",
       "aria-modal": "true",
       "aria-label": n,
-      id: s,
+      id: i,
       onKeyDown: v,
       children: e
     }
@@ -1048,17 +1050,17 @@ const dt = (e, t) => {
   "aria-label": t,
   "data-testid": n
 }) => {
-  const { isOpen: a, setIsOpen: r, onOpenChange: i, drawerId: s } = A(ie), o = E(() => {
+  const { isOpen: a, setIsOpen: r, onOpenChange: s, drawerId: i } = E(se), o = g(() => {
     const u = !a;
-    r(u), i == null || i(u);
-  }, [a, r, i]);
+    r(u), s == null || s(u);
+  }, [a, r, s]);
   return /* @__PURE__ */ c(
     q,
     {
       className: "rmap-drawer-trigger",
       type: "button",
       "aria-expanded": a,
-      "aria-controls": s,
+      "aria-controls": i,
       "aria-label": t,
       "data-testid": n,
       onClick: o,
@@ -1074,8 +1076,8 @@ const Ee = ({ children: e }) => /* @__PURE__ */ c("ul", { className: "rmap-sorta
   listData: n,
   draggable: a = !0,
   onDragStart: r,
-  onDragOver: i,
-  onDrop: s,
+  onDragOver: s,
+  onDrop: i,
   onReorder: o,
   onClick: u
 }) => {
@@ -1134,7 +1136,7 @@ const Ee = ({ children: e }) => /* @__PURE__ */ c("ul", { className: "rmap-sorta
       l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
     },
     onDragOver: (l) => {
-      l.preventDefault(), l.stopPropagation(), i == null || i(l);
+      l.preventDefault(), l.stopPropagation(), s == null || s(l);
     },
     onDrop: (l) => {
       l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
@@ -1145,7 +1147,7 @@ const Ee = ({ children: e }) => /* @__PURE__ */ c("ul", { className: "rmap-sorta
         p,
         ...m.slice(e, m.length)
       ].map((f, y) => ({ ...f, index: y }));
-      s == null || s(l, v);
+      i == null || i(l, v);
     },
     onClick: (l) => {
       l.stopPropagation(), u == null || u(l);
@@ -1170,7 +1172,7 @@ const rr = z(function({
       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: [
+      children: /* @__PURE__ */ b("div", { className: "rmap-playlist-item-contents", children: [
         /* @__PURE__ */ c("div", { className: "rmap-playlist-album-cover", children: t.img && /* @__PURE__ */ c(
           "img",
           {
@@ -1179,7 +1181,7 @@ const rr = z(function({
             style: a == null ? void 0 : a.listThumbnail
           }
         ) }),
-        /* @__PURE__ */ w("div", { className: "rmap-playlist-album-info", children: [
+        /* @__PURE__ */ b("div", { className: "rmap-playlist-album-info", children: [
           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 })
@@ -1190,7 +1192,7 @@ const rr = z(function({
 }), ar = ({
   setIsOpen: e
 }) => {
-  const { playList: t } = $(), { activeUI: n } = M(), a = A(b), [r, i] = N(0), s = E(
+  const { playList: t } = $(), { activeUI: n } = x(), a = E(w), [r, s] = N(0), i = g(
     (o) => {
       a({
         type: "SET_CURRENT_AUDIO",
@@ -1208,7 +1210,7 @@ const rr = z(function({
     sortableItemEventProps: {
       draggable: n.playList !== "unSortable",
       dragStartIdx: r,
-      onDragStart: (o) => i(o),
+      onDragStart: (o) => s(o),
       onDrop: (o, u) => a({
         type: "UPDATE_PLAY_LIST",
         playList: u
@@ -1217,17 +1219,17 @@ const rr = z(function({
         type: "UPDATE_PLAY_LIST",
         playList: o
       }),
-      onClick: (o) => s(o)
+      onClick: (o) => i(o)
     }
   };
 }, nr = () => {
-  const { playList: e } = $(), { isOpen: t, setIsOpen: n } = A(ie), a = he(xe), r = he(Me), { cssTransitionEventProps: i, sortableItemEventProps: s } = ar({
+  const { playList: e } = $(), { isOpen: t, setIsOpen: n } = E(se), a = he(xe), r = he(Me), { cssTransitionEventProps: s, sortableItemEventProps: i } = ar({
     setIsOpen: n
   }), {
     onClick: o,
     onDragStart: u,
     ...d
-  } = s;
+  } = i;
   if (!a) return /* @__PURE__ */ c(G, {});
   const l = e.length === 0;
   return l && !r ? /* @__PURE__ */ c(G, {}) : Rt.createPortal(
@@ -1239,7 +1241,7 @@ const rr = z(function({
         enterTime: 20,
         leaveTime: 20,
         clearTime: 300,
-        ...i,
+        ...s,
         children: /* @__PURE__ */ c("div", { className: "rmap-playlist-container", children: l ? r : /* @__PURE__ */ c(Ee, { children: e.map((m, p) => /* @__PURE__ */ c(
           Ee.Item,
           {
@@ -1259,7 +1261,7 @@ const rr = z(function({
 }, or = () => {
   const { customIcons: e } = L();
   return /* @__PURE__ */ c(
-    D,
+    _,
     {
       render: /* @__PURE__ */ c(Je, { size: "100%" }),
       customIcon: e == null ? void 0 : e.playList
@@ -1271,8 +1273,8 @@ const rr = z(function({
   visible: n,
   ...a
 }) => {
-  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: [
+  const { playListExpanded: r } = x(), s = e ?? r, i = B("playList", t);
+  return /* @__PURE__ */ c(M.Item, { gridArea: i, visible: n ?? !0, ...a, children: /* @__PURE__ */ b(oe, { initialOpen: s, children: [
     /* @__PURE__ */ c(
       oe.Trigger,
       {
@@ -1286,24 +1288,24 @@ const rr = z(function({
 }, ee = (e) => {
   const t = `${Math.floor(e / 60)}`.padStart(2, "0"), n = `${Math.floor(e % 60)}`.padStart(2, "0");
   return `${t}:${n}`;
-}, pe = (e, t, n = 0) => {
+}, me = (e, t, n = 0) => {
   if (!t) return n;
   const a = e / t;
   return isFinite(a) ? a : n;
 }, yt = () => {
-  const { isLoadedMetaData: e } = k(), { elementRefs: t } = L(), [n, a] = N(!1), r = E(
-    (i) => {
+  const { isLoadedMetaData: e } = k(), { elementRefs: t } = L(), [n, a] = N(!1), r = g(
+    (s) => {
       if (!(t != null && t.audioEl) || !e) return;
-      const { clientX: s } = i, { clientWidth: o } = i.currentTarget, u = i.currentTarget.getBoundingClientRect(), d = s - u.x, l = pe(d, o) * t.audioEl.duration;
+      const { clientX: i } = s, { clientWidth: o } = s.currentTarget, u = s.currentTarget.getBoundingClientRect(), d = i - u.x, l = me(d, o) * t.audioEl.duration;
       t.audioEl.currentTime = l;
     },
     [e, t == null ? void 0 : t.audioEl]
   );
-  return P(() => {
+  return A(() => {
     if (!n) return;
-    const i = (s) => s.preventDefault();
-    return document.addEventListener("selectstart", i), () => {
-      document.removeEventListener("selectstart", i);
+    const s = (i) => i.preventDefault();
+    return document.addEventListener("selectstart", s), () => {
+      document.removeEventListener("selectstart", s);
     };
   }, [n]), {
     onMouseDown: () => a(!0),
@@ -1314,34 +1316,34 @@ const rr = z(function({
   };
 }, vt = (e) => {
   const { isLoadedMetaData: t } = k(), { elementRefs: n } = L();
-  return E(
+  return g(
     (a) => {
       if (!(n != null && n.audioEl) || !t) return;
       const r = n.audioEl;
-      let i = null;
+      let s = null;
       switch (a.key) {
         case "ArrowRight":
         case "ArrowUp":
-          a.preventDefault(), i = Math.min(r.currentTime + 5, r.duration);
+          a.preventDefault(), s = Math.min(r.currentTime + 5, r.duration);
           break;
         case "ArrowLeft":
         case "ArrowDown":
-          a.preventDefault(), i = Math.max(r.currentTime - 5, 0);
+          a.preventDefault(), s = Math.max(r.currentTime - 5, 0);
           break;
         case "Home":
-          a.preventDefault(), i = 0;
+          a.preventDefault(), s = 0;
           break;
         case "End":
-          a.preventDefault(), i = r.duration;
+          a.preventDefault(), s = r.duration;
           break;
       }
-      i !== null && isFinite(r.duration) && (r.currentTime = i, e == null || e(i, r.duration));
+      s !== null && isFinite(r.duration) && (r.currentTime = s, e == null || e(s, r.duration));
     },
     [n == null ? void 0 : n.audioEl, t, e]
   );
-}, ir = () => {
-  const { currentTime: e, duration: t } = re(), n = S(null), [a, r] = N(0);
-  P(() => {
+}, sr = () => {
+  const { currentTime: e, duration: t } = re(), n = P(null), [a, r] = N(0);
+  A(() => {
     const d = n.current;
     if (!d) return;
     r(d.offsetWidth);
@@ -1350,8 +1352,8 @@ const rr = z(function({
     });
     return l.observe(d), () => l.disconnect();
   }, []);
-  const i = pe(e, t), s = yt(), o = vt(), u = i * a;
-  return /* @__PURE__ */ w(
+  const s = me(e, t), i = yt(), o = vt(), u = s * a;
+  return /* @__PURE__ */ b(
     "div",
     {
       ref: n,
@@ -1362,18 +1364,18 @@ const rr = z(function({
       "aria-label": "Seek",
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuenow": Math.round(i * 100),
+      "aria-valuenow": Math.round(s * 100),
       "aria-valuetext": `${ee(
         e
       )} of ${ee(t)}`,
       onKeyDown: o,
-      ...s,
+      ...i,
       children: [
         /* @__PURE__ */ c("div", { className: "rmap-progress-bar", children: /* @__PURE__ */ c(
           "div",
           {
             className: "rmap-progress-fill",
-            style: { transform: `scaleX(${i})` }
+            style: { transform: `scaleX(${s})` }
           }
         ) }),
         /* @__PURE__ */ c(
@@ -1388,20 +1390,20 @@ const rr = z(function({
       ]
     }
   );
-}, sr = (e, t) => {
-  const n = S(), a = E(() => {
+}, ir = (e, t) => {
+  const n = P(), a = g(() => {
     const r = document.getElementsByClassName("rmap-player-provider")[0];
     if (!r) return;
-    const i = Object.entries(
+    const s = Object.entries(
       e
     ).reduce(
-      (s, [o, u]) => ({
-        ...s,
+      (i, [o, u]) => ({
+        ...i,
         [o]: window.getComputedStyle(r).getPropertyValue(`${u}`)
       }),
       {}
     );
-    n.current = i;
+    n.current = s;
   }, [e]);
   return ge(() => {
     a();
@@ -1417,15 +1419,15 @@ const rr = z(function({
     for (const [n, a] of Object.entries(t.mediaListeners))
       t.media.removeEventListener(n, a);
 }, 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(() => {
+  const t = E(w), { isPlaying: n } = k(), { curPlayId: a } = $(), { elementRefs: r } = L(), { colorScheme: s } = x(), i = ir(cr, s), o = P(r == null ? void 0 : r.waveformInst);
+  o.current = r == null ? void 0 : r.waveformInst, A(() => {
     var v, f;
-    if (r != null && r.waveformInst || !((v = s.current) != null && v.progressColor) || !((f = s.current) != null && f.waveColor))
+    if (r != null && r.waveformInst || !((v = i.current) != null && v.progressColor) || !((f = i.current) != null && f.waveColor))
       return;
     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)) {
+      var h, S;
+      if (p || !e.current || !((h = i.current) != null && h.progressColor) || !((S = i.current) != null && S.waveColor)) {
         console.error("[useWaveSurfer] missing required dependencies");
         return;
       }
@@ -1436,17 +1438,17 @@ const rr = z(function({
           cursorWidth: 2,
           container: e.current,
           height: 80,
-          progressColor: s.current.progressColor,
+          progressColor: i.current.progressColor,
           responsive: !0,
-          waveColor: s.current.waveColor,
+          waveColor: i.current.waveColor,
           cursorColor: "var(--rm-audio-player-waveform-cursor)",
           backend: "MediaElement",
           removeMediaElementOnDestroy: !1
         });
-      } catch (C) {
+      } catch (D) {
         console.error(
           "[useWaveSurfer] failed to create WaveSurfer instance",
-          C
+          D
         );
         return;
       }
@@ -1459,9 +1461,9 @@ const rr = z(function({
     }), () => {
       p = !0;
     };
-  }, [r == null ? void 0 : r.waveformInst, t, s]);
-  const u = S(a);
-  P(() => {
+  }, [r == null ? void 0 : r.waveformInst, t, i]);
+  const u = P(a);
+  A(() => {
     if (!(r != null && r.audioEl) || !(r != null && r.waveformInst)) return;
     const p = r.audioEl;
     if (!p.getAttribute("src")) return;
@@ -1475,7 +1477,7 @@ const rr = z(function({
     return v.on("ready", h), () => {
       v.un("ready", h);
     };
-  }, [a, r == null ? void 0 : r.audioEl, r == null ? void 0 : r.waveformInst]), P(() => {
+  }, [a, r == null ? void 0 : r.audioEl, r == null ? void 0 : r.waveformInst]), A(() => {
     if (!e.current || !(r != null && r.waveformInst)) return;
     const p = () => {
       var f, y;
@@ -1484,7 +1486,7 @@ const rr = z(function({
     return v.observe(e.current), () => {
       v.disconnect();
     };
-  }, [r == null ? void 0 : r.waveformInst, e]), P(
+  }, [r == null ? void 0 : r.waveformInst, e]), A(
     () => () => {
       var v, f;
       const p = (v = e.current) == null ? void 0 : v.querySelector("wave");
@@ -1500,24 +1502,24 @@ const rr = z(function({
     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;
+    const v = (y = i.current) == null ? void 0 : y.waveColor, f = (T = i.current) == null ? void 0 : T.progressColor;
     v && p.setWaveColor(v), f && p.setProgressColor(f);
-  }, l = S(d);
+  }, l = P(d);
   l.current = d;
-  const m = S(i);
-  P(() => {
-    m.current !== i && (m.current = i, l.current());
-  }, [i, r == null ? void 0 : r.waveformInst]), P(() => {
+  const m = P(s);
+  A(() => {
+    m.current !== s && (m.current = s, l.current());
+  }, [s, r == null ? void 0 : r.waveformInst]), A(() => {
     const p = () => l.current(), v = window.matchMedia("(prefers-color-scheme: dark)");
     return v.addEventListener("change", p), () => v.removeEventListener("change", p);
   }, []);
 }, dr = ({ isActive: e }) => {
   var u, d, l, m;
-  const t = S(null), { isLoadedMetaData: n, isPlaying: a } = k(), { elementRefs: r } = L();
-  ur(t), P(() => {
+  const t = P(null), { isLoadedMetaData: n, isPlaying: a } = k(), { elementRefs: r } = L();
+  ur(t), A(() => {
     if (!e || !(r != null && r.waveformInst) || !(r != null && r.audioEl) || !n || a)
       return;
-    const p = pe(
+    const p = me(
       r.audioEl.currentTime,
       r.audioEl.duration
     );
@@ -1529,13 +1531,13 @@ const rr = z(function({
     r == null ? void 0 : r.audioEl,
     a
   ]);
-  const i = yt(), s = E(
+  const s = yt(), i = g(
     (p, v) => {
       var f;
-      v && ((f = r == null ? void 0 : r.waveformInst) == null || f.seekTo(pe(p, v)));
+      v && ((f = r == null ? void 0 : r.waveformInst) == null || f.seekTo(me(p, v)));
     },
     [r == null ? void 0 : r.waveformInst]
-  ), o = vt(s);
+  ), o = vt(i);
   return /* @__PURE__ */ c("div", { className: "rmap-waveform-wrapper", "data-active": e, children: /* @__PURE__ */ c(
     "div",
     {
@@ -1553,7 +1555,7 @@ const rr = z(function({
         ((l = r == null ? void 0 : r.audioEl) == null ? void 0 : l.currentTime) ?? 0
       )} of ${ee(((m = r == null ? void 0 : r.audioEl) == null ? void 0 : m.duration) ?? 0)}`,
       onKeyDown: o,
-      ...i
+      ...s
     }
   ) });
 }, ft = ({
@@ -1563,26 +1565,26 @@ const rr = z(function({
   width: a,
   ...r
 }) => {
-  const { activeUI: i } = M(), s = n ?? (i.progress === "waveform" ? "waveform" : "bar"), o = s === "waveform", u = s === "bar", [d, l] = N(o);
-  P(() => {
+  const { activeUI: s } = x(), i = n ?? (s.progress === "waveform" ? "waveform" : "bar"), o = i === "waveform", u = i === "bar", [d, l] = N(o);
+  A(() => {
     o && !d && l(!0);
   }, [o, d]);
   const m = B("progress", e);
   return /* @__PURE__ */ c(
-    _.Item,
+    M.Item,
     {
       gridArea: m,
       width: a ?? "100%",
       visible: t ?? !0,
       ...r,
-      children: /* @__PURE__ */ w("div", { className: "rmap-progress-container", children: [
+      children: /* @__PURE__ */ b("div", { className: "rmap-progress-container", children: [
         d && /* @__PURE__ */ c(dr, { isActive: o }),
-        u && /* @__PURE__ */ c(ir, {})
+        u && /* @__PURE__ */ c(sr, {})
       ] })
     }
   );
-}, me = K(null);
-me.displayName = "DropdownContext";
+}, ie = K(null);
+ie.displayName = "DropdownContext";
 const Tt = ({
   clickArea: e,
   triggerType: t,
@@ -1590,19 +1592,19 @@ const Tt = ({
   setIsOpen: a,
   onOpenChange: r
 }) => {
-  const i = S(), s = (l) => {
+  const s = P(), i = (l) => {
     const m = () => {
-      clearTimeout(i.current), i.current = void 0;
+      clearTimeout(s.current), s.current = void 0;
     }, p = (v) => {
       a(v), r && r(v), m();
     };
     if (m(), l) {
-      i.current = window.setTimeout(() => p(!0), 100);
+      s.current = window.setTimeout(() => p(!0), 100);
       return;
     }
-    i.current = window.setTimeout(() => p(!1), 100);
+    s.current = window.setTimeout(() => p(!1), 100);
   }, o = (l) => {
-    t === "hover" && s(l);
+    t === "hover" && i(l);
   };
   return {
     onClick: e === "content" ? (l) => {
@@ -1616,50 +1618,50 @@ const Tt = ({
     onFocus: () => o(!0),
     onBlur: () => o(!1)
   };
-}, j = ({
+}, W = ({
   triggerType: e = "click",
   outboundClickActive: t = !0,
   children: n,
   isOpen: a,
   placement: r = "bottom",
-  disabled: i = !1,
-  onOpenChange: s,
+  disabled: s = !1,
+  onOpenChange: i,
   "data-testid": o
 }) => {
-  const u = S(null), [d, l] = te.Children.toArray(n), [m, p] = N(!1), v = Tt({
+  const u = P(null), [d, l] = te.Children.toArray(n), [m, p] = N(!1), v = Tt({
     setIsOpen: p,
     isOpen: m,
     triggerType: e,
     clickArea: "root"
   }), f = $e();
-  dt(u, () => t && p(!1)), P(() => {
+  dt(u, () => t && p(!1)), A(() => {
     a !== void 0 && p(a);
   }, [a]);
-  const y = x(
+  const y = C(
     () => ({
       dropdownRef: u,
       placement: r,
       isOpen: m,
       setIsOpen: p,
-      onOpenChange: s,
+      onOpenChange: i,
       dropdownId: f
     }),
-    [r, m, s, f]
+    [r, m, i, f]
   );
-  return /* @__PURE__ */ c(me.Provider, { value: y, children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ c(ie.Provider, { value: y, children: /* @__PURE__ */ c(
     "div",
     {
       className: "rmap-dropdown-container",
       ref: u,
       "data-testid": o,
       ...v,
-      children: /* @__PURE__ */ w(G, { children: [
+      children: /* @__PURE__ */ b(G, { children: [
         d,
-        !i && l
+        !s && l
       ] })
     }
   ) });
-}, pr = (e, t) => x(() => {
+}, pr = (e, t) => C(() => {
   if (t)
     return {
       position: "absolute",
@@ -1675,12 +1677,12 @@ const Tt = ({
   isWithAnimation: t = !0,
   ...n
 }) => {
-  const { dropdownRef: a, placement: r, isOpen: i, setIsOpen: s, dropdownId: o } = A(me), [u, d] = N(), { onClick: l } = Tt({
-    setIsOpen: s,
-    isOpen: i,
+  const { dropdownRef: a, placement: r, isOpen: s, setIsOpen: i, dropdownId: o } = E(ie), [u, d] = N(), { onClick: l } = Tt({
+    setIsOpen: i,
+    isOpen: s,
     clickArea: "content"
-  }), m = () => s(!1), p = () => s(!0);
-  P(() => {
+  }), m = () => i(!1), p = () => i(!0);
+  A(() => {
     a.current && d({
       width: a.current.offsetWidth,
       height: a.current.offsetHeight
@@ -1699,7 +1701,7 @@ const Tt = ({
   return t ? /* @__PURE__ */ c(
     Ce,
     {
-      visible: i,
+      visible: s,
       name: "rmap-dropdown-content",
       enterTime: 20,
       leaveTime: 60,
@@ -1708,38 +1710,38 @@ const Tt = ({
       onEntered: p,
       children: f
     }
-  ) : i ? f : null;
+  ) : s ? f : null;
 }, ht = Pe(({ children: e, className: t, ...n }, a) => {
-  const { isOpen: r, dropdownId: i } = A(me), s = t ? `rmap-dropdown-trigger ${t}` : "rmap-dropdown-trigger";
+  const { isOpen: r, dropdownId: s } = E(ie), i = t ? `rmap-dropdown-trigger ${t}` : "rmap-dropdown-trigger";
   return /* @__PURE__ */ c(
     q,
     {
-      className: s,
+      className: i,
       type: "button",
       ...n,
       "aria-haspopup": "true",
       "aria-expanded": r,
-      "aria-controls": i,
+      "aria-controls": s,
       ref: a,
       children: e
     }
   );
 });
 ht.displayName = "DropdownTrigger";
-j.Content = mr;
-j.Trigger = ht;
+W.Content = mr;
+W.Trigger = ht;
 const yr = ({
   triggerRef: e,
   initialState: t
 }) => {
-  const { playerPlacement: n } = M(), [a, r] = N(t);
-  return P(() => {
+  const { playerPlacement: n } = x(), [a, r] = N(t);
+  return A(() => {
     if (e.current) {
-      const i = () => e.current.getBoundingClientRect().top < window.innerHeight / 2 ? "bottom" : "top", s = setTimeout(() => {
-        r(i());
+      const s = () => e.current.getBoundingClientRect().top < window.innerHeight / 2 ? "bottom" : "top", i = setTimeout(() => {
+        r(s());
       }, 0);
       return () => {
-        clearTimeout(s);
+        clearTimeout(i);
       };
     }
   }, [n, e]), a;
@@ -1750,14 +1752,14 @@ const yr = ({
   triggerRef: a,
   defaults: r
 }) => {
-  const i = yr({
+  const s = yr({
     triggerRef: a,
     initialState: r.placement
-  }), s = e ?? r.triggerType;
+  }), i = e ?? r.triggerType;
   return {
-    triggerType: s,
-    placement: t ?? n ?? i,
-    contentRole: s === "hover" ? "tooltip" : "dialog"
+    triggerType: i,
+    placement: t ?? n ?? s,
+    contentRole: i === "hover" ? "tooltip" : "dialog"
   };
 }, vr = [
   0.5,
@@ -1767,77 +1769,91 @@ const yr = ({
   1.5,
   1.75,
   2
-], fr = (e) => `${e}×`, _e = z(
+], fr = (e) => `${e}×`, Tr = ({
+  rateOptions: e,
+  playbackRate: t,
+  formatRateLabel: n
+}) => {
+  const a = E(w), { setIsOpen: r } = E(ie), s = g(
+    (i) => {
+      const o = Number(i.currentTarget.dataset.rate);
+      a({ type: "SET_PLAYBACK_RATE", playbackRate: o }), r(!1);
+    },
+    [a, r]
+  );
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Playback speed",
+      className: "rmap-speed-selector-menu",
+      children: e.map((i) => {
+        const o = i === t;
+        return /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": o,
+            className: o ? "rmap-speed-selector-option rmap-speed-selector-option--active" : "rmap-speed-selector-option",
+            "data-testid": "speed-selector-option",
+            "data-rate": i,
+            onClick: s,
+            children: n(i)
+          },
+          i
+        );
+      })
+    }
+  );
+}, _e = z(
   function({
     gridArea: t,
     visible: n,
     options: a,
     formatRate: r,
-    triggerType: i,
-    placement: s,
+    triggerType: s,
+    placement: i,
     ...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,
+    const u = P(null), { playbackRate: d } = k(), { speedSelectorPlacement: l } = x(), m = B("playbackRate", t), p = a ?? vr, v = r ?? fr, { triggerType: f, placement: y } = gt({
+      triggerType: s,
+      placement: i,
+      contextPlacement: l,
       triggerRef: u,
       defaults: { triggerType: "click", placement: "top" }
-    }), h = E(
-      (g) => {
-        l({ type: "SET_PLAYBACK_RATE", playbackRate: g });
-      },
-      [l]
-    );
+    });
     return /* @__PURE__ */ c(
-      _.Item,
+      M.Item,
       {
-        gridArea: p,
+        gridArea: m,
         visible: n ?? !0,
+        padding: "0",
         ...o,
-        children: /* @__PURE__ */ w(
-          j,
+        children: /* @__PURE__ */ b(
+          W,
           {
-            triggerType: y,
-            placement: T,
+            triggerType: f,
+            placement: y,
             "data-testid": "speed-selector-dropdown",
             children: [
               /* @__PURE__ */ c(
-                j.Trigger,
+                W.Trigger,
                 {
                   ref: u,
-                  "aria-label": `Playback speed, currently ${f(
+                  "aria-label": `Playback speed, currently ${v(
                     d
                   )}`,
                   className: "rmap-speed-selector-trigger",
                   "data-testid": "speed-selector-trigger",
-                  children: f(d)
+                  children: v(d)
                 }
               ),
-              /* @__PURE__ */ c(j.Content, { children: /* @__PURE__ */ c(
-                "ul",
+              /* @__PURE__ */ c(W.Content, { children: /* @__PURE__ */ c(
+                Tr,
                 {
-                  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);
-                  })
+                  rateOptions: p,
+                  playbackRate: d,
+                  formatRateLabel: v
                 }
               ) })
             ]
@@ -1848,21 +1864,21 @@ const yr = ({
   }
 );
 _e.displayName = "SpeedSelector";
-const Tr = ({
+const hr = ({
   placement: e
 }) => {
   var m;
-  const t = S(null), { volume: n, muted: a } = k(), { elementRefs: r } = L(), i = A(b), s = E(
+  const t = P(null), { volume: n, muted: a } = k(), { elementRefs: r } = L(), s = E(w), i = g(
     (p) => {
-      p.stopPropagation(), p.preventDefault(), a && i({ type: "SET_MUTED", muted: !1 });
+      p.stopPropagation(), p.preventDefault(), a && s({ type: "SET_MUTED", muted: !1 });
       const { value: v } = p.target, f = parseFloat(v);
-      i({
+      s({
         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(
+    [a, s]
+  ), o = n ?? ((m = r == null ? void 0 : r.audioEl) == null ? void 0 : m.volume) ?? 0, u = o * 100, d = Math.round(u), l = C(
     () => ({
       "--rm-audio-player-volume-value": `${u}%`
     }),
@@ -1883,7 +1899,7 @@ const Tr = ({
           type: "range",
           style: { cursor: "pointer" },
           value: o,
-          onChange: s,
+          onChange: i,
           min: "0",
           max: "1",
           step: "0.01",
@@ -1900,13 +1916,13 @@ const Tr = ({
   placement: a,
   ...r
 }) => {
-  const i = S(null), { muted: s } = k(), o = A(b), u = E(
-    () => o({ type: "SET_MUTED", muted: !s }),
-    [o, s]
+  const s = P(null), { muted: i } = k(), o = E(w), u = g(
+    () => o({ type: "SET_MUTED", muted: !i }),
+    [o, i]
   ), {
     activeUI: { volumeSlider: d },
     volumeSliderPlacement: l
-  } = M(), m = B("volume", e), {
+  } = x(), m = B("volume", e), {
     triggerType: p,
     placement: v,
     contentRole: f
@@ -1914,11 +1930,11 @@ const Tr = ({
     triggerType: n,
     placement: a,
     contextPlacement: l,
-    triggerRef: i,
+    triggerRef: s,
     defaults: { triggerType: "hover", placement: "bottom" }
   });
-  return /* @__PURE__ */ c(_.Item, { gridArea: m, visible: t ?? !0, ...r, children: /* @__PURE__ */ w(
-    j,
+  return /* @__PURE__ */ c(M.Item, { gridArea: m, visible: t ?? !0, ...r, children: /* @__PURE__ */ b(
+    W,
     {
       placement: v,
       triggerType: p,
@@ -1926,25 +1942,25 @@ const Tr = ({
       "data-testid": "volume-dropdown",
       children: [
         /* @__PURE__ */ c(
-          j.Trigger,
+          W.Trigger,
           {
-            ref: i,
-            "aria-label": s ? "Unmute" : "Mute",
-            "aria-pressed": s,
+            ref: s,
+            "aria-label": i ? "Unmute" : "Mute",
+            "aria-pressed": i,
             onClick: u,
             className: "rmap-volume-trigger",
             "data-testid": "volume-trigger-btn",
-            "data-muted": String(s),
+            "data-muted": String(i),
             children: /* @__PURE__ */ c(ut, {})
           }
         ),
-        /* @__PURE__ */ c(j.Content, { role: f, children: /* @__PURE__ */ c(Tr, { placement: v }) })
+        /* @__PURE__ */ c(W.Content, { role: f, children: /* @__PURE__ */ c(hr, { placement: v }) })
       ]
     }
   ) });
-}, hr = () => {
-  const { activeUI: e } = M(), t = (n) => !!(e[n] ?? e.all);
-  return /* @__PURE__ */ w(G, { children: [
+}, gr = () => {
+  const { activeUI: e } = x(), t = (n) => !!(e[n] ?? e.all);
+  return /* @__PURE__ */ b(G, { children: [
     /* @__PURE__ */ c(ft, { visible: t("progress") }),
     /* @__PURE__ */ c(lt, { visible: t("repeatType") }),
     /* @__PURE__ */ c(ct, { visible: t("playButton") }),
@@ -1957,14 +1973,14 @@ const Tr = ({
   visible: n,
   ...a
 }) {
-  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(
+  const { playList: r, curIdx: s } = $(), { coverImgsCss: i } = L(), o = r[s], 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(M.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: i == null ? void 0 : i.artwork }) : /* @__PURE__ */ c(
     "div",
     {
       className: "rmap-artwork-fallback",
       role: "img",
       "aria-label": u,
-      style: s == null ? void 0 : s.artwork,
+      style: i == null ? void 0 : i.artwork,
       children: (o == null ? void 0 : o.name) || "♪"
     }
   ) }) });
@@ -1973,10 +1989,10 @@ const Tr = ({
   visible: n,
   ...a
 }) {
-  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 })
+  const { playList: r, curIdx: s } = $(), i = r[s], o = B("trackInfo", t);
+  return /* @__PURE__ */ c(M.Item, { gridArea: o, visible: n ?? !0, ...a, children: /* @__PURE__ */ c("div", { className: "rmap-track-info-container", children: i != null && i.customTrackInfo ? i.customTrackInfo : /* @__PURE__ */ b(G, { children: [
+    (i == null ? void 0 : i.name) && /* @__PURE__ */ c("span", { className: "title", "data-testid": "track-title", children: i.name }),
+    (i == null ? void 0 : i.writer) && /* @__PURE__ */ c("span", { className: "writer", children: i.writer })
   ] }) }) });
 });
 De.displayName = "TrackInfo";
@@ -1988,7 +2004,7 @@ const Pt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */
     ...a,
     children: n
   }
-), gr = ({ position: e }) => {
+), Er = ({ position: e }) => {
   const { currentTime: t } = re();
   return /* @__PURE__ */ c(Pt, { position: e, className: "rmap-track-time-current", children: /* @__PURE__ */ c(
     "span",
@@ -1998,7 +2014,7 @@ const Pt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */
       children: ee(t)
     }
   ) });
-}, Er = ({ position: e }) => {
+}, Ar = ({ position: e }) => {
   const { duration: t } = re();
   return /* @__PURE__ */ c(
     Pt,
@@ -2009,10 +2025,10 @@ const Pt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */
     }
   );
 }, St = ({ visible: e }) => {
-  const t = B("trackTimeCurrent"), n = B("trackTimeDuration"), a = E(
+  const t = B("trackTimeCurrent"), n = B("trackTimeDuration"), a = g(
     (d) => +d.split(/[^\d]/).join(""),
     []
-  ), r = a(t), i = a(n), s = E(
+  ), r = a(t), s = a(n), i = g(
     (d) => {
       switch (d) {
         case 1:
@@ -2025,17 +2041,17 @@ const Pt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */
     },
     []
   ), o = {
-    current: s(r - i),
-    duration: s(i - r)
+    current: i(r - s),
+    duration: i(s - r)
   }, u = e ?? !0;
-  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 }) })
+  return /* @__PURE__ */ b(G, { children: [
+    /* @__PURE__ */ c(M.Item, { gridArea: t, visible: u, children: /* @__PURE__ */ c(Er, { position: o.current }) }),
+    /* @__PURE__ */ c(M.Item, { gridArea: n, visible: u, children: /* @__PURE__ */ c(Ar, { position: o.duration }) })
   ] });
-}, 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: [
+}, Pr = () => {
+  var r, s, i, o;
+  const { playList: e, curIdx: t } = $(), { activeUI: n } = x(), a = !!(((r = e[t]) == null ? void 0 : r.customTrackInfo) ?? ((s = e[t]) == null ? void 0 : s.writer) ?? ((i = e[t]) == null ? void 0 : i.name)) && !!(n.trackInfo ?? n.all);
+  return /* @__PURE__ */ b(G, { children: [
     /* @__PURE__ */ c(
       At,
       {
@@ -2056,7 +2072,7 @@ const Pt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */
   TrackTime: { displayName: "TrackTime", activeUIKey: "trackTime" },
   SpeedSelector: { displayName: "SpeedSelector", activeUIKey: "playbackRate" }
 };
-function Pr(e, t) {
+function Sr(e, t) {
   const n = e[t];
   return n === !1 ? !1 : n !== void 0 ? !0 : !!e.all;
 }
@@ -2066,53 +2082,53 @@ function Re(e) {
   const n = t.type ?? t;
   return n.displayName || n.name || void 0;
 }
-const Sr = (e, t, n, a) => {
-  const r = x(
+const Ir = (e, t, n, a) => {
+  const r = C(
     () => (a ?? []).map(Re).map(
       (h) => {
-        var g;
-        return h ? (g = Ae[h]) == null ? void 0 : g.activeUIKey : void 0;
+        var S;
+        return h ? (S = Ae[h]) == null ? void 0 : S.activeUIKey : void 0;
       }
     ).filter((h) => h !== void 0),
     [a]
-  ), i = x(
+  ), s = C(
     () => [...r].sort().join(","),
     [r]
-  ), s = E(
-    (h, g, C, W) => {
-      const se = Object.keys(
-        de.templateArea
-      ).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)
+  ), i = g(
+    (h, S, D, j) => {
+      const ce = Object.keys(
+        pe.templateArea
+      ).filter((I) => (I === "trackTimeCurrent" || I === "trackTimeDuration") && h.trackTime === !1 ? !1 : h[I] !== void 0 ? h[I] : !0), R = h.all ? ce : Object.entries(h).filter(([, I]) => I).map(([I]) => I);
+      for (const I of j)
         R.includes(I) || R.push(I);
       (() => {
         R.find((I) => I === "trackTime") && (R.splice(R.indexOf("trackTime"), 1), R.push("trackTimeCurrent"), R.push("trackTimeDuration"));
       })();
       const ae = {
-        ...de.templateArea,
-        ...g
+        ...pe.templateArea,
+        ...S
       }, ye = Object.entries(
         ae
       ).filter(([I]) => R.includes(I));
-      let le = 1;
-      const ue = {}, wt = [
+      let ue = 1;
+      const de = {}, bt = [
         ...ye,
-        ...Object.entries(C || {})
+        ...Object.entries(D || {})
       ].flatMap(([I, U]) => {
         if (U == null) return [];
         const [F, H] = U.split("-"), Y = +F.split("row")[1];
-        return le = Math.max(le, Y), ue[Y] = ue[Y] ? ue[Y] + 1 : 1, [
+        return ue = Math.max(ue, Y), de[Y] = de[Y] ? de[Y] + 1 : 1, [
           {
             key: I,
             row: Y,
             col: +H
           }
         ];
-      }).sort((I, U) => I.col - U.col), ve = Math.max(...Object.values(ue));
+      }).sort((I, U) => I.col - U.col), ve = Math.max(...Object.values(de));
       let Ue;
-      const bt = new Array(le).fill("").map((I, U) => {
+      const wt = new Array(ue).fill("").map((I, U) => {
         let F = "", H;
-        const Y = wt.filter((V) => V.row !== U + 1 ? !1 : (V.key === "progress" && (H = V), !0));
+        const Y = bt.filter((V) => V.row !== U + 1 ? !1 : (V.key === "progress" && (H = V), !0));
         if (H) {
           const V = /* @__PURE__ */ new Map();
           Y.forEach((Q) => V.set(Q.col, Q));
@@ -2127,7 +2143,7 @@ const Sr = (e, t, n, a) => {
           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) => {
+      }), Lt = pt ? window.innerWidth - 100 : 1500, Nt = new Array(ue).fill("").map((I, U) => {
         let F = "";
         for (let H = 0; H < ve; H++) {
           if (Ue === H && U === 0) {
@@ -2138,37 +2154,37 @@ const Sr = (e, t, n, a) => {
         }
         return F.trimStart();
       });
-      return { gridAreas: bt, gridColumns: Nt };
+      return { gridAreas: wt, gridColumns: Nt };
     },
     []
-  ), [o, u] = N(e), [d, l] = N(i), [m, p] = N({
+  ), [o, u] = N(e), [d, l] = N(s), [m, p] = N({
     templateArea: t,
     customComponentsArea: n
   }), [v, f] = N();
   if (!v) {
-    const { gridAreas: h, gridColumns: g } = s(
+    const { gridAreas: h, gridColumns: S } = i(
       o,
       m.templateArea,
       m.customComponentsArea,
       r
     );
-    return f({ gridAreas: h, gridColumns: g }), [h, g];
+    return f({ gridAreas: h, gridColumns: S }), [h, S];
   }
-  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(
+  if (o !== e || d !== s || m.templateArea !== t || m.customComponentsArea !== n) {
+    u(e), l(s), p({ templateArea: t, customComponentsArea: n });
+    const { gridAreas: h, gridColumns: S } = i(
       e,
       t,
       n,
       r
     );
-    f({ gridAreas: h, gridColumns: g });
+    f({ gridAreas: h, gridColumns: S });
   }
   const { gridAreas: y, gridColumns: T } = v;
   return [y, T];
 };
-function Ir(e) {
-  return x(() => {
+function br(e) {
+  return C(() => {
     const t = te.Children.toArray(e).filter(Dt), n = t.find(Be);
     return {
       compoundChildren: t.filter(
@@ -2186,26 +2202,26 @@ function wr(e) {
   const t = e.props;
   return (t == null ? void 0 : t.children) ?? null;
 }
-function br({
+function Lr({
   compoundChildren: e,
   activeUI: t
 }) {
   const n = e.map(Re).filter((a) => !!(a && Ae[a])).sort().join(",");
-  P(() => {
+  A(() => {
     if (process.env.NODE_ENV === "production" || !n) return;
     const a = /* @__PURE__ */ new Set();
     for (const r of n.split(",")) {
-      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.`
+      const s = Ae[r];
+      s && (a.has(s.displayName) || Sr(t, s.activeUIKey) && (a.add(s.displayName), console.warn(
+        `[react-modern-audio-player] Both preset and compound '${s.displayName}' are rendered. Set \`activeUI.${s.activeUIKey}=false\` to replace the preset control.`
       )));
     }
   }, [n, t]);
 }
-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(
+const Nr = ({ children: e }) => {
+  const { interfacePlacement: t, activeUI: n, playListPlacement: a } = x(), { compoundChildren: r, playListEmptyNode: s } = br(e);
+  Lr({ compoundChildren: r, activeUI: n });
+  const [i, o] = Ir(
     n,
     t == null ? void 0 : t.templateArea,
     t == null ? void 0 : t.customComponentsArea,
@@ -2218,45 +2234,60 @@ const Lr = ({ children: e }) => {
       "data-testid": "audio-player",
       role: "region",
       "aria-label": "Audio player",
-      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(
-          _,
+      children: /* @__PURE__ */ c(xe.Provider, { value: u, children: /* @__PURE__ */ b(Me.Provider, { value: s, children: [
+        a === "top" && /* @__PURE__ */ c(
+          "div",
+          {
+            ref: d,
+            className: "rmap-sortable-playlist",
+            "data-testid": "sortable-playlist"
+          }
+        ),
+        /* @__PURE__ */ b(
+          M,
           {
             alignItems: "center",
             justifyContent: "center",
-            areas: s,
+            areas: i,
             minHeight: "30px",
             columns: o,
             UNSAFE_className: "rmap-interface-grid",
+            "data-testid": "interface-grid",
             children: [
-              /* @__PURE__ */ c(Ar, {}),
-              /* @__PURE__ */ c(hr, {}),
+              /* @__PURE__ */ c(Pr, {}),
+              /* @__PURE__ */ c(gr, {}),
               r
             ]
           }
         ),
-        a === "bottom" && /* @__PURE__ */ c("div", { ref: d, className: "rmap-sortable-playlist" })
+        a === "bottom" && /* @__PURE__ */ c(
+          "div",
+          {
+            ref: d,
+            className: "rmap-sortable-playlist",
+            "data-testid": "sortable-playlist"
+          }
+        )
       ] }) })
     }
   );
 }, Z = (e, t) => {
-  const n = S(!1);
-  P(() => {
+  const n = P(!1);
+  A(() => {
     if (n.current)
       return e();
-  }, t), P(() => (n.current = !0, () => {
+  }, t), A(() => (n.current = !0, () => {
     n.current = !1;
   }), []);
-}, Nr = ({
+}, kr = ({
   placement: e = {},
   activeUI: t,
   coverImgsCss: n,
   audioInitialState: a,
   playList: r,
-  customIcons: i
+  customIcons: s
 }) => {
-  const s = A(b);
+  const i = E(w);
   Z(() => {
     const {
       player: o,
@@ -2264,44 +2295,44 @@ const Lr = ({ children: e }) => {
       interface: d,
       volumeSlider: l
     } = e;
-    s({
+    i({
       type: "SET_PLACEMENTS",
       playerPlacement: o,
       playListPlacement: u,
       interfacePlacement: d,
       volumeSliderPlacement: l
     });
-  }, [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({
+  }, [i, e]), Z(() => {
+    t && i({ type: "SET_ACTIVE_UI", activeUI: t });
+  }, [t, i]), Z(() => {
+    n && i({ type: "SET_COVER_IMGS_CSS", coverImgsCss: n });
+  }, [i, n]), Z(() => {
+    a && i({
       type: "SET_INITIAL_STATES",
       audioState: a,
       curPlayId: a.curPlayId
     });
-  }, [a, s]), Z(() => {
-    s({ type: "UPDATE_PLAY_LIST", playList: r });
-  }, [s, r]), Z(() => {
-    i && s({ type: "SET_CUSTOM_ICONS", customIcons: i });
-  }, [i, s]);
-}, kr = ({
+  }, [a, i]), Z(() => {
+    i({ type: "UPDATE_PLAY_LIST", playList: r });
+  }, [i, r]), Z(() => {
+    s && i({ type: "SET_CUSTOM_ICONS", customIcons: s });
+  }, [s, i]);
+}, Cr = ({
   audioRef: e,
   children: t,
   ...n
-}) => (Nr(n), /* @__PURE__ */ w("div", { id: "rm-audio-player", className: "rmap-player-container", children: [
+}) => (kr(n), /* @__PURE__ */ b("div", { id: "rm-audio-player", className: "rmap-player-container", children: [
   /* @__PURE__ */ c(Ye, { audioRef: e }),
-  /* @__PURE__ */ c(Lr, { children: t })
+  /* @__PURE__ */ c(Nr, { children: t })
 ] }));
 function It({
   rootContainerProps: e,
   ...t
 }) {
-  return /* @__PURE__ */ c(Bt, { ...t, children: /* @__PURE__ */ c(Ge, { rootContainerProps: e, children: /* @__PURE__ */ c(kr, { ...t }) }) });
+  return /* @__PURE__ */ c(Bt, { ...t, children: /* @__PURE__ */ c(Ge, { rootContainerProps: e, children: /* @__PURE__ */ c(Cr, { ...t }) }) });
 }
 It.displayName = "AudioPlayerWithProviders";
-const Kr = Object.assign(It, {
+const Vr = Object.assign(It, {
   Progress: ft,
   Volume: Et,
   PlayList: mt,
@@ -2313,14 +2344,14 @@ const Kr = Object.assign(It, {
   TrackInfo: De,
   TrackTime: St,
   CustomComponent: Gt
-}), Cr = () => {
-  const e = A(b), { isPlaying: t, repeatType: n, playbackRate: a } = k(), r = E(() => {
+}), xr = () => {
+  const e = E(w), { isPlaying: t, repeatType: n, playbackRate: a } = k(), r = g(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !0 });
-  }, [e]), i = E(() => {
+  }, [e]), s = g(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !1 });
-  }, [e]), s = E(() => {
+  }, [e]), i = g(() => {
     e({ type: "CHANGE_PLAYING_STATE" });
-  }, [e]), o = E(
+  }, [e]), o = g(
     (u) => {
       e({ type: "SET_PLAYBACK_RATE", playbackRate: u });
     },
@@ -2331,12 +2362,12 @@ const Kr = Object.assign(It, {
     repeatType: n,
     playbackRate: a,
     play: r,
-    pause: i,
-    togglePlay: s,
+    pause: s,
+    togglePlay: i,
     setPlaybackRate: o
   };
-}, xr = () => {
-  const e = A(b), { playList: t, curIdx: n, curPlayId: a } = $(), { elementRefs: r } = L(), i = E(
+}, Mr = () => {
+  const e = E(w), { playList: t, curIdx: n, curPlayId: a } = $(), { elementRefs: r } = L(), s = g(
     (u) => {
       const d = t[u];
       d && e({
@@ -2346,9 +2377,9 @@ const Kr = Object.assign(It, {
       });
     },
     [e, t]
-  ), s = E(() => {
+  ), i = g(() => {
     t.length !== 0 && e({ type: "NEXT_AUDIO" });
-  }, [e, t.length]), o = E(() => {
+  }, [e, t.length]), o = g(() => {
     var d;
     if (t.length === 0) return;
     const u = ((d = r == null ? void 0 : r.audioEl) == null ? void 0 : d.currentTime) ?? 0;
@@ -2359,30 +2390,30 @@ const Kr = Object.assign(It, {
     currentIndex: n,
     playList: t,
     currentTrack: t[n] ?? null,
-    setTrack: i,
-    next: s,
+    setTrack: s,
+    next: i,
     prev: o
   };
-}, Mr = () => {
-  const e = A(b), { volume: t, muted: n } = k(), a = E(
-    (i) => {
-      e({ type: "SET_VOLUME", volume: i });
+}, _r = () => {
+  const e = E(w), { volume: t, muted: n } = k(), a = g(
+    (s) => {
+      e({ type: "SET_VOLUME", volume: s });
     },
     [e]
-  ), r = E(() => {
+  ), r = g(() => {
     e({ type: "SET_MUTED", muted: !n });
   }, [e, n]);
   return { volume: t, muted: n, setVolume: a, toggleMute: r };
-}, _r = () => {
-  const e = A(b), { currentTime: t, duration: n } = re(), a = E(
+}, Dr = () => {
+  const e = E(w), { currentTime: t, duration: n } = re(), a = g(
     (r) => {
       e({ type: "SEEK", time: r });
     },
     [e]
   );
   return { currentTime: t, duration: n, seek: a };
-}, Vr = () => {
-  const e = Cr(), t = xr(), n = Mr(), a = _r();
+}, Br = () => {
+  const e = xr(), t = Mr(), n = _r(), a = Dr();
   return {
     isPlaying: e.isPlaying,
     volume: n.volume,
@@ -2405,7 +2436,7 @@ const Kr = Object.assign(It, {
     setTrack: t.setTrack,
     setPlaybackRate: e.setPlaybackRate
   };
-}, Br = () => {
+}, $r = () => {
   const { elementRefs: e } = L();
   return {
     audioEl: e == null ? void 0 : e.audioEl,
@@ -2413,31 +2444,31 @@ const Kr = Object.assign(It, {
   };
 };
 export {
-  kr as AudioPlayer,
+  Cr as AudioPlayer,
   Ge as AudioPlayerContainer,
   Bt as AudioPlayerStateProvider,
   O as DEFAULT_AUDIO_STATE,
-  Or as DEFAULT_INTERFACE_GRID_BOUND,
+  Kr as DEFAULT_INTERFACE_GRID_BOUND,
   Ie as audioAttrsContext,
-  b as audioPlayerDispatchContext,
+  w as audioPlayerDispatchContext,
   Ot as audioPlayerReducer,
-  Kr as default,
-  de as defaultInterfacePlacement,
+  Vr as default,
+  pe as defaultInterfacePlacement,
   Se as playbackContext,
   Le as resourceContext,
   Ne as timeContext,
-  we as trackContext,
-  be as uiContext,
+  be as trackContext,
+  we as uiContext,
   Kt as useAudioAttrsContext,
-  Vr as useAudioPlayer,
-  Br as useAudioPlayerElement,
-  Cr as useAudioPlayerPlayback,
-  _r as useAudioPlayerTime,
-  xr as useAudioPlayerTrack,
-  Mr as useAudioPlayerVolume,
+  Br as useAudioPlayer,
+  $r as useAudioPlayerElement,
+  xr as useAudioPlayerPlayback,
+  Dr as useAudioPlayerTime,
+  Mr as useAudioPlayerTrack,
+  _r as useAudioPlayerVolume,
   k as usePlaybackContext,
   L as useResourceContext,
   re as useTimeContext,
   $ as useTrackContext,
-  M as useUIContext
+  x as useUIContext
 };