react-material-design 0.5.3 → 0.5.4

package/dist/components/Button/group/render.cjs

@@ -1 +1 @@
-require('./style.css');const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/index.cjs"),n=require("../../misc/OrderedCollection/index.cjs"),r=require("../../misc/Transitionable/index.cjs"),i=require("../../types.cjs"),a=require("../icon/render.cjs");;/* empty css             */const o=require("../default/render.cjs");let s=require("classnames");s=e.__toESM(s,1);let c=require("react"),l=require("react/jsx-runtime");var u=[`type`,`align`,`size`,`shape`,`selectable`,`selected`,`onSelected`,`required`,`requiredMessage`,`children`];function d(e){let t={...e};return u.forEach(e=>delete t[e]),t}var f=(0,c.createContext)(null),p=()=>(0,c.useContext)(f);function m(e){let{onSelected:u}=e,p=(0,c.useId)(),[m,h]=(0,c.useState)([]),[g,_]=(0,c.useState)(),[v,y]=(0,c.useState)([]),b=(0,c.useMemo)(()=>[`Button`,`IconButton`],[]),x={},S=(0,c.useMemo)(()=>({size:e.size,selectable:!!e.selectable,required:!!(e.selectable&&e.required),get selected(){return m.reduce((e,t)=>e.set(t.id,v.includes(t.id)),new Map)},onSelected:(t,n)=>{let r;e.selectable&&(_(void 0),e.selectable===`single`?(r=n?[t]:[],u?.(n?t:void 0)):(r=[...v],n?r.push(t):r=r.filter(e=>e!==t),u?.(r)),y(r))},onPressed:(t,n,r)=>{let i,a=null,o=null;e.type!==`connected`&&(n?.previousElementSibling instanceof HTMLElement&&(a=n.previousElementSibling),n?.nextElementSibling instanceof HTMLElement&&(o=n.nextElementSibling),r?(i=n.getBoundingClientRect().width/100*15,!a&&o?(n.style.setProperty(`--button-width-extra`,`${i/2}px`),o.style.setProperty(`--button-width-extra`,`-${i/2}px`)):a&&o?(a.style.setProperty(`--button-width-extra`,`-${i/2}px`),n.style.setProperty(`--button-width-extra`,`${i}px`),o.style.setProperty(`--button-width-extra`,`-${i/2}px`)):a&&!o&&(a.style.setProperty(`--button-width-extra`,`-${i/2}px`),n.style.setProperty(`--button-width-extra`,`${i/2}px`))):(a?.style.removeProperty(`--button-width-extra`),n.style.removeProperty(`--button-width-extra`),o?.style.removeProperty(`--button-width-extra`)))}}),[m,u,e.required,e.selectable,e.size,e.type,v]);return(0,c.useEffect)(()=>{e.selectable&&(e.selectable===`single`?y(e.selected?[e.selected]:[]):y(e.selected??[]))},[e.selectable,e.selected]),x.ButtonGroup=!0,x[e.type??`standard`]=!0,e.type!==`connected`&&(x[`align-`+(e.align??`left`)]=!0),x[e.shape??`round`]=!0,x[i.getComponentSizeName(e.size)]=!0,e.selectable&&(x.selectable=!0,x[e.selectable]=!0),(0,l.jsxs)(`div`,{...d(e),className:(0,s.default)(x,e.className),children:[(0,l.jsx)(`div`,{className:`container`,children:(0,l.jsxs)(f,{value:S,children:[m.map(e=>{switch(e.orderedCollectionName){case`Button`:return(0,l.jsx)(o.default,{...e},e.id);case`IconButton`:return(0,l.jsx)(a.default,{...e},e.id)}}),(0,l.jsx)(n.default,{childName:b,onChildrenChange:h,compareChild:t.shallowEqual,children:e.children})]})}),e.selectable&&e.required&&(0,l.jsx)(r.default,{value:g,className:`error`}),(0,l.jsx)(`div`,{style:(0,c.useMemo)(()=>({display:`none`}),[]),children:e.selectable&&e.required&&m.map((t,n)=>(0,l.jsx)(`input`,{type:`radio`,name:`group_${p}`,required:!n&&!v.length,defaultChecked:v.includes(t.id),onInvalid:t=>{_((e.selectable?e.requiredMessage:void 0)??t.currentTarget.validationMessage),t.preventDefault()}},t.id))})]})}exports.ButtonGroupContext=f,exports.default=m,exports.useButtonGroupContext=p;
+require('./style.css');const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../utils/index.cjs"),n=require("../../misc/OrderedCollection/index.cjs"),r=require("../../misc/Transitionable/index.cjs"),i=require("../../types.cjs"),a=require("../icon/render.cjs");;/* empty css             */const o=require("../default/render.cjs");let s=require("classnames");s=e.__toESM(s,1);let c=require("react"),l=require("react/jsx-runtime");var u=[`type`,`align`,`size`,`shape`,`selectable`,`selected`,`onSelected`,`required`,`requiredMessage`,`children`];function d(e){let t={...e};return u.forEach(e=>delete t[e]),delete t.orderedCollectionName,t}var f=(0,c.createContext)(null),p=()=>(0,c.useContext)(f);function m(e){let{onSelected:u,selectable:p,selected:m,required:h,requiredMessage:g}=e,_=(0,c.useId)(),[v,y]=(0,c.useState)([]),[b,x]=(0,c.useState)(),[S,C]=(0,c.useState)([]),w=(0,c.useMemo)(()=>(p===`single`&&m?[m]:S)??S,[p,m,S]),T=(0,c.useMemo)(()=>[`Button`,`IconButton`],[]),E={},D=(0,c.useMemo)(()=>({size:e.size,selectable:!!p,required:!!(p&&h),get selected(){return v.reduce((e,t)=>e.set(t.id,w.includes(t.id)),new Map)},onSelected:(e,t)=>{let n;p&&(x(void 0),p===`single`?(n=h||t?[e]:[],u?.(t?e:void 0)):(n=[...w],t?n.push(e):(!h||h&&n.length>1)&&(n=n.filter(t=>t!==e)),u?.(n)),C(n))},onPressed:(t,n,r)=>{let i,a=null,o=null;e.type!==`connected`&&(n?.previousElementSibling instanceof HTMLElement&&(a=n.previousElementSibling),n?.nextElementSibling instanceof HTMLElement&&(o=n.nextElementSibling),r?(i=n.getBoundingClientRect().width/100*15,!a&&o?(n.style.setProperty(`--button-width-extra`,`${i/2}px`),o.style.setProperty(`--button-width-extra`,`-${i/2}px`)):a&&o?(a.style.setProperty(`--button-width-extra`,`-${i/2}px`),n.style.setProperty(`--button-width-extra`,`${i}px`),o.style.setProperty(`--button-width-extra`,`-${i/2}px`)):a&&!o&&(a.style.setProperty(`--button-width-extra`,`-${i/2}px`),n.style.setProperty(`--button-width-extra`,`${i/2}px`))):(a?.style.removeProperty(`--button-width-extra`),n.style.removeProperty(`--button-width-extra`),o?.style.removeProperty(`--button-width-extra`)))}}),[v,u,h,p,e.size,e.type,w]);return E.ButtonGroup=!0,E[e.type??`standard`]=!0,e.type!==`connected`&&(E[`align-`+(e.align??`left`)]=!0),E[e.shape??`round`]=!0,E[i.getComponentSizeName(e.size)]=!0,p&&(E.selectable=!0,E[p]=!0),(0,l.jsxs)(`div`,{...d(e),className:(0,s.default)(E,e.className),children:[(0,l.jsx)(`div`,{className:`container`,children:(0,l.jsxs)(f,{value:D,children:[v.map(e=>{switch(e.orderedCollectionName){case`Button`:return(0,l.jsx)(o.default,{...e},e.id);case`IconButton`:return(0,l.jsx)(a.default,{...e},e.id)}}),(0,l.jsx)(n.default,{childName:T,onChildrenChange:y,compareChild:t.shallowEqual,children:e.children})]})}),p&&h&&(0,l.jsx)(r.default,{value:b,className:`error`}),(0,l.jsx)(`div`,{style:(0,c.useMemo)(()=>({display:`none`}),[]),children:p&&h&&v.map((e,t)=>(0,l.jsx)(`input`,{type:`radio`,name:`group_${_}`,required:!t&&!w.length,defaultChecked:w.includes(e.id),onInvalid:e=>{x((p?g:void 0)??e.currentTarget.validationMessage),e.preventDefault()}},e.id))})]})}exports.ButtonGroupContext=f,exports.default=m,exports.useButtonGroupContext=p;

package/dist/components/Button/group/render.js

@@ -6,10 +6,10 @@ import i from "../icon/render.js";
 import './style.css';/* empty css           */
 import a from "../default/render.js";
 import o from "classnames";
-import { createContext as s, useContext as c, useEffect as l, useId as u, useMemo as d, useState as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { createContext as s, useContext as c, useId as l, useMemo as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region lib/components/Button/group/render.tsx
-var h = [
+var m = [
 	"type",
 	"align",
 	"size",
@@ -21,72 +21,74 @@ var h = [
 	"requiredMessage",
 	"children"
 ];
-function g(e) {
+function h(e) {
 	let t = { ...e };
-	return h.forEach((e) => delete t[e]), t;
+	return m.forEach((e) => delete t[e]), delete t.orderedCollectionName, t;
 }
-var _ = s(null), v = () => c(_);
-function y(s) {
-	let { onSelected: c } = s, h = u(), [v, y] = f([]), [b, x] = f(), [S, C] = f([]), w = d(() => ["Button", "IconButton"], []), T = {}, E = d(() => ({
+var g = s(null), _ = () => c(g);
+function v(s) {
+	let { onSelected: c, selectable: m, selected: _, required: v, requiredMessage: y } = s, b = l(), [x, S] = d([]), [C, w] = d(), [T, E] = d([]), D = u(() => (m === "single" && _ ? [_] : T) ?? T, [
+		m,
+		_,
+		T
+	]), O = u(() => ["Button", "IconButton"], []), k = {}, A = u(() => ({
 		size: s.size,
-		selectable: !!s.selectable,
-		required: !!(s.selectable && s.required),
+		selectable: !!m,
+		required: !!(m && v),
 		get selected() {
-			return v.reduce((e, t) => e.set(t.id, S.includes(t.id)), /* @__PURE__ */ new Map());
+			return x.reduce((e, t) => e.set(t.id, D.includes(t.id)), /* @__PURE__ */ new Map());
 		},
 		onSelected: (e, t) => {
 			let n;
-			s.selectable && (x(void 0), s.selectable === "single" ? (n = t ? [e] : [], c?.(t ? e : void 0)) : (n = [...S], t ? n.push(e) : n = n.filter((t) => t !== e), c?.(n)), C(n));
+			m && (w(void 0), m === "single" ? (n = v || t ? [e] : [], c?.(t ? e : void 0)) : (n = [...D], t ? n.push(e) : (!v || v && n.length > 1) && (n = n.filter((t) => t !== e)), c?.(n)), E(n));
 		},
 		onPressed: (e, t, n) => {
 			let r, i = null, a = null;
 			s.type !== "connected" && (t?.previousElementSibling instanceof HTMLElement && (i = t.previousElementSibling), t?.nextElementSibling instanceof HTMLElement && (a = t.nextElementSibling), n ? (r = t.getBoundingClientRect().width / 100 * 15, !i && a ? (t.style.setProperty("--button-width-extra", `${r / 2}px`), a.style.setProperty("--button-width-extra", `-${r / 2}px`)) : i && a ? (i.style.setProperty("--button-width-extra", `-${r / 2}px`), t.style.setProperty("--button-width-extra", `${r}px`), a.style.setProperty("--button-width-extra", `-${r / 2}px`)) : i && !a && (i.style.setProperty("--button-width-extra", `-${r / 2}px`), t.style.setProperty("--button-width-extra", `${r / 2}px`))) : (i?.style.removeProperty("--button-width-extra"), t.style.removeProperty("--button-width-extra"), a?.style.removeProperty("--button-width-extra")));
 		}
 	}), [
-		v,
+		x,
 		c,
-		s.required,
-		s.selectable,
+		v,
+		m,
 		s.size,
 		s.type,
-		S
+		D
 	]);
-	return l(() => {
-		s.selectable && (s.selectable === "single" ? C(s.selected ? [s.selected] : []) : C(s.selected ?? []));
-	}, [s.selectable, s.selected]), T.ButtonGroup = !0, T[s.type ?? "standard"] = !0, s.type !== "connected" && (T["align-" + (s.align ?? "left")] = !0), T[s.shape ?? "round"] = !0, T[r(s.size)] = !0, s.selectable && (T.selectable = !0, T[s.selectable] = !0), /* @__PURE__ */ m("div", {
-		...g(s),
-		className: o(T, s.className),
+	return k.ButtonGroup = !0, k[s.type ?? "standard"] = !0, s.type !== "connected" && (k["align-" + (s.align ?? "left")] = !0), k[s.shape ?? "round"] = !0, k[r(s.size)] = !0, m && (k.selectable = !0, k[m] = !0), /* @__PURE__ */ p("div", {
+		...h(s),
+		className: o(k, s.className),
 		children: [
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ f("div", {
 				className: "container",
-				children: /* @__PURE__ */ m(_, {
-					value: E,
-					children: [v.map((e) => {
+				children: /* @__PURE__ */ p(g, {
+					value: A,
+					children: [x.map((e) => {
 						switch (e.orderedCollectionName) {
-							case "Button": return /* @__PURE__ */ p(a, { ...e }, e.id);
-							case "IconButton": return /* @__PURE__ */ p(i, { ...e }, e.id);
+							case "Button": return /* @__PURE__ */ f(a, { ...e }, e.id);
+							case "IconButton": return /* @__PURE__ */ f(i, { ...e }, e.id);
 						}
-					}), /* @__PURE__ */ p(t, {
-						childName: w,
-						onChildrenChange: y,
+					}), /* @__PURE__ */ f(t, {
+						childName: O,
+						onChildrenChange: S,
 						compareChild: e,
 						children: s.children
 					})]
 				})
 			}),
-			s.selectable && s.required && /* @__PURE__ */ p(n, {
-				value: b,
+			m && v && /* @__PURE__ */ f(n, {
+				value: C,
 				className: "error"
 			}),
-			/* @__PURE__ */ p("div", {
-				style: d(() => ({ display: "none" }), []),
-				children: s.selectable && s.required && v.map((e, t) => /* @__PURE__ */ p("input", {
+			/* @__PURE__ */ f("div", {
+				style: u(() => ({ display: "none" }), []),
+				children: m && v && x.map((e, t) => /* @__PURE__ */ f("input", {
 					type: "radio",
-					name: `group_${h}`,
-					required: !t && !S.length,
-					defaultChecked: S.includes(e.id),
+					name: `group_${b}`,
+					required: !t && !D.length,
+					defaultChecked: D.includes(e.id),
 					onInvalid: (e) => {
-						x((s.selectable ? s.requiredMessage : void 0) ?? e.currentTarget.validationMessage), e.preventDefault();
+						w((m ? y : void 0) ?? e.currentTarget.validationMessage), e.preventDefault();
 					}
 				}, e.id))
 			})
@@ -94,4 +96,4 @@ function y(s) {
 	});
 }
 //#endregion
-export { _ as ButtonGroupContext, y as default, v as useButtonGroupContext };
+export { g as ButtonGroupContext, v as default, _ as useButtonGroupContext };

package/dist/components/Button/index.cjs

@@ -1 +1 @@
-const e=require("./group/render.cjs");let t=require("react/compiler-runtime"),n=require("react");function r(r,i,a){let o=(0,t.c)(38),{selectable:s,selected:c,defaultSelected:l,onSelected:u,onClick:d}=i,f=e.useButtonGroupContext(),[p,m]=(0,n.useState)((s?l??c:!1)??!1),h=c??p,[g,_]=(0,n.useState)(!1),v;o[0]!==f||o[1]!==r||o[2]!==d||o[3]!==u||o[4]!==s||o[5]!==h||o[6]!==c?(v=e=>{f?.selectable?f.onSelected(r,!(f.selected.get(r)??h)):!f&&s&&(c===void 0&&m(!h),u?.(!h)),d?.(e)},o[0]=f,o[1]=r,o[2]=d,o[3]=u,o[4]=s,o[5]=h,o[6]=c,o[7]=v):v=o[7];let y=v,b;o[8]===a?b=o[9]:(b=()=>{_(!0),a(!0)},o[8]=a,o[9]=b);let x=b,S;o[10]===a?S=o[11]:(S=()=>{_(!1),a(!1)},o[10]=a,o[11]=S);let C=S,w;o[12]!==x||o[13]!==i?(w=e=>{x(),i.onMouseDown?.(e)},o[12]=x,o[13]=i,o[14]=w):w=o[14];let T=w,E;o[15]!==C||o[16]!==i?(E=e=>{C(),i.onMouseUp?.(e)},o[15]=C,o[16]=i,o[17]=E):E=o[17];let D=E,O;o[18]!==C||o[19]!==i?(O=e=>{C(),i.onMouseLeave?.(e)},o[18]=C,o[19]=i,o[20]=O):O=o[20];let k=O,A;o[21]!==x||o[22]!==i?(A=e=>{x(),i.onTouchStart?.(e)},o[21]=x,o[22]=i,o[23]=A):A=o[23];let j=A,M;o[24]!==C||o[25]!==i?(M=e=>{C(),i.onTouchEnd?.(e)},o[24]=C,o[25]=i,o[26]=M):M=o[26];let N=M,P;o[27]!==y||o[28]!==T||o[29]!==k||o[30]!==D||o[31]!==N||o[32]!==j?(P={onClick:y,onMouseDown:T,onMouseUp:D,onMouseLeave:k,onTouchStart:j,onTouchEnd:N},o[27]=y,o[28]=T,o[29]=k,o[30]=D,o[31]=N,o[32]=j,o[33]=P):P=o[33];let F=P,I;return o[34]!==F||o[35]!==g||o[36]!==p?(I=[F,p,g],o[34]=F,o[35]=g,o[36]=p,o[37]=I):I=o[37],I}exports.useCommonButtonProps=r;
+const e=require("./group/render.cjs");let t=require("react/compiler-runtime"),n=require("react");function r(r,i,a){let o=(0,t.c)(38),{selectable:s,selected:c,defaultSelected:l,onSelected:u,onClick:d,onMouseDown:f,onMouseUp:p,onMouseLeave:m,onTouchStart:h,onTouchEnd:g}=i,_=e.useButtonGroupContext(),[v,y]=(0,n.useState)((s?l??c:!1)??!1),b=c??v,[x,S]=(0,n.useState)(!1),C;o[0]!==_||o[1]!==r||o[2]!==d||o[3]!==u||o[4]!==s||o[5]!==b||o[6]!==c?(C=e=>{_?.selectable?_.onSelected(r,!(_.selected.get(r)??b)):!_&&s&&(c===void 0&&y(!b),u?.(!b)),d?.(e)},o[0]=_,o[1]=r,o[2]=d,o[3]=u,o[4]=s,o[5]=b,o[6]=c,o[7]=C):C=o[7];let w=C,T;o[8]===a?T=o[9]:(T=()=>{S(!0),a(!0)},o[8]=a,o[9]=T);let E=T,D;o[10]===a?D=o[11]:(D=()=>{S(!1),a(!1)},o[10]=a,o[11]=D);let O=D,k;o[12]!==f||o[13]!==E?(k=e=>{E(),f?.(e)},o[12]=f,o[13]=E,o[14]=k):k=o[14];let A=k,j;o[15]!==p||o[16]!==O?(j=e=>{O(),p?.(e)},o[15]=p,o[16]=O,o[17]=j):j=o[17];let M=j,N;o[18]!==m||o[19]!==O?(N=e=>{O(),m?.(e)},o[18]=m,o[19]=O,o[20]=N):N=o[20];let P=N,F;o[21]!==E||o[22]!==h?(F=e=>{E(),h?.(e)},o[21]=E,o[22]=h,o[23]=F):F=o[23];let I=F,L;o[24]!==O||o[25]!==g?(L=e=>{O(),g?.(e)},o[24]=O,o[25]=g,o[26]=L):L=o[26];let R=L,z;o[27]!==w||o[28]!==A||o[29]!==P||o[30]!==M||o[31]!==R||o[32]!==I?(z={onClick:w,onMouseDown:A,onMouseUp:M,onMouseLeave:P,onTouchStart:I,onTouchEnd:R},o[27]=w,o[28]=A,o[29]=P,o[30]=M,o[31]=R,o[32]=I,o[33]=z):z=o[33];let B=z,V;return o[34]!==B||o[35]!==x||o[36]!==v?(V=[B,v,x],o[34]=B,o[35]=x,o[36]=v,o[37]=V):V=o[37],V}exports.useCommonButtonProps=r;

package/dist/components/Button/index.js

@@ -3,53 +3,53 @@ import { c as t } from "react/compiler-runtime";
 import { useState as n } from "react";
 //#region lib/components/Button/index.tsx
 function r(r, i, a) {
-	let o = t(38), { selectable: s, selected: c, defaultSelected: l, onSelected: u, onClick: d } = i, f = e(), [p, m] = n((s ? l ?? c : !1) ?? !1), h = c ?? p, [g, _] = n(!1), v;
-	o[0] !== f || o[1] !== r || o[2] !== d || o[3] !== u || o[4] !== s || o[5] !== h || o[6] !== c ? (v = (e) => {
-		f?.selectable ? f.onSelected(r, !(f.selected.get(r) ?? h)) : !f && s && (c === void 0 && m(!h), u?.(!h)), d?.(e);
-	}, o[0] = f, o[1] = r, o[2] = d, o[3] = u, o[4] = s, o[5] = h, o[6] = c, o[7] = v) : v = o[7];
-	let y = v, b;
-	o[8] === a ? b = o[9] : (b = () => {
-		_(!0), a(!0);
-	}, o[8] = a, o[9] = b);
-	let x = b, S;
-	o[10] === a ? S = o[11] : (S = () => {
-		_(!1), a(!1);
-	}, o[10] = a, o[11] = S);
-	let C = S, w;
-	o[12] !== x || o[13] !== i ? (w = (e) => {
-		x(), i.onMouseDown?.(e);
-	}, o[12] = x, o[13] = i, o[14] = w) : w = o[14];
-	let T = w, E;
-	o[15] !== C || o[16] !== i ? (E = (e) => {
-		C(), i.onMouseUp?.(e);
-	}, o[15] = C, o[16] = i, o[17] = E) : E = o[17];
-	let D = E, O;
-	o[18] !== C || o[19] !== i ? (O = (e) => {
-		C(), i.onMouseLeave?.(e);
-	}, o[18] = C, o[19] = i, o[20] = O) : O = o[20];
-	let k = O, A;
-	o[21] !== x || o[22] !== i ? (A = (e) => {
-		x(), i.onTouchStart?.(e);
-	}, o[21] = x, o[22] = i, o[23] = A) : A = o[23];
-	let j = A, M;
-	o[24] !== C || o[25] !== i ? (M = (e) => {
-		C(), i.onTouchEnd?.(e);
-	}, o[24] = C, o[25] = i, o[26] = M) : M = o[26];
-	let N = M, P;
-	o[27] !== y || o[28] !== T || o[29] !== k || o[30] !== D || o[31] !== N || o[32] !== j ? (P = {
-		onClick: y,
-		onMouseDown: T,
-		onMouseUp: D,
-		onMouseLeave: k,
-		onTouchStart: j,
-		onTouchEnd: N
-	}, o[27] = y, o[28] = T, o[29] = k, o[30] = D, o[31] = N, o[32] = j, o[33] = P) : P = o[33];
-	let F = P, I;
-	return o[34] !== F || o[35] !== g || o[36] !== p ? (I = [
-		F,
-		p,
-		g
-	], o[34] = F, o[35] = g, o[36] = p, o[37] = I) : I = o[37], I;
+	let o = t(38), { selectable: s, selected: c, defaultSelected: l, onSelected: u, onClick: d, onMouseDown: f, onMouseUp: p, onMouseLeave: m, onTouchStart: h, onTouchEnd: g } = i, _ = e(), [v, y] = n((s ? l ?? c : !1) ?? !1), b = c ?? v, [x, S] = n(!1), C;
+	o[0] !== _ || o[1] !== r || o[2] !== d || o[3] !== u || o[4] !== s || o[5] !== b || o[6] !== c ? (C = (e) => {
+		_?.selectable ? _.onSelected(r, !(_.selected.get(r) ?? b)) : !_ && s && (c === void 0 && y(!b), u?.(!b)), d?.(e);
+	}, o[0] = _, o[1] = r, o[2] = d, o[3] = u, o[4] = s, o[5] = b, o[6] = c, o[7] = C) : C = o[7];
+	let w = C, T;
+	o[8] === a ? T = o[9] : (T = () => {
+		S(!0), a(!0);
+	}, o[8] = a, o[9] = T);
+	let E = T, D;
+	o[10] === a ? D = o[11] : (D = () => {
+		S(!1), a(!1);
+	}, o[10] = a, o[11] = D);
+	let O = D, k;
+	o[12] !== f || o[13] !== E ? (k = (e) => {
+		E(), f?.(e);
+	}, o[12] = f, o[13] = E, o[14] = k) : k = o[14];
+	let A = k, j;
+	o[15] !== p || o[16] !== O ? (j = (e) => {
+		O(), p?.(e);
+	}, o[15] = p, o[16] = O, o[17] = j) : j = o[17];
+	let M = j, N;
+	o[18] !== m || o[19] !== O ? (N = (e) => {
+		O(), m?.(e);
+	}, o[18] = m, o[19] = O, o[20] = N) : N = o[20];
+	let P = N, F;
+	o[21] !== E || o[22] !== h ? (F = (e) => {
+		E(), h?.(e);
+	}, o[21] = E, o[22] = h, o[23] = F) : F = o[23];
+	let I = F, L;
+	o[24] !== O || o[25] !== g ? (L = (e) => {
+		O(), g?.(e);
+	}, o[24] = O, o[25] = g, o[26] = L) : L = o[26];
+	let R = L, z;
+	o[27] !== w || o[28] !== A || o[29] !== P || o[30] !== M || o[31] !== R || o[32] !== I ? (z = {
+		onClick: w,
+		onMouseDown: A,
+		onMouseUp: M,
+		onMouseLeave: P,
+		onTouchStart: I,
+		onTouchEnd: R
+	}, o[27] = w, o[28] = A, o[29] = P, o[30] = M, o[31] = R, o[32] = I, o[33] = z) : z = o[33];
+	let B = z, V;
+	return o[34] !== B || o[35] !== x || o[36] !== v ? (V = [
+		B,
+		v,
+		x
+	], o[34] = B, o[35] = x, o[36] = v, o[37] = V) : V = o[37], V;
 }
 //#endregion
 export { r as useCommonButtonProps };

package/dist/components/misc/OrderedCollection/index.cjs

@@ -1 +1 @@
-require('./style.css');const e=require("../../../utils/hooks.cjs");;/* empty css             */let t=require("react/compiler-runtime"),n=require("react"),r=require("react/jsx-runtime"),i=require("react-dom-event-hooks");function a(e){let t={...e};return delete t.id,delete t.orderedCollectionName,t}var o=(0,n.createContext)(null);function s(e,t){let r=(0,n.useContext)(o);if(!r&&(e||t))throw Error(`${t??`OrderedCollectionChild`} must be used in ${e??`OrderedCollection`} component`);return r}function c(e){let a=(0,t.c)(20),s;a[0]===Symbol.for(`react.memo_cache_sentinel`)?(s={},a[0]=s):s=a[0];let[c,p]=(0,n.useState)(s),m;a[1]===Symbol.for(`react.memo_cache_sentinel`)?(m=[],a[1]=m):m=a[1];let h=(0,n.useRef)(m),g;a[2]===Symbol.for(`react.memo_cache_sentinel`)?(g=(e,t,n)=>p(r=>({...r,[e]:{...n,orderedCollectionName:t}})),a[2]=g):g=a[2];let _=g,v;a[3]===Symbol.for(`react.memo_cache_sentinel`)?(v=e=>e.forEach(e=>e.removedNodes.forEach(e=>{e instanceof HTMLElement&&p(t=>{let n={...t};return e.dataset.id&&delete n[e.dataset.id],n})})),a[3]=v):v=a[3];let y;a[4]===Symbol.for(`react.memo_cache_sentinel`)?(y={childList:!0},a[4]=y):y=a[4];let{saveRef:b,ref:x}=(0,i.useMutationObserver)(v,y),S;a[5]===e.name?S=a[6]:(S={name:e.name,saveChildData:_},a[5]=e.name,a[6]=S);let C=S,w;a[7]!==e||a[8]!==x||a[9]!==c?(w=()=>{let t=(t,n)=>t.id===i[n]?.id?e.compareChild&&i[n]?!e.compareChild(t,i[n]):!1:!0,n=Array.isArray(e.childName)?e.childName:[e.childName],r,i;x.current&&(r=Array.from(x.current.querySelectorAll(`:scope > .OrderedCollectionChild:is(${n.map(f).join(`, `)})`)),i=r.map(d).filter(u).map(e=>c[e]?{...c[e],id:e}:null).filter(l),(h.current.length!==i.length||h.current.some(t))&&(e.onChildrenChange?.(i),h.current=i))},a[7]=e,a[8]=x,a[9]=c,a[10]=w):w=a[10];let T=(0,n.useEffectEvent)(w),E;a[11]===T?E=a[12]:(E=()=>T(),a[11]=T,a[12]=E),(0,n.useLayoutEffect)(E);let D;a[13]!==e.children||a[14]!==e.name||a[15]!==b?(D=(0,r.jsx)(`div`,{ref:b,className:`OrderedCollection`,"data-name":e.name,"aria-hidden":`true`,children:e.children}),a[13]=e.children,a[14]=e.name,a[15]=b,a[16]=D):D=a[16];let O;return a[17]!==C||a[18]!==D?(O=(0,r.jsx)(o,{value:C,children:D}),a[17]=C,a[18]=D,a[19]=O):O=a[19],O}function l(e){return!!e}function u(e){return typeof e==`string`}function d(e){return e.getAttribute(`data-id`)}function f(e){return`[data-name="${e}"]`}function p(i){let a=(0,t.c)(9),o=(0,n.useId)(),c=i.id??o,{saveChildData:l}=s(i.parentName,i.name),u,d;a[0]!==c||a[1]!==i.content||a[2]!==i.name||a[3]!==l?(u=()=>l(c,i.name,i.content),d=[c,i.content,i.name,l],a[0]=c,a[1]=i.content,a[2]=i.name,a[3]=l,a[4]=u,a[5]=d):(u=a[4],d=a[5]),e.useIsomorphicLayoutEffect(u,d);let f;return a[6]!==c||a[7]!==i.name?(f=(0,r.jsx)(`span`,{className:`OrderedCollectionChild`,"data-name":i.name,"data-id":c,"aria-hidden":`true`}),a[6]=c,a[7]=i.name,a[8]=f):f=a[8],f}exports.OrderedCollectionChild=p,exports.OrderedCollectionContext=o,exports.cleanOrderedCollectionProps=a,exports.default=c,exports.useOrderedCollection=s;
+require('./style.css');const e=require("../../../utils/hooks.cjs");;/* empty css             */let t=require("react/compiler-runtime"),n=require("react"),r=require("react/jsx-runtime"),i=require("react-dom-event-hooks");function a(e){let t={...e};return delete t.id,delete t.orderedCollectionName,t}var o=(0,n.createContext)(null);function s(e,t){let r=(0,n.useContext)(o);if(!r&&(e||t))throw Error(`${t??`OrderedCollectionChild`} must be used in ${e??`OrderedCollection`} component`);return r}function c(e){let a=(0,t.c)(20),s;a[0]===Symbol.for(`react.memo_cache_sentinel`)?(s={},a[0]=s):s=a[0];let[c,p]=(0,n.useState)(s),m;a[1]===Symbol.for(`react.memo_cache_sentinel`)?(m=[],a[1]=m):m=a[1];let h=(0,n.useRef)(m),g;a[2]===Symbol.for(`react.memo_cache_sentinel`)?(g=(e,t,n)=>p(r=>({...r,[e]:{...n,orderedCollectionName:t}})),a[2]=g):g=a[2];let _=g,v;a[3]===Symbol.for(`react.memo_cache_sentinel`)?(v=e=>e.forEach(e=>e.removedNodes.forEach(e=>{e instanceof HTMLElement&&p(t=>{let n={...t};return e.dataset.id&&delete n[e.dataset.id],n})})),a[3]=v):v=a[3];let y;a[4]===Symbol.for(`react.memo_cache_sentinel`)?(y={childList:!0},a[4]=y):y=a[4];let{saveRef:b,ref:x}=(0,i.useMutationObserver)(v,y),S;a[5]===e.name?S=a[6]:(S={name:e.name,saveChildData:_},a[5]=e.name,a[6]=S);let C=S,w;a[7]!==e||a[8]!==x||a[9]!==c?(w=()=>{let t=(t,n)=>t.id===i[n]?.id?e.compareChild&&i[n]?!e.compareChild(t,i[n]):!1:!0,n=Array.isArray(e.childName)?e.childName:[e.childName],r,i;x.current&&(r=Array.from(x.current.querySelectorAll(`:scope > .OrderedCollectionChild:is(${n.map(f).join(`, `)})`)),i=r.map(d).filter(u).map(e=>c[e]?{...c[e],id:c[e].id??e}:null).filter(l),(h.current.length!==i.length||h.current.some(t))&&(e.onChildrenChange?.(i),h.current=i))},a[7]=e,a[8]=x,a[9]=c,a[10]=w):w=a[10];let T=(0,n.useEffectEvent)(w),E;a[11]===T?E=a[12]:(E=()=>T(),a[11]=T,a[12]=E),(0,n.useLayoutEffect)(E);let D;a[13]!==e.children||a[14]!==e.name||a[15]!==b?(D=(0,r.jsx)(`div`,{ref:b,className:`OrderedCollection`,"data-name":e.name,"aria-hidden":`true`,children:e.children}),a[13]=e.children,a[14]=e.name,a[15]=b,a[16]=D):D=a[16];let O;return a[17]!==C||a[18]!==D?(O=(0,r.jsx)(o,{value:C,children:D}),a[17]=C,a[18]=D,a[19]=O):O=a[19],O}function l(e){return!!e}function u(e){return typeof e==`string`}function d(e){return e.getAttribute(`data-id`)}function f(e){return`[data-name="${e}"]`}function p(i){let a=(0,t.c)(9),o=(0,n.useId)(),c=i.id??o,{saveChildData:l}=s(i.parentName,i.name),u,d;a[0]!==c||a[1]!==i.content||a[2]!==i.name||a[3]!==l?(u=()=>l(c,i.name,i.content),d=[c,i.content,i.name,l],a[0]=c,a[1]=i.content,a[2]=i.name,a[3]=l,a[4]=u,a[5]=d):(u=a[4],d=a[5]),e.useIsomorphicLayoutEffect(u,d);let f;return a[6]!==c||a[7]!==i.name?(f=(0,r.jsx)(`span`,{className:`OrderedCollectionChild`,"data-name":i.name,"data-id":c,"aria-hidden":`true`}),a[6]=c,a[7]=i.name,a[8]=f):f=a[8],f}exports.OrderedCollectionChild=p,exports.OrderedCollectionContext=o,exports.cleanOrderedCollectionProps=a,exports.default=c,exports.useOrderedCollection=s;

package/dist/components/misc/OrderedCollection/index.js

@@ -47,7 +47,7 @@ function m(e) {
 		let t = (t, n) => t.id === i[n]?.id ? e.compareChild && i[n] ? !e.compareChild(t, i[n]) : !1 : !0, n = Array.isArray(e.childName) ? e.childName : [e.childName], r, i;
 		w.current && (r = Array.from(w.current.querySelectorAll(`:scope > .OrderedCollectionChild:is(${n.map(v).join(", ")})`)), i = r.map(_).filter(g).map((e) => a[e] ? {
 			...a[e],
-			id: e
+			id: a[e].id ?? e
 		} : null).filter(h), (m.current.length !== i.length || m.current.some(t)) && (e.onChildrenChange?.(i), m.current = i));
 	}, n[7] = e, n[8] = w, n[9] = a, n[10] = D) : D = n[10];
 	let O = i(D), k;

package/dist/layouts/Toolbox/index.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});require('./style.css');const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../utils/index.cjs"),ee=require("../../components/misc/OrderedCollection/index.cjs"),n=require("../../components/Button/group/render.cjs"),r=require("../../components/ContextMenu/render.cjs"),i=require("../../components/Toolbar/Toolbar.render.cjs");;/* empty css             */let a=require("react/compiler-runtime"),o=require("classnames");o=e.__toESM(o,1);let te=require("react"),s=require("react/jsx-runtime");function c(e){let n=(0,a.c)(56),r;n[0]===Symbol.for(`react.memo_cache_sentinel`)?(r=[],n[0]=r):r=n[0];let[i,c]=(0,te.useState)(r),d;n[1]===Symbol.for(`react.memo_cache_sentinel`)?(d=[`Content`,`Toolbar`,`ButtonGroup`,`ContextMenu`],n[1]=d):d=n[1];let fe=d,f;n[2]===i?f=n[3]:(f=i.filter(u).at(0),n[2]=i,n[3]=f);let p=f,m;n[4]===i?m=n[5]:(m=i.filter(de),n[4]=i,n[5]=m);let h=m,g;n[6]===i?g=n[7]:(g=i.filter(ue),n[6]=i,n[7]=g);let _=g,v;n[8]===i?v=n[9]:(v=i.filter(le),n[8]=i,n[9]=v);let y=v,b;n[10]===h?b=n[11]:(b=h.filter(ce),n[10]=h,n[11]=b);let x=b,S;n[12]===h?S=n[13]:(S=h.filter(l),n[12]=h,n[13]=S);let C=S,w;n[14]===C?w=n[15]:(w=C.filter(se),n[14]=C,n[15]=w);let pe=w,T;n[16]===C?T=n[17]:(T=C.filter(oe),n[16]=C,n[17]=T);let E=T,D;n[18]===_?D=n[19]:(D=_.filter(ae),n[18]=_,n[19]=D);let O=D,k;n[20]===_?k=n[21]:(k=_.filter(ie),n[20]=_,n[21]=k);let A=k,j=O,M;n[22]!==A||n[23]!==x||n[24]!==E?(M=[...x,...E,...A],n[22]=A,n[23]=x,n[24]=E,n[25]=M):M=n[25];let N=M,P=pe,F;n[26]===Symbol.for(`react.memo_cache_sentinel`)?(F=[],n[26]=F):F=n[26];let I=F,L=e.inlineContentPadding??e.contentPadding??!1,R=e.blockContentPadding??e.contentPadding??!1,z=re,B;n[27]!==R||n[28]!==L?(B=(0,o.default)(`Toolbox`,{"inline-padding":L,"block-padding":R}),n[27]=R,n[28]=L,n[29]=B):B=n[29];let V;n[30]===j?V=n[31]:(V=!!j.length&&(0,s.jsx)(`div`,{className:`tools top`,children:j.map(z)}),n[30]=j,n[31]=V);let H;n[32]===N?H=n[33]:(H=!!N.length&&(0,s.jsx)(`div`,{className:`tools bottom`,children:N.map(z)}),n[32]=N,n[33]=H);let U;n[34]===P?U=n[35]:(U=!!P.length&&(0,s.jsx)(`div`,{className:`tools left`,children:P.map(z)}),n[34]=P,n[35]=U);let W;n[36]===Symbol.for(`react.memo_cache_sentinel`)?(W=!!I.length&&(0,s.jsx)(`div`,{className:`tools right`,children:I.map(z)}),n[36]=W):W=n[36];let G=p?.className,K;n[37]===G?K=n[38]:(K=(0,o.default)(`content`,G),n[37]=G,n[38]=K);let q=p?.style,J=p?.dataset,Y;n[39]===y?Y=n[40]:(Y=y.map(ne),n[39]=y,n[40]=Y);let X=p?.children,Z;n[41]!==K||n[42]!==q||n[43]!==J||n[44]!==Y||n[45]!==X?(Z=(0,s.jsxs)(`div`,{className:K,style:q,...J,children:[Y,X]}),n[41]=K,n[42]=q,n[43]=J,n[44]=Y,n[45]=X,n[46]=Z):Z=n[46];let Q;n[47]===e.children?Q=n[48]:(Q=(0,s.jsx)(ee.default,{name:`Toolbox`,childName:fe,onChildrenChange:c,compareChild:t.shallowEqual,children:e.children}),n[47]=e.children,n[48]=Q);let $;return n[49]!==B||n[50]!==V||n[51]!==H||n[52]!==U||n[53]!==Z||n[54]!==Q?($=(0,s.jsxs)(`div`,{className:B,children:[V,H,U,W,Z,Q]}),n[49]=B,n[50]=V,n[51]=H,n[52]=U,n[53]=Z,n[54]=Q,n[55]=$):$=n[55],$}function ne(e){return(0,s.jsx)(r.default,{...e},e.id)}function re(e){switch(e.orderedCollectionName){case`Toolbar`:return(0,s.jsx)(i.default,{...e},e.id);case`ButtonGroup`:return(0,s.jsx)(n.default,{...e},e.id);default:return null}}function ie(e){return e.position===`bottom`}function ae(e){return e.position===`top`}function oe(e){return!e.orientation||e.orientation===`horizontal`}function se(e){return e.orientation===`vertical`}function l(e){return e.variant===`floating`}function ce(e){return e.variant===`docked`}function le(e){return e.orderedCollectionName===`ContextMenu`}function ue(e){return e.orderedCollectionName===`ButtonGroup`}function de(e){return e.orderedCollectionName===`Toolbar`}function u(e){return e.orderedCollectionName===`Content`}exports.default=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});require('./style.css');const e=require("../../_virtual/_rolldown/runtime.cjs"),ee=require("../../utils/index.cjs"),te=require("../../components/misc/OrderedCollection/index.cjs"),t=require("../../components/Button/group/render.cjs"),n=require("../../components/ContextMenu/render.cjs"),r=require("../../components/Toolbar/Toolbar.render.cjs");;/* empty css             */let ne=require("react/compiler-runtime"),i=require("classnames");i=e.__toESM(i,1);let re=require("react"),a=require("react/jsx-runtime");function o(e){let t=(0,ne.c)(56),n;t[0]===Symbol.for(`react.memo_cache_sentinel`)?(n=[],t[0]=n):n=t[0];let[r,o]=(0,re.useState)(n),u;t[1]===Symbol.for(`react.memo_cache_sentinel`)?(u=[`Content`,`Toolbar`,`ButtonGroup`,`ContextMenu`],t[1]=u):u=t[1];let pe=u,d;t[2]===r?d=t[3]:(d=r.filter(l).at(0),t[2]=r,t[3]=d);let f=d,p;t[4]===r?p=t[5]:(p=r.filter(c),t[4]=r,t[5]=p);let m=p,h;t[6]===r?h=t[7]:(h=r.filter(s),t[6]=r,t[7]=h);let g=h,_;t[8]===r?_=t[9]:(_=r.filter(fe),t[8]=r,t[9]=_);let v=_,y;t[10]===m?y=t[11]:(y=m.filter(de),t[10]=m,t[11]=y);let b=y,x;t[12]===m?x=t[13]:(x=m.filter(ue),t[12]=m,t[13]=x);let S=x,C;t[14]===S?C=t[15]:(C=S.filter(le),t[14]=S,t[15]=C);let w=C,T;t[16]===S?T=t[17]:(T=S.filter(ce),t[16]=S,t[17]=T);let E=T,D;t[18]===g?D=t[19]:(D=g.filter(se),t[18]=g,t[19]=D);let O=D,k;t[20]===g?k=t[21]:(k=g.filter(oe),t[20]=g,t[21]=k);let A=k,j=O,M;t[22]!==A||t[23]!==b||t[24]!==E?(M=[...b,...E,...A],t[22]=A,t[23]=b,t[24]=E,t[25]=M):M=t[25];let N=M,P=w,F;t[26]===Symbol.for(`react.memo_cache_sentinel`)?(F=[],t[26]=F):F=t[26];let I=F,L=e.inlineContentPadding??e.contentPadding??!1,R=e.blockContentPadding??e.contentPadding??!1,z=ae,B;t[27]!==R||t[28]!==L?(B=(0,i.default)(`Toolbox`,{"inline-padding":L,"block-padding":R}),t[27]=R,t[28]=L,t[29]=B):B=t[29];let V;t[30]===j?V=t[31]:(V=!!j.length&&(0,a.jsx)(`div`,{className:(0,i.default)(`tools top`,{multiple:j.length>1}),children:j.map(z)}),t[30]=j,t[31]=V);let H;t[32]===N?H=t[33]:(H=!!N.length&&(0,a.jsx)(`div`,{className:(0,i.default)(`tools bottom`,{multiple:N.length>1}),children:N.map(z)}),t[32]=N,t[33]=H);let U;t[34]===P?U=t[35]:(U=!!P.length&&(0,a.jsx)(`div`,{className:(0,i.default)(`tools left`,{multiple:P.length>1}),children:P.map(z)}),t[34]=P,t[35]=U);let W;t[36]===Symbol.for(`react.memo_cache_sentinel`)?(W=!!I.length&&(0,a.jsx)(`div`,{className:(0,i.default)(`tools right`,{multiple:I.length>1}),children:I.map(z)}),t[36]=W):W=t[36];let G=f?.className,K;t[37]===G?K=t[38]:(K=(0,i.default)(`content`,G),t[37]=G,t[38]=K);let q=f?.style,J=f?.dataset,Y;t[39]===v?Y=t[40]:(Y=v.map(ie),t[39]=v,t[40]=Y);let X=f?.children,Z;t[41]!==K||t[42]!==q||t[43]!==J||t[44]!==Y||t[45]!==X?(Z=(0,a.jsxs)(`div`,{className:K,style:q,...J,children:[Y,X]}),t[41]=K,t[42]=q,t[43]=J,t[44]=Y,t[45]=X,t[46]=Z):Z=t[46];let Q;t[47]===e.children?Q=t[48]:(Q=(0,a.jsx)(te.default,{name:`Toolbox`,childName:pe,onChildrenChange:o,compareChild:ee.shallowEqual,children:e.children}),t[47]=e.children,t[48]=Q);let $;return t[49]!==B||t[50]!==V||t[51]!==H||t[52]!==U||t[53]!==Z||t[54]!==Q?($=(0,a.jsxs)(`div`,{className:B,children:[V,H,U,W,Z,Q]}),t[49]=B,t[50]=V,t[51]=H,t[52]=U,t[53]=Z,t[54]=Q,t[55]=$):$=t[55],$}function ie(e){return(0,a.jsx)(n.default,{...e},e.id)}function ae(e){switch(e.orderedCollectionName){case`Toolbar`:return(0,a.jsx)(r.default,{...e},e.id);case`ButtonGroup`:return(0,a.jsx)(t.default,{...e},e.id);default:return null}}function oe(e){return e.position===`bottom`}function se(e){return e.position===`top`}function ce(e){return!e.orientation||e.orientation===`horizontal`}function le(e){return e.orientation===`vertical`}function ue(e){return e.variant===`floating`}function de(e){return e.variant===`docked`}function fe(e){return e.orderedCollectionName===`ContextMenu`}function s(e){return e.orderedCollectionName===`ButtonGroup`}function c(e){return e.orderedCollectionName===`Toolbar`}function l(e){return e.orderedCollectionName===`Content`}exports.default=o;

package/dist/layouts/Toolbox/index.js

@@ -4,15 +4,15 @@ import t from "../../components/Button/group/render.js";
 import n from "../../components/ContextMenu/render.js";
 import r from "../../components/Toolbar/Toolbar.render.js";
 import './style.css';/* empty css           */
-import { c as te } from "react/compiler-runtime";
-import i from "classnames";
-import { useState as a } from "react";
+import { c as i } from "react/compiler-runtime";
+import a from "classnames";
+import { useState as te } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region lib/layouts/Toolbox/index.tsx
 function c(t) {
-	let n = te(56), r;
+	let n = i(56), r;
 	n[0] === Symbol.for("react.memo_cache_sentinel") ? (r = [], n[0] = r) : r = n[0];
-	let [c, u] = a(r), d;
+	let [c, u] = te(r), d;
 	n[1] === Symbol.for("react.memo_cache_sentinel") ? (d = [
 		"Content",
 		"Toolbar",
@@ -26,54 +26,54 @@ function c(t) {
 	let h = m, g;
 	n[6] === c ? g = n[7] : (g = c.filter(ue), n[6] = c, n[7] = g);
 	let _ = g, v;
-	n[8] === c ? v = n[9] : (v = c.filter(l), n[8] = c, n[9] = v);
+	n[8] === c ? v = n[9] : (v = c.filter(le), n[8] = c, n[9] = v);
 	let y = v, b;
-	n[10] === h ? b = n[11] : (b = h.filter(le), n[10] = h, n[11] = b);
+	n[10] === h ? b = n[11] : (b = h.filter(ce), n[10] = h, n[11] = b);
 	let x = b, S;
-	n[12] === h ? S = n[13] : (S = h.filter(ce), n[12] = h, n[13] = S);
+	n[12] === h ? S = n[13] : (S = h.filter(l), n[12] = h, n[13] = S);
 	let C = S, w;
 	n[14] === C ? w = n[15] : (w = C.filter(se), n[14] = C, n[15] = w);
-	let T = w, E;
-	n[16] === C ? E = n[17] : (E = C.filter(oe), n[16] = C, n[17] = E);
-	let D = E, O;
-	n[18] === _ ? O = n[19] : (O = _.filter(ae), n[18] = _, n[19] = O);
-	let me = O, k;
+	let me = w, T;
+	n[16] === C ? T = n[17] : (T = C.filter(oe), n[16] = C, n[17] = T);
+	let E = T, D;
+	n[18] === _ ? D = n[19] : (D = _.filter(ae), n[18] = _, n[19] = D);
+	let O = D, k;
 	n[20] === _ ? k = n[21] : (k = _.filter(ie), n[20] = _, n[21] = k);
-	let A = k, j = me, M;
-	n[22] !== A || n[23] !== x || n[24] !== D ? (M = [
+	let A = k, j = O, M;
+	n[22] !== A || n[23] !== x || n[24] !== E ? (M = [
 		...x,
-		...D,
+		...E,
 		...A
-	], n[22] = A, n[23] = x, n[24] = D, n[25] = M) : M = n[25];
-	let N = M, P = T, F;
+	], n[22] = A, n[23] = x, n[24] = E, n[25] = M) : M = n[25];
+	let N = M, P = me, F;
 	n[26] === Symbol.for("react.memo_cache_sentinel") ? (F = [], n[26] = F) : F = n[26];
 	let I = F, L = t.inlineContentPadding ?? t.contentPadding ?? !1, R = t.blockContentPadding ?? t.contentPadding ?? !1, z = re, B;
-	n[27] !== R || n[28] !== L ? (B = i("Toolbox", {
+	n[27] !== R || n[28] !== L ? (B = a("Toolbox", {
 		"inline-padding": L,
 		"block-padding": R
 	}), n[27] = R, n[28] = L, n[29] = B) : B = n[29];
 	let V;
 	n[30] === j ? V = n[31] : (V = !!j.length && /* @__PURE__ */ o("div", {
-		className: "tools top",
+		className: a("tools top", { multiple: j.length > 1 }),
 		children: j.map(z)
 	}), n[30] = j, n[31] = V);
 	let H;
 	n[32] === N ? H = n[33] : (H = !!N.length && /* @__PURE__ */ o("div", {
-		className: "tools bottom",
+		className: a("tools bottom", { multiple: N.length > 1 }),
 		children: N.map(z)
 	}), n[32] = N, n[33] = H);
 	let U;
 	n[34] === P ? U = n[35] : (U = !!P.length && /* @__PURE__ */ o("div", {
-		className: "tools left",
+		className: a("tools left", { multiple: P.length > 1 }),
 		children: P.map(z)
 	}), n[34] = P, n[35] = U);
 	let W;
 	n[36] === Symbol.for("react.memo_cache_sentinel") ? (W = !!I.length && /* @__PURE__ */ o("div", {
-		className: "tools right",
+		className: a("tools right", { multiple: I.length > 1 }),
 		children: I.map(z)
 	}), n[36] = W) : W = n[36];
 	let G = p?.className, K;
-	n[37] === G ? K = n[38] : (K = i("content", G), n[37] = G, n[38] = K);
+	n[37] === G ? K = n[38] : (K = a("content", G), n[37] = G, n[38] = K);
 	let q = p?.style, J = p?.dataset, Y;
 	n[39] === y ? Y = n[40] : (Y = y.map(ne), n[39] = y, n[40] = Y);
 	let X = p?.children, Z;
@@ -126,13 +126,13 @@ function oe(e) {
 function se(e) {
 	return e.orientation === "vertical";
 }
-function ce(e) {
+function l(e) {
 	return e.variant === "floating";
 }
-function le(e) {
+function ce(e) {
 	return e.variant === "docked";
 }
-function l(e) {
+function le(e) {
 	return e.orderedCollectionName === "ContextMenu";
 }
 function ue(e) {

package/dist/layouts/Toolbox/style.css

@@ -1 +1 @@
-.Toolbox{box-sizing:border-box;--default-spacing:var(--md-sys-measurement-space200);--toolbox-tools-top-size:max(var(--toolbox-tools-top-toolbar-size,var(--default-spacing)), var(--toolbox-tools-top-button-group-size,var(--default-spacing)));--toolbox-tools-bottom-size:max(var(--toolbox-tools-bottom-toolbar-size,var(--default-spacing)), var(--toolbox-tools-bottom-button-group-size,var(--default-spacing)));--toolbox-tools-left-size:max(var(--toolbox-tools-left-toolbar-size,var(--default-spacing)));--toolbox-tools-right-size:max(var(--toolbox-tools-right-toolbar-size,var(--default-spacing)));flex:1;justify-content:stretch;align-items:stretch;width:100%;height:100%;display:flex;position:relative}.Toolbox:where(:has(>.tools.top>.Toolbar.floating)){--toolbox-tools-top-toolbar-size:calc(var(--md-comp-toolbar-floating-horizontal-container-height) + var(--md-comp-toolbar-floating-horizontal-container-external-space) + var(--md-sys-measurement-space200))}.Toolbox:where(:has(>.tools.top>.ButtonGroup.connected.extra-small)){--toolbox-tools-top-button-group-size:calc(var(--md-comp-button-group-connected-xsmall-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.top>.ButtonGroup.connected.small)){--toolbox-tools-top-button-group-size:calc(var(--md-comp-button-group-connected-small-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.top>.ButtonGroup.connected.medium)){--toolbox-tools-top-button-group-size:calc(var(--md-comp-button-group-connected-medium-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.top>.ButtonGroup.connected.large)){--toolbox-tools-top-button-group-size:calc(var(--md-comp-button-group-connected-large-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.top>.ButtonGroup.connected.extra-large)){--toolbox-tools-top-button-group-size:calc(var(--md-comp-button-group-connected-xlarge-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.bottom>.Toolbar.docked)){--toolbox-tools-bottom-toolbar-size:calc(var(--md-comp-toolbar-docked-container-height) + var(--default-spacing))}.Toolbox:where(:has(>.tools.bottom>.Toolbar.docked))>.content{padding-bottom:var(--md-comp-toolbar-docked-container-height)}.Toolbox:where(:has(>.tools.bottom>.Toolbar.floating)){--toolbox-tools-bottom-toolbar-size:calc(var(--md-comp-toolbar-floating-horizontal-container-height) + var(--md-comp-toolbar-floating-horizontal-container-external-space) + var(--default-spacing))}.Toolbox:where(:has(>.tools.bottom>.ButtonGroup.connected.extra-small)){--toolbox-tools-bottom-button-group-size:calc(var(--md-comp-button-group-connected-xsmall-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.bottom>.ButtonGroup.connected.small)){--toolbox-tools-bottom-button-group-size:calc(var(--md-comp-button-group-connected-small-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.bottom>.ButtonGroup.connected.medium)){--toolbox-tools-bottom-button-group-size:calc(var(--md-comp-button-group-connected-medium-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.bottom>.ButtonGroup.connected.large)){--toolbox-tools-bottom-button-group-size:calc(var(--md-comp-button-group-connected-large-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.bottom>.ButtonGroup.connected.extra-large)){--toolbox-tools-bottom-button-group-size:calc(var(--md-comp-button-group-connected-xlarge-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.left>.Toolbar.floating)){--toolbox-tools-left-toolbar-size:calc(var(--md-comp-toolbar-floating-vertical-container-width) + var(--md-comp-toolbar-floating-vertical-container-external-space) + var(--default-spacing))}.Toolbox:where(:has(>.tools.right>.Toolbar.floating)){--toolbox-tools-right-toolbar-size:calc(var(--md-comp-toolbar-floating-vertical-container-width) + var(--md-comp-toolbar-floating-vertical-container-external-space) + var(--default-spacing))}.Toolbox>.tools{z-index:4;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute}.Toolbox>.tools>*{pointer-events:initial}.Toolbox>.tools.top{top:0;left:0;right:0}.Toolbox>.tools.top>.Toolbar.floating{margin-top:var(--md-comp-toolbar-floating-horizontal-container-external-space)}.Toolbox>.tools.top>.ButtonGroup{margin-top:var(--default-spacing)}.Toolbox>.tools.top>.ButtonGroup>.container>.ButtonContainer{min-height:unset}.Toolbox>.tools.bottom{bottom:0;left:0;right:0}.Toolbox>.tools.bottom:not(:has(>.Toolbar.docked),:has(>.ButtonGroup)){padding-inline:var(--default-spacing)}.Toolbox>.tools.bottom>.Toolbar.docked{flex:1}.Toolbox>.tools.bottom>.Toolbar.floating{margin-bottom:var(--md-comp-toolbar-floating-horizontal-container-external-space)}.Toolbox>.tools.bottom>.ButtonGroup{margin-bottom:var(--md-sys-measurement-space200)}.Toolbox>.tools.bottom>.ButtonGroup>.container>.ButtonContainer{min-height:unset}.Toolbox>.tools.left{padding-block:var(--md-sys-measurement-space300);top:0;bottom:0;left:0}.Toolbox>.tools.left>.Toolbar.floating{margin-left:var(--md-comp-toolbar-floating-vertical-container-external-space)}.Toolbox>.tools.right{padding-block:var(--md-sys-measurement-space300);top:0;bottom:0;right:0}.Toolbox>.tools.right>.Toolbar.floating{margin-right:var(--md-comp-toolbar-floating-vertical-container-external-space)}.Toolbox.inline-padding>.content{padding-inline:var(--toolbox-tools-left-size) var(--toolbox-tools-right-size)}.Toolbox.block-padding>.content{padding-block:var(--toolbox-tools-top-size) var(--toolbox-tools-bottom-size)}.Toolbox>.content{flex:1;overflow:auto}.Toolbox>.content>*{--toolbox-tools-top-size:initial;--toolbox-tools-bottom-size:initial;--toolbox-tools-left-size:initial;--toolbox-tools-right-size:initial;--toolbox-tools-top-toolbar-size:initial;--toolbox-tools-top-button-group-size:initial;--toolbox-tools-bottom-toolbar-size:initial;--toolbox-tools-bottom-button-group-size:initial;--toolbox-tools-left-toolbar-size:initial;--toolbox-tools-right-toolbar-size:initial}
+.Toolbox{box-sizing:border-box;--default-spacing:var(--md-sys-measurement-space200);--toolbox-tools-top-size:max(var(--toolbox-tools-top-toolbar-size,var(--default-spacing)), var(--toolbox-tools-top-button-group-size,var(--default-spacing)));--toolbox-tools-bottom-size:max(var(--toolbox-tools-bottom-toolbar-size,var(--default-spacing)), var(--toolbox-tools-bottom-button-group-size,var(--default-spacing)));--toolbox-tools-left-size:max(var(--toolbox-tools-left-toolbar-size,var(--default-spacing)));--toolbox-tools-right-size:max(var(--toolbox-tools-right-toolbar-size,var(--default-spacing)));flex:1;justify-content:stretch;align-items:stretch;width:100%;height:100%;display:flex;position:relative}.Toolbox:where(:has(>.tools.top>.Toolbar.floating)){--toolbox-tools-top-toolbar-size:calc(var(--md-comp-toolbar-floating-horizontal-container-height) + var(--md-comp-toolbar-floating-horizontal-container-external-space) + var(--md-sys-measurement-space200))}.Toolbox:where(:has(>.tools.top>.ButtonGroup.connected.extra-small)){--toolbox-tools-top-button-group-size:calc(var(--md-comp-button-group-connected-xsmall-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.top>.ButtonGroup.connected.small)){--toolbox-tools-top-button-group-size:calc(var(--md-comp-button-group-connected-small-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.top>.ButtonGroup.connected.medium)){--toolbox-tools-top-button-group-size:calc(var(--md-comp-button-group-connected-medium-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.top>.ButtonGroup.connected.large)){--toolbox-tools-top-button-group-size:calc(var(--md-comp-button-group-connected-large-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.top>.ButtonGroup.connected.extra-large)){--toolbox-tools-top-button-group-size:calc(var(--md-comp-button-group-connected-xlarge-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.bottom>.Toolbar.docked)){--toolbox-tools-bottom-toolbar-size:calc(var(--md-comp-toolbar-docked-container-height) + var(--default-spacing))}.Toolbox:where(:has(>.tools.bottom>.Toolbar.docked))>.content{padding-bottom:var(--md-comp-toolbar-docked-container-height)}.Toolbox:where(:has(>.tools.bottom>.Toolbar.floating)){--toolbox-tools-bottom-toolbar-size:calc(var(--md-comp-toolbar-floating-horizontal-container-height) + var(--md-comp-toolbar-floating-horizontal-container-external-space) + var(--default-spacing))}.Toolbox:where(:has(>.tools.bottom>.ButtonGroup.connected.extra-small)){--toolbox-tools-bottom-button-group-size:calc(var(--md-comp-button-group-connected-xsmall-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.bottom>.ButtonGroup.connected.small)){--toolbox-tools-bottom-button-group-size:calc(var(--md-comp-button-group-connected-small-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.bottom>.ButtonGroup.connected.medium)){--toolbox-tools-bottom-button-group-size:calc(var(--md-comp-button-group-connected-medium-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.bottom>.ButtonGroup.connected.large)){--toolbox-tools-bottom-button-group-size:calc(var(--md-comp-button-group-connected-large-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.bottom>.ButtonGroup.connected.extra-large)){--toolbox-tools-bottom-button-group-size:calc(var(--md-comp-button-group-connected-xlarge-container-height) + var(--default-spacing) * 2)}.Toolbox:where(:has(>.tools.left>.Toolbar.floating)){--toolbox-tools-left-toolbar-size:calc(var(--md-comp-toolbar-floating-vertical-container-width) + var(--md-comp-toolbar-floating-vertical-container-external-space) + var(--default-spacing))}.Toolbox:where(:has(>.tools.right>.Toolbar.floating)){--toolbox-tools-right-toolbar-size:calc(var(--md-comp-toolbar-floating-vertical-container-width) + var(--md-comp-toolbar-floating-vertical-container-external-space) + var(--default-spacing))}.Toolbox>.tools{z-index:4;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute}.Toolbox>.tools.multiple{justify-content:space-between}.Toolbox>.tools>*{pointer-events:initial}.Toolbox>.tools.top{padding-inline:var(--md-sys-measurement-space200);top:0;left:0;right:0}.Toolbox>.tools.top>.Toolbar.floating{margin-top:var(--md-comp-toolbar-floating-horizontal-container-external-space)}.Toolbox>.tools.top>.ButtonGroup{margin-top:var(--default-spacing)}.Toolbox>.tools.top>.ButtonGroup>.container>.ButtonContainer{min-height:unset}.Toolbox>.tools.bottom{padding-inline:var(--md-sys-measurement-space200);bottom:0;left:0;right:0}.Toolbox>.tools.bottom:not(:has(>.Toolbar.docked),:has(>.ButtonGroup)){padding-inline:var(--default-spacing)}.Toolbox>.tools.bottom>.Toolbar.docked{flex:1}.Toolbox>.tools.bottom>.Toolbar.floating{margin-bottom:var(--md-comp-toolbar-floating-horizontal-container-external-space)}.Toolbox>.tools.bottom>.ButtonGroup{margin-bottom:var(--md-sys-measurement-space200)}.Toolbox>.tools.bottom>.ButtonGroup>.container>.ButtonContainer{min-height:unset}.Toolbox>.tools.left{padding-block:var(--md-sys-measurement-space300);top:0;bottom:0;left:0}.Toolbox>.tools.left>.Toolbar.floating{margin-left:var(--md-comp-toolbar-floating-vertical-container-external-space)}.Toolbox>.tools.right{padding-block:var(--md-sys-measurement-space300);top:0;bottom:0;right:0}.Toolbox>.tools.right>.Toolbar.floating{margin-right:var(--md-comp-toolbar-floating-vertical-container-external-space)}.Toolbox.inline-padding>.content{padding-inline:var(--toolbox-tools-left-size) var(--toolbox-tools-right-size)}.Toolbox.block-padding>.content{padding-block:var(--toolbox-tools-top-size) var(--toolbox-tools-bottom-size)}.Toolbox>.content{flex:1;overflow:auto}.Toolbox>.content>*{--toolbox-tools-top-size:initial;--toolbox-tools-bottom-size:initial;--toolbox-tools-left-size:initial;--toolbox-tools-right-size:initial;--toolbox-tools-top-toolbar-size:initial;--toolbox-tools-top-button-group-size:initial;--toolbox-tools-bottom-toolbar-size:initial;--toolbox-tools-bottom-button-group-size:initial;--toolbox-tools-left-toolbar-size:initial;--toolbox-tools-right-toolbar-size:initial}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-material-design",
-	"version": "0.5.3",
+	"version": "0.5.4",
 	"type": "module",
 	"license": "MIT",
 	"author": {
@@ -41,13 +41,13 @@
 		"babel-plugin-react-compiler": "^1.0.0",
 		"commander": "^15.0.0",
 		"globals": "^17.13.0",
-		"oxlint": "^1.88.0",
-		"sass": "^1.105.2",
+		"oxlint": "^1.89.0",
+		"sass": "^1.106.1",
 		"sass-alias": "^2.0.1",
 		"tsx": "^4.23.15",
 		"typescript": "^6.0.3",
 		"unplugin-dts": "^1.1.2",
-		"vite": "^8.3.4",
+		"vite": "^8.3.5",
 		"vite-plugin-lib-inject-css": "^2.2.2",
 		"vite-tsconfig-paths": "^6.1.1"
 	},