wimui 0.5.3 → 0.6.0

package/dist/components/data-display/Table/table.module.js

@@ -1,32 +1,33 @@
 "use client";
 //#region src/components/data-display/Table/table.module.scss
-var e = "_container_n6iuv_4", t = "_sticky_n6iuv_10", n = "_cardContainer_n6iuv_13", r = "_root_n6iuv_18", i = "_fullWidth_n6iuv_34", a = "_striped_n6iuv_37", o = "_bordered_n6iuv_41", s = "_hoverable_n6iuv_48", c = "_stickyLeft_n6iuv_52", l = "_stickyRight_n6iuv_52", u = "_stickyHeader_n6iuv_55", d = "_mobileCard_n6iuv_72", f = "_header_n6iuv_109", p = "_body_n6iuv_113", m = "_row_n6iuv_116", h = "_selected_n6iuv_121", g = "_head_n6iuv_109", _ = "_sortable_n6iuv_132", v = "_selection_n6iuv_139", y = "_cell_n6iuv_159", b = "_headContent_n6iuv_183", x = "_sortIcon_n6iuv_191", S = "_asc_n6iuv_196", C = "_desc_n6iuv_200", w = "_noScrollbar_n6iuv_203", T = "_subtleScrollbar_n6iuv_211", E = {
+var e = "_container_1c5bz_4", t = "_mobileCard_1c5bz_13", n = "_mobileCardMd_1c5bz_13", r = "_sticky_1c5bz_16", i = "_cardContainer_1c5bz_19", a = "_root_1c5bz_24", o = "_fullWidth_1c5bz_40", s = "_striped_1c5bz_43", c = "_bordered_1c5bz_47", l = "_hoverable_1c5bz_54", u = "_stickyLeft_1c5bz_58", d = "_stickyRight_1c5bz_58", f = "_stickyHeader_1c5bz_61", p = "_selection_1c5bz_150", m = "_header_1c5bz_11", h = "_body_1c5bz_11", g = "_row_1c5bz_255", _ = "_selected_1c5bz_260", v = "_head_1c5bz_11", y = "_sortable_1c5bz_271", b = "_cell_1c5bz_298", x = "_headContent_1c5bz_328", S = "_sortIcon_1c5bz_336", C = "_asc_1c5bz_341", w = "_desc_1c5bz_345", T = "_noScrollbar_1c5bz_348", E = "_subtleScrollbar_1c5bz_356", D = {
 	container: e,
-	sticky: t,
-	cardContainer: n,
-	root: r,
-	fullWidth: i,
-	striped: a,
-	bordered: o,
-	hoverable: s,
-	stickyLeft: c,
-	stickyRight: l,
-	stickyHeader: u,
-	mobileCard: d,
-	header: f,
-	body: p,
-	row: m,
-	selected: h,
-	head: g,
-	sortable: _,
-	selection: v,
-	cell: y,
-	headContent: b,
-	sortIcon: x,
-	asc: S,
-	desc: C,
-	noScrollbar: w,
-	subtleScrollbar: T
+	mobileCard: t,
+	mobileCardMd: n,
+	sticky: r,
+	cardContainer: i,
+	root: a,
+	fullWidth: o,
+	striped: s,
+	bordered: c,
+	hoverable: l,
+	stickyLeft: u,
+	stickyRight: d,
+	stickyHeader: f,
+	selection: p,
+	header: m,
+	body: h,
+	row: g,
+	selected: _,
+	head: v,
+	sortable: y,
+	cell: b,
+	headContent: x,
+	sortIcon: S,
+	asc: C,
+	desc: w,
+	noScrollbar: T,
+	subtleScrollbar: E
 };
 //#endregion
-export { S as asc, p as body, o as bordered, n as cardContainer, y as cell, e as container, E as default, C as desc, i as fullWidth, g as head, b as headContent, f as header, s as hoverable, d as mobileCard, w as noScrollbar, r as root, m as row, h as selected, v as selection, x as sortIcon, _ as sortable, t as sticky, u as stickyHeader, c as stickyLeft, l as stickyRight, a as striped, T as subtleScrollbar };
+export { C as asc, h as body, c as bordered, i as cardContainer, b as cell, e as container, D as default, w as desc, o as fullWidth, v as head, x as headContent, m as header, l as hoverable, t as mobileCard, n as mobileCardMd, T as noScrollbar, a as root, g as row, _ as selected, p as selection, S as sortIcon, y as sortable, r as sticky, f as stickyHeader, u as stickyLeft, d as stickyRight, s as striped, E as subtleScrollbar };

package/dist/components/data-display/Tag/Tag.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../icon/close.cjs"),n=require("../../media/Icon/Icon.cjs"),r=require("../../_internal/IndicatorBase.cjs"),i=require("./tag.module.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("classnames");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=a.default.forwardRef(({children:e,content:a,icon:c,onDelete:l,disabled:u,interactive:d=!1,...f},p)=>(0,s.jsxs)(r.IndicatorBase,{ref:p,styles:i.default,icon:c,content:a,className:(0,o.default)(`wim-tag`,f.className,{[i.default.disabled]:u}),interactive:d,...f,children:[e,l&&(0,s.jsx)(`button`,{type:`button`,className:i.default.closeButton,onClick:e=>{e.stopPropagation(),l(e)},"aria-label":`Close`,children:(0,s.jsx)(n.Icon,{component:t.default,size:`sm`})})]}));c.displayName=`Tag`,exports.Tag=c;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/close.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../_internal/IndicatorBase.cjs"),a=require("./tag.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.forwardRef(({children:e,content:o,icon:l,onDelete:u,disabled:d,interactive:f=!1,...p},m)=>{let{t:h}=t.useWimTranslation(`common`);return(0,c.jsxs)(i.IndicatorBase,{ref:m,styles:a.default,icon:l,content:o,className:(0,s.default)(`wim-tag`,p.className,{[a.default.disabled]:d}),interactive:f,...p,children:[e,u&&(0,c.jsx)(`button`,{type:`button`,className:a.default.closeButton,onClick:e=>{e.stopPropagation(),u(e)},"aria-label":h(`a11y.close`),children:(0,c.jsx)(r.Icon,{component:n.default,size:`sm`})})]})});l.displayName=`Tag`,exports.Tag=l;

package/dist/components/data-display/Tag/Tag.js

@@ -1,33 +1,37 @@
 "use client";
-import e from "../../../icon/close.js";
-import { Icon as t } from "../../media/Icon/Icon.js";
-import { IndicatorBase as n } from "../../_internal/IndicatorBase.js";
-import r from "./tag.module.js";
-import i from "react";
-import a from "classnames";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import t from "../../../icon/close.js";
+import { Icon as n } from "../../media/Icon/Icon.js";
+import { IndicatorBase as r } from "../../_internal/IndicatorBase.js";
+import i from "./tag.module.js";
+import a from "react";
+import o from "classnames";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/data-display/Tag/Tag.tsx
-var c = i.forwardRef(({ children: i, content: c, icon: l, onDelete: u, disabled: d, interactive: f = !1, ...p }, m) => /* @__PURE__ */ s(n, {
-	ref: m,
-	styles: r,
-	icon: l,
-	content: c,
-	className: a("wim-tag", p.className, { [r.disabled]: d }),
-	interactive: f,
-	...p,
-	children: [i, u && /* @__PURE__ */ o("button", {
-		type: "button",
-		className: r.closeButton,
-		onClick: (e) => {
-			e.stopPropagation(), u(e);
-		},
-		"aria-label": "Close",
-		children: /* @__PURE__ */ o(t, {
-			component: e,
-			size: "sm"
-		})
-	})]
-}));
-c.displayName = "Tag";
+var l = a.forwardRef(({ children: a, content: l, icon: u, onDelete: d, disabled: f, interactive: p = !1, ...m }, h) => {
+	let { t: g } = e("common");
+	return /* @__PURE__ */ c(r, {
+		ref: h,
+		styles: i,
+		icon: u,
+		content: l,
+		className: o("wim-tag", m.className, { [i.disabled]: f }),
+		interactive: p,
+		...m,
+		children: [a, d && /* @__PURE__ */ s("button", {
+			type: "button",
+			className: i.closeButton,
+			onClick: (e) => {
+				e.stopPropagation(), d(e);
+			},
+			"aria-label": g("a11y.close"),
+			children: /* @__PURE__ */ s(n, {
+				component: t,
+				size: "sm"
+			})
+		})]
+	});
+});
+l.displayName = "Tag";
 //#endregion
-export { c as Tag };
+export { l as Tag };

package/dist/components/form/Button/button.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1lz2p_2`,t=`_fullWidth_1lz2p_29`,n=`_inner_1lz2p_37`,r=`_loader_1lz2p_40`,i=`_label_1lz2p_47`,a=`_lg_1lz2p_57`,o=`_md_1lz2p_66`,s=`_sm_1lz2p_75`,c=`_solid_1lz2p_85`,l=`_danger_1lz2p_95`,u=`_success_1lz2p_100`,d=`_outline_1lz2p_124`,f=`_ghost_1lz2p_157`,p=`_iconOnly_1lz2p_190`,m=`_content_1lz2p_200`,h=`_loading_1lz2p_210`,g=`_animatedWidth_1lz2p_219`,_={root:e,fullWidth:t,inner:n,loader:r,label:i,lg:a,md:o,sm:s,solid:c,default:`_default_1lz2p_90`,danger:l,success:u,outline:d,ghost:f,iconOnly:p,content:m,loading:h,animatedWidth:g};exports.animatedWidth=g,exports.content=m,exports.danger=l,exports.default=_,exports.fullWidth=t,exports.ghost=f,exports.iconOnly=p,exports.inner=n,exports.label=i,exports.lg=a,exports.loader=r,exports.loading=h,exports.md=o,exports.outline=d,exports.root=e,exports.sm=s,exports.solid=c,exports.success=u;
+var e=`_root_1v3gk_3`,t=`_fullWidth_1v3gk_30`,n=`_inner_1v3gk_38`,r=`_loader_1v3gk_41`,i=`_label_1v3gk_48`,a=`_lg_1v3gk_58`,o=`_md_1v3gk_67`,s=`_sm_1v3gk_76`,c=`_solid_1v3gk_86`,l=`_danger_1v3gk_96`,u=`_success_1v3gk_101`,d=`_outline_1v3gk_125`,f=`_ghost_1v3gk_162`,p=`_iconOnly_1v3gk_198`,m=`_content_1v3gk_208`,h=`_loading_1v3gk_218`,g=`_animatedWidth_1v3gk_227`,_={root:e,fullWidth:t,inner:n,loader:r,label:i,lg:a,md:o,sm:s,solid:c,default:`_default_1v3gk_91`,danger:l,success:u,outline:d,ghost:f,iconOnly:p,content:m,loading:h,animatedWidth:g};exports.animatedWidth=g,exports.content=m,exports.danger=l,exports.default=_,exports.fullWidth=t,exports.ghost=f,exports.iconOnly=p,exports.inner=n,exports.label=i,exports.lg=a,exports.loader=r,exports.loading=h,exports.md=o,exports.outline=d,exports.root=e,exports.sm=s,exports.solid=c,exports.success=u;

package/dist/components/form/Button/button.module.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/form/Button/button.module.scss
-var e = "_root_1lz2p_2", t = "_fullWidth_1lz2p_29", n = "_inner_1lz2p_37", r = "_loader_1lz2p_40", i = "_label_1lz2p_47", a = "_lg_1lz2p_57", o = "_md_1lz2p_66", s = "_sm_1lz2p_75", c = "_solid_1lz2p_85", l = "_danger_1lz2p_95", u = "_success_1lz2p_100", d = "_outline_1lz2p_124", f = "_ghost_1lz2p_157", p = "_iconOnly_1lz2p_190", m = "_content_1lz2p_200", h = "_loading_1lz2p_210", g = "_animatedWidth_1lz2p_219", _ = {
+var e = "_root_1v3gk_3", t = "_fullWidth_1v3gk_30", n = "_inner_1v3gk_38", r = "_loader_1v3gk_41", i = "_label_1v3gk_48", a = "_lg_1v3gk_58", o = "_md_1v3gk_67", s = "_sm_1v3gk_76", c = "_solid_1v3gk_86", l = "_danger_1v3gk_96", u = "_success_1v3gk_101", d = "_outline_1v3gk_125", f = "_ghost_1v3gk_162", p = "_iconOnly_1v3gk_198", m = "_content_1v3gk_208", h = "_loading_1v3gk_218", g = "_animatedWidth_1v3gk_227", _ = {
 	root: e,
 	fullWidth: t,
 	inner: n,
@@ -10,7 +10,7 @@ var e = "_root_1lz2p_2", t = "_fullWidth_1lz2p_29", n = "_inner_1lz2p_37", r = "
 	md: o,
 	sm: s,
 	solid: c,
-	default: "_default_1lz2p_90",
+	default: "_default_1v3gk_91",
 	danger: l,
 	success: u,
 	outline: d,

package/dist/components/form/ImageCropper/ImageCropper.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Button/Button.cjs"),r=require("../../overlay/Dialog/Dialog.cjs"),i=require("../Slider/Slider.cjs"),a=require("../IconButton/IconButton.cjs"),o=require("./image-cropper.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=s.default.forwardRef(({src:e,aspectRatio:u=1,circular:d=!1,onCrop:f,showRotation:p=!0,showZoom:m=!0,showApplyButton:h=!0,applyLabel:g,onApply:_,className:v,...y},b)=>{let{t:x}=t.useWimTranslation(`form`),[S,C]=(0,s.useState)(1),[w,T]=(0,s.useState)(0),[E,D]=(0,s.useState)({x:0,y:0}),[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)({x:0,y:0}),[M,N]=(0,s.useState)(!1),P=(0,s.useRef)(null),F=(0,s.useRef)(null);(0,s.useEffect)(()=>{D({x:0,y:0}),C(1),T(0)},[e]);let I=e=>{k(!0),j({x:e.clientX-E.x,y:e.clientY-E.y})},L=(0,s.useCallback)(e=>{O&&D({x:e.clientX-A.x,y:e.clientY-A.y})},[O,A]),R=(0,s.useCallback)(()=>{k(!1)},[]);(0,s.useEffect)(()=>(O?(window.addEventListener(`mousemove`,L),window.addEventListener(`mouseup`,R)):(window.removeEventListener(`mousemove`,L),window.removeEventListener(`mouseup`,R)),()=>{window.removeEventListener(`mousemove`,L),window.removeEventListener(`mouseup`,R)}),[O,L,R]);let z=()=>{T(e=>(e+90)%360)},B=()=>{N(!0)},V=()=>{let t=e||``;f?.(t),_?.(t),N(!1)};return e?(0,l.jsxs)(`div`,{ref:b,className:(0,c.default)(`wim-image-cropper`,o.default.root,v),...y,children:[(0,l.jsxs)(`div`,{ref:F,className:o.default.viewer,onMouseDown:I,role:`presentation`,children:[(0,l.jsx)(`div`,{className:o.default.imageContainer,children:(0,l.jsx)(`img`,{ref:P,src:e,alt:`Crop target`,className:o.default.image,style:{transform:`translate(${E.x}px, ${E.y}px) rotate(${w}deg) scale(${S})`},draggable:!1})}),(0,l.jsx)(`div`,{className:o.default.overlay,children:(0,l.jsx)(`div`,{className:(0,c.default)(o.default.cropArea,{[o.default.circular]:d}),style:{aspectRatio:u}})})]}),(0,l.jsxs)(`div`,{className:o.default.controls,children:[m&&(0,l.jsx)(`div`,{className:o.default.zoomControl,children:(0,l.jsx)(i.Slider,{min:1,max:3,step:.1,value:S,onChange:e=>C(e),label:x(`image_cropper.zoom`),styles:{root:o.default.zoomSlider}})}),p&&(0,l.jsx)(`div`,{className:o.default.rotationControl,children:(0,l.jsx)(a.IconButton,{iconName:`RefreshIcon`,onClick:z,"aria-label":x(`image_cropper.rotate`),variant:`outline`,size:`sm`})}),h&&(0,l.jsx)(`div`,{className:o.default.applyControl,children:(0,l.jsx)(n.Button,{onClick:B,size:`sm`,variant:`solid`,children:g||x(`image_cropper.apply`)})})]}),(0,l.jsx)(r.Dialog,{open:M,onOpenChange:N,children:(0,l.jsxs)(r.DialogContent,{children:[(0,l.jsx)(r.DialogHeader,{children:(0,l.jsx)(r.DialogTitle,{children:x(`image_cropper.confirm_title`)})}),(0,l.jsx)(r.DialogDescription,{children:x(`image_cropper.confirm_message`)}),(0,l.jsxs)(r.DialogFooter,{children:[(0,l.jsx)(r.DialogClose,{asChild:!0,children:(0,l.jsx)(n.Button,{variant:`ghost`,children:x(`image_cropper.cancel`)})}),(0,l.jsx)(n.Button,{onClick:V,variant:`solid`,children:x(`image_cropper.confirm`)})]})]})})]}):(0,l.jsx)(`div`,{ref:b,className:(0,c.default)(`wim-image-cropper`,o.default.root,o.default.empty,v),...y,children:(0,l.jsx)(`div`,{className:o.default.emptyContent,children:x(`image_cropper.no_image`)})})});u.displayName=`ImageCropper`,exports.ImageCropper=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../Button/Button.cjs"),r=require("../../overlay/Dialog/Dialog.cjs"),i=require("../Slider/Slider.cjs"),a=require("../IconButton/IconButton.cjs"),o=require("./image-cropper.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=s.default.forwardRef(({src:e,aspectRatio:u=1,circular:d=!1,onCrop:f,showRotation:p=!0,showZoom:m=!0,showApplyButton:h=!0,applyLabel:g,onApply:_,className:v,...y},b)=>{let{t:x}=t.useWimTranslation(`form`),[S,C]=(0,s.useState)(1),[w,T]=(0,s.useState)(0),[E,D]=(0,s.useState)({x:0,y:0}),[O,k]=(0,s.useState)(!1),[A,j]=(0,s.useState)({x:0,y:0}),[M,N]=(0,s.useState)(!1),P=(0,s.useRef)(null),F=(0,s.useRef)(null);(0,s.useEffect)(()=>{D({x:0,y:0}),C(1),T(0)},[e]);let I=e=>{k(!0),j({x:e.clientX-E.x,y:e.clientY-E.y})},L=(0,s.useCallback)(e=>{O&&D({x:e.clientX-A.x,y:e.clientY-A.y})},[O,A]),R=(0,s.useCallback)(()=>{k(!1)},[]);(0,s.useEffect)(()=>(O?(window.addEventListener(`mousemove`,L),window.addEventListener(`mouseup`,R)):(window.removeEventListener(`mousemove`,L),window.removeEventListener(`mouseup`,R)),()=>{window.removeEventListener(`mousemove`,L),window.removeEventListener(`mouseup`,R)}),[O,L,R]);let z=()=>{T(e=>(e+90)%360)},B=()=>{N(!0)},V=()=>{let t=e||``;f?.(t),_?.(t),N(!1)};return e?(0,l.jsxs)(`div`,{ref:b,className:(0,c.default)(`wim-image-cropper`,o.default.root,v),...y,children:[(0,l.jsxs)(`div`,{ref:F,className:o.default.viewer,onMouseDown:I,role:`presentation`,children:[(0,l.jsx)(`div`,{className:o.default.imageContainer,children:(0,l.jsx)(`img`,{ref:P,src:e,alt:x(`a11y.crop_target`),className:o.default.image,style:{transform:`translate(${E.x}px, ${E.y}px) rotate(${w}deg) scale(${S})`},draggable:!1})}),(0,l.jsx)(`div`,{className:o.default.overlay,children:(0,l.jsx)(`div`,{className:(0,c.default)(o.default.cropArea,{[o.default.circular]:d}),style:{aspectRatio:u}})})]}),(0,l.jsxs)(`div`,{className:o.default.controls,children:[m&&(0,l.jsx)(`div`,{className:o.default.zoomControl,children:(0,l.jsx)(i.Slider,{min:1,max:3,step:.1,value:S,onChange:e=>C(e),label:x(`image_cropper.zoom`),styles:{root:o.default.zoomSlider}})}),p&&(0,l.jsx)(`div`,{className:o.default.rotationControl,children:(0,l.jsx)(a.IconButton,{iconName:`RefreshIcon`,onClick:z,"aria-label":x(`image_cropper.rotate`),variant:`outline`,size:`sm`})}),h&&(0,l.jsx)(`div`,{className:o.default.applyControl,children:(0,l.jsx)(n.Button,{onClick:B,size:`sm`,variant:`solid`,children:g||x(`image_cropper.apply`)})})]}),(0,l.jsx)(r.Dialog,{open:M,onOpenChange:N,children:(0,l.jsxs)(r.DialogContent,{children:[(0,l.jsx)(r.DialogHeader,{children:(0,l.jsx)(r.DialogTitle,{children:x(`image_cropper.confirm_title`)})}),(0,l.jsx)(r.DialogDescription,{children:x(`image_cropper.confirm_message`)}),(0,l.jsxs)(r.DialogFooter,{children:[(0,l.jsx)(r.DialogClose,{asChild:!0,children:(0,l.jsx)(n.Button,{variant:`ghost`,children:x(`image_cropper.cancel`)})}),(0,l.jsx)(n.Button,{onClick:V,variant:`solid`,children:x(`image_cropper.confirm`)})]})]})})]}):(0,l.jsx)(`div`,{ref:b,className:(0,c.default)(`wim-image-cropper`,o.default.root,o.default.empty,v),...y,children:(0,l.jsx)(`div`,{className:o.default.emptyContent,children:x(`image_cropper.no_image`)})})});u.displayName=`ImageCropper`,exports.ImageCropper=u;

package/dist/components/form/ImageCropper/ImageCropper.js

@@ -66,7 +66,7 @@ var b = f.forwardRef(({ src: f, aspectRatio: b = 1, circular: x = !1, onCrop: S,
 					children: /* @__PURE__ */ v("img", {
 						ref: W,
 						src: f,
-						alt: "Crop target",
+						alt: j("a11y.crop_target"),
 						className: d.image,
 						style: { transform: `translate(${I.x}px, ${I.y}px) rotate(${P}deg) scale(${M})` },
 						draggable: !1

package/dist/components/form/InlineEdit/InlineEdit.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../FieldTemplate/FieldTemplate.cjs"),r=require("../Input/Input.cjs"),i=require("../IconButton/IconButton.cjs"),a=require("./inline-edit.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.forwardRef(({value:e,defaultValue:l,onChange:u,onSave:d,onCancel:f,onEdit:p,placeholder:m,disabled:h=!1,fullWidth:g=!1,label:_,className:v,...y},b)=>{let{t:x}=t.useWimTranslation(`common`),[S,C]=(0,o.useState)(!1),[w,T]=(0,o.useState)(l??``),[E,D]=(0,o.useState)(l??``),O=(0,o.useRef)(null),k=e!==void 0,A=k?e:E,j=()=>{h||(k||D(w),C(!0),p?.())},M=()=>{h||(k||T(A),C(!1),d?.(A))},N=()=>{h||(k||D(w),C(!1),f?.())},P=e=>{let t=e.target.value;k||D(t),u?.(t)},F=e=>{e.key===`Enter`?(e.preventDefault(),M()):e.key===`Escape`&&(e.preventDefault(),N())};return(0,o.useEffect)(()=>{S&&O.current&&O.current.focus()},[S]),(0,c.jsx)(n.FieldTemplate,{label:_,className:v,children:(0,c.jsx)(`div`,{ref:b,className:(0,s.default)(`wim-inline-edit`,a.default.root,g&&a.default.fullWidth,h&&a.default.disabled),...y,children:S?(0,c.jsxs)(`div`,{className:a.default.editWrapper,children:[(0,c.jsx)(r.Input,{ref:O,value:A,onChange:P,onKeyDown:F,disabled:h,placeholder:m,fullWidth:g,className:a.default.input}),(0,c.jsxs)(`div`,{className:a.default.editActions,children:[(0,c.jsx)(i.IconButton,{iconName:`CheckIcon`,intent:`success`,variant:`outline`,"aria-label":x(`action.save`),onClick:M,disabled:h}),(0,c.jsx)(i.IconButton,{iconName:`CloseIcon`,intent:`default`,variant:`outline`,"aria-label":x(`action.cancel`),onClick:N,disabled:h})]})]}):(0,c.jsxs)(`div`,{className:a.default.preview,onClick:j,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),j())},tabIndex:h?-1:0,role:`button`,"aria-disabled":h,children:[(0,c.jsx)(`span`,{className:(0,s.default)(a.default.text,!A&&a.default.placeholder),children:A||m||`\xA0`}),(0,c.jsx)(`span`,{className:a.default.editIconWrapper,children:(0,c.jsx)(i.IconButton,{iconName:`EditIcon`,variant:`ghost`,tabIndex:-1,"aria-label":x(`action.edit`),"aria-hidden":`true`,asChild:!0,children:(0,c.jsx)(`span`,{})})})]})})})});l.displayName=`InlineEdit`,exports.InlineEdit=l;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../FieldTemplate/FieldTemplate.cjs"),r=require("../Input/Input.cjs"),i=require("../IconButton/IconButton.cjs"),a=require("./inline-edit.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.forwardRef(({value:e,defaultValue:l,onChange:u,onSave:d,onCancel:f,onEdit:p,placeholder:m,disabled:h=!1,fullWidth:g=!1,label:_,className:v,"aria-label":y,...b},x)=>{let{t:S}=t.useWimTranslation(`common`),[C,w]=(0,o.useState)(!1),[T,E]=(0,o.useState)(l??``),[D,O]=(0,o.useState)(l??``),k=(0,o.useRef)(null),A=e!==void 0,j=A?e:D,M=()=>{h||(A||O(T),w(!0),p?.())},N=()=>{h||(A||E(j),w(!1),d?.(j))},P=()=>{h||(A||O(T),w(!1),f?.())},F=e=>{let t=e.target.value;A||O(t),u?.(t)},I=e=>{e.key===`Enter`?(e.preventDefault(),N()):e.key===`Escape`&&(e.preventDefault(),P())};return(0,o.useEffect)(()=>{C&&k.current&&k.current.focus()},[C]),(0,c.jsx)(n.FieldTemplate,{label:_,className:v,children:(0,c.jsx)(`div`,{ref:x,className:(0,s.default)(`wim-inline-edit`,a.default.root,g&&a.default.fullWidth,h&&a.default.disabled),...b,children:C?(0,c.jsxs)(`div`,{className:a.default.editWrapper,children:[(0,c.jsx)(r.Input,{ref:k,value:j,onChange:F,onKeyDown:I,disabled:h,placeholder:m,"aria-label":y,fullWidth:g,className:a.default.input}),(0,c.jsxs)(`div`,{className:a.default.editActions,children:[(0,c.jsx)(i.IconButton,{iconName:`CheckIcon`,intent:`success`,variant:`outline`,"aria-label":S(`action.save`),onClick:N,disabled:h}),(0,c.jsx)(i.IconButton,{iconName:`CloseIcon`,intent:`default`,variant:`outline`,"aria-label":S(`action.cancel`),onClick:P,disabled:h})]})]}):(0,c.jsxs)(`div`,{className:a.default.preview,onClick:M,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),M())},tabIndex:h?-1:0,role:`button`,"aria-label":y,"aria-disabled":h,children:[(0,c.jsx)(`span`,{className:(0,s.default)(a.default.text,!j&&a.default.placeholder),children:j||m||`\xA0`}),(0,c.jsx)(`span`,{className:a.default.editIconWrapper,children:(0,c.jsx)(i.IconButton,{iconName:`EditIcon`,variant:`ghost`,size:`sm`,tabIndex:-1,"aria-label":S(`action.edit`),"aria-hidden":`true`,asChild:!0,children:(0,c.jsx)(`span`,{})})})]})})})});l.displayName=`InlineEdit`,exports.InlineEdit=l;

package/dist/components/form/InlineEdit/InlineEdit.js

@@ -8,37 +8,38 @@ import a, { useEffect 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/form/InlineEdit/InlineEdit.tsx
-var f = a.forwardRef(({ value: a, defaultValue: f, onChange: p, onSave: m, onCancel: h, onEdit: g, placeholder: _, disabled: v = !1, fullWidth: y = !1, label: b, className: x, ...S }, C) => {
-	let { t: w } = e("common"), [T, E] = c(!1), [D, O] = c(f ?? ""), [k, A] = c(f ?? ""), j = s(null), M = a !== void 0, N = M ? a : k, P = () => {
-		v || (M || A(D), E(!0), g?.());
-	}, F = () => {
-		v || (M || O(N), E(!1), m?.(N));
+var f = a.forwardRef(({ value: a, defaultValue: f, onChange: p, onSave: m, onCancel: h, onEdit: g, placeholder: _, disabled: v = !1, fullWidth: y = !1, label: b, className: x, "aria-label": S, ...C }, w) => {
+	let { t: T } = e("common"), [E, D] = c(!1), [O, k] = c(f ?? ""), [A, j] = c(f ?? ""), M = s(null), N = a !== void 0, P = N ? a : A, F = () => {
+		v || (N || j(O), D(!0), g?.());
 	}, I = () => {
-		v || (M || A(D), E(!1), h?.());
-	}, L = (e) => {
-		let t = e.target.value;
-		M || A(t), p?.(t);
+		v || (N || k(P), D(!1), m?.(P));
+	}, L = () => {
+		v || (N || j(O), D(!1), h?.());
 	}, R = (e) => {
-		e.key === "Enter" ? (e.preventDefault(), F()) : e.key === "Escape" && (e.preventDefault(), I());
+		let t = e.target.value;
+		N || j(t), p?.(t);
+	}, z = (e) => {
+		e.key === "Enter" ? (e.preventDefault(), I()) : e.key === "Escape" && (e.preventDefault(), L());
 	};
 	return o(() => {
-		T && j.current && j.current.focus();
-	}, [T]), /* @__PURE__ */ u(t, {
+		E && M.current && M.current.focus();
+	}, [E]), /* @__PURE__ */ u(t, {
 		label: b,
 		className: x,
 		children: /* @__PURE__ */ u("div", {
-			ref: C,
+			ref: w,
 			className: l("wim-inline-edit", i.root, y && i.fullWidth, v && i.disabled),
-			...S,
-			children: T ? /* @__PURE__ */ d("div", {
+			...C,
+			children: E ? /* @__PURE__ */ d("div", {
 				className: i.editWrapper,
 				children: [/* @__PURE__ */ u(n, {
-					ref: j,
-					value: N,
-					onChange: L,
-					onKeyDown: R,
+					ref: M,
+					value: P,
+					onChange: R,
+					onKeyDown: z,
 					disabled: v,
 					placeholder: _,
+					"aria-label": S,
 					fullWidth: y,
 					className: i.input
 				}), /* @__PURE__ */ d("div", {
@@ -47,37 +48,39 @@ var f = a.forwardRef(({ value: a, defaultValue: f, onChange: p, onSave: m, onCan
 						iconName: "CheckIcon",
 						intent: "success",
 						variant: "outline",
-						"aria-label": w("action.save"),
-						onClick: F,
+						"aria-label": T("action.save"),
+						onClick: I,
 						disabled: v
 					}), /* @__PURE__ */ u(r, {
 						iconName: "CloseIcon",
 						intent: "default",
 						variant: "outline",
-						"aria-label": w("action.cancel"),
-						onClick: I,
+						"aria-label": T("action.cancel"),
+						onClick: L,
 						disabled: v
 					})]
 				})]
 			}) : /* @__PURE__ */ d("div", {
 				className: i.preview,
-				onClick: P,
+				onClick: F,
 				onKeyDown: (e) => {
-					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), P());
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
 				},
 				tabIndex: v ? -1 : 0,
 				role: "button",
+				"aria-label": S,
 				"aria-disabled": v,
 				children: [/* @__PURE__ */ u("span", {
-					className: l(i.text, !N && i.placeholder),
-					children: N || _ || "\xA0"
+					className: l(i.text, !P && i.placeholder),
+					children: P || _ || "\xA0"
 				}), /* @__PURE__ */ u("span", {
 					className: i.editIconWrapper,
 					children: /* @__PURE__ */ u(r, {
 						iconName: "EditIcon",
 						variant: "ghost",
+						size: "sm",
 						tabIndex: -1,
-						"aria-label": w("action.edit"),
+						"aria-label": T("action.edit"),
 						"aria-hidden": "true",
 						asChild: !0,
 						children: /* @__PURE__ */ u("span", {})

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", {