react-material-design 0.0.0-stage → 0.5.0

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

@@ -0,0 +1,100 @@
+import { shallowEqual as e } from "../../../utils/index.js";
+import t from "../../misc/OrderedCollection/index.js";
+import n from "../../misc/Transitionable/index.js";
+import { getComponentSizeName as r } from "../../types.js";
+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";
+//#region lib/components/Button/group/render.tsx
+var h = [
+	"type",
+	"align",
+	"size",
+	"shape",
+	"selectable",
+	"selected",
+	"onSelected",
+	"required",
+	"requiredMessage",
+	"children"
+];
+function g(e) {
+	let t = { ...e };
+	return h.forEach((e) => delete t[e]), t;
+}
+function _(e) {
+	return typeof e == "object" && e?.selectable;
+}
+var v = s(null), y = () => c(v);
+function b(s) {
+	let { onSelected: c } = s, h = u(), [y, b] = f([]), [x, S] = f(), [C, w] = f([]), T = d(() => ["Button", "IconButton"], []), E = {}, D = d(() => ({
+		size: s.size,
+		selectable: !!s.selectable,
+		required: !!(s.selectable && s.required),
+		get selected() {
+			return y.reduce((e, t) => e.set(t.id, C.includes(t.id)), /* @__PURE__ */ new Map());
+		},
+		onSelected: (e, t) => {
+			let n;
+			s.selectable && (S(void 0), s.selectable === "single" ? (n = t ? [e] : [], c?.(t ? e : void 0)) : (n = [...C], t ? n.push(e) : n = n.filter((t) => t !== e), c?.(n)), w(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")));
+		}
+	}), [
+		y,
+		c,
+		s.required,
+		s.selectable,
+		s.size,
+		s.type,
+		C
+	]);
+	return l(() => {
+		s.selectable && (s.selectable === "single" ? w(s.selected ? [s.selected] : []) : w(s.selected ?? []));
+	}, [s.selectable, s.selected]), E.ButtonGroup = !0, E[s.type ?? "standard"] = !0, s.type !== "connected" && (E["align-" + (s.align ?? "left")] = !0), E[s.shape ?? "round"] = !0, E[r(s.size)] = !0, _(s) && (E.selectable = !0, E[s.selectable] = !0), /* @__PURE__ */ m("div", {
+		...g(s),
+		className: o(E, s.className),
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: "container",
+				children: /* @__PURE__ */ m(v, {
+					value: D,
+					children: [y.map((e) => {
+						switch (e.orderedCollectionName) {
+							case "Button": return /* @__PURE__ */ p(a, { ...e }, e.id);
+							case "IconButton": return /* @__PURE__ */ p(i, { ...e }, e.id);
+						}
+					}), /* @__PURE__ */ p(t, {
+						childName: T,
+						onChildrenChange: b,
+						compareChild: e,
+						children: s.children
+					})]
+				})
+			}),
+			s.selectable && s.required && /* @__PURE__ */ p(n, {
+				value: x,
+				className: "error"
+			}),
+			/* @__PURE__ */ p("div", {
+				style: d(() => ({ display: "none" }), []),
+				children: s.selectable && s.required && y.map((e, t) => /* @__PURE__ */ p("input", {
+					type: "radio",
+					name: `group_${h}`,
+					required: !t && !C.length,
+					defaultChecked: C.includes(e.id),
+					onInvalid: (e) => {
+						S((_(s) ? s.requiredMessage : void 0) ?? e.currentTarget.validationMessage), e.preventDefault();
+					}
+				}, e.id))
+			})
+		]
+	});
+}
+//#endregion
+export { v as ButtonGroupContext, b as default, y as useButtonGroupContext };

package/dist/components/Button/group/style.css

@@ -0,0 +1 @@
+.ButtonGroup.standard>.container{gap:inherit;display:flex}.ButtonGroup.standard.align-left>.container{justify-content:left}.ButtonGroup.standard.align-center>.container{justify-content:center}.ButtonGroup.standard.align-right>.container{justify-content:right}.ButtonGroup.standard.round>.container>.ButtonContainer>.CommonButton.disabled:not(.selected){border-radius:var(--md-comp-button-container-shape-round)}.ButtonGroup.standard.round>.container>.ButtonContainer>.CommonButton.disabled.selected{border-radius:var(--md-comp-button-selected-container-shape-round)}.ButtonGroup.standard.round>.container>.ButtonContainer>.CommonButton:not(.disabled,:active,.selected){border-radius:var(--md-comp-button-container-shape-round)}.ButtonGroup.standard.round>.container>.ButtonContainer>.CommonButton:not(.disabled,:active).selected{border-radius:var(--md-comp-button-selected-container-shape-round)}.ButtonGroup.standard.square>.container>.ButtonContainer>.CommonButton.disabled:not(.selected){border-radius:var(--md-comp-button-container-shape-square)}.ButtonGroup.standard.square>.container>.ButtonContainer>.CommonButton.disabled.selected{border-radius:var(--md-comp-button-selected-container-shape-square)}.ButtonGroup.standard.square>.container>.ButtonContainer>.CommonButton:not(.disabled,:active,.selected){border-radius:var(--md-comp-button-container-shape-square)}.ButtonGroup.standard.square>.container>.ButtonContainer>.CommonButton:not(.disabled,:active).selected{border-radius:var(--md-comp-button-selected-container-shape-square)}.ButtonGroup.standard>.container>.ButtonContainer>.CommonButton:active{border-radius:var(--md-comp-button-pressed-container-shape)}.ButtonGroup.standard.extra-small{--md-comp-button-container-height:var(--md-comp-button-group-standard-xsmall-container-height);--md-comp-icon-button-container-height:var(--md-comp-button-group-standard-xsmall-container-height);gap:var(--md-comp-button-group-standard-xsmall-between-space)}.ButtonGroup.standard.small{--md-comp-button-container-height:var(--md-comp-button-group-standard-small-container-height);--md-comp-icon-button-container-height:var(--md-comp-button-group-standard-small-container-height);gap:var(--md-comp-button-group-standard-small-between-space)}.ButtonGroup.standard.medium{--md-comp-button-container-height:var(--md-comp-button-group-standard-medium-container-height);--md-comp-icon-button-container-height:var(--md-comp-button-group-standard-medium-container-height);gap:var(--md-comp-button-group-standard-medium-between-space)}.ButtonGroup.standard.large{--md-comp-button-container-height:var(--md-comp-button-group-standard-large-container-height);--md-comp-icon-button-container-height:var(--md-comp-button-group-standard-large-container-height);gap:var(--md-comp-button-group-standard-large-between-space)}.ButtonGroup.standard.extra-large{--md-comp-button-container-height:var(--md-comp-button-group-standard-xlarge-container-height);--md-comp-icon-button-container-height:var(--md-comp-button-group-standard-xlarge-container-height);gap:var(--md-comp-button-group-standard-xlarge-between-space)}.ButtonGroup.connected{gap:var(--md-comp-button-group-connected-between-space);width:fit-content}.ButtonGroup.connected>.container{gap:inherit;display:flex}.ButtonGroup.connected.round>.container>.ButtonContainer:first-child>.CommonButton{border-top-left-radius:calc(var(--md-comp-button-container-height) / 2);border-bottom-left-radius:calc(var(--md-comp-button-container-height) / 2)}.ButtonGroup.connected.round>.container>.ButtonContainer:nth-last-child(2)>.CommonButton{border-top-right-radius:calc(var(--md-comp-button-container-height) / 2);border-bottom-right-radius:calc(var(--md-comp-button-container-height) / 2)}.ButtonGroup.connected>.container>.ButtonContainer>.CommonButton{flex:1;flex-basis:fit-content;min-width:48px}.ButtonGroup.connected>.container>.ButtonContainer>.CommonButton:not(.selected,:active){border-top-left-radius:var(--md-comp-button-group-connected-inner-corner-corner-size);border-bottom-left-radius:var(--md-comp-button-group-connected-inner-corner-corner-size);border-top-right-radius:var(--md-comp-button-group-connected-inner-corner-corner-size);border-bottom-right-radius:var(--md-comp-button-group-connected-inner-corner-corner-size)}.ButtonGroup.connected>.container>.ButtonContainer>.CommonButton.selected:not(:active){border-top-left-radius:var(--md-comp-button-group-connected-selected-inner-corner-corner-size);border-bottom-left-radius:var(--md-comp-button-group-connected-selected-inner-corner-corner-size);border-top-right-radius:var(--md-comp-button-group-connected-selected-inner-corner-corner-size);border-bottom-right-radius:var(--md-comp-button-group-connected-selected-inner-corner-corner-size)}.ButtonGroup.connected>.container>.ButtonContainer>.CommonButton:active{border-top-left-radius:var(--md-comp-button-group-connected-pressed-inner-corner-corner-size);border-bottom-left-radius:var(--md-comp-button-group-connected-pressed-inner-corner-corner-size);border-top-right-radius:var(--md-comp-button-group-connected-pressed-inner-corner-corner-size);border-bottom-right-radius:var(--md-comp-button-group-connected-pressed-inner-corner-corner-size)}.ButtonGroup.connected.extra-small{--md-comp-button-group-connected-inner-corner-corner-size:var(--md-comp-button-group-connected-xsmall-inner-corner-corner-size);--md-comp-button-group-connected-selected-inner-corner-corner-size:var(--md-comp-button-group-connected-xsmall-selected-inner-corner-corner-size);--md-comp-button-group-connected-pressed-inner-corner-corner-size:var(--md-comp-button-group-connected-xsmall-pressed-inner-corner-corner-size);--md-comp-button-group-connected-between-space:var(--md-comp-button-group-connected-xsmall-between-space);--md-comp-button-container-height:var(--md-comp-button-group-connected-xsmall-container-height);--md-comp-icon-button-container-height:var(--md-comp-button-group-connected-xsmall-container-height)}.ButtonGroup.connected.small{--md-comp-button-group-connected-inner-corner-corner-size:var(--md-comp-button-group-connected-small-inner-corner-corner-size);--md-comp-button-group-connected-selected-inner-corner-corner-size:var(--md-comp-button-group-connected-small-selected-inner-corner-corner-size);--md-comp-button-group-connected-pressed-inner-corner-corner-size:var(--md-comp-button-group-connected-small-pressed-inner-corner-corner-size);--md-comp-button-group-connected-between-space:var(--md-comp-button-group-connected-small-between-space);--md-comp-button-container-height:var(--md-comp-button-group-connected-small-container-height);--md-comp-icon-button-container-height:var(--md-comp-button-group-connected-small-container-height)}.ButtonGroup.connected.medium{--md-comp-button-group-connected-inner-corner-corner-size:var(--md-comp-button-group-connected-medium-inner-corner-corner-size);--md-comp-button-group-connected-selected-inner-corner-corner-size:var(--md-comp-button-group-connected-medium-selected-inner-corner-corner-size);--md-comp-button-group-connected-pressed-inner-corner-corner-size:var(--md-comp-button-group-connected-medium-pressed-inner-corner-corner-size);--md-comp-button-group-connected-between-space:var(--md-comp-button-group-connected-medium-between-space);--md-comp-button-container-height:var(--md-comp-button-group-connected-medium-container-height);--md-comp-icon-button-container-height:var(--md-comp-button-group-connected-medium-container-height)}.ButtonGroup.connected.large{--md-comp-button-group-connected-inner-corner-corner-size:var(--md-comp-button-group-connected-large-inner-corner-corner-size);--md-comp-button-group-connected-selected-inner-corner-corner-size:var(--md-comp-button-group-connected-large-selected-inner-corner-corner-size);--md-comp-button-group-connected-pressed-inner-corner-corner-size:var(--md-comp-button-group-connected-large-pressed-inner-corner-corner-size);--md-comp-button-group-connected-between-space:var(--md-comp-button-group-connected-large-between-space);--md-comp-button-container-height:var(--md-comp-button-group-connected-large-container-height);--md-comp-icon-button-container-height:var(--md-comp-button-group-connected-large-container-height)}.ButtonGroup.connected.extra-large{--md-comp-button-group-connected-inner-corner-corner-size:var(--md-comp-button-group-connected-xlarge-inner-corner-corner-size);--md-comp-button-group-connected-selected-inner-corner-corner-size:var(--md-comp-button-group-connected-xlarge-selected-inner-corner-corner-size);--md-comp-button-group-connected-pressed-inner-corner-corner-size:var(--md-comp-button-group-connected-xlarge-pressed-inner-corner-corner-size);--md-comp-button-group-connected-between-space:var(--md-comp-button-group-connected-xlarge-between-space);--md-comp-button-container-height:var(--md-comp-button-group-connected-xlarge-container-height);--md-comp-icon-button-container-height:var(--md-comp-button-group-connected-xlarge-container-height)}.ButtonGroup.extra-small{--md-comp-button-label-text-font:var(--md-comp-button-xsmall-label-text-font);--md-comp-button-label-text-weight:var(--md-comp-button-xsmall-label-text-weight);--md-comp-button-label-text-size:var(--md-comp-button-xsmall-label-text-size);--md-comp-button-label-text-tracking:var(--md-comp-button-xsmall-label-text-tracking);--md-comp-button-label-text-line-height:var(--md-comp-button-xsmall-label-text-line-height);--md-comp-button-label-text-wght:var(--md-comp-button-xsmall-label-text-wght);--md-comp-button-label-text-grad:var(--md-comp-button-xsmall-label-text-grad);--md-comp-button-label-text-wdth:var(--md-comp-button-xsmall-label-text-wdth);--md-comp-button-label-text-rond:var(--md-comp-button-xsmall-label-text-rond);--md-comp-button-label-text-opsz:var(--md-comp-button-xsmall-label-text-opsz);--md-comp-button-label-text-crsv:var(--md-comp-button-xsmall-label-text-crsv);--md-comp-button-label-text-slnt:var(--md-comp-button-xsmall-label-text-slnt);--md-comp-button-label-text-fill:var(--md-comp-button-xsmall-label-text-fill);--md-comp-button-label-text-hexp:var(--md-comp-button-xsmall-label-text-hexp);--md-comp-button-icon-size:var(--md-comp-button-xsmall-icon-size);--md-comp-button-container-shape-round:var(--md-comp-button-xsmall-container-shape-round);--md-comp-button-container-shape-square:var(--md-comp-button-xsmall-container-shape-square);--md-comp-button-pressed-container-shape:var(--md-comp-button-xsmall-pressed-container-shape);--md-comp-button-selected-container-shape-round:var(--md-comp-button-xsmall-selected-container-shape-round);--md-comp-button-selected-container-shape-square:var(--md-comp-button-xsmall-selected-container-shape-square);--md-comp-button-leading-space:var(--md-comp-button-xsmall-leading-space);--md-comp-button-icon-label-space:var(--md-comp-button-xsmall-icon-label-space);--md-comp-button-trailing-space:var(--md-comp-button-xsmall-trailing-space);--md-comp-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-button-xsmall-pressed-container-corner-size-motion-spring-duration);--md-comp-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-button-xsmall-pressed-container-corner-size-motion-spring-easing);--md-comp-icon-button-icon-size:var(--md-comp-icon-button-xsmall-icon-size);--md-comp-icon-button-container-shape-round:var(--md-comp-icon-button-xsmall-container-shape-round);--md-comp-icon-button-container-shape-square:var(--md-comp-icon-button-xsmall-container-shape-square);--md-comp-icon-button-pressed-container-shape:var(--md-comp-icon-button-xsmall-pressed-container-shape);--md-comp-icon-button-selected-container-shape-round:var(--md-comp-icon-button-xsmall-selected-container-shape-round);--md-comp-icon-button-selected-container-shape-square:var(--md-comp-icon-button-xsmall-selected-container-shape-square);--md-comp-icon-button-default-leading-space:var(--md-comp-icon-button-xsmall-default-leading-space);--md-comp-icon-button-default-trailing-space:var(--md-comp-icon-button-xsmall-default-trailing-space);--md-comp-icon-button-narrow-leading-space:var(--md-comp-icon-button-xsmall-narrow-leading-space);--md-comp-icon-button-narrow-trailing-space:var(--md-comp-icon-button-xsmall-narrow-trailing-space);--md-comp-icon-button-wide-leading-space:var(--md-comp-icon-button-xsmall-wide-leading-space);--md-comp-icon-button-wide-trailing-space:var(--md-comp-icon-button-xsmall-wide-trailing-space);--md-comp-icon-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-icon-button-xsmall-pressed-container-corner-size-motion-spring-duration);--md-comp-icon-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-icon-button-xsmall-pressed-container-corner-size-motion-spring-easing)}.ButtonGroup.small{--md-comp-button-label-text-font:var(--md-comp-button-small-label-text-font);--md-comp-button-label-text-weight:var(--md-comp-button-small-label-text-weight);--md-comp-button-label-text-size:var(--md-comp-button-small-label-text-size);--md-comp-button-label-text-tracking:var(--md-comp-button-small-label-text-tracking);--md-comp-button-label-text-line-height:var(--md-comp-button-small-label-text-line-height);--md-comp-button-label-text-wght:var(--md-comp-button-small-label-text-wght);--md-comp-button-label-text-grad:var(--md-comp-button-small-label-text-grad);--md-comp-button-label-text-wdth:var(--md-comp-button-small-label-text-wdth);--md-comp-button-label-text-rond:var(--md-comp-button-small-label-text-rond);--md-comp-button-label-text-opsz:var(--md-comp-button-small-label-text-opsz);--md-comp-button-label-text-crsv:var(--md-comp-button-small-label-text-crsv);--md-comp-button-label-text-slnt:var(--md-comp-button-small-label-text-slnt);--md-comp-button-label-text-fill:var(--md-comp-button-small-label-text-fill);--md-comp-button-label-text-hexp:var(--md-comp-button-small-label-text-hexp);--md-comp-button-icon-size:var(--md-comp-button-small-icon-size);--md-comp-button-container-shape-round:var(--md-comp-button-small-container-shape-round);--md-comp-button-container-shape-square:var(--md-comp-button-small-container-shape-square);--md-comp-button-pressed-container-shape:var(--md-comp-button-small-pressed-container-shape);--md-comp-button-selected-container-shape-round:var(--md-comp-button-small-selected-container-shape-round);--md-comp-button-selected-container-shape-square:var(--md-comp-button-small-selected-container-shape-square);--md-comp-button-leading-space:var(--md-comp-button-small-leading-space);--md-comp-button-icon-label-space:var(--md-comp-button-small-icon-label-space);--md-comp-button-trailing-space:var(--md-comp-button-small-trailing-space);--md-comp-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-button-small-pressed-container-corner-size-motion-spring-duration);--md-comp-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-button-small-pressed-container-corner-size-motion-spring-easing);--md-comp-icon-button-icon-size:var(--md-comp-icon-button-small-icon-size);--md-comp-icon-button-container-shape-round:var(--md-comp-icon-button-small-container-shape-round);--md-comp-icon-button-container-shape-square:var(--md-comp-icon-button-small-container-shape-square);--md-comp-icon-button-pressed-container-shape:var(--md-comp-icon-button-small-pressed-container-shape);--md-comp-icon-button-selected-container-shape-round:var(--md-comp-icon-button-small-selected-container-shape-round);--md-comp-icon-button-selected-container-shape-square:var(--md-comp-icon-button-small-selected-container-shape-square);--md-comp-icon-button-default-leading-space:var(--md-comp-icon-button-small-default-leading-space);--md-comp-icon-button-default-trailing-space:var(--md-comp-icon-button-small-default-trailing-space);--md-comp-icon-button-narrow-leading-space:var(--md-comp-icon-button-small-narrow-leading-space);--md-comp-icon-button-narrow-trailing-space:var(--md-comp-icon-button-small-narrow-trailing-space);--md-comp-icon-button-wide-leading-space:var(--md-comp-icon-button-small-wide-leading-space);--md-comp-icon-button-wide-trailing-space:var(--md-comp-icon-button-small-wide-trailing-space);--md-comp-icon-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-icon-button-small-pressed-container-corner-size-motion-spring-duration);--md-comp-icon-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-icon-button-small-pressed-container-corner-size-motion-spring-easing)}.ButtonGroup.medium{--md-comp-button-label-text-font:var(--md-comp-button-medium-label-text-font);--md-comp-button-label-text-weight:var(--md-comp-button-medium-label-text-weight);--md-comp-button-label-text-size:var(--md-comp-button-medium-label-text-size);--md-comp-button-label-text-tracking:var(--md-comp-button-medium-label-text-tracking);--md-comp-button-label-text-line-height:var(--md-comp-button-medium-label-text-line-height);--md-comp-button-label-text-wght:var(--md-comp-button-medium-label-text-wght);--md-comp-button-label-text-grad:var(--md-comp-button-medium-label-text-grad);--md-comp-button-label-text-wdth:var(--md-comp-button-medium-label-text-wdth);--md-comp-button-label-text-rond:var(--md-comp-button-medium-label-text-rond);--md-comp-button-label-text-opsz:var(--md-comp-button-medium-label-text-opsz);--md-comp-button-label-text-crsv:var(--md-comp-button-medium-label-text-crsv);--md-comp-button-label-text-slnt:var(--md-comp-button-medium-label-text-slnt);--md-comp-button-label-text-fill:var(--md-comp-button-medium-label-text-fill);--md-comp-button-label-text-hexp:var(--md-comp-button-medium-label-text-hexp);--md-comp-button-icon-size:var(--md-comp-button-medium-icon-size);--md-comp-button-container-shape-round:var(--md-comp-button-medium-container-shape-round);--md-comp-button-container-shape-square:var(--md-comp-button-medium-container-shape-square);--md-comp-button-pressed-container-shape:var(--md-comp-button-medium-pressed-container-shape);--md-comp-button-selected-container-shape-round:var(--md-comp-button-medium-selected-container-shape-round);--md-comp-button-selected-container-shape-square:var(--md-comp-button-medium-selected-container-shape-square);--md-comp-button-leading-space:var(--md-comp-button-medium-leading-space);--md-comp-button-icon-label-space:var(--md-comp-button-medium-icon-label-space);--md-comp-button-trailing-space:var(--md-comp-button-medium-trailing-space);--md-comp-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-button-medium-pressed-container-corner-size-motion-spring-duration);--md-comp-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-button-medium-pressed-container-corner-size-motion-spring-easing);--md-comp-icon-button-icon-size:var(--md-comp-icon-button-medium-icon-size);--md-comp-icon-button-container-shape-round:var(--md-comp-icon-button-medium-container-shape-round);--md-comp-icon-button-container-shape-square:var(--md-comp-icon-button-medium-container-shape-square);--md-comp-icon-button-pressed-container-shape:var(--md-comp-icon-button-medium-pressed-container-shape);--md-comp-icon-button-selected-container-shape-round:var(--md-comp-icon-button-medium-selected-container-shape-round);--md-comp-icon-button-selected-container-shape-square:var(--md-comp-icon-button-medium-selected-container-shape-square);--md-comp-icon-button-default-leading-space:var(--md-comp-icon-button-medium-default-leading-space);--md-comp-icon-button-default-trailing-space:var(--md-comp-icon-button-medium-default-trailing-space);--md-comp-icon-button-narrow-leading-space:var(--md-comp-icon-button-medium-narrow-leading-space);--md-comp-icon-button-narrow-trailing-space:var(--md-comp-icon-button-medium-narrow-trailing-space);--md-comp-icon-button-wide-leading-space:var(--md-comp-icon-button-medium-wide-leading-space);--md-comp-icon-button-wide-trailing-space:var(--md-comp-icon-button-medium-wide-trailing-space);--md-comp-icon-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-icon-button-medium-pressed-container-corner-size-motion-spring-duration);--md-comp-icon-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-icon-button-medium-pressed-container-corner-size-motion-spring-easing)}.ButtonGroup.large{--md-comp-button-label-text-font:var(--md-comp-button-large-label-text-font);--md-comp-button-label-text-weight:var(--md-comp-button-large-label-text-weight);--md-comp-button-label-text-size:var(--md-comp-button-large-label-text-size);--md-comp-button-label-text-tracking:var(--md-comp-button-large-label-text-tracking);--md-comp-button-label-text-line-height:var(--md-comp-button-large-label-text-line-height);--md-comp-button-label-text-wght:var(--md-comp-button-large-label-text-wght);--md-comp-button-label-text-grad:var(--md-comp-button-large-label-text-grad);--md-comp-button-label-text-wdth:var(--md-comp-button-large-label-text-wdth);--md-comp-button-label-text-rond:var(--md-comp-button-large-label-text-rond);--md-comp-button-label-text-opsz:var(--md-comp-button-large-label-text-opsz);--md-comp-button-label-text-crsv:var(--md-comp-button-large-label-text-crsv);--md-comp-button-label-text-slnt:var(--md-comp-button-large-label-text-slnt);--md-comp-button-label-text-fill:var(--md-comp-button-large-label-text-fill);--md-comp-button-label-text-hexp:var(--md-comp-button-large-label-text-hexp);--md-comp-button-icon-size:var(--md-comp-button-large-icon-size);--md-comp-button-container-shape-round:var(--md-comp-button-large-container-shape-round);--md-comp-button-container-shape-square:var(--md-comp-button-large-container-shape-square);--md-comp-button-pressed-container-shape:var(--md-comp-button-large-pressed-container-shape);--md-comp-button-selected-container-shape-round:var(--md-comp-button-large-selected-container-shape-round);--md-comp-button-selected-container-shape-square:var(--md-comp-button-large-selected-container-shape-square);--md-comp-button-leading-space:var(--md-comp-button-large-leading-space);--md-comp-button-icon-label-space:var(--md-comp-button-large-icon-label-space);--md-comp-button-trailing-space:var(--md-comp-button-large-trailing-space);--md-comp-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-button-large-pressed-container-corner-size-motion-spring-duration);--md-comp-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-button-large-pressed-container-corner-size-motion-spring-easing);--md-comp-icon-button-icon-size:var(--md-comp-icon-button-large-icon-size);--md-comp-icon-button-container-shape-round:var(--md-comp-icon-button-large-container-shape-round);--md-comp-icon-button-container-shape-square:var(--md-comp-icon-button-large-container-shape-square);--md-comp-icon-button-pressed-container-shape:var(--md-comp-icon-button-large-pressed-container-shape);--md-comp-icon-button-selected-container-shape-round:var(--md-comp-icon-button-large-selected-container-shape-round);--md-comp-icon-button-selected-container-shape-square:var(--md-comp-icon-button-large-selected-container-shape-square);--md-comp-icon-button-default-leading-space:var(--md-comp-icon-button-large-default-leading-space);--md-comp-icon-button-default-trailing-space:var(--md-comp-icon-button-large-default-trailing-space);--md-comp-icon-button-narrow-leading-space:var(--md-comp-icon-button-large-narrow-leading-space);--md-comp-icon-button-narrow-trailing-space:var(--md-comp-icon-button-large-narrow-trailing-space);--md-comp-icon-button-wide-leading-space:var(--md-comp-icon-button-large-wide-leading-space);--md-comp-icon-button-wide-trailing-space:var(--md-comp-icon-button-large-wide-trailing-space);--md-comp-icon-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-icon-button-large-pressed-container-corner-size-motion-spring-duration);--md-comp-icon-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-icon-button-large-pressed-container-corner-size-motion-spring-easing)}.ButtonGroup.extra-large{--md-comp-button-label-text-font:var(--md-comp-button-xlarge-label-text-font);--md-comp-button-label-text-weight:var(--md-comp-button-xlarge-label-text-weight);--md-comp-button-label-text-size:var(--md-comp-button-xlarge-label-text-size);--md-comp-button-label-text-tracking:var(--md-comp-button-xlarge-label-text-tracking);--md-comp-button-label-text-line-height:var(--md-comp-button-xlarge-label-text-line-height);--md-comp-button-label-text-wght:var(--md-comp-button-xlarge-label-text-wght);--md-comp-button-label-text-grad:var(--md-comp-button-xlarge-label-text-grad);--md-comp-button-label-text-wdth:var(--md-comp-button-xlarge-label-text-wdth);--md-comp-button-label-text-rond:var(--md-comp-button-xlarge-label-text-rond);--md-comp-button-label-text-opsz:var(--md-comp-button-xlarge-label-text-opsz);--md-comp-button-label-text-crsv:var(--md-comp-button-xlarge-label-text-crsv);--md-comp-button-label-text-slnt:var(--md-comp-button-xlarge-label-text-slnt);--md-comp-button-label-text-fill:var(--md-comp-button-xlarge-label-text-fill);--md-comp-button-label-text-hexp:var(--md-comp-button-xlarge-label-text-hexp);--md-comp-button-icon-size:var(--md-comp-button-xlarge-icon-size);--md-comp-button-container-shape-round:var(--md-comp-button-xlarge-container-shape-round);--md-comp-button-container-shape-square:var(--md-comp-button-xlarge-container-shape-square);--md-comp-button-pressed-container-shape:var(--md-comp-button-xlarge-pressed-container-shape);--md-comp-button-selected-container-shape-round:var(--md-comp-button-xlarge-selected-container-shape-round);--md-comp-button-selected-container-shape-square:var(--md-comp-button-xlarge-selected-container-shape-square);--md-comp-button-leading-space:var(--md-comp-button-xlarge-leading-space);--md-comp-button-icon-label-space:var(--md-comp-button-xlarge-icon-label-space);--md-comp-button-trailing-space:var(--md-comp-button-xlarge-trailing-space);--md-comp-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-button-xlarge-pressed-container-corner-size-motion-spring-duration);--md-comp-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-button-xlarge-pressed-container-corner-size-motion-spring-easing);--md-comp-icon-button-icon-size:var(--md-comp-icon-button-xlarge-icon-size);--md-comp-icon-button-container-shape-round:var(--md-comp-icon-button-xlarge-container-shape-round);--md-comp-icon-button-container-shape-square:var(--md-comp-icon-button-xlarge-container-shape-square);--md-comp-icon-button-pressed-container-shape:var(--md-comp-icon-button-xlarge-pressed-container-shape);--md-comp-icon-button-selected-container-shape-round:var(--md-comp-icon-button-xlarge-selected-container-shape-round);--md-comp-icon-button-selected-container-shape-square:var(--md-comp-icon-button-xlarge-selected-container-shape-square);--md-comp-icon-button-default-leading-space:var(--md-comp-icon-button-xlarge-default-leading-space);--md-comp-icon-button-default-trailing-space:var(--md-comp-icon-button-xlarge-default-trailing-space);--md-comp-icon-button-narrow-leading-space:var(--md-comp-icon-button-xlarge-narrow-leading-space);--md-comp-icon-button-narrow-trailing-space:var(--md-comp-icon-button-xlarge-narrow-trailing-space);--md-comp-icon-button-wide-leading-space:var(--md-comp-icon-button-xlarge-wide-leading-space);--md-comp-icon-button-wide-trailing-space:var(--md-comp-icon-button-xlarge-wide-trailing-space);--md-comp-icon-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-icon-button-xlarge-pressed-container-corner-size-motion-spring-duration);--md-comp-icon-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-icon-button-xlarge-pressed-container-corner-size-motion-spring-easing)}.ButtonGroup>.error{font-family:var(--md-sys-typescale-body-small-font);font-weight:var(--md-sys-typescale-body-small-weight);font-size:var(--md-sys-typescale-body-small-size);letter-spacing:var(--md-sys-typescale-body-small-tracking);line-height:var(--md-sys-typescale-body-small-line-height);font-variation-settings:"wght" var(--md-sys-typescale-body-small-wght), "GRAD" var(--md-sys-typescale-body-small-grad), "wdth" var(--md-sys-typescale-body-small-wdth), "ROND" var(--md-sys-typescale-body-small-rond), "opsz" var(--md-sys-typescale-body-small-opsz), "CRSV" var(--md-sys-typescale-body-small-crsv), "slnt" var(--md-sys-typescale-body-small-slnt), "FILL" var(--md-sys-typescale-body-small-fill), "HEXP" var(--md-sys-typescale-body-small-hexp);color:var(--md-sys-color-error);margin-top:4px;margin-left:16px}

package/dist/components/Button/icon/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require("../../Icon/Icon.cjs");require('./style.css');const e=require("../../misc/OrderedCollection/index.cjs");require("../../misc/Polymorphic.cjs");const t=require("./render.cjs");;/* empty css             */let n=require("react/compiler-runtime");require("react");let r=require("react/jsx-runtime");function i(i){let a=(0,n.c)(4);if(e.useOrderedCollection()){let t;return a[0]===i?t=a[1]:(t=(0,r.jsx)(e.OrderedCollectionChild,{name:`IconButton`,content:i}),a[0]=i,a[1]=t),t}let o;return a[2]===i?o=a[3]:(o=(0,r.jsx)(t.default,{...i}),a[2]=i,a[3]=o),o}exports.default=i;

package/dist/components/Button/icon/index.d.ts

@@ -0,0 +1,22 @@
+import { IconDefinition } from '../../Icon/Icon';
+import { PolymorphicComponent } from '../../misc/Polymorphic';
+import { ElementType, ReactNode, Ref } from 'react';
+import { CommonButtonColor, CommonButtonProps, CommonButtonWidth, CommonSelectableButtonProps } from '../types';
+export type IconButtonColor = CommonButtonColor | "standard";
+export type IconButtonWidth = CommonButtonWidth | "narrow" | "wide";
+export interface DefaultIconButtonProps extends Omit<CommonButtonProps, "color"> {
+    color?: IconButtonColor;
+    icon: IconDefinition | (() => IconDefinition);
+    width?: IconButtonWidth;
+    tooltip?: ReactNode;
+    menuRef?: Ref<HTMLDivElement>;
+    menuOpenBehavior?: "manual" | "hover" | "click";
+    menuOpen?: boolean;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
+}
+export interface SelectableIconButtonProps extends Omit<DefaultIconButtonProps, "selectable" | "icon">, CommonSelectableButtonProps {
+    icon: IconDefinition | ((selected: boolean) => IconDefinition);
+}
+export type IconButtonProps<As extends ElementType = "button"> = PolymorphicComponent<"IconButton", As, "button", DefaultIconButtonProps | SelectableIconButtonProps>;
+export default function IconButton<As extends ElementType = "button">(props: IconButtonProps<As>): import('react').JSX.Element;

package/dist/components/Button/icon/index.js

@@ -0,0 +1,23 @@
+import "../../Icon/Icon.js";
+import { OrderedCollectionChild as e, useOrderedCollection as t } from "../../misc/OrderedCollection/index.js";
+import "../../misc/Polymorphic.js";
+import n from "./render.js";
+import './style.css';/* empty css           */
+import { c as r } from "react/compiler-runtime";
+import "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region lib/components/Button/icon/index.tsx
+function a(a) {
+	let o = r(4);
+	if (t()) {
+		let t;
+		return o[0] === a ? t = o[1] : (t = /* @__PURE__ */ i(e, {
+			name: "IconButton",
+			content: a
+		}), o[0] = a, o[1] = t), t;
+	}
+	let s;
+	return o[2] === a ? s = o[3] : (s = /* @__PURE__ */ i(n, { ...a }), o[2] = a, o[3] = s), s;
+}
+//#endregion
+export { a as default };

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

@@ -0,0 +1 @@
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../Theme/Theme.cjs"),ee=require("../context.cjs"),te=require("../../Icon/Icon.cjs"),ne=require("../../misc/Polymorphic.cjs"),re=require("../../misc/StateLayer/index.cjs"),ie=require("../../misc/Transitionable/index.cjs"),ae=require("../../Menu/Menu.cjs");require("../../Menu/index.cjs");const oe=require("../../misc/FloatingElement/index.cjs"),se=require("../../Tooltip/Tooltip.cjs");require("../../Tooltip/index.cjs");const ce=require("../../types.cjs"),le=require("../group/render.cjs"),ue=require("../index.cjs");let de=require("react/compiler-runtime"),n=require("classnames");n=e.__toESM(n,1);let fe=require("react"),r=require("react/jsx-runtime"),i=require("react-dom-event-hooks");var a=[`color`,`size`,`shape`,`disabled`,`emphasized`,`selectable`,`selected`,`onSelected`],pe=[...a,`icon`,`menuRef`,`menuOpenBehavior`,`menuOpen`,`onMenuOpen`,`onMenuClose`,`tooltip`,`width`];function o(e){let a=(0,de.c)(113),{icon:o,menuOpenBehavior:me,menuRef:he,menuOpen:s,onMenuOpen:c,onMenuClose:l}=e,u=me===void 0?`hover`:me,{popoversContainer:d}=t.useTheme(`IconButton`),f;a[0]===Symbol.for(`react.memo_cache_sentinel`)?(f={allowedPlacements:[`top-start`,`top-end`,`bottom-start`,`bottom-end`]},a[0]=f):f=a[0];let ge=f,_e=(0,fe.useId)(),p=e.id??_e,m=ee.useButtonContext(),h=le.useButtonGroupContext(),g;a[1]!==m||a[2]!==e.color?(g=e.color??m?.getColor(`icon`)??`filled`,a[1]=m,a[2]=e.color,a[3]=g):g=a[3];let ve=g,_;a[4]!==m||a[5]!==e.shape?(_=m?.getShape(`icon`)??e.shape??`round`,a[4]=m,a[5]=e.shape,a[6]=_):_=a[6];let ye=_,v;a[7]!==m||a[8]!==e.width?(v=m?.getWidth(`icon`)??e.width??`default`,a[7]=m,a[8]=e.width,a[9]=v):v=a[9];let be=v,y=h?h.size:e.size,b;a[10]===y?b=a[11]:(b=ce.getComponentSizeName(y),a[10]=y,a[11]=b);let x=b,[xe,Se]=(0,fe.useState)(s??!1),S=s??xe,C;a[12]!==s||a[13]!==l||a[14]!==c?(C=e=>{s===void 0&&Se(e),e?c?.():l?.()},a[12]=s,a[13]=l,a[14]=c,a[15]=C):C=a[15];let w=C,T;a[16]!==S||a[17]!==u||a[18]!==e.children||a[19]!==w?(T=t=>{e.children&&u!==`manual`&&(u===`click`?(t.stopPropagation(),w(!S)):w(!0))},a[16]=S,a[17]=u,a[18]=e.children,a[19]=w,a[20]=T):T=a[20];let Ce=(0,i.useElementEventListener)(u===`click`?`pointerdown`:`pointerenter`,T),E;a[21]!==u||a[22]!==e.children||a[23]!==w?(E=()=>u===`hover`&&e.children?w(!1):null,a[21]=u,a[22]=e.children,a[23]=w,a[24]=E):E=a[24];let we=(0,i.useElementEventListener)(`pointerleave`,E),D;a[25]!==u||a[26]!==e.children||a[27]!==w?(D=()=>{e.children&&u!==`manual`&&w(!0)},a[25]=u,a[26]=e.children,a[27]=w,a[28]=D):D=a[28];let Te=(0,i.useElementEventListener)(`pointerenter`,D),O;a[29]!==u||a[30]!==e.children||a[31]!==w?(O=()=>u===`hover`&&e.children?w(!1):null,a[29]=u,a[30]=e.children,a[31]=w,a[32]=O):O=a[32];let Ee=(0,i.useElementEventListener)(`pointerleave`,O),{saveRef:k,ref:A}=(0,i.useConcatElementRef)(Ce,we),{saveRef:j,ref:M}=(0,i.useConcatElementRef)(he,Te,Ee),N;a[33]!==h||a[34]!==p||a[35]!==A?(N=e=>{A.current&&h?.onPressed(p,A.current,e)},a[33]=h,a[34]=p,a[35]=A,a[36]=N):N=a[36];let[De,P]=ue.useCommonButtonProps(p,e,N),F;if(a[37]!==ve||a[38]!==h||a[39]!==p||a[40]!==e.disabled||a[41]!==e.emphasized||a[42]!==e.selectable||a[43]!==e.selected||a[44]!==P||a[45]!==ye||a[46]!==x||a[47]!==be){if(F={},F.IconButton=!0,F.CommonButton=!0,F[ve]=!0,F[ye]=!0,F[x]=!0,F[be]=!0,F.disabled=e.disabled,F.emphasized=e.emphasized,F.selectable=h?.selectable??e.selectable,h?.selectable){let e;a[49]!==h.selected||a[50]!==p||a[51]!==P?(e=h.selected.get(p)??P,a[49]=h.selected,a[50]=p,a[51]=P,a[52]=e):e=a[52],F.selected=e}else!h&&e.selectable&&(F.selected=e.selected??P);a[37]=ve,a[38]=h,a[39]=p,a[40]=e.disabled,a[41]=e.emphasized,a[42]=e.selectable,a[43]=e.selected,a[44]=P,a[45]=ye,a[46]=x,a[47]=be,a[48]=F}else F=a[48];let I=F,L;a[53]!==h?.selectable||a[54]!==h?.selected||a[55]!==o||a[56]!==p||a[57]!==e.selectable||a[58]!==e.selected||a[59]!==P?(L=()=>{let t;return t=e.selectable?typeof o==`function`?o?.((h?.selectable?h?.selected.get(p):e.selected)??P):o:typeof o==`function`?o():o,t},a[53]=h?.selectable,a[54]=h?.selected,a[55]=o,a[56]=p,a[57]=e.selectable,a[58]=e.selected,a[59]=P,a[60]=L):L=a[60],h?.selectable,h?.selected;let R;a[61]===L?R=a[62]:(R=L(),a[61]=L,a[62]=R);let Oe=R,z;a[63]===Oe?z=a[64]:(z=te.convertIconDefinition(Oe),a[63]=Oe,a[64]=z);let B=z,V;if(a[65]!==I||a[66]!==De||a[67]!==e){V={...e,...De};let t;a[69]!==I||a[70]!==e.className?(t=(0,n.default)(I,e.className),a[69]=I,a[70]=e.className,a[71]=t):t=a[71],V.className=t,V.role=`button`,delete V.title,a[65]=I,a[66]=De,a[67]=e,a[68]=V}else V=a[68];let ke=V,H;a[72]===A?H=a[73]:(H=e=>e.forEach(e=>A.current?.style.setProperty(`--md-comp-icon-button-container-width`,`${e.contentRect.width}px`)),a[72]=A,a[73]=H);let{saveRef:Ae}=(0,i.useResizeObserver)(H),U;a[74]!==S||a[75]!==M||a[76]!==A||a[77]!==w?(U=e=>{e.target instanceof Node&&S&&(!e.target.parentElement?.parentElement?.classList.contains(`selectable`)||!A.current?.contains(e.target)&&!M.current?.contains(e.target))&&w(!1)},a[74]=S,a[75]=M,a[76]=A,a[77]=w,a[78]=U):U=a[78],(0,i.useWindowEventListener)(`pointerdown`,U);let W;a[79]===x?W=a[80]:(W=(0,n.default)(`ButtonContainer`,x),a[79]=x,a[80]=W);let G;a[81]===e.disabled?G=a[82]:(G=(0,r.jsx)(re.default,{disabled:e.disabled}),a[81]=e.disabled,a[82]=G);let K;a[83]===e.title?K=a[84]:(K=typeof e.title==`string`?(0,r.jsx)(se.default,{variant:`plain`,text:e.title}):e.title,a[83]=e.title,a[84]=K);let je=!e.selectable||I.selected,q;a[85]===B?q=a[86]:(q=(0,r.jsx)(`div`,{className:`container`,children:(0,r.jsx)(ie.default,{value:B,className:`icon`})}),a[85]=B,a[86]=q);let J;a[87]===B?J=a[88]:(J=(0,r.jsx)(ie.default,{static:!0,value:B,className:`icon`}),a[87]=B,a[88]=J);let Y;a[89]!==Ae||a[90]!==J?(Y=(0,r.jsx)(`div`,{ref:Ae,className:`container size-ref`,children:J}),a[89]=Ae,a[90]=J,a[91]=Y):Y=a[91];let X;a[92]!==je||a[93]!==q||a[94]!==Y?(X=(0,r.jsxs)(te.IconProvider,{fill:je,children:[q,Y]}),a[92]=je,a[93]=q,a[94]=Y,a[95]=X):X=a[95];let Z;a[96]!==e.as||a[97]!==e.disabled||a[98]!==ke||a[99]!==G||a[100]!==K||a[101]!==X?(Z=(0,r.jsxs)(ne.default,{name:`IconButton`,as:e.as,base:`button`,props:ke,excludePropsName:pe,disabled:e.disabled,children:[G,K,X]}),a[96]=e.as,a[97]=e.disabled,a[98]=ke,a[99]=G,a[100]=K,a[101]=X,a[102]=Z):Z=a[102];let Q;a[103]!==S||a[104]!==d||a[105]!==e.children||a[106]!==j?(Q=e.children&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(`div`,{className:`menu-hover`}),(0,r.jsx)(oe.default,{root:d,flip:ge,autoUpdate:!0,placement:`bottom-start`,open:S,children:(0,r.jsx)(ae.default,{ref:j,className:(0,n.default)(`sub-component`,{visible:S}),children:e.children})})]}),a[103]=S,a[104]=d,a[105]=e.children,a[106]=j,a[107]=Q):Q=a[107];let $;return a[108]!==k||a[109]!==W||a[110]!==Z||a[111]!==Q?($=(0,r.jsxs)(`div`,{ref:k,className:W,children:[Z,Q]}),a[108]=k,a[109]=W,a[110]=Z,a[111]=Q,a[112]=$):$=a[112],$}exports.CommonButtonNativeProps=a,exports.default=o;

package/dist/components/Button/icon/render.d.ts

@@ -0,0 +1,4 @@
+import { IconButtonProps } from '.';
+import { ElementType } from 'react';
+export declare const CommonButtonNativeProps: string[];
+export default function IconButtonRender<As extends ElementType = "button">(props: IconButtonProps<As>): import('react').JSX.Element;

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

@@ -0,0 +1,178 @@
+import { useTheme as e } from "../../Theme/Theme.js";
+import { useButtonContext as ee } from "../context.js";
+import { IconProvider as te, convertIconDefinition as ne } from "../../Icon/Icon.js";
+import re from "../../misc/Polymorphic.js";
+import ie from "../../misc/StateLayer/index.js";
+import ae from "../../misc/Transitionable/index.js";
+import oe from "../../Menu/Menu.js";
+import "../../Menu/index.js";
+import se from "../../misc/FloatingElement/index.js";
+import ce from "../../Tooltip/Tooltip.js";
+import "../../Tooltip/index.js";
+import { getComponentSizeName as le } from "../../types.js";
+import { useButtonGroupContext as ue } from "../group/render.js";
+import { useCommonButtonProps as de } from "../index.js";
+import { c as fe } from "react/compiler-runtime";
+import pe from "classnames";
+import { useId as me, useState as he } from "react";
+import { Fragment as ge, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useConcatElementRef as _e, useElementEventListener as r, useResizeObserver as ve, useWindowEventListener as ye } from "react-dom-event-hooks";
+//#region lib/components/Button/icon/render.tsx
+var i = [
+	"color",
+	"size",
+	"shape",
+	"disabled",
+	"emphasized",
+	"selectable",
+	"selected",
+	"onSelected"
+], be = [
+	...i,
+	"icon",
+	"menuRef",
+	"menuOpenBehavior",
+	"menuOpen",
+	"onMenuOpen",
+	"onMenuClose",
+	"tooltip",
+	"width"
+];
+function a(i) {
+	let a = fe(113), { icon: o, menuOpenBehavior: xe, menuRef: Se, menuOpen: s, onMenuOpen: c, onMenuClose: Ce } = i, l = xe === void 0 ? "hover" : xe, { popoversContainer: we } = e("IconButton"), u;
+	a[0] === Symbol.for("react.memo_cache_sentinel") ? (u = { allowedPlacements: [
+		"top-start",
+		"top-end",
+		"bottom-start",
+		"bottom-end"
+	] }, a[0] = u) : u = a[0];
+	let Te = u, Ee = me(), d = i.id ?? Ee, f = ee(), p = ue(), m;
+	a[1] !== f || a[2] !== i.color ? (m = i.color ?? f?.getColor("icon") ?? "filled", a[1] = f, a[2] = i.color, a[3] = m) : m = a[3];
+	let De = m, h;
+	a[4] !== f || a[5] !== i.shape ? (h = f?.getShape("icon") ?? i.shape ?? "round", a[4] = f, a[5] = i.shape, a[6] = h) : h = a[6];
+	let g = h, _;
+	a[7] !== f || a[8] !== i.width ? (_ = f?.getWidth("icon") ?? i.width ?? "default", a[7] = f, a[8] = i.width, a[9] = _) : _ = a[9];
+	let Oe = _, v = p ? p.size : i.size, y;
+	a[10] === v ? y = a[11] : (y = le(v), a[10] = v, a[11] = y);
+	let b = y, [ke, Ae] = he(s ?? !1), x = s ?? ke, S;
+	a[12] !== s || a[13] !== Ce || a[14] !== c ? (S = (e) => {
+		s === void 0 && Ae(e), e ? c?.() : Ce?.();
+	}, a[12] = s, a[13] = Ce, a[14] = c, a[15] = S) : S = a[15];
+	let C = S, w;
+	a[16] !== x || a[17] !== l || a[18] !== i.children || a[19] !== C ? (w = (e) => {
+		i.children && l !== "manual" && (l === "click" ? (e.stopPropagation(), C(!x)) : C(!0));
+	}, a[16] = x, a[17] = l, a[18] = i.children, a[19] = C, a[20] = w) : w = a[20];
+	let je = r(l === "click" ? "pointerdown" : "pointerenter", w), T;
+	a[21] !== l || a[22] !== i.children || a[23] !== C ? (T = () => l === "hover" && i.children ? C(!1) : null, a[21] = l, a[22] = i.children, a[23] = C, a[24] = T) : T = a[24];
+	let Me = r("pointerleave", T), E;
+	a[25] !== l || a[26] !== i.children || a[27] !== C ? (E = () => {
+		i.children && l !== "manual" && C(!0);
+	}, a[25] = l, a[26] = i.children, a[27] = C, a[28] = E) : E = a[28];
+	let Ne = r("pointerenter", E), D;
+	a[29] !== l || a[30] !== i.children || a[31] !== C ? (D = () => l === "hover" && i.children ? C(!1) : null, a[29] = l, a[30] = i.children, a[31] = C, a[32] = D) : D = a[32];
+	let Pe = r("pointerleave", D), { saveRef: O, ref: k } = _e(je, Me), { saveRef: A, ref: j } = _e(Se, Ne, Pe), M;
+	a[33] !== p || a[34] !== d || a[35] !== k ? (M = (e) => {
+		k.current && p?.onPressed(d, k.current, e);
+	}, a[33] = p, a[34] = d, a[35] = k, a[36] = M) : M = a[36];
+	let [N, P] = de(d, i, M), F;
+	if (a[37] !== De || a[38] !== p || a[39] !== d || a[40] !== i.disabled || a[41] !== i.emphasized || a[42] !== i.selectable || a[43] !== i.selected || a[44] !== P || a[45] !== g || a[46] !== b || a[47] !== Oe) {
+		if (F = {}, F.IconButton = !0, F.CommonButton = !0, F[De] = !0, F[g] = !0, F[b] = !0, F[Oe] = !0, F.disabled = i.disabled, F.emphasized = i.emphasized, F.selectable = p?.selectable ?? i.selectable, p?.selectable) {
+			let e;
+			a[49] !== p.selected || a[50] !== d || a[51] !== P ? (e = p.selected.get(d) ?? P, a[49] = p.selected, a[50] = d, a[51] = P, a[52] = e) : e = a[52], F.selected = e;
+		} else !p && i.selectable && (F.selected = i.selected ?? P);
+		a[37] = De, a[38] = p, a[39] = d, a[40] = i.disabled, a[41] = i.emphasized, a[42] = i.selectable, a[43] = i.selected, a[44] = P, a[45] = g, a[46] = b, a[47] = Oe, a[48] = F;
+	} else F = a[48];
+	let I = F, L;
+	a[53] !== p?.selectable || a[54] !== p?.selected || a[55] !== o || a[56] !== d || a[57] !== i.selectable || a[58] !== i.selected || a[59] !== P ? (L = () => {
+		let e;
+		return e = i.selectable ? typeof o == "function" ? o?.((p?.selectable ? p?.selected.get(d) : i.selected) ?? P) : o : typeof o == "function" ? o() : o, e;
+	}, a[53] = p?.selectable, a[54] = p?.selected, a[55] = o, a[56] = d, a[57] = i.selectable, a[58] = i.selected, a[59] = P, a[60] = L) : L = a[60], p?.selectable, p?.selected;
+	let R;
+	a[61] === L ? R = a[62] : (R = L(), a[61] = L, a[62] = R);
+	let Fe = R, z;
+	a[63] === Fe ? z = a[64] : (z = ne(Fe), a[63] = Fe, a[64] = z);
+	let B = z, V;
+	if (a[65] !== I || a[66] !== N || a[67] !== i) {
+		V = {
+			...i,
+			...N
+		};
+		let e;
+		a[69] !== I || a[70] !== i.className ? (e = pe(I, i.className), a[69] = I, a[70] = i.className, a[71] = e) : e = a[71], V.className = e, V.role = "button", delete V.title, a[65] = I, a[66] = N, a[67] = i, a[68] = V;
+	} else V = a[68];
+	let Ie = V, H;
+	a[72] === k ? H = a[73] : (H = (e) => e.forEach((e) => k.current?.style.setProperty("--md-comp-icon-button-container-width", `${e.contentRect.width}px`)), a[72] = k, a[73] = H);
+	let { saveRef: Le } = ve(H), U;
+	a[74] !== x || a[75] !== j || a[76] !== k || a[77] !== C ? (U = (e) => {
+		e.target instanceof Node && x && (!e.target.parentElement?.parentElement?.classList.contains("selectable") || !k.current?.contains(e.target) && !j.current?.contains(e.target)) && C(!1);
+	}, a[74] = x, a[75] = j, a[76] = k, a[77] = C, a[78] = U) : U = a[78], ye("pointerdown", U);
+	let W;
+	a[79] === b ? W = a[80] : (W = pe("ButtonContainer", b), a[79] = b, a[80] = W);
+	let G;
+	a[81] === i.disabled ? G = a[82] : (G = /* @__PURE__ */ t(ie, { disabled: i.disabled }), a[81] = i.disabled, a[82] = G);
+	let K;
+	a[83] === i.title ? K = a[84] : (K = typeof i.title == "string" ? /* @__PURE__ */ t(ce, {
+		variant: "plain",
+		text: i.title
+	}) : i.title, a[83] = i.title, a[84] = K);
+	let Re = !i.selectable || I.selected, q;
+	a[85] === B ? q = a[86] : (q = /* @__PURE__ */ t("div", {
+		className: "container",
+		children: /* @__PURE__ */ t(ae, {
+			value: B,
+			className: "icon"
+		})
+	}), a[85] = B, a[86] = q);
+	let J;
+	a[87] === B ? J = a[88] : (J = /* @__PURE__ */ t(ae, {
+		static: !0,
+		value: B,
+		className: "icon"
+	}), a[87] = B, a[88] = J);
+	let Y;
+	a[89] !== Le || a[90] !== J ? (Y = /* @__PURE__ */ t("div", {
+		ref: Le,
+		className: "container size-ref",
+		children: J
+	}), a[89] = Le, a[90] = J, a[91] = Y) : Y = a[91];
+	let X;
+	a[92] !== Re || a[93] !== q || a[94] !== Y ? (X = /* @__PURE__ */ n(te, {
+		fill: Re,
+		children: [q, Y]
+	}), a[92] = Re, a[93] = q, a[94] = Y, a[95] = X) : X = a[95];
+	let Z;
+	a[96] !== i.as || a[97] !== i.disabled || a[98] !== Ie || a[99] !== G || a[100] !== K || a[101] !== X ? (Z = /* @__PURE__ */ n(re, {
+		name: "IconButton",
+		as: i.as,
+		base: "button",
+		props: Ie,
+		excludePropsName: be,
+		disabled: i.disabled,
+		children: [
+			G,
+			K,
+			X
+		]
+	}), a[96] = i.as, a[97] = i.disabled, a[98] = Ie, a[99] = G, a[100] = K, a[101] = X, a[102] = Z) : Z = a[102];
+	let Q;
+	a[103] !== x || a[104] !== we || a[105] !== i.children || a[106] !== A ? (Q = i.children && /* @__PURE__ */ n(ge, { children: [/* @__PURE__ */ t("div", { className: "menu-hover" }), /* @__PURE__ */ t(se, {
+		root: we,
+		flip: Te,
+		autoUpdate: !0,
+		placement: "bottom-start",
+		open: x,
+		children: /* @__PURE__ */ t(oe, {
+			ref: A,
+			className: pe("sub-component", { visible: x }),
+			children: i.children
+		})
+	})] }), a[103] = x, a[104] = we, a[105] = i.children, a[106] = A, a[107] = Q) : Q = a[107];
+	let $;
+	return a[108] !== O || a[109] !== W || a[110] !== Z || a[111] !== Q ? ($ = /* @__PURE__ */ n("div", {
+		ref: O,
+		className: W,
+		children: [Z, Q]
+	}), a[108] = O, a[109] = W, a[110] = Z, a[111] = Q, a[112] = $) : $ = a[112], $;
+}
+//#endregion
+export { i as CommonButtonNativeProps, a as default };

package/dist/components/Button/icon/style.css

@@ -0,0 +1 @@
+.ButtonContainer{vertical-align:middle;box-sizing:border-box;border:none;justify-content:center;align-items:center;min-width:48px;min-height:48px;padding:0;text-decoration:none;display:inline-flex;position:relative}.ButtonContainer>.menu-hover{width:100%;top:calc(var(--md-comp-button-container-height) + max(0px, (48px - var(--md-comp-button-container-height)) / 2));height:4px;position:absolute}.ButtonContainer>.menu-hover:has(+.Menu.visible){height:4px}.ButtonContainer>.Menu{z-index:1000;top:calc(var(--md-comp-button-container-height) + max(0px, (48px - var(--md-comp-button-container-height)) / 2) + 4px);position:absolute}.ButtonContainer>.Menu>.MenuGroup{width:auto}.CommonButton{border-radius:inherit;vertical-align:middle;box-sizing:border-box;transition:width var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), min-width var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), height var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), min-height var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), font var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), margin var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), padding var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), gap var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), border-radius var(--md-sys-motion-spring-expressive-fast-spatial-duration) var(--md-sys-motion-spring-expressive-fast-spatial-easing), background-color var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), color var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), box-shadow var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), outline var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing), opacity var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing);border:none;justify-content:center;align-items:center;padding:0;text-decoration:none;display:inline-flex;position:relative}.CommonButton>.container{justify-content:center;align-items:center;gap:inherit;transition:inherit;display:inline-flex}.CommonButton>.container.size-ref{gap:var(--md-comp-button-gap-space);visibility:hidden;transition:unset;position:absolute}.CommonButton.disabled{cursor:default}.CommonButton:not(.disabled){cursor:pointer}.CommonButton:focus{outline-width:3px}.IconButton{--md-comp-icon-color:var(--md-comp-icon-button-icon-color);--md-comp-state-hover-state-layer-opacity:var(--md-comp-icon-button-hovered-state-layer-opacity);--md-comp-state-focused-state-layer-opacity:var(--md-comp-icon-button-focused-state-layer-opacity);--md-comp-state-pressed-state-layer-opacity:var(--md-comp-icon-button-pressed-state-layer-opacity);--md-comp-state-hover-state-layer-color:var(--md-comp-icon-button-hovered-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-icon-button-focused-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-icon-button-pressed-state-layer-color);--md-comp-state-focus-indicator-color:var(--md-comp-icon-button-focus-indicator-color);--md-comp-state-focus-indicator-thickness:var(--md-comp-icon-button-focus-indicator-thickness);--md-comp-state-focus-indicator-outer-offset:var(--md-comp-icon-button-focus-indicator-outline-offset);height:var(--md-comp-icon-button-container-height);min-height:var(--md-comp-icon-button-container-height);background-color:var(--md-comp-icon-button-container-color);color:var(--md-comp-icon-button-icon-color)}.IconButton,.IconButton:focus:not(:focus-visible){outline:solid var(--md-comp-icon-button-outline-width,0px) rgba(from var(--md-comp-icon-button-outline-color,transparent) r g b/var(--md-comp-icon-button-outline-opacity,0));outline-offset:calc(-1 * var(--md-comp-icon-button-outline-width,0px))}.IconButton>.container>.icon{--md-comp-icon-size:var(--md-comp-icon-button-icon-size)}.IconButton.selectable:not(.disabled){--md-comp-icon-color:var(--md-comp-icon-button-unselected-icon-color);--md-comp-state-hover-state-layer-color:var(--md-comp-icon-button-unselected-hovered-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-icon-button-unselected-focused-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-icon-button-unselected-pressed-state-layer-color);--md-comp-icon-button-container-color:var(--md-comp-icon-button-unselected-container-color);--md-comp-icon-button-container-opacity:var(--md-comp-icon-button-unselected-container-opacity)}.IconButton.selectable:not(.disabled).selected{--md-comp-icon-color:var(--md-comp-icon-button-selected-icon-color);--md-comp-state-hover-state-layer-color:var(--md-comp-icon-button-selected-hovered-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-icon-button-selected-focused-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-icon-button-selected-pressed-state-layer-color);--md-comp-icon-button-container-color:var(--md-comp-icon-button-selected-container-color);--md-comp-icon-button-container-opacity:var(--md-comp-icon-button-selected-container-opacity);outline-offset:0px;outline:0 solid #0000}.IconButton.disabled{--md-comp-icon-color:var(--md-comp-icon-button-disabled-icon-color,var(--md-comp-icon-button-icon-color));--md-comp-icon-opacity:var(--md-comp-icon-button-disabled-icon-opacity,var(--md-comp-icon-button-icon-opacity,1));background-color:rgba(from var(--md-comp-icon-button-disabled-container-color,var(--md-comp-icon-button-container-color)) r g b/var(--md-comp-icon-button-disabled-container-opacity,var(--md-comp-icon-button-container-opacity,1)));color:rgba(from var(--md-comp-icon-button-disabled-icon-color,var(--md-comp-icon-button-icon-color)) r g b/var(--md-comp-icon-button-disabled-icon-opacity,var(--md-comp-icon-button-icon-opacity,1)));box-shadow:var(--md-comp-icon-button-disabled-container-elevation,var(--md-comp-icon-button-container-elevation));outline:solid var(--md-comp-icon-button-disabled-outline-width,var(--md-comp-icon-button-outline-width,0px)) rgba(from var(--md-comp-icon-button-disabled-outline-color,var(--md-comp-icon-button-outline-color,transparent)) r g b/var(--md-comp-icon-button-disabled-outline-opacity,var(--md-comp-icon-button-outline-opacity,0)));outline-offset:calc(-1 * var(--md-comp-icon-button-disabled-outline-width,var(--md-comp-icon-button-outline-width,0px)));cursor:default}.IconButton:hover:not(.disabled,:focus-visible,:active,.dragged){--md-comp-icon-color:var(--md-comp-icon-button-hovered-icon-color,var(--md-comp-icon-button-icon-color));--md-comp-icon-opacity:var(--md-comp-icon-button-hovered-icon-opacity,var(--md-comp-icon-button-icon-opacity,1));background-color:rgba(from var(--md-comp-icon-button-hovered-container-color,var(--md-comp-icon-button-container-color)) r g b/var(--md-comp-icon-button-hovered-container-opacity,var(--md-comp-icon-button-container-opacity,1)));color:rgba(from var(--md-comp-icon-button-hovered-icon-color,var(--md-comp-icon-button-icon-color)) r g b/var(--md-comp-icon-button-hovered-icon-opacity,var(--md-comp-icon-button-icon-opacity,1)));box-shadow:var(--md-comp-icon-button-hovered-container-elevation,var(--md-comp-icon-button-container-elevation));outline:solid var(--md-comp-icon-button-hovered-outline-width,var(--md-comp-icon-button-outline-width,0px)) rgba(from var(--md-comp-icon-button-hovered-outline-color,var(--md-comp-icon-button-outline-color,transparent)) r g b/var(--md-comp-icon-button-hovered-outline-opacity,var(--md-comp-icon-button-outline-opacity,0)));outline-offset:calc(-1 * var(--md-comp-icon-button-hovered-outline-width,var(--md-comp-icon-button-outline-width,0px)))}.IconButton:hover:not(.disabled,:focus-visible,:active,.dragged).selectable:not(.disabled){--md-comp-icon-color:var(--md-comp-icon-button-unselected-hovered-icon-color,var(--md-comp-icon-button-icon-color));--md-comp-icon-opacity:var(--md-comp-icon-button-unselected-hovered-icon-opacity,var(--md-comp-icon-button-icon-opacity,1))}.IconButton:hover:not(.disabled,:focus-visible,:active,.dragged).selectable:not(.disabled).selected{--md-comp-icon-color:var(--md-comp-icon-button-selected-hovered-icon-color,var(--md-comp-icon-button-icon-color));--md-comp-icon-opacity:var(--md-comp-icon-button-selected-hovered-icon-opacity,var(--md-comp-icon-button-icon-opacity,1))}.IconButton:focus-visible:not(.disabled,:active,.dragged){--md-comp-icon-color:var(--md-comp-icon-button-focused-icon-color,var(--md-comp-icon-button-icon-color));--md-comp-icon-opacity:var(--md-comp-icon-button-focused-icon-opacity,var(--md-comp-icon-button-icon-opacity,1));background-color:rgba(from var(--md-comp-icon-button-focused-container-color,var(--md-comp-icon-button-container-color)) r g b/var(--md-comp-icon-button-focused-container-opacity,var(--md-comp-icon-button-container-opacity,1)));color:rgba(from var(--md-comp-icon-button-focused-icon-color,var(--md-comp-icon-button-icon-color)) r g b/var(--md-comp-icon-button-focused-icon-opacity,var(--md-comp-icon-button-icon-opacity,1)));box-shadow:var(--md-comp-icon-button-focused-container-elevation,var(--md-comp-icon-button-container-elevation));outline:solid var(--md-comp-icon-button-focused-outline-width,var(--md-comp-icon-button-outline-width,0px)) rgba(from var(--md-comp-icon-button-focused-outline-color,var(--md-comp-icon-button-outline-color,transparent)) r g b/var(--md-comp-icon-button-focused-outline-opacity,var(--md-comp-icon-button-outline-opacity,0)));outline-offset:calc(-1 * var(--md-comp-icon-button-focused-outline-width,var(--md-comp-icon-button-outline-width,0px)))}.IconButton:focus-visible:not(.disabled,:active,.dragged).selectable:not(.disabled){--md-comp-icon-color:var(--md-comp-icon-button-unselected-focused-icon-color,var(--md-comp-icon-button-icon-color));--md-comp-icon-opacity:var(--md-comp-icon-button-unselected-focused-icon-opacity,var(--md-comp-icon-button-icon-opacity,1))}.IconButton:focus-visible:not(.disabled,:active,.dragged).selectable:not(.disabled).selected{--md-comp-icon-color:var(--md-comp-icon-button-selected-focused-icon-color,var(--md-comp-icon-button-icon-color));--md-comp-icon-opacity:var(--md-comp-icon-button-selected-focused-icon-opacity,var(--md-comp-icon-button-icon-opacity,1))}.IconButton:active:not(.disabled,.dragged){--md-comp-icon-color:var(--md-comp-icon-button-pressed-icon-color,var(--md-comp-icon-button-icon-color));--md-comp-icon-opacity:var(--md-comp-icon-button-pressed-icon-opacity,var(--md-comp-icon-button-icon-opacity,1));background-color:rgba(from var(--md-comp-icon-button-pressed-container-color,var(--md-comp-icon-button-container-color)) r g b/var(--md-comp-icon-button-pressed-container-opacity,var(--md-comp-icon-button-container-opacity,1)));color:rgba(from var(--md-comp-icon-button-pressed-icon-color,var(--md-comp-icon-button-icon-color)) r g b/var(--md-comp-icon-button-pressed-icon-opacity,var(--md-comp-icon-button-icon-opacity,1)));box-shadow:var(--md-comp-icon-button-pressed-container-elevation,var(--md-comp-icon-button-container-elevation));outline:solid var(--md-comp-icon-button-pressed-outline-width,var(--md-comp-icon-button-outline-width,0px)) rgba(from var(--md-comp-icon-button-pressed-outline-color,var(--md-comp-icon-button-outline-color,transparent)) r g b/var(--md-comp-icon-button-pressed-outline-opacity,var(--md-comp-icon-button-outline-opacity,0)));outline-offset:calc(-1 * var(--md-comp-icon-button-pressed-outline-width,var(--md-comp-icon-button-outline-width,0px)))}.IconButton:active:not(.disabled,.dragged).selectable:not(.disabled){--md-comp-icon-color:var(--md-comp-icon-button-unselected-pressed-icon-color,var(--md-comp-icon-button-icon-color));--md-comp-icon-opacity:var(--md-comp-icon-button-unselected-pressed-icon-opacity,var(--md-comp-icon-button-icon-opacity,1))}.IconButton:active:not(.disabled,.dragged).selectable:not(.disabled).selected{--md-comp-icon-color:var(--md-comp-icon-button-selected-pressed-icon-color,var(--md-comp-icon-button-icon-color));--md-comp-icon-opacity:var(--md-comp-icon-button-selected-pressed-icon-opacity,var(--md-comp-icon-button-icon-opacity,1))}.IconButton.narrow{width:calc(var(--md-comp-icon-button-narrow-leading-space) + var(--md-comp-icon-button-container-width) + var(--md-comp-icon-button-narrow-trailing-space) + var(--button-width-extra,0px));min-width:calc(var(--md-comp-icon-button-narrow-leading-space) + var(--md-comp-icon-button-container-width) + var(--md-comp-icon-button-narrow-trailing-space) + var(--button-width-extra,0px));padding-left:var(--md-comp-icon-button-narrow-leading-space);padding-right:var(--md-comp-icon-button-narrow-trailing-space)}.IconButton.default{width:calc(var(--md-comp-icon-button-default-leading-space) + var(--md-comp-icon-button-container-width) + var(--md-comp-icon-button-default-trailing-space) + var(--button-width-extra,0px));min-width:calc(var(--md-comp-icon-button-default-leading-space) + var(--md-comp-icon-button-container-width) + var(--md-comp-icon-button-default-trailing-space) + var(--button-width-extra,0px));padding-left:var(--md-comp-icon-button-default-leading-space);padding-right:var(--md-comp-icon-button-default-trailing-space)}.IconButton.wide{width:calc(var(--md-comp-icon-button-wide-leading-space) + var(--md-comp-icon-button-container-width) + var(--md-comp-icon-button-wide-trailing-space) + var(--button-width-extra,0px));min-width:calc(var(--md-comp-icon-button-wide-leading-space) + var(--md-comp-icon-button-container-width) + var(--md-comp-icon-button-wide-trailing-space) + var(--button-width-extra,0px));padding-left:var(--md-comp-icon-button-wide-leading-space);padding-right:var(--md-comp-icon-button-wide-trailing-space)}.IconButton.filled{--md-comp-icon-button-container-color:var(--md-comp-icon-button-filled-container-color);--md-comp-icon-button-icon-color:var(--md-comp-icon-button-filled-icon-color);--md-comp-icon-button-container-elevation:var(--md-comp-icon-button-filled-container-elevation);--md-comp-icon-button-hovered-state-layer-opacity:var(--md-comp-icon-button-filled-hovered-state-layer-opacity);--md-comp-icon-button-hovered-state-layer-color:var(--md-comp-icon-button-filled-hovered-state-layer-color);--md-comp-icon-button-hovered-icon-color:var(--md-comp-icon-button-filled-hovered-icon-color);--md-comp-icon-button-focused-state-layer-opacity:var(--md-comp-icon-button-filled-focused-state-layer-opacity);--md-comp-icon-button-focused-state-layer-color:var(--md-comp-icon-button-filled-focused-state-layer-color);--md-comp-icon-button-focused-icon-color:var(--md-comp-icon-button-filled-focused-icon-color);--md-comp-icon-button-pressed-state-layer-opacity:var(--md-comp-icon-button-filled-pressed-state-layer-opacity);--md-comp-icon-button-pressed-state-layer-color:var(--md-comp-icon-button-filled-pressed-state-layer-color);--md-comp-icon-button-pressed-icon-color:var(--md-comp-icon-button-filled-pressed-icon-color);--md-comp-icon-button-unselected-container-color:var(--md-comp-icon-button-filled-unselected-container-color);--md-comp-icon-button-unselected-icon-color:var(--md-comp-icon-button-filled-unselected-icon-color);--md-comp-icon-button-unselected-hovered-state-layer-color:var(--md-comp-icon-button-filled-unselected-hovered-state-layer-color);--md-comp-icon-button-unselected-hovered-icon-color:var(--md-comp-icon-button-filled-unselected-hovered-icon-color);--md-comp-icon-button-unselected-focused-state-layer-color:var(--md-comp-icon-button-filled-unselected-focused-state-layer-color);--md-comp-icon-button-unselected-focused-icon-color:var(--md-comp-icon-button-filled-unselected-focused-icon-color);--md-comp-icon-button-unselected-pressed-state-layer-color:var(--md-comp-icon-button-filled-unselected-pressed-state-layer-color);--md-comp-icon-button-unselected-pressed-icon-color:var(--md-comp-icon-button-filled-unselected-pressed-icon-color);--md-comp-icon-button-selected-container-color:var(--md-comp-icon-button-filled-selected-container-color);--md-comp-icon-button-selected-icon-color:var(--md-comp-icon-button-filled-selected-icon-color);--md-comp-icon-button-selected-hovered-state-layer-color:var(--md-comp-icon-button-filled-selected-hovered-state-layer-color);--md-comp-icon-button-selected-hovered-icon-color:var(--md-comp-icon-button-filled-selected-hovered-icon-color);--md-comp-icon-button-selected-focused-state-layer-color:var(--md-comp-icon-button-filled-selected-focused-state-layer-color);--md-comp-icon-button-selected-focused-icon-color:var(--md-comp-icon-button-filled-selected-focused-icon-color);--md-comp-icon-button-selected-pressed-state-layer-color:var(--md-comp-icon-button-filled-selected-pressed-state-layer-color);--md-comp-icon-button-selected-pressed-icon-color:var(--md-comp-icon-button-filled-selected-pressed-icon-color);--md-comp-icon-button-disabled-container-color:var(--md-comp-icon-button-filled-disabled-container-color);--md-comp-icon-button-disabled-container-opacity:var(--md-comp-icon-button-filled-disabled-container-opacity);--md-comp-icon-button-disabled-icon-color:var(--md-comp-icon-button-filled-disabled-icon-color);--md-comp-icon-button-disabled-icon-opacity:var(--md-comp-icon-button-filled-disabled-icon-opacity)}.IconButton.tonal{--md-comp-icon-button-container-color:var(--md-comp-icon-button-tonal-container-color);--md-comp-icon-button-icon-color:var(--md-comp-icon-button-tonal-icon-color);--md-comp-icon-button-container-elevation:var(--md-comp-icon-button-tonal-container-elevation);--md-comp-icon-button-hovered-state-layer-opacity:var(--md-comp-icon-button-tonal-hovered-state-layer-opacity);--md-comp-icon-button-hovered-state-layer-color:var(--md-comp-icon-button-tonal-hovered-state-layer-color);--md-comp-icon-button-hovered-icon-color:var(--md-comp-icon-button-tonal-hovered-icon-color);--md-comp-icon-button-focused-state-layer-opacity:var(--md-comp-icon-button-tonal-focused-state-layer-opacity);--md-comp-icon-button-focused-state-layer-color:var(--md-comp-icon-button-tonal-focused-state-layer-color);--md-comp-icon-button-focused-icon-color:var(--md-comp-icon-button-tonal-focused-icon-color);--md-comp-icon-button-pressed-state-layer-opacity:var(--md-comp-icon-button-tonal-pressed-state-layer-opacity);--md-comp-icon-button-pressed-state-layer-color:var(--md-comp-icon-button-tonal-pressed-state-layer-color);--md-comp-icon-button-pressed-icon-color:var(--md-comp-icon-button-tonal-pressed-icon-color);--md-comp-icon-button-unselected-container-color:var(--md-comp-icon-button-tonal-unselected-container-color);--md-comp-icon-button-unselected-icon-color:var(--md-comp-icon-button-tonal-unselected-icon-color);--md-comp-icon-button-unselected-hovered-state-layer-color:var(--md-comp-icon-button-tonal-unselected-hovered-state-layer-color);--md-comp-icon-button-unselected-hovered-icon-color:var(--md-comp-icon-button-tonal-unselected-hovered-icon-color);--md-comp-icon-button-unselected-focused-state-layer-color:var(--md-comp-icon-button-tonal-unselected-focused-state-layer-color);--md-comp-icon-button-unselected-focused-icon-color:var(--md-comp-icon-button-tonal-unselected-focused-icon-color);--md-comp-icon-button-unselected-pressed-state-layer-color:var(--md-comp-icon-button-tonal-unselected-pressed-state-layer-color);--md-comp-icon-button-unselected-pressed-icon-color:var(--md-comp-icon-button-tonal-unselected-pressed-icon-color);--md-comp-icon-button-selected-container-color:var(--md-comp-icon-button-tonal-selected-container-color);--md-comp-icon-button-selected-icon-color:var(--md-comp-icon-button-tonal-selected-icon-color);--md-comp-icon-button-selected-hovered-state-layer-color:var(--md-comp-icon-button-tonal-selected-hovered-state-layer-color);--md-comp-icon-button-selected-hovered-icon-color:var(--md-comp-icon-button-tonal-selected-hovered-icon-color);--md-comp-icon-button-selected-focused-state-layer-color:var(--md-comp-icon-button-tonal-selected-focused-state-layer-color);--md-comp-icon-button-selected-focused-icon-color:var(--md-comp-icon-button-tonal-selected-focused-icon-color);--md-comp-icon-button-selected-pressed-state-layer-color:var(--md-comp-icon-button-tonal-selected-pressed-state-layer-color);--md-comp-icon-button-selected-pressed-icon-color:var(--md-comp-icon-button-tonal-selected-pressed-icon-color);--md-comp-icon-button-disabled-container-color:var(--md-comp-icon-button-tonal-disabled-container-color);--md-comp-icon-button-disabled-container-opacity:var(--md-comp-icon-button-tonal-disabled-container-opacity);--md-comp-icon-button-disabled-icon-color:var(--md-comp-icon-button-tonal-disabled-icon-color);--md-comp-icon-button-disabled-icon-opacity:var(--md-comp-icon-button-tonal-disabled-icon-opacity)}.IconButton.tertiary{--md-comp-icon-button-container-color:var(--md-comp-icon-button-tertiary-container-color);--md-comp-icon-button-icon-color:var(--md-comp-icon-button-tertiary-icon-color);--md-comp-icon-button-container-elevation:var(--md-comp-icon-button-tertiary-container-elevation);--md-comp-icon-button-hovered-state-layer-opacity:var(--md-comp-icon-button-tertiary-hovered-state-layer-opacity);--md-comp-icon-button-hovered-state-layer-color:var(--md-comp-icon-button-tertiary-hovered-state-layer-color);--md-comp-icon-button-hovered-icon-color:var(--md-comp-icon-button-tertiary-hovered-icon-color);--md-comp-icon-button-focused-state-layer-opacity:var(--md-comp-icon-button-tertiary-focused-state-layer-opacity);--md-comp-icon-button-focused-state-layer-color:var(--md-comp-icon-button-tertiary-focused-state-layer-color);--md-comp-icon-button-focused-icon-color:var(--md-comp-icon-button-tertiary-focused-icon-color);--md-comp-icon-button-pressed-state-layer-opacity:var(--md-comp-icon-button-tertiary-pressed-state-layer-opacity);--md-comp-icon-button-pressed-state-layer-color:var(--md-comp-icon-button-tertiary-pressed-state-layer-color);--md-comp-icon-button-pressed-icon-color:var(--md-comp-icon-button-tertiary-pressed-icon-color);--md-comp-icon-button-unselected-container-color:var(--md-comp-icon-button-tertiary-unselected-container-color);--md-comp-icon-button-unselected-icon-color:var(--md-comp-icon-button-tertiary-unselected-icon-color);--md-comp-icon-button-unselected-hovered-state-layer-color:var(--md-comp-icon-button-tertiary-unselected-hovered-state-layer-color);--md-comp-icon-button-unselected-hovered-icon-color:var(--md-comp-icon-button-tertiary-unselected-hovered-icon-color);--md-comp-icon-button-unselected-focused-state-layer-color:var(--md-comp-icon-button-tertiary-unselected-focused-state-layer-color);--md-comp-icon-button-unselected-focused-icon-color:var(--md-comp-icon-button-tertiary-unselected-focused-icon-color);--md-comp-icon-button-unselected-pressed-state-layer-color:var(--md-comp-icon-button-tertiary-unselected-pressed-state-layer-color);--md-comp-icon-button-unselected-pressed-icon-color:var(--md-comp-icon-button-tertiary-unselected-pressed-icon-color);--md-comp-icon-button-selected-container-color:var(--md-comp-icon-button-tertiary-selected-container-color);--md-comp-icon-button-selected-icon-color:var(--md-comp-icon-button-tertiary-selected-icon-color);--md-comp-icon-button-selected-hovered-state-layer-color:var(--md-comp-icon-button-tertiary-selected-hovered-state-layer-color);--md-comp-icon-button-selected-hovered-icon-color:var(--md-comp-icon-button-tertiary-selected-hovered-icon-color);--md-comp-icon-button-selected-focused-state-layer-color:var(--md-comp-icon-button-tertiary-selected-focused-state-layer-color);--md-comp-icon-button-selected-focused-icon-color:var(--md-comp-icon-button-tertiary-selected-focused-icon-color);--md-comp-icon-button-selected-pressed-state-layer-color:var(--md-comp-icon-button-tertiary-selected-pressed-state-layer-color);--md-comp-icon-button-selected-pressed-icon-color:var(--md-comp-icon-button-tertiary-selected-pressed-icon-color);--md-comp-icon-button-disabled-container-color:var(--md-comp-icon-button-tertiary-disabled-container-color);--md-comp-icon-button-disabled-container-opacity:var(--md-comp-icon-button-tertiary-disabled-container-opacity);--md-comp-icon-button-disabled-icon-color:var(--md-comp-icon-button-tertiary-disabled-icon-color);--md-comp-icon-button-disabled-icon-opacity:var(--md-comp-icon-button-tertiary-disabled-icon-opacity)}.IconButton.success{--md-comp-icon-button-container-color:var(--md-comp-icon-button-success-container-color);--md-comp-icon-button-icon-color:var(--md-comp-icon-button-success-icon-color);--md-comp-icon-button-container-elevation:var(--md-comp-icon-button-success-container-elevation);--md-comp-icon-button-hovered-state-layer-opacity:var(--md-comp-icon-button-success-hovered-state-layer-opacity);--md-comp-icon-button-hovered-state-layer-color:var(--md-comp-icon-button-success-hovered-state-layer-color);--md-comp-icon-button-hovered-icon-color:var(--md-comp-icon-button-success-hovered-icon-color);--md-comp-icon-button-focused-state-layer-opacity:var(--md-comp-icon-button-success-focused-state-layer-opacity);--md-comp-icon-button-focused-state-layer-color:var(--md-comp-icon-button-success-focused-state-layer-color);--md-comp-icon-button-focused-icon-color:var(--md-comp-icon-button-success-focused-icon-color);--md-comp-icon-button-pressed-state-layer-opacity:var(--md-comp-icon-button-success-pressed-state-layer-opacity);--md-comp-icon-button-pressed-state-layer-color:var(--md-comp-icon-button-success-pressed-state-layer-color);--md-comp-icon-button-pressed-icon-color:var(--md-comp-icon-button-success-pressed-icon-color);--md-comp-icon-button-unselected-container-color:var(--md-comp-icon-button-success-unselected-container-color);--md-comp-icon-button-unselected-icon-color:var(--md-comp-icon-button-success-unselected-icon-color);--md-comp-icon-button-unselected-hovered-state-layer-color:var(--md-comp-icon-button-success-unselected-hovered-state-layer-color);--md-comp-icon-button-unselected-hovered-icon-color:var(--md-comp-icon-button-success-unselected-hovered-icon-color);--md-comp-icon-button-unselected-focused-state-layer-color:var(--md-comp-icon-button-success-unselected-focused-state-layer-color);--md-comp-icon-button-unselected-focused-icon-color:var(--md-comp-icon-button-success-unselected-focused-icon-color);--md-comp-icon-button-unselected-pressed-state-layer-color:var(--md-comp-icon-button-success-unselected-pressed-state-layer-color);--md-comp-icon-button-unselected-pressed-icon-color:var(--md-comp-icon-button-success-unselected-pressed-icon-color);--md-comp-icon-button-selected-container-color:var(--md-comp-icon-button-success-selected-container-color);--md-comp-icon-button-selected-icon-color:var(--md-comp-icon-button-success-selected-icon-color);--md-comp-icon-button-selected-hovered-state-layer-color:var(--md-comp-icon-button-success-selected-hovered-state-layer-color);--md-comp-icon-button-selected-hovered-icon-color:var(--md-comp-icon-button-success-selected-hovered-icon-color);--md-comp-icon-button-selected-focused-state-layer-color:var(--md-comp-icon-button-success-selected-focused-state-layer-color);--md-comp-icon-button-selected-focused-icon-color:var(--md-comp-icon-button-success-selected-focused-icon-color);--md-comp-icon-button-selected-pressed-state-layer-color:var(--md-comp-icon-button-success-selected-pressed-state-layer-color);--md-comp-icon-button-selected-pressed-icon-color:var(--md-comp-icon-button-success-selected-pressed-icon-color);--md-comp-icon-button-disabled-container-color:var(--md-comp-icon-button-success-disabled-container-color);--md-comp-icon-button-disabled-container-opacity:var(--md-comp-icon-button-success-disabled-container-opacity);--md-comp-icon-button-disabled-icon-color:var(--md-comp-icon-button-success-disabled-icon-color);--md-comp-icon-button-disabled-icon-opacity:var(--md-comp-icon-button-success-disabled-icon-opacity)}.IconButton.error{--md-comp-icon-button-container-color:var(--md-comp-icon-button-error-container-color);--md-comp-icon-button-icon-color:var(--md-comp-icon-button-error-icon-color);--md-comp-icon-button-container-elevation:var(--md-comp-icon-button-error-container-elevation);--md-comp-icon-button-hovered-state-layer-opacity:var(--md-comp-icon-button-error-hovered-state-layer-opacity);--md-comp-icon-button-hovered-state-layer-color:var(--md-comp-icon-button-error-hovered-state-layer-color);--md-comp-icon-button-hovered-icon-color:var(--md-comp-icon-button-error-hovered-icon-color);--md-comp-icon-button-focused-state-layer-opacity:var(--md-comp-icon-button-error-focused-state-layer-opacity);--md-comp-icon-button-focused-state-layer-color:var(--md-comp-icon-button-error-focused-state-layer-color);--md-comp-icon-button-focused-icon-color:var(--md-comp-icon-button-error-focused-icon-color);--md-comp-icon-button-pressed-state-layer-opacity:var(--md-comp-icon-button-error-pressed-state-layer-opacity);--md-comp-icon-button-pressed-state-layer-color:var(--md-comp-icon-button-error-pressed-state-layer-color);--md-comp-icon-button-pressed-icon-color:var(--md-comp-icon-button-error-pressed-icon-color);--md-comp-icon-button-unselected-container-color:var(--md-comp-icon-button-error-unselected-container-color);--md-comp-icon-button-unselected-icon-color:var(--md-comp-icon-button-error-unselected-icon-color);--md-comp-icon-button-unselected-hovered-state-layer-color:var(--md-comp-icon-button-error-unselected-hovered-state-layer-color);--md-comp-icon-button-unselected-hovered-icon-color:var(--md-comp-icon-button-error-unselected-hovered-icon-color);--md-comp-icon-button-unselected-focused-state-layer-color:var(--md-comp-icon-button-error-unselected-focused-state-layer-color);--md-comp-icon-button-unselected-focused-icon-color:var(--md-comp-icon-button-error-unselected-focused-icon-color);--md-comp-icon-button-unselected-pressed-state-layer-color:var(--md-comp-icon-button-error-unselected-pressed-state-layer-color);--md-comp-icon-button-unselected-pressed-icon-color:var(--md-comp-icon-button-error-unselected-pressed-icon-color);--md-comp-icon-button-selected-container-color:var(--md-comp-icon-button-error-selected-container-color);--md-comp-icon-button-selected-icon-color:var(--md-comp-icon-button-error-selected-icon-color);--md-comp-icon-button-selected-hovered-state-layer-color:var(--md-comp-icon-button-error-selected-hovered-state-layer-color);--md-comp-icon-button-selected-hovered-icon-color:var(--md-comp-icon-button-error-selected-hovered-icon-color);--md-comp-icon-button-selected-focused-state-layer-color:var(--md-comp-icon-button-error-selected-focused-state-layer-color);--md-comp-icon-button-selected-focused-icon-color:var(--md-comp-icon-button-error-selected-focused-icon-color);--md-comp-icon-button-selected-pressed-state-layer-color:var(--md-comp-icon-button-error-selected-pressed-state-layer-color);--md-comp-icon-button-selected-pressed-icon-color:var(--md-comp-icon-button-error-selected-pressed-icon-color);--md-comp-icon-button-disabled-container-color:var(--md-comp-icon-button-error-disabled-container-color);--md-comp-icon-button-disabled-container-opacity:var(--md-comp-icon-button-error-disabled-container-opacity);--md-comp-icon-button-disabled-icon-color:var(--md-comp-icon-button-error-disabled-icon-color);--md-comp-icon-button-disabled-icon-opacity:var(--md-comp-icon-button-error-disabled-icon-opacity)}.IconButton.outlined{--md-comp-icon-button-container-color:transparent;--md-comp-icon-button-container-opacity:0;--md-comp-icon-button-outline-color:var(--md-comp-icon-button-outlined-outline-color);--md-comp-icon-button-outline-opacity:1;--md-comp-icon-button-icon-color:var(--md-comp-icon-button-outlined-icon-color);--md-comp-icon-button-hovered-state-layer-opacity:var(--md-comp-icon-button-outlined-hovered-state-layer-opacity);--md-comp-icon-button-hovered-state-layer-color:var(--md-comp-icon-button-outlined-hovered-state-layer-color);--md-comp-icon-button-hovered-icon-color:var(--md-comp-icon-button-outlined-hovered-icon-color);--md-comp-icon-button-focused-state-layer-opacity:var(--md-comp-icon-button-outlined-focused-state-layer-opacity);--md-comp-icon-button-focused-state-layer-color:var(--md-comp-icon-button-outlined-focused-state-layer-color);--md-comp-icon-button-focused-icon-color:var(--md-comp-icon-button-outlined-focused-icon-color);--md-comp-icon-button-pressed-state-layer-opacity:var(--md-comp-icon-button-outlined-pressed-state-layer-opacity);--md-comp-icon-button-pressed-state-layer-color:var(--md-comp-icon-button-outlined-pressed-state-layer-color);--md-comp-icon-button-pressed-icon-color:var(--md-comp-icon-button-outlined-pressed-icon-color);--md-comp-icon-button-unselected-container-color:transparent;--md-comp-icon-button-unselected-container-opacity:0;--md-comp-icon-button-unselected-icon-color:var(--md-comp-icon-button-outlined-unselected-icon-color);--md-comp-icon-button-unselected-hovered-state-layer-color:var(--md-comp-icon-button-outlined-unselected-hovered-state-layer-color);--md-comp-icon-button-unselected-hovered-icon-color:var(--md-comp-icon-button-outlined-unselected-hovered-icon-color);--md-comp-icon-button-unselected-focused-state-layer-color:var(--md-comp-icon-button-outlined-unselected-focused-state-layer-color);--md-comp-icon-button-unselected-focused-icon-color:var(--md-comp-icon-button-outlined-unselected-focused-icon-color);--md-comp-icon-button-unselected-pressed-state-layer-color:var(--md-comp-icon-button-outlined-unselected-pressed-state-layer-color);--md-comp-icon-button-unselected-pressed-icon-color:var(--md-comp-icon-button-outlined-unselected-pressed-icon-color);--md-comp-icon-button-selected-container-color:var(--md-comp-icon-button-outlined-selected-container-color);--md-comp-icon-button-selected-container-opacity:1;--md-comp-icon-button-selected-icon-color:var(--md-comp-icon-button-outlined-selected-icon-color);--md-comp-icon-button-selected-hovered-state-layer-color:var(--md-comp-icon-button-outlined-selected-hovered-state-layer-color);--md-comp-icon-button-selected-hovered-icon-color:var(--md-comp-icon-button-outlined-selected-hovered-icon-color);--md-comp-icon-button-selected-focused-state-layer-color:var(--md-comp-icon-button-outlined-selected-focused-state-layer-color);--md-comp-icon-button-selected-focused-icon-color:var(--md-comp-icon-button-outlined-selected-focused-icon-color);--md-comp-icon-button-selected-pressed-state-layer-color:var(--md-comp-icon-button-outlined-selected-pressed-state-layer-color);--md-comp-icon-button-selected-pressed-icon-color:var(--md-comp-icon-button-outlined-selected-pressed-icon-color);--md-comp-icon-button-disabled-outline-color:var(--md-comp-icon-button-outlined-unselected-disabled-outline-color);--md-comp-icon-button-disabled-container-opacity:0%;--md-comp-icon-button-disabled-icon-color:var(--md-comp-icon-button-outlined-disabled-icon-color);--md-comp-icon-button-disabled-icon-opacity:var(--md-comp-icon-button-outlined-disabled-icon-opacity)}.IconButton.outlined.selected{--md-comp-icon-button-disabled-container-color:var(--md-comp-icon-button-outlined-selected-disabled-container-color);--md-comp-icon-button-disabled-container-opacity:var(--md-comp-icon-button-outlined-selected-disabled-container-opacity);--md-comp-icon-button-disabled-outline-color:var(--md-comp-icon-button-outlined-disabled-outline-color);--md-comp-icon-button-disabled-outline-width:0px}.IconButton.standard{--md-comp-icon-button-container-color:transparent;--md-comp-icon-button-container-opacity:0;--md-comp-icon-button-icon-color:var(--md-comp-icon-button-standard-icon-color);--md-comp-icon-button-hovered-state-layer-opacity:var(--md-comp-icon-button-standard-hovered-state-layer-opacity);--md-comp-icon-button-hovered-state-layer-color:var(--md-comp-icon-button-standard-hovered-state-layer-color);--md-comp-icon-button-hovered-icon-color:var(--md-comp-icon-button-standard-hovered-icon-color);--md-comp-icon-button-focused-state-layer-opacity:var(--md-comp-icon-button-standard-focused-state-layer-opacity);--md-comp-icon-button-focused-state-layer-color:var(--md-comp-icon-button-standard-focused-state-layer-color);--md-comp-icon-button-focused-icon-color:var(--md-comp-icon-button-standard-focused-icon-color);--md-comp-icon-button-pressed-state-layer-opacity:var(--md-comp-icon-button-standard-pressed-state-layer-opacity);--md-comp-icon-button-pressed-state-layer-color:var(--md-comp-icon-button-standard-pressed-state-layer-color);--md-comp-icon-button-pressed-icon-color:var(--md-comp-icon-button-standard-pressed-icon-color);--md-comp-icon-button-unselected-container-color:transparent;--md-comp-icon-button-unselected-container-opacity:0;--md-comp-icon-button-unselected-icon-color:var(--md-comp-icon-button-standard-unselected-icon-color);--md-comp-icon-button-unselected-hovered-state-layer-color:var(--md-comp-icon-button-standard-unselected-hovered-state-layer-color);--md-comp-icon-button-unselected-hovered-icon-color:var(--md-comp-icon-button-standard-unselected-hovered-icon-color);--md-comp-icon-button-unselected-focused-state-layer-color:var(--md-comp-icon-button-standard-unselected-focused-state-layer-color);--md-comp-icon-button-unselected-focused-icon-color:var(--md-comp-icon-button-standard-unselected-focused-icon-color);--md-comp-icon-button-unselected-pressed-state-layer-color:var(--md-comp-icon-button-standard-unselected-pressed-state-layer-color);--md-comp-icon-button-unselected-pressed-icon-color:var(--md-comp-icon-button-standard-unselected-pressed-icon-color);--md-comp-icon-button-selected-container-color:var(--md-comp-icon-button-standard-selected-container-color);--md-comp-icon-button-selected-container-opacity:1;--md-comp-icon-button-selected-icon-color:var(--md-comp-icon-button-standard-selected-icon-color);--md-comp-icon-button-selected-hovered-state-layer-color:var(--md-comp-icon-button-standard-selected-hovered-state-layer-color);--md-comp-icon-button-selected-hovered-icon-color:var(--md-comp-icon-button-standard-selected-hovered-icon-color);--md-comp-icon-button-selected-focused-state-layer-color:var(--md-comp-icon-button-standard-selected-focused-state-layer-color);--md-comp-icon-button-selected-focused-icon-color:var(--md-comp-icon-button-standard-selected-focused-icon-color);--md-comp-icon-button-selected-pressed-state-layer-color:var(--md-comp-icon-button-standard-selected-pressed-state-layer-color);--md-comp-icon-button-selected-pressed-icon-color:var(--md-comp-icon-button-standard-selected-pressed-icon-color);--md-comp-icon-button-disabled-container-color:var(--md-comp-icon-button-standard-disabled-container-color);--md-comp-icon-button-disabled-container-opacity:var(--md-comp-icon-button-standard-disabled-container-opacity);--md-comp-icon-button-disabled-icon-color:var(--md-comp-icon-button-standard-disabled-icon-color);--md-comp-icon-button-disabled-icon-opacity:var(--md-comp-icon-button-standard-disabled-icon-opacity)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.IconButton.disabled.round:not(.selected){border-radius:var(--md-comp-icon-button-container-shape-round)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.IconButton.disabled.square:not(.selected){border-radius:var(--md-comp-icon-button-container-shape-square)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.IconButton.disabled.round.selected{border-radius:var(--md-comp-icon-button-selected-container-shape-round)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.IconButton.disabled.square.selected{border-radius:var(--md-comp-icon-button-selected-container-shape-square)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.IconButton:not(.disabled):not(:active).round:not(.selected){border-radius:var(--md-comp-icon-button-container-shape-round)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.IconButton:not(.disabled):not(:active).square:not(.selected){border-radius:var(--md-comp-icon-button-container-shape-square)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.IconButton:not(.disabled):not(:active).round.selected{border-radius:var(--md-comp-icon-button-selected-container-shape-round)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.IconButton:not(.disabled):not(:active).square.selected{border-radius:var(--md-comp-icon-button-selected-container-shape-square)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer>.IconButton:not(.disabled):active{border-radius:var(--md-comp-icon-button-pressed-container-shape)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer.extra-small:has(>.IconButton){--md-comp-icon-button-container-height:var(--md-comp-icon-button-xsmall-container-height);--md-comp-icon-button-outline-width:var(--md-comp-icon-button-xsmall-outlined-outline-width);--md-comp-icon-button-icon-size:var(--md-comp-icon-button-xsmall-icon-size);--md-comp-icon-button-container-shape-round:var(--md-comp-icon-button-xsmall-container-shape-round);--md-comp-icon-button-container-shape-square:var(--md-comp-icon-button-xsmall-container-shape-square);--md-comp-icon-button-pressed-container-shape:var(--md-comp-icon-button-xsmall-pressed-container-shape);--md-comp-icon-button-selected-container-shape-round:var(--md-comp-icon-button-xsmall-selected-container-shape-round);--md-comp-icon-button-selected-container-shape-square:var(--md-comp-icon-button-xsmall-selected-container-shape-square);--md-comp-icon-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-icon-button-xsmall-pressed-container-corner-size-motion-spring-duration);--md-comp-icon-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-icon-button-xsmall-pressed-container-corner-size-motion-spring-easing);--md-comp-icon-button-default-leading-space:var(--md-comp-icon-button-xsmall-default-leading-space);--md-comp-icon-button-default-trailing-space:var(--md-comp-icon-button-xsmall-default-trailing-space);--md-comp-icon-button-narrow-leading-space:var(--md-comp-icon-button-xsmall-narrow-leading-space);--md-comp-icon-button-narrow-trailing-space:var(--md-comp-icon-button-xsmall-narrow-trailing-space);--md-comp-icon-button-wide-leading-space:var(--md-comp-icon-button-xsmall-wide-leading-space);--md-comp-icon-button-wide-trailing-space:var(--md-comp-icon-button-xsmall-wide-trailing-space)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer.small:has(>.IconButton){--md-comp-icon-button-container-height:var(--md-comp-icon-button-small-container-height);--md-comp-icon-button-outline-width:var(--md-comp-icon-button-small-outlined-outline-width);--md-comp-icon-button-icon-size:var(--md-comp-icon-button-small-icon-size);--md-comp-icon-button-container-shape-round:var(--md-comp-icon-button-small-container-shape-round);--md-comp-icon-button-container-shape-square:var(--md-comp-icon-button-small-container-shape-square);--md-comp-icon-button-pressed-container-shape:var(--md-comp-icon-button-small-pressed-container-shape);--md-comp-icon-button-selected-container-shape-round:var(--md-comp-icon-button-small-selected-container-shape-round);--md-comp-icon-button-selected-container-shape-square:var(--md-comp-icon-button-small-selected-container-shape-square);--md-comp-icon-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-icon-button-small-pressed-container-corner-size-motion-spring-duration);--md-comp-icon-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-icon-button-small-pressed-container-corner-size-motion-spring-easing);--md-comp-icon-button-default-leading-space:var(--md-comp-icon-button-small-default-leading-space);--md-comp-icon-button-default-trailing-space:var(--md-comp-icon-button-small-default-trailing-space);--md-comp-icon-button-narrow-leading-space:var(--md-comp-icon-button-small-narrow-leading-space);--md-comp-icon-button-narrow-trailing-space:var(--md-comp-icon-button-small-narrow-trailing-space);--md-comp-icon-button-wide-leading-space:var(--md-comp-icon-button-small-wide-leading-space);--md-comp-icon-button-wide-trailing-space:var(--md-comp-icon-button-small-wide-trailing-space)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer.medium:has(>.IconButton){--md-comp-icon-button-container-height:var(--md-comp-icon-button-medium-container-height);--md-comp-icon-button-outline-width:var(--md-comp-icon-button-medium-outlined-outline-width);--md-comp-icon-button-icon-size:var(--md-comp-icon-button-medium-icon-size);--md-comp-icon-button-container-shape-round:var(--md-comp-icon-button-medium-container-shape-round);--md-comp-icon-button-container-shape-square:var(--md-comp-icon-button-medium-container-shape-square);--md-comp-icon-button-pressed-container-shape:var(--md-comp-icon-button-medium-pressed-container-shape);--md-comp-icon-button-selected-container-shape-round:var(--md-comp-icon-button-medium-selected-container-shape-round);--md-comp-icon-button-selected-container-shape-square:var(--md-comp-icon-button-medium-selected-container-shape-square);--md-comp-icon-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-icon-button-medium-pressed-container-corner-size-motion-spring-duration);--md-comp-icon-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-icon-button-medium-pressed-container-corner-size-motion-spring-easing);--md-comp-icon-button-default-leading-space:var(--md-comp-icon-button-medium-default-leading-space);--md-comp-icon-button-default-trailing-space:var(--md-comp-icon-button-medium-default-trailing-space);--md-comp-icon-button-narrow-leading-space:var(--md-comp-icon-button-medium-narrow-leading-space);--md-comp-icon-button-narrow-trailing-space:var(--md-comp-icon-button-medium-narrow-trailing-space);--md-comp-icon-button-wide-leading-space:var(--md-comp-icon-button-medium-wide-leading-space);--md-comp-icon-button-wide-trailing-space:var(--md-comp-icon-button-medium-wide-trailing-space)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer.large:has(>.IconButton){--md-comp-icon-button-container-height:var(--md-comp-icon-button-large-container-height);--md-comp-icon-button-outline-width:var(--md-comp-icon-button-large-outlined-outline-width);--md-comp-icon-button-icon-size:var(--md-comp-icon-button-large-icon-size);--md-comp-icon-button-container-shape-round:var(--md-comp-icon-button-large-container-shape-round);--md-comp-icon-button-container-shape-square:var(--md-comp-icon-button-large-container-shape-square);--md-comp-icon-button-pressed-container-shape:var(--md-comp-icon-button-large-pressed-container-shape);--md-comp-icon-button-selected-container-shape-round:var(--md-comp-icon-button-large-selected-container-shape-round);--md-comp-icon-button-selected-container-shape-square:var(--md-comp-icon-button-large-selected-container-shape-square);--md-comp-icon-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-icon-button-large-pressed-container-corner-size-motion-spring-duration);--md-comp-icon-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-icon-button-large-pressed-container-corner-size-motion-spring-easing);--md-comp-icon-button-default-leading-space:var(--md-comp-icon-button-large-default-leading-space);--md-comp-icon-button-default-trailing-space:var(--md-comp-icon-button-large-default-trailing-space);--md-comp-icon-button-narrow-leading-space:var(--md-comp-icon-button-large-narrow-leading-space);--md-comp-icon-button-narrow-trailing-space:var(--md-comp-icon-button-large-narrow-trailing-space);--md-comp-icon-button-wide-leading-space:var(--md-comp-icon-button-large-wide-leading-space);--md-comp-icon-button-wide-trailing-space:var(--md-comp-icon-button-large-wide-trailing-space)}:not(.ButtonGroup,.SplitButton)>*>.ButtonContainer.extra-large:has(>.IconButton){--md-comp-icon-button-container-height:var(--md-comp-icon-button-xlarge-container-height);--md-comp-icon-button-outline-width:var(--md-comp-icon-button-xlarge-outlined-outline-width);--md-comp-icon-button-icon-size:var(--md-comp-icon-button-xlarge-icon-size);--md-comp-icon-button-container-shape-round:var(--md-comp-icon-button-xlarge-container-shape-round);--md-comp-icon-button-container-shape-square:var(--md-comp-icon-button-xlarge-container-shape-square);--md-comp-icon-button-pressed-container-shape:var(--md-comp-icon-button-xlarge-pressed-container-shape);--md-comp-icon-button-selected-container-shape-round:var(--md-comp-icon-button-xlarge-selected-container-shape-round);--md-comp-icon-button-selected-container-shape-square:var(--md-comp-icon-button-xlarge-selected-container-shape-square);--md-comp-icon-button-pressed-container-corner-size-motion-spring-duration:var(--md-comp-icon-button-xlarge-pressed-container-corner-size-motion-spring-duration);--md-comp-icon-button-pressed-container-corner-size-motion-spring-easing:var(--md-comp-icon-button-xlarge-pressed-container-corner-size-motion-spring-easing);--md-comp-icon-button-default-leading-space:var(--md-comp-icon-button-xlarge-default-leading-space);--md-comp-icon-button-default-trailing-space:var(--md-comp-icon-button-xlarge-default-trailing-space);--md-comp-icon-button-narrow-leading-space:var(--md-comp-icon-button-xlarge-narrow-leading-space);--md-comp-icon-button-narrow-trailing-space:var(--md-comp-icon-button-xlarge-narrow-trailing-space);--md-comp-icon-button-wide-leading-space:var(--md-comp-icon-button-xlarge-wide-leading-space);--md-comp-icon-button-wide-trailing-space:var(--md-comp-icon-button-xlarge-wide-trailing-space)}

package/dist/components/Button/index.cjs

@@ -0,0 +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;

package/dist/components/Button/index.d.ts

@@ -0,0 +1 @@
+export declare function useCommonButtonProps(id: string, props: any, onPressed: (pressed: boolean) => void): readonly [import('react').HTMLAttributes<HTMLButtonElement>, boolean, boolean];

package/dist/components/Button/index.js

@@ -0,0 +1,55 @@
+import { useButtonGroupContext as e } from "./group/render.js";
+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;
+}
+//#endregion
+export { r as useCommonButtonProps };

package/dist/components/Button/split/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});require('./style.css');const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../default/index.cjs"),n=require("../icon/index.cjs");;/* empty css             */let r=require("classnames");r=e.__toESM(r,1);let i=require("react"),a=require("react/jsx-runtime");function o(e){let[o,s]=(0,i.useState)(!1),c=(0,i.useCallback)(()=>s(!0),[]),l=(0,i.useCallback)(()=>s(!1),[]);return(0,a.jsx)(`div`,{className:(0,r.default)(`SplitButton`,{[e.size??`small`]:!0}),children:(0,a.jsxs)(`div`,{className:`container`,children:[(0,a.jsx)(t.default,{color:e.color,size:e.size,label:e.label,className:`leading`}),(0,a.jsx)(n.default,{color:e.color,size:e.size,icon:`keyboard_arrow_down`,className:(0,r.default)(`trailing`,{selected:o}),onMenuOpen:c,onMenuClose:l,menuOpenBehavior:`click`,children:e.children})]})})}exports.default=o;

package/dist/components/Button/split/index.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { CommonButtonProps } from '../types';
+export interface SplitButtonProps extends Omit<CommonButtonProps, "shape" | "selectable"> {
+    label: string;
+}
+export default function SplitButton(props: PropsWithChildren<SplitButtonProps>): import('react').JSX.Element;