wimui 0.5.3 → 0.6.1

package/dist/components/form/OtpInput/OtpInput.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../FieldTemplate/FieldTemplate.cjs"),r=require("./otp-input.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=(0,i.forwardRef)(({length:e=6,value:s=``,onChange:c,disabled:l=!1,error:u,required:d,label:f,layout:p,className:m,labels:h={},asChild:g=!1,fullWidth:_=!1,children:v,...y},b)=>{let{digitAriaLabel:x=e=>`Digit ${e}`}=h,[S,C]=(0,i.useState)(Array(e).fill(``)),[w,T]=(0,i.useState)(s),E=(0,i.useRef)([]),D=`wim-otp-input-${(0,i.useId)()}`,O=f?`${D}-label`:void 0,k=u?`${D}-error`:void 0;if(s!==w){T(s);let t=s.split(``).slice(0,e);C(Array(e).fill(``).map((e,n)=>t[n]||``))}let A=e=>{let t=e.join(``);c&&c(t)},j=(t,n)=>{let r=t.target.value.slice(-1),i=[...S];i[n]=r,C(i),A(i),r&&n<e-1&&E.current[n+1]?.focus()},M=(t,n)=>{if(t.key===`Backspace`){if(!S[n]&&n>0){let e=[...S];e[n-1]=``,C(e),A(e),E.current[n-1]?.focus()}else if(S[n]){let e=[...S];e[n]=``,C(e),A(e)}}else t.key===`ArrowLeft`&&n>0?(t.preventDefault(),E.current[n-1]?.focus()):t.key===`ArrowRight`&&n<e-1&&(t.preventDefault(),E.current[n+1]?.focus())},N=t=>{t.preventDefault();let n=t.clipboardData.getData(`text`).slice(0,e).split(``),r=[...S];n.forEach((t,n)=>{n<e&&(r[n]=t)}),C(r),A(r);let i=Math.min(n.length,e-1);E.current[i]?.focus()},P=g?t.Root:`div`;return(0,o.jsx)(n.FieldTemplate,{label:f,error:u,required:d,layout:p,labelId:O,htmlFor:D,errorId:k,className:(0,a.default)(m,_&&r.default.fullWidth),children:(0,o.jsxs)(P,{className:(0,a.default)(`wim-otp-input`,r.default.root,_&&r.default.fullWidth),ref:b,...y,children:[(0,o.jsx)(t.Slottable,{children:(0,o.jsx)(`div`,{className:(0,a.default)(r.default.container,l&&r.default.disabled),role:`group`,"aria-labelledby":O,"data-testid":`otp-input-container`,"data-disabled":l,children:Array.from({length:e}).map((e,t)=>(0,o.jsx)(`input`,{id:t===0?D:void 0,ref:e=>{E.current[t]=e},"data-testid":`otp-input`,className:(0,a.default)(r.default.input,u&&r.default.danger,l&&r.default.disabled),type:`text`,maxLength:1,value:S[t],onChange:e=>j(e,t),onKeyDown:e=>M(e,t),onPaste:N,disabled:l,"aria-label":x(t+1),"aria-invalid":u?`true`:`false`,"aria-describedby":k,"aria-required":d?`true`:void 0},t))})}),v]})})});s.displayName=`OtpInput`,exports.OtpInput=s,exports.default=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../FieldTemplate/FieldTemplate.cjs"),r=require("./otp-input.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=(e,t)=>{let n=e.split(``).slice(0,t);return Array(t).fill(``).map((e,t)=>n[t]??``)},c=(0,i.forwardRef)(({length:e=6,value:c=``,onChange:l,disabled:u=!1,error:d,required:f,label:p,layout:m,className:h,labels:g={},asChild:_=!1,fullWidth:v=!1,children:y,...b},x)=>{let{digitAriaLabel:S=e=>`Digit ${e}`}=g,[C,w]=(0,i.useState)(()=>s(c,e)),[T,E]=(0,i.useState)(c),D=(0,i.useRef)([]),O=`wim-otp-input-${(0,i.useId)()}`,k=p?`${O}-label`:void 0,A=d?`${O}-error`:void 0;c!==T&&(E(c),w(s(c,e)));let j=e=>{let t=e.join(``);l&&l(t)},M=(t,n)=>{let r=t.target.value.slice(-1),i=[...C];i[n]=r,w(i),j(i),r&&n<e-1&&D.current[n+1]?.focus()},N=(t,n)=>{if(t.key===`Backspace`){if(!C[n]&&n>0){let e=[...C];e[n-1]=``,w(e),j(e),D.current[n-1]?.focus()}else if(C[n]){let e=[...C];e[n]=``,w(e),j(e)}}else t.key===`ArrowLeft`&&n>0?(t.preventDefault(),D.current[n-1]?.focus()):t.key===`ArrowRight`&&n<e-1&&(t.preventDefault(),D.current[n+1]?.focus())},P=t=>{t.preventDefault();let n=t.clipboardData.getData(`text`).slice(0,e).split(``),r=[...C];n.forEach((t,n)=>{n<e&&(r[n]=t)}),w(r),j(r);let i=Math.min(n.length,e-1);D.current[i]?.focus()},F=_?t.Root:`div`;return(0,o.jsx)(n.FieldTemplate,{label:p,error:d,required:f,layout:m,labelId:k,htmlFor:O,errorId:A,className:(0,a.default)(h,v&&r.default.fullWidth),children:(0,o.jsxs)(F,{className:(0,a.default)(`wim-otp-input`,r.default.root,v&&r.default.fullWidth),ref:x,...b,children:[(0,o.jsx)(t.Slottable,{children:(0,o.jsx)(`div`,{className:(0,a.default)(r.default.container,u&&r.default.disabled),role:`group`,"aria-labelledby":k,"data-testid":`otp-input-container`,"data-disabled":u,children:Array.from({length:e}).map((e,t)=>(0,o.jsx)(`input`,{id:t===0?O:void 0,ref:e=>{D.current[t]=e},"data-testid":`otp-input`,className:(0,a.default)(r.default.input,d&&r.default.danger,u&&r.default.disabled),type:`text`,maxLength:1,value:C[t],onChange:e=>M(e,t),onKeyDown:e=>N(e,t),onPaste:P,disabled:u,"aria-label":S(t+1),"aria-invalid":d?`true`:`false`,"aria-describedby":A,"aria-required":f?`true`:void 0},t))})}),y]})})});c.displayName=`OtpInput`,exports.OtpInput=c,exports.default=c;

package/dist/components/form/OtpInput/OtpInput.js

@@ -6,80 +6,79 @@ import { forwardRef as i, useId 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";
 //#region src/components/form/OtpInput/OtpInput.tsx
-var d = i(({ length: i = 6, value: d = "", onChange: f, disabled: p = !1, error: m, required: h, label: g, layout: _, className: v, labels: y = {}, asChild: b = !1, fullWidth: x = !1, children: S, ...C }, w) => {
-	let { digitAriaLabel: T = (e) => `Digit ${e}` } = y, [E, D] = s(Array(i).fill("")), [O, k] = s(d), A = o([]), j = `wim-otp-input-${a()}`, M = g ? `${j}-label` : void 0, N = m ? `${j}-error` : void 0;
-	if (d !== O) {
-		k(d);
-		let e = d.split("").slice(0, i);
-		D(Array(i).fill("").map((t, n) => e[n] || ""));
-	}
-	let P = (e) => {
+var d = (e, t) => {
+	let n = e.split("").slice(0, t);
+	return Array(t).fill("").map((e, t) => n[t] ?? "");
+}, f = i(({ length: i = 6, value: f = "", onChange: p, disabled: m = !1, error: h, required: g, label: _, layout: v, className: y, labels: b = {}, asChild: x = !1, fullWidth: S = !1, children: C, ...w }, T) => {
+	let { digitAriaLabel: E = (e) => `Digit ${e}` } = b, [D, O] = s(() => d(f, i)), [k, A] = s(f), j = o([]), M = `wim-otp-input-${a()}`, N = _ ? `${M}-label` : void 0, P = h ? `${M}-error` : void 0;
+	f !== k && (A(f), O(d(f, i)));
+	let F = (e) => {
 		let t = e.join("");
-		f && f(t);
-	}, F = (e, t) => {
-		let n = e.target.value.slice(-1), r = [...E];
-		r[t] = n, D(r), P(r), n && t < i - 1 && A.current[t + 1]?.focus();
+		p && p(t);
 	}, I = (e, t) => {
+		let n = e.target.value.slice(-1), r = [...D];
+		r[t] = n, O(r), F(r), n && t < i - 1 && j.current[t + 1]?.focus();
+	}, L = (e, t) => {
 		if (e.key === "Backspace") {
-			if (!E[t] && t > 0) {
-				let e = [...E];
-				e[t - 1] = "", D(e), P(e), A.current[t - 1]?.focus();
-			} else if (E[t]) {
-				let e = [...E];
-				e[t] = "", D(e), P(e);
+			if (!D[t] && t > 0) {
+				let e = [...D];
+				e[t - 1] = "", O(e), F(e), j.current[t - 1]?.focus();
+			} else if (D[t]) {
+				let e = [...D];
+				e[t] = "", O(e), F(e);
 			}
-		} else e.key === "ArrowLeft" && t > 0 ? (e.preventDefault(), A.current[t - 1]?.focus()) : e.key === "ArrowRight" && t < i - 1 && (e.preventDefault(), A.current[t + 1]?.focus());
-	}, L = (e) => {
+		} else e.key === "ArrowLeft" && t > 0 ? (e.preventDefault(), j.current[t - 1]?.focus()) : e.key === "ArrowRight" && t < i - 1 && (e.preventDefault(), j.current[t + 1]?.focus());
+	}, R = (e) => {
 		e.preventDefault();
-		let t = e.clipboardData.getData("text").slice(0, i).split(""), n = [...E];
+		let t = e.clipboardData.getData("text").slice(0, i).split(""), n = [...D];
 		t.forEach((e, t) => {
 			t < i && (n[t] = e);
-		}), D(n), P(n);
+		}), O(n), F(n);
 		let r = Math.min(t.length, i - 1);
-		A.current[r]?.focus();
-	}, R = b ? e : "div";
+		j.current[r]?.focus();
+	}, z = x ? e : "div";
 	return /* @__PURE__ */ l(n, {
-		label: g,
-		error: m,
-		required: h,
-		layout: _,
-		labelId: M,
-		htmlFor: j,
-		errorId: N,
-		className: c(v, x && r.fullWidth),
-		children: /* @__PURE__ */ u(R, {
-			className: c("wim-otp-input", r.root, x && r.fullWidth),
-			ref: w,
-			...C,
+		label: _,
+		error: h,
+		required: g,
+		layout: v,
+		labelId: N,
+		htmlFor: M,
+		errorId: P,
+		className: c(y, S && r.fullWidth),
+		children: /* @__PURE__ */ u(z, {
+			className: c("wim-otp-input", r.root, S && r.fullWidth),
+			ref: T,
+			...w,
 			children: [/* @__PURE__ */ l(t, { children: /* @__PURE__ */ l("div", {
-				className: c(r.container, p && r.disabled),
+				className: c(r.container, m && r.disabled),
 				role: "group",
-				"aria-labelledby": M,
+				"aria-labelledby": N,
 				"data-testid": "otp-input-container",
-				"data-disabled": p,
+				"data-disabled": m,
 				children: Array.from({ length: i }).map((e, t) => /* @__PURE__ */ l("input", {
-					id: t === 0 ? j : void 0,
+					id: t === 0 ? M : void 0,
 					ref: (e) => {
-						A.current[t] = e;
+						j.current[t] = e;
 					},
 					"data-testid": "otp-input",
-					className: c(r.input, m && r.danger, p && r.disabled),
+					className: c(r.input, h && r.danger, m && r.disabled),
 					type: "text",
 					maxLength: 1,
-					value: E[t],
-					onChange: (e) => F(e, t),
-					onKeyDown: (e) => I(e, t),
-					onPaste: L,
-					disabled: p,
-					"aria-label": T(t + 1),
-					"aria-invalid": m ? "true" : "false",
-					"aria-describedby": N,
-					"aria-required": h ? "true" : void 0
+					value: D[t],
+					onChange: (e) => I(e, t),
+					onKeyDown: (e) => L(e, t),
+					onPaste: R,
+					disabled: m,
+					"aria-label": E(t + 1),
+					"aria-invalid": h ? "true" : "false",
+					"aria-describedby": P,
+					"aria-required": g ? "true" : void 0
 				}, t))
-			}) }), S]
+			}) }), C]
 		})
 	});
 });
-d.displayName = "OtpInput";
+f.displayName = "OtpInput";
 //#endregion
-export { d as OtpInput, d as default };
+export { f as OtpInput, f as default };

package/dist/components/layout/Container/container.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_10xgo_2`,t={root:e};exports.default=t,exports.root=e;
+var e=`_root_87v5j_3`,t={root:e};exports.default=t,exports.root=e;

package/dist/components/layout/Container/container.module.js

@@ -1,5 +1,5 @@
 "use client";
 //#region src/components/layout/Container/container.module.scss
-var e = "_root_10xgo_2", t = { root: e };
+var e = "_root_87v5j_3", t = { root: e };
 //#endregion
 export { t as default, e as root };

package/dist/components/layout/Toolbar/toolbar.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1xd2s_4`,t=`_horizontal_1xd2s_13`,n=`_vertical_1xd2s_16`,r=`_group_1xd2s_32`,i=`_separator_1xd2s_41`,a={root:e,horizontal:t,vertical:n,"size-sm":`_size-sm_1xd2s_20`,"size-md":`_size-md_1xd2s_24`,"size-lg":`_size-lg_1xd2s_28`,group:r,separator:i};exports.default=a,exports.group=r,exports.horizontal=t,exports.root=e,exports.separator=i,exports.vertical=n;
+var e=`_root_mh5q6_4`,t=`_horizontal_mh5q6_13`,n=`_vertical_mh5q6_16`,r=`_group_mh5q6_32`,i=`_separator_mh5q6_42`,a={root:e,horizontal:t,vertical:n,"size-sm":`_size-sm_mh5q6_20`,"size-md":`_size-md_mh5q6_24`,"size-lg":`_size-lg_mh5q6_28`,group:r,separator:i};exports.default=a,exports.group=r,exports.horizontal=t,exports.root=e,exports.separator=i,exports.vertical=n;

package/dist/components/layout/Toolbar/toolbar.module.js

@@ -1,12 +1,12 @@
 "use client";
 //#region src/components/layout/Toolbar/toolbar.module.scss
-var e = "_root_1xd2s_4", t = "_horizontal_1xd2s_13", n = "_vertical_1xd2s_16", r = "_group_1xd2s_32", i = "_separator_1xd2s_41", a = {
+var e = "_root_mh5q6_4", t = "_horizontal_mh5q6_13", n = "_vertical_mh5q6_16", r = "_group_mh5q6_32", i = "_separator_mh5q6_42", a = {
 	root: e,
 	horizontal: t,
 	vertical: n,
-	"size-sm": "_size-sm_1xd2s_20",
-	"size-md": "_size-md_1xd2s_24",
-	"size-lg": "_size-lg_1xd2s_28",
+	"size-sm": "_size-sm_mh5q6_20",
+	"size-md": "_size-md_mh5q6_24",
+	"size-lg": "_size-lg_mh5q6_28",
 	group: r,
 	separator: i
 };

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

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

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

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

package/dist/components/overlay/Dropdown/Dropdown.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../layout/Transition/Transition.cjs"),r=require("../../_internal/BaseListItem/BaseListItem.cjs"),i=require("../../_internal/mergeRefs.cjs"),a=require("./dropdown.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=o.default.createContext({isOpen:!1,toggle:()=>{},close:()=>{},menuId:``,triggerId:``,focusedIndex:-1,setFocusedIndex:()=>{},registerItem:()=>0,containerRef:{current:null}}),u=(0,o.forwardRef)(({children:e,className:n,asChild:r=!1,...u},d)=>{let[f,p]=(0,o.useState)(!1),[m,h]=(0,o.useState)(-1),g=(0,o.useRef)(null),_=(0,o.useRef)(0),v=i.mergeRefs(g,d);(0,o.useEffect)(()=>{_.current=0});let y=()=>{let e=_.current;return _.current+=1,e},b=(0,o.useId)(),x=`wim-dropdown-menu-${b}`,S=`wim-dropdown-trigger-${b}`,C=()=>{let e=!f;p(e),h(e?0:-1)},w=()=>{p(!1),h(-1)};(0,o.useEffect)(()=>{let e=e=>{g.current&&!g.current.contains(e.target)&&w()},t=e=>{e.key===`Escape`&&w()};return f&&(document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t)),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[f]);let T=e=>{if(!f)return;let t=Array.from(g.current?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)||[]);switch(e.key){case`ArrowDown`:e.preventDefault(),h(e=>e<t.length-1?e+1:0);break;case`ArrowUp`:e.preventDefault(),h(e=>e>0?e-1:t.length-1);break;case`Home`:e.preventDefault(),h(0);break;case`End`:e.preventDefault(),h(t.length-1);break;case`Tab`:w();break}};(0,o.useEffect)(()=>{f&&m>=0&&Array.from(g.current?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)||[])[m]?.focus()},[m,f]);let E=r?t.Root:`div`;return(0,c.jsx)(l.Provider,{value:{isOpen:f,toggle:C,close:w,menuId:x,triggerId:S,focusedIndex:m,setFocusedIndex:h,registerItem:y,containerRef:g},children:(0,c.jsx)(E,{...u,role:`none`,className:(0,s.default)(`wim-dropdown`,a.default.root,n),ref:v,onKeyDown:T,children:(0,c.jsx)(t.Slottable,{children:e})})})});u.displayName=`Dropdown`;var d=(0,o.forwardRef)(({children:e,className:n,asChild:r=!1,...i},u)=>{let{toggle:d,isOpen:f,menuId:p,triggerId:m}=o.default.useContext(l);return(0,c.jsx)(r?t.Root:`div`,{...i,ref:u,id:m,className:(0,s.default)(a.default.trigger,n),onClick:d,"aria-haspopup":`menu`,"aria-expanded":f,"aria-controls":f?p:void 0,role:`button`,tabIndex:0,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),d())},children:(0,c.jsx)(t.Slottable,{children:e})})});d.displayName=`Dropdown.Trigger`;var f=(0,o.forwardRef)(({children:e,className:t,align:r=`left`,show:i,...u},d)=>{let{isOpen:f,menuId:p,triggerId:m}=o.default.useContext(l),h=r===`left`?a.default.alignLeft:a.default.alignRight;return(0,c.jsx)(n.Transition,{...u,ref:d,show:i===void 0?f:i,preset:`fade`,id:p,className:(0,s.default)(a.default.menu,h,t),role:`menu`,"aria-labelledby":m,children:e})});f.displayName=`Dropdown.Menu`;var p=(0,o.forwardRef)(({children:e,onClick:t,disabled:n=!1,className:i,...u},d)=>{let{close:f,focusedIndex:p,setFocusedIndex:m,registerItem:h}=o.default.useContext(l),[g]=(0,o.useState)(()=>h()),_=p===g,v=e=>{n||(e.stopPropagation(),t&&t(),f())};return(0,c.jsx)(r.BaseListItem,{...u,ref:d,className:(0,s.default)(a.default.item,i),onClick:v,onFocus:()=>m(g),disabled:n,role:`menuitem`,tabIndex:_?0:-1,onKeyDown:e=>{!n&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),v(e))},children:e})});p.displayName=`Dropdown.Item`;var m=(0,o.forwardRef)((e,t)=>(0,c.jsx)(u,{...e,ref:t}));m.displayName=`Dropdown`,m.Trigger=d,m.Menu=f,m.Item=p,exports.Dropdown=m,exports.default=m,exports.DropdownItem=p,exports.DropdownMenu=f,exports.DropdownTrigger=d;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../layout/Transition/Transition.cjs"),r=require("../../_internal/BaseListItem/BaseListItem.cjs"),i=require("../../_internal/mergeRefs.cjs"),a=require("./dropdown.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("@floating-ui/react");var u=o.default.createContext({isOpen:!1,toggle:()=>{},close:()=>{},menuId:``,triggerId:``,focusedIndex:-1,setFocusedIndex:()=>{},registerItem:()=>0,containerRef:{current:null},setReference:()=>{},setFloating:()=>{},floatingStyles:{},floatingRef:{current:null},setAlign:()=>{}}),d=(0,o.forwardRef)(({children:e,className:n,asChild:r=!1,...d},f)=>{let[p,m]=(0,o.useState)(!1),[h,g]=(0,o.useState)(-1),_=(0,o.useRef)(null),v=(0,o.useRef)(0),[y,b]=(0,o.useState)(`left`),{refs:x,floatingStyles:S}=(0,l.useFloating)({open:p,placement:y===`right`?`bottom-end`:`bottom-start`,whileElementsMounted:l.autoUpdate,middleware:[(0,l.offset)(4),(0,l.flip)(),(0,l.shift)({padding:8})]}),C=i.mergeRefs(_,f);(0,o.useEffect)(()=>{v.current=0});let w=()=>{let e=v.current;return v.current+=1,e},T=(0,o.useId)(),E=`wim-dropdown-menu-${T}`,D=`wim-dropdown-trigger-${T}`,O=()=>{let e=!p;m(e),g(e?0:-1)},k=()=>{m(!1),g(-1)};(0,o.useEffect)(()=>{let e=e=>{let t=e.target,n=x.floating.current?.contains(t)??!1;_.current&&!_.current.contains(t)&&!n&&k()},t=e=>{e.key===`Escape`&&k()};return p&&(document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t)),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[p,x.floating]);let A=e=>{if(!p)return;let t=Array.from((x.floating.current??_.current)?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)||[]);switch(e.key){case`ArrowDown`:e.preventDefault(),g(e=>e<t.length-1?e+1:0);break;case`ArrowUp`:e.preventDefault(),g(e=>e>0?e-1:t.length-1);break;case`Home`:e.preventDefault(),g(0);break;case`End`:e.preventDefault(),g(t.length-1);break;case`Tab`:k();break}};(0,o.useEffect)(()=>{p&&h>=0&&Array.from((x.floating.current??_.current)?.querySelectorAll(`[role="menuitem"]:not([aria-disabled="true"])`)||[])[h]?.focus({preventScroll:!0})},[h,p,x.floating]);let j=r?t.Root:`div`;return(0,c.jsx)(u.Provider,{value:{isOpen:p,toggle:O,close:k,menuId:E,triggerId:D,focusedIndex:h,setFocusedIndex:g,registerItem:w,containerRef:_,setReference:x.setReference,setFloating:x.setFloating,floatingStyles:S,floatingRef:x.floating,setAlign:b},children:(0,c.jsx)(j,{...d,role:`none`,className:(0,s.default)(`wim-dropdown`,a.default.root,n),ref:C,onKeyDown:A,children:(0,c.jsx)(t.Slottable,{children:e})})})});d.displayName=`Dropdown`;var f=(0,o.forwardRef)(({children:e,className:n,asChild:r=!1,...l},d)=>{let{toggle:f,isOpen:p,menuId:m,triggerId:h,setReference:g}=o.default.useContext(u),_=r?t.Root:`div`,v=i.mergeRefs(g,d);return(0,c.jsx)(_,{...l,ref:v,id:h,className:(0,s.default)(a.default.trigger,n),onClick:f,"aria-haspopup":`menu`,"aria-expanded":p,"aria-controls":p?m:void 0,role:`button`,tabIndex:0,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f())},children:(0,c.jsx)(t.Slottable,{children:e})})});f.displayName=`Dropdown.Trigger`;var p=(0,o.forwardRef)(({children:e,className:t,align:r=`left`,show:d,style:f,...p},m)=>{let{isOpen:h,menuId:g,triggerId:_,setFloating:v,floatingStyles:y,setAlign:b}=o.default.useContext(u);(0,o.useEffect)(()=>{b(r)},[r,b]);let x=i.mergeRefs(v,m);return(0,c.jsx)(l.FloatingPortal,{children:(0,c.jsx)(n.Transition,{...p,ref:x,show:d===void 0?h:d,preset:`fade`,id:g,style:{...y,...f},className:(0,s.default)(a.default.menu,t),role:`menu`,"aria-labelledby":_,children:e})})});p.displayName=`Dropdown.Menu`;var m=(0,o.forwardRef)(({children:e,onClick:t,disabled:n=!1,className:i,...l},d)=>{let{close:f,focusedIndex:p,setFocusedIndex:m,registerItem:h}=o.default.useContext(u),[g]=(0,o.useState)(()=>h()),_=p===g,v=e=>{n||(e.stopPropagation(),t&&t(),f())};return(0,c.jsx)(r.BaseListItem,{...l,ref:d,className:(0,s.default)(a.default.item,i),onClick:v,onFocus:()=>m(g),disabled:n,role:`menuitem`,tabIndex:_?0:-1,onKeyDown:e=>{!n&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),v(e))},children:e})});m.displayName=`Dropdown.Item`;var h=(0,o.forwardRef)((e,t)=>(0,c.jsx)(d,{...e,ref:t}));h.displayName=`Dropdown`,h.Trigger=f,h.Menu=p,h.Item=m,exports.Dropdown=h,exports.default=h,exports.DropdownItem=m,exports.DropdownMenu=p,exports.DropdownTrigger=f;