wimui 0.64.4 → 0.64.5

package/dist/components/feedback/Tour/Tour.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../overlay/Portal/Portal.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),a=require("../../form/Button/Button.cjs"),o=require("./tour.module.cjs"),s=require("../../_internal/observeMove.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=16;function f(e){let t=getComputedStyle(e);return`${t.fontWeight} ${t.fontSize} ${t.fontFamily}`}async function p(e){let t=document.fonts;if(t&&typeof t.load==`function`){try{await t.load(f(e))}catch{}for(;t.status===`loading`;)await new Promise(e=>{t.addEventListener(`loadingdone`,()=>e(),{once:!0})})}}function m(e){let t=document.fonts;return!t||typeof t.load!=`function`?!1:t.status===`loading`||typeof t.check==`function`&&!t.check(f(e))}function h(e,t){return Math.round(e.top)===Math.round(t.top)&&Math.round(e.left)===Math.round(t.left)&&Math.round(e.width)===Math.round(t.width)&&Math.round(e.height)===Math.round(t.height)}function g(e){return e.top>=d&&e.bottom<=window.innerHeight-d&&e.left>=d&&e.right<=window.innerWidth-d}var _=({steps:e,open:d,onClose:f,onFinish:_})=>{let{t:v}=t.useWimTranslation(n.commonNs),[y,b]=(0,c.useState)(0),[x,S]=(0,c.useState)(null),C=e[y],w=C?.target;(0,c.useLayoutEffect)(()=>{if(!d||!w){S(null);return}let e=!1,t=t=>{e||S(e=>t?e&&h(e,t)?e:t:null)},n=()=>{let e=document.querySelector(w);if(!e){t(null);return}g(e.getBoundingClientRect())||e.scrollIntoView({block:`center`,inline:`nearest`}),t(e.getBoundingClientRect())},r=()=>{let e=document.querySelector(w);t(e?e.getBoundingClientRect():null)},i,a=()=>{window.addEventListener(`resize`,r),window.addEventListener(`scroll`,r,!0);let e=document.querySelector(w);e&&(i=s.observeMove(e,r))},o=async()=>{let t=document.querySelector(w);t&&await p(t),!e&&(n(),a())},c=document.querySelector(w);return c&&m(c)?o():(n(),a()),()=>{e=!0,window.removeEventListener(`resize`,r),window.removeEventListener(`scroll`,r,!0),i?.()}},[d,y,w]);let T=(0,c.useId)(),E=(0,c.useRef)(null),D=(0,c.useRef)(null),O=d&&!!C&&!!x;if((0,c.useEffect)(()=>{if(!O)return;let e=E.current;e&&!e.contains(document.activeElement)&&D.current?.focus()},[O,y]),(0,c.useEffect)(()=>{if(!d)return;let e=e=>{e.key===`Escape`&&(e.preventDefault(),f())};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[d,f]),!d||!C)return null;let k=()=>{y<e.length-1?b(y+1):(_?_():f(),b(0))},A=()=>{y>0&&b(y-1)},j={},M=C.placement||`bottom`;if(x){let e=window.innerWidth,t=Math.min(300,e-32),n=M;if(e<640&&(n===`left`||n===`right`)&&(n=`bottom`),M=n,n===`top`||n===`bottom`){let r=x.left+x.width/2,i=t/2+16,a=e-t/2-16;r=i>a?e/2:Math.max(i,Math.min(a,r)),j.left=r,n===`top`?(j.top=x.top-12,j.transform=`translate(-50%, -100%)`):(j.top=x.bottom+12,j.transform=`translateX(-50%)`)}else n===`left`?(j.left=x.left-12,j.top=x.top+x.height/2,j.transform=`translate(-100%, -50%)`):n===`right`&&(j.left=x.right+12,j.top=x.top+x.height/2,j.transform=`translateY(-50%)`)}return(0,u.jsx)(r.Portal,{children:(0,u.jsx)(i.FocusTrap,{initialFocus:!1,children:(0,u.jsxs)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-label":C.title,"aria-describedby":x?T:void 0,children:[x&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`div`,{className:o.default.highlight,style:{top:x.top-4,left:x.left-4,width:x.width+8,height:x.height+8}}),(0,u.jsx)(`div`,{ref:E,className:(0,l.default)(`wim-tour`,o.default.bubble),"data-placement":M,style:j,children:(0,u.jsxs)(`div`,{className:o.default.inner,children:[(0,u.jsx)(`h3`,{className:o.default.title,children:C.title}),(0,u.jsx)(`p`,{id:T,className:o.default.description,children:C.description}),(0,u.jsxs)(`div`,{className:o.default.footer,children:[(0,u.jsxs)(`span`,{className:o.default.progress,children:[y+1,` / `,e.length]}),(0,u.jsxs)(`div`,{className:o.default.buttons,children:[y>0&&(0,u.jsx)(a.Button,{size:`sm`,variant:`outline`,onClick:A,children:v(`action.back`)}),(0,u.jsx)(a.Button,{ref:D,size:`sm`,variant:`solid`,onClick:k,children:y===e.length-1?v(`action.finish`):v(`action.next`)})]})]})]})})]}),(0,u.jsx)(`div`,{className:o.default.mask,onClick:f,role:`button`,tabIndex:0,"aria-label":v(`a11y.close_tour`),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&f()}})]},y)})})};exports.Tour=_;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../i18n/generated/common.cjs"),r=require("../../overlay/Portal/Portal.cjs"),i=require("../../overlay/FocusTrap/FocusTrap.cjs"),a=require("../../form/Button/Button.cjs"),o=require("./tour.module.cjs"),s=require("../../_internal/observeMove.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=16;function f(e){let t=getComputedStyle(e);return`${t.fontWeight} ${t.fontSize} ${t.fontFamily}`}async function p(e){let t=document.fonts;if(t&&typeof t.load==`function`){try{await t.load(f(e))}catch{}for(;t.status===`loading`;)await new Promise(e=>{t.addEventListener(`loadingdone`,()=>e(),{once:!0})})}}function m(e){let t=document.fonts;return!t||typeof t.load!=`function`?!1:t.status===`loading`||typeof t.check==`function`&&!t.check(f(e))}function h(e,t){return Math.round(e.top)===Math.round(t.top)&&Math.round(e.left)===Math.round(t.left)&&Math.round(e.width)===Math.round(t.width)&&Math.round(e.height)===Math.round(t.height)}function g(e){return e.top>=d&&e.bottom<=window.innerHeight-d&&e.left>=d&&e.right<=window.innerWidth-d}var _=({steps:e,open:d,onClose:f,onFinish:_})=>{let{t:v}=t.useWimTranslation(n.commonNs),[y,b]=(0,c.useState)(0),[x,S]=(0,c.useState)(null),C=e[y],w=C?.target;(0,c.useLayoutEffect)(()=>{if(!d||!w){S(null);return}let e=!1,t=t=>{e||S(e=>t?e&&h(e,t)?e:t:null)},n=()=>{let e=document.querySelector(w);e?(g(e.getBoundingClientRect())||e.scrollIntoView({block:`center`,inline:`nearest`}),t(e.getBoundingClientRect())):t(null)},r=()=>{let e=document.querySelector(w);t(e?e.getBoundingClientRect():null)},i,a=()=>{window.addEventListener(`resize`,r),window.addEventListener(`scroll`,r,!0);let e=document.querySelector(w);e&&(i=s.observeMove(e,r))},o=async()=>{let t=document.querySelector(w);t&&await p(t),!e&&(n(),a())},c=document.querySelector(w);return c&&m(c)?o():(n(),a()),()=>{e=!0,window.removeEventListener(`resize`,r),window.removeEventListener(`scroll`,r,!0),i?.()}},[d,y,w]);let T=(0,c.useId)(),E=(0,c.useRef)(null),D=(0,c.useRef)(null),O=d&&!!C&&!!x;if((0,c.useEffect)(()=>{if(!O)return;let e=E.current;e&&!e.contains(document.activeElement)&&D.current?.focus()},[O,y]),(0,c.useEffect)(()=>{if(!d)return;let e=e=>{e.key===`Escape`&&(e.preventDefault(),f())};return document.addEventListener(`keydown`,e),()=>document.removeEventListener(`keydown`,e)},[d,f]),!d||!C)return null;let k=()=>{y<e.length-1?b(y+1):(_?_():f(),b(0))},A=()=>{y>0&&b(y-1)},j={},M=C.placement||`bottom`;if(x){let e=window.innerWidth,t=Math.min(300,e-32),n=M;if(e<640&&(n===`left`||n===`right`)&&(n=`bottom`),M=n,n===`top`||n===`bottom`){let r=x.left+x.width/2,i=t/2+16,a=e-t/2-16;r=i>a?e/2:Math.max(i,Math.min(a,r)),j.left=r,n===`top`?(j.top=x.top-12,j.transform=`translate(-50%, -100%)`):(j.top=x.bottom+12,j.transform=`translateX(-50%)`)}else n===`left`?(j.left=x.left-12,j.top=x.top+x.height/2,j.transform=`translate(-100%, -50%)`):n===`right`&&(j.left=x.right+12,j.top=x.top+x.height/2,j.transform=`translateY(-50%)`)}return(0,u.jsx)(r.Portal,{children:(0,u.jsx)(i.FocusTrap,{initialFocus:!1,children:(0,u.jsxs)(`div`,{role:`dialog`,"aria-modal":`true`,"aria-label":C.title,"aria-describedby":x?T:void 0,children:[x&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(`div`,{className:o.default.highlight,style:{top:x.top-4,left:x.left-4,width:x.width+8,height:x.height+8}}),(0,u.jsx)(`div`,{ref:E,className:(0,l.default)(`wim-tour`,o.default.bubble),"data-placement":M,style:j,children:(0,u.jsxs)(`div`,{className:o.default.inner,children:[(0,u.jsx)(`h3`,{className:o.default.title,children:C.title}),(0,u.jsx)(`p`,{id:T,className:o.default.description,children:C.description}),(0,u.jsxs)(`div`,{className:o.default.footer,children:[(0,u.jsxs)(`span`,{className:o.default.progress,children:[y+1,` / `,e.length]}),(0,u.jsxs)(`div`,{className:o.default.buttons,children:[y>0&&(0,u.jsx)(a.Button,{size:`sm`,variant:`outline`,onClick:A,children:v(`action.back`)}),(0,u.jsx)(a.Button,{ref:D,size:`sm`,variant:`solid`,onClick:k,children:y===e.length-1?v(`action.finish`):v(`action.next`)})]})]})]})})]}),(0,u.jsx)(`div`,{className:o.default.mask,onClick:f,role:`button`,tabIndex:0,"aria-label":v(`a11y.close_tour`),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&f()}})]},y)})})};exports.Tour=_;

package/dist/components/feedback/Tour/Tour.js

@@ -47,14 +47,10 @@ var S = ({ steps: g, open: _, onClose: S, onFinish: C }) => {
 			e || O((e) => t ? e && b(e, t) ? e : t : null);
 		}, n = () => {
 			let e = document.querySelector(A);
-			if (!e) {
-				t(null);
-				return;
-			}
-			x(e.getBoundingClientRect()) || e.scrollIntoView({
+			e ? (x(e.getBoundingClientRect()) || e.scrollIntoView({
 				block: "center",
 				inline: "nearest"
-			}), t(e.getBoundingClientRect());
+			}), t(e.getBoundingClientRect())) : t(null);
 		}, r = () => {
 			let e = document.querySelector(A);
 			t(e ? e.getBoundingClientRect() : null);

package/dist/components/form/Button/Button.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("../../../utilities/style-utils.cjs"),r=require("../../../i18n/useWimTranslation.cjs"),i=require("../../../i18n/generated/common.cjs"),a=require("../../../hooks/useMergedRef.cjs"),o=require("../../../icon/loading.cjs"),s=require("../../media/Icon/Icon.cjs"),c=require("./button.module.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("classnames");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=l.default.forwardRef(({asChild:e=!1,size:f=`md`,variant:p=`outline`,intent:m=`default`,icon:h,iconPosition:g=`left`,loading:_=!1,backgroundColor:v,justify:y=`center`,animateWidth:b=!1,fullWidth:x=!1,styles:S,"aria-label":C,className:w,disabled:T,children:E,...D},O)=>{let k=l.default.useRef(null),A=a.useMergedRef(k,O),[j,M]=l.default.useState(`auto`),N=l.default.useRef(!0);l.default.useLayoutEffect(()=>{if(!b||!k.current)return;if(N.current){N.current=!1;return}let e=k.current,t=e.getBoundingClientRect().width;M(t);let n=e.style.width,r=e.style.minWidth;e.style.width=`auto`,e.style.minWidth=`0`;let i=Math.ceil(e.getBoundingClientRect().width)+2;e.style.width=n,e.style.minWidth=r;let a=requestAnimationFrame(()=>{M(i)});return()=>cancelAnimationFrame(a)},[E,b]);let{t:P}=r.useWimTranslation(i.commonNs),F=T,I;typeof C==`string`?I=C:C!==!1&&_&&(E||typeof h!=`string`)&&(I=P(`a11y.loading`));let L=!e&&!E&&!!h&&typeof C!=`string`&&!D[`aria-labelledby`]&&!D.title;l.default.useEffect(()=>{},[L]);let R=y===`start`?`flex-start`:y===`end`?`flex-end`:y===`between`?`space-between`:y,z=_?(0,d.jsx)(`span`,{className:(0,u.default)(c.default.loader,S?.loader),children:(0,d.jsx)(s.Icon,{component:o.default,spin:!0,size:f})}):h?typeof h==`string`?(0,d.jsx)(s.Icon,{name:h,size:f,className:S?.icon}):h:null;return(0,d.jsxs)(e?t.Root:`button`,{ref:A,type:e?void 0:`button`,className:(0,u.default)(`wim-button`,c.default.root,c.default[f],c.default[p],c.default[m],_&&c.default.loading,b&&c.default.animatedWidth,x&&c.default.fullWidth,!E&&!!h&&c.default.iconOnly,w,S?.root),disabled:(F||_)&&!e?!0:void 0,"aria-label":I,"aria-busy":_||void 0,...e?D:{...D},style:{...D.style,justifyContent:R,...v?{backgroundColor:n.getColorValue(v)}:{},...b&&j!==`auto`?{width:`${j}px`,transitionProperty:D.style?.transitionProperty||`width, background-color, border-color, box-shadow, transform`,transitionDuration:D.style?.transitionDuration||`var(--wim-duration-base)`,transitionTimingFunction:D.style?.transitionTimingFunction||`var(--wim-easing-standard)`,overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`clip`}:{}},children:[e&&z&&g===`left`?z:null,e?(0,d.jsx)(t.Slottable,{children:E}):(0,d.jsxs)(`span`,{className:c.default.content,children:[z&&g===`left`&&z,E,z&&g===`right`&&z]}),e&&z&&g===`right`?z:null]})});f.displayName=`Button`,exports.Button=f;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../../utilities/style-utils.cjs"),r=require("../../../i18n/useWimTranslation.cjs"),i=require("../../../i18n/generated/common.cjs"),a=require("../../../hooks/useMergedRef.cjs"),o=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),s=require("../../../icon/loading.cjs"),c=require("../../media/Icon/Icon.cjs"),l=require("./button.module.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("classnames");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=u.default.forwardRef(({asChild:e=!1,size:p=`md`,variant:m=`outline`,intent:h=`default`,icon:g,iconPosition:_=`left`,loading:v=!1,backgroundColor:y,justify:b=`center`,animateWidth:x=!1,fullWidth:S=!1,styles:C,"aria-label":w,className:T,disabled:E,children:D,...O},k)=>{let A=u.default.useRef(null),j=a.useMergedRef(A,k),[M,N]=u.default.useState(`auto`),P=u.default.useRef(!0);u.default.useLayoutEffect(()=>{if(!x||!A.current)return;if(P.current){P.current=!1;return}let e=A.current,t=e.getBoundingClientRect().width;N(t);let n=e.style.width,r=e.style.minWidth;e.style.width=`auto`,e.style.minWidth=`0`;let i=Math.ceil(e.getBoundingClientRect().width)+2;e.style.width=n,e.style.minWidth=r;let a=requestAnimationFrame(()=>{N(i)});return()=>cancelAnimationFrame(a)},[D,x]);let{t:F}=r.useWimTranslation(i.commonNs),I=E,L;typeof w==`string`?L=w:w!==!1&&v&&!D&&typeof g!=`string`&&(L=F(`a11y.loading`));let R=!e&&!D&&!!g&&typeof w!=`string`&&!O[`aria-labelledby`]&&!O.title;u.default.useEffect(()=>{},[R]);let z=b===`start`?`flex-start`:b===`end`?`flex-end`:b===`between`?`space-between`:b,B=v?(0,f.jsx)(`span`,{className:(0,d.default)(l.default.loader,C?.loader),children:(0,f.jsx)(c.Icon,{component:s.default,spin:!0,size:p})}):g?typeof g==`string`?(0,f.jsx)(c.Icon,{name:g,size:p,className:C?.icon}):g:null,V=v&&D?(0,f.jsxs)(f.Fragment,{children:[` `,(0,f.jsx)(o.VisuallyHidden,{children:F(`a11y.loading`)})]}):null;return(0,f.jsxs)(e?t.Root:`button`,{ref:j,type:e?void 0:`button`,className:(0,d.default)(`wim-button`,l.default.root,l.default[p],l.default[m],l.default[h],v&&l.default.loading,x&&l.default.animatedWidth,S&&l.default.fullWidth,!D&&!!g&&l.default.iconOnly,T,C?.root),disabled:(I||v)&&!e?!0:void 0,"aria-label":L,"aria-busy":v||void 0,...e?O:{...O},style:{...O.style,justifyContent:z,...y?{backgroundColor:n.getColorValue(y)}:{},...x&&M!==`auto`?{width:`${M}px`,transitionProperty:O.style?.transitionProperty||`width, background-color, border-color, box-shadow, transform`,transitionDuration:O.style?.transitionDuration||`var(--wim-duration-base)`,transitionTimingFunction:O.style?.transitionTimingFunction||`var(--wim-easing-standard)`,overflow:`hidden`,whiteSpace:`nowrap`,textOverflow:`clip`}:{}},children:[e&&B&&_===`left`?B:null,e?(0,f.jsx)(t.Slottable,{children:D}):(0,f.jsxs)(`span`,{className:l.default.content,children:[B&&_===`left`&&B,D,V,B&&_===`right`&&B]}),e?V:null,e&&B&&_===`right`?B:null]})});p.displayName=`Button`,exports.Button=p;

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

@@ -4,84 +4,87 @@ import { getColorValue as n } from "../../../utilities/style-utils.js";
 import { useWimTranslation as r } from "../../../i18n/useWimTranslation.js";
 import { commonNs as i } from "../../../i18n/generated/common.js";
 import { useMergedRef as a } from "../../../hooks/useMergedRef.js";
-import o from "../../../icon/loading.js";
-import { Icon as s } from "../../media/Icon/Icon.js";
-import c from "./button.module.js";
-import l from "react";
-import u from "classnames";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { VisuallyHidden as o } from "../../layout/VisuallyHidden/VisuallyHidden.js";
+import s from "../../../icon/loading.js";
+import { Icon as c } from "../../media/Icon/Icon.js";
+import l from "./button.module.js";
+import u from "react";
+import d from "classnames";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/form/Button/Button.tsx
-var p = l.forwardRef(({ asChild: p = !1, size: m = "md", variant: h = "outline", intent: g = "default", icon: _, iconPosition: v = "left", loading: y = !1, backgroundColor: b, justify: x = "center", animateWidth: S = !1, fullWidth: C = !1, styles: w, "aria-label": T, className: E, disabled: D, children: O, ...k }, A) => {
-	let j = l.useRef(null), M = a(j, A), [N, P] = l.useState("auto"), F = l.useRef(!0);
-	l.useLayoutEffect(() => {
-		if (!S || !j.current) return;
-		if (F.current) {
-			F.current = !1;
+var h = u.forwardRef(({ asChild: h = !1, size: g = "md", variant: _ = "outline", intent: v = "default", icon: y, iconPosition: b = "left", loading: x = !1, backgroundColor: S, justify: C = "center", animateWidth: w = !1, fullWidth: T = !1, styles: E, "aria-label": D, className: O, disabled: k, children: A, ...j }, M) => {
+	let N = u.useRef(null), P = a(N, M), [F, I] = u.useState("auto"), L = u.useRef(!0);
+	u.useLayoutEffect(() => {
+		if (!w || !N.current) return;
+		if (L.current) {
+			L.current = !1;
 			return;
 		}
-		let e = j.current, t = e.getBoundingClientRect().width;
-		P(t);
+		let e = N.current, t = e.getBoundingClientRect().width;
+		I(t);
 		let n = e.style.width, r = e.style.minWidth;
 		e.style.width = "auto", e.style.minWidth = "0";
 		let i = Math.ceil(e.getBoundingClientRect().width) + 2;
 		e.style.width = n, e.style.minWidth = r;
 		let a = requestAnimationFrame(() => {
-			P(i);
+			I(i);
 		});
 		return () => cancelAnimationFrame(a);
-	}, [O, S]);
-	let { t: I } = r(i), L = D, R;
-	typeof T == "string" ? R = T : T !== !1 && y && (O || typeof _ != "string") && (R = I("a11y.loading"));
-	let z = !p && !O && !!_ && typeof T != "string" && !k["aria-labelledby"] && !k.title;
-	l.useEffect(() => {}, [z]);
-	let B = x === "start" ? "flex-start" : x === "end" ? "flex-end" : x === "between" ? "space-between" : x, V = y ? /* @__PURE__ */ d("span", {
-		className: u(c.loader, w?.loader),
-		children: /* @__PURE__ */ d(s, {
-			component: o,
+	}, [A, w]);
+	let { t: R } = r(i), z = k, B;
+	typeof D == "string" ? B = D : D !== !1 && x && !A && typeof y != "string" && (B = R("a11y.loading"));
+	let V = !h && !A && !!y && typeof D != "string" && !j["aria-labelledby"] && !j.title;
+	u.useEffect(() => {}, [V]);
+	let H = C === "start" ? "flex-start" : C === "end" ? "flex-end" : C === "between" ? "space-between" : C, U = x ? /* @__PURE__ */ p("span", {
+		className: d(l.loader, E?.loader),
+		children: /* @__PURE__ */ p(c, {
+			component: s,
 			spin: !0,
-			size: m
+			size: g
 		})
-	}) : _ ? typeof _ == "string" ? /* @__PURE__ */ d(s, {
-		name: _,
-		size: m,
-		className: w?.icon
-	}) : _ : null;
-	return /* @__PURE__ */ f(p ? e : "button", {
-		ref: M,
-		type: p ? void 0 : "button",
-		className: u("wim-button", c.root, c[m], c[h], c[g], y && c.loading, S && c.animatedWidth, C && c.fullWidth, !O && !!_ && c.iconOnly, E, w?.root),
-		disabled: (L || y) && !p ? !0 : void 0,
-		"aria-label": R,
-		"aria-busy": y || void 0,
-		...p ? k : { ...k },
+	}) : y ? typeof y == "string" ? /* @__PURE__ */ p(c, {
+		name: y,
+		size: g,
+		className: E?.icon
+	}) : y : null, W = x && A ? /* @__PURE__ */ m(f, { children: [" ", /* @__PURE__ */ p(o, { children: R("a11y.loading") })] }) : null;
+	return /* @__PURE__ */ m(h ? e : "button", {
+		ref: P,
+		type: h ? void 0 : "button",
+		className: d("wim-button", l.root, l[g], l[_], l[v], x && l.loading, w && l.animatedWidth, T && l.fullWidth, !A && !!y && l.iconOnly, O, E?.root),
+		disabled: (z || x) && !h ? !0 : void 0,
+		"aria-label": B,
+		"aria-busy": x || void 0,
+		...h ? j : { ...j },
 		style: {
-			...k.style,
-			justifyContent: B,
-			...b ? { backgroundColor: n(b) } : {},
-			...S && N !== "auto" ? {
-				width: `${N}px`,
-				transitionProperty: k.style?.transitionProperty || "width, background-color, border-color, box-shadow, transform",
-				transitionDuration: k.style?.transitionDuration || "var(--wim-duration-base)",
-				transitionTimingFunction: k.style?.transitionTimingFunction || "var(--wim-easing-standard)",
+			...j.style,
+			justifyContent: H,
+			...S ? { backgroundColor: n(S) } : {},
+			...w && F !== "auto" ? {
+				width: `${F}px`,
+				transitionProperty: j.style?.transitionProperty || "width, background-color, border-color, box-shadow, transform",
+				transitionDuration: j.style?.transitionDuration || "var(--wim-duration-base)",
+				transitionTimingFunction: j.style?.transitionTimingFunction || "var(--wim-easing-standard)",
 				overflow: "hidden",
 				whiteSpace: "nowrap",
 				textOverflow: "clip"
 			} : {}
 		},
 		children: [
-			p && V && v === "left" ? V : null,
-			p ? /* @__PURE__ */ d(t, { children: O }) : /* @__PURE__ */ f("span", {
-				className: c.content,
+			h && U && b === "left" ? U : null,
+			h ? /* @__PURE__ */ p(t, { children: A }) : /* @__PURE__ */ m("span", {
+				className: l.content,
 				children: [
-					V && v === "left" && V,
-					O,
-					V && v === "right" && V
+					U && b === "left" && U,
+					A,
+					W,
+					U && b === "right" && U
 				]
 			}),
-			p && V && v === "right" ? V : null
+			h ? W : null,
+			h && U && b === "right" ? U : null
 		]
 	});
 });
-p.displayName = "Button";
+h.displayName = "Button";
 //#endregion
-export { p as Button };
+export { h as Button };

package/dist/components/form/Combobox/Combobox.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../hooks/useMergedRef.cjs"),n=require("../../_internal/BaseListItem/BaseListItem.cjs"),r=require("../InputBase/InputBase.cjs"),i=require("../../_internal/useInlineFloating.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./combobox.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=({options:e=[],onChange:u,placeholder:d,showSearchIcon:f=!0,allowClear:p=!0,defaultValue:m=``,className:h,disabled:g=!1,label:_,error:v,required:y,layout:b,fullWidth:x=!1,id:S,labels:C={},...w})=>{let{noResults:T=`No results found`}=C,[E,D]=(0,s.useState)(!1),[O,k]=(0,s.useState)(m),[A,j]=(0,s.useState)(-1),[M,N]=(0,s.useState)(!1),P=(0,s.useRef)(null),F=(0,s.useId)(),I=S||`wim-combobox-${F}`,L=`${I}-list`,R=_?`${I}-label`:void 0,z=v?`${I}-error`:void 0,B=(0,s.useMemo)(()=>{let t=(O||``).toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(t))},[e,O]);(0,s.useEffect)(()=>{let e=e=>{P.current&&!P.current.contains(e.target)&&D(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let V=e=>{let t=e.target.value;k(t),D(!0),j(-1)},H=e=>{k(e.label),D(!1),u&&u(e)},U=e=>{if(N(!0),!E&&e.key===`ArrowDown`){D(!0);return}switch(e.key){case`ArrowDown`:j(e=>e<B.length-1?e+1:0);break;case`ArrowUp`:j(e=>e<=0?B.length-1:e-1);break;case`Enter`:A>=0&&A<B.length&&H(B[A]);break;case`Escape`:D(!1);break;case`Tab`:D(!1)}},{setReference:W,setFloating:G,floatingProps:K}=i.useInlineFloating({open:E}),q=t.useMergedRef(P,W);return(0,l.jsx)(a.FieldTemplate,{label:_,error:v,required:y,layout:b,labelId:R,htmlFor:I,errorId:z,className:h,children:(0,l.jsxs)(`div`,{className:(0,c.default)(`wim-combobox`,o.default.root,x&&o.default.fullWidth),ref:q,onMouseMove:()=>N(!1),"data-keyboard-nav":M,children:[(0,l.jsx)(r.InputBase,{disabled:g,allowClear:p,hasValue:!!O,onClear:()=>k(``),intent:v?`danger`:`default`,leftIcon:f?`SearchIcon`:void 0,fullWidth:x,rightIcons:[{name:`ChevronDownIcon`,rotated:E,onClick:()=>D(!E),decorative:!0}],children:(0,l.jsx)(`input`,{id:I,className:o.default.input,placeholder:d,value:O,onChange:V,onKeyDown:U,onFocus:()=>D(!0),disabled:g,autoComplete:`off`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":E,"aria-controls":E?L:void 0,"aria-labelledby":R,"aria-describedby":z,required:y,"aria-invalid":!!v,"aria-activedescendant":E&&A>=0?`${L}-option-${A}`:void 0,...w})}),E&&B.length>0&&(0,l.jsx)(`div`,{className:o.default.dropdown,ref:G,...K,children:(0,l.jsx)(`ul`,{id:L,className:o.default.list,role:`listbox`,"aria-labelledby":R,children:B.map((e,t)=>(0,l.jsx)(n.BaseListItem,{asChild:!0,id:`${L}-option-${t}`,className:(0,c.default)(o.default.option,t===A&&o.default.selected),active:t===A,onClick:()=>H(e),onMouseEnter:()=>j(t),role:`option`,"aria-selected":t===A,children:(0,l.jsx)(`li`,{children:e.label})},e.value))})}),E&&B.length===0&&(0,l.jsx)(`div`,{className:o.default.dropdown,ref:G,...K,children:(0,l.jsx)(`div`,{className:o.default.empty,role:`region`,"aria-live":`polite`,children:T})})]})})};u.displayName=`Combobox`,exports.Combobox=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../hooks/useMergedRef.cjs"),n=require("../../_internal/BaseListItem/BaseListItem.cjs"),r=require("../InputBase/InputBase.cjs"),i=require("../../_internal/useInlineFloating.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./combobox.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=({options:e=[],onChange:u,placeholder:d,showSearchIcon:f=!0,allowClear:p=!0,defaultValue:m=``,className:h,disabled:g=!1,label:_,error:v,required:y,layout:b,fullWidth:x=!1,id:S,labels:C={},...w})=>{let{noResults:T=`No results found`}=C,[E,D]=(0,s.useState)(!1),[O,k]=(0,s.useState)(m),[A,j]=(0,s.useState)(-1),[M,N]=(0,s.useState)(!1),P=(0,s.useRef)(null),F=(0,s.useId)(),I=S||`wim-combobox-${F}`,L=`${I}-list`,R=_?`${I}-label`:void 0,z=v?`${I}-error`:void 0,B=(0,s.useMemo)(()=>{let t=(O||``).toLowerCase();return e.filter(e=>e.label.toLowerCase().includes(t))},[e,O]);(0,s.useEffect)(()=>{let e=e=>{P.current&&!P.current.contains(e.target)&&D(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[]);let V=e=>{let t=e.target.value;k(t),D(!0),j(-1)},H=e=>{k(e.label),D(!1),u&&u(e)},U=e=>{if(N(!0),!E&&e.key===`ArrowDown`)D(!0);else switch(e.key){case`ArrowDown`:j(e=>e<B.length-1?e+1:0);break;case`ArrowUp`:j(e=>e<=0?B.length-1:e-1);break;case`Enter`:A>=0&&A<B.length&&H(B[A]);break;case`Escape`:D(!1);break;case`Tab`:D(!1)}},{setReference:W,setFloating:G,floatingProps:K}=i.useInlineFloating({open:E}),q=t.useMergedRef(P,W);return(0,l.jsx)(a.FieldTemplate,{label:_,error:v,required:y,layout:b,labelId:R,htmlFor:I,errorId:z,className:h,children:(0,l.jsxs)(`div`,{className:(0,c.default)(`wim-combobox`,o.default.root,x&&o.default.fullWidth),ref:q,onMouseMove:()=>N(!1),"data-keyboard-nav":M,children:[(0,l.jsx)(r.InputBase,{disabled:g,allowClear:p,hasValue:!!O,onClear:()=>k(``),intent:v?`danger`:`default`,leftIcon:f?`SearchIcon`:void 0,fullWidth:x,rightIcons:[{name:`ChevronDownIcon`,rotated:E,onClick:()=>D(!E),decorative:!0}],children:(0,l.jsx)(`input`,{id:I,className:o.default.input,placeholder:d,value:O,onChange:V,onKeyDown:U,onFocus:()=>D(!0),disabled:g,autoComplete:`off`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":E,"aria-controls":E?L:void 0,"aria-labelledby":R,"aria-describedby":z,required:y,"aria-invalid":!!v,"aria-activedescendant":E&&A>=0?`${L}-option-${A}`:void 0,...w})}),E&&B.length>0&&(0,l.jsx)(`div`,{className:o.default.dropdown,ref:G,...K,children:(0,l.jsx)(`ul`,{id:L,className:o.default.list,role:`listbox`,"aria-labelledby":R,children:B.map((e,t)=>(0,l.jsx)(n.BaseListItem,{asChild:!0,id:`${L}-option-${t}`,className:(0,c.default)(o.default.option,t===A&&o.default.selected),active:t===A,onClick:()=>H(e),onMouseEnter:()=>j(t),role:`option`,"aria-selected":t===A,children:(0,l.jsx)(`li`,{children:e.label})},e.value))})}),E&&B.length===0&&(0,l.jsx)(`div`,{className:o.default.dropdown,ref:G,...K,children:(0,l.jsx)(`div`,{className:o.default.empty,role:`region`,"aria-live":`polite`,children:T})})]})})};u.displayName=`Combobox`,exports.Combobox=u;

package/dist/components/form/Combobox/Combobox.js

@@ -26,11 +26,8 @@ var m = ({ options: m = [], onChange: h, placeholder: g, showSearchIcon: _ = !0,
 	}, q = (e) => {
 		P(e.label), M(!1), h && h(e);
 	}, J = (e) => {
-		if (R(!0), !j && e.key === "ArrowDown") {
-			M(!0);
-			return;
-		}
-		switch (e.key) {
+		if (R(!0), !j && e.key === "ArrowDown") M(!0);
+		else switch (e.key) {
 			case "ArrowDown":
 				I((e) => e < G.length - 1 ? e + 1 : 0);
 				break;

package/dist/components/form/Dropzone/Dropzone.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../media/Icon/Icon.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./dropzone.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=({label:e,description:u,accept:d,multiple:f=!1,disabled:p=!1,value:m,onChange:h,className:g,iconName:_=`UploadIcon`,error:v,required:y,layout:b=`vertical`,size:x=`md`,"aria-label":S,"aria-labelledby":C,"aria-describedby":w})=>{let{t:T}=n.useWimTranslation(i.formNs),E=u??T(`dropzone.description`),D=`wim-dropzone-${s.default.useId()}`,O=e?`${D}-label`:void 0,k=v?`${D}-error`:void 0,A=(0,s.useRef)(null),[j,M]=(0,s.useState)(!1),[N,P]=(0,s.useState)(null),F=()=>{p||A.current?.click()},I=e=>{e.preventDefault(),!p&&M(!0)},L=()=>{M(!1)},R=e=>{if(e.preventDefault(),M(!1),p)return;let t=e.dataTransfer.files;P(t),h&&h(t)},z=e=>{let t=e.target.files;P(t),h&&h(t)},B=m===void 0?N?Array.from(N).map(e=>e.name):[]:m;return(0,l.jsxs)(a.FieldTemplate,{label:e,error:v,required:y,layout:b,labelId:O,errorId:k,className:(0,c.default)(`wim-dropzone`,o.default.container,g),children:[(0,l.jsx)(`input`,{type:`file`,ref:A,accept:d,multiple:f,disabled:p,onChange:z,style:{display:`none`},"aria-hidden":`true`,tabIndex:-1}),(0,l.jsx)(t.InteractiveArea,{size:x,isDragging:j,disabled:p,isClickable:!p,onClick:F,onDragOver:I,onDragLeave:L,onDrop:R,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&F()},"aria-labelledby":O??C,"aria-label":O||C?void 0:S,"aria-describedby":[w,k].filter(Boolean).join(` `)||void 0,"aria-required":y,"aria-invalid":!!v,icon:_&&(0,l.jsx)(r.Icon,{name:_,color:p?`disabled`:`primary`}),description:E,children:B.length>0?(0,l.jsx)(`div`,{className:o.default.fileList,children:B.map((e,t)=>(0,l.jsx)(`span`,{className:o.default.fileName,children:e},t))}):null})]})};exports.Dropzone=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../layout/InteractiveArea/InteractiveArea.cjs"),n=require("../../../i18n/useWimTranslation.cjs"),r=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),i=require("../../media/Icon/Icon.cjs"),a=require("../../../i18n/generated/form.cjs"),o=require("../FieldTemplate/FieldTemplate.cjs"),s=require("./dropzone.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=({label:e,description:d,accept:f,multiple:p=!1,disabled:m=!1,value:h,onChange:g,className:_,iconName:v=`UploadIcon`,error:y,required:b,layout:x=`vertical`,size:S=`md`,"aria-label":C,"aria-labelledby":w,"aria-describedby":T})=>{let{t:E}=n.useWimTranslation(a.formNs),D=d??E(`dropzone.description`),O=`wim-dropzone-${c.default.useId()}`,k=e?`${O}-label`:void 0,A=y?`${O}-error`:void 0,j=`${O}-description`,M=`${O}-files`,N=`${O}-name`,P=k??w??(C?N:void 0),F=(0,c.useRef)(null),[I,L]=(0,c.useState)(!1),[R,z]=(0,c.useState)(null),B=()=>{m||F.current?.click()},V=e=>{e.preventDefault(),!m&&L(!0)},H=()=>{L(!1)},U=e=>{if(e.preventDefault(),L(!1),m)return;let t=e.dataTransfer.files;z(t),g&&g(t)},W=e=>{let t=e.target.files;z(t),g&&g(t)},G=h===void 0?R?Array.from(R).map(e=>e.name):[]:h;return(0,u.jsxs)(o.FieldTemplate,{label:e,error:y,required:b,layout:x,labelId:k,errorId:A,className:(0,l.default)(`wim-dropzone`,s.default.container,_),children:[(0,u.jsx)(`input`,{type:`file`,ref:F,accept:f,multiple:p,disabled:m,onChange:W,style:{display:`none`},"aria-hidden":`true`,tabIndex:-1}),P===N&&(0,u.jsx)(r.VisuallyHidden,{id:N,children:C}),(0,u.jsx)(t.InteractiveArea,{size:S,isDragging:I,disabled:m,isClickable:!m,onClick:B,onDragOver:V,onDragLeave:H,onDrop:U,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&B()},"aria-labelledby":P?[P,j,G.length>0&&M].filter(Boolean).join(` `):void 0,"aria-describedby":[T,A].filter(Boolean).join(` `)||void 0,"aria-required":b,"aria-invalid":!!y,icon:v&&(0,u.jsx)(i.Icon,{name:v,color:m?`disabled`:`primary`}),description:(0,u.jsx)(`span`,{id:j,children:D}),children:G.length>0?(0,u.jsx)(`div`,{id:M,className:s.default.fileList,children:G.map((e,t)=>(0,u.jsx)(`span`,{className:s.default.fileName,children:e},t))}):null})]})};exports.Dropzone=d;

package/dist/components/form/Dropzone/Dropzone.js

@@ -1,78 +1,93 @@
 "use client";
 import { InteractiveArea as e } from "../../layout/InteractiveArea/InteractiveArea.js";
 import { useWimTranslation as t } from "../../../i18n/useWimTranslation.js";
-import { Icon as n } from "../../media/Icon/Icon.js";
-import { formNs as r } from "../../../i18n/generated/form.js";
-import { FieldTemplate as i } from "../FieldTemplate/FieldTemplate.js";
-import a from "./dropzone.module.js";
-import o, { useRef as s, useState as c } from "react";
-import l from "classnames";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { VisuallyHidden as n } from "../../layout/VisuallyHidden/VisuallyHidden.js";
+import { Icon as r } from "../../media/Icon/Icon.js";
+import { formNs as i } from "../../../i18n/generated/form.js";
+import { FieldTemplate as a } from "../FieldTemplate/FieldTemplate.js";
+import o from "./dropzone.module.js";
+import s, { useRef as c, useState as l } from "react";
+import u from "classnames";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/form/Dropzone/Dropzone.tsx
-var f = ({ label: f, description: p, accept: m, multiple: h = !1, disabled: g = !1, value: _, onChange: v, className: y, iconName: b = "UploadIcon", error: x, required: S, layout: C = "vertical", size: w = "md", "aria-label": T, "aria-labelledby": E, "aria-describedby": D }) => {
-	let { t: O } = t(r), k = p ?? O("dropzone.description"), A = `wim-dropzone-${o.useId()}`, j = f ? `${A}-label` : void 0, M = x ? `${A}-error` : void 0, N = s(null), [P, F] = c(!1), [I, L] = c(null), R = () => {
-		g || N.current?.click();
-	}, z = (e) => {
-		e.preventDefault(), !g && F(!0);
-	}, B = () => {
-		F(!1);
-	}, V = (e) => {
-		if (e.preventDefault(), F(!1), g) return;
+var p = ({ label: p, description: m, accept: h, multiple: g = !1, disabled: _ = !1, value: v, onChange: y, className: b, iconName: x = "UploadIcon", error: S, required: C, layout: w = "vertical", size: T = "md", "aria-label": E, "aria-labelledby": D, "aria-describedby": O }) => {
+	let { t: k } = t(i), A = m ?? k("dropzone.description"), j = `wim-dropzone-${s.useId()}`, M = p ? `${j}-label` : void 0, N = S ? `${j}-error` : void 0, P = `${j}-description`, F = `${j}-files`, I = `${j}-name`, L = M ?? D ?? (E ? I : void 0), R = c(null), [z, B] = l(!1), [V, H] = l(null), U = () => {
+		_ || R.current?.click();
+	}, W = (e) => {
+		e.preventDefault(), !_ && B(!0);
+	}, G = () => {
+		B(!1);
+	}, K = (e) => {
+		if (e.preventDefault(), B(!1), _) return;
 		let t = e.dataTransfer.files;
-		L(t), v && v(t);
-	}, H = (e) => {
+		H(t), y && y(t);
+	}, q = (e) => {
 		let t = e.target.files;
-		L(t), v && v(t);
-	}, U = _ === void 0 ? I ? Array.from(I).map((e) => e.name) : [] : _;
-	return /* @__PURE__ */ d(i, {
-		label: f,
-		error: x,
-		required: S,
-		layout: C,
-		labelId: j,
-		errorId: M,
-		className: l("wim-dropzone", a.container, y),
-		children: [/* @__PURE__ */ u("input", {
-			type: "file",
-			ref: N,
-			accept: m,
-			multiple: h,
-			disabled: g,
-			onChange: H,
-			style: { display: "none" },
-			"aria-hidden": "true",
-			tabIndex: -1
-		}), /* @__PURE__ */ u(e, {
-			size: w,
-			isDragging: P,
-			disabled: g,
-			isClickable: !g,
-			onClick: R,
-			onDragOver: z,
-			onDragLeave: B,
-			onDrop: V,
-			onKeyDown: (e) => {
-				(e.key === "Enter" || e.key === " ") && R();
-			},
-			"aria-labelledby": j ?? E,
-			"aria-label": j || E ? void 0 : T,
-			"aria-describedby": [D, M].filter(Boolean).join(" ") || void 0,
-			"aria-required": S,
-			"aria-invalid": !!x,
-			icon: b && /* @__PURE__ */ u(n, {
-				name: b,
-				color: g ? "disabled" : "primary"
+		H(t), y && y(t);
+	}, J = v === void 0 ? V ? Array.from(V).map((e) => e.name) : [] : v;
+	return /* @__PURE__ */ f(a, {
+		label: p,
+		error: S,
+		required: C,
+		layout: w,
+		labelId: M,
+		errorId: N,
+		className: u("wim-dropzone", o.container, b),
+		children: [
+			/* @__PURE__ */ d("input", {
+				type: "file",
+				ref: R,
+				accept: h,
+				multiple: g,
+				disabled: _,
+				onChange: q,
+				style: { display: "none" },
+				"aria-hidden": "true",
+				tabIndex: -1
 			}),
-			description: k,
-			children: U.length > 0 ? /* @__PURE__ */ u("div", {
-				className: a.fileList,
-				children: U.map((e, t) => /* @__PURE__ */ u("span", {
-					className: a.fileName,
-					children: e
-				}, t))
-			}) : null
-		})]
+			L === I && /* @__PURE__ */ d(n, {
+				id: I,
+				children: E
+			}),
+			/* @__PURE__ */ d(e, {
+				size: T,
+				isDragging: z,
+				disabled: _,
+				isClickable: !_,
+				onClick: U,
+				onDragOver: W,
+				onDragLeave: G,
+				onDrop: K,
+				onKeyDown: (e) => {
+					(e.key === "Enter" || e.key === " ") && U();
+				},
+				"aria-labelledby": L ? [
+					L,
+					P,
+					J.length > 0 && F
+				].filter(Boolean).join(" ") : void 0,
+				"aria-describedby": [O, N].filter(Boolean).join(" ") || void 0,
+				"aria-required": C,
+				"aria-invalid": !!S,
+				icon: x && /* @__PURE__ */ d(r, {
+					name: x,
+					color: _ ? "disabled" : "primary"
+				}),
+				description: /* @__PURE__ */ d("span", {
+					id: P,
+					children: A
+				}),
+				children: J.length > 0 ? /* @__PURE__ */ d("div", {
+					id: F,
+					className: o.fileList,
+					children: J.map((e, t) => /* @__PURE__ */ d("span", {
+						className: o.fileName,
+						children: e
+					}, t))
+				}) : null
+			})
+		]
 	});
 };
 //#endregion
-export { f as Dropzone };
+export { p as Dropzone };

package/dist/components/form/FileUpload/FileUpload.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),r=require("../Button/Button.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./file-upload.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=({label:e,buttonLabel:u,noFileLabel:d,accept:f,multiple:p=!1,disabled:m=!1,value:h,onChange:g,className:_,iconName:v,iconPosition:y,size:b=`md`,error:x,required:S,layout:C=`vertical`,"aria-label":w,"aria-labelledby":T,"aria-describedby":E})=>{let{t:D}=t.useWimTranslation(i.formNs),O=`wim-fileupload-${s.default.useId()}`,k=e?`${O}-label`:void 0,A=x?`${O}-error`:void 0,j=S?`${O}-required`:void 0,M=`${O}-files`,N=[E,M,A,j].filter(Boolean).join(` `),P=(0,s.useRef)(null),[F,I]=(0,s.useState)(null),[L,R]=(0,s.useState)(``),z=(0,s.useRef)(void 0);(0,s.useEffect)(()=>()=>clearTimeout(z.current),[]);let B=()=>{P.current?.click()},V=e=>{let t=e.target.files;if(I(t),clearTimeout(z.current),R(``),t&&t.length>0){let e=Array.from(t).map(e=>e.name).join(`, `);z.current=setTimeout(()=>R(D(`fileupload.selected`,{files:e})),700)}g&&g(t)},H=h===void 0?F?Array.from(F).map(e=>e.name):[]:h,U=H.length>0?H.join(`, `):d??D(`fileupload.no_file`);return(0,l.jsx)(a.FieldTemplate,{label:e,error:x,required:S,layout:C,labelId:k,errorId:A,className:(0,c.default)(`wim-file-upload`,o.default.root,o.default[b],_),children:(0,l.jsxs)(`div`,{className:o.default.controls,children:[(0,l.jsx)(`input`,{type:`file`,ref:P,accept:f,multiple:p,disabled:m,onChange:V,className:o.default.input,"aria-hidden":`true`,tabIndex:-1}),(0,l.jsx)(r.Button,{onClick:B,disabled:m,variant:`outline`,icon:v,iconPosition:y,size:b,"aria-labelledby":k??T,"aria-label":k||T?void 0:w,"aria-describedby":N,"aria-invalid":x?!0:void 0,children:u??D(`fileupload.button`)}),S&&(0,l.jsx)(n.VisuallyHidden,{id:j,children:D(`form.required`)}),(0,l.jsx)(n.VisuallyHidden,{role:`status`,"aria-atomic":`true`,children:L}),(0,l.jsx)(`span`,{id:M,className:(0,c.default)(o.default.fileNames,o.default[b],m&&o.default.disabled),"aria-disabled":m||void 0,children:U})]})})};exports.FileUpload=u;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../layout/VisuallyHidden/VisuallyHidden.cjs"),r=require("../Button/Button.cjs"),i=require("../../../i18n/generated/form.cjs"),a=require("../FieldTemplate/FieldTemplate.cjs"),o=require("./file-upload.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=({label:e,buttonLabel:u,noFileLabel:d,accept:f,multiple:p=!1,disabled:m=!1,value:h,onChange:g,className:_,iconName:v,iconPosition:y,size:b=`md`,error:x,required:S,layout:C=`vertical`,"aria-label":w,"aria-labelledby":T,"aria-describedby":E})=>{let{t:D}=t.useWimTranslation(i.formNs),O=`wim-fileupload-${s.default.useId()}`,k=e?`${O}-label`:void 0,A=x?`${O}-error`:void 0,j=S?`${O}-required`:void 0,M=`${O}-files`,N=[E,M,A,j].filter(Boolean).join(` `),P=`${O}-button`,F=`${O}-name`,I=k??T??(w?F:void 0),L=I?`${I} ${P}`:void 0,R=(0,s.useRef)(null),[z,B]=(0,s.useState)(null),[V,H]=(0,s.useState)(``),U=(0,s.useRef)(void 0);(0,s.useEffect)(()=>()=>clearTimeout(U.current),[]);let W=()=>{R.current?.click()},G=e=>{let t=e.target.files;if(B(t),clearTimeout(U.current),H(``),t&&t.length>0){let e=Array.from(t).map(e=>e.name).join(`, `);U.current=setTimeout(()=>H(D(`fileupload.selected`,{files:e})),700)}g&&g(t)},K=h===void 0?z?Array.from(z).map(e=>e.name):[]:h,q=K.length>0?K.join(`, `):d??D(`fileupload.no_file`);return(0,l.jsx)(a.FieldTemplate,{label:e,error:x,required:S,layout:C,labelId:k,errorId:A,className:(0,c.default)(`wim-file-upload`,o.default.root,o.default[b],_),children:(0,l.jsxs)(`div`,{className:o.default.controls,children:[(0,l.jsx)(`input`,{type:`file`,ref:R,accept:f,multiple:p,disabled:m,onChange:G,className:o.default.input,"aria-hidden":`true`,tabIndex:-1}),(0,l.jsx)(r.Button,{onClick:W,disabled:m,variant:`outline`,icon:v,iconPosition:y,size:b,id:P,"aria-labelledby":L,"aria-describedby":N,"aria-invalid":x?!0:void 0,children:u??D(`fileupload.button`)}),I===F&&(0,l.jsx)(n.VisuallyHidden,{id:F,children:w}),S&&(0,l.jsx)(n.VisuallyHidden,{id:j,children:D(`form.required`)}),(0,l.jsx)(n.VisuallyHidden,{role:`status`,"aria-atomic":`true`,children:V}),(0,l.jsx)(`span`,{id:M,className:(0,c.default)(o.default.fileNames,o.default[b],m&&o.default.disabled),"aria-disabled":m||void 0,children:q})]})})};exports.FileUpload=u;

package/dist/components/form/FileUpload/FileUpload.js

@@ -15,18 +15,18 @@ var p = ({ label: p, buttonLabel: m, noFileLabel: h, accept: g, multiple: _ = !1
 		I,
 		P,
 		F
-	].filter(Boolean).join(" "), R = c(null), [z, B] = l(null), [V, H] = l(""), U = c(void 0);
-	s(() => () => clearTimeout(U.current), []);
-	let W = () => {
-		R.current?.click();
-	}, G = (e) => {
+	].filter(Boolean).join(" "), R = `${M}-button`, z = `${M}-name`, B = N ?? k ?? (O ? z : void 0), V = B ? `${B} ${R}` : void 0, H = c(null), [U, W] = l(null), [G, K] = l(""), q = c(void 0);
+	s(() => () => clearTimeout(q.current), []);
+	let J = () => {
+		H.current?.click();
+	}, Y = (e) => {
 		let t = e.target.files;
-		if (B(t), clearTimeout(U.current), H(""), t && t.length > 0) {
+		if (W(t), clearTimeout(q.current), K(""), t && t.length > 0) {
 			let e = Array.from(t).map((e) => e.name).join(", ");
-			U.current = setTimeout(() => H(j("fileupload.selected", { files: e })), 700);
+			q.current = setTimeout(() => K(j("fileupload.selected", { files: e })), 700);
 		}
 		b && b(t);
-	}, K = y === void 0 ? z ? Array.from(z).map((e) => e.name) : [] : y, q = K.length > 0 ? K.join(", ") : h ?? j("fileupload.no_file");
+	}, X = y === void 0 ? U ? Array.from(U).map((e) => e.name) : [] : y, Z = X.length > 0 ? X.join(", ") : h ?? j("fileupload.no_file");
 	return /* @__PURE__ */ d(i, {
 		label: p,
 		error: T,
@@ -40,28 +40,32 @@ var p = ({ label: p, buttonLabel: m, noFileLabel: h, accept: g, multiple: _ = !1
 			children: [
 				/* @__PURE__ */ d("input", {
 					type: "file",
-					ref: R,
+					ref: H,
 					accept: g,
 					multiple: _,
 					disabled: v,
-					onChange: G,
+					onChange: Y,
 					className: a.input,
 					"aria-hidden": "true",
 					tabIndex: -1
 				}),
 				/* @__PURE__ */ d(n, {
-					onClick: W,
+					onClick: J,
 					disabled: v,
 					variant: "outline",
 					icon: S,
 					iconPosition: C,
 					size: w,
-					"aria-labelledby": N ?? k,
-					"aria-label": N || k ? void 0 : O,
+					id: R,
+					"aria-labelledby": V,
 					"aria-describedby": L,
 					"aria-invalid": T ? !0 : void 0,
 					children: m ?? j("fileupload.button")
 				}),
+				B === z && /* @__PURE__ */ d(t, {
+					id: z,
+					children: O
+				}),
 				E && /* @__PURE__ */ d(t, {
 					id: F,
 					children: j("form.required")
@@ -69,13 +73,13 @@ var p = ({ label: p, buttonLabel: m, noFileLabel: h, accept: g, multiple: _ = !1
 				/* @__PURE__ */ d(t, {
 					role: "status",
 					"aria-atomic": "true",
-					children: V
+					children: G
 				}),
 				/* @__PURE__ */ d("span", {
 					id: I,
 					className: u(a.fileNames, a[w], v && a.disabled),
 					"aria-disabled": v || void 0,
-					children: q
+					children: Z
 				})
 			]
 		})

package/dist/components/form/FloatButton/FloatButton.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("../../media/Icon/Icon.cjs"),r=require("./float-button.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=i.default.forwardRef(({asChild:e=!1,iconName:s=`CircleIcon`,variant:c,intent:l=`default`,shape:u=`circle`,size:d=`md`,label:f,shrink:p=!1,position:m=`bottom-right`,description:h,badge:g,backTop:_=!1,visibilityHeight:v=400,className:y,style:b,onClick:x,"aria-label":S,children:C,...w},T)=>{let[E,D]=(0,i.useState)(()=>!_||typeof window<`u`&&(window.pageYOffset||document.documentElement.scrollTop)>v),O=(0,i.useCallback)(()=>{if(_){let e=window.pageYOffset||document.documentElement.scrollTop;D(e>v)}},[_,v]);(0,i.useEffect)(()=>{if(_)return window.addEventListener(`scroll`,O),()=>window.removeEventListener(`scroll`,O)},[_,O]);let k=e=>{_&&window.scrollTo({top:0,behavior:`smooth`}),x?.(e)},A=S||(typeof f==`string`?f:void 0),j=!!A||!!f||!!C||!!w[`aria-labelledby`]||typeof h==`string`;if((0,i.useEffect)(()=>{},[j]),!E&&_)return null;let M=e?t.Root:`button`,N=m===`bottom-right`?r.default.bottomRight:m===`bottom-left`?r.default.bottomLeft:m===`bottom-center`?r.default.bottomCenter:m===`top-right`?r.default.topRight:m===`top-left`?r.default.topLeft:r.default.inline;return(0,o.jsxs)(M,{ref:T,type:e?void 0:`button`,className:(0,a.default)(`wim-float-button`,r.default.root,!c&&r.default[l],c===`outline`&&r.default.outline,c===`glass`&&r.default.glass,l===`danger`&&r.default.danger,l===`success`&&r.default.success,r.default[u],r.default[d],N,!!f&&r.default.extended,!!p&&r.default.shrink,y),style:b,onClick:k,title:typeof h==`string`?h:void 0,"aria-label":A,...w,children:[(0,o.jsx)(t.Slottable,{children:C}),(0,o.jsxs)(`span`,{className:r.default.inner,children:[(0,o.jsx)(n.Icon,{name:_?`ChevronUpIcon`:s,size:d,className:(0,a.default)(_&&r.default.iconBacktop)}),f&&(0,o.jsx)(`span`,{className:r.default.labelWrapper,children:(0,o.jsx)(`span`,{className:r.default.label,children:f})}),g&&(0,o.jsx)(`span`,{className:(0,a.default)(r.default.badge,g===!0&&r.default.dot),children:typeof g==`number`?g:``})]}),h&&(0,o.jsx)(`span`,{className:r.default.description,children:h})]})});s.displayName=`FloatButton`,exports.FloatButton=s,exports.default=s;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../node_modules/@radix-ui/react-slot/dist/index.cjs"),n=require("../../media/Icon/Icon.cjs"),r=require("./float-button.module.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("classnames");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=i.default.forwardRef(({asChild:e=!1,iconName:s=`CircleIcon`,variant:c,intent:l=`default`,shape:u=`circle`,size:d=`md`,label:f,shrink:p=!1,position:m=`bottom-right`,description:h,badge:g,backTop:_=!1,visibilityHeight:v=400,className:y,style:b,onClick:x,"aria-label":S,children:C,...w},T)=>{let[E,D]=(0,i.useState)(()=>!_||typeof window<`u`&&(window.pageYOffset||document.documentElement.scrollTop)>v),O=(0,i.useCallback)(()=>{if(_){let e=window.pageYOffset||document.documentElement.scrollTop;D(e>v)}},[_,v]);(0,i.useEffect)(()=>{if(_)return window.addEventListener(`scroll`,O),()=>window.removeEventListener(`scroll`,O)},[_,O]);let k=e=>{_&&window.scrollTo({top:0,behavior:`smooth`}),x?.(e)},A=S||(typeof f==`string`?f:void 0),j=A&&typeof g==`number`?`${A} ${g}`:A,M=!!j||!!f||!!C||!!w[`aria-labelledby`]||typeof h==`string`;if((0,i.useEffect)(()=>{},[M]),!E&&_)return null;let N=e?t.Root:`button`,P=m===`bottom-right`?r.default.bottomRight:m===`bottom-left`?r.default.bottomLeft:m===`bottom-center`?r.default.bottomCenter:m===`top-right`?r.default.topRight:m===`top-left`?r.default.topLeft:r.default.inline;return(0,o.jsxs)(N,{ref:T,type:e?void 0:`button`,className:(0,a.default)(`wim-float-button`,r.default.root,!c&&r.default[l],c===`outline`&&r.default.outline,c===`glass`&&r.default.glass,l===`danger`&&r.default.danger,l===`success`&&r.default.success,r.default[u],r.default[d],P,!!f&&r.default.extended,!!p&&r.default.shrink,y),style:b,onClick:k,title:typeof h==`string`?h:void 0,"aria-label":j,...w,children:[(0,o.jsx)(t.Slottable,{children:C}),(0,o.jsxs)(`span`,{className:r.default.inner,children:[(0,o.jsx)(n.Icon,{name:_?`ChevronUpIcon`:s,size:d,className:(0,a.default)(_&&r.default.iconBacktop)}),f&&(0,o.jsx)(`span`,{className:r.default.labelWrapper,children:(0,o.jsx)(`span`,{className:r.default.label,children:f})}),typeof g==`number`&&` `,g&&(0,o.jsx)(`span`,{className:(0,a.default)(r.default.badge,g===!0&&r.default.dot),children:typeof g==`number`?g:``})]}),h&&(0,o.jsx)(`span`,{className:r.default.description,children:h})]})});s.displayName=`FloatButton`,exports.FloatButton=s,exports.default=s;

package/dist/components/form/FloatButton/FloatButton.js

@@ -21,17 +21,17 @@ var d = i.forwardRef(({ asChild: i = !1, iconName: d = "CircleIcon", variant: f,
 			top: 0,
 			behavior: "smooth"
 		}), T?.(e);
-	}, P = E || (typeof g == "string" ? g : void 0), F = !!P || !!g || !!D || !!O["aria-labelledby"] || typeof y == "string";
-	if (o(() => {}, [F]), !A && x) return null;
-	let I = i ? e : "button", L = v === "bottom-right" ? r.bottomRight : v === "bottom-left" ? r.bottomLeft : v === "bottom-center" ? r.bottomCenter : v === "top-right" ? r.topRight : v === "top-left" ? r.topLeft : r.inline;
-	return /* @__PURE__ */ u(I, {
+	}, P = E || (typeof g == "string" ? g : void 0), F = P && typeof b == "number" ? `${P} ${b}` : P, I = !!F || !!g || !!D || !!O["aria-labelledby"] || typeof y == "string";
+	if (o(() => {}, [I]), !A && x) return null;
+	let L = i ? e : "button", R = v === "bottom-right" ? r.bottomRight : v === "bottom-left" ? r.bottomLeft : v === "bottom-center" ? r.bottomCenter : v === "top-right" ? r.topRight : v === "top-left" ? r.topLeft : r.inline;
+	return /* @__PURE__ */ u(L, {
 		ref: k,
 		type: i ? void 0 : "button",
-		className: c("wim-float-button", r.root, !f && r[p], f === "outline" && r.outline, f === "glass" && r.glass, p === "danger" && r.danger, p === "success" && r.success, r[m], r[h], L, !!g && r.extended, !!_ && r.shrink, C),
+		className: c("wim-float-button", r.root, !f && r[p], f === "outline" && r.outline, f === "glass" && r.glass, p === "danger" && r.danger, p === "success" && r.success, r[m], r[h], R, !!g && r.extended, !!_ && r.shrink, C),
 		style: w,
 		onClick: N,
 		title: typeof y == "string" ? y : void 0,
-		"aria-label": P,
+		"aria-label": F,
 		...O,
 		children: [
 			/* @__PURE__ */ l(t, { children: D }),
@@ -50,6 +50,7 @@ var d = i.forwardRef(({ asChild: i = !1, iconName: d = "CircleIcon", variant: f,
 							children: g
 						})
 					}),
+					typeof b == "number" && " ",
 					b && /* @__PURE__ */ l("span", {
 						className: c(r.badge, b === !0 && r.dot),
 						children: typeof b == "number" ? b : ""

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