wimui 0.64.3 → 0.64.5

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

@@ -9,33 +9,33 @@ import o, { useCallback as s, useEffect as c, useMemo as l, useRef as u, useStat
 import f from "classnames";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/data-display/TreeDiagram/TreeDiagram.tsx
-var h = 200, ee = 64, g = 24, _ = 48, v = (e, t = []) => {
-	for (let n of e) n.children?.length && (t.push(n.value), v(n.children, t));
+var h = 200, g = 64, _ = 24, v = 48, y = (e, t = []) => {
+	for (let n of e) n.children?.length && (t.push(n.value), y(n.children, t));
 	return t;
-}, y = (e, t = /* @__PURE__ */ new Map()) => {
-	for (let n of e) t.set(n.value, n), n.children && y(n.children, t);
+}, b = (e, t = /* @__PURE__ */ new Map()) => {
+	for (let n of e) t.set(n.value, n), n.children && b(n.children, t);
 	return t;
-}, b = (e) => typeof e.label == "string" ? e.label : e.value, x = o.forwardRef(({ nodes: x, orientation: S = "vertical", expandedValues: C, defaultExpandedValues: w, onExpandedChange: T, selectedValue: E, onSelect: D, renderNode: O, nodeWidth: k = h, nodeHeight: A = ee, labels: j, className: te, "aria-label": ne, ...M }, N) => {
-	let { t: P } = e(t), F = o.useId(), I = j?.expand ?? ((e) => P("treediagram.expand", { label: e })), L = j?.collapse ?? ((e) => P("treediagram.collapse", { label: e })), [R, z] = d(() => w ?? v(x)), B = C ?? R, V = l(() => new Set(B), [B]), H = s((e) => {
-		C === void 0 && z(e), T?.(e);
-	}, [C, T]), U = s((e) => H(V.has(e) ? B.filter((t) => t !== e) : [...B, e]), [
+}, x = (e) => typeof e.label == "string" ? e.label : e.value, S = o.forwardRef(({ nodes: S, orientation: C = "vertical", expandedValues: w, defaultExpandedValues: T, onExpandedChange: E, selectedValue: D, onSelect: O, renderNode: k, nodeWidth: A = h, nodeHeight: j = g, labels: M, className: ee, "aria-label": te, ...ne }, N) => {
+	let { t: P } = e(t), F = o.useId(), I = M?.expand ?? ((e) => P("treediagram.expand", { label: e })), L = M?.collapse ?? ((e) => P("treediagram.collapse", { label: e })), [R, z] = d(() => T ?? y(S)), B = w ?? R, V = l(() => new Set(B), [B]), H = s((e) => {
+		w === void 0 && z(e), E?.(e);
+	}, [w, E]), U = s((e) => H(V.has(e) ? B.filter((t) => t !== e) : [...B, e]), [
 		B,
 		V,
 		H
-	]), W = l(() => y(x), [x]), G = l(() => i(x, {
-		nodeWidth: k,
-		nodeHeight: A,
-		siblingGap: g,
-		levelGap: _,
-		orientation: S,
+	]), W = l(() => b(S), [S]), G = l(() => i(S, {
+		nodeWidth: A,
+		nodeHeight: j,
+		siblingGap: _,
+		levelGap: v,
+		orientation: C,
 		isExpanded: (e) => V.has(e)
 	}), [
-		x,
-		k,
-		A,
 		S,
+		A,
+		j,
+		C,
 		V
-	]), K = l(() => new Map(G.nodes.map((e) => [e.value, e])), [G]), [q, J] = d(null), Y = q !== null && K.has(q) ? q : null, re = Y ?? E ?? G.nodes[0]?.value ?? null, X = u(/* @__PURE__ */ new Map()), Z = u(!1);
+	]), K = l(() => new Map(G.nodes.map((e) => [e.value, e])), [G]), [q, J] = d(null), Y = q !== null && K.has(q) ? q : null, re = Y ?? D ?? G.nodes[0]?.value ?? null, X = u(/* @__PURE__ */ new Map()), Z = u(!1);
 	c(() => {
 		if (q === null || K.has(q)) return;
 		let e = q, t = (e) => {
@@ -82,27 +82,27 @@ var h = 200, ee = 64, g = 24, _ = 48, v = (e, t = []) => {
 				break;
 			case "Enter":
 			case " ":
-				if (!D) return;
-				D(t.value);
+				if (!O) return;
+				O(t.value);
 				break;
 			default: return;
 		}
 		e.preventDefault();
-	}, $ = S === "vertical", ae = (e, t) => {
+	}, $ = C === "vertical", ae = (e, t) => {
 		if ($) {
-			let n = e.x + k / 2, r = e.y + A, i = t.x + k / 2;
-			return `M${n} ${r}V${r + _ / 2}H${i}V${t.y}`;
+			let n = e.x + A / 2, r = e.y + j, i = t.x + A / 2;
+			return `M${n} ${r}V${r + v / 2}H${i}V${t.y}`;
 		}
-		let n = e.x + k, r = e.y + A / 2, i = t.y + A / 2;
-		return `M${n} ${r}H${n + _ / 2}V${i}H${t.x}`;
+		let n = e.x + A, r = e.y + j / 2, i = t.y + j / 2;
+		return `M${n} ${r}H${n + v / 2}V${i}H${t.x}`;
 	};
 	return /* @__PURE__ */ p("div", {
 		ref: N,
 		role: "tree",
-		"aria-label": ne ?? P("treediagram.aria"),
-		"aria-orientation": S,
-		className: f("wim-tree-diagram", a.root, $ ? a.vertical : a.horizontal, te),
-		...M,
+		"aria-label": te ?? P("treediagram.aria"),
+		"aria-orientation": C,
+		className: f("wim-tree-diagram", a.root, $ ? a.vertical : a.horizontal, ee),
+		...ne,
 		children: /* @__PURE__ */ m("div", {
 			className: a.canvas,
 			style: {
@@ -117,12 +117,12 @@ var h = 200, ee = 64, g = 24, _ = 48, v = (e, t = []) => {
 				focusable: "false",
 				children: G.edges.map((e) => /* @__PURE__ */ p("path", { d: ae(K.get(e.from), K.get(e.to)) }, `${e.from}>${e.to}`))
 			}), G.nodes.map((e, t) => {
-				let i = W.get(e.value), o = V.has(e.value), s = E === e.value, c = {
+				let i = W.get(e.value), o = V.has(e.value), s = D === e.value, c = {
 					depth: e.depth,
 					expanded: o,
 					selected: s,
 					hiddenCount: e.hiddenCount
-				}, l = b(i);
+				}, l = x(i);
 				return /* @__PURE__ */ m("div", {
 					ref: (t) => {
 						t ? X.current.set(e.value, t) : X.current.delete(e.value);
@@ -132,60 +132,81 @@ var h = 200, ee = 64, g = 24, _ = 48, v = (e, t = []) => {
 					"aria-setsize": e.setSize,
 					"aria-posinset": e.posInSet,
 					"aria-expanded": e.hasChildren ? o : void 0,
-					"aria-selected": D ? s : void 0,
+					"aria-selected": O ? s : void 0,
 					tabIndex: e.value === re ? 0 : -1,
 					"data-value": e.value,
-					"aria-labelledby": O || !i.description ? `${F}-${t}` : `${F}-${t} ${F}-${t}-d`,
-					className: f(a.node, s && a.selected, D && a.selectable),
+					"aria-labelledby": [
+						!k && i.avatar && `${F}-${t}-a`,
+						`${F}-${t}`,
+						!k && i.description && `${F}-${t}-d`,
+						e.hasChildren && !o && `${F}-${t}-c`
+					].filter(Boolean).join(" "),
+					className: f(a.node, s && a.selected, O && a.selectable),
 					style: {
 						left: e.x,
 						top: e.y,
-						width: k,
-						height: A
+						width: A,
+						height: j
 					},
 					title: l,
 					onKeyDown: (n) => ie(n, e, t),
 					onFocus: () => J(e.value),
-					onClick: D ? () => D(e.value) : void 0,
-					children: [O ? /* @__PURE__ */ p("span", {
-						id: `${F}-${t}`,
-						className: a.custom,
-						children: O(i, c)
-					}) : /* @__PURE__ */ m("span", {
-						className: a.content,
-						children: [i.avatar && /* @__PURE__ */ p("span", {
-							className: a.avatar,
-							children: i.avatar
-						}), /* @__PURE__ */ m("span", {
-							className: a.text,
-							children: [/* @__PURE__ */ p("span", {
-								id: `${F}-${t}`,
-								className: a.label,
-								children: i.label
-							}), i.description && /* @__PURE__ */ p("span", {
-								id: `${F}-${t}-d`,
-								className: a.description,
-								children: i.description
-							})]
-						})]
-					}), e.hasChildren && /* @__PURE__ */ p("button", {
-						type: "button",
-						tabIndex: -1,
-						className: a.toggle,
-						"aria-label": o ? L(l) : I(l),
-						onClick: (t) => {
-							t.stopPropagation(), U(e.value);
-						},
-						children: o ? /* @__PURE__ */ p(r, {
-							component: n,
-							size: "xs"
-						}) : `+${e.hiddenCount}`
-					})]
+					onClick: O ? () => O(e.value) : void 0,
+					children: [
+						k ? /* @__PURE__ */ p("span", {
+							id: `${F}-${t}`,
+							className: a.custom,
+							children: k(i, c)
+						}) : /* @__PURE__ */ m("span", {
+							className: a.content,
+							children: [
+								i.avatar && /* @__PURE__ */ p("span", {
+									id: `${F}-${t}-a`,
+									className: a.avatar,
+									children: i.avatar
+								}),
+								i.avatar && " ",
+								/* @__PURE__ */ m("span", {
+									className: a.text,
+									children: [
+										/* @__PURE__ */ p("span", {
+											id: `${F}-${t}`,
+											className: a.label,
+											children: i.label
+										}),
+										i.description && " ",
+										i.description && /* @__PURE__ */ p("span", {
+											id: `${F}-${t}-d`,
+											className: a.description,
+											children: i.description
+										})
+									]
+								})
+							]
+						}),
+						e.hasChildren && " ",
+						e.hasChildren && /* @__PURE__ */ p("button", {
+							type: "button",
+							tabIndex: -1,
+							className: a.toggle,
+							"aria-label": o ? L(l) : `${I(l)} +${e.hiddenCount}`,
+							onClick: (t) => {
+								t.stopPropagation(), U(e.value);
+							},
+							children: o ? /* @__PURE__ */ p(r, {
+								component: n,
+								size: "xs"
+							}) : /* @__PURE__ */ m("span", {
+								id: `${F}-${t}-c`,
+								children: ["+", e.hiddenCount]
+							})
+						})
+					]
 				}, e.value);
 			})]
 		})
 	});
 });
-x.displayName = "TreeDiagram";
+S.displayName = "TreeDiagram";
 //#endregion
-export { x as TreeDiagram };
+export { S as TreeDiagram };

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;