wimui 0.51.1 → 0.51.2

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

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

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

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

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

@@ -1,7 +1,8 @@
 "use client";
-import { Icon as e } from "../Icon/Icon.js";
-import { useMediaLoader as t } from "../../../hooks/useMediaLoader.js";
-import { useVideoPlayer as n } from "./hooks/useVideoPlayer.js";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import { Icon as t } from "../Icon/Icon.js";
+import { useMediaLoader as n } from "../../../hooks/useMediaLoader.js";
+import { useVideoPlayer as ee } from "./hooks/useVideoPlayer.js";
 import { VideoAdvancedMenu as r } from "./components/VideoAdvancedMenu.js";
 import { VideoControls as i } from "./components/VideoControls.js";
 import a from "./video.module.js";
@@ -9,24 +10,24 @@ import o from "react";
 import s from "classnames";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/media/Video/Video.tsx
-var u = ({ src: u, width: ee, height: d, 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: 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 { videoAriaLabel: R = "Video", seconds: z = "s" } = F, { containerRef: B, isLoaded: V, isIntersecting: H, notifyLoaded: U, shouldShowSkeleton: W } = t({
-		loading: M,
-		src: j?.[0]?.src || k?.[0]?.src || u,
-		demoDelay: P
-	}), G = n({
+var u = ({ src: u, width: te, height: d, 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 } = e("common"), { videoAriaLabel: R = L("video.label"), seconds: z = "s" } = P, { containerRef: B, isLoaded: V, isIntersecting: H, notifyLoaded: U, shouldShowSkeleton: W } = n({
+		loading: j,
+		src: A?.[0]?.src || O?.[0]?.src || u,
+		demoDelay: N
+	}), G = ee({
 		src: u,
 		autoPlay: f,
 		loop: p,
 		muted: m,
 		fit: b,
-		videoId: D,
-		resumePlayback: O,
-		playlist: k,
-		autoPlayNext: A,
-		qualities: j,
-		customControls: T,
-		advancedControls: E,
+		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;
@@ -39,19 +40,19 @@ var u = ({ src: u, width: ee, height: d, autoPlay: f = !1, loop: p = !1, muted:
 		J,
 		H
 	]);
-	let te = {
+	let re = {
 		width: "100%",
 		height: d || "auto",
 		objectFit: G.activeFit,
-		...w
-	}, ne = _ === "none" ? null : a[`radius${_.charAt(0).toUpperCase() + _.slice(1)}`];
+		...ne
+	}, ie = _ === "none" ? null : a[`radius${_.charAt(0).toUpperCase() + _.slice(1)}`];
 	return /* @__PURE__ */ l("figure", {
 		className: s("wim-video", a.root, C),
 		style: { width: "100%" },
 		"aria-label": R,
 		"data-testid": "video-root",
 		children: [/* @__PURE__ */ l("div", {
-			className: s(a.inner, ne, v && a.shadow, y && a.border, (T || E) && a.custom, N && a.fadeIn, N && V && a.isLoaded, W && a.loading),
+			className: s(a.inner, ie, v && a.shadow, y && a.border, (w || T) && a.custom, M && a.fadeIn, M && V && a.isLoaded, W && a.loading),
 			ref: B,
 			"data-testid": "video-inner",
 			children: [
@@ -59,9 +60,9 @@ var u = ({ src: u, width: ee, height: d, autoPlay: f = !1, loop: p = !1, muted:
 					ref: K,
 					src: J,
 					className: a.video,
-					style: te,
+					style: re,
 					autoPlay: f && V,
-					loop: p && (!k || k.length <= 1),
+					loop: p && (!O || O.length <= 1),
 					muted: m,
 					controls: X && h,
 					poster: Y,
@@ -75,50 +76,50 @@ var u = ({ src: u, width: ee, height: d, autoPlay: f = !1, loop: p = !1, muted:
 					onPause: () => {},
 					onClick: G.handleVideoClick,
 					"data-testid": "video-element",
-					...L,
-					children: I?.map((e, t) => /* @__PURE__ */ c("track", { ...e }, t))
+					...I,
+					children: F?.map((e, t) => /* @__PURE__ */ c("track", { ...e }, t))
 				}),
 				Z.show && /* @__PURE__ */ l("div", {
 					className: a.skipIndicator,
 					children: [
-						/* @__PURE__ */ c(e, {
+						/* @__PURE__ */ c(t, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ c(e, {
+						/* @__PURE__ */ c(t, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
-						/* @__PURE__ */ c(e, {
+						/* @__PURE__ */ c(t, {
 							name: Z.direction === "forward" ? "ChevronRightIcon" : "ChevronLeftIcon",
 							size: "lg"
 						}),
 						/* @__PURE__ */ l("span", { children: ["10", z] })
 					]
 				}),
-				(T || E) && /* @__PURE__ */ l("div", {
+				(w || T) && /* @__PURE__ */ l("div", {
 					role: "none",
 					className: a.customControls,
 					onClick: () => Q && $(null),
-					children: [E && /* @__PURE__ */ c(r, {
+					children: [T && /* @__PURE__ */ c(r, {
 						styles: a,
 						activeMenu: Q,
 						setActiveMenu: $,
-						qualities: j,
+						qualities: A,
 						currentQualityIndex: G.currentQualityIndex,
 						handleQualityChange: G.handleQualityChange,
 						playbackRate: G.playbackRate,
 						setPlaybackRate: G.setPlaybackRate,
 						activeFit: G.activeFit,
 						setActiveFit: G.setActiveFit,
-						playlist: k,
+						playlist: O,
 						currentPlayIndex: G.currentPlayIndex,
 						playPlaylistItem: G.playPlaylistItem,
-						labels: F
+						labels: P
 					}), /* @__PURE__ */ c(i, {
 						styles: a,
-						playlist: k,
-						advancedControls: E,
+						playlist: O,
+						advancedControls: T,
 						currentPlayIndex: G.currentPlayIndex,
 						setCurrentPlayIndex: G.setCurrentPlayIndex,
 						skip: G.skip,
@@ -137,7 +138,7 @@ var u = ({ src: u, width: ee, height: d, autoPlay: f = !1, loop: p = !1, muted:
 						isFullscreen: G.isFullscreen,
 						toggleFullscreen: G.toggleFullscreen,
 						formatTime: G.formatTime,
-						labels: F
+						labels: P
 					})]
 				})
 			]

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

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../icon/check.cjs"),n=require("../../../../icon/chevron-left.cjs"),r=require("../../../../icon/chevron-right.cjs"),i=require("../../../../icon/close.cjs"),a=require("../../../../icon/play.cjs"),o=require("../../Icon/Icon.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=[.25,.5,.75,1,1.25,1.5,1.75,2],u=[`contain`,`cover`,`fill`,`scale-down`,`none`];function d({activeMenu:e,setActiveMenu:s,qualities:d,currentQualityIndex:f,handleQualityChange:p,playbackRate:m,setPlaybackRate:h,activeFit:g,setActiveFit:_,playlist:v,currentPlayIndex:y,playPlaylistItem:b,labels:x={},styles:S}){let{settings:C=`Settings`,quality:w=`Quality`,playbackRate:T=`Playback Speed`,aspectRatio:E=`Aspect Ratio`,standard:D=`Standard`,playlist:O=`Playlist`,contain:k=`Contain`,cover:A=`Cover`,fill:j=`Fill`,scaleDown:M=`Scale Down`,none:N=`None`}=x;if(!e)return null;let P=e=>{switch(e){case`contain`:return k;case`cover`:return A;case`fill`:return j;case`scale-down`:return M;case`none`:return N;default:return e}};return(0,c.jsxs)(c.Fragment,{children:[e===`main`&&(0,c.jsxs)(`div`,{className:S.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&s(null)},role:`menu`,tabIndex:-1,children:[(0,c.jsx)(`div`,{className:S.menuTitle,children:(0,c.jsx)(`span`,{children:C})}),(0,c.jsxs)(`div`,{className:S.menuItems,children:[d&&d.length>0&&(0,c.jsxs)(`button`,{className:S.menuBtn,onClick:()=>s(`quality`),children:[(0,c.jsx)(`span`,{children:w}),(0,c.jsxs)(`span`,{style:{opacity:.7},children:[d[f].label,` `,(0,c.jsx)(o.Icon,{component:r.default,size:`sm`})]})]}),(0,c.jsxs)(`button`,{className:S.menuBtn,onClick:()=>s(`rate`),children:[(0,c.jsx)(`span`,{children:T}),(0,c.jsxs)(`span`,{style:{opacity:.7},children:[m,`x `,(0,c.jsx)(o.Icon,{component:r.default,size:`sm`})]})]}),(0,c.jsxs)(`button`,{className:S.menuBtn,onClick:()=>s(`fit`),children:[(0,c.jsx)(`span`,{children:E}),(0,c.jsxs)(`span`,{style:{opacity:.7},children:[P(g),` `,(0,c.jsx)(o.Icon,{component:r.default,size:`sm`})]})]})]})]}),e===`quality`&&(0,c.jsxs)(`div`,{className:S.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&s(`main`)},role:`menu`,tabIndex:-1,children:[(0,c.jsxs)(`div`,{className:S.menuTitle,children:[(0,c.jsx)(`button`,{onClick:()=>s(`main`),className:S.btn,children:(0,c.jsx)(o.Icon,{component:n.default,size:`sm`})}),(0,c.jsx)(`span`,{children:w})]}),(0,c.jsx)(`div`,{className:S.menuItems,children:d?.map((e,n)=>(0,c.jsxs)(`button`,{className:S.menuBtn,"data-active":f===n,onClick:()=>p(n),children:[f===n&&(0,c.jsx)(o.Icon,{component:t.default,size:`sm`}),(0,c.jsx)(`span`,{style:{marginLeft:f===n?0:24},children:e.label})]},n))})]}),e===`rate`&&(0,c.jsxs)(`div`,{className:S.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&s(`main`)},role:`menu`,tabIndex:-1,children:[(0,c.jsxs)(`div`,{className:S.menuTitle,children:[(0,c.jsx)(`button`,{onClick:()=>s(`main`),className:S.btn,children:(0,c.jsx)(o.Icon,{component:n.default,size:`sm`})}),(0,c.jsx)(`span`,{children:T})]}),(0,c.jsx)(`div`,{className:S.menuItems,children:l.map(e=>(0,c.jsxs)(`button`,{className:S.menuBtn,"data-active":m===e,onClick:()=>{h(e),s(`main`)},children:[m===e&&(0,c.jsx)(o.Icon,{component:t.default,size:`sm`}),(0,c.jsx)(`span`,{style:{marginLeft:m===e?0:24},children:e===1?D:`${e}x`})]},e))})]}),e===`fit`&&(0,c.jsxs)(`div`,{className:S.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&s(`main`)},role:`menu`,tabIndex:-1,children:[(0,c.jsxs)(`div`,{className:S.menuTitle,children:[(0,c.jsx)(`button`,{onClick:()=>s(`main`),className:S.btn,children:(0,c.jsx)(o.Icon,{component:n.default,size:`sm`})}),(0,c.jsx)(`span`,{children:E})]}),(0,c.jsx)(`div`,{className:S.menuItems,children:u.map(e=>(0,c.jsxs)(`button`,{className:S.menuBtn,"data-active":g===e,onClick:()=>{_(e),s(`main`)},children:[g===e&&(0,c.jsx)(o.Icon,{component:t.default,size:`sm`}),(0,c.jsx)(`span`,{style:{marginLeft:g===e?0:24},children:P(e)})]},e))})]}),e===`playlist`&&(0,c.jsxs)(`div`,{className:S.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&s(null)},style:{bottom:60,right:16,width:250},role:`menu`,tabIndex:-1,children:[(0,c.jsxs)(`div`,{className:S.menuTitle,children:[(0,c.jsx)(`span`,{children:O}),(0,c.jsx)(`button`,{onClick:()=>s(null),style:{marginLeft:`auto`},className:S.btn,children:(0,c.jsx)(o.Icon,{component:i.default,size:`sm`})})]}),(0,c.jsx)(`div`,{className:S.menuItems,children:v?.map((e,t)=>(0,c.jsx)(`button`,{className:S.menuBtn,"data-active":y===t,onClick:()=>b(t),style:{flexDirection:`column`,alignItems:`flex-start`,gap:4},children:(0,c.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:8},children:[y===t?(0,c.jsx)(o.Icon,{component:a.default,size:`sm`}):(0,c.jsx)(`div`,{style:{width:20}}),(0,c.jsx)(`span`,{children:e.title||`Track ${t+1}`})]})},t))})]})]})}exports.VideoAdvancedMenu=d;
+const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../i18n/useWimTranslation.cjs"),n=require("../../../../icon/check.cjs"),r=require("../../../../icon/chevron-left.cjs"),i=require("../../../../icon/chevron-right.cjs"),a=require("../../../../icon/close.cjs"),o=require("../../../../icon/play.cjs"),s=require("../../Icon/Icon.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");var u=[.25,.5,.75,1,1.25,1.5,1.75,2],d=[`contain`,`cover`,`fill`,`scale-down`,`none`];function f({activeMenu:e,setActiveMenu:c,qualities:f,currentQualityIndex:p,handleQualityChange:m,playbackRate:h,setPlaybackRate:g,activeFit:_,setActiveFit:v,playlist:y,currentPlayIndex:b,playPlaylistItem:x,labels:S={},styles:C}){let{t:w}=t.useWimTranslation(`common`),{settings:T=w(`a11y.settings`),quality:E=w(`quality`),playbackRate:D=w(`playback.speed`),aspectRatio:O=w(`aspect.ratio`),standard:k=w(`standard`),playlist:A=w(`a11y.playlist`),contain:j=w(`video.fit_contain`),cover:M=w(`video.fit_cover`),fill:N=w(`video.fit_fill`),scaleDown:P=w(`video.fit_scale_down`),none:F=w(`common.none`)}=S;if(!e)return null;let I=e=>{switch(e){case`contain`:return j;case`cover`:return M;case`fill`:return N;case`scale-down`:return P;case`none`:return F;default:return e}};return(0,l.jsxs)(l.Fragment,{children:[e===`main`&&(0,l.jsxs)(`div`,{className:C.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&c(null)},role:`menu`,tabIndex:-1,children:[(0,l.jsx)(`div`,{className:C.menuTitle,children:(0,l.jsx)(`span`,{children:T})}),(0,l.jsxs)(`div`,{className:C.menuItems,children:[f&&f.length>0&&(0,l.jsxs)(`button`,{className:C.menuBtn,onClick:()=>c(`quality`),children:[(0,l.jsx)(`span`,{children:E}),(0,l.jsxs)(`span`,{style:{opacity:.7},children:[f[p].label,` `,(0,l.jsx)(s.Icon,{component:i.default,size:`sm`})]})]}),(0,l.jsxs)(`button`,{className:C.menuBtn,onClick:()=>c(`rate`),children:[(0,l.jsx)(`span`,{children:D}),(0,l.jsxs)(`span`,{style:{opacity:.7},children:[h,`x `,(0,l.jsx)(s.Icon,{component:i.default,size:`sm`})]})]}),(0,l.jsxs)(`button`,{className:C.menuBtn,onClick:()=>c(`fit`),children:[(0,l.jsx)(`span`,{children:O}),(0,l.jsxs)(`span`,{style:{opacity:.7},children:[I(_),` `,(0,l.jsx)(s.Icon,{component:i.default,size:`sm`})]})]})]})]}),e===`quality`&&(0,l.jsxs)(`div`,{className:C.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&c(`main`)},role:`menu`,tabIndex:-1,children:[(0,l.jsxs)(`div`,{className:C.menuTitle,children:[(0,l.jsx)(`button`,{onClick:()=>c(`main`),className:C.btn,children:(0,l.jsx)(s.Icon,{component:r.default,size:`sm`})}),(0,l.jsx)(`span`,{children:E})]}),(0,l.jsx)(`div`,{className:C.menuItems,children:f?.map((e,t)=>(0,l.jsxs)(`button`,{className:C.menuBtn,"data-active":p===t,onClick:()=>m(t),children:[p===t&&(0,l.jsx)(s.Icon,{component:n.default,size:`sm`}),(0,l.jsx)(`span`,{style:{marginLeft:p===t?0:24},children:e.label})]},t))})]}),e===`rate`&&(0,l.jsxs)(`div`,{className:C.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&c(`main`)},role:`menu`,tabIndex:-1,children:[(0,l.jsxs)(`div`,{className:C.menuTitle,children:[(0,l.jsx)(`button`,{onClick:()=>c(`main`),className:C.btn,children:(0,l.jsx)(s.Icon,{component:r.default,size:`sm`})}),(0,l.jsx)(`span`,{children:D})]}),(0,l.jsx)(`div`,{className:C.menuItems,children:u.map(e=>(0,l.jsxs)(`button`,{className:C.menuBtn,"data-active":h===e,onClick:()=>{g(e),c(`main`)},children:[h===e&&(0,l.jsx)(s.Icon,{component:n.default,size:`sm`}),(0,l.jsx)(`span`,{style:{marginLeft:h===e?0:24},children:e===1?k:`${e}x`})]},e))})]}),e===`fit`&&(0,l.jsxs)(`div`,{className:C.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&c(`main`)},role:`menu`,tabIndex:-1,children:[(0,l.jsxs)(`div`,{className:C.menuTitle,children:[(0,l.jsx)(`button`,{onClick:()=>c(`main`),className:C.btn,children:(0,l.jsx)(s.Icon,{component:r.default,size:`sm`})}),(0,l.jsx)(`span`,{children:O})]}),(0,l.jsx)(`div`,{className:C.menuItems,children:d.map(e=>(0,l.jsxs)(`button`,{className:C.menuBtn,"data-active":_===e,onClick:()=>{v(e),c(`main`)},children:[_===e&&(0,l.jsx)(s.Icon,{component:n.default,size:`sm`}),(0,l.jsx)(`span`,{style:{marginLeft:_===e?0:24},children:I(e)})]},e))})]}),e===`playlist`&&(0,l.jsxs)(`div`,{className:C.advancedMenu,onClick:e=>e.stopPropagation(),onKeyDown:e=>{e.key===`Escape`&&c(null)},style:{bottom:60,right:16,width:250},role:`menu`,tabIndex:-1,children:[(0,l.jsxs)(`div`,{className:C.menuTitle,children:[(0,l.jsx)(`span`,{children:A}),(0,l.jsx)(`button`,{onClick:()=>c(null),style:{marginLeft:`auto`},className:C.btn,children:(0,l.jsx)(s.Icon,{component:a.default,size:`sm`})})]}),(0,l.jsx)(`div`,{className:C.menuItems,children:y?.map((e,t)=>(0,l.jsx)(`button`,{className:C.menuBtn,"data-active":b===t,onClick:()=>x(t),style:{flexDirection:`column`,alignItems:`flex-start`,gap:4},children:(0,l.jsxs)(`div`,{style:{display:`flex`,alignItems:`center`,gap:8},children:[b===t?(0,l.jsx)(s.Icon,{component:o.default,size:`sm`}):(0,l.jsx)(`div`,{style:{width:20}}),(0,l.jsx)(`span`,{children:e.title||`Track ${t+1}`})]})},t))})]})]})}exports.VideoAdvancedMenu=f;