wimui 0.51.2 → 0.52.0

package/dist/components/media/Audio/Audio.js

@@ -1,146 +1,147 @@
 "use client";
 import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
-import { useMediaLoader as t } from "../../../hooks/useMediaLoader.js";
+import { commonNs as t } from "../../../i18n/generated/common.js";
+import { useMediaLoader as ee } from "../../../hooks/useMediaLoader.js";
 import { useAudioPlayer as n } from "./hooks/useAudioPlayer.js";
 import { useAudioMetadata as r } from "./hooks/useAudioMetadata.js";
 import { AudioCustomControls as i } from "./components/AudioCustomControls.js";
 import a from "./audio.module.js";
-import { useEffect as o, useMemo as s } from "react";
-import c from "classnames";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useEffect as o, useMemo as te } from "react";
+import s from "classnames";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/media/Audio/Audio.tsx
-var d = ({ src: d, autoPlay: f = !1, loop: ee = !1, muted: te = !1, controls: ne = !0, radius: p = "none", shadow: m = !1, border: h = !1, preload: g, caption: _, className: v, style: y, customControls: b = !1, visualizer: x = !1, showMetadata: S = !1, fadeIn: C = !1, fadeOut: w = !1, crossfade: T = !1, playbackRate: E = !1, hotkeys: D = !1, presets: O = !1, sleepTimer: k = !1, loading: A = "lazy", demoDelay: j, labels: M = {}, tracks: N, ...P }) => {
-	let { t: F } = e("common"), { unknownTitle: I = F("audio.unknown_title"), unknownArtist: L = F("audio.unknown_artist") } = M, R = s(() => d ? (Array.isArray(d) ? d : [d]).map((e) => typeof e == "string" ? { src: e } : e) : [], [d]), { containerRef: z, isLoaded: re, isIntersecting: B, notifyLoaded: V, shouldShowSkeleton: H } = t({
-		loading: A,
-		demoDelay: j,
-		src: R[0]?.src
-	}), U = n({
-		playlist: R,
-		loop: ee,
-		muted: te,
-		fadeIn: C,
-		fadeOut: w,
-		crossfade: T,
-		visualizer: x,
-		hotkeys: D,
-		autoPlay: f
-	}), { isPlaying: W, currentTrack: G, currentTrackIndex: K, activeAudioRef: q, nextAudioRef: J, canvasRef: Y, handleTimeUpdate: X, handleEnded: ie, setDuration: ae, playActivePlayer: oe } = U, { metaTitle: Z, metaArtist: Q, metaCover: $ } = r({
-		currentTrack: G,
-		showMetadata: S
+var u = ({ src: u, autoPlay: d = !1, loop: f = !1, muted: p = !1, controls: m = !0, radius: h = "none", shadow: g = !1, border: ne = !1, preload: _, caption: v, className: y, style: b, customControls: x = !1, visualizer: S = !1, showMetadata: C = !1, fadeIn: w = !1, fadeOut: T = !1, crossfade: E = !1, playbackRate: D = !1, hotkeys: O = !1, presets: k = !1, sleepTimer: A = !1, loading: j = "lazy", demoDelay: M, labels: N = {}, tracks: P, ...F }) => {
+	let { t: I } = e(t), { unknownTitle: L = I("audio.unknown_title"), unknownArtist: R = I("audio.unknown_artist") } = N, z = te(() => u ? (Array.isArray(u) ? u : [u]).map((e) => typeof e == "string" ? { src: e } : e) : [], [u]), { containerRef: re, isLoaded: B, isIntersecting: V, notifyLoaded: H, shouldShowSkeleton: U } = ee({
+		loading: j,
+		demoDelay: M,
+		src: z[0]?.src
+	}), W = n({
+		playlist: z,
+		loop: f,
+		muted: p,
+		fadeIn: w,
+		fadeOut: T,
+		crossfade: E,
+		visualizer: S,
+		hotkeys: O,
+		autoPlay: d
+	}), { isPlaying: G, currentTrack: K, currentTrackIndex: q, activeAudioRef: J, nextAudioRef: Y, canvasRef: X, handleTimeUpdate: ie, handleEnded: ae, setDuration: oe, playActivePlayer: se } = W, { metaTitle: Z, metaArtist: Q, metaCover: $ } = r({
+		currentTrack: K,
+		showMetadata: C
 	});
 	o(() => {
-		G && q.current && (q.current.src = G.src, (f || W) && oe());
-	}, [K, G]);
-	let se = p === "none" ? null : a[`radius${p.charAt(0).toUpperCase() + p.slice(1)}`];
-	return /* @__PURE__ */ u("figure", {
-		className: c("wim-audio", a.root, v),
-		style: y,
+		K && J.current && (J.current.src = K.src, (d || G) && se());
+	}, [q, K]);
+	let ce = h === "none" ? null : a[`radius${h.charAt(0).toUpperCase() + h.slice(1)}`];
+	return /* @__PURE__ */ l("figure", {
+		className: s("wim-audio", a.root, y),
+		style: b,
 		"data-testid": "audio-root",
-		children: [/* @__PURE__ */ u("div", {
-			ref: z,
-			className: c(a.inner, se, b && m && a.shadow, b && h && a.border, b && a.custom, C && a.fadeIn, C && re && a.isLoaded, H && a.loading),
+		children: [/* @__PURE__ */ l("div", {
+			ref: re,
+			className: s(a.inner, ce, x && g && a.shadow, x && ne && a.border, x && a.custom, w && a.fadeIn, w && B && a.isLoaded, U && a.loading),
 			"data-testid": "audio-inner",
 			children: [
-				x && b && /* @__PURE__ */ l("canvas", {
-					ref: Y,
+				S && x && /* @__PURE__ */ c("canvas", {
+					ref: X,
 					className: a.visualizerCanvas,
 					"data-testid": "audio-canvas"
 				}),
-				b && S && (Z || Q || $) && /* @__PURE__ */ u("div", {
+				x && C && (Z || Q || $) && /* @__PURE__ */ l("div", {
 					className: a.metadata,
 					style: {
 						position: "relative",
 						zIndex: 2
 					},
 					"data-testid": "audio-metadata",
-					children: [$ && /* @__PURE__ */ l("img", {
+					children: [$ && /* @__PURE__ */ c("img", {
 						src: $,
-						alt: F("a11y.cover_art"),
+						alt: I("a11y.cover_art"),
 						className: a.cover,
 						"data-testid": "audio-cover"
-					}), /* @__PURE__ */ u("div", {
+					}), /* @__PURE__ */ l("div", {
 						className: a.info,
-						children: [/* @__PURE__ */ l("div", {
+						children: [/* @__PURE__ */ c("div", {
 							className: a.title,
 							"data-testid": "audio-title",
-							children: Z || I
-						}), /* @__PURE__ */ l("div", {
+							children: Z || L
+						}), /* @__PURE__ */ c("div", {
 							className: a.artist,
 							"data-testid": "audio-artist",
-							children: Q || L
+							children: Q || R
 						})]
 					})]
 				}),
-				/* @__PURE__ */ u("div", {
+				/* @__PURE__ */ l("div", {
 					style: {
-						display: b ? "none" : "block",
+						display: x ? "none" : "block",
 						width: "100%"
 					},
-					children: [B && /* @__PURE__ */ l("audio", {
-						ref: q,
-						src: G?.src,
+					children: [V && /* @__PURE__ */ c("audio", {
+						ref: J,
+						src: K?.src,
 						className: a.audio,
 						"data-testid": "audio-active",
-						loop: U.repeatMode === 1 && R.length === 1,
-						muted: U.isMuted,
-						controls: !b && ne,
-						preload: g,
+						loop: W.repeatMode === 1 && z.length === 1,
+						muted: W.isMuted,
+						controls: !x && m,
+						preload: _,
 						crossOrigin: "anonymous",
-						onTimeUpdate: X,
-						onEnded: ie,
-						...P,
+						onTimeUpdate: ie,
+						onEnded: ae,
+						...F,
 						onLoadedMetadata: (e) => {
-							ae(e.currentTarget.duration), V(), P.onLoadedMetadata?.(e);
+							oe(e.currentTarget.duration), H(), F.onLoadedMetadata?.(e);
 						},
 						onLoadedData: (e) => {
-							V(), P.onLoadedData?.(e);
+							H(), F.onLoadedData?.(e);
 						},
 						onCanPlay: (e) => {
-							V(), P.onCanPlay?.(e);
+							H(), F.onCanPlay?.(e);
 						},
-						children: N?.map((e, t) => /* @__PURE__ */ l("track", { ...e }, t))
-					}), /* @__PURE__ */ l("audio", {
-						ref: J,
-						muted: U.isMuted,
+						children: P?.map((e, t) => /* @__PURE__ */ c("track", { ...e }, t))
+					}), /* @__PURE__ */ c("audio", {
+						ref: Y,
+						muted: W.isMuted,
 						preload: "auto",
 						crossOrigin: "anonymous",
 						"data-testid": "audio-next"
 					})]
 				}),
-				b && /* @__PURE__ */ l(i, {
+				x && /* @__PURE__ */ c(i, {
 					styles: a,
-					isPlaying: W,
-					currentTime: U.currentTime,
-					duration: U.duration,
-					volume: U.volume,
-					isMuted: U.isMuted,
-					repeatMode: U.repeatMode,
-					shuffleMode: U.shuffleMode,
-					currentPlaybackRate: U.currentPlaybackRate,
-					isBassBoost: U.isBassBoost,
-					remainingSleepTime: U.remainingSleepTime,
-					playbackRate: E,
-					presets: O,
-					sleepTimer: k,
-					setRepeatMode: U.setRepeatMode,
-					setShuffleMode: U.setShuffleMode,
-					setCurrentPlaybackRate: U.setCurrentPlaybackRate,
-					setIsBassBoost: U.setIsBassBoost,
-					setIsMuted: U.setIsMuted,
-					togglePlay: U.togglePlay,
-					handleSeek: U.handleSeek,
-					handleVolumeChange: U.handleVolumeChange,
-					playNext: U.playNext,
-					toggleSleepTimer: U.toggleSleepTimer,
-					formatTime: U.formatTime,
-					labels: M
+					isPlaying: G,
+					currentTime: W.currentTime,
+					duration: W.duration,
+					volume: W.volume,
+					isMuted: W.isMuted,
+					repeatMode: W.repeatMode,
+					shuffleMode: W.shuffleMode,
+					currentPlaybackRate: W.currentPlaybackRate,
+					isBassBoost: W.isBassBoost,
+					remainingSleepTime: W.remainingSleepTime,
+					playbackRate: D,
+					presets: k,
+					sleepTimer: A,
+					setRepeatMode: W.setRepeatMode,
+					setShuffleMode: W.setShuffleMode,
+					setCurrentPlaybackRate: W.setCurrentPlaybackRate,
+					setIsBassBoost: W.setIsBassBoost,
+					setIsMuted: W.setIsMuted,
+					togglePlay: W.togglePlay,
+					handleSeek: W.handleSeek,
+					handleVolumeChange: W.handleVolumeChange,
+					playNext: W.playNext,
+					toggleSleepTimer: W.toggleSleepTimer,
+					formatTime: W.formatTime,
+					labels: N
 				})
 			]
-		}), _ && /* @__PURE__ */ l("figcaption", {
+		}), v && /* @__PURE__ */ c("figcaption", {
 			className: a.caption,
-			children: _
+			children: v
 		})]
 	});
 };
 //#endregion
-export { d as Audio };
+export { u as Audio };

package/dist/components/media/Audio/components/AudioCustomControls.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../i18n/useWimTranslation.cjs"),n=require("../../../../icon/chart.cjs"),r=require("../../../../icon/chevron-left.cjs"),i=require("../../../../icon/chevron-right.cjs"),a=require("../../../../icon/clock.cjs"),o=require("../../../../icon/mute.cjs"),s=require("../../../../icon/pause.cjs"),c=require("../../../../icon/play.cjs"),l=require("../../../../icon/repeat.cjs"),u=require("../../../../icon/shuffle.cjs"),d=require("../../../../icon/volume.cjs"),f=require("../../Icon/Icon.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("classnames");m=e.__toESM(m,1);let h=require("react/jsx-runtime");function g({isPlaying:e,currentTime:p,duration:g,volume:_,isMuted:v,repeatMode:y,shuffleMode:b,currentPlaybackRate:x,isBassBoost:S,remainingSleepTime:C,playbackRate:w,presets:T,sleepTimer:E,setRepeatMode:D,setShuffleMode:O,setCurrentPlaybackRate:k,setIsBassBoost:A,setIsMuted:j,togglePlay:M,handleSeek:N,handleVolumeChange:P,playNext:F,toggleSleepTimer:ee,formatTime:I,labels:L={},styles:R}){let{t:z}=t.useWimTranslation(`common`),{seek:B=z(`a11y.seek`),mute:V=z(`a11y.mute`),unmute:H=z(`a11y.unmute`),volume:U=z(`a11y.volume`),play:W=z(`a11y.play`),pause:G=z(`a11y.pause`),next:K=z(`action.next`),prev:q=z(`action.previous`),repeatMode0:J=z(`audio.repeat_off`),repeatMode1:Y=z(`audio.repeat_single`),repeatMode2:X=z(`audio.repeat_all`),shuffle:Z=z(`audio.shuffle`),playbackSpeed:Q=z(`playback.speed`),bassBoost:$=z(`audio.bass_boost`),sleepTimer:te=`Sleep Timer (15m)`}=L,ne=y===0?J:y===1?Y:X;return(0,h.jsxs)(`div`,{className:(0,m.default)(R.customControls),children:[(0,h.jsxs)(`div`,{className:(0,m.default)(R.time),children:[(0,h.jsx)(`span`,{className:R.timeCurrent,children:I(p)}),(0,h.jsxs)(`div`,{className:(0,m.default)(R.progressContainer),children:[(0,h.jsx)(`input`,{type:`range`,min:`0`,max:g||0,value:p,step:`0.1`,onChange:N,className:(0,m.default)(R.progress),"aria-label":B}),(0,h.jsx)(`div`,{className:(0,m.default)(R.progressFill),style:{width:`${p/(g||1)*100}%`}})]}),(0,h.jsx)(`span`,{className:R.timeTotal,children:I(g)})]}),(0,h.jsxs)(`div`,{className:(0,m.default)(R.controlsRow),children:[(0,h.jsxs)(`div`,{className:(0,m.default)(R.controlsGroup),children:[(0,h.jsxs)(`button`,{type:`button`,className:(0,m.default)(R.btn,y>0&&R.active),onClick:()=>D(e=>(e+1)%3),title:ne,children:[(0,h.jsx)(f.Icon,{component:l.default,size:`sm`}),y===1&&(0,h.jsx)(`span`,{className:(0,m.default)(R.badge),children:`1`})]}),(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn,b&&R.active),onClick:()=>O(e=>!e),title:Z,children:(0,h.jsx)(f.Icon,{component:u.default,size:`sm`})}),w&&(0,h.jsxs)(`button`,{type:`button`,className:(0,m.default)(R.btn,R.btnText),onClick:()=>{let e=[.5,1,1.5,2],t=e[(e.indexOf(x)+1)%e.length];k(t)},title:Q,children:[x,`x`]})]}),(0,h.jsxs)(`div`,{className:(0,m.default)(R.controlsGroup),children:[T&&(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn,S&&R.active),onClick:()=>A(!S),title:$,children:(0,h.jsx)(f.Icon,{component:n.default,size:`sm`})}),E&&(0,h.jsxs)(`button`,{type:`button`,className:(0,m.default)(R.btn,C!==null&&R.active),onClick:ee,title:te,children:[(0,h.jsx)(f.Icon,{component:a.default,size:`sm`}),C!==null&&(0,h.jsx)(`span`,{className:(0,m.default)(R.badge),style:{fontSize:`7px`},children:Math.ceil(C/60)})]}),(0,h.jsxs)(`div`,{className:(0,m.default)(R.volumeContainer),children:[(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn),onClick:()=>j(e=>!e),"aria-label":v?H:V,children:(0,h.jsx)(f.Icon,{component:v||_===0?o.default:d.default,size:`sm`})}),(0,h.jsx)(`input`,{type:`range`,min:`0`,max:`1`,step:`0.05`,value:v?0:_,onChange:P,className:(0,m.default)(R.volume),"aria-label":U})]})]})]}),(0,h.jsx)(`div`,{className:(0,m.default)(R.controlsRow),style:{justifyContent:`center`,marginTop:`0.2rem`},children:(0,h.jsxs)(`div`,{className:(0,m.default)(R.controlsGroup),children:[(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn),onClick:()=>F(-1),title:q,children:(0,h.jsx)(f.Icon,{component:r.default,size:`sm`})}),(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn,R.btnPlay),onClick:M,title:e?G:W,"aria-label":e?G:W,children:(0,h.jsx)(f.Icon,{component:e?s.default:c.default,size:`sm`})}),(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(R.btn),onClick:()=>F(1),title:K,children:(0,h.jsx)(f.Icon,{component:i.default,size:`sm`})})]})})]})}exports.AudioCustomControls=g;
+const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../../i18n/useWimTranslation.cjs"),ee=require("../../../../i18n/generated/common.cjs"),n=require("../../../../icon/chart.cjs"),r=require("../../../../icon/chevron-left.cjs"),i=require("../../../../icon/chevron-right.cjs"),a=require("../../../../icon/clock.cjs"),o=require("../../../../icon/mute.cjs"),s=require("../../../../icon/pause.cjs"),c=require("../../../../icon/play.cjs"),l=require("../../../../icon/repeat.cjs"),u=require("../../../../icon/shuffle.cjs"),d=require("../../../../icon/volume.cjs"),f=require("../../Icon/Icon.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("classnames");m=e.__toESM(m,1);let h=require("react/jsx-runtime");function g({isPlaying:e,currentTime:p,duration:g,volume:_,isMuted:v,repeatMode:y,shuffleMode:b,currentPlaybackRate:x,isBassBoost:S,remainingSleepTime:C,playbackRate:w,presets:T,sleepTimer:E,setRepeatMode:D,setShuffleMode:O,setCurrentPlaybackRate:k,setIsBassBoost:A,setIsMuted:j,togglePlay:M,handleSeek:N,handleVolumeChange:P,playNext:F,toggleSleepTimer:I,formatTime:L,labels:R={},styles:z}){let{t:B}=t.useWimTranslation(ee.commonNs),{seek:V=B(`a11y.seek`),mute:H=B(`a11y.mute`),unmute:U=B(`a11y.unmute`),volume:W=B(`a11y.volume`),play:G=B(`a11y.play`),pause:K=B(`a11y.pause`),next:q=B(`action.next`),prev:J=B(`action.previous`),repeatMode0:Y=B(`audio.repeat_off`),repeatMode1:X=B(`audio.repeat_single`),repeatMode2:Z=B(`audio.repeat_all`),shuffle:Q=B(`audio.shuffle`),playbackSpeed:$=B(`playback.speed`),bassBoost:te=B(`audio.bass_boost`),sleepTimer:ne=`Sleep Timer (15m)`}=R,re=y===0?Y:y===1?X:Z;return(0,h.jsxs)(`div`,{className:(0,m.default)(z.customControls),children:[(0,h.jsxs)(`div`,{className:(0,m.default)(z.time),children:[(0,h.jsx)(`span`,{className:z.timeCurrent,children:L(p)}),(0,h.jsxs)(`div`,{className:(0,m.default)(z.progressContainer),children:[(0,h.jsx)(`input`,{type:`range`,min:`0`,max:g||0,value:p,step:`0.1`,onChange:N,className:(0,m.default)(z.progress),"aria-label":V}),(0,h.jsx)(`div`,{className:(0,m.default)(z.progressFill),style:{width:`${p/(g||1)*100}%`}})]}),(0,h.jsx)(`span`,{className:z.timeTotal,children:L(g)})]}),(0,h.jsxs)(`div`,{className:(0,m.default)(z.controlsRow),children:[(0,h.jsxs)(`div`,{className:(0,m.default)(z.controlsGroup),children:[(0,h.jsxs)(`button`,{type:`button`,className:(0,m.default)(z.btn,y>0&&z.active),onClick:()=>D(e=>(e+1)%3),title:re,children:[(0,h.jsx)(f.Icon,{component:l.default,size:`sm`}),y===1&&(0,h.jsx)(`span`,{className:(0,m.default)(z.badge),children:`1`})]}),(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(z.btn,b&&z.active),onClick:()=>O(e=>!e),title:Q,children:(0,h.jsx)(f.Icon,{component:u.default,size:`sm`})}),w&&(0,h.jsxs)(`button`,{type:`button`,className:(0,m.default)(z.btn,z.btnText),onClick:()=>{let e=[.5,1,1.5,2],t=e[(e.indexOf(x)+1)%e.length];k(t)},title:$,children:[x,`x`]})]}),(0,h.jsxs)(`div`,{className:(0,m.default)(z.controlsGroup),children:[T&&(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(z.btn,S&&z.active),onClick:()=>A(!S),title:te,children:(0,h.jsx)(f.Icon,{component:n.default,size:`sm`})}),E&&(0,h.jsxs)(`button`,{type:`button`,className:(0,m.default)(z.btn,C!==null&&z.active),onClick:I,title:ne,children:[(0,h.jsx)(f.Icon,{component:a.default,size:`sm`}),C!==null&&(0,h.jsx)(`span`,{className:(0,m.default)(z.badge),style:{fontSize:`7px`},children:Math.ceil(C/60)})]}),(0,h.jsxs)(`div`,{className:(0,m.default)(z.volumeContainer),children:[(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(z.btn),onClick:()=>j(e=>!e),"aria-label":v?U:H,children:(0,h.jsx)(f.Icon,{component:v||_===0?o.default:d.default,size:`sm`})}),(0,h.jsx)(`input`,{type:`range`,min:`0`,max:`1`,step:`0.05`,value:v?0:_,onChange:P,className:(0,m.default)(z.volume),"aria-label":W})]})]})]}),(0,h.jsx)(`div`,{className:(0,m.default)(z.controlsRow),style:{justifyContent:`center`,marginTop:`0.2rem`},children:(0,h.jsxs)(`div`,{className:(0,m.default)(z.controlsGroup),children:[(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(z.btn),onClick:()=>F(-1),title:J,children:(0,h.jsx)(f.Icon,{component:r.default,size:`sm`})}),(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(z.btn,z.btnPlay),onClick:M,title:e?K:G,"aria-label":e?K:G,children:(0,h.jsx)(f.Icon,{component:e?s.default:c.default,size:`sm`})}),(0,h.jsx)(`button`,{type:`button`,className:(0,m.default)(z.btn),onClick:()=>F(1),title:q,children:(0,h.jsx)(f.Icon,{component:i.default,size:`sm`})})]})})]})}exports.AudioCustomControls=g;

package/dist/components/media/Audio/components/AudioCustomControls.js

@@ -1,187 +1,188 @@
 "use client";
 import { useWimTranslation as e } from "../../../../i18n/useWimTranslation.js";
-import t from "../../../../icon/chart.js";
-import n from "../../../../icon/chevron-left.js";
-import r from "../../../../icon/chevron-right.js";
-import i from "../../../../icon/clock.js";
-import a from "../../../../icon/mute.js";
-import o from "../../../../icon/pause.js";
-import ee from "../../../../icon/play.js";
-import s from "../../../../icon/repeat.js";
-import c from "../../../../icon/shuffle.js";
-import l from "../../../../icon/volume.js";
-import { Icon as u } from "../../Icon/Icon.js";
+import { commonNs as t } from "../../../../i18n/generated/common.js";
+import n from "../../../../icon/chart.js";
+import r from "../../../../icon/chevron-left.js";
+import i from "../../../../icon/chevron-right.js";
+import a from "../../../../icon/clock.js";
+import o from "../../../../icon/mute.js";
+import s from "../../../../icon/pause.js";
+import c from "../../../../icon/play.js";
+import l from "../../../../icon/repeat.js";
+import u from "../../../../icon/shuffle.js";
+import d from "../../../../icon/volume.js";
+import { Icon as f } from "../../Icon/Icon.js";
 import "react";
-import d from "classnames";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import p from "classnames";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/media/Audio/components/AudioCustomControls.tsx
-function m({ isPlaying: m, currentTime: h, duration: g, volume: _, isMuted: v, repeatMode: y, shuffleMode: b, currentPlaybackRate: x, isBassBoost: S, remainingSleepTime: C, playbackRate: w, presets: T, sleepTimer: E, setRepeatMode: D, setShuffleMode: O, setCurrentPlaybackRate: k, setIsBassBoost: A, setIsMuted: j, togglePlay: M, handleSeek: N, handleVolumeChange: P, playNext: F, toggleSleepTimer: I, formatTime: L, labels: R = {}, styles: z }) {
-	let { t: B } = e("common"), { seek: V = B("a11y.seek"), mute: H = B("a11y.mute"), unmute: U = B("a11y.unmute"), volume: W = B("a11y.volume"), play: G = B("a11y.play"), pause: K = B("a11y.pause"), next: q = B("action.next"), prev: J = B("action.previous"), repeatMode0: Y = B("audio.repeat_off"), repeatMode1: X = B("audio.repeat_single"), repeatMode2: Z = B("audio.repeat_all"), shuffle: Q = B("audio.shuffle"), playbackSpeed: $ = B("playback.speed"), bassBoost: te = B("audio.bass_boost"), sleepTimer: ne = "Sleep Timer (15m)" } = R, re = y === 0 ? Y : y === 1 ? X : Z;
-	return /* @__PURE__ */ p("div", {
-		className: d(z.customControls),
+function g({ isPlaying: g, currentTime: _, duration: v, volume: y, isMuted: b, repeatMode: x, shuffleMode: S, currentPlaybackRate: C, isBassBoost: w, remainingSleepTime: T, playbackRate: E, presets: D, sleepTimer: O, setRepeatMode: k, setShuffleMode: A, setCurrentPlaybackRate: j, setIsBassBoost: M, setIsMuted: N, togglePlay: P, handleSeek: F, handleVolumeChange: I, playNext: L, toggleSleepTimer: ee, formatTime: R, labels: z = {}, styles: B }) {
+	let { t: V } = e(t), { seek: H = V("a11y.seek"), mute: U = V("a11y.mute"), unmute: W = V("a11y.unmute"), volume: G = V("a11y.volume"), play: K = V("a11y.play"), pause: q = V("a11y.pause"), next: J = V("action.next"), prev: Y = V("action.previous"), repeatMode0: X = V("audio.repeat_off"), repeatMode1: Z = V("audio.repeat_single"), repeatMode2: Q = V("audio.repeat_all"), shuffle: $ = V("audio.shuffle"), playbackSpeed: te = V("playback.speed"), bassBoost: ne = V("audio.bass_boost"), sleepTimer: re = "Sleep Timer (15m)" } = z, ie = x === 0 ? X : x === 1 ? Z : Q;
+	return /* @__PURE__ */ h("div", {
+		className: p(B.customControls),
 		children: [
-			/* @__PURE__ */ p("div", {
-				className: d(z.time),
+			/* @__PURE__ */ h("div", {
+				className: p(B.time),
 				children: [
-					/* @__PURE__ */ f("span", {
-						className: z.timeCurrent,
-						children: L(h)
+					/* @__PURE__ */ m("span", {
+						className: B.timeCurrent,
+						children: R(_)
 					}),
-					/* @__PURE__ */ p("div", {
-						className: d(z.progressContainer),
-						children: [/* @__PURE__ */ f("input", {
+					/* @__PURE__ */ h("div", {
+						className: p(B.progressContainer),
+						children: [/* @__PURE__ */ m("input", {
 							type: "range",
 							min: "0",
-							max: g || 0,
-							value: h,
+							max: v || 0,
+							value: _,
 							step: "0.1",
-							onChange: N,
-							className: d(z.progress),
-							"aria-label": V
-						}), /* @__PURE__ */ f("div", {
-							className: d(z.progressFill),
-							style: { width: `${h / (g || 1) * 100}%` }
+							onChange: F,
+							className: p(B.progress),
+							"aria-label": H
+						}), /* @__PURE__ */ m("div", {
+							className: p(B.progressFill),
+							style: { width: `${_ / (v || 1) * 100}%` }
 						})]
 					}),
-					/* @__PURE__ */ f("span", {
-						className: z.timeTotal,
-						children: L(g)
+					/* @__PURE__ */ m("span", {
+						className: B.timeTotal,
+						children: R(v)
 					})
 				]
 			}),
-			/* @__PURE__ */ p("div", {
-				className: d(z.controlsRow),
-				children: [/* @__PURE__ */ p("div", {
-					className: d(z.controlsGroup),
+			/* @__PURE__ */ h("div", {
+				className: p(B.controlsRow),
+				children: [/* @__PURE__ */ h("div", {
+					className: p(B.controlsGroup),
 					children: [
-						/* @__PURE__ */ p("button", {
+						/* @__PURE__ */ h("button", {
 							type: "button",
-							className: d(z.btn, y > 0 && z.active),
-							onClick: () => D((e) => (e + 1) % 3),
-							title: re,
-							children: [/* @__PURE__ */ f(u, {
-								component: s,
+							className: p(B.btn, x > 0 && B.active),
+							onClick: () => k((e) => (e + 1) % 3),
+							title: ie,
+							children: [/* @__PURE__ */ m(f, {
+								component: l,
 								size: "sm"
-							}), y === 1 && /* @__PURE__ */ f("span", {
-								className: d(z.badge),
+							}), x === 1 && /* @__PURE__ */ m("span", {
+								className: p(B.badge),
 								children: "1"
 							})]
 						}),
-						/* @__PURE__ */ f("button", {
+						/* @__PURE__ */ m("button", {
 							type: "button",
-							className: d(z.btn, b && z.active),
-							onClick: () => O((e) => !e),
-							title: Q,
-							children: /* @__PURE__ */ f(u, {
-								component: c,
+							className: p(B.btn, S && B.active),
+							onClick: () => A((e) => !e),
+							title: $,
+							children: /* @__PURE__ */ m(f, {
+								component: u,
 								size: "sm"
 							})
 						}),
-						w && /* @__PURE__ */ p("button", {
+						E && /* @__PURE__ */ h("button", {
 							type: "button",
-							className: d(z.btn, z.btnText),
+							className: p(B.btn, B.btnText),
 							onClick: () => {
 								let e = [
 									.5,
 									1,
 									1.5,
 									2
-								], t = e[(e.indexOf(x) + 1) % e.length];
-								k(t);
+								], t = e[(e.indexOf(C) + 1) % e.length];
+								j(t);
 							},
-							title: $,
-							children: [x, "x"]
+							title: te,
+							children: [C, "x"]
 						})
 					]
-				}), /* @__PURE__ */ p("div", {
-					className: d(z.controlsGroup),
+				}), /* @__PURE__ */ h("div", {
+					className: p(B.controlsGroup),
 					children: [
-						T && /* @__PURE__ */ f("button", {
+						D && /* @__PURE__ */ m("button", {
 							type: "button",
-							className: d(z.btn, S && z.active),
-							onClick: () => A(!S),
-							title: te,
-							children: /* @__PURE__ */ f(u, {
-								component: t,
+							className: p(B.btn, w && B.active),
+							onClick: () => M(!w),
+							title: ne,
+							children: /* @__PURE__ */ m(f, {
+								component: n,
 								size: "sm"
 							})
 						}),
-						E && /* @__PURE__ */ p("button", {
+						O && /* @__PURE__ */ h("button", {
 							type: "button",
-							className: d(z.btn, C !== null && z.active),
-							onClick: I,
-							title: ne,
-							children: [/* @__PURE__ */ f(u, {
-								component: i,
+							className: p(B.btn, T !== null && B.active),
+							onClick: ee,
+							title: re,
+							children: [/* @__PURE__ */ m(f, {
+								component: a,
 								size: "sm"
-							}), C !== null && /* @__PURE__ */ f("span", {
-								className: d(z.badge),
+							}), T !== null && /* @__PURE__ */ m("span", {
+								className: p(B.badge),
 								style: { fontSize: "7px" },
-								children: Math.ceil(C / 60)
+								children: Math.ceil(T / 60)
 							})]
 						}),
-						/* @__PURE__ */ p("div", {
-							className: d(z.volumeContainer),
-							children: [/* @__PURE__ */ f("button", {
+						/* @__PURE__ */ h("div", {
+							className: p(B.volumeContainer),
+							children: [/* @__PURE__ */ m("button", {
 								type: "button",
-								className: d(z.btn),
-								onClick: () => j((e) => !e),
-								"aria-label": v ? U : H,
-								children: /* @__PURE__ */ f(u, {
-									component: v || _ === 0 ? a : l,
+								className: p(B.btn),
+								onClick: () => N((e) => !e),
+								"aria-label": b ? W : U,
+								children: /* @__PURE__ */ m(f, {
+									component: b || y === 0 ? o : d,
 									size: "sm"
 								})
-							}), /* @__PURE__ */ f("input", {
+							}), /* @__PURE__ */ m("input", {
 								type: "range",
 								min: "0",
 								max: "1",
 								step: "0.05",
-								value: v ? 0 : _,
-								onChange: P,
-								className: d(z.volume),
-								"aria-label": W
+								value: b ? 0 : y,
+								onChange: I,
+								className: p(B.volume),
+								"aria-label": G
 							})]
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ f("div", {
-				className: d(z.controlsRow),
+			/* @__PURE__ */ m("div", {
+				className: p(B.controlsRow),
 				style: {
 					justifyContent: "center",
 					marginTop: "0.2rem"
 				},
-				children: /* @__PURE__ */ p("div", {
-					className: d(z.controlsGroup),
+				children: /* @__PURE__ */ h("div", {
+					className: p(B.controlsGroup),
 					children: [
-						/* @__PURE__ */ f("button", {
+						/* @__PURE__ */ m("button", {
 							type: "button",
-							className: d(z.btn),
-							onClick: () => F(-1),
-							title: J,
-							children: /* @__PURE__ */ f(u, {
-								component: n,
+							className: p(B.btn),
+							onClick: () => L(-1),
+							title: Y,
+							children: /* @__PURE__ */ m(f, {
+								component: r,
 								size: "sm"
 							})
 						}),
-						/* @__PURE__ */ f("button", {
+						/* @__PURE__ */ m("button", {
 							type: "button",
-							className: d(z.btn, z.btnPlay),
-							onClick: M,
-							title: m ? K : G,
-							"aria-label": m ? K : G,
-							children: /* @__PURE__ */ f(u, {
-								component: m ? o : ee,
+							className: p(B.btn, B.btnPlay),
+							onClick: P,
+							title: g ? q : K,
+							"aria-label": g ? q : K,
+							children: /* @__PURE__ */ m(f, {
+								component: g ? s : c,
 								size: "sm"
 							})
 						}),
-						/* @__PURE__ */ f("button", {
+						/* @__PURE__ */ m("button", {
 							type: "button",
-							className: d(z.btn),
-							onClick: () => F(1),
-							title: q,
-							children: /* @__PURE__ */ f(u, {
-								component: r,
+							className: p(B.btn),
+							onClick: () => L(1),
+							title: J,
+							children: /* @__PURE__ */ m(f, {
+								component: i,
 								size: "sm"
 							})
 						})
@@ -192,4 +193,4 @@ function m({ isPlaying: m, currentTime: h, duration: g, volume: _, isMuted: v, r
 	});
 }
 //#endregion
-export { m as AudioCustomControls };
+export { g as AudioCustomControls };

package/dist/components/media/Gallery/Gallery.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/close.cjs"),r=require("../Icon/Icon.cjs"),i=require("../../form/Button/Button.cjs"),a=require("../../form/Checkbox/Checkbox.cjs"),o=require("./gallery.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=(0,s.createContext)(null),d=()=>{let e=(0,s.useContext)(u);if(!e)throw Error(`Gallery subcomponents must be used within Gallery`);return e},f=s.default.forwardRef(({items:e,columns:a=3,gap:d=`md`,aspect:f=`square`,selectable:m=!1,selected:h,defaultSelected:g=[],onSelectionChange:_,onItemClick:v,renderActions:y,className:b,style:x,...S},C)=>{let{t:w}=t.useWimTranslation(`components`),T=h!==void 0,[E,D]=(0,s.useState)(()=>new Set(g)),[O,k]=(0,s.useState)(0),A=(0,s.useRef)(null),j=(0,s.useRef)(null),[M,N]=(0,s.useState)(a),P=(0,s.useCallback)(e=>{j.current=e,typeof C==`function`?C(e):C&&(C.current=e)},[C]);(0,s.useEffect)(()=>{let e=j.current;if(!e)return;let t=new ResizeObserver(e=>{let t=e[0].contentRect.width;N(t<480?1:t<576?2:a)});return t.observe(e),()=>t.disconnect()},[a]);let F=(0,s.useMemo)(()=>T?new Set(h):E,[T,h,E]),I=(0,s.useCallback)(e=>{T||D(e),_?.(Array.from(e))},[T,_]),L=(0,s.useCallback)((t,n,r)=>{let i=new Set(F);if(r&&A.current!==null){let r=Math.min(A.current,n),a=Math.max(A.current,n),o=!F.has(t);for(let t=r;t<=a;t++)o?i.add(e[t].id):i.delete(e[t].id)}else i.has(t)?i.delete(t):i.add(t),A.current=n;I(i)},[F,e,I]),R=(0,s.useCallback)(()=>{I(new Set(e.map(e=>e.id)))},[e,I]),z=(0,s.useCallback)(()=>{I(new Set)},[I]),B=(0,s.useMemo)(()=>{let t=[];for(let n=0;n<e.length;n+=M)t.push({rowItems:e.slice(n,n+M),startIndex:n});return t},[e,M]),V=Array.from(F),H=V.length>0,U={"--gallery-columns":M,...x},W=t=>{let n=M,r=e.length,i=O;switch(t.key){case`ArrowRight`:t.preventDefault(),i=Math.min(O+1,r-1);break;case`ArrowLeft`:t.preventDefault(),i=Math.max(O-1,0);break;case`ArrowDown`:t.preventDefault(),i=Math.min(O+n,r-1);break;case`ArrowUp`:t.preventDefault(),i=Math.max(O-n,0);break;case`Home`:t.preventDefault(),i=0;break;case`End`:t.preventDefault(),i=r-1;break;case`Escape`:m&&(t.preventDefault(),z());break;case`a`:case`A`:m&&(t.ctrlKey||t.metaKey)&&(t.preventDefault(),R());break;default:return}i!==O&&(k(i),t.currentTarget.querySelectorAll(`[data-gallery-item]`)[i]?.focus())};return(0,l.jsx)(u.Provider,{value:{selectable:m,selectedIds:F,lastClickedIndex:A,items:e,toggleSelect:L,focusedIndex:O,setFocusedIndex:k,selectAll:R,clearSelection:z,onItemClick:v},children:(0,l.jsxs)(`div`,{ref:P,className:(0,c.default)(`wim-gallery`,o.default.root,b),...S,children:[m&&H&&(0,l.jsxs)(`div`,{className:o.default.toolbar,role:`toolbar`,"aria-label":w(`gallery.toolbar_label`),children:[(0,l.jsx)(`span`,{className:o.default.toolbarCount,children:w(`gallery.selected_count`,{count:V.length})}),(0,l.jsxs)(`div`,{className:o.default.toolbarActions,children:[y?.({selectedIds:V,clearSelection:z}),(0,l.jsx)(i.Button,{size:`sm`,variant:`ghost`,className:o.default.toolbarClear,onClick:z,"aria-label":w(`gallery.clear_selection`),icon:(0,l.jsx)(r.Icon,{component:n.default,size:`sm`})})]})]}),(0,l.jsx)(`div`,{className:(0,c.default)(o.default.grid,o.default[`gap-${d}`],o.default[`aspect-${f}`]),style:U,role:`grid`,"aria-multiselectable":m||void 0,"aria-label":w(`gallery.grid_label`),onKeyDown:W,tabIndex:0,children:B.map(({rowItems:e,startIndex:t},n)=>(0,l.jsx)(`div`,{role:`row`,style:{display:`contents`},children:e.map((e,n)=>(0,l.jsx)(p,{item:e,index:t+n},e.id))},n))})]})})});f.displayName=`Gallery`;var p=({item:e,index:n})=>{let{selectable:r,selectedIds:i,toggleSelect:s,focusedIndex:u,setFocusedIndex:f,onItemClick:p}=d(),{t:m}=t.useWimTranslation(`components`),h=i.has(e.id),g=u===n,_=()=>{p?.(e,n),f(n)},v=t=>{t.stopPropagation(),s(e.id,n,t.shiftKey)},y=t=>{(t.key===` `||t.key===`Enter`)&&(t.preventDefault(),r&&t.key===` `?s(e.id,n,t.shiftKey):p?.(e,n))};return(0,l.jsxs)(`div`,{className:(0,c.default)(o.default.item,{[o.default.selected]:h}),role:`gridcell`,"aria-selected":r?h:void 0,tabIndex:g?0:-1,onClick:_,onKeyDown:y,onFocus:()=>f(n),"data-gallery-item":!0,children:[(0,l.jsxs)(`div`,{className:o.default.imageWrapper,children:[(0,l.jsx)(`img`,{src:e.src,alt:e.alt??e.title??``,className:o.default.image,draggable:!1}),r&&(0,l.jsx)(`div`,{className:o.default.checkboxOverlay,children:(0,l.jsx)(a.Checkbox,{checked:h,onChange:()=>{},onClick:v,"aria-label":m(h?`gallery.deselect_item`:`gallery.select_item`,{title:e.title??e.alt??String(n+1)}),tabIndex:-1,className:o.default.checkbox})}),h&&(0,l.jsx)(`div`,{className:o.default.selectedRing,"aria-hidden":!0})]}),(e.title||e.caption)&&(0,l.jsxs)(`div`,{className:o.default.caption,children:[e.title&&(0,l.jsx)(`span`,{className:o.default.captionTitle,children:e.title}),e.caption&&(0,l.jsx)(`span`,{className:o.default.captionText,children:e.caption})]})]})};exports.Gallery=f;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/components.cjs"),r=require("../../../icon/close.cjs"),i=require("../Icon/Icon.cjs"),a=require("../../form/Button/Button.cjs"),o=require("../../form/Checkbox/Checkbox.cjs"),s=require("./gallery.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=(0,c.createContext)(null),f=()=>{let e=(0,c.useContext)(d);if(!e)throw Error(`Gallery subcomponents must be used within Gallery`);return e},p=c.default.forwardRef(({items:e,columns:o=3,gap:f=`md`,aspect:p=`square`,selectable:h=!1,selected:g,defaultSelected:_=[],onSelectionChange:v,onItemClick:y,renderActions:b,className:x,style:S,...C},w)=>{let{t:T}=t.useWimTranslation(n.componentsNs),E=g!==void 0,[D,O]=(0,c.useState)(()=>new Set(_)),[k,A]=(0,c.useState)(0),j=(0,c.useRef)(null),M=(0,c.useRef)(null),[N,P]=(0,c.useState)(o),F=(0,c.useCallback)(e=>{M.current=e,typeof w==`function`?w(e):w&&(w.current=e)},[w]);(0,c.useEffect)(()=>{let e=M.current;if(!e)return;let t=new ResizeObserver(e=>{let t=e[0].contentRect.width;P(t<480?1:t<576?2:o)});return t.observe(e),()=>t.disconnect()},[o]);let I=(0,c.useMemo)(()=>E?new Set(g):D,[E,g,D]),L=(0,c.useCallback)(e=>{E||O(e),v?.(Array.from(e))},[E,v]),R=(0,c.useCallback)((t,n,r)=>{let i=new Set(I);if(r&&j.current!==null){let r=Math.min(j.current,n),a=Math.max(j.current,n),o=!I.has(t);for(let t=r;t<=a;t++)o?i.add(e[t].id):i.delete(e[t].id)}else i.has(t)?i.delete(t):i.add(t),j.current=n;L(i)},[I,e,L]),z=(0,c.useCallback)(()=>{L(new Set(e.map(e=>e.id)))},[e,L]),B=(0,c.useCallback)(()=>{L(new Set)},[L]),V=(0,c.useMemo)(()=>{let t=[];for(let n=0;n<e.length;n+=N)t.push({rowItems:e.slice(n,n+N),startIndex:n});return t},[e,N]),H=Array.from(I),U=H.length>0,W={"--gallery-columns":N,...S},G=t=>{let n=N,r=e.length,i=k;switch(t.key){case`ArrowRight`:t.preventDefault(),i=Math.min(k+1,r-1);break;case`ArrowLeft`:t.preventDefault(),i=Math.max(k-1,0);break;case`ArrowDown`:t.preventDefault(),i=Math.min(k+n,r-1);break;case`ArrowUp`:t.preventDefault(),i=Math.max(k-n,0);break;case`Home`:t.preventDefault(),i=0;break;case`End`:t.preventDefault(),i=r-1;break;case`Escape`:h&&(t.preventDefault(),B());break;case`a`:case`A`:h&&(t.ctrlKey||t.metaKey)&&(t.preventDefault(),z());break;default:return}i!==k&&(A(i),t.currentTarget.querySelectorAll(`[data-gallery-item]`)[i]?.focus())};return(0,u.jsx)(d.Provider,{value:{selectable:h,selectedIds:I,lastClickedIndex:j,items:e,toggleSelect:R,focusedIndex:k,setFocusedIndex:A,selectAll:z,clearSelection:B,onItemClick:y},children:(0,u.jsxs)(`div`,{ref:F,className:(0,l.default)(`wim-gallery`,s.default.root,x),...C,children:[h&&U&&(0,u.jsxs)(`div`,{className:s.default.toolbar,role:`toolbar`,"aria-label":T(`gallery.toolbar_label`),children:[(0,u.jsx)(`span`,{className:s.default.toolbarCount,children:T(`gallery.selected_count`,{count:H.length})}),(0,u.jsxs)(`div`,{className:s.default.toolbarActions,children:[b?.({selectedIds:H,clearSelection:B}),(0,u.jsx)(a.Button,{size:`sm`,variant:`ghost`,className:s.default.toolbarClear,onClick:B,"aria-label":T(`gallery.clear_selection`),icon:(0,u.jsx)(i.Icon,{component:r.default,size:`sm`})})]})]}),(0,u.jsx)(`div`,{className:(0,l.default)(s.default.grid,s.default[`gap-${f}`],s.default[`aspect-${p}`]),style:W,role:`grid`,"aria-multiselectable":h||void 0,"aria-label":T(`gallery.grid_label`),onKeyDown:G,tabIndex:0,children:V.map(({rowItems:e,startIndex:t},n)=>(0,u.jsx)(`div`,{role:`row`,style:{display:`contents`},children:e.map((e,n)=>(0,u.jsx)(m,{item:e,index:t+n},e.id))},n))})]})})});p.displayName=`Gallery`;var m=({item:e,index:r})=>{let{selectable:i,selectedIds:a,toggleSelect:c,focusedIndex:d,setFocusedIndex:p,onItemClick:m}=f(),{t:h}=t.useWimTranslation(n.componentsNs),g=a.has(e.id),_=d===r,v=()=>{m?.(e,r),p(r)},y=t=>{t.stopPropagation(),c(e.id,r,t.shiftKey)},b=t=>{(t.key===` `||t.key===`Enter`)&&(t.preventDefault(),i&&t.key===` `?c(e.id,r,t.shiftKey):m?.(e,r))};return(0,u.jsxs)(`div`,{className:(0,l.default)(s.default.item,{[s.default.selected]:g}),role:`gridcell`,"aria-selected":i?g:void 0,tabIndex:_?0:-1,onClick:v,onKeyDown:b,onFocus:()=>p(r),"data-gallery-item":!0,children:[(0,u.jsxs)(`div`,{className:s.default.imageWrapper,children:[(0,u.jsx)(`img`,{src:e.src,alt:e.alt??e.title??``,className:s.default.image,draggable:!1}),i&&(0,u.jsx)(`div`,{className:s.default.checkboxOverlay,children:(0,u.jsx)(o.Checkbox,{checked:g,onChange:()=>{},onClick:y,"aria-label":h(g?`gallery.deselect_item`:`gallery.select_item`,{title:e.title??e.alt??String(r+1)}),tabIndex:-1,className:s.default.checkbox})}),g&&(0,u.jsx)(`div`,{className:s.default.selectedRing,"aria-hidden":!0})]}),(e.title||e.caption)&&(0,u.jsxs)(`div`,{className:s.default.caption,children:[e.title&&(0,u.jsx)(`span`,{className:s.default.captionTitle,children:e.title}),e.caption&&(0,u.jsx)(`span`,{className:s.default.captionText,children:e.caption})]})]})};exports.Gallery=p;