@waveform-playlist/browser 5.3.1 → 5.3.2

package/dist/index.mjs

@@ -7221,10 +7221,10 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
   );
 }, $l = ({ className: e, disabled: t }) => {
   const { zoomIn: n } = ve(), { canZoomIn: r } = Te();
-  return /* @__PURE__ */ C(Ye, { variant: "success", onClick: n, disabled: t || !r, className: e, children: "Zoom In" });
+  return /* @__PURE__ */ C(Ye, { onClick: n, disabled: t || !r, className: e, children: "Zoom In" });
 }, Ml = ({ className: e, disabled: t }) => {
   const { zoomOut: n } = ve(), { canZoomOut: r } = Te();
-  return /* @__PURE__ */ C(Ye, { variant: "success", onClick: n, disabled: t || !r, className: e, children: "Zoom Out" });
+  return /* @__PURE__ */ C(Ye, { onClick: n, disabled: t || !r, className: e, children: "Zoom Out" });
 }, El = ({ className: e }) => {
   const { masterVolume: t } = Te(), { setMasterVolume: n } = ve();
   return /* @__PURE__ */ C(
@@ -7375,12 +7375,15 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
       children: h
     }
   );
-}, Mi = M.div`
+}, Mi = M.div.attrs((e) => ({
+  style: {
+    width: `${e.$width}px`,
+    background: e.$color
+  }
+}))`
   position: absolute;
   top: 0;
   left: 0;
-  width: ${(e) => e.$width}px;
-  background: ${(e) => e.$color};
   height: 100%;
   z-index: 100; /* Below sticky controls (z-index: 101) so playhead is hidden when scrolled behind controls */
   pointer-events: none;
@@ -7415,24 +7418,30 @@ const Mr = Ee(null), Er = Ee(null), Dr = Ee(null), Tr = Ee(null), bl = ({
   }), /* @__PURE__ */ C(Mi, { ref: n, $color: e, $width: u, "data-playhead": !0 });
 }, Di = M.div`
   position: relative;
-`, jt = M.div`
+`, jt = M.div.attrs((e) => ({
+  style: {
+    top: `${e.$top}px`,
+    width: `${e.$width}px`,
+    height: `${e.$height}px`,
+    background: e.$color
+  }
+}))`
   position: absolute;
-  top: ${(e) => e.$top}px;
   left: 0;
-  width: ${(e) => e.$width}px;
-  height: ${(e) => e.$height}px;
-  background: ${(e) => e.$color};
   z-index: 0;
   /* Force GPU compositing layer to prevent gradient flickering during scroll */
   transform: translateZ(0);
   backface-visibility: hidden;
   will-change: transform;
-`, Ti = M.div`
+`, Ti = M.div.attrs((e) => ({
+  style: {
+    top: `${e.$top}px`,
+    height: `${e.$height}px`,
+    background: e.$color
+  }
+}))`
   position: absolute;
-  top: ${(e) => e.$top}px;
   left: 0;
-  height: ${(e) => e.$height}px;
-  background: ${(e) => e.$color};
   pointer-events: none;
   z-index: 1;
   will-change: width;