zds-pickers 4.4.0 → 4.5.0

package/dist/index.es.js

@@ -1614,19 +1614,26 @@ Z.Soundfont === void 0 && (Z.Soundfont = {}), Z.Soundfont.acoustic_grand_piano =
 var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 	let t = typeof e == "string" ? Number.parseInt(e, 10) : e;
 	return p.fromMidi(t);
-}, Tt = (e) => ({
-	play: (t, n) => {
-		let r = e[wt(t)];
-		if (!r) return { stop: () => {} };
-		let i = new Audio(r);
-		return i.volume = (n ?? 127) / 127, i.play(), { stop: () => {
-			i.pause(), i.currentTime = 0;
+}, Tt = .3, Et = Tt / 5, Dt = (e, t) => ({
+	play: (n, r) => {
+		let i = t[wt(n)];
+		if (!i) return { stop: () => {} };
+		let a = new Audio(i), o = e.createMediaElementSource(a), s = e.createGain();
+		s.gain.value = (r ?? 127) / 127, o.connect(s).connect(e.destination), a.play();
+		let c = !1;
+		return { stop: () => {
+			if (c) return;
+			c = !0;
+			let t = e.currentTime;
+			s.gain.cancelScheduledValues(t), s.gain.setValueAtTime(s.gain.value, t), s.gain.setTargetAtTime(0, t, Et), window.setTimeout(() => {
+				a.pause(), o.disconnect(), s.disconnect();
+			}, Tt * 1e3);
 		} };
 	},
 	stop: () => []
-}), Et = (e, t, n, r, i) => {
+}), Ot = (e, t, n, r, i) => {
 	let a = window.MIDI?.Soundfont?.[t];
-	return a ? Promise.resolve(Tt(a)) : (console.warn(`[zds-pickers] Bundled soundfont "${t}" not found; falling back to remote load.`), Ct(i) ? h.instrument(e, t, {
+	return a ? Promise.resolve(Dt(e, a)) : (console.warn(`[zds-pickers] Bundled soundfont "${t}" not found; falling back to remote load.`), Ct(i) ? h.instrument(e, t, {
 		format: n,
 		soundfont: r,
 		nameToUrl: (e, t, n) => `${i}/${t}/${e}-${n}.js`
@@ -1634,8 +1641,8 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 		format: n,
 		soundfont: r
 	}));
-}, Dt = (e) => {
-	let { audioContext: t, format: n, hostname: r, instrumentName: i, onChange: a, render: c, soundfont: l } = e, [u, f] = d(!0), [p, m] = d({}), [g, _] = d(null), v = o((e) => {
+}, kt = (e) => {
+	let { audioContext: t, format: n, hostname: r, instrumentName: i, onChange: a, render: c, soundfont: l } = e, [u, f] = d(!!i), [p, m] = d({}), [g, _] = d(null), v = o((e) => {
 		if (_(null), f(!0), !i) {
 			f(!1);
 			return;
@@ -1652,7 +1659,7 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 			});
 			return;
 		}
-		Et(t, e, n, l, r).then((e) => {
+		Ot(t, e, n, l, r).then((e) => {
 			_(e);
 		}).catch((t) => {
 			console.error(`[zds-pickers] Failed to load soundfont "${e}":`, t), f(!1);
@@ -1665,7 +1672,11 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 		l
 	]);
 	return s(() => {
-		i && v(i);
+		if (i) {
+			v(i);
+			return;
+		}
+		_(null), f(!1);
 	}, [i, v]), s(() => {
 		Ct(i) && f(!g);
 	}, [g, i]), c({
@@ -1695,7 +1706,7 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 			});
 		}
 	});
-}, Ot = [
+}, At = [
 	"C",
 	"C#",
 	"D",
@@ -1708,8 +1719,8 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 	"A",
 	"A#",
 	"B"
-], kt = 12 * .7, At = new window.AudioContext(), jt = ({ className: e, octave: t, height: n, renderNoteLabel: r, width: i, ...a }) => {
-	let o = (i / kt + 2) / n, s = p.midi(Ot[0] + String(t)) || 0, c = p.midi(Ot[Ot.length - 1] + String(t)) || 0;
+], jt = 12 * .7, Mt = new window.AudioContext(), Nt = ({ className: e, octave: t, height: n, renderNoteLabel: r, width: i, ...a }) => {
+	let o = (i / jt + 2) / n, s = p.midi(At[0] + String(t)) || 0, c = p.midi(At[At.length - 1] + String(t)) || 0;
 	return /* @__PURE__ */ _("div", { children: /* @__PURE__ */ _(St, {
 		className: e,
 		keyWidthToHeight: o,
@@ -1721,14 +1732,14 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 		width: i,
 		...a
 	}) });
-}, Mt = ({ className: e, format: t, height: n, hostname: r, instrumentName: i, octave: a = 4, onChange: o, onClick: s, onDoubleClick: c, onKeyMouseEnter: l, onKeyMouseLeave: u, renderNoteLabel: d, selectedNotes: f, soundfont: p, Tooltip: m, width: h }) => /* @__PURE__ */ _(Dt, {
-	audioContext: At,
+}, Pt = ({ className: e, format: t, height: n, hostname: r, instrumentName: i, octave: a = 4, onChange: o, onClick: s, onDoubleClick: c, onKeyMouseEnter: l, onKeyMouseLeave: u, renderNoteLabel: d, selectedNotes: f, soundfont: p, Tooltip: m, width: h }) => /* @__PURE__ */ _(kt, {
+	audioContext: Mt,
 	format: t,
 	hostname: r,
 	instrumentName: i,
 	onChange: o,
 	soundfont: p,
-	render: ({ isLoading: t, playNote: r, stopNote: i }) => /* @__PURE__ */ _(jt, {
+	render: ({ isLoading: t, playNote: r, stopNote: i }) => /* @__PURE__ */ _(Nt, {
 		disabled: t,
 		className: e,
 		height: n,
@@ -1744,7 +1755,7 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 		Tooltip: m,
 		width: h
 	})
-}), Nt = "__react_svg_text_measurement_id", Pt = [
+}), Ft = "__react_svg_text_measurement_id", It = [
 	"font-family",
 	"font-feature-settings",
 	"font-kerning",
@@ -1756,9 +1767,9 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 	"letter-spacing",
 	"text-transform",
 	"word-spacing"
-], Ft = (e) => Pt.map((t) => e.getPropertyValue(t)).join("|"), It = /* @__PURE__ */ new Map(), Lt = () => {
-	It.clear();
-}, Rt = (e, t, n, r) => {
+], Lt = (e) => It.map((t) => e.getPropertyValue(t)).join("|"), Rt = /* @__PURE__ */ new Map(), zt = () => {
+	Rt.clear();
+}, Bt = (e, t, n, r) => {
 	let { lineHeight: i, spaceWidth: a, wordsWithComputedWidth: o } = t;
 	return e.split(/\s+/).reduce((e, t) => {
 		let s = o[t], c = e[e.length - 1];
@@ -1773,11 +1784,11 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 		}
 		return e;
 	}, []);
-}, zt = (e, t, n) => {
+}, Vt = (e, t, n) => {
 	if (e && t) {
-		let r = Ft(e), i = It.get(r), a = [...new Set(String(n).split(/\s+/))], o = i?.widths, s = o ? a.filter((e) => !o.has(e)) : a;
+		let r = Lt(e), i = Rt.get(r), a = [...new Set(String(n).split(/\s+/))], o = i?.widths, s = o ? a.filter((e) => !o.has(e)) : a;
 		if (!i || s.length) {
-			for (let n of Pt) t.style.setProperty(n, e.getPropertyValue(n), e.getPropertyPriority(n));
+			for (let n of It) t.style.setProperty(n, e.getPropertyValue(n), e.getPropertyPriority(n));
 			if (!i) {
 				t.textContent = "\xA0";
 				let e = t?.getComputedTextLength?.() || 8, n = t.getBBox().height;
@@ -1785,7 +1796,7 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 					widths: /* @__PURE__ */ new Map(),
 					spaceWidth: e,
 					lineHeight: n
-				}, It.set(r, i);
+				}, Rt.set(r, i);
 			}
 			for (let e of s) t.textContent = e, i.widths.set(e, t.getBBox().width);
 			t.setAttribute("style", "");
@@ -1798,7 +1809,7 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 			lineHeight: i.lineHeight
 		};
 	}
-}, Bt = (e) => {
+}, Ht = (e) => {
 	let { className: t = "", dx: n = 0, dy: r = 0, maxHeight: i = 1e3, maxWidth: a = 1e3, text: c = "", verticalAnchor: f = "start", x: p = 0, y: m = 0, transform: h = "", ...y } = e, [b, x] = d(), [S, C] = d([]), [w, T] = d(), E = u({}), D = l(() => {
 		let e = S.filter(({ showLine: e }) => e);
 		return e.length ? e : c.split(/\n/).map((e) => ({
@@ -1810,21 +1821,21 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 		T(e === null ? void 0 : window.getComputedStyle(e));
 	}, []);
 	s(() => {
-		let e = document.getElementById(Nt);
+		let e = document.getElementById(Ft);
 		if (e === null) {
 			let e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-			e.setAttribute("id", Nt), e.setAttribute("aria-hidden", "true"), e.style.position = "fixed", e.style.left = "-9999px", e.style.top = "0";
+			e.setAttribute("id", Ft), e.setAttribute("aria-hidden", "true"), e.style.position = "fixed", e.style.left = "-9999px", e.style.top = "0";
 			let t = document.createElementNS("http://www.w3.org/2000/svg", "text");
 			e.appendChild(t), document.body.appendChild(e), E.current = t;
 			return;
 		}
 		E.current = e.tagName.toLowerCase() === "text" ? e : e.querySelector("text") ?? e;
 	}, []), s(() => {
-		let e = zt(w, E.current, c);
+		let e = Vt(w, E.current, c);
 		x(e);
 	}, [c, w]), s(() => {
 		if (a && b) {
-			let e = c.split(/\n/).flatMap((e) => Rt(e, b, a, i));
+			let e = c.split(/\n/).flatMap((e) => Bt(e, b, a, i));
 			C(e);
 		}
 	}, [
@@ -1861,12 +1872,12 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 			children: e.words.join(" ")
 		}, t)), S.length && D.length !== S.length && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("tspan", { children: "..." }), /* @__PURE__ */ _("title", { children: c })] })] })
 	});
-}, Vt = 255, { IndicatorsContainer: Ht, Placeholder: Ut, ValueContainer: Wt } = b, Gt = {
+}, Ut = 255, { IndicatorsContainer: Wt, Placeholder: Gt, ValueContainer: Kt } = b, qt = {
 	label: "--",
 	value: 255
-}, Kt = (e) => {
+}, Jt = (e) => {
 	let { children: t, ...n } = e, r = n.selectProps?.actionButton;
-	return /* @__PURE__ */ _(Ht, {
+	return /* @__PURE__ */ _(Wt, {
 		...n,
 		children: /* @__PURE__ */ v("div", {
 			onMouseDown: (e) => {
@@ -1876,15 +1887,15 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 			children: [r, t]
 		})
 	});
-}, qt = ({ children: e, ...n }) => /* @__PURE__ */ v(Wt, {
+}, Yt = ({ children: e, ...n }) => /* @__PURE__ */ v(Kt, {
 	...n,
-	children: [/* @__PURE__ */ _(Ut, {
+	children: [/* @__PURE__ */ _(Gt, {
 		...n,
 		innerProps: n.innerProps || {},
 		className: n.hasValue || n.selectProps.inputValue ? "shrunk" : "",
 		isFocused: n.isFocused ?? !1,
 		children: n.selectProps.placeholder
-	}), t.map(e, (e) => a(e) && e.type !== Ut ? e : null)]
+	}), t.map(e, (e) => a(e) && e.type !== Gt ? e : null)]
 }), Q = i((e, t) => {
 	let { components: n, disabled: r, label: i, onChange: a, options: s = [], preserveMenuWidth: c, shrinkLabel: u, value: d, ...f } = e, p = o((e) => {
 		e && a(e.value);
@@ -1926,8 +1937,8 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 			...f,
 			classNamePrefix: "zds-pickers",
 			components: {
-				IndicatorsContainer: Kt,
-				ValueContainer: qt,
+				IndicatorsContainer: Jt,
+				ValueContainer: Yt,
 				...n
 			},
 			isDisabled: r,
@@ -1947,7 +1958,7 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 			...f,
 			classNamePrefix: "zds-pickers",
 			components: {
-				IndicatorsContainer: Kt,
+				IndicatorsContainer: Jt,
 				...n
 			},
 			isDisabled: r,
@@ -1958,14 +1969,14 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 			value: h
 		})]
 	});
-}), Jt = i((e, t) => /* @__PURE__ */ _(Q, {
+}), Xt = i((e, t) => /* @__PURE__ */ _(Q, {
 	...e,
 	options: H,
 	ref: t
-})), Yt = z(16).map((e) => ({
+})), Zt = z(16).map((e) => ({
 	value: e,
 	label: e
-})), Xt = i(({ channels: e, className: t, ...n }, r) => {
+})), Qt = i(({ channels: e, className: t, ...n }, r) => {
 	let [i, a] = d([]), c = o(({ value: t, label: n }, { context: r }) => {
 		if (t === "separator") return /* @__PURE__ */ _("span", {
 			className: "zds-mappings-user-mapping",
@@ -1988,7 +1999,7 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 		});
 	}, [e]);
 	return s(() => {
-		let t = Yt.sort((t, n) => typeof t.value == "number" && typeof n.value == "number" && e[t.value] && !e[n.value] ? -1 : typeof t.value == "number" && typeof n.value == "number" && !e[t.value] && e[n.value] ? 1 : typeof t.value == "number" && typeof n.value == "number" ? t.value - n.value : 0), n = t.filter(({ value: t }) => typeof t == "number" && !!e[t] || t === 255).length, r = t.some(({ value: e }) => e === "separator");
+		let t = Zt.sort((t, n) => typeof t.value == "number" && typeof n.value == "number" && e[t.value] && !e[n.value] ? -1 : typeof t.value == "number" && typeof n.value == "number" && !e[t.value] && e[n.value] ? 1 : typeof t.value == "number" && typeof n.value == "number" ? t.value - n.value : 0), n = t.filter(({ value: t }) => typeof t == "number" && !!e[t] || t === 255).length, r = t.some(({ value: e }) => e === "separator");
 		n && n < 16 && !r && t.splice(n, 0, {
 			label: /* @__PURE__ */ _("hr", {}),
 			value: "separator"
@@ -2000,54 +2011,54 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 		options: i,
 		ref: r
 	});
-}), Zt = z(16).map((e) => ({
+}), $t = z(16).map((e) => ({
 	value: e,
 	label: `Channel ${e + 1}`
-})), Qt = (e, t) => !t || String(e.label).toLowerCase().includes(t.toLowerCase()), $t = i(({ className: e, value: t = 255, ...n }, r) => {
+})), en = (e, t) => !t || String(e.label).toLowerCase().includes(t.toLowerCase()), tn = i(({ className: e, value: t = 255, ...n }, r) => {
 	let i = o((e, { context: n }) => t === void 0 ? "--" : n === "value" ? e.label : Number.parseInt(String(e.value)) + 1, [t]);
 	return /* @__PURE__ */ _(Q, {
 		...n,
 		className: m(e, "channel-picker"),
-		filterOptions: Qt,
+		filterOptions: en,
 		formatOptionLabel: i,
-		options: Zt,
+		options: $t,
 		value: t,
 		ref: r
 	});
-}), en = /* @__PURE__ */ new Set(["C", "F"]), tn = /* @__PURE__ */ new Set(["E", "B"]), nn = (e) => ({ isAccidental: t, isActive: n, midiNumber: r }) => {
+}), nn = /* @__PURE__ */ new Set(["C", "F"]), rn = /* @__PURE__ */ new Set(["E", "B"]), an = (e) => ({ isAccidental: t, isActive: n, midiNumber: r }) => {
 	let i = p.pitchClass(p.fromMidi(r) ?? ""), a = ye(r, e);
 	return a ? /* @__PURE__ */ _("div", {
 		className: m("ReactPiano__NoteLabel", "ReactPiano__NoteLabel--noteName", {
 			"ReactPiano__NoteLabel--active": n,
 			"ReactPiano__NoteLabel--accidental": t,
 			"ReactPiano__NoteLabel--natural": !t,
-			"ReactPiano__NoteLabel--nudgeLeft": !t && en.has(i),
-			"ReactPiano__NoteLabel--nudgeRight": !t && tn.has(i)
+			"ReactPiano__NoteLabel--nudgeLeft": !t && nn.has(i),
+			"ReactPiano__NoteLabel--nudgeRight": !t && rn.has(i)
 		}),
 		children: a
 	}) : null;
-}, rn = (e) => {
-	let { value: t, onChange: n, disabled: r = !1, height: i = 100, noteLabels: a, showNoteNames: s = !1, width: c = 300, octave: u = 4, ...d } = e, f = l(() => nn(a), [a]), p = o((e) => {
+}, on = (e) => {
+	let { value: t, onChange: n, disabled: r = !1, height: i = 100, muted: a = !1, noteLabels: s, showNoteNames: c = !1, width: u = 300, octave: d = 4, ...f } = e, p = l(() => an(s), [s]), m = o((e) => {
 		r || n(e);
-	}, [r, n]), m = 60 + (u - 4) * 12, h = m + 11, g = t !== 255 && t >= m && t <= h;
-	return /* @__PURE__ */ _(Mt, {
-		...d,
-		className: s ? "ReactPiano--showNoteNames" : void 0,
-		selectedNotes: g ? [t] : [],
+	}, [r, n]), h = 60 + (d - 4) * 12, g = h + 11, v = t !== 255 && t >= h && t <= g;
+	return /* @__PURE__ */ _(Pt, {
+		...f,
+		className: c ? "ReactPiano--showNoteNames" : void 0,
+		selectedNotes: v ? [t] : [],
 		disabled: r,
 		height: i,
-		renderNoteLabel: s ? f : void 0,
-		width: c,
-		octave: u,
-		onClick: p,
-		instrumentName: "acoustic_grand_piano"
+		renderNoteLabel: c ? p : void 0,
+		width: u,
+		octave: d,
+		onClick: m,
+		instrumentName: a ? void 0 : "acoustic_grand_piano"
 	});
-}, an = (e) => {
+}, sn = (e) => {
 	let [t, n] = d(e);
 	return s(() => {
 		n(e);
 	}, [e]), [t, n];
-}, on = class extends e.Component {
+}, cn = class extends e.Component {
 	static defaultProps = { step: 1 };
 	render() {
 		let e = this.props, t = {};
@@ -2070,20 +2081,20 @@ var Ct = (e) => e != null && !Number.isNaN(e), wt = (e) => {
 };
 //#endregion
 //#region lib/rotaryKnob/utils.ts
-function sn(e) {
+function ln(e) {
 	return e * Math.PI / 180;
 }
-function cn(e, t) {
+function un(e, t) {
 	return e >= 0 && t >= 0 ? 1 : e <= 0 && t >= 0 ? 2 : e <= 0 && t <= 0 ? 3 : e >= 0 && t <= 0 ? 4 : 1;
 }
-function ln(e, t) {
+function dn(e, t) {
 	if (e === 0 && t === 0) return 0;
-	let n = Math.atan(e / t) * 180 / Math.PI, r = cn(e, t);
+	let n = Math.atan(e / t) * 180 / Math.PI, r = un(e, t);
 	return r === 1 && (n = 90 - n), r === 2 && (n = 90 - n), r === 3 && (n = 270 - n), r === 4 && (n = 270 - n), n;
 }
 //#endregion
 //#region lib/rotaryKnob/helpers/DrawCircle.tsx
-var un = class extends e.Component {
+var fn = class extends e.Component {
 	render() {
 		let { r: e, borderColor: t = "black", fillColor: n = "transparent", borderWidth: r = 2, fillOpacity: i = 1, ...a } = this.props;
 		return /* @__PURE__ */ _("circle", {
@@ -2094,7 +2105,7 @@ var un = class extends e.Component {
 			...a
 		});
 	}
-}, dn = class extends e.Component {
+}, pn = class extends e.Component {
 	render() {
 		let { width: e = 2, color: t = "black", p1: n, p2: r, ...i } = this.props;
 		return /* @__PURE__ */ _("line", {
@@ -2107,7 +2118,7 @@ var un = class extends e.Component {
 			y2: r.y
 		});
 	}
-}, fn = class extends e.Component {
+}, mn = class extends e.Component {
 	render() {
 		let { children: e, ...t } = this.props, n = { overlay: Object.assign({
 			width: "100%",
@@ -2126,7 +2137,7 @@ var un = class extends e.Component {
 			children: e
 		}), document.body);
 	}
-}, pn = class extends e.Component {
+}, hn = class extends e.Component {
 	state = {
 		centerX: 0,
 		centerY: 0,
@@ -2135,7 +2146,7 @@ var un = class extends e.Component {
 	};
 	static getDerivedStateFromProps(e, t) {
 		if (!e.svgRef) return t;
-		let n = e.svgRef.getBoundingClientRect(), r = n.width / 2, i = e.radius * Math.cos(sn(e.valueAngle - 90)), a = e.radius * Math.sin(sn(e.valueAngle - 90));
+		let n = e.svgRef.getBoundingClientRect(), r = n.width / 2, i = e.radius * Math.cos(ln(e.valueAngle - 90)), a = e.radius * Math.sin(ln(e.valueAngle - 90));
 		return {
 			...t,
 			centerX: n.left + r,
@@ -2146,7 +2157,7 @@ var un = class extends e.Component {
 	}
 	render() {
 		let e = this.props.minimumDragDistance <= this.props.radius ? "green" : "grey", t = this.props.minimumDragDistance <= this.props.radius ? "#88E22D" : "#D8D8D8", n = this.props.minimumDragDistance >= this.props.radius;
-		return /* @__PURE__ */ _(fn, { children: /* @__PURE__ */ v("svg", {
+		return /* @__PURE__ */ _(mn, { children: /* @__PURE__ */ v("svg", {
 			style: {
 				position: "absolute",
 				top: "0",
@@ -2165,7 +2176,7 @@ var un = class extends e.Component {
 					orient: "auto",
 					children: /* @__PURE__ */ _("path", { d: "M 0 0 L 10 5 L 0 10 z" })
 				}) }),
-				/* @__PURE__ */ _(un, {
+				/* @__PURE__ */ _(fn, {
 					borderColor: e,
 					fillColor: t,
 					fillOpacity: .02,
@@ -2173,7 +2184,7 @@ var un = class extends e.Component {
 					cx: this.state.centerX,
 					cy: this.state.centerY
 				}),
-				n && /* @__PURE__ */ _(un, {
+				n && /* @__PURE__ */ _(fn, {
 					borderColor: e,
 					fillColor: t,
 					fillOpacity: 0,
@@ -2181,7 +2192,7 @@ var un = class extends e.Component {
 					cx: this.state.centerX,
 					cy: this.state.centerY
 				}),
-				/* @__PURE__ */ _(dn, {
+				/* @__PURE__ */ _(pn, {
 					p1: {
 						x: this.state.centerX,
 						y: this.state.centerY
@@ -2195,12 +2206,12 @@ var un = class extends e.Component {
 			]
 		}) });
 	}
-}, mn = {
+}, gn = {
 	knobX: 71,
 	knobY: 71,
 	svg: "\n\n<svg width=\"204px\" height=\"204px\" viewBox=\"0 0 204 204\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->\n    <desc>Created with Sketch.</desc>\n    <defs>\n        <linearGradient x1=\"50%\" y1=\"50%\" x2=\"50%\" y2=\"100%\" id=\"linearGradient-1\">\n            <stop stop-color=\"#444040\" stop-opacity=\"0.51098279\" offset=\"0%\"></stop>\n            <stop stop-color=\"#131111\" stop-opacity=\"0.893200861\" offset=\"100%\"></stop>\n        </linearGradient>\n        <circle id=\"path-2\" cx=\"98.0400009\" cy=\"98.0400009\" r=\"98.0400009\"></circle>\n        <filter x=\"-3.3%\" y=\"-3.3%\" width=\"106.6%\" height=\"106.6%\" filterUnits=\"objectBoundingBox\" id=\"filter-3\">\n            <feMorphology radius=\"0.5\" operator=\"dilate\" in=\"SourceAlpha\" result=\"shadowSpreadOuter1\"></feMorphology>\n            <feOffset dx=\"0\" dy=\"0\" in=\"shadowSpreadOuter1\" result=\"shadowOffsetOuter1\"></feOffset>\n            <feGaussianBlur stdDeviation=\"2\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"></feGaussianBlur>\n            <feComposite in=\"shadowBlurOuter1\" in2=\"SourceAlpha\" operator=\"out\" result=\"shadowBlurOuter1\"></feComposite>\n            <feColorMatrix values=\"0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0\" type=\"matrix\" in=\"shadowBlurOuter1\"></feColorMatrix>\n        </filter>\n        <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"linearGradient-4\">\n            <stop stop-color=\"#FFFFFF\" stop-opacity=\"0.5\" offset=\"0%\"></stop>\n            <stop stop-color=\"#000000\" stop-opacity=\"0.5\" offset=\"100%\"></stop>\n        </linearGradient>\n        <circle id=\"path-5\" cx=\"98\" cy=\"98\" r=\"86\"></circle>\n        <filter x=\"-4.1%\" y=\"-3.5%\" width=\"108.1%\" height=\"108.1%\" filterUnits=\"objectBoundingBox\" id=\"filter-6\">\n            <feMorphology radius=\"0.5\" operator=\"dilate\" in=\"SourceAlpha\" result=\"shadowSpreadOuter1\"></feMorphology>\n            <feOffset dx=\"0\" dy=\"1\" in=\"shadowSpreadOuter1\" result=\"shadowOffsetOuter1\"></feOffset>\n            <feGaussianBlur stdDeviation=\"2\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"></feGaussianBlur>\n            <feComposite in=\"shadowBlurOuter1\" in2=\"SourceAlpha\" operator=\"out\" result=\"shadowBlurOuter1\"></feComposite>\n            <feColorMatrix values=\"0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0\" type=\"matrix\" in=\"shadowBlurOuter1\"></feColorMatrix>\n        </filter>\n    </defs>\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"s13\" transform=\"translate(4.000000, 4.000000)\">\n            <g id=\"container\">\n                <g id=\"Oval-2\">\n                    <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-3)\" xlink:href=\"#path-2\"></use>\n                    <use stroke=\"#979797\" stroke-width=\"1\" fill=\"url(#linearGradient-1)\" fill-rule=\"evenodd\" xlink:href=\"#path-2\"></use>\n                </g>\n                <g id=\"Oval-2\">\n                    <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-6)\" xlink:href=\"#path-5\"></use>\n                    <use fill=\"\" fill-rule=\"evenodd\" xlink:href=\"#path-5\"></use>\n                    <use stroke=\"#4A4A4A\" stroke-width=\"1\" fill=\"url(#linearGradient-4)\" fill-rule=\"evenodd\" xlink:href=\"#path-5\"></use>\n                </g>\n                <g id=\"knob\" transform=\"translate(27.431373, 27.431373)\">\n                    <circle id=\"Oval-5\" fill=\"#322E2E\" cx=\"71\" cy=\"71\" r=\"71\"></circle>\n\n                    <!-- Fixed position marks -->\n                    <!-- 12:00 position mark (less prominent) -->\n                    <line x1=\"71\" y1=\"15\" x2=\"71\" y2=\"25\" stroke=\"#666666\" stroke-width=\"1\" opacity=\"0.6\"/>\n\n                    <!-- End position marks (0 and 127) -->\n                    <!-- 0 position mark (40 degrees from top, clockwise) -->\n                    <line x1=\"95.5\" y1=\"45.5\" x2=\"88.5\" y2=\"52.5\" stroke=\"#CCCCCC\" stroke-width=\"2\"/>\n\n                    <!-- 127 position mark (320 degrees from top, clockwise) -->\n                    <line x1=\"46.5\" y1=\"45.5\" x2=\"53.5\" y2=\"52.5\" stroke=\"#CCCCCC\" stroke-width=\"2\"/>\n\n                    <!-- Rotating indicator (existing) -->\n                    <path d=\"M70.0686275,4.17063061 L86.5686275,65.2689929 C81.3642501,66.811221 75.8642501,67.5735686 70.0686275,67.5560356 C64.2730048,67.5385027 58.7730048,66.7761551 53.5686275,65.2689929 L70.0686275,4.17063061 Z\" id=\"Rectangle-Copy\" fill=\"#E6D7D7\" transform=\"translate(70.068627, 35.863481) scale(1, -1) translate(-70.068627, -35.863481) \"></path>\n                </g>\n            </g>\n        </g>\n    </g>\n</svg>\n"
-}, hn = (e) => {
-	let { centered: t, clampMax: n = 360, clampMin: r = 0, defaultValue: i = 0, disabled: a = !1, format: o = (e) => e.toFixed(0), max: c = 100, min: l = 0, onChange: f = () => {}, onEnd: p = () => {}, onStart: m = () => {}, preciseMode: h = !0, rotateDegrees: y = 0, skin: b = mn, step: E = 1, style: D, unlockDistance: O = 100, value: k, ...A } = e, [j, M] = d(k !== void 0), N = u(null), P = u(null), F, I, [L, R] = d({
+}, _n = (e) => {
+	let { centered: t, clampMax: n = 360, clampMin: r = 0, defaultValue: i = 0, disabled: a = !1, format: o = (e) => e.toFixed(0), max: c = 100, min: l = 0, onChange: f = () => {}, onEnd: p = () => {}, onStart: m = () => {}, preciseMode: h = !0, rotateDegrees: y = 0, skin: b = gn, step: E = 1, style: D, unlockDistance: O = 100, value: k, ...A } = e, [j, M] = d(k !== void 0), N = u(null), P = u(null), F, I, [L, R] = d({
 		svgRef: void 0,
 		dragging: !1,
 		dragDistance: 0,
@@ -2254,15 +2265,15 @@ var un = class extends e.Component {
 			n = t.getBoundingClientRect(), e.classed("dragging", !0), m(), a = {
 				x: l.x - r,
 				y: l.y - i
-			}, o = ln(a.x, a.y), s = B(u), c = !1;
+			}, o = dn(a.x, a.y), s = B(u), c = !1;
 		}
 		function u(e) {
 			let t = {
 				x: e.x - r,
 				y: e.y - i
 			}, n = Math.sqrt(t.x ** 2 + t.y ** 2);
-			h ? !c && n >= O && (a = t, o = ln(t.x, t.y), c = !0) : c = !0;
-			let l = ln(t.x, t.y) - o, u = s + l;
+			h ? !c && n >= O && (a = t, o = dn(t.x, t.y), c = !0) : c = !0;
+			let l = dn(t.x, t.y) - o, u = s + l;
 			u = z(u), c && ne(u), R((t) => ({
 				...t,
 				dragDistance: n,
@@ -2316,7 +2327,7 @@ var un = class extends e.Component {
 		ref: N,
 		style: ae.container,
 		...A,
-		children: [/* @__PURE__ */ _(on, {
+		children: [/* @__PURE__ */ _(cn, {
 			disabled: a,
 			inputRef: P,
 			style: ae.input,
@@ -2335,23 +2346,23 @@ var un = class extends e.Component {
 				transform: `$ORIGINAL rotate(${ie}, ${b.knobX}, ${b.knobY})`
 			}), se]
 		})]
-	}), L.dragging && h && /* @__PURE__ */ _(pn, {
+	}), L.dragging && h && /* @__PURE__ */ _(hn, {
 		svgRef: L.svgRef,
 		radius: L.dragDistance,
 		mousePos: L.mousePos,
 		minimumDragDistance: O,
 		valueAngle: L.valueAngle
 	})] });
-}, gn = .5, _n = (e, t, n, r) => {
+}, vn = .5, yn = (e, t, n, r) => {
 	let i = r * Math.PI / 180;
 	return [e + n * Math.sin(i), t - n * Math.cos(i)];
-}, $ = (e) => String(Math.round(e * 1e3) / 1e3), vn = ({ value: e, min: t, max: n, centered: r = !1, cx: i = 100, cy: a = 100, r: o = 93, clampMin: s = 40, clampMax: c = 320, rotateDegrees: l = 180 }) => {
+}, $ = (e) => String(Math.round(e * 1e3) / 1e3), bn = ({ value: e, min: t, max: n, centered: r = !1, cx: i = 100, cy: a = 100, r: o = 93, clampMin: s = 40, clampMax: c = 320, rotateDegrees: l = 180 }) => {
 	if (n === t) return "";
 	let u = s + Math.min(1, Math.max(0, (e - t) / (n - t))) * (c - s), d = r ? (s + c) / 2 : s, f = u - d;
-	if (Math.abs(f) < gn) return "";
-	let p = (e) => ((e + l) % 360 + 360) % 360, [m, h] = _n(i, a, o, p(d)), [g, _] = _n(i, a, o, p(u)), v = +(Math.abs(f) > 180), y = +(f > 0);
+	if (Math.abs(f) < vn) return "";
+	let p = (e) => ((e + l) % 360 + 360) % 360, [m, h] = yn(i, a, o, p(d)), [g, _] = yn(i, a, o, p(u)), v = +(Math.abs(f) > 180), y = +(f > 0);
 	return `M ${$(m)} ${$(h)} A ${$(o)} ${$(o)} 0 ${v} ${y} ${$(g)} ${$(_)}`;
-}, yn = 100, bn = 100, xn = 93, Sn = {
+}, xn = 100, Sn = 100, Cn = 93, wn = {
 	knobX: 71.44,
 	knobY: 71.44,
 	svg: "\n  <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"207px\" height=\"207px\" viewBox=\"0 0 207 207\" version=\"1.1\">\n  <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->\n  <desc>Created with Sketch.</desc>\n  <defs>\n      <linearGradient x1=\"50%\" y1=\"50%\" x2=\"50%\" y2=\"100%\" id=\"27c61b0f-392f-962d-de12-cb9da898274b\">\n          <stop stop-color=\"#444040\" stop-opacity=\"0.51098279\" offset=\"0%\"/>\n          <stop stop-color=\"#131111\" stop-opacity=\"0.893200861\" offset=\"100%\"/>\n      </linearGradient>\n      <circle id=\"e966567b-3869-4bcd-76b6-2cf084e45390\" cx=\"100.497487\" cy=\"100.497487\" r=\"99.4974874\"/>\n      <filter x=\"-3.3%\" y=\"-3.3%\" width=\"106.5%\" height=\"106.5%\" filterUnits=\"objectBoundingBox\" id=\"e2e6829f-0086-96b2-e92a-6f3809b8ac61\">\n          <feMorphology radius=\"0.5\" operator=\"dilate\" in=\"SourceAlpha\" result=\"shadowSpreadOuter1\"/>\n          <feOffset dx=\"0\" dy=\"0\" in=\"shadowSpreadOuter1\" result=\"shadowOffsetOuter1\"/>\n          <feGaussianBlur stdDeviation=\"2\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"/>\n          <feComposite in=\"shadowBlurOuter1\" in2=\"SourceAlpha\" operator=\"out\" result=\"shadowBlurOuter1\"/>\n          <feColorMatrix values=\"0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0\" type=\"matrix\" in=\"shadowBlurOuter1\"/>\n      </filter>\n      <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"0facd5c9-8e04-e83f-4842-8ba16f949942\">\n          <stop stop-color=\"#FFFFFF\" stop-opacity=\"0.5\" offset=\"0%\"/>\n          <stop stop-color=\"#000000\" stop-opacity=\"0.5\" offset=\"100%\"/>\n      </linearGradient>\n      <circle id=\"c54189ed-7ea3-956c-f040-f0207548b268\" cx=\"100.432161\" cy=\"100.432161\" r=\"86.4321608\"/>\n      <filter x=\"-4.0%\" y=\"-3.5%\" width=\"108.1%\" height=\"108.1%\" filterUnits=\"objectBoundingBox\" id=\"dedf2e7e-f008-c315-f682-e424d670f210\">\n          <feMorphology radius=\"0.5\" operator=\"dilate\" in=\"SourceAlpha\" result=\"shadowSpreadOuter1\"/>\n          <feOffset dx=\"0\" dy=\"1\" in=\"shadowSpreadOuter1\" result=\"shadowOffsetOuter1\"/>\n          <feGaussianBlur stdDeviation=\"2\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"/>\n          <feComposite in=\"shadowBlurOuter1\" in2=\"SourceAlpha\" operator=\"out\" result=\"shadowBlurOuter1\"/>\n          <feColorMatrix values=\"0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0\" type=\"matrix\" in=\"shadowBlurOuter1\"/>\n      </filter>\n\n      <filter x=\"-5.3%\" y=\"-11.3%\" width=\"110.7%\" height=\"122.6%\" filterUnits=\"objectBoundingBox\" id=\"12f618f7-e258-b597-3ed6-242484ddad8f\">\n          <feOffset dx=\"0\" dy=\"0\" in=\"SourceAlpha\" result=\"shadowOffsetOuter1\"/>\n          <feGaussianBlur stdDeviation=\"2\" in=\"shadowOffsetOuter1\" result=\"shadowBlurOuter1\"/>\n          <feColorMatrix values=\"0 0 0 0 0.915577168   0 0 0 0 0.797591325   0 0 0 0 0.601479722  0 0 0 1 0\" type=\"matrix\" in=\"shadowBlurOuter1\"/>\n      </filter>\n      <pattern id=\"3cc0e5b8-1f0a-886b-f635-8fcb19212870\" width=\"8.04411765\" height=\"8.04411765\" x=\"21.9558824\" y=\"21.9558824\" patternUnits=\"userSpaceOnUse\">\n          <use xlink:href=\"#2b8719c1-286b-ebf8-a488-ac66a6598fc5\" transform=\"scale(0.167585784,0.167585784)\"/>\n      </pattern>\n      <image id=\"2b8719c1-286b-ebf8-a488-ac66a6598fc5\" width=\"48\" height=\"48\" xlink:href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEGWlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPrtzZyMkzlNsNIV0qD8NJQ2TVjShtLp/3d02bpZJNtoi6GT27s6Yyc44M7v9oU9FUHwx6psUxL+3gCAo9Q/bPrQvlQol2tQgKD60+INQ6Ium65k7M5lpurHeZe58853vnnvuuWfvBei5qliWkRQBFpquLRcy4nOHj4g9K5CEh6AXBqFXUR0rXalMAjZPC3e1W99Dwntf2dXd/p+tt0YdFSBxH2Kz5qgLiI8B8KdVy3YBevqRHz/qWh72Yui3MUDEL3q44WPXw3M+fo1pZuQs4tOIBVVTaoiXEI/MxfhGDPsxsNZfoE1q66ro5aJim3XdoLFw72H+n23BaIXzbcOnz5mfPoTvYVz7KzUl5+FRxEuqkp9G/Ajia219thzg25abkRE/BpDc3pqvphHvRFys2weqvp+krbWKIX7nhDbzLOItiM8358pTwdirqpPFnMF2xLc1WvLyOwTAibpbmvHHcvttU57y5+XqNZrLe3lE/Pq8eUj2fXKfOe3pfOjzhJYtB/yll5SDFcSDiH+hRkH25+L+sdxKEAMZahrlSX8ukqMOWy/jXW2m6M9LDBc31B9LFuv6gVKg/0Szi3KAr1kGq1GMjU/aLbnq6/lRxc4XfJ98hTargX++DbMJBSiYMIe9Ck1YAxFkKEAG3xbYaKmDDgYyFK0UGYpfoWYXG+fAPPI6tJnNwb7ClP7IyF+D+bjOtCpkhz6CFrIa/I6sFtNl8auFXGMTP34sNwI/JhkgEtmDz14ySfaRcTIBInmKPE32kxyyE2Tv+thKbEVePDfW/byMM1Kmm0XdObS7oGD/MypMXFPXrCwOtoYjyyn7BV29/MZfsVzpLDdRtuIZnbpXzvlf+ev8MvYr/Gqk4H/kV/G3csdazLuyTMPsbFhzd1UabQbjFvDRmcWJxR3zcfHkVw9GfpbJmeev9F08WW8uDkaslwX6avlWGU6NRKz0g/SHtCy9J30o/ca9zX3Kfc19zn3BXQKRO8ud477hLnAfc1/G9mrzGlrfexZ5GLdn6ZZrrEohI2wVHhZywjbhUWEy8icMCGNCUdiBlq3r+xafL549HQ5jH+an+1y+LlYBifuxAvRN/lVVVOlwlCkdVm9NOL5BE4wkQ2SMlDZU97hX86EilU/lUmkQUztTE6mx1EEPh7OmdqBtAvv8HdWpbrJS6tJj3n0CWdM6busNzRV3S9KTYhqvNiqWmuroiKgYhshMjmhTh9ptWhsF7970j/SbMrsPE1suR5z7DMC+P/Hs+y7ijrQAlhyAgccjbhjPygfeBTjzhNqy28EdkUh8C+DU9+z2v/oyeH791OncxHOs5y2AtTc7nb/f73TWPkD/qwBnjX8BoJ98VQNcC+8AAAFFSURBVGgF7djbDYMwDAXQBjEMYqyqY1WMxTppLiJIQIA8ariWkp8IPuweO60am67r7MstY8wwjuPH7dMz3uUua63p+/7r9rePIRW/9QmQzCV9ub0YgSIgzhxvQkjFb1EZBAdEKolkfJTqtnb7bv/zOJm58moRE0AzYgFoRawAGhE7gDZEEKAJcQjQgjgFaEBcAtgRUQBmRDSAFZEEYEQkA9gQWQAmRDaABVEEYEAUAx5H4EaGOyw+SMl66mbXzNOD4k6gCPNUY/CFwF1YOn5zRxJJRINqaUbUuZA/79sd3wm3xIdbdS60rXzo2XVCbO60/HxKJgFKKv4CkEziuyKBWAE0InYAbYggQBPiEKAFcQrQgLgEsCOiAMyIaAArIgnAiEgGsCGyAEyIbAALogjAgCgGPI7AX9w6F3JtqHMhnMWLFSrSD9jOnakVHpZYAAAAAElFTkSuQmCC\"/>\n  </defs>\n  <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n      <g id=\"s10\" transform=\"translate(3.000000, 3.000000)\">\n          <g id=\"container\">\n              <g id=\"Oval-2\">\n                  <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#e2e6829f-0086-96b2-e92a-6f3809b8ac61)\" xlink:href=\"#e966567b-3869-4bcd-76b6-2cf084e45390\"/>\n                  <use stroke=\"#979797\" stroke-width=\"1\" fill=\"url(#27c61b0f-392f-962d-de12-cb9da898274b)\" fill-rule=\"evenodd\" xlink:href=\"#e966567b-3869-4bcd-76b6-2cf084e45390\"/>\n              </g>\n              <g id=\"Oval-2\">\n                  <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#dedf2e7e-f008-c315-f682-e424d670f210)\" xlink:href=\"#c54189ed-7ea3-956c-f040-f0207548b268\"/>\n                  <use fill=\"\" fill-rule=\"evenodd\" xlink:href=\"#c54189ed-7ea3-956c-f040-f0207548b268\"/>\n                  <use stroke=\"#4A4A4A\" stroke-width=\"1\" fill=\"url(#0facd5c9-8e04-e83f-4842-8ba16f949942)\" fill-rule=\"evenodd\" xlink:href=\"#c54189ed-7ea3-956c-f040-f0207548b268\"/>\n              </g>\n              <g id=\"knob\" transform=\"translate(28.574244, 28.574244)\">\n                  <circle id=\"Oval-5\" fill=\"#322E2E\" cx=\"71.4356094\" cy=\"71.4356094\" r=\"71.4356094\"/>\n\n                  <!-- Rotating indicator (existing) -->\n                  <path d=\"M72.4209282,3.63066376 L88.6786876,16.869789 C81.585496,18.1548295 76.1662428,18.7973498 72.4209282,18.7973498 C68.6756135,18.7973498 63.2563604,18.1548295 56.1631688,16.869789 L72.4209282,3.63066376 Z\" id=\"Rectangle\" fill=\"#E6D7D7\" transform=\"translate(72.420928, 11.214007) scale(1, -1) translate(-72.420928, -11.214007) \"/>\n              </g>\n\n              <!-- Value arc: anchor->value fill in the bezel ring; path data is\n                   computed per-render via updateAttributes (see below).\n                   Consumers can restyle it via the knob-value-arc class. -->\n              <path id=\"valueArc\" class=\"knob-value-arc\" d=\"\" stroke=\"#35619F\" stroke-width=\"7\" fill=\"none\" opacity=\"0.85\" stroke-linecap=\"round\" pointer-events=\"none\"/>\n\n              <!-- Fixed position marks (outside the rotating knob group) -->\n              <!-- 12:00 position mark (more prominent) -->\n              <line x1=\"100.0098534\" y1=\"15\" x2=\"100.0098534\" y2=\"35\" stroke=\"#CCCCCC\" stroke-width=\"4\" opacity=\"0.9\"/>\n\n              <!-- End position marks (0 and 127) -->\n              <!-- 0 position mark (40 degrees from top, clockwise) - at outer radius beyond knob edge -->\n              <!-- This should be at the bottom-left where the value indicator points when at 0 -->\n              <line x1=\"36\" y1=\"164\" x2=\"44\" y2=\"156\" stroke=\"#DDDDDD\" stroke-width=\"4\"/>\n\n              <!-- 127 position mark (320 degrees from top, clockwise) - at outer radius beyond knob edge -->\n              <!-- This should be at the bottom-right where the value indicator points when at 127 -->\n              <line x1=\"164\" y1=\"164\" x2=\"156\" y2=\"156\" stroke=\"#DDDDDD\" stroke-width=\"4\"/>\n              <g id=\"label\">\n                  <g id=\"labeltext\" fill-opacity=\"1\" fill=\"#E6D7D7\">\n                      <text id=\"534f4e02-5541-3607-0966-af0b025d80e0\" font-family=\"Helvetica\" font-size=\"44\" font-weight=\"normal\" fill=\"#E6D7D7\" class=\"text-7\" filter=\"url(#12f618f7-e258-b597-3ed6-242484ddad8f)\">\n          <tspan x=\"45.3246625\" y=\"117.884225\">10.10</tspan>\n      </text>\n                      <text id=\"92ebe866-c281-70c7-7b0e-a373cee013a9\" font-family=\"Helvetica\" font-size=\"44\" font-weight=\"normal\" fill=\"#E6D7D7\" class=\"text-7\">\n          <tspan x=\"45.3246625\" y=\"117.884225\">10.10</tspan>\n      </text>\n                  </g>\n                  <circle id=\"Oval-6\" stroke=\"#979797\" fill-opacity=\"0.730000019\" fill=\"url(#3cc0e5b8-1f0a-886b-f635-8fcb19212870)\" transform=\"translate(100.351759, 100.351759) rotate(-45.000000) translate(-100.351759, -100.351759) \" cx=\"100.351759\" cy=\"100.351759\" r=\"70.3517588\"/>\n              </g>\n          </g>\n      </g>\n  </g>\n</svg>\n",
@@ -2369,22 +2380,22 @@ var un = class extends e.Component {
 		element: "#valueArc",
 		attrs: [{
 			name: "d",
-			value: (e, t) => vn({
+			value: (e, t) => bn({
 				value: t,
 				min: e.min ?? 0,
 				max: e.max ?? 127,
 				centered: e.centered ?? !1,
-				cx: yn,
-				cy: bn,
-				r: xn,
+				cx: xn,
+				cy: Sn,
+				r: Cn,
 				clampMin: e.clampMin ?? 40,
 				clampMax: e.clampMax ?? 320,
 				rotateDegrees: e.rotateDegrees ?? 180
 			})
 		}]
 	}]
-}, Cn = (e) => {
-	let { centered: t = !1, disabled: n = !1, max: r = 127, min: i = 0, onChange: a, value: s = 0, wheelEnabled: c = !1, wheelSensitivity: l = .1, ...u } = e, [d, f] = an(s), p = (e) => {
+}, Tn = (e) => {
+	let { centered: t = !1, disabled: n = !1, max: r = 127, min: i = 0, onChange: a, value: s = 0, wheelEnabled: c = !1, wheelSensitivity: l = .1, ...u } = e, [d, f] = sn(s), p = (e) => {
 		if (n) return;
 		let t = B(Number.parseInt(String(e), 10), r, i);
 		f(t), a && a(t);
@@ -2403,7 +2414,7 @@ var un = class extends e.Component {
 		a,
 		f
 	]);
-	return /* @__PURE__ */ _(hn, {
+	return /* @__PURE__ */ _(_n, {
 		centered: t,
 		clampMax: 320,
 		clampMin: 40,
@@ -2413,7 +2424,7 @@ var un = class extends e.Component {
 		onWheel: c ? m : void 0,
 		preciseMode: !1,
 		rotateDegrees: 180,
-		skin: Sn,
+		skin: wn,
 		style: { opacity: n ? .4 : 1 },
 		unlockDistance: 0,
 		defaultValue: d,
@@ -2422,7 +2433,7 @@ var un = class extends e.Component {
 		value: d,
 		...u
 	});
-}, wn = i((e, t) => {
+}, En = i((e, t) => {
 	let { centered: n, disabled: r, highToLow: i, includeLabel: a, includePicker: o, knobProps: s, label: c, max: u = 127, min: d = 0, onChange: f, shrinkLabel: p, value: m = 0, wheelEnabled: h, wheelSensitivity: g = .1, ...y } = e, b = l(() => {
 		let e = z(u - d + 1).map((e) => d + e).map((e) => ({
 			value: e,
@@ -2453,7 +2464,7 @@ var un = class extends e.Component {
 				options: b,
 				ref: t,
 				value: m
-			}), /* @__PURE__ */ _(Cn, {
+			}), /* @__PURE__ */ _(Tn, {
 				centered: n,
 				disabled: r,
 				max: u,
@@ -2466,17 +2477,17 @@ var un = class extends e.Component {
 			})]
 		})]
 	});
-}), Tn = [{
+}), Dn = [{
 	value: 0,
 	label: "Momentary"
 }, {
 	value: 1,
 	label: "Latching"
-}], En = i((e, t) => /* @__PURE__ */ _(Q, {
+}], On = i((e, t) => /* @__PURE__ */ _(Q, {
 	...e,
-	options: Tn,
+	options: Dn,
 	ref: t
-})), Dn = i(({ allowClearing: e, ...t }, n) => {
+})), kn = i(({ allowClearing: e, ...t }, n) => {
 	let r = O(), i = k(), a = l(() => [
 		...e ? [{
 			value: "No Mapping",
@@ -2512,11 +2523,11 @@ var un = class extends e.Component {
 		options: a,
 		ref: n
 	});
-}), On = ({ note: e, name: t }) => `${e} ${t.length ? "-" : ""} ${t}`, kn = (e, t) => ({
+}), An = ({ note: e, name: t }) => `${e} ${t.length ? "-" : ""} ${t}`, jn = (e, t) => ({
 	label: e,
 	value: t + 1
-}), An = i((e, t) => {
-	let { channel: n, disabled: r = !1, isMelodicMode: i = !1, mapping: a, onChange: s, value: c, ...u } = e, d = l(() => i ? D().map(({ note: e }) => `${be(e)} (#${e})`).map(kn) : (a || D()).map(On).map(kn), [i, a]), [f, p] = an(c), m = o((e) => {
+}), Mn = i((e, t) => {
+	let { channel: n, disabled: r = !1, isMelodicMode: i = !1, mapping: a, onChange: s, value: c, ...u } = e, d = l(() => i ? D().map(({ note: e }) => `${be(e)} (#${e})`).map(jn) : (a || D()).map(An).map(jn), [i, a]), [f, p] = sn(c), m = o((e) => {
 		if (typeof e == "string") return;
 		let t = B(e, 128, 0);
 		t > 0 && s(t), p(e);
@@ -2529,25 +2540,25 @@ var un = class extends e.Component {
 		ref: t,
 		value: f
 	});
-}), jn = 21, Mn = 108, Nn = 86 * .7, Pn = new window.AudioContext(), Fn = ({ height: e, width: t, ...n }) => {
-	let r = (t / Nn + 2) / e;
+}), Nn = 21, Pn = 108, Fn = 86 * .7, In = new window.AudioContext(), Ln = ({ height: e, width: t, ...n }) => {
+	let r = (t / Fn + 2) / e;
 	return /* @__PURE__ */ _("div", { children: /* @__PURE__ */ _(St, {
 		keyWidthToHeight: r,
 		noteRange: {
-			first: jn,
-			last: Mn
+			first: Nn,
+			last: Pn
 		},
 		width: t,
 		...n
 	}) });
-}, In = ({ format: e, height: t, hostname: n, instrumentName: r, onChange: i, onClick: a, onDoubleClick: o, onKeyMouseEnter: s, onKeyMouseLeave: c, selectedNotes: l, soundfont: u, width: d }) => /* @__PURE__ */ _(Dt, {
-	audioContext: Pn,
+}, Rn = ({ format: e, height: t, hostname: n, instrumentName: r, onChange: i, onClick: a, onDoubleClick: o, onKeyMouseEnter: s, onKeyMouseLeave: c, selectedNotes: l, soundfont: u, width: d }) => /* @__PURE__ */ _(kt, {
+	audioContext: In,
 	format: e,
 	hostname: n,
 	instrumentName: r,
 	onChange: i,
 	soundfont: u,
-	render: ({ isLoading: e, playNote: n, stopNote: r }) => /* @__PURE__ */ _(Fn, {
+	render: ({ isLoading: e, playNote: n, stopNote: r }) => /* @__PURE__ */ _(Ln, {
 		disabled: e,
 		height: t,
 		onClick: a,
@@ -2559,7 +2570,7 @@ var un = class extends e.Component {
 		stopNote: r,
 		width: d
 	})
-}), Ln = i(({ labelOff: e = "Normally Off", labelOn: t = "Normally On", ...n }, r) => {
+}), zn = i(({ labelOff: e = "Normally Off", labelOn: t = "Normally On", ...n }, r) => {
 	let i = [{
 		value: 0,
 		label: e
@@ -2572,15 +2583,15 @@ var un = class extends e.Component {
 		options: i,
 		ref: r
 	});
-}), Rn = (e) => e ? {
+}), Bn = (e) => e ? {
 	width: e.offsetWidth,
 	height: e.offsetHeight
 } : {
 	width: 0,
 	height: 0
-}, zn = (e) => {
-	let [t, n] = d(Rn(e ? e.current : null)), r = o(() => {
-		e.current && n(Rn(e.current));
+}, Vn = (e) => {
+	let [t, n] = d(Bn(e ? e.current : null)), r = o(() => {
+		e.current && n(Bn(e.current));
 	}, [e]);
 	return c(() => {
 		if (e.current) {
@@ -2597,9 +2608,9 @@ var un = class extends e.Component {
 			};
 		}
 	}, [e.current]), t;
-}, Bn = 20, Vn = 15, Hn = Bn, Un = Bn, Wn = (e) => {
-	let { Tooltip: t = ge, autosize: n, disabled: r, inverted: i, onChange: a, value: o } = e, s = u(null), c = u(null), { height: l, width: d } = zn(s), f = n && d || 218, p = n && l || 150, m = f - Bn, h = p - Bn, g = f / 2, y = p / 2, b = { ref: c }, x = K.map(({ value: e, label: t }) => {
-		let n = 0, r = 0, a = Hn, o = i ? Un : h, s = m, c = i ? h : Un, l = g, u = y;
+}, Hn = 20, Un = 15, Wn = Hn, Gn = Hn, Kn = (e) => {
+	let { Tooltip: t = ge, autosize: n, disabled: r, inverted: i, onChange: a, value: o } = e, s = u(null), c = u(null), { height: l, width: d } = Vn(s), f = n && d || 218, p = n && l || 150, m = f - Hn, h = p - Hn, g = f / 2, y = p / 2, b = { ref: c }, x = K.map(({ value: e, label: t }) => {
+		let n = 0, r = 0, a = Wn, o = i ? Gn : h, s = m, c = i ? h : Gn, l = g, u = y;
 		switch (e) {
 			case 0:
 				n = g, r = y, u += 3;
@@ -2622,7 +2633,7 @@ var un = class extends e.Component {
 			case 6:
 				n = i ? g - f * .35 : g + f * .35, r = y + p * .35, l = i ? g - f * .28 : g + f * .28, u = y + p * .25;
 				break;
-			case 7: a = i ? Hn : m, o = Un, s = a, c = h, n = a, r = y, l = a - 5, u = p - 30;
+			case 7: a = i ? Wn : m, o = Gn, s = a, c = h, n = a, r = y, l = a - 5, u = p - 30;
 		}
 		return {
 			value: e,
@@ -2652,7 +2663,7 @@ var un = class extends e.Component {
 					x: 0,
 					y: 0
 				}),
-				/* @__PURE__ */ _(Bt, {
+				/* @__PURE__ */ _(Ht, {
 					className: "axis",
 					textAnchor: "middle",
 					transform: `translate(6 ${p / 2}) rotate(90)`,
@@ -2660,7 +2671,7 @@ var un = class extends e.Component {
 					y: 0,
 					text: "Applied force"
 				}),
-				/* @__PURE__ */ _(Bt, {
+				/* @__PURE__ */ _(Ht, {
 					className: "axis",
 					textAnchor: "middle",
 					transform: `translate(${f / 2} ${h + 13})`,
@@ -2670,14 +2681,14 @@ var un = class extends e.Component {
 				}),
 				/* @__PURE__ */ _("line", {
 					className: "axis",
-					x1: Hn,
-					x2: Hn,
-					y1: Un,
+					x1: Wn,
+					x2: Wn,
+					y1: Gn,
 					y2: h
 				}),
 				/* @__PURE__ */ _("line", {
 					className: "axis",
-					x1: Hn,
+					x1: Wn,
 					x2: m,
 					y1: h,
 					y2: h
@@ -2692,10 +2703,10 @@ var un = class extends e.Component {
 						title: n,
 						children: /* @__PURE__ */ _("rect", {
 							className: e === o ? "button-selected" : "button",
-							height: Vn,
+							height: Un,
 							onClick: r ? (e) => e : () => a({ target: { value: Number.parseInt(String(e)) } }),
-							transform: `translate(${f + 3} ${p - Vn / 1.05}) rotate(45)`,
-							width: Vn
+							transform: `translate(${f + 3} ${p - Un / 1.05}) rotate(45)`,
+							width: Un
 						})
 					}),
 					/* @__PURE__ */ v("text", {
@@ -2707,7 +2718,7 @@ var un = class extends e.Component {
 			]
 		})
 	});
-}, Gn = i((e, t) => {
+}, qn = i((e, t) => {
 	let { Tooltip: n = ge, inverted: r = !1, onChange: i, value: a, ...s } = e, c = o(() => {
 		let e = ee("value", a)(K);
 		return e ? /* @__PURE__ */ _("div", {
@@ -2717,7 +2728,7 @@ var un = class extends e.Component {
 			className: "zds-pickers__placeholder",
 			children: "Select..."
 		});
-	}, [a]), l = o(({ setValue: e }) => /* @__PURE__ */ _(Wn, {
+	}, [a]), l = o(({ setValue: e }) => /* @__PURE__ */ _(Kn, {
 		autosize: !0,
 		inverted: r,
 		onChange: ({ target: { value: t } }) => {
@@ -2742,11 +2753,11 @@ var un = class extends e.Component {
 		ref: t,
 		value: a
 	});
-}), Kn = i(({ statuses: e, ...t }, n) => /* @__PURE__ */ _(Q, {
+}), Jn = i(({ statuses: e, ...t }, n) => /* @__PURE__ */ _(Q, {
 	...t,
 	options: e,
 	ref: n
-})), qn = i((e, t) => {
+})), Yn = i((e, t) => {
 	let { disabled: n, highToLow: r, max: i = 127, min: a = 0, onChange: s, value: c = 0, ...u } = e, d = l(() => {
 		let e = z(i - a + 1).map((e) => a + e).map((e) => ({
 			value: e,
@@ -2757,7 +2768,7 @@ var un = class extends e.Component {
 		r,
 		i,
 		a
-	]), [f, p] = an(c), m = o((e) => {
+	]), [f, p] = sn(c), m = o((e) => {
 		s(B(e, i, a)), p(Number.parseInt(String(e), 10));
 	}, [
 		i,
@@ -2775,6 +2786,6 @@ var un = class extends e.Component {
 	});
 });
 //#endregion
-export { Jt as CCPicker, Xt as ChannelMappingPicker, $t as ChannelPicker, ge as DefaultTooltip, rn as KeyPicker, Cn as Knob, wn as KnobPicker, En as LatchPicker, re as MASK_CHANNEL, W as MASK_STATUS, Nt as MEASUREMENT_ELEMENT_ID, Dn as MappingPicker, An as NotePicker, Mt as OctavePlayer, In as PianoPicker, Ln as PolarityPicker, Wn as ResponseCurve, he as ResponseCurveLabels, Gn as ResponseCurvePicker, Q as Select, Kn as StatusPicker, U as Statuses, Bt as SvgText, qn as ValuePicker, Lt as __resetFontMetricsCacheForTests, z as arraySequence, B as assertRange, zt as calculateWordWidths, Rt as calculateWordsByLines, H as changeControllerOptions, oe as combineStatusWithChannel, se as extractStatusAndChannel, ee as findObj, ve as formatPitchName, ae as getStatusLabel, be as midiNoteLabel, Vt as noSelection, Gt as noSelectionOption, V as omit, te as pick, ye as pitchClassLabel, K as responseCurves, ne as set, ie as statusOptions };
+export { Xt as CCPicker, Qt as ChannelMappingPicker, tn as ChannelPicker, ge as DefaultTooltip, on as KeyPicker, Tn as Knob, En as KnobPicker, On as LatchPicker, re as MASK_CHANNEL, W as MASK_STATUS, Ft as MEASUREMENT_ELEMENT_ID, kn as MappingPicker, Mn as NotePicker, Pt as OctavePlayer, Rn as PianoPicker, zn as PolarityPicker, Kn as ResponseCurve, he as ResponseCurveLabels, qn as ResponseCurvePicker, Q as Select, Jn as StatusPicker, U as Statuses, Ht as SvgText, Yn as ValuePicker, zt as __resetFontMetricsCacheForTests, z as arraySequence, B as assertRange, Vt as calculateWordWidths, Bt as calculateWordsByLines, H as changeControllerOptions, oe as combineStatusWithChannel, se as extractStatusAndChannel, ee as findObj, ve as formatPitchName, ae as getStatusLabel, be as midiNoteLabel, Ut as noSelection, qt as noSelectionOption, V as omit, te as pick, ye as pitchClassLabel, K as responseCurves, ne as set, ie as statusOptions };
 
 //# sourceMappingURL=index.es.js.map