wimui 0.62.2 → 0.63.1

package/dist/components/media/ImageCompare/ImageCompare.js

@@ -1,103 +1,105 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
 import { commonNs as t } from "../../../i18n/generated/common.js";
-import n from "../../../icon/chevron-left.js";
-import r from "../../../icon/chevron-right.js";
-import { Icon as i } from "../Icon/Icon.js";
-import a from "./image-compare.module.js";
-import o, { useCallback as s, useRef as c, useState as l } from "react";
-import u from "classnames";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { composeEventHandlers as n } from "../../_internal/composeEventHandlers.js";
+import r from "../../../icon/chevron-left.js";
+import i from "../../../icon/chevron-right.js";
+import { Icon as a } from "../Icon/Icon.js";
+import o from "./image-compare.module.js";
+import s, { useCallback as c, useRef as l, useState as u } from "react";
+import d from "classnames";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/media/ImageCompare/ImageCompare.tsx
-var p = (e) => Math.max(0, Math.min(100, e)), m = o.forwardRef(({ before: o, after: m, beforeAlt: h = "", afterAlt: g = "", beforeLabel: _, afterLabel: v, defaultPosition: y = 50, position: b, onPositionChange: x, orientation: S = "horizontal", width: C, height: w, radius: T = "md", labels: E, className: D, "aria-label": O, "aria-labelledby": k, "aria-describedby": A, ...j }, M) => {
-	let { t: N } = e(t), { handleAriaLabel: P = N("imageCompare.handle") } = E ?? {}, F = b !== void 0, [I, L] = l(p(y)), R = p(F ? b : I), z = S === "vertical", B = c(null), V = c(!1), H = s((e) => {
-		B.current = e, typeof M == "function" ? M(e) : M && (M.current = e);
-	}, [M]), U = s((e) => {
-		let t = p(e);
-		F || L(t), x?.(t);
-	}, [F, x]), W = s((e, t) => {
-		let n = B.current?.getBoundingClientRect();
+var m = (e) => Math.max(0, Math.min(100, e)), h = s.forwardRef(({ before: s, after: h, beforeAlt: g = "", afterAlt: _ = "", beforeLabel: v, afterLabel: y, defaultPosition: b = 50, position: x, onPositionChange: S, orientation: C = "horizontal", width: w, height: T, radius: E = "md", labels: D, className: O, "aria-label": k, "aria-labelledby": A, "aria-describedby": j, ...M }, N) => {
+	let { t: P } = e(t), { handleAriaLabel: F = P("imageCompare.handle") } = D ?? {}, I = x !== void 0, [L, R] = u(m(b)), z = m(I ? x : L), B = C === "vertical", V = l(null), H = l(!1), U = c((e) => {
+		V.current = e, typeof N == "function" ? N(e) : N && (N.current = e);
+	}, [N]), W = c((e) => {
+		let t = m(e);
+		I || R(t), S?.(t);
+	}, [I, S]), G = c((e, t) => {
+		let n = V.current?.getBoundingClientRect();
 		if (!n) return;
-		let r = z ? (t - n.top) / n.height * 100 : (e - n.left) / n.width * 100;
-		U(r);
-	}, [z, U]), G = (e) => {
-		V.current = !0, e.currentTarget.setPointerCapture(e.pointerId), W(e.clientX, e.clientY);
-	}, K = (e) => {
-		V.current && W(e.clientX, e.clientY);
+		let r = B ? (t - n.top) / n.height * 100 : (e - n.left) / n.width * 100;
+		W(r);
+	}, [B, W]), K = (e) => {
+		H.current = !0, e.currentTarget.setPointerCapture(e.pointerId), G(e.clientX, e.clientY);
 	}, q = (e) => {
-		V.current = !1, e.currentTarget.releasePointerCapture?.(e.pointerId);
+		H.current && G(e.clientX, e.clientY);
 	}, J = (e) => {
-		let t = e.shiftKey ? 10 : 2, n = z ? "ArrowUp" : "ArrowLeft", r = z ? "ArrowDown" : "ArrowRight";
-		e.key === n ? (e.preventDefault(), U(R - t)) : e.key === r ? (e.preventDefault(), U(R + t)) : e.key === "Home" ? (e.preventDefault(), U(0)) : e.key === "End" && (e.preventDefault(), U(100));
-	}, Y = z ? { clipPath: `inset(0 0 ${100 - R}% 0)` } : { clipPath: `inset(0 ${100 - R}% 0 0)` }, X = z ? { top: `${R}%` } : { left: `${R}%` };
-	return /* @__PURE__ */ f("div", {
-		ref: H,
-		className: u("wim-image-compare", a.root, z && a.vertical, a[`radius-${T}`], D),
+		H.current = !1, e.currentTarget.releasePointerCapture?.(e.pointerId);
+	}, Y = (e) => {
+		let t = e.shiftKey ? 10 : 2, n = B ? "ArrowUp" : "ArrowLeft", r = B ? "ArrowDown" : "ArrowRight";
+		e.key === n ? (e.preventDefault(), W(z - t)) : e.key === r ? (e.preventDefault(), W(z + t)) : e.key === "Home" ? (e.preventDefault(), W(0)) : e.key === "End" && (e.preventDefault(), W(100));
+	}, X = B ? { clipPath: `inset(0 0 ${100 - z}% 0)` } : { clipPath: `inset(0 ${100 - z}% 0 0)` }, Z = B ? { top: `${z}%` } : { left: `${z}%` };
+	return /* @__PURE__ */ p("div", {
+		ref: U,
+		className: d("wim-image-compare", o.root, B && o.vertical, o[`radius-${E}`], O),
+		...M,
+		onPointerDown: n(M.onPointerDown, K),
+		onPointerMove: n(M.onPointerMove, q),
+		onPointerUp: n(M.onPointerUp, J),
 		style: {
-			width: C,
-			height: w
+			width: w,
+			height: T,
+			...M.style
 		},
-		onPointerDown: G,
-		onPointerMove: K,
-		onPointerUp: q,
-		...j,
 		children: [
-			/* @__PURE__ */ d("img", {
-				className: a.image,
-				src: m,
-				alt: g,
+			/* @__PURE__ */ f("img", {
+				className: o.image,
+				src: h,
+				alt: _,
 				draggable: !1
 			}),
-			v && /* @__PURE__ */ d("span", {
-				className: u(a.label, a.afterLabel),
-				children: v
+			y && /* @__PURE__ */ f("span", {
+				className: d(o.label, o.afterLabel),
+				children: y
 			}),
-			/* @__PURE__ */ f("div", {
-				className: a.beforeLayer,
-				style: Y,
-				children: [/* @__PURE__ */ d("img", {
-					className: a.image,
-					src: o,
-					alt: h,
+			/* @__PURE__ */ p("div", {
+				className: o.beforeLayer,
+				style: X,
+				children: [/* @__PURE__ */ f("img", {
+					className: o.image,
+					src: s,
+					alt: g,
 					draggable: !1
-				}), _ && /* @__PURE__ */ d("span", {
-					className: u(a.label, a.beforeLabel),
-					children: _
+				}), v && /* @__PURE__ */ f("span", {
+					className: d(o.label, o.beforeLabel),
+					children: v
 				})]
 			}),
-			/* @__PURE__ */ f("div", {
-				className: a.divider,
-				style: X,
-				children: [/* @__PURE__ */ d("span", {
-					className: a.line,
+			/* @__PURE__ */ p("div", {
+				className: o.divider,
+				style: Z,
+				children: [/* @__PURE__ */ f("span", {
+					className: o.line,
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ f("button", {
+				}), /* @__PURE__ */ p("button", {
 					type: "button",
-					className: a.handle,
+					className: o.handle,
 					role: "slider",
-					"aria-label": k ? void 0 : O ?? P,
-					"aria-labelledby": k,
-					"aria-describedby": A,
-					"aria-orientation": S,
-					"aria-valuenow": Math.round(R),
+					"aria-label": A ? void 0 : k ?? F,
+					"aria-labelledby": A,
+					"aria-describedby": j,
+					"aria-orientation": C,
+					"aria-valuenow": Math.round(z),
 					"aria-valuemin": 0,
 					"aria-valuemax": 100,
-					onKeyDown: J,
-					onPointerDown: G,
-					children: [/* @__PURE__ */ d(i, {
-						component: n,
-						size: "sm",
-						className: a.arrow
-					}), /* @__PURE__ */ d(i, {
+					onKeyDown: Y,
+					onPointerDown: K,
+					children: [/* @__PURE__ */ f(a, {
 						component: r,
 						size: "sm",
-						className: a.arrow
+						className: o.arrow
+					}), /* @__PURE__ */ f(a, {
+						component: i,
+						size: "sm",
+						className: o.arrow
 					})]
 				})]
 			})
 		]
 	});
 });
-m.displayName = "ImageCompare";
+h.displayName = "ImageCompare";
 //#endregion
-export { m as ImageCompare };
+export { h as ImageCompare };

package/dist/components/media/Video/Video.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../Icon/Icon.cjs"),ee=require("../../../hooks/useMediaLoader.cjs"),i=require("./hooks/useVideoPlayer.cjs"),a=require("./components/VideoAdvancedMenu.cjs"),o=require("./components/VideoControls.cjs"),s=require("./video.module.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("classnames");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=({src:e,width:d,height:te,autoPlay:f=!1,loop:p=!1,muted:m=!1,controls:h=!0,poster:g,radius:_=`none`,shadow:v=!1,border:y=!1,fit:b=`cover`,preload:x,caption:S,className:C,style:ne,customControls:w=!1,advancedControls:T=!1,videoId:E,resumePlayback:D=!1,playlist:O,autoPlayNext:k=!1,qualities:A,loading:j=`lazy`,fadeIn:M=!1,demoDelay:N,labels:P={},tracks:F,...I})=>{let{t:L}=t.useWimTranslation(n.commonNs),{videoAriaLabel:R=L(`video.label`),seconds:z=`s`}=P,{containerRef:B,isLoaded:V,isIntersecting:H,notifyLoaded:U,shouldShowSkeleton:W}=ee.useMediaLoader({loading:j,src:A?.[0]?.src||O?.[0]?.src||e,demoDelay:N}),G=i.useVideoPlayer({src:e,autoPlay:f,loop:p,muted:m,fit:b,videoId:E,resumePlayback:D,playlist:O,autoPlayNext:k,qualities:A,customControls:w,advancedControls:T,poster:g,containerRef:B}),{videoRef:K,isPlaying:q,activeSrc:J,activePoster:Y,showNativeControls:X,skipIndicator:Z,activeMenu:Q,setActiveMenu:$}=G;c.default.useEffect(()=>{let e=K.current;e&&(m?e.setAttribute(`muted`,``):e.removeAttribute(`muted`))},[m,K,J,H]);let re={width:`100%`,height:te||`auto`,objectFit:G.activeFit,...ne},ie=_===`none`?null:s.default[`radius${_.charAt(0).toUpperCase()+_.slice(1)}`];return(0,u.jsxs)(`figure`,{className:(0,l.default)(`wim-video`,s.default.root,C),style:{width:`100%`},"aria-label":R,"data-testid":`video-root`,children:[(0,u.jsxs)(`div`,{className:(0,l.default)(s.default.inner,ie,v&&s.default.shadow,y&&s.default.border,(w||T)&&s.default.custom,M&&s.default.fadeIn,M&&V&&s.default.isLoaded,W&&s.default.loading),ref:B,"data-testid":`video-inner`,children:[H&&(0,u.jsx)(`video`,{ref:K,src:J,className:s.default.video,style:re,autoPlay:f&&V,loop:p&&(!O||O.length<=1),muted:m,controls:X&&h,poster:Y,preload:x,playsInline:!0,onTimeUpdate:G.handleTimeUpdate,onLoadedMetadata:G.handleLoadedMetadata,onLoadedData:U,onEnded:G.handleEnded,onPlay:()=>{},onPause:()=>{},onClick:G.handleVideoClick,"data-testid":`video-element`,...I,children:F?.map((e,t)=>(0,u.jsx)(`track`,{...e},t))}),Z.show&&(0,u.jsxs)(`div`,{className:s.default.skipIndicator,children:[(0,u.jsx)(r.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,u.jsx)(r.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,u.jsx)(r.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,u.jsxs)(`span`,{children:[`10`,z]})]}),(w||T)&&(0,u.jsxs)(`div`,{role:`none`,className:s.default.customControls,onClick:()=>Q&&$(null),children:[T&&(0,u.jsx)(a.VideoAdvancedMenu,{styles:s.default,activeMenu:Q,setActiveMenu:$,qualities:A,currentQualityIndex:G.currentQualityIndex,handleQualityChange:G.handleQualityChange,playbackRate:G.playbackRate,setPlaybackRate:G.setPlaybackRate,activeFit:G.activeFit,setActiveFit:G.setActiveFit,playlist:O,currentPlayIndex:G.currentPlayIndex,playPlaylistItem:G.playPlaylistItem,labels:P}),(0,u.jsx)(o.VideoControls,{styles:s.default,playlist:O,advancedControls:T,currentPlayIndex:G.currentPlayIndex,setCurrentPlayIndex:G.setCurrentPlayIndex,skip:G.skip,isPlaying:q,togglePlay:G.togglePlay,currentTime:G.currentTime,duration:G.duration,handleSeek:G.handleSeek,volume:G.volume,isMuted:G.isMuted,toggleMute:G.toggleMute,handleVolumeChange:G.handleVolumeChange,activeMenu:Q,setActiveMenu:$,togglePiP:G.togglePiP,isFullscreen:G.isFullscreen,toggleFullscreen:G.toggleFullscreen,formatTime:G.formatTime,labels:P})]})]}),S&&(0,u.jsx)(`figcaption`,{className:s.default.caption,"data-testid":`video-caption`,children:S})]})};exports.Video=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../_internal/composeEventHandlers.cjs"),i=require("../Icon/Icon.cjs"),a=require("../../../hooks/useMediaLoader.cjs"),ee=require("./hooks/useVideoPlayer.cjs"),o=require("./components/VideoAdvancedMenu.cjs"),s=require("./components/VideoControls.cjs"),c=require("./video.module.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=({src:e,width:f,height:p,autoPlay:m=!1,loop:h=!1,muted:g=!1,controls:_=!0,poster:te,radius:v=`none`,shadow:ne=!1,border:y=!1,fit:b=`cover`,preload:x,caption:S,className:C,style:w,customControls:T=!1,advancedControls:E=!1,videoId:D,resumePlayback:O=!1,playlist:k,autoPlayNext:A=!1,qualities:j,loading:M=`lazy`,fadeIn:N=!1,demoDelay:P,labels:F={},tracks:I,...L})=>{let{t:R}=t.useWimTranslation(n.commonNs),{videoAriaLabel:z=R(`video.label`),seconds:B=`s`}=F,{containerRef:V,isLoaded:H,isIntersecting:U,notifyLoaded:W,shouldShowSkeleton:G}=a.useMediaLoader({loading:M,src:j?.[0]?.src||k?.[0]?.src||e,demoDelay:P}),K=ee.useVideoPlayer({src:e,autoPlay:m,loop:h,muted:g,fit:b,videoId:D,resumePlayback:O,playlist:k,autoPlayNext:A,qualities:j,customControls:T,advancedControls:E,poster:te,containerRef:V}),{videoRef:q,isPlaying:J,activeSrc:Y,activePoster:X,showNativeControls:re,skipIndicator:Z,activeMenu:Q,setActiveMenu:$}=K;l.default.useEffect(()=>{let e=q.current;e&&(g?e.setAttribute(`muted`,``):e.removeAttribute(`muted`))},[g,q,Y,U]);let ie={width:`100%`,height:p||`auto`,objectFit:K.activeFit,...w},ae=v===`none`?null:c.default[`radius${v.charAt(0).toUpperCase()+v.slice(1)}`];return(0,d.jsxs)(`figure`,{className:(0,u.default)(`wim-video`,c.default.root,C),style:{width:`100%`},"aria-label":z,"data-testid":`video-root`,children:[(0,d.jsxs)(`div`,{className:(0,u.default)(c.default.inner,ae,ne&&c.default.shadow,y&&c.default.border,(T||E)&&c.default.custom,N&&c.default.fadeIn,N&&H&&c.default.isLoaded,G&&c.default.loading),ref:V,"data-testid":`video-inner`,children:[U&&(0,d.jsx)(`video`,{ref:q,src:Y,className:c.default.video,style:ie,autoPlay:m&&H,loop:h&&(!k||k.length<=1),muted:g,controls:re&&_,poster:X,preload:x,playsInline:!0,"data-testid":`video-element`,...L,onTimeUpdate:r.composeEventHandlers(L.onTimeUpdate,K.handleTimeUpdate),onLoadedMetadata:r.composeEventHandlers(L.onLoadedMetadata,K.handleLoadedMetadata),onLoadedData:r.composeEventHandlers(L.onLoadedData,W),onEnded:r.composeEventHandlers(L.onEnded,K.handleEnded),onPlay:r.composeEventHandlers(L.onPlay,()=>{}),onPause:r.composeEventHandlers(L.onPause,()=>{}),onClick:r.composeEventHandlers(L.onClick,K.handleVideoClick),children:I?.map((e,t)=>(0,d.jsx)(`track`,{...e},t))}),Z.show&&(0,d.jsxs)(`div`,{className:c.default.skipIndicator,children:[(0,d.jsx)(i.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,d.jsx)(i.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,d.jsx)(i.Icon,{name:Z.direction===`forward`?`ChevronRightIcon`:`ChevronLeftIcon`,size:`lg`}),(0,d.jsxs)(`span`,{children:[`10`,B]})]}),(T||E)&&(0,d.jsxs)(`div`,{role:`none`,className:c.default.customControls,onClick:()=>Q&&$(null),children:[E&&(0,d.jsx)(o.VideoAdvancedMenu,{styles:c.default,activeMenu:Q,setActiveMenu:$,qualities:j,currentQualityIndex:K.currentQualityIndex,handleQualityChange:K.handleQualityChange,playbackRate:K.playbackRate,setPlaybackRate:K.setPlaybackRate,activeFit:K.activeFit,setActiveFit:K.setActiveFit,playlist:k,currentPlayIndex:K.currentPlayIndex,playPlaylistItem:K.playPlaylistItem,labels:F}),(0,d.jsx)(s.VideoControls,{styles:c.default,playlist:k,advancedControls:E,currentPlayIndex:K.currentPlayIndex,setCurrentPlayIndex:K.setCurrentPlayIndex,skip:K.skip,isPlaying:J,togglePlay:K.togglePlay,currentTime:K.currentTime,duration:K.duration,handleSeek:K.handleSeek,volume:K.volume,isMuted:K.isMuted,toggleMute:K.toggleMute,handleVolumeChange:K.handleVolumeChange,activeMenu:Q,setActiveMenu:$,togglePiP:K.togglePiP,isFullscreen:K.isFullscreen,toggleFullscreen:K.toggleFullscreen,formatTime:K.formatTime,labels:F})]})]}),S&&(0,d.jsx)(`figcaption`,{className:c.default.caption,"data-testid":`video-caption`,children:S})]})};exports.Video=f;

package/dist/components/media/Video/Video.js

@@ -1,154 +1,155 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
 import { commonNs as t } from "../../../i18n/generated/common.js";
-import { Icon as n } from "../Icon/Icon.js";
-import { useMediaLoader as ee } from "../../../hooks/useMediaLoader.js";
-import { useVideoPlayer as r } from "./hooks/useVideoPlayer.js";
-import { VideoAdvancedMenu as i } from "./components/VideoAdvancedMenu.js";
-import { VideoControls as a } from "./components/VideoControls.js";
-import o from "./video.module.js";
-import s from "react";
-import c from "classnames";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { composeEventHandlers as n } from "../../_internal/composeEventHandlers.js";
+import { Icon as r } from "../Icon/Icon.js";
+import { useMediaLoader as i } from "../../../hooks/useMediaLoader.js";
+import { useVideoPlayer as a } from "./hooks/useVideoPlayer.js";
+import { VideoAdvancedMenu as o } from "./components/VideoAdvancedMenu.js";
+import { VideoControls as s } from "./components/VideoControls.js";
+import c from "./video.module.js";
+import l from "react";
+import u from "classnames";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/media/Video/Video.tsx
-var d = ({ src: d, width: te, height: f, autoPlay: p = !1, loop: m = !1, muted: h = !1, controls: ne = !0, poster: re, radius: g = "none", shadow: _ = !1, border: v = !1, fit: y = "cover", preload: b, caption: x, className: S, style: C, customControls: w = !1, advancedControls: T = !1, videoId: E, resumePlayback: D = !1, playlist: O, autoPlayNext: k = !1, qualities: A, loading: j = "lazy", fadeIn: M = !1, demoDelay: N, labels: P = {}, tracks: F, ...I }) => {
-	let { t: L } = e(t), { videoAriaLabel: R = L("video.label"), seconds: z = "s" } = P, { containerRef: B, isLoaded: V, isIntersecting: H, notifyLoaded: U, shouldShowSkeleton: W } = ee({
-		loading: j,
-		src: A?.[0]?.src || O?.[0]?.src || d,
-		demoDelay: N
-	}), G = r({
-		src: d,
-		autoPlay: p,
-		loop: m,
-		muted: h,
-		fit: y,
-		videoId: E,
-		resumePlayback: D,
-		playlist: O,
-		autoPlayNext: k,
-		qualities: A,
-		customControls: w,
-		advancedControls: T,
-		poster: re,
-		containerRef: B
-	}), { videoRef: K, isPlaying: q, activeSrc: J, activePoster: Y, showNativeControls: X, skipIndicator: Z, activeMenu: Q, setActiveMenu: $ } = G;
-	s.useEffect(() => {
-		let e = K.current;
-		e && (h ? e.setAttribute("muted", "") : e.removeAttribute("muted"));
+var p = ({ src: p, width: ee, height: te, autoPlay: m = !1, loop: h = !1, muted: g = !1, controls: _ = !0, poster: v, radius: y = "none", shadow: b = !1, border: x = !1, fit: S = "cover", preload: C, caption: w, className: T, style: ne, customControls: E = !1, advancedControls: D = !1, videoId: O, resumePlayback: k = !1, playlist: A, autoPlayNext: j = !1, qualities: M, loading: N = "lazy", fadeIn: P = !1, demoDelay: F, labels: I = {}, tracks: L, ...R }) => {
+	let { t: z } = e(t), { videoAriaLabel: B = z("video.label"), seconds: V = "s" } = I, { containerRef: H, isLoaded: U, isIntersecting: W, notifyLoaded: G, shouldShowSkeleton: K } = i({
+		loading: N,
+		src: M?.[0]?.src || A?.[0]?.src || p,
+		demoDelay: F
+	}), q = a({
+		src: p,
+		autoPlay: m,
+		loop: h,
+		muted: g,
+		fit: S,
+		videoId: O,
+		resumePlayback: k,
+		playlist: A,
+		autoPlayNext: j,
+		qualities: M,
+		customControls: E,
+		advancedControls: D,
+		poster: v,
+		containerRef: H
+	}), { videoRef: J, isPlaying: Y, activeSrc: X, activePoster: re, showNativeControls: ie, skipIndicator: Z, activeMenu: Q, setActiveMenu: $ } = q;
+	l.useEffect(() => {
+		let e = J.current;
+		e && (g ? e.setAttribute("muted", "") : e.removeAttribute("muted"));
 	}, [
-		h,
-		K,
+		g,
 		J,
-		H
+		X,
+		W
 	]);
-	let ie = {
+	let ae = {
 		width: "100%",
-		height: f || "auto",
-		objectFit: G.activeFit,
-		...C
-	}, ae = g === "none" ? null : o[`radius${g.charAt(0).toUpperCase() + g.slice(1)}`];
-	return /* @__PURE__ */ u("figure", {
-		className: c("wim-video", o.root, S),
+		height: te || "auto",
+		objectFit: q.activeFit,
+		...ne
+	}, oe = y === "none" ? null : c[`radius${y.charAt(0).toUpperCase() + y.slice(1)}`];
+	return /* @__PURE__ */ f("figure", {
+		className: u("wim-video", c.root, T),
 		style: { width: "100%" },
-		"aria-label": R,
+		"aria-label": B,
 		"data-testid": "video-root",
-		children: [/* @__PURE__ */ u("div", {
-			className: c(o.inner, ae, _ && o.shadow, v && o.border, (w || T) && o.custom, M && o.fadeIn, M && V && o.isLoaded, W && o.loading),
-			ref: B,
+		children: [/* @__PURE__ */ f("div", {
+			className: u(c.inner, oe, b && c.shadow, x && c.border, (E || D) && c.custom, P && c.fadeIn, P && U && c.isLoaded, K && c.loading),
+			ref: H,
 			"data-testid": "video-inner",
 			children: [
-				H && /* @__PURE__ */ l("video", {
-					ref: K,
-					src: J,
-					className: o.video,
-					style: ie,
-					autoPlay: p && V,
-					loop: m && (!O || O.length <= 1),
-					muted: h,
-					controls: X && ne,
-					poster: Y,
-					preload: b,
+				W && /* @__PURE__ */ d("video", {
+					ref: J,
+					src: X,
+					className: c.video,
+					style: ae,
+					autoPlay: m && U,
+					loop: h && (!A || A.length <= 1),
+					muted: g,
+					controls: ie && _,
+					poster: re,
+					preload: C,
 					playsInline: !0,
-					onTimeUpdate: G.handleTimeUpdate,
-					onLoadedMetadata: G.handleLoadedMetadata,
-					onLoadedData: U,
-					onEnded: G.handleEnded,
-					onPlay: () => {},
-					onPause: () => {},
-					onClick: G.handleVideoClick,
 					"data-testid": "video-element",
-					...I,
-					children: F?.map((e, t) => /* @__PURE__ */ l("track", { ...e }, t))
+					...R,
+					onTimeUpdate: n(R.onTimeUpdate, q.handleTimeUpdate),
+					onLoadedMetadata: n(R.onLoadedMetadata, q.handleLoadedMetadata),
+					onLoadedData: n(R.onLoadedData, G),
+					onEnded: n(R.onEnded, q.handleEnded),
+					onPlay: n(R.onPlay, () => {}),
+					onPause: n(R.onPause, () => {}),
+					onClick: n(R.onClick, q.handleVideoClick),
+					children: L?.map((e, t) => /* @__PURE__ */ d("track", { ...e }, t))
 				}),
-				Z.show && /* @__PURE__ */ u("div", {
-					className: o.skipIndicator,
+				Z.show && /* @__PURE__ */ f("div", {
+					className: c.skipIndicator,
 					children: [
-						/* @__PURE__ */ l(n, {
+						/* @__PURE__ */ d(r, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ l(n, {
+						/* @__PURE__ */ d(r, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ l(n, {
+						/* @__PURE__ */ d(r, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ u("span", { children: ["10", z] })
+						/* @__PURE__ */ f("span", { children: ["10", V] })
 					]
 				}),
-				(w || T) && /* @__PURE__ */ u("div", {
+				(E || D) && /* @__PURE__ */ f("div", {
 					role: "none",
-					className: o.customControls,
+					className: c.customControls,
 					onClick: () => Q && $(null),
-					children: [T && /* @__PURE__ */ l(i, {
-						styles: o,
+					children: [D && /* @__PURE__ */ d(o, {
+						styles: c,
 						activeMenu: Q,
 						setActiveMenu: $,
-						qualities: A,
-						currentQualityIndex: G.currentQualityIndex,
-						handleQualityChange: G.handleQualityChange,
-						playbackRate: G.playbackRate,
-						setPlaybackRate: G.setPlaybackRate,
-						activeFit: G.activeFit,
-						setActiveFit: G.setActiveFit,
-						playlist: O,
-						currentPlayIndex: G.currentPlayIndex,
-						playPlaylistItem: G.playPlaylistItem,
-						labels: P
-					}), /* @__PURE__ */ l(a, {
-						styles: o,
-						playlist: O,
-						advancedControls: T,
-						currentPlayIndex: G.currentPlayIndex,
-						setCurrentPlayIndex: G.setCurrentPlayIndex,
-						skip: G.skip,
-						isPlaying: q,
-						togglePlay: G.togglePlay,
-						currentTime: G.currentTime,
-						duration: G.duration,
-						handleSeek: G.handleSeek,
-						volume: G.volume,
-						isMuted: G.isMuted,
-						toggleMute: G.toggleMute,
-						handleVolumeChange: G.handleVolumeChange,
+						qualities: M,
+						currentQualityIndex: q.currentQualityIndex,
+						handleQualityChange: q.handleQualityChange,
+						playbackRate: q.playbackRate,
+						setPlaybackRate: q.setPlaybackRate,
+						activeFit: q.activeFit,
+						setActiveFit: q.setActiveFit,
+						playlist: A,
+						currentPlayIndex: q.currentPlayIndex,
+						playPlaylistItem: q.playPlaylistItem,
+						labels: I
+					}), /* @__PURE__ */ d(s, {
+						styles: c,
+						playlist: A,
+						advancedControls: D,
+						currentPlayIndex: q.currentPlayIndex,
+						setCurrentPlayIndex: q.setCurrentPlayIndex,
+						skip: q.skip,
+						isPlaying: Y,
+						togglePlay: q.togglePlay,
+						currentTime: q.currentTime,
+						duration: q.duration,
+						handleSeek: q.handleSeek,
+						volume: q.volume,
+						isMuted: q.isMuted,
+						toggleMute: q.toggleMute,
+						handleVolumeChange: q.handleVolumeChange,
 						activeMenu: Q,
 						setActiveMenu: $,
-						togglePiP: G.togglePiP,
-						isFullscreen: G.isFullscreen,
-						toggleFullscreen: G.toggleFullscreen,
-						formatTime: G.formatTime,
-						labels: P
+						togglePiP: q.togglePiP,
+						isFullscreen: q.isFullscreen,
+						toggleFullscreen: q.toggleFullscreen,
+						formatTime: q.formatTime,
+						labels: I
 					})]
 				})
 			]
-		}), x && /* @__PURE__ */ l("figcaption", {
-			className: o.caption,
+		}), w && /* @__PURE__ */ d("figcaption", {
+			className: c.caption,
 			"data-testid": "video-caption",
-			children: x
+			children: w
 		})]
 	});
 };
 //#endregion
-export { d as Video };
+export { p as Video };

package/dist/components/navigation/Affix/Affix.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/mergeRefs.cjs"),n=require("./affix.module.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("classnames");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=r.default.forwardRef(function({offsetTop:e,offsetBottom:o,onChange:s,target:c=()=>window,children:l,className:u,style:d},f){let[p,m]=(0,r.useState)({isAffixed:!1}),h=(0,r.useRef)(null),g=(0,r.useRef)(null),_=(0,r.useRef)(null),v=(0,r.useRef)(!1),y=(0,r.useCallback)(()=>{if(!h.current)return;let t=c();if(!t)return;let n=h.current.getBoundingClientRect(),r=t===window||t instanceof Window?{top:0,bottom:window.innerHeight}:t.getBoundingClientRect(),i=!1,a,l;e!==void 0&&n.top<r.top+e?(i=!0,a={position:`fixed`,top:r.top+e,width:n.width,height:n.height,zIndex:1e3},l={width:n.width,height:n.height}):o!==void 0&&n.bottom>r.bottom-o&&(i=!0,a={position:`fixed`,bottom:window.innerHeight-r.bottom+o,width:n.width,height:n.height,zIndex:1e3},l={width:n.width,height:n.height}),i!==v.current&&(v.current=i,s?.(i)),m(e=>e.isAffixed===i&&JSON.stringify(e.affixStyle)===JSON.stringify(a)&&JSON.stringify(e.placeholderStyle)===JSON.stringify(l)?e:{isAffixed:i,affixStyle:a,placeholderStyle:l})},[e,o,c,s]);return(0,r.useEffect)(()=>{let e=c();if(!e)return;let t=()=>{_.current&&window.cancelAnimationFrame(_.current),_.current=window.requestAnimationFrame(y)};return e.addEventListener(`scroll`,t),window.addEventListener(`resize`,t),y(),()=>{e.removeEventListener(`scroll`,t),window.removeEventListener(`resize`,t),_.current&&window.cancelAnimationFrame(_.current)}},[c,y]),(0,a.jsx)(`div`,{ref:t.mergeRefs(h,f),style:{...p.placeholderStyle,...d},className:(0,i.default)(u),children:(0,a.jsx)(`div`,{ref:g,className:(0,i.default)(`wim-affix`,n.default.root,p.isAffixed&&n.default.affixed),style:p.affixStyle,children:l})})});o.displayName=`Affix`,exports.Affix=o,exports.default=o;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../_internal/mergeRefs.cjs"),n=require("../../_internal/observeMove.cjs"),r=require("./affix.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=i.default.forwardRef(function({offsetTop:e,offsetBottom:s,onChange:c,target:l=()=>window,children:u,className:d,style:f},p){let[m,h]=(0,i.useState)({isAffixed:!1}),g=(0,i.useRef)(null),_=(0,i.useRef)(null),v=(0,i.useRef)(null),y=(0,i.useRef)(!1),b=(0,i.useCallback)(()=>{if(!g.current)return;let t=l();if(!t)return;let n=g.current.getBoundingClientRect(),r=t===window||t instanceof Window?{top:0,bottom:window.innerHeight}:t.getBoundingClientRect(),i=!1,a,o;e!==void 0&&n.top<r.top+e?(i=!0,a={position:`fixed`,top:r.top+e,width:n.width,height:n.height,zIndex:1e3},o={width:n.width,height:n.height}):s!==void 0&&n.bottom>r.bottom-s&&(i=!0,a={position:`fixed`,bottom:window.innerHeight-r.bottom+s,width:n.width,height:n.height,zIndex:1e3},o={width:n.width,height:n.height}),i!==y.current&&(y.current=i,c?.(i)),h(e=>e.isAffixed===i&&JSON.stringify(e.affixStyle)===JSON.stringify(a)&&JSON.stringify(e.placeholderStyle)===JSON.stringify(o)?e:{isAffixed:i,affixStyle:a,placeholderStyle:o})},[e,s,l,c]);return(0,i.useEffect)(()=>{let e=l();if(!e)return;let t=()=>{v.current&&window.cancelAnimationFrame(v.current),v.current=window.requestAnimationFrame(b)};e.addEventListener(`scroll`,t),window.addEventListener(`resize`,t);let r=g.current?n.observeMove(g.current,t):void 0;return b(),()=>{e.removeEventListener(`scroll`,t),window.removeEventListener(`resize`,t),r?.(),v.current&&window.cancelAnimationFrame(v.current)}},[l,b]),(0,o.jsx)(`div`,{ref:t.mergeRefs(g,p),style:{...m.placeholderStyle,...f},className:(0,a.default)(d),children:(0,o.jsx)(`div`,{ref:_,className:(0,a.default)(`wim-affix`,r.default.root,m.isAffixed&&r.default.affixed),style:m.affixStyle,children:u})})});s.displayName=`Affix`,exports.Affix=s,exports.default=s;

package/dist/components/navigation/Affix/Affix.js

@@ -1,72 +1,75 @@
 "use client";
 import { mergeRefs as e } from "../../_internal/mergeRefs.js";
-import t from "./affix.module.js";
-import n, { useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
-import s from "classnames";
-import { jsx as c } from "react/jsx-runtime";
+import { observeMove as t } from "../../_internal/observeMove.js";
+import n from "./affix.module.js";
+import r, { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import c from "classnames";
+import { jsx as l } from "react/jsx-runtime";
 //#region src/components/navigation/Affix/Affix.tsx
-var l = n.forwardRef(function({ offsetTop: n, offsetBottom: l, onChange: u, target: d = () => window, children: f, className: p, style: m }, h) {
-	let [g, _] = o({ isAffixed: !1 }), v = a(null), y = a(null), b = a(null), x = a(!1), S = r(() => {
-		if (!v.current) return;
-		let e = d();
+var u = r.forwardRef(function({ offsetTop: r, offsetBottom: u, onChange: d, target: f = () => window, children: p, className: m, style: h }, g) {
+	let [_, v] = s({ isAffixed: !1 }), y = o(null), b = o(null), x = o(null), S = o(!1), C = i(() => {
+		if (!y.current) return;
+		let e = f();
 		if (!e) return;
-		let t = v.current.getBoundingClientRect(), r = e === window || e instanceof Window ? {
+		let t = y.current.getBoundingClientRect(), n = e === window || e instanceof Window ? {
 			top: 0,
 			bottom: window.innerHeight
 		} : e.getBoundingClientRect(), i = !1, a, o;
-		n !== void 0 && t.top < r.top + n ? (i = !0, a = {
+		r !== void 0 && t.top < n.top + r ? (i = !0, a = {
 			position: "fixed",
-			top: r.top + n,
+			top: n.top + r,
 			width: t.width,
 			height: t.height,
 			zIndex: 1e3
 		}, o = {
 			width: t.width,
 			height: t.height
-		}) : l !== void 0 && t.bottom > r.bottom - l && (i = !0, a = {
+		}) : u !== void 0 && t.bottom > n.bottom - u && (i = !0, a = {
 			position: "fixed",
-			bottom: window.innerHeight - r.bottom + l,
+			bottom: window.innerHeight - n.bottom + u,
 			width: t.width,
 			height: t.height,
 			zIndex: 1e3
 		}, o = {
 			width: t.width,
 			height: t.height
-		}), i !== x.current && (x.current = i, u?.(i)), _((e) => e.isAffixed === i && JSON.stringify(e.affixStyle) === JSON.stringify(a) && JSON.stringify(e.placeholderStyle) === JSON.stringify(o) ? e : {
+		}), i !== S.current && (S.current = i, d?.(i)), v((e) => e.isAffixed === i && JSON.stringify(e.affixStyle) === JSON.stringify(a) && JSON.stringify(e.placeholderStyle) === JSON.stringify(o) ? e : {
 			isAffixed: i,
 			affixStyle: a,
 			placeholderStyle: o
 		});
 	}, [
-		n,
-		l,
-		d,
-		u
+		r,
+		u,
+		f,
+		d
 	]);
-	return i(() => {
-		let e = d();
+	return a(() => {
+		let e = f();
 		if (!e) return;
-		let t = () => {
-			b.current && window.cancelAnimationFrame(b.current), b.current = window.requestAnimationFrame(S);
+		let n = () => {
+			x.current && window.cancelAnimationFrame(x.current), x.current = window.requestAnimationFrame(C);
 		};
-		return e.addEventListener("scroll", t), window.addEventListener("resize", t), S(), () => {
-			e.removeEventListener("scroll", t), window.removeEventListener("resize", t), b.current && window.cancelAnimationFrame(b.current);
+		e.addEventListener("scroll", n), window.addEventListener("resize", n);
+		let r = y.current ? t(y.current, n) : void 0;
+		return C(), () => {
+			e.removeEventListener("scroll", n), window.removeEventListener("resize", n), r?.(), x.current && window.cancelAnimationFrame(x.current);
 		};
-	}, [d, S]), /* @__PURE__ */ c("div", {
-		ref: e(v, h),
+	}, [f, C]), /* @__PURE__ */ l("div", {
+		ref: e(y, g),
 		style: {
-			...g.placeholderStyle,
-			...m
+			..._.placeholderStyle,
+			...h
 		},
-		className: s(p),
-		children: /* @__PURE__ */ c("div", {
-			ref: y,
-			className: s("wim-affix", t.root, g.isAffixed && t.affixed),
-			style: g.affixStyle,
-			children: f
+		className: c(m),
+		children: /* @__PURE__ */ l("div", {
+			ref: b,
+			className: c("wim-affix", n.root, _.isAffixed && n.affixed),
+			style: _.affixStyle,
+			children: p
 		})
 	});
 });
-l.displayName = "Affix";
+u.displayName = "Affix";
 //#endregion
-export { l as Affix, l as default };
+export { u as Affix, u as default };