react-modern-audio-player 2.0.0 → 2.2.0

package/dist/index.es.js

@@ -1,16 +1,16 @@
 "use client";
 import './index.css';
-import { jsx as i, Fragment as z, jsxs as S } from "react/jsx-runtime";
-import te, { createContext as H, useReducer as nt, useMemo as D, useContext as st, forwardRef as ve, useCallback as g, useRef as A, useEffect as E, memo as W, useState as b, useId as ke, useLayoutEffect as it, cloneElement as lt } from "react";
-import ct, { flushSync as ut } from "react-dom";
-const F = {
+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 = {
   isPlaying: !1,
   volume: 1,
   muted: !1,
   repeatType: "ALL",
   currentTime: 0,
   duration: 0
-}, pr = 10, k = {
+}, _r = 10, de = {
   templateArea: {
     artwork: "row1-1",
     trackInfo: "row1-2",
@@ -22,17 +22,18 @@ const F = {
     playButton: "row1-8",
     playList: "row1-9"
   }
-}, w = H(null);
-w.displayName = "AudioPlayerDispatchContext";
-const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) => Math.round(Math.random() * (t - e) + e), dt = 1, Ne = (e, t, o) => {
-  if (o - t < 1) return e;
-  let r = Le(t, o);
-  for (; r === e; )
-    r = Le(t, o);
-  return r;
-}, mt = (e, t) => {
+}, 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) => {
+  if (n - t < 1) return e;
+  let a = Oe(t, n);
+  for (; a === e; )
+    a = Oe(t, n);
+  return a;
+}, Ut = (e, t) => {
   switch (t.type) {
     case "NEXT_AUDIO": {
+      if (e.playList.length === 0) return e;
       if (e.curAudioState.repeatType === "NONE" && e.curIdx + 1 === e.playList.length)
         return {
           ...e,
@@ -50,7 +51,7 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
             audioResetKey: e.audioResetKey + 1,
             curAudioState: { ...e.curAudioState, currentTime: 0 }
           };
-        const r = Ne(
+        const a = Ve(
           e.curIdx,
           0,
           e.playList.length - 1
@@ -58,8 +59,8 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
         return {
           ...e,
           audioResetKey: e.audioResetKey + 1,
-          curPlayId: e.playList[r].id,
-          curIdx: r,
+          curPlayId: e.playList[a].id,
+          curIdx: a,
           curAudioState: {
             ...e.curAudioState,
             isLoadedMetaData: !1,
@@ -67,41 +68,41 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
           }
         };
       }
-      const o = (e.curIdx + 1) % e.playList.length;
+      const n = (e.curIdx + 1) % e.playList.length;
       return {
         ...e,
         audioResetKey: e.audioResetKey + 1,
-        curIdx: o,
-        curPlayId: e.playList[o].id,
+        curIdx: n,
+        curPlayId: e.playList[n].id,
         curAudioState: { ...e.curAudioState, currentTime: 0 }
       };
     }
     case "PREV_AUDIO": {
-      const o = e.playList.length <= 1, r = t.currentTime > dt, a = e.curAudioState.repeatType === "NONE" && e.curIdx === 0;
-      if (o || r || a)
+      const n = e.playList.length <= 1, a = t.currentTime > Dt, r = e.curAudioState.repeatType === "NONE" && e.curIdx === 0;
+      if (n || a || r)
         return {
           ...e,
           audioResetKey: e.audioResetKey + 1,
           curAudioState: { ...e.curAudioState, currentTime: 0 }
         };
       if (e.curAudioState.repeatType === "SHUFFLE") {
-        const n = Ne(
+        const o = Ve(
           e.curIdx,
           0,
           e.playList.length - 1
         );
         return {
           ...e,
-          curPlayId: e.playList[n].id,
-          curIdx: n,
+          curPlayId: e.playList[o].id,
+          curIdx: o,
           curAudioState: { ...e.curAudioState, currentTime: 0 }
         };
       }
-      const s = (e.curIdx - 1 + e.playList.length) % e.playList.length;
+      const i = (e.curIdx - 1 + e.playList.length) % e.playList.length;
       return {
         ...e,
-        curPlayId: e.playList[s].id,
-        curIdx: s,
+        curPlayId: e.playList[i].id,
+        curIdx: i,
         curAudioState: {
           ...e.curAudioState,
           isLoadedMetaData: !1,
@@ -110,19 +111,42 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
       };
     }
     case "UPDATE_PLAY_LIST": {
+      if (t.playList.length === 0)
+        return {
+          ...e,
+          playList: t.playList,
+          curPlayId: 0,
+          curIdx: -1,
+          curAudioState: {
+            ...e.curAudioState,
+            isPlaying: !1,
+            currentTime: 0,
+            duration: 0,
+            isLoadedMetaData: !1
+          }
+        };
       if (!t.playList.find(
-        (a) => a.id === e.curPlayId
+        (r) => r.id === e.curPlayId
       ))
-        return console.error(
-          "UPDATE_PLAY_LIST ERROR - curPlayId is not found on playList"
-        ), e;
-      const r = t.playList.findIndex(
-        (a) => a.id === e.curPlayId
+        return {
+          ...e,
+          playList: t.playList,
+          curPlayId: t.playList[0].id,
+          curIdx: 0,
+          audioResetKey: e.audioResetKey + 1,
+          curAudioState: {
+            ...e.curAudioState,
+            currentTime: 0,
+            isLoadedMetaData: !1
+          }
+        };
+      const a = t.playList.findIndex(
+        (r) => r.id === e.curPlayId
       );
       return {
         ...e,
         playList: t.playList,
-        curIdx: r
+        curIdx: a
       };
     }
     case "SET_VOLUME":
@@ -130,7 +154,7 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
         ...e,
         curAudioState: {
           ...e.curAudioState,
-          volume: be(t.volume)
+          volume: Fe(t.volume)
         }
       };
     case "SET_AUDIO_STATE":
@@ -223,372 +247,381 @@ const be = (e) => isFinite(e) ? Math.min(Math.max(e, 0), 1) : 1, Le = (e, t) =>
     default:
       throw new Error("Unhandled action");
   }
-}, he = H(null);
-he.displayName = "PlaybackContext";
-const Te = H(null);
-Te.displayName = "AudioAttrsContext";
-const ge = H(null);
-ge.displayName = "TrackContext";
-const fe = H(null);
-fe.displayName = "UIContext";
-const Ae = H(null);
-Ae.displayName = "ResourceContext";
-const Ee = H(null);
-Ee.displayName = "TimeContext";
-function pt(e) {
+}, Ae = O(null);
+Ae.displayName = "PlaybackContext";
+const Ie = O(null);
+Ie.displayName = "AudioAttrsContext";
+const Se = O(null);
+Se.displayName = "TrackContext";
+const we = O(null);
+we.displayName = "UIContext";
+const Le = O(null);
+Le.displayName = "ResourceContext";
+const Ne = O(null);
+Ne.displayName = "TimeContext";
+const E = (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);
+function Vt(e) {
   const {
     playList: t,
-    audioInitialState: o,
-    activeUI: r,
-    placement: a,
-    customIcons: s,
-    coverImgsCss: n
+    audioInitialState: n,
+    activeUI: a,
+    placement: r,
+    customIcons: i,
+    coverImgsCss: o
   } = e, c = {
-    isPlaying: (o == null ? void 0 : o.isPlaying) ?? F.isPlaying,
-    repeatType: (o == null ? void 0 : o.repeatType) ?? F.repeatType,
-    volume: typeof (o == null ? void 0 : o.volume) == "number" ? be(o.volume) : F.volume,
-    muted: (o == null ? void 0 : o.muted) ?? F.muted
-  }, l = r || { playButton: !0 }, u = {
-    playerPlacement: a == null ? void 0 : a.player,
-    playListPlacement: (a == null ? void 0 : a.playList) || "bottom",
-    interfacePlacement: (a == null ? void 0 : a.interface) || {
+    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
+  }, u = a || { playButton: !0 }, d = {
+    playerPlacement: r == null ? void 0 : r.player,
+    playListPlacement: (r == null ? void 0 : r.playList) || "bottom",
+    interfacePlacement: (r == null ? void 0 : r.interface) || {
       templateArea: {
-        playButton: k.templateArea.playButton
+        playButton: de.templateArea.playButton
       }
     },
-    volumeSliderPlacement: a == null ? void 0 : a.volumeSlider
-  };
+    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);
   return {
     playList: t,
-    curPlayId: (o == null ? void 0 : o.curPlayId) || 1,
-    curIdx: o != null && o.curPlayId ? t.findIndex(
-      (m) => m.id === (o == null ? void 0 : o.curPlayId)
-    ) : 0,
+    curPlayId: l ? 0 : m >= 0 ? p : t[0].id,
+    curIdx: l ? -1 : m >= 0 ? m : 0,
     curAudioState: c,
-    activeUI: l,
+    activeUI: u,
     audioResetKey: 0,
     seekRequestKey: 0,
-    ...u,
-    customIcons: s,
-    coverImgsCss: n
+    ...d,
+    customIcons: i,
+    coverImgsCss: o
   };
 }
-const yt = ({
+const Kt = ({
   children: e,
   colorScheme: t,
-  ...o
+  ...n
 }) => {
-  var d, p;
-  const [r, a] = nt(
-    mt,
-    o,
-    pt
-  ), s = D(
+  var y, f;
+  const [a, r] = kt(
+    Ut,
+    n,
+    Vt
+  ), i = k(
     () => ({
-      currentTime: r.curAudioState.currentTime ?? F.currentTime,
-      duration: r.curAudioState.duration ?? F.duration,
-      seekRequestKey: r.seekRequestKey
+      currentTime: a.curAudioState.currentTime ?? H.currentTime,
+      duration: a.curAudioState.duration ?? H.duration,
+      seekRequestKey: a.seekRequestKey
     }),
     [
-      r.curAudioState.currentTime,
-      r.curAudioState.duration,
-      r.seekRequestKey
+      a.curAudioState.currentTime,
+      a.curAudioState.duration,
+      a.seekRequestKey
     ]
-  ), n = D(
+  ), o = k(
     () => ({
-      isPlaying: r.curAudioState.isPlaying ?? F.isPlaying,
-      volume: r.curAudioState.volume ?? F.volume,
-      muted: r.curAudioState.muted ?? F.muted,
-      repeatType: r.curAudioState.repeatType,
-      isLoadedMetaData: r.curAudioState.isLoadedMetaData,
-      audioResetKey: r.audioResetKey
+      isPlaying: a.curAudioState.isPlaying ?? H.isPlaying,
+      volume: a.curAudioState.volume ?? H.volume,
+      muted: a.curAudioState.muted ?? H.muted,
+      repeatType: a.curAudioState.repeatType,
+      isLoadedMetaData: a.curAudioState.isLoadedMetaData,
+      audioResetKey: a.audioResetKey
     }),
     [
-      r.curAudioState.isPlaying,
-      r.curAudioState.isLoadedMetaData,
-      r.curAudioState.volume,
-      r.curAudioState.muted,
-      r.curAudioState.repeatType,
-      r.audioResetKey
+      a.curAudioState.isPlaying,
+      a.curAudioState.isLoadedMetaData,
+      a.curAudioState.volume,
+      a.curAudioState.muted,
+      a.curAudioState.repeatType,
+      a.audioResetKey
     ]
-  ), c = D(
+  ), c = k(
     () => ({
-      playList: r.playList,
-      curPlayId: r.curPlayId,
-      curIdx: r.curIdx
+      playList: a.playList,
+      curPlayId: a.curPlayId,
+      curIdx: a.curIdx
     }),
-    [r.playList, r.curPlayId, r.curIdx]
-  ), l = D(
+    [a.playList, a.curPlayId, a.curIdx]
+  ), { audioInitialState: u } = n, d = u == null ? void 0 : u.playListExpanded, l = k(
     () => ({
-      activeUI: r.activeUI,
-      playListPlacement: r.playListPlacement,
-      playerPlacement: r.playerPlacement,
-      interfacePlacement: r.interfacePlacement,
-      volumeSliderPlacement: r.volumeSliderPlacement,
-      colorScheme: t
+      activeUI: a.activeUI,
+      playListPlacement: a.playListPlacement,
+      playerPlacement: a.playerPlacement,
+      interfacePlacement: a.interfacePlacement,
+      volumeSliderPlacement: a.volumeSliderPlacement,
+      colorScheme: t,
+      playListExpanded: d
     }),
     [
-      r.activeUI,
-      r.playListPlacement,
-      r.playerPlacement,
-      r.interfacePlacement,
-      r.volumeSliderPlacement,
-      t
+      a.activeUI,
+      a.playListPlacement,
+      a.playerPlacement,
+      a.interfacePlacement,
+      a.volumeSliderPlacement,
+      t,
+      d
     ]
-  ), { audioInitialState: u } = o, m = D(() => {
+  ), p = k(() => {
     if (!u) return {};
     const {
-      isPlaying: h,
-      repeatType: v,
-      isLoadedMetaData: T,
-      currentTime: L,
-      duration: N,
-      volume: B,
-      muted: R,
-      curPlayId: G,
-      ...ae
+      isPlaying: v,
+      repeatType: T,
+      isLoadedMetaData: h,
+      currentTime: I,
+      duration: B,
+      volume: re,
+      muted: se,
+      curPlayId: D,
+      playListExpanded: ce,
+      ...q
     } = u;
-    return ae;
-  }, [u]), y = D(
+    return q;
+  }, [u]), m = k(
     () => ({
-      elementRefs: r.elementRefs,
-      customIcons: r.customIcons,
-      coverImgsCss: r.coverImgsCss
+      elementRefs: a.elementRefs,
+      customIcons: a.customIcons,
+      coverImgsCss: a.coverImgsCss
     }),
     [
-      (d = r.elementRefs) == null ? void 0 : d.audioEl,
-      (p = r.elementRefs) == null ? void 0 : p.waveformInst,
-      r.customIcons,
-      r.coverImgsCss
+      (y = a.elementRefs) == null ? void 0 : y.audioEl,
+      (f = a.elementRefs) == null ? void 0 : f.waveformInst,
+      a.customIcons,
+      a.coverImgsCss
     ]
   );
-  return /* @__PURE__ */ i(Ee.Provider, { value: s, children: /* @__PURE__ */ i(he.Provider, { value: n, children: /* @__PURE__ */ i(ge.Provider, { value: c, children: /* @__PURE__ */ i(fe.Provider, { value: l, children: /* @__PURE__ */ i(Ae.Provider, { value: y, children: /* @__PURE__ */ i(Te.Provider, { value: m, children: /* @__PURE__ */ i(w.Provider, { value: a, children: e }) }) }) }) }) }) });
-}, f = (e) => {
-  const t = st(e);
-  if (!t) {
-    const o = e.displayName || "Context";
-    throw new Error(`${o} is not provided`);
-  }
-  return t;
-}, O = () => f(fe), J = {
+  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 = {
   top: "auto",
   right: "auto",
   bottom: "auto",
   left: "auto"
-}, vt = {
-  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 }
-}, Ce = te.memo(({ children: e, rootContainerProps: t }) => {
-  const { playerPlacement: o, colorScheme: r } = O(), a = D(
-    () => o ? vt[o] : void 0,
-    [o]
-  ), n = {
+}, 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,
+    [n]
+  ), o = {
     width: "100%",
-    position: o !== "static" && !!o ? "fixed" : "static",
-    ...a,
+    position: n !== "static" && !!n ? "fixed" : "static",
+    ...r,
     ...(t == null ? void 0 : t.style) ?? {}
   };
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ s(
     "div",
     {
       ...t,
       className: `rmap-player-provider${t != null && t.className ? ` ${t.className}` : ""}`,
-      "data-theme": r ?? void 0,
-      style: n,
+      "data-theme": a ?? void 0,
+      style: o,
       children: e
     }
   );
 });
-Ce.displayName = "AudioPlayerContainer";
-const ht = ({
+He.displayName = "AudioPlayerContainer";
+const $t = ({
   areas: e,
   columns: t,
-  alignItems: o,
-  justifyContent: r,
-  minHeight: a,
-  UNSAFE_className: s,
-  children: n
+  alignItems: n,
+  justifyContent: a,
+  minHeight: r,
+  UNSAFE_className: i,
+  children: o
 }) => {
   const c = {
     display: "grid",
-    gridTemplateAreas: e == null ? void 0 : e.map((l) => `"${l}"`).join(" "),
+    gridTemplateAreas: e == null ? void 0 : e.map((u) => `"${u}"`).join(" "),
     gridTemplateColumns: t == null ? void 0 : t.join(" "),
-    alignItems: o,
-    justifyContent: r,
-    minHeight: a
+    alignItems: n,
+    justifyContent: a,
+    minHeight: r
   };
-  return /* @__PURE__ */ i("div", { className: s, style: c, children: n });
-}, Tt = ht, Me = ve(
+  return /* @__PURE__ */ s("div", { className: i, style: c, children: o });
+}, Ft = $t, Re = Pe(
   ({
     children: e,
     visible: t = !0,
-    gridArea: o,
-    width: r,
-    justifySelf: a = "center",
-    padding: s,
-    UNSAFE_className: n,
+    gridArea: n,
+    width: a,
+    justifySelf: r = "center",
+    padding: i,
+    UNSAFE_className: o,
     style: c,
-    ...l
-  }, u) => {
+    ...u
+  }, d) => {
     if (!t) return null;
-    const m = {
-      gridArea: o,
-      width: r,
-      justifySelf: a,
-      padding: s ?? "0 5px",
+    const l = {
+      gridArea: n,
+      width: a,
+      justifySelf: r,
+      padding: i ?? "0 5px",
       ...c
     };
-    return /* @__PURE__ */ i("div", { ref: u, className: n, style: m, ...l, children: e });
+    return /* @__PURE__ */ s("div", { ref: d, className: o, style: l, ...u, children: e });
   }
 );
-Me.displayName = "GridItem";
-const M = Tt;
-M.Item = Me;
-const C = () => f(he), re = () => f(Ee), V = () => f(ge), P = () => f(Ae), xe = ({
+Re.displayName = "GridItem";
+const _ = Ft;
+_.Item = Re;
+const Ht = ({
   children: e,
   id: t,
-  ...o
+  ...n
 }) => {
-  var m, y;
-  const r = C(), a = re(), s = V(), n = O(), c = P(), l = {
+  var l, p;
+  const a = C(), r = te(), i = K(), o = x(), c = N(), u = {
     curAudioState: {
-      isPlaying: r.isPlaying,
-      volume: r.volume,
-      muted: r.muted,
-      repeatType: r.repeatType,
-      isLoadedMetaData: r.isLoadedMetaData,
-      currentTime: a.currentTime,
-      duration: a.duration
+      isPlaying: a.isPlaying,
+      volume: a.volume,
+      muted: a.muted,
+      repeatType: a.repeatType,
+      isLoadedMetaData: a.isLoadedMetaData,
+      currentTime: r.currentTime,
+      duration: r.duration
     },
-    audioResetKey: r.audioResetKey,
-    ...a,
-    ...s,
-    ...n,
+    audioResetKey: a.audioResetKey,
+    ...r,
+    ...i,
+    ...o,
     ...c
-  }, u = (y = (m = n.interfacePlacement) == null ? void 0 : m.customComponentsArea) == null ? void 0 : y[t];
-  return /* @__PURE__ */ i(
-    M.Item,
+  }, d = (p = (l = o.interfacePlacement) == null ? void 0 : l.customComponentsArea) == null ? void 0 : p[t];
+  return /* @__PURE__ */ s(
+    _.Item,
     {
       UNSAFE_className: "rmap-custom-component",
-      gridArea: u,
-      ...o,
-      children: te.cloneElement(e, { audioPlayerState: l })
+      gridArea: d,
+      ...n,
+      children: ee.cloneElement(e, { audioPlayerState: u })
     }
   );
-}, gt = () => f(Te), ft = () => {
+}, ze = "PlayListEmpty", Ge = () => null;
+Ge.displayName = ze;
+const Rt = () => {
   const {
     isPlaying: e,
     volume: t,
-    repeatType: o,
-    audioResetKey: r
-  } = C(), { currentTime: a, seekRequestKey: s } = re(), { elementRefs: n } = P(), c = f(w), l = g(
-    (p) => {
-      if (p.currentTarget.readyState === 0) return;
-      const h = p.currentTarget.currentTime;
+    repeatType: n,
+    audioResetKey: a
+  } = C(), { currentTime: r, seekRequestKey: i } = te(), { elementRefs: o } = N(), c = E(L), u = g(
+    (y) => {
+      if (y.currentTarget.readyState === 0) return;
+      const f = y.currentTarget.currentTime;
       c({
         type: "SET_AUDIO_STATE",
-        audioState: { currentTime: h }
+        audioState: { currentTime: f }
       });
     },
     [c]
-  ), u = g(() => {
-    if (n != null && n.audioEl) {
-      if (o === "ONE") {
-        ut(() => {
+  ), d = g(() => {
+    if (o != null && o.audioEl) {
+      if (n === "ONE") {
+        $e(() => {
           c({ type: "SEEK", time: 0 });
-        }), n.audioEl.play();
+        }), o.audioEl.play();
         return;
       }
       c({ type: "NEXT_AUDIO" });
     }
-  }, [c, o, n == null ? void 0 : n.audioEl]), m = g(
-    (p) => {
-      const { duration: h } = p.currentTarget;
-      t != null && (p.currentTarget.volume = t), c({
+  }, [c, n, o == null ? void 0 : o.audioEl]), l = g(
+    (y) => {
+      const { duration: f } = y.currentTarget;
+      t != null && (y.currentTarget.volume = t), c({
         type: "SET_AUDIO_STATE",
-        audioState: { isLoadedMetaData: !0, duration: h }
+        audioState: { isLoadedMetaData: !0, duration: f }
       });
     },
     [c, t]
-  ), y = A(!1);
-  E(() => {
-    if (n != null && n.audioEl) {
-      if (!y.current) {
-        y.current = !0;
+  ), p = A(!1);
+  P(() => {
+    if (o != null && o.audioEl) {
+      if (!p.current) {
+        p.current = !0;
         return;
       }
-      n.audioEl.currentTime = 0;
+      o.audioEl.currentTime = 0;
     }
-  }, [r, n == null ? void 0 : n.audioEl]), E(() => {
-    n != null && n.audioEl && (e ? n.audioEl.play().catch(() => {
+  }, [a, o == null ? void 0 : o.audioEl]), P(() => {
+    o != null && o.audioEl && (e ? o.audioEl.play().catch(() => {
       c({
         type: "SET_AUDIO_STATE",
         audioState: { isPlaying: !1 }
       });
-    }) : n.audioEl.pause());
-  }, [n == null ? void 0 : n.audioEl, e, c]), E(() => {
-    !(n != null && n.audioEl) || t == null || (n.audioEl.volume = t);
-  }, [n == null ? void 0 : n.audioEl, t]);
-  const d = A(0);
-  return E(() => {
-    if (s === d.current) return;
-    d.current = s;
-    const p = n == null ? void 0 : n.audioEl;
-    if (!p || a == null) return;
-    p.currentTime = a;
-    const h = n == null ? void 0 : n.waveformInst, v = p.duration, T = Number.isFinite(v) && v > 0;
-    if (!h || !T) return;
-    const L = a / v, N = Math.min(1, Math.max(0, L));
-    h.seekTo(N);
+    }) : o.audioEl.pause());
+  }, [o == null ? void 0 : o.audioEl, e, c]), P(() => {
+    !(o != null && o.audioEl) || t == null || (o.audioEl.volume = t);
+  }, [o == null ? void 0 : o.audioEl, t]);
+  const m = A(0);
+  return P(() => {
+    if (i === m.current) return;
+    m.current = i;
+    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);
   }, [
-    s,
-    a,
-    n == null ? void 0 : n.audioEl,
-    n == null ? void 0 : n.waveformInst
+    i,
+    r,
+    o == null ? void 0 : o.audioEl,
+    o == null ? void 0 : o.waveformInst
   ]), {
-    onTimeUpdate: l,
-    onEnded: u,
-    onLoadedMetadata: m
+    onTimeUpdate: u,
+    onEnded: d,
+    onLoadedMetadata: l
   };
-}, _e = te.memo(({ audioRef: e }) => {
-  const t = A(null), { muted: o } = C(), { curPlayId: r, playList: a } = V(), s = gt(), n = f(w), c = a.find(
-    (u) => u.id === r
-  ), l = ft();
-  return E(() => {
-    t.current && (n({
+}, 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(
+    (d) => d.id === a
+  ), u = Rt();
+  return P(() => {
+    t.current && (o({
       type: "SET_ELEMENT_REFS",
       elementRefs: { audioEl: t.current }
     }), e && (e.current = t.current));
-  }, [n, e]), /* @__PURE__ */ i(
+  }, [o, e]), /* @__PURE__ */ s(
     "audio",
     {
       id: "rm-audio-player-audio",
-      ...s,
-      muted: o,
+      ...i,
+      muted: n,
       ref: t,
       src: c == null ? void 0 : c.src,
-      ...l
+      ...u
     }
   );
 });
-_e.displayName = "Audio";
-const Y = ve(({ className: e, type: t = "button", ...o }, r) => /* @__PURE__ */ i(
+We.displayName = "Audio";
+function z(e, t) {
+  var a, r;
+  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]) ?? de.templateArea[e];
+}
+const j = Pe(({ className: e, type: t = "button", ...n }, a) => /* @__PURE__ */ s(
   "button",
   {
-    ref: r,
+    ref: a,
     type: t,
     className: `styled-btn${e ? ` ${e}` : ""}`,
-    ...o
+    ...n
   }
 ));
-Y.displayName = "StyledBtn";
-const Ie = (e) => (
+j.displayName = "StyledBtn";
+const be = (e) => (
   // eslint-disable-next-line react/display-name
-  ({ size: t = "1em", color: o, style: r, ...a }) => /* @__PURE__ */ i(
+  ({ size: t = "1em", color: n, style: a, ...r }) => /* @__PURE__ */ s(
     "svg",
     {
       "aria-hidden": "true",
@@ -599,16 +632,16 @@ const Ie = (e) => (
       viewBox: "0 0 24 24",
       height: t,
       width: t,
-      color: o,
-      style: o ? { color: o, ...r } : r,
+      color: n,
+      style: n ? { color: n, ...a } : a,
       xmlns: "http://www.w3.org/2000/svg",
-      ...a,
+      ...r,
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), q = (e) => (
+), Y = (e) => (
   // eslint-disable-next-line react/display-name
-  ({ size: t = "1em", color: o, style: r, ...a }) => /* @__PURE__ */ i(
+  ({ size: t = "1em", color: n, style: a, ...r }) => /* @__PURE__ */ s(
     "svg",
     {
       "aria-hidden": "true",
@@ -621,16 +654,16 @@ const Ie = (e) => (
       strokeLinejoin: "round",
       height: t,
       width: t,
-      color: o,
-      style: o ? { color: o, ...r } : r,
+      color: n,
+      style: n ? { color: n, ...a } : a,
       xmlns: "http://www.w3.org/2000/svg",
-      ...a,
+      ...r,
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), De = (e, t = "0 0 16 16") => (
+), je = (e, t = "0 0 16 16") => (
   // eslint-disable-next-line react/display-name
-  ({ size: o = "1em", color: r, style: a, ...s }) => /* @__PURE__ */ i(
+  ({ size: n = "1em", color: a, style: r, ...i }) => /* @__PURE__ */ s(
     "svg",
     {
       "aria-hidden": "true",
@@ -639,437 +672,506 @@ const Ie = (e) => (
       fill: "currentColor",
       strokeWidth: 0,
       viewBox: t,
-      height: o,
-      width: o,
-      color: r,
-      style: r ? { color: r, ...a } : a,
+      height: n,
+      width: n,
+      color: a,
+      style: a ? { color: a, ...r } : r,
       xmlns: "http://www.w3.org/2000/svg",
-      ...s,
+      ...i,
       dangerouslySetInnerHTML: { __html: e }
     }
   )
-), Oe = Ie(
+), Ye = be(
   '<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"/>'
 );
-Oe.displayName = "MdPlayCircleFilled";
-const Ue = Ie(
+Ye.displayName = "MdPlayCircleFilled";
+const qe = be(
   '<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"/>'
 );
-Ue.displayName = "MdPauseCircleFilled";
-const Ve = Ie(
+qe.displayName = "MdPauseCircleFilled";
+const Xe = be(
   '<path fill="none" d="M0 0h24v24H0z"/><path d="M3 10h11v2H3zM3 6h11v2H3zM3 14h7v2H3zM16 13v8l6-4z"/>'
 );
-Ve.displayName = "MdPlaylistPlay";
-const Be = q(
+Xe.displayName = "MdPlaylistPlay";
+const Qe = Y(
   '<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"/>'
 );
-Be.displayName = "TbRepeat";
-const Ke = q(
+Qe.displayName = "TbRepeat";
+const Je = Y(
   '<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"/>'
 );
-Ke.displayName = "TbRepeatOnce";
-const $e = q(
+Je.displayName = "TbRepeatOnce";
+const Ze = Y(
   '<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"/>'
 );
-$e.displayName = "TbRepeatOff";
-const Fe = q(
+Ze.displayName = "TbRepeatOff";
+const et = Y(
   '<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"/>'
 );
-Fe.displayName = "TbArrowsShuffle";
-const He = q(
+et.displayName = "TbArrowsShuffle";
+const tt = Y(
   '<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"/>'
 );
-He.displayName = "TbVolume";
-const Re = q(
+tt.displayName = "TbVolume";
+const rt = Y(
   '<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"/>'
 );
-Re.displayName = "TbVolume2";
-const ze = q(
+rt.displayName = "TbVolume2";
+const at = Y(
   '<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"/>'
 );
-ze.displayName = "TbVolume3";
-const We = De(
+at.displayName = "TbVolume3";
+const nt = je(
   '<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"/>'
 );
-We.displayName = "ImPrevious";
-const Ge = De(
+nt.displayName = "ImPrevious";
+const ot = je(
   '<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"/>'
 );
-Ge.displayName = "ImNext";
-const x = ({ render: e, customIcon: t }) => /* @__PURE__ */ i(z, { children: t ?? e }), At = W(function() {
-  const { isPlaying: t } = C(), { customIcons: o } = P(), r = f(w);
-  return /* @__PURE__ */ i(
-    Y,
+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,
     {
       type: "button",
       "aria-label": t ? "Pause" : "Play",
-      onClick: () => r({ type: "CHANGE_PLAYING_STATE" }),
+      onClick: () => a({ type: "CHANGE_PLAYING_STATE" }),
       className: "rmap-play-btn",
       "data-testid": "play-btn",
-      children: t ? /* @__PURE__ */ i(
-        x,
+      children: t ? /* @__PURE__ */ s(
+        M,
         {
-          render: /* @__PURE__ */ i(Ue, {}),
-          customIcon: o == null ? void 0 : o.pause
+          render: /* @__PURE__ */ s(qe, {}),
+          customIcon: n == null ? void 0 : n.pause
         }
-      ) : /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Oe, {}), customIcon: o == null ? void 0 : o.play })
+      ) : /* @__PURE__ */ s(M, { render: /* @__PURE__ */ s(Ye, {}), customIcon: n == null ? void 0 : n.play })
     }
   );
-}), Et = W(function({ isVisible: t }) {
-  const { customIcons: o, elementRefs: r } = P(), a = f(w);
-  return t ? /* @__PURE__ */ i(
-    Y,
+}), Gt = G(function({ isVisible: t }) {
+  const { customIcons: n, elementRefs: a } = N(), r = E(L);
+  return t ? /* @__PURE__ */ s(
+    j,
     {
       type: "button",
       "aria-label": "Previous track",
       onClick: () => {
         var c;
-        const n = ((c = r == null ? void 0 : r.audioEl) == null ? void 0 : c.currentTime) ?? 0;
-        a({ type: "PREV_AUDIO", currentTime: n });
+        const o = ((c = a == null ? void 0 : a.audioEl) == null ? void 0 : c.currentTime) ?? 0;
+        r({ type: "PREV_AUDIO", currentTime: o });
       },
       className: "rmap-prev-btn",
       "data-testid": "prev-btn",
-      children: /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(We, {}), customIcon: o == null ? void 0 : o.prev })
+      children: /* @__PURE__ */ s(M, { render: /* @__PURE__ */ s(nt, {}), customIcon: n == null ? void 0 : n.prev })
     }
   ) : null;
-}), It = W(function({ isVisible: t }) {
-  const { customIcons: o } = P(), r = f(w);
-  return t ? /* @__PURE__ */ i(
-    Y,
+}), Wt = G(function({ isVisible: t }) {
+  const { customIcons: n } = N(), a = E(L);
+  return t ? /* @__PURE__ */ s(
+    j,
     {
       type: "button",
       "aria-label": "Next track",
       onClick: () => {
-        r({ type: "NEXT_AUDIO" });
+        a({ type: "NEXT_AUDIO" });
       },
       className: "rmap-next-btn",
       "data-testid": "next-btn",
-      children: /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Ge, {}), customIcon: o == null ? void 0 : o.next })
+      children: /* @__PURE__ */ s(M, { render: /* @__PURE__ */ s(ot, {}), customIcon: n == null ? void 0 : n.next })
     }
   ) : null;
-}), St = {
+}), it = ({
+  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(
+    "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 })
+      ]
+    }
+  ) });
+}, jt = {
   ALL: "Repeat: All tracks",
   ONE: "Repeat: One track",
   NONE: "Repeat: Off",
   SHUFFLE: "Shuffle"
-}, wt = {
+}, Yt = {
   ALL: "ONE",
   ONE: "NONE",
   NONE: "SHUFFLE",
   SHUFFLE: "ALL"
-}, Pt = W(function() {
-  const { repeatType: t } = C(), { customIcons: o } = P(), r = f(w), a = () => {
-    r({
-      type: "SET_REPEAT_TYPE",
-      repeatType: wt[t]
-    });
-  };
-  return /* @__PURE__ */ S(
-    Y,
-    {
-      type: "button",
-      "aria-label": St[t],
-      onClick: a,
-      className: "rmap-repeat-btn",
-      "data-testid": "repeat-btn",
-      "data-repeattype": t,
-      children: [
-        t === "ALL" && /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Be, {}), customIcon: o == null ? void 0 : o.repeatAll }),
-        t === "ONE" && /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i(Ke, {}), customIcon: o == null ? void 0 : o.repeatOne }),
-        t === "NONE" && /* @__PURE__ */ i(x, { render: /* @__PURE__ */ i($e, {}), customIcon: o == null ? void 0 : o.repeatNone }),
-        t === "SHUFFLE" && /* @__PURE__ */ i(
-          x,
-          {
-            render: /* @__PURE__ */ i(Fe, {}),
-            customIcon: o == null ? void 0 : o.repeatShuffle
-          }
-        )
-      ]
-    }
-  );
-}), me = { size: "100%" }, je = W(
-  ve((e, t) => {
-    var y;
-    const { volume: o, muted: r } = C(), { customIcons: a, elementRefs: s } = P(), n = f(
-      w
-    ), c = g(
-      () => n({ type: "SET_MUTED", muted: !r }),
-      [n, r]
-    ), l = o ?? ((y = s == null ? void 0 : s.audioEl) == null ? void 0 : y.volume) ?? 0, u = l > 0 && l <= 0.5, m = l > 0.5;
-    return /* @__PURE__ */ i(
-      Y,
+}, st = G(
+  function({ gridArea: t, visible: n, ...a }) {
+    const { repeatType: r } = C(), { customIcons: i } = N(), o = E(
+      L
+    ), c = () => {
+      o({
+        type: "SET_REPEAT_TYPE",
+        repeatType: Yt[r]
+      });
+    }, u = z("repeatType", t);
+    return /* @__PURE__ */ s(
+      _.Item,
       {
-        type: "button",
-        "aria-label": r ? "Unmute" : "Mute",
-        "aria-pressed": r,
-        onClick: c,
-        className: "rmap-volume-trigger",
-        "data-testid": "volume-trigger-btn",
-        "data-muted": String(r),
-        ref: t,
-        children: r || l === 0 ? /* @__PURE__ */ i(
-          x,
-          {
-            render: /* @__PURE__ */ i(ze, { ...me }),
-            customIcon: a == null ? void 0 : a.volumeMuted
-          }
-        ) : u ? /* @__PURE__ */ i(
-          x,
-          {
-            render: /* @__PURE__ */ i(Re, { ...me }),
-            customIcon: a == null ? void 0 : a.volumeHalf
-          }
-        ) : m ? /* @__PURE__ */ i(
-          x,
+        gridArea: u,
+        visible: n ?? !0,
+        ...a,
+        children: /* @__PURE__ */ w(
+          j,
           {
-            render: /* @__PURE__ */ i(He, { ...me }),
-            customIcon: a == null ? void 0 : a.volumeFull
+            type: "button",
+            "aria-label": jt[r],
+            onClick: c,
+            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,
+                {
+                  render: /* @__PURE__ */ s(Je, {}),
+                  customIcon: i == null ? void 0 : i.repeatOne
+                }
+              ),
+              r === "NONE" && /* @__PURE__ */ s(
+                M,
+                {
+                  render: /* @__PURE__ */ s(Ze, {}),
+                  customIcon: i == null ? void 0 : i.repeatNone
+                }
+              ),
+              r === "SHUFFLE" && /* @__PURE__ */ s(
+                M,
+                {
+                  render: /* @__PURE__ */ s(et, {}),
+                  customIcon: i == null ? void 0 : i.repeatShuffle
+                }
+              )
+            ]
           }
-        ) : null
+        )
       }
     );
-  })
-);
-je.displayName = "VolumeTriggerBtn";
-const le = H(null);
-le.displayName = "DrawerContext";
-const Ye = (e, t) => {
-  E(() => {
-    const o = (r) => {
-      const a = e.current, { target: s } = r;
-      !r || !a || a.contains(s) || t(r);
+  }
+), 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,
+    {
+      render: /* @__PURE__ */ s(at, { ...fe }),
+      customIcon: n == null ? void 0 : n.volumeMuted
+    }
+  ) : i ? /* @__PURE__ */ s(
+    M,
+    {
+      render: /* @__PURE__ */ s(rt, { ...fe }),
+      customIcon: n == null ? void 0 : n.volumeHalf
+    }
+  ) : /* @__PURE__ */ s(
+    M,
+    {
+      render: /* @__PURE__ */ s(tt, { ...fe }),
+      customIcon: n == null ? void 0 : n.volumeFull
+    }
+  );
+});
+ct.displayName = "VolumeIcon";
+const ie = O(null);
+ie.displayName = "DrawerContext";
+const lt = (e, t) => {
+  P(() => {
+    const n = (a) => {
+      const r = e.current, { target: i } = a;
+      !a || !r || r.contains(i) || t(a);
     };
-    return document.addEventListener("click", o), () => document.removeEventListener("click", o);
+    return document.addEventListener("click", n), () => document.removeEventListener("click", n);
   }, [e, t]);
-}, se = ({
+}, ne = ({
   outboundClickActive: e = !1,
   placement: t = "bottom",
-  children: o,
-  isOpen: r,
-  onOpenChange: a
+  children: n,
+  isOpen: a,
+  onOpenChange: r,
+  initialOpen: i
 }) => {
-  const s = A(null), [n, c] = te.Children.toArray(o), [l, u] = b(!1), m = ke();
-  Ye(s, () => {
-    e && (u(!1), a && a(!1));
-  }), E(() => {
-    r !== void 0 && u(r);
-  }, [r]);
-  const y = D(
-    () => ({ isOpen: l, setIsOpen: u, onOpenChange: a, drawerId: m }),
-    [l, u, a, m]
+  const o = A(null), [c, u] = ee.Children.toArray(n), [d, l] = b(
+    a !== void 0 ? a : i ?? !1
+  ), p = Be();
+  lt(o, () => {
+    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]
   );
-  return /* @__PURE__ */ i("div", { className: "rmap-drawer-container", ref: s, children: /* @__PURE__ */ i(le.Provider, { value: y, children: /* @__PURE__ */ S(z, { children: [
-    t === "top" && c,
-    n,
-    t === "bottom" && c
+  return /* @__PURE__ */ s("div", { className: "rmap-drawer-container", ref: o, children: /* @__PURE__ */ s(ie.Provider, { value: m, children: /* @__PURE__ */ w(R, { children: [
+    t === "top" && u,
+    c,
+    t === "bottom" && u
   ] }) }) });
-}, qe = typeof window < "u", pe = qe ? it : E, Se = ({
+}, ut = typeof window < "u", Te = ut ? Ct : P, ke = ({
   visible: e,
   name: t,
-  leaveTime: o,
-  enterTime: r,
-  clearTime: a,
-  onExited: s,
-  onEntered: n,
+  leaveTime: n,
+  enterTime: a,
+  clearTime: r,
+  onExited: i,
+  onEntered: o,
   children: c
 }) => {
-  const [l, u] = b(""), [m, y] = b(!1), d = A(n), p = A(s), h = A(t), v = A(r), T = A(o), L = A(a);
-  return pe(() => {
-    d.current = n, p.current = s, h.current = t, v.current = r, T.current = o, L.current = a;
-  }), pe(() => {
-    const N = e ? "enter" : "leave", B = h.current, R = e ? v.current : T.current;
-    e && !m && y(!0), u(`${B}-${N}`);
-    const G = setTimeout(() => {
-      var X, oe;
-      u(
-        `${B}-${N} ${B}-${N}-active`
-      ), N === "leave" ? (X = p.current) == null || X.call(p) : (oe = d.current) == null || oe.call(d);
-    }, R), ae = setTimeout(() => {
-      e || (u(B), y(!1));
-    }, R + L.current);
+  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 se = setTimeout(() => {
+      var ce, q;
+      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);
     return () => {
-      clearTimeout(G), clearTimeout(ae);
+      clearTimeout(se), clearTimeout(D);
     };
-  }, [e, m]), m ? lt(c, {
-    className: `${c.props.className} ${l}`
+  }, [e, l]), l ? xt(c, {
+    className: `${c.props.className} ${u}`
   }) : null;
-}, Lt = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [role="button"]:not([aria-disabled="true"])', Nt = ({
+}, 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 = ({
   children: e,
   isWithAnimation: t = !0,
-  "aria-label": o = "Dialog"
+  "aria-label": n = "Dialog"
 }) => {
-  const { isOpen: r, setIsOpen: a, onOpenChange: s, drawerId: n } = f(le), c = A(null), l = A(null), u = g(
+  const { isOpen: a, setIsOpen: r, onOpenChange: i, drawerId: o } = E(ie), c = A(null), u = A(null), d = g(
     () => {
       var v;
-      return (v = c.current) == null ? void 0 : v.querySelectorAll(Lt);
+      return (v = c.current) == null ? void 0 : v.querySelectorAll(qt);
     },
     []
-  ), m = g(() => {
+  ), l = g(() => {
     var v, T;
-    (T = (v = u()) == null ? void 0 : v[0]) == null || T.focus();
-  }, [u]), y = g(() => {
-    l.current = document.activeElement, m();
-  }, [m]), d = g(() => {
+    (T = (v = d()) == null ? void 0 : v[0]) == null || T.focus();
+  }, [d]), p = g(() => {
+    u.current = document.activeElement, l();
+  }, [l]), m = g(() => {
     var v;
-    (v = l.current) == null || v.focus();
+    (v = u.current) == null || v.focus();
   }, []);
-  E(() => {
+  P(() => {
     var v;
-    r && !t ? (l.current = document.activeElement, m()) : !r && !t && ((v = l.current) == null || v.focus());
-  }, [r, t, m]);
-  const p = g(
+    a && !t ? (u.current = document.activeElement, l()) : !a && !t && ((v = u.current) == null || v.focus());
+  }, [a, t, l]);
+  const y = g(
     (v) => {
       if (v.key === "Escape") {
-        a(!1), s && s(!1);
+        r(!1), i && i(!1);
         return;
       }
       if (v.key === "Tab") {
-        const T = u();
+        const T = d();
         if (!T || T.length === 0) return;
-        const L = T[0], N = T[T.length - 1];
-        v.shiftKey ? document.activeElement === L && (v.preventDefault(), N.focus()) : document.activeElement === N && (v.preventDefault(), L.focus());
+        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());
       }
     },
-    [a, s, u]
-  ), h = /* @__PURE__ */ i(
+    [r, i, d]
+  ), f = /* @__PURE__ */ s(
     "div",
     {
       ref: c,
       className: "rmap-drawer-content-container",
       role: "dialog",
       "aria-modal": "true",
-      "aria-label": o,
-      id: n,
-      onKeyDown: p,
+      "aria-label": n,
+      id: o,
+      onKeyDown: y,
       children: e
     }
   );
-  return t ? /* @__PURE__ */ i(
-    Se,
+  return t ? /* @__PURE__ */ s(
+    ke,
     {
-      visible: r,
+      visible: a,
       name: "rmap-drawer-content",
       enterTime: 20,
       leaveTime: 60,
       clearTime: 300,
-      onEntered: y,
-      onExited: d,
-      children: h
+      onEntered: p,
+      onExited: m,
+      children: f
     }
-  ) : r ? h : null;
-}, kt = ({
+  ) : a ? f : null;
+}, Qt = ({
   children: e,
   "aria-label": t,
-  "data-testid": o
+  "data-testid": n
 }) => {
-  const { isOpen: r, setIsOpen: a, onOpenChange: s, drawerId: n } = f(le), c = g(() => {
-    const l = !r;
-    a(l), s == null || s(l);
-  }, [r, a, s]);
-  return /* @__PURE__ */ i(
-    Y,
+  const { isOpen: a, setIsOpen: r, onOpenChange: i, drawerId: o } = E(ie), c = g(() => {
+    const u = !a;
+    r(u), i == null || i(u);
+  }, [a, r, i]);
+  return /* @__PURE__ */ s(
+    j,
     {
       className: "rmap-drawer-trigger",
       type: "button",
-      "aria-expanded": r,
-      "aria-controls": n,
+      "aria-expanded": a,
+      "aria-controls": o,
       "aria-label": t,
-      "data-testid": o,
+      "data-testid": n,
       onClick: c,
       children: e
     }
   );
 };
-se.Content = Nt;
-se.Trigger = kt;
-const ye = ({ children: e }) => /* @__PURE__ */ i("ul", { className: "rmap-sortable-list-container", "aria-label": "Sortable list", children: e }), bt = ({
+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 = ({
   index: e,
   dragStartIdx: t,
-  listData: o,
-  draggable: r = !0,
-  onDragStart: a,
-  onDragOver: s,
-  onDrop: n,
-  onClick: c
-}) => ({
-  draggable: r,
-  onDragStart: (l) => {
-    l.stopPropagation(), l.currentTarget.classList.add("rmap-drag-start"), a == null || a(l);
-  },
-  onDragEnd: (l) => {
-    l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-start");
-  },
-  onDragEnter: (l) => {
-    l.stopPropagation(), l.currentTarget.classList.add("rmap-drag-over");
-  },
-  onDragLeave: (l) => {
-    l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
-  },
-  onDragOver: (l) => {
-    l.preventDefault(), l.stopPropagation(), s == null || s(l);
-  },
-  onDrop: (l) => {
-    l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
-    const u = [...o], m = o[t];
-    u.splice(t, 1);
-    const y = (t < e ? [
-      ...u.slice(0, e),
-      m,
-      ...u.slice(e, u.length)
-    ] : [
-      ...u.slice(0, e),
-      m,
-      ...u.slice(e, u.length)
-    ]).map((d, p) => ({ ...d, index: p }));
-    n == null || n(l, y);
-  },
-  onClick: (l) => {
-    l.stopPropagation(), c == null || c(l);
-  }
-}), Ct = (e) => {
-  const { children: t, ...o } = e, r = bt(o);
-  return /* @__PURE__ */ i("li", { className: "rmap-sortable-item", ...r, children: /* @__PURE__ */ i("div", { className: "rmap-sortable-item-inner", children: t }) });
+  listData: n,
+  draggable: a = !0,
+  onDragStart: r,
+  onDragOver: i,
+  onDrop: o,
+  onReorder: c,
+  onClick: u
+}) => {
+  const d = (l, p) => {
+    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) => ({
+      ...T,
+      index: h
+    })), v = (p == null ? void 0 : p.parentElement) ?? null;
+    if ($e(() => {
+      c == null || c(f);
+    }), v) {
+      const T = v.children[l];
+      T == null || T.focus();
+    }
+  };
+  return {
+    tabIndex: 0,
+    draggable: a,
+    onKeyDown: (l) => {
+      switch (l.key) {
+        case "Enter":
+        case " ":
+          l.preventDefault(), l.currentTarget.click();
+          break;
+        case "ArrowUp":
+          if (l.preventDefault(), a && l.altKey)
+            d(e - 1, l.currentTarget);
+          else {
+            const p = l.currentTarget.previousElementSibling;
+            p == null || p.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();
+          }
+          break;
+      }
+    },
+    onDragStart: (l) => {
+      l.stopPropagation(), l.currentTarget.classList.add("rmap-drag-start"), r == null || r(l);
+    },
+    onDragEnd: (l) => {
+      l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-start");
+    },
+    onDragEnter: (l) => {
+      l.stopPropagation(), l.currentTarget.classList.add("rmap-drag-over");
+    },
+    onDragLeave: (l) => {
+      l.stopPropagation(), l.currentTarget.classList.remove("rmap-drag-over");
+    },
+    onDragOver: (l) => {
+      l.preventDefault(), l.stopPropagation(), i == null || i(l);
+    },
+    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);
+    },
+    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 }) });
 };
-ye.Item = Ct;
-const Mt = W(function({
+ge.Item = Zt;
+const Ce = O(null);
+Ce.displayName = "PlayListPortalContext";
+const xe = O(null);
+xe.displayName = "PlayListEmptyContext";
+const er = G(function({
   data: t
 }) {
-  const { curPlayId: o } = V(), { coverImgsCss: r } = P(), a = o === t.id;
-  return /* @__PURE__ */ i(
+  const { curPlayId: n } = K(), { coverImgsCss: a } = N(), r = n === t.id;
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: `rmap-playlist-item${a ? " rmap-cur-played" : ""}`,
+      className: `rmap-playlist-item${r ? " rmap-cur-played" : ""}`,
       "data-testid": "playlist-item",
-      "aria-current": a ? "true" : void 0,
-      children: /* @__PURE__ */ S("div", { className: "rmap-playlist-item-contents", children: [
-        /* @__PURE__ */ i("div", { className: "rmap-playlist-album-cover", children: t.img && /* @__PURE__ */ i(
+      "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(
           "img",
           {
             src: t.img,
             alt: t.name || "Album thumbnail",
-            style: r == null ? void 0 : r.listThumbnail
+            style: a == null ? void 0 : a.listThumbnail
           }
         ) }),
-        /* @__PURE__ */ S("div", { className: "rmap-playlist-album-info", children: [
-          t.writer && /* @__PURE__ */ i("span", { className: "rmap-playlist-writer", children: t.writer }),
-          t.name && /* @__PURE__ */ i("span", { className: "rmap-playlist-title", children: t.name }),
-          t.description && /* @__PURE__ */ i("div", { className: "rmap-playlist-description", children: t.description })
+        /* @__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 })
         ] })
       ] })
     }
   );
-}), xt = ({
+}), tr = ({
   setIsOpen: e
 }) => {
-  const { playList: t } = V(), { activeUI: o } = O(), r = f(w), [a, s] = b(0), n = g(
+  const { playList: t } = K(), { activeUI: n } = x(), a = E(L), [r, i] = b(0), o = g(
     (c) => {
-      r({
+      a({
         type: "SET_CURRENT_AUDIO",
         currentIndex: c,
         currentAudioId: t[c].id
       });
     },
-    [r, t]
+    [a, t]
   );
   return {
     cssTransitionEventProps: {
@@ -1077,134 +1179,155 @@ const Mt = W(function({
       onEntered: () => e(!0)
     },
     sortableItemEventProps: {
-      draggable: o.playList !== "unSortable",
-      dragStartIdx: a,
-      onDragStart: (c) => s(c),
-      onDrop: (c, l) => r({
+      draggable: n.playList !== "unSortable",
+      dragStartIdx: r,
+      onDragStart: (c) => i(c),
+      onDrop: (c, u) => a({
         type: "UPDATE_PLAY_LIST",
-        playList: l
+        playList: u
       }),
-      onClick: (c) => n(c)
+      onReorder: (c) => a({
+        type: "UPDATE_PLAY_LIST",
+        playList: c
+      }),
+      onClick: (c) => o(c)
     }
   };
-}, _t = () => {
-  const { playList: e } = V(), { isOpen: t, setIsOpen: o } = f(le), { cssTransitionEventProps: r, sortableItemEventProps: a } = xt({
-    setIsOpen: o
+}, rr = () => {
+  const { playList: e } = K(), { isOpen: t, setIsOpen: n } = E(ie), a = he(Ce), r = he(xe), { cssTransitionEventProps: i, sortableItemEventProps: o } = tr({
+    setIsOpen: n
   }), {
-    onClick: s,
-    onDragStart: n,
-    ...c
-  } = a;
-  return e.length !== 0 ? ct.createPortal(
-    /* @__PURE__ */ i(
-      Se,
+    onClick: c,
+    onDragStart: u,
+    ...d
+  } = o;
+  if (!a) return /* @__PURE__ */ s(R, {});
+  const l = e.length === 0;
+  return l && !r ? /* @__PURE__ */ s(R, {}) : _t.createPortal(
+    /* @__PURE__ */ s(
+      ke,
       {
         visible: t,
         name: "rmap-playlist-content",
         enterTime: 20,
         leaveTime: 20,
         clearTime: 300,
-        ...r,
-        children: /* @__PURE__ */ i("div", { className: "rmap-playlist-container", children: /* @__PURE__ */ i(ye, { children: e.map((l, u) => /* @__PURE__ */ i(
-          ye.Item,
+        ...i,
+        children: /* @__PURE__ */ s("div", { className: "rmap-playlist-container", children: l ? r : /* @__PURE__ */ s(ge, { children: e.map((p, m) => /* @__PURE__ */ s(
+          ge.Item,
           {
-            index: u,
+            index: m,
             listData: e,
-            onClick: () => s(u),
-            onDragStart: () => n(u),
-            ...c,
-            children: /* @__PURE__ */ i(Mt, { data: l })
+            onClick: () => c(m),
+            onDragStart: () => u(m),
+            ...d,
+            children: /* @__PURE__ */ s(er, { data: p })
           },
-          `sortable-item-${u}`
+          p.id
         )) }) })
       }
     ),
-    document.querySelector(".rmap-sortable-playlist") ?? document.body
-  ) : /* @__PURE__ */ i(z, {});
-}, Dt = () => {
-  const { customIcons: e } = P();
-  return /* @__PURE__ */ i(
-    x,
+    a
+  );
+}, ar = () => {
+  const { customIcons: e } = N();
+  return /* @__PURE__ */ s(
+    M,
     {
-      render: /* @__PURE__ */ i(Ve, { size: "100%" }),
+      render: /* @__PURE__ */ s(Xe, { size: "100%" }),
       customIcon: e == null ? void 0 : e.playList
     }
   );
-}, Ot = () => /* @__PURE__ */ S(se, { children: [
-  /* @__PURE__ */ i(se.Trigger, { "aria-label": "Playlist", "data-testid": "playlist-trigger-btn", children: /* @__PURE__ */ i(Dt, {}) }),
-  /* @__PURE__ */ i(se.Content, { "aria-label": "Playlist", children: /* @__PURE__ */ i(_t, {}) })
-] }), ee = (e) => {
-  const t = `${Math.floor(e / 60)}`.padStart(2, "0"), o = `${Math.floor(e % 60)}`.padStart(2, "0");
-  return `${t}:${o}`;
-}, ce = (e, t, o = 0) => {
-  if (!t) return o;
-  const r = e / t;
-  return isFinite(r) ? r : o;
-}, Xe = () => {
-  const { isLoadedMetaData: e } = C(), { elementRefs: t } = P(), [o, r] = b(!1), a = g(
-    (s) => {
+}, dt = ({
+  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,
+      {
+        "aria-label": "Playlist",
+        "data-testid": "playlist-trigger-btn",
+        children: /* @__PURE__ */ s(ar, {})
+      }
+    ),
+    /* @__PURE__ */ s(ne.Content, { "aria-label": "Playlist", children: /* @__PURE__ */ s(rr, {}) })
+  ] }) });
+}, Z = (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) => {
+  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(
+    (i) => {
       if (!(t != null && t.audioEl) || !e) return;
-      const { clientX: n } = s, { clientWidth: c } = s.currentTarget, l = s.currentTarget.getBoundingClientRect(), u = n - l.x, m = ce(u, c) * t.audioEl.duration;
-      t.audioEl.currentTime = m;
+      const { clientX: o } = i, { clientWidth: c } = i.currentTarget, u = i.currentTarget.getBoundingClientRect(), d = o - u.x, l = me(d, c) * t.audioEl.duration;
+      t.audioEl.currentTime = l;
     },
     [e, t == null ? void 0 : t.audioEl]
   );
-  return E(() => {
-    if (!o) return;
-    const s = (n) => n.preventDefault();
-    return document.addEventListener("selectstart", s), () => {
-      document.removeEventListener("selectstart", s);
+  return P(() => {
+    if (!n) return;
+    const i = (o) => o.preventDefault();
+    return document.addEventListener("selectstart", i), () => {
+      document.removeEventListener("selectstart", i);
     };
-  }, [o]), {
-    onMouseDown: () => r(!0),
-    onMouseUp: () => r(!1),
-    onMouseLeave: () => r(!1),
-    onMouseMove: o ? a : void 0,
-    onClick: a
+  }, [n]), {
+    onMouseDown: () => a(!0),
+    onMouseUp: () => a(!1),
+    onMouseLeave: () => a(!1),
+    onMouseMove: n ? r : void 0,
+    onClick: r
   };
-}, Qe = (e) => {
-  const { isLoadedMetaData: t } = C(), { elementRefs: o } = P();
+}, pt = (e) => {
+  const { isLoadedMetaData: t } = C(), { elementRefs: n } = N();
   return g(
-    (r) => {
-      if (!(o != null && o.audioEl) || !t) return;
-      const a = o.audioEl;
-      let s = null;
-      switch (r.key) {
+    (a) => {
+      if (!(n != null && n.audioEl) || !t) return;
+      const r = n.audioEl;
+      let i = null;
+      switch (a.key) {
         case "ArrowRight":
         case "ArrowUp":
-          r.preventDefault(), s = Math.min(a.currentTime + 5, a.duration);
+          a.preventDefault(), i = Math.min(r.currentTime + 5, r.duration);
           break;
         case "ArrowLeft":
         case "ArrowDown":
-          r.preventDefault(), s = Math.max(a.currentTime - 5, 0);
+          a.preventDefault(), i = Math.max(r.currentTime - 5, 0);
           break;
         case "Home":
-          r.preventDefault(), s = 0;
+          a.preventDefault(), i = 0;
           break;
         case "End":
-          r.preventDefault(), s = a.duration;
+          a.preventDefault(), i = r.duration;
           break;
       }
-      s !== null && isFinite(a.duration) && (a.currentTime = s, e == null || e(s, a.duration));
+      i !== null && isFinite(r.duration) && (r.currentTime = i, e == null || e(i, r.duration));
     },
-    [o == null ? void 0 : o.audioEl, t, e]
+    [n == null ? void 0 : n.audioEl, t, e]
   );
-}, Ut = () => {
-  const { currentTime: e, duration: t } = re(), o = A(null), [r, a] = b(0);
-  E(() => {
-    const u = o.current;
-    if (!u) return;
-    a(u.offsetWidth);
-    const m = new ResizeObserver(([y]) => {
-      a(y.contentBoxSize[0].inlineSize);
+}, nr = () => {
+  const { currentTime: e, duration: t } = te(), n = A(null), [a, r] = b(0);
+  P(() => {
+    const d = n.current;
+    if (!d) return;
+    r(d.offsetWidth);
+    const l = new ResizeObserver(([p]) => {
+      r(p.contentBoxSize[0].inlineSize);
     });
-    return m.observe(u), () => m.disconnect();
+    return l.observe(d), () => l.disconnect();
   }, []);
-  const s = ce(e, t), n = Xe(), c = Qe(), l = s * r;
-  return /* @__PURE__ */ S(
+  const i = me(e, t), o = mt(), c = pt(), u = i * a;
+  return /* @__PURE__ */ w(
     "div",
     {
-      ref: o,
+      ref: n,
       className: "rmap-bar-progress-wrapper",
       "data-testid": "progress-bar",
       role: "slider",
@@ -1212,70 +1335,70 @@ const Mt = W(function({
       "aria-label": "Seek",
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuenow": Math.round(s * 100),
-      "aria-valuetext": `${ee(
+      "aria-valuenow": Math.round(i * 100),
+      "aria-valuetext": `${Z(
         e
-      )} of ${ee(t)}`,
+      )} of ${Z(t)}`,
       onKeyDown: c,
-      ...n,
+      ...o,
       children: [
-        /* @__PURE__ */ i("div", { className: "rmap-progress-bar", children: /* @__PURE__ */ i(
+        /* @__PURE__ */ s("div", { className: "rmap-progress-bar", children: /* @__PURE__ */ s(
           "div",
           {
             className: "rmap-progress-fill",
-            style: { transform: `scaleX(${s})` }
+            style: { transform: `scaleX(${i})` }
           }
         ) }),
-        /* @__PURE__ */ i(
+        /* @__PURE__ */ s(
           "div",
           {
             className: "rmap-progress-handle",
             style: {
-              transform: `translateX(${l}px)`
+              transform: `translateX(${u}px)`
             }
           }
         )
       ]
     }
   );
-}, Vt = (e, t) => {
-  const o = A(), r = g(() => {
-    const a = document.getElementsByClassName("rmap-player-provider")[0];
-    if (!a) return;
-    const s = Object.entries(
+}, or = (e, t) => {
+  const n = A(), a = g(() => {
+    const r = document.getElementsByClassName("rmap-player-provider")[0];
+    if (!r) return;
+    const i = Object.entries(
       e
     ).reduce(
-      (n, [c, l]) => ({
-        ...n,
-        [c]: window.getComputedStyle(a).getPropertyValue(`${l}`)
+      (o, [c, u]) => ({
+        ...o,
+        [c]: window.getComputedStyle(r).getPropertyValue(`${u}`)
       }),
       {}
     );
-    o.current = s;
+    n.current = i;
   }, [e]);
-  return pe(() => {
-    r();
-    const a = window.matchMedia("(prefers-color-scheme: dark)");
-    return a.addEventListener("change", r), () => a.removeEventListener("change", r);
-  }, [r, t]), o;
-}, Bt = {
+  return Te(() => {
+    a();
+    const r = window.matchMedia("(prefers-color-scheme: dark)");
+    return r.addEventListener("change", a), () => r.removeEventListener("change", a);
+  }, [a, t]), n;
+}, ir = {
   progressColor: "--rm-audio-player-waveform-bar",
   waveColor: "--rm-audio-player-waveform-background"
-}, Kt = (e) => {
+}, sr = (e) => {
   const t = e.backend;
   if (!(!(t != null && t.media) || !t.mediaListeners))
-    for (const [o, r] of Object.entries(t.mediaListeners))
-      t.media.removeEventListener(o, r);
-}, $t = (e) => {
-  const t = f(w), { isPlaying: o } = C(), { curPlayId: r } = V(), { elementRefs: a } = P(), { colorScheme: s } = O(), n = Vt(Bt, s), c = A(a == null ? void 0 : a.waveformInst);
-  c.current = a == null ? void 0 : a.waveformInst, E(() => {
-    var p, h;
-    if (a != null && a.waveformInst || !((p = n.current) != null && p.progressColor) || !((h = n.current) != null && h.waveColor))
+    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))
       return;
-    let d = !1;
+    let m = !1;
     return import("./wavesurfer-_j5aw4gZ.mjs").then((v) => v.w).then(({ default: v }) => {
-      var L, N;
-      if (d || !e.current || !((L = n.current) != null && L.progressColor) || !((N = n.current) != null && N.waveColor)) {
+      var h, I;
+      if (m || !e.current || !((h = o.current) != null && h.progressColor) || !((I = o.current) != null && I.waveColor)) {
         console.error("[useWaveSurfer] missing required dependencies");
         return;
       }
@@ -1286,9 +1409,9 @@ const Mt = W(function({
           cursorWidth: 2,
           container: e.current,
           height: 80,
-          progressColor: n.current.progressColor,
+          progressColor: o.current.progressColor,
           responsive: !0,
-          waveColor: n.current.waveColor,
+          waveColor: o.current.waveColor,
           cursorColor: "var(--rm-audio-player-waveform-cursor)",
           backend: "MediaElement",
           removeMediaElementOnDestroy: !1
@@ -1307,36 +1430,38 @@ const Mt = W(function({
     }).catch((v) => {
       console.error("[useWaveSurfer] failed to load wavesurfer.js", v);
     }), () => {
-      d = !0;
+      m = !0;
     };
-  }, [a == null ? void 0 : a.waveformInst, t, n]);
-  const l = A(r);
-  E(() => {
-    if (!(a != null && a.audioEl) || !(a != null && a.waveformInst)) return;
-    const d = a.audioEl, p = a.waveformInst, h = l.current !== r;
-    l.current = r;
-    const v = h ? 0 : d.currentTime, T = o;
-    Kt(p), p.load(d);
-    const L = () => {
-      !h && v > 0 && d.duration && (d.currentTime = v, p.seekTo(v / d.duration)), T && d.play();
+  }, [r == null ? void 0 : r.waveformInst, t, o]);
+  const u = A(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;
+    u.current = a;
+    const v = f ? 0 : m.currentTime, T = n;
+    sr(y), y.load(m);
+    const h = () => {
+      !f && v > 0 && m.duration && (m.currentTime = v, y.seekTo(v / m.duration)), T && m.play();
     };
-    return p.on("ready", L), () => {
-      p.un("ready", L);
+    return y.on("ready", h), () => {
+      y.un("ready", h);
     };
-  }, [r, a == null ? void 0 : a.audioEl, a == null ? void 0 : a.waveformInst]), E(() => {
-    if (!e.current || !(a != null && a.waveformInst)) return;
-    const d = () => {
-      var h, v;
-      (v = (h = a.waveformInst) == null ? void 0 : h.drawer) == null || v.fireEvent("redraw");
-    }, p = new ResizeObserver(d);
-    return p.observe(e.current), () => {
-      p.disconnect();
+  }, [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();
     };
-  }, [a == null ? void 0 : a.waveformInst, e]), E(
+  }, [r == null ? void 0 : r.waveformInst, e]), P(
     () => () => {
-      var p, h;
-      const d = (p = e.current) == null ? void 0 : p.querySelector("wave");
-      d && d.remove(), (h = c.current) == null || h.destroy(), t({
+      var y, f;
+      const m = (y = e.current) == null ? void 0 : y.querySelector("wave");
+      m && m.remove(), (f = c.current) == null || f.destroy(), t({
         type: "SET_ELEMENT_REFS",
         elementRefs: { waveformInst: void 0 }
       });
@@ -1344,47 +1469,47 @@ const Mt = W(function({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [t]
   );
-  const u = () => {
+  const d = () => {
     var v, T;
-    const d = c.current;
-    if (!(d != null && d.isReady)) return;
-    const p = (v = n.current) == null ? void 0 : v.waveColor, h = (T = n.current) == null ? void 0 : T.progressColor;
-    p && d.setWaveColor(p), h && d.setProgressColor(h);
-  }, m = A(u);
-  m.current = u;
-  const y = A(s);
-  E(() => {
-    y.current !== s && (y.current = s, m.current());
-  }, [s, a == null ? void 0 : a.waveformInst]), E(() => {
-    const d = () => m.current(), p = window.matchMedia("(prefers-color-scheme: dark)");
-    return p.addEventListener("change", d), () => p.removeEventListener("change", d);
+    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);
+  l.current = d;
+  const p = A(i);
+  P(() => {
+    p.current !== i && (p.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);
   }, []);
-}, Ft = ({ isActive: e }) => {
-  var l, u, m, y;
-  const t = A(null), { isLoadedMetaData: o, isPlaying: r } = C(), { elementRefs: a } = P();
-  $t(t), E(() => {
-    if (!e || !(a != null && a.waveformInst) || !(a != null && a.audioEl) || !o || r)
+}, lr = ({ isActive: e }) => {
+  var u, d, l, p;
+  const t = A(null), { isLoadedMetaData: n, isPlaying: a } = C(), { elementRefs: r } = N();
+  cr(t), P(() => {
+    if (!e || !(r != null && r.waveformInst) || !(r != null && r.audioEl) || !n || a)
       return;
-    const d = ce(
-      a.audioEl.currentTime,
-      a.audioEl.duration
+    const m = me(
+      r.audioEl.currentTime,
+      r.audioEl.duration
     );
-    a.waveformInst.seekTo(d);
+    r.waveformInst.seekTo(m);
   }, [
     e,
-    o,
-    a == null ? void 0 : a.waveformInst,
-    a == null ? void 0 : a.audioEl,
-    r
+    n,
+    r == null ? void 0 : r.waveformInst,
+    r == null ? void 0 : r.audioEl,
+    a
   ]);
-  const s = Xe(), n = g(
-    (d, p) => {
-      var h;
-      p && ((h = a == null ? void 0 : a.waveformInst) == null || h.seekTo(ce(d, p)));
+  const i = mt(), o = g(
+    (m, y) => {
+      var f;
+      y && ((f = r == null ? void 0 : r.waveformInst) == null || f.seekTo(me(m, y)));
     },
-    [a == null ? void 0 : a.waveformInst]
-  ), c = Qe(n);
-  return /* @__PURE__ */ i("div", { className: "rmap-waveform-wrapper", "data-active": e, children: /* @__PURE__ */ i(
+    [r == null ? void 0 : r.waveformInst]
+  ), c = pt(o);
+  return /* @__PURE__ */ s("div", { className: "rmap-waveform-wrapper", "data-active": e, children: /* @__PURE__ */ s(
     "div",
     {
       id: "rm-waveform",
@@ -1395,96 +1520,113 @@ const Mt = W(function({
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": Math.round(
-        (((l = a == null ? void 0 : a.audioEl) == null ? void 0 : l.currentTime) ?? 0) / (((u = a == null ? void 0 : a.audioEl) == null ? void 0 : u.duration) || 1) * 100
+        (((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": `${ee(
-        ((m = a == null ? void 0 : a.audioEl) == null ? void 0 : m.currentTime) ?? 0
-      )} of ${ee(((y = a == null ? void 0 : a.audioEl) == null ? void 0 : y.duration) ?? 0)}`,
+      "aria-valuetext": `${Z(
+        ((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,
-      ...s
+      ...i
     }
   ) });
-}, Ht = () => {
-  const { activeUI: e } = O(), t = e.progress ?? (e.all ? "bar" : !1), o = t === "waveform", r = t === "bar", [a, s] = b(o);
-  return E(() => {
-    o && !a && s(!0);
-  }, [o, a]), /* @__PURE__ */ S("div", { className: "rmap-progress-container", children: [
-    a && /* @__PURE__ */ i(Ft, { isActive: o }),
-    r && /* @__PURE__ */ i(Ut, {})
-  ] });
-}, Rt = ({
+}, yt = ({
+  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);
+  P(() => {
+    c && !d && l(!0);
+  }, [c, d]);
+  const p = z("progress", e);
+  return /* @__PURE__ */ s(
+    _.Item,
+    {
+      gridArea: p,
+      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, {})
+      ] })
+    }
+  );
+}, ur = ({
   placement: e
 }) => {
-  var y;
-  const t = A(null), { volume: o, muted: r } = C(), { elementRefs: a } = P(), s = f(w), n = g(
-    (d) => {
-      d.stopPropagation(), d.preventDefault(), r && s({ type: "SET_MUTED", muted: !1 });
-      const { value: p } = d.target, h = parseFloat(p);
-      s({
+  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: h
+        volume: f
       });
     },
-    [r, s]
-  ), c = o ?? ((y = a == null ? void 0 : a.audioEl) == null ? void 0 : y.volume) ?? 0, l = c * 100, u = Math.round(l), m = D(
+    [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": `${l}%`
+      "--rm-audio-player-volume-value": `${u}%`
     }),
-    [l]
+    [u]
   );
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ s(
     "div",
     {
       ref: t,
       className: "rmap-volume-container",
       "data-placement": e,
       "data-testid": "volume-slider",
-      style: m,
-      children: /* @__PURE__ */ i("div", { className: "rmap-volume-panel", children: /* @__PURE__ */ i(
+      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: n,
+          onChange: o,
           min: "0",
           max: "1",
           step: "0.01",
-          "aria-label": r ? "Volume (muted)" : "Volume",
-          "aria-valuetext": `${u} percent`
+          "aria-label": a ? "Volume (muted)" : "Volume",
+          "aria-valuetext": `${d} percent`
         }
       ) })
     }
   );
-}, ue = H(null);
-ue.displayName = "DropdownContext";
-const Je = ({
+}, pe = O(null);
+pe.displayName = "DropdownContext";
+const vt = ({
   clickArea: e,
   triggerType: t,
-  isOpen: o,
-  setIsOpen: r,
-  onOpenChange: a
+  isOpen: n,
+  setIsOpen: a,
+  onOpenChange: r
 }) => {
-  const s = A(), n = (m) => {
-    const y = () => {
-      clearTimeout(s.current), s.current = void 0;
-    }, d = (p) => {
-      r(p), a && a(p), y();
+  const i = A(), o = (l) => {
+    const p = () => {
+      clearTimeout(i.current), i.current = void 0;
+    }, m = (y) => {
+      a(y), r && r(y), p();
     };
-    if (y(), m) {
-      s.current = window.setTimeout(() => d(!0), 100);
+    if (p(), l) {
+      i.current = window.setTimeout(() => m(!0), 100);
       return;
     }
-    s.current = window.setTimeout(() => d(!1), 100);
-  }, c = (m) => {
-    t === "hover" && n(m);
+    i.current = window.setTimeout(() => m(!1), 100);
+  }, c = (l) => {
+    t === "hover" && o(l);
   };
   return {
-    onClick: e === "content" ? (m) => {
-      m.stopPropagation(), m.nativeEvent.stopImmediatePropagation();
+    onClick: e === "content" ? (l) => {
+      l.stopPropagation(), l.nativeEvent.stopImmediatePropagation();
     } : () => {
-      t === "click" && (r(!o), a && a(!o));
+      t === "click" && (a(!n), r && r(!n));
     },
     onKeyUp: () => c(!0),
     onMouseEnter: () => c(!0),
@@ -1492,50 +1634,50 @@ const Je = ({
     onFocus: () => c(!0),
     onBlur: () => c(!1)
   };
-}, ie = ({
+}, oe = ({
   triggerType: e = "click",
   outboundClickActive: t = !0,
-  children: o,
-  isOpen: r,
-  placement: a = "bottom",
-  disabled: s = !1,
-  onOpenChange: n,
+  children: n,
+  isOpen: a,
+  placement: r = "bottom",
+  disabled: i = !1,
+  onOpenChange: o,
   "data-testid": c
 }) => {
-  const l = A(null), [u, m] = te.Children.toArray(o), [y, d] = b(!1), p = Je({
-    setIsOpen: d,
-    isOpen: y,
+  const u = A(null), [d, l] = ee.Children.toArray(n), [p, m] = b(!1), y = vt({
+    setIsOpen: m,
+    isOpen: p,
     triggerType: e,
     clickArea: "root"
-  }), h = ke();
-  Ye(l, () => t && d(!1)), E(() => {
-    r !== void 0 && d(r);
-  }, [r]);
-  const v = D(
+  }), f = Be();
+  lt(u, () => t && m(!1)), P(() => {
+    a !== void 0 && m(a);
+  }, [a]);
+  const v = k(
     () => ({
-      dropdownRef: l,
-      placement: a,
-      isOpen: y,
-      setIsOpen: d,
-      onOpenChange: n,
-      dropdownId: h
+      dropdownRef: u,
+      placement: r,
+      isOpen: p,
+      setIsOpen: m,
+      onOpenChange: o,
+      dropdownId: f
     }),
-    [a, y, n, h]
+    [r, p, o, f]
   );
-  return /* @__PURE__ */ i(ue.Provider, { value: v, children: /* @__PURE__ */ i(
+  return /* @__PURE__ */ s(pe.Provider, { value: v, children: /* @__PURE__ */ s(
     "div",
     {
       className: "rmap-dropdown-container",
-      ref: l,
+      ref: u,
       "data-testid": c,
-      ...p,
-      children: /* @__PURE__ */ S(z, { children: [
-        u,
-        !s && m
+      ...y,
+      children: /* @__PURE__ */ w(R, { children: [
+        d,
+        !i && l
       ] })
     }
   ) });
-}, zt = (e, t) => D(() => {
+}, dr = (e, t) => k(() => {
   if (t)
     return {
       position: "absolute",
@@ -1546,213 +1688,192 @@ const Je = ({
       left: e === "right" ? `${t.width}px` : void 0,
       right: e === "left" ? `${t.width}px` : void 0
     };
-}, [t, e]), Wt = ({
+}, [t, e]), mr = ({
   children: e,
   isWithAnimation: t = !0,
-  ...o
+  ...n
 }) => {
-  const { dropdownRef: r, placement: a, isOpen: s, setIsOpen: n, dropdownId: c } = f(ue), [l, u] = b(), { onClick: m } = Je({
-    setIsOpen: n,
-    isOpen: s,
+  const { dropdownRef: a, placement: r, isOpen: i, setIsOpen: o, dropdownId: c } = E(pe), [u, d] = b(), { onClick: l } = vt({
+    setIsOpen: o,
+    isOpen: i,
     clickArea: "content"
-  }), y = () => n(!1), d = () => n(!0);
-  E(() => {
-    r.current && u({
-      width: r.current.offsetWidth,
-      height: r.current.offsetHeight
+  }), p = () => o(!1), m = () => o(!0);
+  P(() => {
+    a.current && d({
+      width: a.current.offsetWidth,
+      height: a.current.offsetHeight
     });
-  }, [r]);
-  const p = zt(a, l), h = l ? /* @__PURE__ */ i(
+  }, [a]);
+  const y = dr(r, u), f = u ? /* @__PURE__ */ s(
     "div",
     {
-      ...o,
+      ...n,
       id: c,
-      style: { ...p, ...o.style },
-      onClick: m,
+      style: { ...y, ...n.style },
+      onClick: l,
       children: e
     }
   ) : null;
-  return t ? /* @__PURE__ */ i(
-    Se,
+  return t ? /* @__PURE__ */ s(
+    ke,
     {
-      visible: s,
+      visible: i,
       name: "rmap-dropdown-content",
       enterTime: 20,
       leaveTime: 60,
       clearTime: 300,
-      onExited: y,
-      onEntered: d,
-      children: h
+      onExited: p,
+      onEntered: m,
+      children: f
     }
-  ) : s ? h : null;
-}, Gt = ({ children: e }) => {
-  const { isOpen: t, setIsOpen: o, dropdownId: r } = f(ue);
-  return /* @__PURE__ */ i(
-    "div",
+  ) : 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,
     {
-      className: "rmap-dropdown-trigger",
-      role: "button",
-      tabIndex: 0,
-      "aria-expanded": t,
-      "aria-controls": r,
-      onKeyDown: (s) => {
-        (s.key === "Enter" || s.key === " ") && (s.preventDefault(), o((n) => !n));
-      },
+      className: o,
+      type: "button",
+      ...n,
+      "aria-haspopup": "true",
+      "aria-expanded": r,
+      "aria-controls": i,
+      ref: a,
       children: e
     }
   );
-};
-ie.Content = Wt;
-ie.Trigger = Gt;
-const jt = ({
+});
+ft.displayName = "DropdownTrigger";
+oe.Content = mr;
+oe.Trigger = ft;
+const pr = ({
   triggerRef: e,
   initialState: t
 }) => {
-  const { playerPlacement: o } = O(), [r, a] = b(t);
-  return E(() => {
+  const { playerPlacement: n } = x(), [a, r] = b(t);
+  return P(() => {
     if (e.current) {
-      const s = () => e.current.getBoundingClientRect().top < window.innerHeight / 2 ? "bottom" : "top", n = setTimeout(() => {
-        a(s());
+      const i = () => e.current.getBoundingClientRect().top < window.innerHeight / 2 ? "bottom" : "top", o = setTimeout(() => {
+        r(i());
       }, 0);
       return () => {
-        clearTimeout(n);
+        clearTimeout(o);
       };
     }
-  }, [o, e]), r;
-}, Yt = () => {
-  const e = A(null), {
-    activeUI: { volumeSlider: t },
-    volumeSliderPlacement: o
-  } = O(), r = jt({
-    triggerRef: e,
+  }, [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({
+    triggerRef: a,
     initialState: "bottom"
-  });
-  return /* @__PURE__ */ S(
-    ie,
+  }), l = z("volume", e);
+  return /* @__PURE__ */ s(_.Item, { gridArea: l, visible: t ?? !0, ...n, children: /* @__PURE__ */ w(
+    oe,
     {
-      placement: o || r,
+      placement: u || d,
       triggerType: "hover",
-      disabled: t === !1,
+      disabled: c === !1,
       "data-testid": "volume-dropdown",
       children: [
-        /* @__PURE__ */ i(ie.Trigger, { children: /* @__PURE__ */ i(je, { ref: e }) }),
-        /* @__PURE__ */ i(ie.Content, { role: "tooltip", children: /* @__PURE__ */ i(
-          Rt,
+        /* @__PURE__ */ s(
+          oe.Trigger,
           {
-            placement: o || r
+            ref: a,
+            "aria-label": r ? "Unmute" : "Mute",
+            "aria-pressed": r,
+            onClick: o,
+            className: "rmap-volume-trigger",
+            "data-testid": "volume-trigger-btn",
+            "data-muted": String(r),
+            children: /* @__PURE__ */ s(ct, {})
+          }
+        ),
+        /* @__PURE__ */ s(oe.Content, { role: "tooltip", children: /* @__PURE__ */ s(
+          ur,
+          {
+            placement: u || d
           }
         ) })
       ]
     }
-  );
-}, qt = () => {
-  var r, a, s, n, c, l, u, m, y, d;
-  const { interfacePlacement: e, activeUI: t } = O(), o = !!(t.prevNnext ?? t.all);
-  return /* @__PURE__ */ S(z, { children: [
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((r = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : r.progress) || ((a = e == null ? void 0 : e.templateArea) == null ? void 0 : a.progress) || k.templateArea.progress,
-        width: "100%",
-        visible: !!(t.progress !== void 0 ? t.progress : t.all),
-        children: /* @__PURE__ */ i(Ht, {})
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((s = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : s.repeatType) || ((n = e == null ? void 0 : e.templateArea) == null ? void 0 : n.repeatType) || k.templateArea.repeatType,
-        visible: !!(t.repeatType ?? t.all),
-        children: /* @__PURE__ */ i(Pt, {})
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((c = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : c.playButton) || ((l = e == null ? void 0 : e.templateArea) == null ? void 0 : l.playButton) || k.templateArea.playButton,
-        visible: !!(t.playButton ?? t.all),
-        children: /* @__PURE__ */ S("div", { className: "rmap-ctrl-btn-wrapper", children: [
-          /* @__PURE__ */ i(Et, { isVisible: o }),
-          /* @__PURE__ */ i(At, {}),
-          /* @__PURE__ */ i(It, { isVisible: o })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((u = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : u.volume) || ((m = e == null ? void 0 : e.templateArea) == null ? void 0 : m.volume) || k.templateArea.volume,
-        visible: !!(t.volume ?? t.all),
-        children: /* @__PURE__ */ i(Yt, {})
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((y = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : y.playList) || ((d = e == null ? void 0 : e.templateArea) == null ? void 0 : d.playList) || k.templateArea.playList,
-        visible: !!(t.playList ?? t.all),
-        children: /* @__PURE__ */ i(Ot, {})
-      }
-    )
+  ) });
+}, 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") })
   ] });
-}, Xt = W(function() {
-  const { playList: t, curIdx: o } = V(), { coverImgsCss: r } = P(), a = t[o], s = [a == null ? void 0 : a.writer, a == null ? void 0 : a.name].filter(Boolean).join(" - ") || "Album artwork";
-  return /* @__PURE__ */ i("div", { className: "rmap-artwork-container", children: a != null && a.img ? /* @__PURE__ */ i("img", { src: a.img, alt: s, style: r == null ? void 0 : r.artwork }) : /* @__PURE__ */ i(
+}, Tt = G(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(
     "div",
     {
       className: "rmap-artwork-fallback",
       role: "img",
-      "aria-label": s,
-      style: r == null ? void 0 : r.artwork,
-      children: (a == null ? void 0 : a.name) || "♪"
+      "aria-label": u,
+      style: o == null ? void 0 : o.artwork,
+      children: (c == null ? void 0 : c.name) || "♪"
     }
-  ) });
-}), Qt = W(function() {
-  const { playList: t, curIdx: o } = V(), r = t[o];
-  return /* @__PURE__ */ i("div", { className: "rmap-track-info-container", children: r != null && r.customTrackInfo ? r.customTrackInfo : /* @__PURE__ */ S(z, { children: [
-    (r == null ? void 0 : r.name) && /* @__PURE__ */ i("span", { className: "title", "data-testid": "track-title", children: r.name }),
-    (r == null ? void 0 : r.writer) && /* @__PURE__ */ i("span", { className: "writer", children: r.writer })
-  ] }) });
-}), Ze = ({ position: e, className: t, children: o, ...r }) => /* @__PURE__ */ i(
+  ) }) });
+}), Me = G(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 })
+  ] }) }) });
+});
+Me.displayName = "TrackInfo";
+const gt = ({ position: e, className: t, children: n, ...a }) => /* @__PURE__ */ s(
   "div",
   {
     className: `rmap-track-time-container${t ? ` ${t}` : ""}`,
     "data-position": e,
-    ...r,
-    children: o
+    ...a,
+    children: n
   }
-), Jt = ({ position: e }) => {
-  const { currentTime: t } = re();
-  return /* @__PURE__ */ i(Ze, { position: e, className: "rmap-track-time-current", children: /* @__PURE__ */ i(
+), vr = ({ position: e }) => {
+  const { currentTime: t } = te();
+  return /* @__PURE__ */ s(gt, { position: e, className: "rmap-track-time-current", children: /* @__PURE__ */ s(
     "span",
     {
       className: "rmap-track-current-time",
       "data-testid": "track-current-time",
-      children: ee(t)
+      children: Z(t)
     }
   ) });
-}, Zt = ({ position: e }) => {
-  const { duration: t } = re();
-  return /* @__PURE__ */ i(
-    Ze,
+}, fr = ({ position: e }) => {
+  const { duration: t } = te();
+  return /* @__PURE__ */ s(
+    gt,
     {
       position: e,
       className: "rmap-track-time-duration",
-      children: /* @__PURE__ */ i("span", { className: "rmap-track-duration", children: ee(t) })
+      children: /* @__PURE__ */ s("span", { className: "rmap-track-duration", children: Z(t) })
     }
   );
-}, er = () => {
-  var c, l, u, m, y, d, p, h;
-  const { interfacePlacement: e, activeUI: t } = O(), o = g(
-    (v) => +v.split(/[^\d]/).join(""),
+}, Et = ({ visible: e }) => {
+  const t = z("trackTimeCurrent"), n = z("trackTimeDuration"), a = g(
+    (d) => +d.split(/[^\d]/).join(""),
     []
-  ), r = o(
-    ((c = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : c.trackTimeCurrent) || ((l = e == null ? void 0 : e.templateArea) == null ? void 0 : l.trackTimeCurrent) || k.templateArea.trackTimeCurrent
-  ), a = o(
-    ((u = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : u.trackTimeDuration) || ((m = e == null ? void 0 : e.templateArea) == null ? void 0 : m.trackTimeDuration) || k.templateArea.trackTimeDuration
-  ), s = g(
-    (v) => {
-      switch (v) {
+  ), r = a(t), i = a(n), o = g(
+    (d) => {
+      switch (d) {
         case 1:
           return "right";
         case -1:
@@ -1762,296 +1883,357 @@ const jt = ({
       }
     },
     []
-  ), n = {
-    current: s(r - a),
-    duration: s(a - r)
-  };
-  return /* @__PURE__ */ S(z, { children: [
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((y = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : y.trackTimeCurrent) || ((d = e == null ? void 0 : e.templateArea) == null ? void 0 : d.trackTimeCurrent) || k.templateArea.trackTimeCurrent,
-        visible: !!(t.trackTime ?? t.all),
-        children: /* @__PURE__ */ i(Jt, { position: n.current })
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((p = e == null ? void 0 : e.itemCustomArea) == null ? void 0 : p.trackTimeDuration) || ((h = e == null ? void 0 : e.templateArea) == null ? void 0 : h.trackTimeDuration) || k.templateArea.trackTimeDuration,
-        visible: !!(t.trackTime ?? t.all),
-        children: /* @__PURE__ */ i(Zt, { position: n.duration })
-      }
-    )
+  ), c = {
+    current: o(r - i),
+    duration: o(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 }) })
   ] });
-}, tr = () => {
-  var s, n, c, l, u, m, y, d;
-  const { playList: e, curIdx: t } = V(), { interfacePlacement: o, activeUI: r } = O(), a = !!(((s = e[t]) == null ? void 0 : s.customTrackInfo) ?? ((n = e[t]) == null ? void 0 : n.writer) ?? ((c = e[t]) == null ? void 0 : c.name)) && !!(r.trackInfo ?? r.all);
-  return /* @__PURE__ */ S(z, { children: [
-    /* @__PURE__ */ i(
-      M.Item,
-      {
-        gridArea: ((l = o == null ? void 0 : o.itemCustomArea) == null ? void 0 : l.artwork) || ((u = o == null ? void 0 : o.templateArea) == null ? void 0 : u.artwork) || k.templateArea.artwork,
-        visible: !!((m = e[t]) != null && m.img && (r.artwork ?? r.all)),
-        children: /* @__PURE__ */ i(Xt, {})
-      }
-    ),
-    /* @__PURE__ */ i(
-      M.Item,
+}, 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,
       {
-        gridArea: ((y = o == null ? void 0 : o.itemCustomArea) == null ? void 0 : y.trackInfo) || ((d = o == null ? void 0 : o.templateArea) == null ? void 0 : d.trackInfo) || k.templateArea.trackInfo,
-        visible: a,
-        children: /* @__PURE__ */ i(Qt, {})
+        visible: !!((c = e[t]) != null && c.img && (n.artwork ?? n.all))
       }
     ),
-    /* @__PURE__ */ i(er, {})
+    /* @__PURE__ */ s(Me, { visible: a }),
+    /* @__PURE__ */ s(Et, { visible: !!(n.trackTime ?? n.all) })
   ] });
-}, rr = (e, t, o) => {
-  const r = g(
-    (d, p, h) => {
-      const v = Object.keys(
-        k.templateArea
-      ).filter((I) => (I === "trackTimeCurrent" || I === "trackTimeDuration") && d.trackTime === !1 ? !1 : d[I] !== void 0 ? d[I] : !0), T = d.all ? v : Object.entries(d).filter(([, I]) => I).map(([I]) => I);
+}, Ee = {
+  Progress: { displayName: "Progress", activeUIKey: "progress" },
+  Volume: { displayName: "Volume", activeUIKey: "volume" },
+  SortablePlayList: { displayName: "PlayList", activeUIKey: "playList" },
+  TransportControls: { displayName: "PlayButton", activeUIKey: "playButton" },
+  RepeatTypeBtn: { displayName: "RepeatButton", activeUIKey: "repeatType" },
+  Artwork: { displayName: "Artwork", activeUIKey: "artwork" },
+  TrackInfo: { displayName: "TrackInfo", activeUIKey: "trackInfo" },
+  TrackTime: { displayName: "TrackTime", activeUIKey: "trackTime" }
+};
+function Tr(e, t) {
+  const n = e[t];
+  return n === !1 ? !1 : n !== void 0 ? !0 : !!e.all;
+}
+function _e(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(
+      (h) => {
+        var I;
+        return h ? (I = Ee[h]) == null ? void 0 : I.activeUIKey : void 0;
+      }
+    ).filter((h) => h !== void 0),
+    [a]
+  ), i = k(
+    () => [...r].sort().join(","),
+    [r]
+  ), o = g(
+    (h, I, B, re) => {
+      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);
       (() => {
-        T.find((I) => I === "trackTime") && (T.splice(T.indexOf("trackTime"), 1), T.push("trackTimeCurrent"), T.push("trackTimeDuration"));
+        D.find((S) => S === "trackTime") && (D.splice(D.indexOf("trackTime"), 1), D.push("trackTimeCurrent"), D.push("trackTimeDuration"));
       })();
-      const N = {
-        ...k.templateArea,
-        ...p
-      }, B = Object.entries(
-        N
-      ).filter(([I]) => T.includes(I));
-      let R = 1;
-      const G = {}, ae = [
-        ...B,
-        ...Object.entries(h || {})
-      ].flatMap(([I, _]) => {
-        if (_ == null) return [];
-        const [K, $] = _.split("-"), j = +K.split("row")[1];
-        return R = Math.max(R, j), G[j] = G[j] ? G[j] + 1 : 1, [
+      const q = {
+        ...de.templateArea,
+        ...I
+      }, At = Object.entries(
+        q
+      ).filter(([S]) => D.includes(S));
+      let le = 1;
+      const ue = {}, It = [
+        ...At,
+        ...Object.entries(B || {})
+      ].flatMap(([S, 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, [
           {
-            key: I,
-            row: j,
-            col: +$
+            key: S,
+            row: W,
+            col: +F
           }
         ];
-      }).sort((I, _) => I.col - _.col), X = Math.max(...Object.values(G));
-      let oe;
-      const et = new Array(R).fill("").map((I, _) => {
-        let K = "", $;
-        const j = ae.filter((U) => U.row !== _ + 1 ? !1 : (U.key === "progress" && ($ = U), !0));
-        if ($) {
-          const U = /* @__PURE__ */ new Map();
-          j.forEach((Q) => U.set(Q.col, Q));
-          const de = `row${_ + 1}-${$.col}`, ne = [];
-          for (let Q = 0; Q < X; Q++) {
-            const Pe = Q + 1;
-            U.has(Pe) ? ne.push(`row${_ + 1}-${Pe}`) : ne.push(de);
+      }).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) {
+          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);
           }
-          const at = ne.indexOf(de), ot = ne.lastIndexOf(de);
-          oe = Math.floor((at + ot) / 2), K = " " + ne.join(" ");
+          const Nt = ae.indexOf(ve), bt = ae.lastIndexOf(ve);
+          De = Math.floor((Nt + bt) / 2), $ = " " + ae.join(" ");
         } else
-          for (let U = 0; U < X; U++)
-            K += ` row${_ + 1}-${U + 1}`;
-        return K.trimStart();
-      }), tt = qe ? window.innerWidth - 100 : 1500, rt = new Array(R).fill("").map((I, _) => {
-        let K = "";
-        for (let $ = 0; $ < X; $++) {
-          if (oe === $ && _ === 0) {
-            K += " 1fr";
+          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";
             continue;
           }
-          K += ` fit-content(${tt}px)`;
+          $ += ` fit-content(${wt}px)`;
         }
-        return K.trimStart();
+        return $.trimStart();
       });
-      return { gridAreas: et, gridColumns: rt };
+      return { gridAreas: St, gridColumns: Lt };
     },
     []
-  ), [a, s] = b(e), [n, c] = b({
+  ), [c, u] = b(e), [d, l] = b(i), [p, m] = b({
     templateArea: t,
-    customComponentsArea: o
-  }), [l, u] = b();
-  if (!l) {
-    const { gridAreas: d, gridColumns: p } = r(
-      a,
-      n.templateArea,
-      n.customComponentsArea
+    customComponentsArea: n
+  }), [y, f] = b();
+  if (!y) {
+    const { gridAreas: h, gridColumns: I } = o(
+      c,
+      p.templateArea,
+      p.customComponentsArea,
+      r
     );
-    return u({ gridAreas: d, gridColumns: p }), [d, p];
+    return f({ gridAreas: h, gridColumns: I }), [h, I];
   }
-  if (a !== e || n.templateArea !== t || n.customComponentsArea !== o) {
-    s(e), c({ templateArea: t, customComponentsArea: o });
-    const { gridAreas: d, gridColumns: p } = r(
+  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(
       e,
       t,
-      o
+      n,
+      r
     );
-    u({ gridAreas: d, gridColumns: p });
+    f({ gridAreas: h, gridColumns: I });
   }
-  const { gridAreas: m, gridColumns: y } = l;
-  return [m, y];
-}, ar = ({ children: e }) => {
-  const { interfacePlacement: t, activeUI: o, playListPlacement: r } = O(), a = te.Children.toArray(e), [s, n] = rr(
-    o,
+  const { gridAreas: v, gridColumns: T } = y;
+  return [v, T];
+};
+function Er(e) {
+  return k(() => {
+    const t = ee.Children.toArray(e).filter(Mt), n = t.find(Ke);
+    return {
+      compoundChildren: t.filter(
+        (a) => !Ke(a)
+      ),
+      playListEmptyNode: Pr(n)
+    };
+  }, [e]);
+}
+function Ke(e) {
+  return _e(e) === ze;
+}
+function Pr(e) {
+  if (!e) return null;
+  const t = e.props;
+  return (t == null ? void 0 : t.children) ?? null;
+}
+function Ar({
+  compoundChildren: e,
+  activeUI: t
+}) {
+  const n = e.map(_e).filter((a) => !!(a && Ee[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(
+        `[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(
+    n,
     t == null ? void 0 : t.templateArea,
-    t == null ? void 0 : t.customComponentsArea
-  );
-  return /* @__PURE__ */ S(
+    t == null ? void 0 : t.customComponentsArea,
+    r
+  ), [u, d] = b(null);
+  return /* @__PURE__ */ s(
     "div",
     {
       className: "rmap-interface-container",
       "data-testid": "audio-player",
       role: "region",
       "aria-label": "Audio player",
-      children: [
-        r === "top" && /* @__PURE__ */ i("div", { className: "rmap-sortable-playlist" }),
-        /* @__PURE__ */ S(
-          M,
+      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" }),
+        /* @__PURE__ */ w(
+          _,
           {
             alignItems: "center",
             justifyContent: "center",
-            areas: s,
+            areas: o,
             minHeight: "30px",
-            columns: n,
+            columns: c,
             UNSAFE_className: "rmap-interface-grid",
             children: [
-              /* @__PURE__ */ i(tr, {}),
-              /* @__PURE__ */ i(qt, {}),
-              a
+              /* @__PURE__ */ s(hr, {}),
+              /* @__PURE__ */ s(yr, {}),
+              r
             ]
           }
         ),
-        r === "bottom" && /* @__PURE__ */ i("div", { className: "rmap-sortable-playlist" })
-      ]
+        a === "bottom" && /* @__PURE__ */ s("div", { ref: d, className: "rmap-sortable-playlist" })
+      ] }) })
     }
   );
-}, Z = (e, t) => {
-  const o = A(!1);
-  E(() => {
-    if (o.current)
+}, J = (e, t) => {
+  const n = A(!1);
+  P(() => {
+    if (n.current)
       return e();
-  }, t), E(() => (o.current = !0, () => {
-    o.current = !1;
+  }, t), P(() => (n.current = !0, () => {
+    n.current = !1;
   }), []);
-}, or = ({
+}, Sr = ({
   placement: e = {},
   activeUI: t,
-  coverImgsCss: o,
-  audioInitialState: r,
-  playList: a,
-  customIcons: s
+  coverImgsCss: n,
+  audioInitialState: a,
+  playList: r,
+  customIcons: i
 }) => {
-  const n = f(w);
-  Z(() => {
+  const o = E(L);
+  J(() => {
     const {
       player: c,
-      playList: l,
-      interface: u,
-      volumeSlider: m
+      playList: u,
+      interface: d,
+      volumeSlider: l
     } = e;
-    n({
+    o({
       type: "SET_PLACEMENTS",
       playerPlacement: c,
-      playListPlacement: l,
-      interfacePlacement: u,
-      volumeSliderPlacement: m
+      playListPlacement: u,
+      interfacePlacement: d,
+      volumeSliderPlacement: l
     });
-  }, [n, e]), Z(() => {
-    t && n({ type: "SET_ACTIVE_UI", activeUI: t });
-  }, [t, n]), Z(() => {
-    o && n({ type: "SET_COVER_IMGS_CSS", coverImgsCss: o });
-  }, [n, o]), Z(() => {
-    r && n({
+  }, [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({
       type: "SET_INITIAL_STATES",
-      audioState: r,
-      curPlayId: r.curPlayId
+      audioState: a,
+      curPlayId: a.curPlayId
     });
-  }, [r, n]), Z(() => {
-    n({ type: "UPDATE_PLAY_LIST", playList: a });
-  }, [n, a]), Z(() => {
-    s && n({ type: "SET_CUSTOM_ICONS", customIcons: s });
-  }, [s, n]);
-}, nr = ({
+  }, [a, o]), J(() => {
+    o({ type: "UPDATE_PLAY_LIST", playList: r });
+  }, [o, r]), J(() => {
+    i && o({ type: "SET_CUSTOM_ICONS", customIcons: i });
+  }, [i, o]);
+}, wr = ({
   audioRef: e,
   children: t,
-  ...o
-}) => (or(o), /* @__PURE__ */ S("div", { id: "rm-audio-player", className: "rmap-player-container", children: [
-  /* @__PURE__ */ i(_e, { audioRef: e }),
-  /* @__PURE__ */ i(ar, { 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 })
 ] }));
-function we({
+function Pt({
   rootContainerProps: e,
   ...t
 }) {
-  return /* @__PURE__ */ i(yt, { ...t, children: /* @__PURE__ */ i(Ce, { rootContainerProps: e, children: /* @__PURE__ */ i(nr, { ...t }) }) });
+  return /* @__PURE__ */ s(Kt, { ...t, children: /* @__PURE__ */ s(He, { rootContainerProps: e, children: /* @__PURE__ */ s(wr, { ...t }) }) });
 }
-we.displayName = "AudioPlayerWithProviders";
-we.CustomComponent = xe;
-const sr = () => {
-  const e = f(w), { isPlaying: t, repeatType: o } = C(), r = g(() => {
+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(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !0 });
-  }, [e]), a = g(() => {
+  }, [e]), r = g(() => {
     e({ type: "CHANGE_PLAYING_STATE", state: !1 });
-  }, [e]), s = g(() => {
+  }, [e]), i = g(() => {
     e({ type: "CHANGE_PLAYING_STATE" });
   }, [e]);
-  return { isPlaying: t, repeatType: o, play: r, pause: a, togglePlay: s };
-}, ir = () => {
-  const e = f(w), { playList: t, curIdx: o, curPlayId: r } = V(), { elementRefs: a } = P(), s = g(
-    (l) => {
-      const u = t[l];
-      u && 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(
+    (u) => {
+      const d = t[u];
+      d && e({
         type: "SET_CURRENT_AUDIO",
-        currentIndex: l,
-        currentAudioId: u.id
+        currentIndex: u,
+        currentAudioId: d.id
       });
     },
     [e, t]
-  ), n = g(() => {
+  ), o = g(() => {
     t.length !== 0 && e({ type: "NEXT_AUDIO" });
   }, [e, t.length]), c = g(() => {
-    var u;
+    var d;
     if (t.length === 0) return;
-    const l = ((u = a == null ? void 0 : a.audioEl) == null ? void 0 : u.currentTime) ?? 0;
-    e({ type: "PREV_AUDIO", currentTime: l });
-  }, [e, t.length, a == null ? void 0 : a.audioEl]);
+    const u = ((d = r == null ? void 0 : r.audioEl) == null ? void 0 : d.currentTime) ?? 0;
+    e({ type: "PREV_AUDIO", currentTime: u });
+  }, [e, t.length, r == null ? void 0 : r.audioEl]);
   return {
-    currentPlayId: r,
-    currentIndex: o,
+    currentPlayId: a,
+    currentIndex: n,
     playList: t,
-    currentTrack: t[o] ?? null,
-    setTrack: s,
-    next: n,
+    currentTrack: t[n] ?? null,
+    setTrack: i,
+    next: o,
     prev: c
   };
-}, lr = () => {
-  const e = f(w), { volume: t, muted: o } = C(), r = g(
-    (s) => {
-      e({ type: "SET_VOLUME", volume: s });
+}, br = () => {
+  const e = E(L), { volume: t, muted: n } = C(), a = g(
+    (i) => {
+      e({ type: "SET_VOLUME", volume: i });
     },
     [e]
-  ), a = g(() => {
-    e({ type: "SET_MUTED", muted: !o });
-  }, [e, o]);
-  return { volume: t, muted: o, setVolume: r, toggleMute: a };
-}, cr = () => {
-  const e = f(w), { currentTime: t, duration: o } = re(), r = g(
-    (a) => {
-      e({ type: "SEEK", time: a });
+  ), r = g(() => {
+    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) => {
+      e({ type: "SEEK", time: r });
     },
     [e]
   );
-  return { currentTime: t, duration: o, seek: r };
-}, yr = () => {
-  const e = sr(), t = ir(), o = lr(), r = cr();
+  return { currentTime: t, duration: n, seek: a };
+}, Ur = () => {
+  const e = Lr(), t = Nr(), n = br(), a = kr();
   return {
     isPlaying: e.isPlaying,
-    volume: o.volume,
-    currentTime: r.currentTime,
-    duration: r.duration,
+    volume: n.volume,
+    currentTime: a.currentTime,
+    duration: a.duration,
     repeatType: e.repeatType,
-    muted: o.muted,
+    muted: n.muted,
     currentTrack: t.currentTrack,
     currentIndex: t.currentIndex,
     playList: t.playList,
@@ -2060,39 +2242,44 @@ const sr = () => {
     togglePlay: e.togglePlay,
     next: t.next,
     prev: t.prev,
-    seek: r.seek,
-    setVolume: o.setVolume,
-    toggleMute: o.toggleMute,
+    seek: a.seek,
+    setVolume: n.setVolume,
+    toggleMute: n.toggleMute,
     setTrack: t.setTrack
   };
-}, vr = () => {
-  const { elementRefs: e } = P();
+}, Or = () => {
+  const { elementRefs: e } = N();
   return {
     audioEl: e == null ? void 0 : e.audioEl,
     waveformInst: e == null ? void 0 : e.waveformInst
   };
 };
-we.CustomComponent = xe;
 export {
-  nr as AudioPlayer,
-  Ce as AudioPlayerContainer,
-  yt as AudioPlayerStateProvider,
-  F as DEFAULT_AUDIO_STATE,
-  Te as audioAttrsContext,
-  w as audioPlayerDispatchContext,
-  mt as audioPlayerReducer,
-  we as default,
-  k as defaultInterfacePlacement,
-  pr as defaultInterfacePlacementMaxLength,
-  he as playbackContext,
-  Ae as resourceContext,
-  Ee as timeContext,
-  ge as trackContext,
-  fe as uiContext,
-  yr as useAudioPlayer,
-  vr as useAudioPlayerElement,
-  sr as useAudioPlayerPlayback,
-  cr as useAudioPlayerTime,
-  ir as useAudioPlayerTrack,
-  lr as useAudioPlayerVolume
+  wr as AudioPlayer,
+  He as AudioPlayerContainer,
+  Kt as AudioPlayerStateProvider,
+  H as DEFAULT_AUDIO_STATE,
+  Ie as audioAttrsContext,
+  L as audioPlayerDispatchContext,
+  Ut as audioPlayerReducer,
+  Dr as default,
+  de as defaultInterfacePlacement,
+  _r as defaultInterfacePlacementMaxLength,
+  Ae 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
 };