zds-pickers 4.2.0 → 4.2.1

package/dist/index.es.js

@@ -3511,7 +3511,21 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 		Tooltip: m,
 		width: g
 	})
-}), Fi = "__react_svg_text_measurement_id", Ii = (e, t, n, r) => {
+}), Fi = "__react_svg_text_measurement_id", Ii = [
+	"font-family",
+	"font-feature-settings",
+	"font-kerning",
+	"font-size",
+	"font-stretch",
+	"font-style",
+	"font-variant",
+	"font-weight",
+	"letter-spacing",
+	"text-transform",
+	"word-spacing"
+], Li = (e) => Ii.map((t) => e.getPropertyValue(t)).join("|"), Ri = /* @__PURE__ */ new Map(), zi = () => {
+	Ri.clear();
+}, Bi = (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];
@@ -3526,22 +3540,32 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 		}
 		return e;
 	}, []);
-}, Li = (e, t, n) => {
+}, Vi = (e, t, n) => {
 	if (e && t) {
-		Array.from(e).forEach((n) => t.style.setProperty(n, e.getPropertyValue(n), e.getPropertyPriority(n)));
-		let r = [...new Set(String(n).split(/\s+/))].reduce((e, n) => (t.textContent = n, {
-			...e,
-			[n]: t.getBBox().width
-		}), {});
-		t.textContent = "\xA0";
-		let i = t?.getComputedTextLength?.() || 8, a = t.getBBox().height;
-		return t.setAttribute("style", ""), {
-			wordsWithComputedWidth: r,
-			spaceWidth: i,
-			lineHeight: a
+		let r = Li(e), i = Ri.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 Ii) t.style.setProperty(n, e.getPropertyValue(n), e.getPropertyPriority(n));
+			if (!i) {
+				t.textContent = "\xA0";
+				let e = t?.getComputedTextLength?.() || 8, n = t.getBBox().height;
+				i = {
+					widths: /* @__PURE__ */ new Map(),
+					spaceWidth: e,
+					lineHeight: n
+				}, Ri.set(r, i);
+			}
+			for (let e of s) t.textContent = e, i.widths.set(e, t.getBBox().width);
+			t.setAttribute("style", "");
+		}
+		let c = {};
+		for (let e of a) c[e] = i.widths.get(e) ?? 0;
+		return {
+			wordsWithComputedWidth: c,
+			spaceWidth: i.spaceWidth,
+			lineHeight: i.lineHeight
 		};
 	}
-}, Ri = (e) => {
+}, Hi = (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: _ = 0, transform: v = "", ...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) => ({
@@ -3556,17 +3580,18 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 		let e = document.getElementById(Fi);
 		if (e === null) {
 			let e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-			return e.setAttribute("id", Fi), document.body.appendChild(e), e.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "text")), E.current = e, () => {
-				document.body.removeChild(e);
-			};
+			e.setAttribute("id", Fi), 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;
+		E.current = e.tagName.toLowerCase() === "text" ? e : e.querySelector("text") ?? e;
 	}, []), s(() => {
-		let e = Li(w, E.current, c);
+		let e = Vi(w, E.current, c);
 		x(e);
 	}, [c, w]), s(() => {
 		if (a && b) {
-			let e = c.split(/\n/).flatMap((e) => Ii(e, b, a, i));
+			let e = c.split(/\n/).flatMap((e) => Bi(e, b, a, i));
 			C(e);
 		}
 	}, [
@@ -3603,12 +3628,12 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 			children: e.words.join(" ")
 		}, t)), S.length && D.length !== S.length && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("tspan", { children: "..." }), /* @__PURE__ */ h("title", { children: c })] })] })
 	});
-}, zi = 255, { IndicatorsContainer: Bi, Placeholder: Vi, ValueContainer: Hi } = v, Ui = {
+}, Ui = 255, { IndicatorsContainer: Wi, Placeholder: Gi, ValueContainer: Ki } = v, qi = {
 	label: "--",
 	value: 255
-}, Wi = (e) => {
+}, Ji = (e) => {
 	let { children: t, ...n } = e, r = n.selectProps?.actionButton;
-	return /* @__PURE__ */ h(Bi, {
+	return /* @__PURE__ */ h(Wi, {
 		...n,
 		children: /* @__PURE__ */ g("div", {
 			onMouseDown: (e) => {
@@ -3618,15 +3643,15 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 			children: [r, t]
 		})
 	});
-}, Gi = ({ children: e, ...n }) => /* @__PURE__ */ g(Hi, {
+}, Yi = ({ children: e, ...n }) => /* @__PURE__ */ g(Ki, {
 	...n,
-	children: [/* @__PURE__ */ h(Vi, {
+	children: [/* @__PURE__ */ h(Gi, {
 		...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 !== Vi ? e : null)]
+	}), t.map(e, (e) => a(e) && e.type !== Gi ? e : null)]
 }), $ = 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);
@@ -3668,8 +3693,8 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 			...f,
 			classNamePrefix: "zds-pickers",
 			components: {
-				IndicatorsContainer: Wi,
-				ValueContainer: Gi,
+				IndicatorsContainer: Ji,
+				ValueContainer: Yi,
 				...n
 			},
 			isDisabled: r,
@@ -3689,7 +3714,7 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 			...f,
 			classNamePrefix: "zds-pickers",
 			components: {
-				IndicatorsContainer: Wi,
+				IndicatorsContainer: Ji,
 				...n
 			},
 			isDisabled: r,
@@ -3700,14 +3725,14 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 			value: v
 		})]
 	});
-}), Ki = i((e, t) => /* @__PURE__ */ h($, {
+}), Xi = i((e, t) => /* @__PURE__ */ h($, {
 	...e,
 	options: ae,
 	ref: t
-})), qi = I(16).map((e) => ({
+})), Zi = I(16).map((e) => ({
 	value: e,
 	label: e
-})), Ji = i(({ channels: e, className: t, ...n }, r) => {
+})), Qi = i(({ channels: e, className: t, ...n }, r) => {
 	let [i, a] = d([]), c = o(({ value: t, label: n }, { context: r }) => {
 		if (t === "separator") return /* @__PURE__ */ h("span", {
 			className: "zds-mappings-user-mapping",
@@ -3730,7 +3755,7 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 		});
 	}, [e]);
 	return s(() => {
-		let t = qi.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 = Zi.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__ */ h("hr", {}),
 			value: "separator"
@@ -3742,33 +3767,33 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 		options: i,
 		ref: r
 	});
-}), Yi = I(16).map((e) => ({
+}), $i = I(16).map((e) => ({
 	value: e,
 	label: `Channel ${e + 1}`
-})), Xi = (e, t) => !t || String(e.label).toLowerCase().includes(t.toLowerCase()), Zi = i(({ className: e, value: t = 255, ...n }, r) => {
+})), ea = (e, t) => !t || String(e.label).toLowerCase().includes(t.toLowerCase()), ta = 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__ */ h($, {
 		...n,
 		className: f(e, "channel-picker"),
-		filterOptions: Xi,
+		filterOptions: ea,
 		formatOptionLabel: i,
-		options: Yi,
+		options: $i,
 		value: t,
 		ref: r
 	});
-}), Qi = (e) => e.replace(/([A-G])b/g, "$1♭"), $i = /* @__PURE__ */ new Set(["C", "F"]), ea = /* @__PURE__ */ new Set(["E", "B"]), ta = ({ isAccidental: e, isActive: t, midiNumber: n }) => {
-	let r = Fn(Vn(n) ?? ""), i = Qi(r);
+}), na = (e) => e.replace(/([A-G])b/g, "$1♭"), ra = /* @__PURE__ */ new Set(["C", "F"]), ia = /* @__PURE__ */ new Set(["E", "B"]), aa = ({ isAccidental: e, isActive: t, midiNumber: n }) => {
+	let r = Fn(Vn(n) ?? ""), i = na(r);
 	return i ? /* @__PURE__ */ h("div", {
 		className: f("ReactPiano__NoteLabel", "ReactPiano__NoteLabel--noteName", {
 			"ReactPiano__NoteLabel--active": t,
 			"ReactPiano__NoteLabel--accidental": e,
 			"ReactPiano__NoteLabel--natural": !e,
-			"ReactPiano__NoteLabel--nudgeLeft": !e && $i.has(r),
-			"ReactPiano__NoteLabel--nudgeRight": !e && ea.has(r)
+			"ReactPiano__NoteLabel--nudgeLeft": !e && ra.has(r),
+			"ReactPiano__NoteLabel--nudgeRight": !e && ia.has(r)
 		}),
 		children: i
 	}) : null;
-}, na = (e) => {
+}, oa = (e) => {
 	let { value: t, onChange: n, disabled: r = !1, height: i = 100, showNoteNames: a = !1, width: s = 300, octave: c = 4, ...l } = e, u = o((e) => {
 		r || n(e);
 	}, [r, n]), d = 60 + (c - 4) * 12, f = d + 11, p = t !== 255 && t >= d && t <= f;
@@ -3778,18 +3803,18 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 		selectedNotes: p ? [t] : [],
 		disabled: r,
 		height: i,
-		renderNoteLabel: a ? ta : void 0,
+		renderNoteLabel: a ? aa : void 0,
 		width: s,
 		octave: c,
 		onClick: u,
 		instrumentName: "acoustic_grand_piano"
 	});
-}, ra = (e) => {
+}, sa = (e) => {
 	let [t, n] = d(e);
 	return s(() => {
 		n(e);
 	}, [e]), [t, n];
-}, ia = class extends e.Component {
+}, ca = class extends e.Component {
 	static defaultProps = { step: 1 };
 	render() {
 		let e = this.props, t = {};
@@ -3812,20 +3837,20 @@ var Ti = (e) => e != null && !Number.isNaN(e), Ei = (e) => Vn(typeof e == "strin
 };
 //#endregion
 //#region lib/rotaryKnob/utils.ts
-function aa(e) {
+function la(e) {
 	return e * Math.PI / 180;
 }
-function oa(e, t) {
+function ua(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 sa(e, t) {
+function da(e, t) {
 	if (e === 0 && t === 0) return 0;
-	let n = Math.atan(e / t) * 180 / Math.PI, r = oa(e, t);
+	let n = Math.atan(e / t) * 180 / Math.PI, r = ua(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 ca = class extends e.Component {
+var fa = 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__ */ h("circle", {
@@ -3836,7 +3861,7 @@ var ca = class extends e.Component {
 			...a
 		});
 	}
-}, la = class extends e.Component {
+}, pa = class extends e.Component {
 	render() {
 		let { width: e = 2, color: t = "black", p1: n, p2: r, ...i } = this.props;
 		return /* @__PURE__ */ h("line", {
@@ -3849,7 +3874,7 @@ var ca = class extends e.Component {
 			y2: r.y
 		});
 	}
-}, ua = class extends e.Component {
+}, ma = class extends e.Component {
 	render() {
 		let { children: e, ...t } = this.props, n = { overlay: Object.assign({
 			width: "100%",
@@ -3868,7 +3893,7 @@ var ca = class extends e.Component {
 			children: e
 		}), document.body);
 	}
-}, da = class extends e.Component {
+}, ha = class extends e.Component {
 	state = {
 		centerX: 0,
 		centerY: 0,
@@ -3877,7 +3902,7 @@ var ca = 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(aa(e.valueAngle - 90)), a = e.radius * Math.sin(aa(e.valueAngle - 90));
+		let n = e.svgRef.getBoundingClientRect(), r = n.width / 2, i = e.radius * Math.cos(la(e.valueAngle - 90)), a = e.radius * Math.sin(la(e.valueAngle - 90));
 		return {
 			...t,
 			centerX: n.left + r,
@@ -3888,7 +3913,7 @@ var ca = 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__ */ h(ua, { children: /* @__PURE__ */ g("svg", {
+		return /* @__PURE__ */ h(ma, { children: /* @__PURE__ */ g("svg", {
 			style: {
 				position: "absolute",
 				top: "0",
@@ -3907,7 +3932,7 @@ var ca = class extends e.Component {
 					orient: "auto",
 					children: /* @__PURE__ */ h("path", { d: "M 0 0 L 10 5 L 0 10 z" })
 				}) }),
-				/* @__PURE__ */ h(ca, {
+				/* @__PURE__ */ h(fa, {
 					borderColor: e,
 					fillColor: t,
 					fillOpacity: .02,
@@ -3915,7 +3940,7 @@ var ca = class extends e.Component {
 					cx: this.state.centerX,
 					cy: this.state.centerY
 				}),
-				n && /* @__PURE__ */ h(ca, {
+				n && /* @__PURE__ */ h(fa, {
 					borderColor: e,
 					fillColor: t,
 					fillOpacity: 0,
@@ -3923,7 +3948,7 @@ var ca = class extends e.Component {
 					cx: this.state.centerX,
 					cy: this.state.centerY
 				}),
-				/* @__PURE__ */ h(la, {
+				/* @__PURE__ */ h(pa, {
 					p1: {
 						x: this.state.centerX,
 						y: this.state.centerY
@@ -3937,12 +3962,12 @@ var ca = class extends e.Component {
 			]
 		}) });
 	}
-}, fa = {
+}, ga = {
 	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"
-}, pa = (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: _ = () => {}, preciseMode: v = !0, rotateDegrees: w = 0, skin: T = fa, step: E = 1, style: D, unlockDistance: ee = 100, value: O, ...k } = e, [te, A] = d(O !== void 0), j = u(null), M = u(null), N, P, [F, I] = d({
+}, _a = (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: _ = () => {}, preciseMode: v = !0, rotateDegrees: w = 0, skin: T = ga, step: E = 1, style: D, unlockDistance: ee = 100, value: O, ...k } = e, [te, A] = d(O !== void 0), j = u(null), M = u(null), N, P, [F, I] = d({
 		svgRef: void 0,
 		dragging: !1,
 		dragDistance: 0,
@@ -3996,15 +4021,15 @@ var ca = class extends e.Component {
 			n = t.getBoundingClientRect(), e.classed("dragging", !0), _(), a = {
 				x: l.x - r,
 				y: l.y - i
-			}, o = sa(a.x, a.y), s = ne(u), c = !1;
+			}, o = da(a.x, a.y), s = ne(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);
-			v ? !c && n >= ee && (a = t, o = sa(t.x, t.y), c = !0) : c = !0;
-			let l = sa(t.x, t.y) - o, u = s + l;
+			v ? !c && n >= ee && (a = t, o = da(t.x, t.y), c = !0) : c = !0;
+			let l = da(t.x, t.y) - o, u = s + l;
 			u = L(u), c && ae(u), I((t) => ({
 				...t,
 				dragDistance: n,
@@ -4058,7 +4083,7 @@ var ca = class extends e.Component {
 		ref: j,
 		style: le.container,
 		...k,
-		children: [/* @__PURE__ */ h(ia, {
+		children: [/* @__PURE__ */ h(ca, {
 			disabled: a,
 			inputRef: M,
 			style: le.input,
@@ -4077,23 +4102,23 @@ var ca = class extends e.Component {
 				transform: `$ORIGINAL rotate(${ce}, ${T.knobX}, ${T.knobY})`
 			}), de]
 		})]
-	}), F.dragging && v && /* @__PURE__ */ h(da, {
+	}), F.dragging && v && /* @__PURE__ */ h(ha, {
 		svgRef: F.svgRef,
 		radius: F.dragDistance,
 		mousePos: F.mousePos,
 		minimumDragDistance: ee,
 		valueAngle: F.valueAngle
 	})] });
-}, ma = .5, ha = (e, t, n, r) => {
+}, va = .5, ya = (e, t, n, r) => {
 	let i = r * Math.PI / 180;
 	return [e + n * Math.sin(i), t - n * Math.cos(i)];
-}, ga = (e) => String(Math.round(e * 1e3) / 1e3), _a = ({ 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 }) => {
+}, ba = (e) => String(Math.round(e * 1e3) / 1e3), xa = ({ 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) < ma) return "";
-	let p = (e) => ((e + l) % 360 + 360) % 360, [m, h] = ha(i, a, o, p(d)), [g, _] = ha(i, a, o, p(u)), v = +(Math.abs(f) > 180), y = +(f > 0);
-	return `M ${ga(m)} ${ga(h)} A ${ga(o)} ${ga(o)} 0 ${v} ${y} ${ga(g)} ${ga(_)}`;
-}, va = 100, ya = 100, ba = 93, xa = {
+	if (Math.abs(f) < va) return "";
+	let p = (e) => ((e + l) % 360 + 360) % 360, [m, h] = ya(i, a, o, p(d)), [g, _] = ya(i, a, o, p(u)), v = +(Math.abs(f) > 180), y = +(f > 0);
+	return `M ${ba(m)} ${ba(h)} A ${ba(o)} ${ba(o)} 0 ${v} ${y} ${ba(g)} ${ba(_)}`;
+}, Sa = 100, Ca = 100, wa = 93, Ta = {
 	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",
@@ -4111,22 +4136,22 @@ var ca = class extends e.Component {
 		element: "#valueArc",
 		attrs: [{
 			name: "d",
-			value: (e, t) => _a({
+			value: (e, t) => xa({
 				value: t,
 				min: e.min ?? 0,
 				max: e.max ?? 127,
 				centered: e.centered ?? !1,
-				cx: va,
-				cy: ya,
-				r: ba,
+				cx: Sa,
+				cy: Ca,
+				r: wa,
 				clampMin: e.clampMin ?? 40,
 				clampMax: e.clampMax ?? 320,
 				rotateDegrees: e.rotateDegrees ?? 180
 			})
 		}]
 	}]
-}, Sa = (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] = ra(s), p = (e) => {
+}, Ea = (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] = sa(s), p = (e) => {
 		if (n) return;
 		let t = L(Number.parseInt(String(e), 10), r, i);
 		f(t), a && a(t);
@@ -4145,7 +4170,7 @@ var ca = class extends e.Component {
 		a,
 		f
 	]);
-	return /* @__PURE__ */ h(pa, {
+	return /* @__PURE__ */ h(_a, {
 		centered: t,
 		clampMax: 320,
 		clampMin: 40,
@@ -4155,7 +4180,7 @@ var ca = class extends e.Component {
 		onWheel: c ? m : void 0,
 		preciseMode: !1,
 		rotateDegrees: 180,
-		skin: xa,
+		skin: Ta,
 		style: { opacity: n ? .4 : 1 },
 		unlockDistance: 0,
 		defaultValue: d,
@@ -4164,7 +4189,7 @@ var ca = class extends e.Component {
 		value: d,
 		...u
 	});
-}, Ca = i((e, t) => {
+}, Da = 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: _, wheelSensitivity: v = .1, ...y } = e, b = l(() => {
 		let e = I(u - d + 1).map((e) => d + e).map((e) => ({
 			value: e,
@@ -4195,7 +4220,7 @@ var ca = class extends e.Component {
 				options: b,
 				ref: t,
 				value: m
-			}), /* @__PURE__ */ h(Sa, {
+			}), /* @__PURE__ */ h(Ea, {
 				centered: n,
 				disabled: r,
 				max: u,
@@ -4208,17 +4233,17 @@ var ca = class extends e.Component {
 			})]
 		})]
 	});
-}), wa = [{
+}), Oa = [{
 	value: 0,
 	label: "Momentary"
 }, {
 	value: 1,
 	label: "Latching"
-}], Ta = i((e, t) => /* @__PURE__ */ h($, {
+}], ka = i((e, t) => /* @__PURE__ */ h($, {
 	...e,
-	options: wa,
+	options: Oa,
 	ref: t
-})), Ea = i(({ allowClearing: e, ...t }, n) => {
+})), Aa = i(({ allowClearing: e, ...t }, n) => {
 	let r = E(), i = D(), a = l(() => [
 		...e ? [{
 			value: "No Mapping",
@@ -4254,11 +4279,11 @@ var ca = class extends e.Component {
 		options: a,
 		ref: n
 	});
-}), { midiToNoteName: Da } = pn, Oa = ({ note: e, name: t }) => `${e} ${t.length ? "-" : ""} ${t}`, ka = (e, t) => ({
+}), { midiToNoteName: ja } = pn, Ma = ({ note: e, name: t }) => `${e} ${t.length ? "-" : ""} ${t}`, Na = (e, t) => ({
 	label: e,
 	value: t + 1
-}), Aa = i((e, t) => {
-	let { channel: n, disabled: r = !1, isMelodicMode: i = !1, mapping: a, onChange: s, value: c, ...u } = e, d = l(() => i ? T().map(({ note: e }) => `${Da(e, { sharps: !1 }).replace("b", "♭").replace("#", "♯")} (#${e})`).map(ka) : (a || T()).map(Oa).map(ka), [i, a]), [f, p] = ra(c), m = o((e) => {
+}), Pa = i((e, t) => {
+	let { channel: n, disabled: r = !1, isMelodicMode: i = !1, mapping: a, onChange: s, value: c, ...u } = e, d = l(() => i ? T().map(({ note: e }) => `${ja(e, { sharps: !1 }).replace("b", "♭").replace("#", "♯")} (#${e})`).map(Na) : (a || T()).map(Ma).map(Na), [i, a]), [f, p] = sa(c), m = o((e) => {
 		if (typeof e == "string") return;
 		let t = L(e, 128, 0);
 		t > 0 && s(t), p(e);
@@ -4271,25 +4296,25 @@ var ca = class extends e.Component {
 		ref: t,
 		value: f
 	});
-}), ja = 21, Ma = 108, Na = 86 * .7, Pa = new window.AudioContext(), Fa = ({ height: e, width: t, ...n }) => {
-	let r = (t / Na + 2) / e;
+}), Fa = 21, Ia = 108, La = 86 * .7, Ra = new window.AudioContext(), za = ({ height: e, width: t, ...n }) => {
+	let r = (t / La + 2) / e;
 	return /* @__PURE__ */ h("div", { children: /* @__PURE__ */ h(Ci, {
 		keyWidthToHeight: r,
 		noteRange: {
-			first: ja,
-			last: Ma
+			first: Fa,
+			last: Ia
 		},
 		width: t,
 		...n
 	}) });
-}, Ia = ({ 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__ */ h(ki, {
-	audioContext: Pa,
+}, Ba = ({ 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__ */ h(ki, {
+	audioContext: Ra,
 	format: e,
 	hostname: n,
 	instrumentName: r,
 	onChange: i,
 	soundfont: u,
-	render: ({ isLoading: e, playNote: n, stopNote: r }) => /* @__PURE__ */ h(Fa, {
+	render: ({ isLoading: e, playNote: n, stopNote: r }) => /* @__PURE__ */ h(za, {
 		disabled: e,
 		height: t,
 		onClick: a,
@@ -4301,7 +4326,7 @@ var ca = class extends e.Component {
 		stopNote: r,
 		width: d
 	})
-}), La = i(({ labelOff: e = "Normally Off", labelOn: t = "Normally On", ...n }, r) => {
+}), Va = i(({ labelOff: e = "Normally Off", labelOn: t = "Normally On", ...n }, r) => {
 	let i = [{
 		value: 0,
 		label: e
@@ -4314,15 +4339,15 @@ var ca = class extends e.Component {
 		options: i,
 		ref: r
 	});
-}), Ra = (e) => e ? {
+}), Ha = (e) => e ? {
 	width: e.offsetWidth,
 	height: e.offsetHeight
 } : {
 	width: 0,
 	height: 0
-}, za = (e) => {
-	let [t, n] = d(Ra(e ? e.current : null)), r = o(() => {
-		e.current && n(Ra(e.current));
+}, Ua = (e) => {
+	let [t, n] = d(Ha(e ? e.current : null)), r = o(() => {
+		e.current && n(Ha(e.current));
 	}, [e]);
 	return c(() => {
 		if (e.current) {
@@ -4339,9 +4364,9 @@ var ca = class extends e.Component {
 			};
 		}
 	}, [e.current]), t;
-}, Ba = 20, Va = 15, Ha = Ba, Ua = Ba, Wa = (e) => {
-	let { Tooltip: t = V, autosize: n, disabled: r, inverted: i, onChange: a, value: o } = e, s = u(null), c = u(null), { height: l, width: d } = za(s), f = n && d || 218, p = n && l || 150, m = f - Ba, _ = p - Ba, v = f / 2, y = p / 2, b = { ref: c }, x = be.map(({ value: e, label: t }) => {
-		let n = 0, r = 0, a = Ha, o = i ? Ua : _, s = m, c = i ? _ : Ua, l = v, u = y;
+}, Wa = 20, Ga = 15, Ka = Wa, qa = Wa, Ja = (e) => {
+	let { Tooltip: t = V, autosize: n, disabled: r, inverted: i, onChange: a, value: o } = e, s = u(null), c = u(null), { height: l, width: d } = Ua(s), f = n && d || 218, p = n && l || 150, m = f - Wa, _ = p - Wa, v = f / 2, y = p / 2, b = { ref: c }, x = be.map(({ value: e, label: t }) => {
+		let n = 0, r = 0, a = Ka, o = i ? qa : _, s = m, c = i ? _ : qa, l = v, u = y;
 		switch (e) {
 			case 0:
 				n = v, r = y, u += 3;
@@ -4364,7 +4389,7 @@ var ca = class extends e.Component {
 			case 6:
 				n = i ? v - f * .35 : v + f * .35, r = y + p * .35, l = i ? v - f * .28 : v + f * .28, u = y + p * .25;
 				break;
-			case 7: a = i ? Ha : m, o = Ua, s = a, c = _, n = a, r = y, l = a - 5, u = p - 30;
+			case 7: a = i ? Ka : m, o = qa, s = a, c = _, n = a, r = y, l = a - 5, u = p - 30;
 		}
 		return {
 			value: e,
@@ -4394,7 +4419,7 @@ var ca = class extends e.Component {
 					x: 0,
 					y: 0
 				}),
-				/* @__PURE__ */ h(Ri, {
+				/* @__PURE__ */ h(Hi, {
 					className: "axis",
 					textAnchor: "middle",
 					transform: `translate(6 ${p / 2}) rotate(90)`,
@@ -4402,7 +4427,7 @@ var ca = class extends e.Component {
 					y: 0,
 					text: "Applied force"
 				}),
-				/* @__PURE__ */ h(Ri, {
+				/* @__PURE__ */ h(Hi, {
 					className: "axis",
 					textAnchor: "middle",
 					transform: `translate(${f / 2} ${_ + 13})`,
@@ -4412,14 +4437,14 @@ var ca = class extends e.Component {
 				}),
 				/* @__PURE__ */ h("line", {
 					className: "axis",
-					x1: Ha,
-					x2: Ha,
-					y1: Ua,
+					x1: Ka,
+					x2: Ka,
+					y1: qa,
 					y2: _
 				}),
 				/* @__PURE__ */ h("line", {
 					className: "axis",
-					x1: Ha,
+					x1: Ka,
 					x2: m,
 					y1: _,
 					y2: _
@@ -4434,10 +4459,10 @@ var ca = class extends e.Component {
 						title: n,
 						children: /* @__PURE__ */ h("rect", {
 							className: e === o ? "button-selected" : "button",
-							height: Va,
+							height: Ga,
 							onClick: r ? (e) => e : () => a({ target: { value: Number.parseInt(String(e)) } }),
-							transform: `translate(${f + 3} ${p - Va / 1.05}) rotate(45)`,
-							width: Va
+							transform: `translate(${f + 3} ${p - Ga / 1.05}) rotate(45)`,
+							width: Ga
 						})
 					}),
 					/* @__PURE__ */ g("text", {
@@ -4449,7 +4474,7 @@ var ca = class extends e.Component {
 			]
 		})
 	});
-}, Ga = i((e, t) => {
+}, Ya = i((e, t) => {
 	let { Tooltip: n = V, inverted: r = !1, onChange: i, value: a, ...s } = e, c = o(() => {
 		let e = ne("value", a)(be);
 		return e ? /* @__PURE__ */ h("div", {
@@ -4459,7 +4484,7 @@ var ca = class extends e.Component {
 			className: "zds-pickers__placeholder",
 			children: "Select..."
 		});
-	}, [a]), l = o(({ setValue: e }) => /* @__PURE__ */ h(Wa, {
+	}, [a]), l = o(({ setValue: e }) => /* @__PURE__ */ h(Ja, {
 		autosize: !0,
 		inverted: r,
 		onChange: ({ target: { value: t } }) => {
@@ -4484,11 +4509,11 @@ var ca = class extends e.Component {
 		ref: t,
 		value: a
 	});
-}), Ka = i(({ statuses: e, ...t }, n) => /* @__PURE__ */ h($, {
+}), Xa = i(({ statuses: e, ...t }, n) => /* @__PURE__ */ h($, {
 	...t,
 	options: e,
 	ref: n
-})), qa = i((e, t) => {
+})), Za = 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 = I(i - a + 1).map((e) => a + e).map((e) => ({
 			value: e,
@@ -4499,7 +4524,7 @@ var ca = class extends e.Component {
 		r,
 		i,
 		a
-	]), [f, p] = ra(c), m = o((e) => {
+	]), [f, p] = sa(c), m = o((e) => {
 		s(L(e, i, a)), p(Number.parseInt(String(e), 10));
 	}, [
 		i,
@@ -4517,6 +4542,6 @@ var ca = class extends e.Component {
 	});
 });
 //#endregion
-export { Ki as CCPicker, Ji as ChannelMappingPicker, Zi as ChannelPicker, V as DefaultTooltip, na as KeyPicker, Sa as Knob, Ca as KnobPicker, Ta as LatchPicker, oe as MASK_CHANNEL, se as MASK_STATUS, Fi as MEASUREMENT_ELEMENT_ID, Ea as MappingPicker, Aa as NotePicker, Pi as OctavePlayer, Ia as PianoPicker, La as PolarityPicker, Wa as ResponseCurve, ye as ResponseCurveLabels, Ga as ResponseCurvePicker, $ as Select, Ka as StatusPicker, z as Statuses, Ri as SvgText, qa as ValuePicker, I as arraySequence, L as assertRange, ae as changeControllerOptions, le as combineStatusWithChannel, ue as extractStatusAndChannel, ne as findObj, ce as getStatusLabel, zi as noSelection, Ui as noSelectionOption, re as omit, R as pick, be as responseCurves, ie as set, B as statusOptions };
+export { Xi as CCPicker, Qi as ChannelMappingPicker, ta as ChannelPicker, V as DefaultTooltip, oa as KeyPicker, Ea as Knob, Da as KnobPicker, ka as LatchPicker, oe as MASK_CHANNEL, se as MASK_STATUS, Fi as MEASUREMENT_ELEMENT_ID, Aa as MappingPicker, Pa as NotePicker, Pi as OctavePlayer, Ba as PianoPicker, Va as PolarityPicker, Ja as ResponseCurve, ye as ResponseCurveLabels, Ya as ResponseCurvePicker, $ as Select, Xa as StatusPicker, z as Statuses, Hi as SvgText, Za as ValuePicker, zi as __resetFontMetricsCacheForTests, I as arraySequence, L as assertRange, Vi as calculateWordWidths, Bi as calculateWordsByLines, ae as changeControllerOptions, le as combineStatusWithChannel, ue as extractStatusAndChannel, ne as findObj, ce as getStatusLabel, Ui as noSelection, qi as noSelectionOption, re as omit, R as pick, be as responseCurves, ie as set, B as statusOptions };
 
 //# sourceMappingURL=index.es.js.map