@antimatter-audio/antimatter-ui 10.17.0 → 11.0.1

package/dist/index.js

@@ -33,8 +33,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$b = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n  --color-brand: #bb68d9;\n  --color-brand-900: #443342;\n  --color-brand-700: #932eb8;\n  --color-brand-600: #826993;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-page: #1e1d21;\n  --bg-section: #1e1d21;\n  --bg-popover: #09090a;\n  --bg-highlighted: #838091;\n  --bg-muted: #595763;\n  --bg-selected: #2e2c33;\n  --bg-input: #1e1d21;\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: not-allowed;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
-styleInject(css_248z$b);
+var css_248z$c = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n  --color-brand: #bb68d9;\n  --color-brand-900: #443342;\n  --color-brand-700: #932eb8;\n  --color-brand-600: #826993;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-page: #1e1d21;\n  --bg-section: #1e1d21;\n  --bg-popover: #09090a;\n  --bg-highlighted: #838091;\n  --bg-muted: #595763;\n  --bg-selected: #2e2c33;\n  --bg-input: #1e1d21;\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: not-allowed;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
+styleInject(css_248z$c);
 
 var Spacing = /*#__PURE__*/ function(Spacing) {
     Spacing["none"] = "none";
@@ -87,8 +87,8 @@ var Orientation = /*#__PURE__*/ function(Orientation) {
     return Orientation;
 }({});
 
-var css_248z$a = ".Tabs {\n  display: flex;\n  font-size: 1rem;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.Tabs-item {\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Tabs-item::-moz-selection {\n  background: transparent;\n}\n.Tabs-item::selection {\n  background: transparent;\n}\n";
-styleInject(css_248z$a);
+var css_248z$b = ".Tabs {\n  display: flex;\n  font-size: 1rem;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.Tabs-item {\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Tabs-item::-moz-selection {\n  background: transparent;\n}\n.Tabs-item::selection {\n  background: transparent;\n}\n";
+styleInject(css_248z$b);
 
 function Tabs(param) {
     var items = param.items, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
@@ -144,8 +144,8 @@ function Tabs(param) {
 Tabs.padding = Spacing;
 Tabs.margin = Spacing;
 
-var css_248z$9 = ".Button {\n  font-size: var(--text-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: var(--spacing-ms);\n  padding-left: var(--spacing-ms);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: enter;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  &.xSmall {\n    width: var(--spacing-ml);\n    height: var(--spacing-ml);\n  }\n  &.small {\n    font-size: var(--text-xs);\n    min-width: 1rem;\n    min-height: var(--spacing-sm);\n  }\n  &.large {\n    border-radius: var(--radius-sm);\n    min-width: 1rem;\n    min-height: var(--spacing-xl);\n  }\n}\n";
-styleInject(css_248z$9);
+var css_248z$a = ".Button {\n  font-size: var(--text-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: var(--spacing-ms);\n  padding-left: var(--spacing-ms);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: enter;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  &.xSmall {\n    width: var(--spacing-ml);\n    height: var(--spacing-ml);\n  }\n  &.small {\n    font-size: var(--text-xs);\n    min-width: 1rem;\n    min-height: var(--spacing-sm);\n  }\n  &.large {\n    border-radius: var(--radius-sm);\n    min-width: 1rem;\n    min-height: var(--spacing-xl);\n  }\n}\n";
+styleInject(css_248z$a);
 
 var ButtonSize = /*#__PURE__*/ function(ButtonSize) {
     ButtonSize["xSmall"] = "xSmall";
@@ -199,13 +199,13 @@ function useObservable(param) {
     };
 }
 
-function _array_like_to_array$h(arr, len) {
+function _array_like_to_array$j(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
 function _array_without_holes$2(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$h(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$j(arr);
 }
 function _iterable_to_array$2(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
@@ -214,15 +214,15 @@ function _non_iterable_spread$2() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _to_consumable_array$2(arr) {
-    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$h(arr) || _non_iterable_spread$2();
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$j(arr) || _non_iterable_spread$2();
 }
-function _unsupported_iterable_to_array$h(o, minLen) {
+function _unsupported_iterable_to_array$j(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$j(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$j(o, minLen);
 }
 // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
 // mocks the `normalisedToScaledValue` internal method from JUCE
@@ -336,17 +336,37 @@ var getBarTransformStyles = function(param) {
 var randomizeValue = function(min, max) {
     return Math.random() * (max - min) + min;
 };
+var incrementValue = function(param) {
+    var incomingVal = param.incomingVal, prevVal = param.prevVal, interval = param.interval;
+    var getNormalisedInterval = function() {
+        if (interval) {
+            if (interval >= 1) {
+                return interval * 0.01;
+            } else {
+                return interval;
+            }
+        } else {
+            return 0.01;
+        }
+    };
+    var normalisedInterval = getNormalisedInterval();
+    var newValue = (prevVal !== null && prevVal !== void 0 ? prevVal : 0) + incomingVal * // (interval && interval.toString().length > 4
+    //   ? 4
+    //   : 0.4) *
+    normalisedInterval;
+    return clamp(newValue);
+};
 
-function _array_like_to_array$g(arr, len) {
+function _array_like_to_array$i(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$g(arr) {
+function _array_with_holes$i(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$1(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$g(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$i(arr);
 }
 function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -393,7 +413,7 @@ function _define_property$k(obj, key, value) {
 function _iterable_to_array$1(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$g(arr, i) {
+function _iterable_to_array_limit$i(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -417,7 +437,7 @@ function _iterable_to_array_limit$g(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$g() {
+function _non_iterable_rest$i() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$1() {
@@ -457,19 +477,19 @@ function _object_spread_props$4(target, source) {
     }
     return target;
 }
-function _sliced_to_array$g(arr, i) {
-    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$g();
+function _sliced_to_array$i(arr, i) {
+    return _array_with_holes$i(arr) || _iterable_to_array_limit$i(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$i();
 }
 function _to_consumable_array$1(arr) {
-    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$g(arr) || _non_iterable_spread$1();
+    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$i(arr) || _non_iterable_spread$1();
 }
-function _unsupported_iterable_to_array$g(o, minLen) {
+function _unsupported_iterable_to_array$i(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$i(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(o, minLen);
 }
 function _ts_generator$4(thisArg, body) {
     var f, y, t, _ = {
@@ -711,7 +731,7 @@ function useGlobalContext(selector) {
 // Context provider
 function GlobalContextProvider(param) {
     var children = param.children;
-    var _useReducer = _sliced_to_array$g(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
+    var _useReducer = _sliced_to_array$i(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
     var highlightedItemChanged = useCallback(function(highlightedItem) {
         dispatch({
             type: 'HIGHLIGHTED_ITEM_CHANGED',
@@ -980,12 +1000,12 @@ function GlobalContextProvider(param) {
     }, children);
 }
 
-function _array_like_to_array$f(arr, len) {
+function _array_like_to_array$h(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$f(arr) {
+function _array_with_holes$h(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$j(obj, key, value) {
@@ -1001,7 +1021,7 @@ function _define_property$j(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$f(arr, i) {
+function _iterable_to_array_limit$h(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1025,7 +1045,7 @@ function _iterable_to_array_limit$f(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$f() {
+function _non_iterable_rest$h() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$j(target) {
@@ -1043,16 +1063,16 @@ function _object_spread$j(target) {
     }
     return target;
 }
-function _sliced_to_array$f(arr, i) {
-    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$f();
+function _sliced_to_array$h(arr, i) {
+    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$h();
 }
-function _unsupported_iterable_to_array$f(o, minLen) {
+function _unsupported_iterable_to_array$h(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$f(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
 }
 function Button(param) {
     var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, onClick = param.onClick, children = param.children, _param_padding = param.padding, padding = _param_padding === void 0 ? [
@@ -1060,7 +1080,7 @@ function Button(param) {
     ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
         Spacing.none
     ] : _param_margin, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
-    var _React_useState = _sliced_to_array$f(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
+    var _React_useState = _sliced_to_array$h(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
     var buttonState = Juce.getToggleState(id);
     var isLocalhost = window.location.hostname === 'localhost';
     var setModSlotRowTargetAsPreview = useGlobalContext().setModSlotRowTargetAsPreview;
@@ -1140,18 +1160,18 @@ Button.margin = Spacing;
 Button.type = ButtonType;
 Button.size = ButtonSize;
 
-var css_248z$8 = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border-radius: var(--radius-sm);\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: var(--spacing-xl);\n  background: var(--color-gray-800);\n  color: var(--color-text);\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n    background-color: var(--bg-highlighted);\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Dropdown-items {\n  border: 2px solid;\n}\n\n.Dropdown-item {\n  background-color: var(--bg-page);\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  min-width: 100px;\n  color: var(--color-text);\n  cursor: pointer;\n  text-align: center;\n  text-transform: uppercase;\n  font-weight: bold;\n}\n\n.Dropdown-item[data-selected] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n\n.Dropdown-item[data-active] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n";
-styleInject(css_248z$8);
+var css_248z$9 = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border-radius: var(--radius-sm);\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: var(--spacing-xl);\n  background: var(--color-gray-800);\n  color: var(--color-text);\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n    background-color: var(--bg-highlighted);\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Dropdown-items {\n  border: 2px solid;\n}\n\n.Dropdown-item {\n  background-color: var(--bg-page);\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  min-width: 100px;\n  color: var(--color-text);\n  cursor: pointer;\n  text-align: center;\n  text-transform: uppercase;\n  font-weight: bold;\n}\n\n.Dropdown-item[data-selected] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n\n.Dropdown-item[data-active] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n";
+styleInject(css_248z$9);
 
-function _array_like_to_array$e(arr, len) {
+function _array_like_to_array$g(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$e(arr) {
+function _array_with_holes$g(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$e(arr, i) {
+function _iterable_to_array_limit$g(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1175,27 +1195,27 @@ function _iterable_to_array_limit$e(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$e() {
+function _non_iterable_rest$g() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$e(arr, i) {
-    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$e();
+function _sliced_to_array$g(arr, i) {
+    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$g();
 }
-function _unsupported_iterable_to_array$e(o, minLen) {
+function _unsupported_iterable_to_array$g(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$e(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
 }
 var useDropdown = function(param) {
     var id = param.id, // TODO: Is there a better way to handle mod matrix dropdowns?
     rowId = param.rowId, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, filter = param.filter, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
     var _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$e(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
-    var _useState1 = _sliced_to_array$e(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useState = _sliced_to_array$g(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
+    var _useState1 = _sliced_to_array$g(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
     var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview;
     var choices = items.length ? items : (properties === null || properties === void 0 ? void 0 : (_properties_choices = properties.choices) === null || _properties_choices === void 0 ? void 0 : _properties_choices.length) ? properties === null || properties === void 0 ? void 0 : properties.choices : [];
     var filteredChoices = filter ? choices === null || choices === void 0 ? void 0 : choices.filter(function(item) {
@@ -1581,15 +1601,15 @@ function Dropdown(param) {
     }));
 }
 
-var css_248z$7 = ".TextInput {\n  pointer-events: auto;\n  /* font-size: var(--text-xs); */\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n\n.TextInput.is-highlighted {\n  background: var(--color-gray-600);\n  border: 1px solid var(--color-gray-500);\n}\n";
-styleInject(css_248z$7);
+var css_248z$8 = ".TextInput {\n  pointer-events: auto;\n  /* font-size: var(--text-xs); */\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n\n.TextInput:disabled {\n  -webkit-user-select: none;\n  user-select: none;\n}\n";
+styleInject(css_248z$8);
 
-function _array_like_to_array$d(arr, len) {
+function _array_like_to_array$f(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$d(arr) {
+function _array_with_holes$f(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$f(obj, key, value) {
@@ -1605,7 +1625,7 @@ function _define_property$f(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$d(arr, i) {
+function _iterable_to_array_limit$f(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1629,7 +1649,7 @@ function _iterable_to_array_limit$d(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$d() {
+function _non_iterable_rest$f() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$f(target) {
@@ -1647,16 +1667,16 @@ function _object_spread$f(target) {
     }
     return target;
 }
-function _sliced_to_array$d(arr, i) {
-    return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$d();
+function _sliced_to_array$f(arr, i) {
+    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$f();
 }
-function _unsupported_iterable_to_array$d(o, minLen) {
+function _unsupported_iterable_to_array$f(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$f(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
 }
 // import { decimalToPercent, percentToDecimal } from '../../common/utils';
 // import debounce from 'lodash.debounce';
@@ -1668,9 +1688,9 @@ var InputTypes = /*#__PURE__*/ function(InputTypes) {
 function Input(param) {
     var onComplete = param.onComplete, value = param.value; param.min; param.max; var _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.xSmall : _param_fontSize, style = param.style, className = param.className, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? 'var(--color-text)' : _param_textColor;
     var _inputRef_current;
-    var _useState = _sliced_to_array$d(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
+    var _useState = _sliced_to_array$f(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
     // const [hasError, setHasError] = useState<boolean>(false);
-    var _useState1 = _sliced_to_array$d(useState(false), 2), isHighlighted = _useState1[0], setIsHighlighted = _useState1[1];
+    var _useState1 = _sliced_to_array$f(useState(false), 2), isHighlighted = _useState1[0], setIsHighlighted = _useState1[1];
     var valueRef = useRef(null);
     var isLocalhost = window.location.hostname === 'localhost';
     // Sets up listeners to handle changes on the backend
@@ -1814,15 +1834,15 @@ var SliderType = /*#__PURE__*/ function(SliderType) {
     return SliderType;
 }({});
 
-function _array_like_to_array$c(arr, len) {
+function _array_like_to_array$e(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$c(arr) {
+function _array_with_holes$e(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$c(arr, i) {
+function _iterable_to_array_limit$e(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1846,19 +1866,19 @@ function _iterable_to_array_limit$c(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$c() {
+function _non_iterable_rest$e() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$c(arr, i) {
-    return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$c();
+function _sliced_to_array$e(arr, i) {
+    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$e();
 }
-function _unsupported_iterable_to_array$c(o, minLen) {
+function _unsupported_iterable_to_array$e(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$c(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$e(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
@@ -1869,34 +1889,6 @@ var useSlider = function(param) {
         interval: 0.1,
         skew: 0.7
     } : _param_mockProperties, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.vertical : _param_orientation, _param_dragOrientation = param.dragOrientation, dragOrientation = _param_dragOrientation === void 0 ? Orientation.vertical : _param_dragOrientation, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, onChange = param.onChange; param.sliderElementRef; var _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled;
-    var clickListener = function clickListener(event) {
-        var _event_target_closest;
-        if (((_event_target_closest = event.target.closest('.Slider')) === null || _event_target_closest === void 0 ? void 0 : _event_target_closest.id) === id) {
-            var // Update the preview mod slot target selection in the mod matrix.
-            // This selection will be saved to the back end when a modifier is set for the target.
-            _document_getElementById;
-            setIsActive(true);
-            (_document_getElementById = document.getElementById(id)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.focus();
-            event.stopPropagation();
-        } else {
-            var _document_getElementById1;
-            setIsActive(false);
-            (_document_getElementById1 = document.getElementById(id)) === null || _document_getElementById1 === void 0 ? void 0 : _document_getElementById1.blur();
-            event.stopPropagation();
-        }
-    };
-    var keyDownListener = function keyDownListener(event) {
-        if (isActive) {
-            if (event.key === 'ArrowLeft') {
-                event.preventDefault();
-                decrementValue();
-            }
-            if (event.key === 'ArrowRight') {
-                event.preventDefault();
-                incrementValue();
-            }
-        }
-    };
     // const sliderState: JuceSlider = Juce.getSliderState(id);
     // if isLocalhost is true, the front end app is running outside of JUCE in a browser.
     var isLocalhost = window.location.hostname === 'localhost';
@@ -1909,30 +1901,16 @@ var useSlider = function(param) {
    * AudioProcessorParameter::getValue() (C++).
    */ // See https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L230C1-L238C6
     // NOTE: We can think of this as a percentage value, in 0 to 1 format
-    var _useState = _sliced_to_array$c(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
+    var _useState = _sliced_to_array$e(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
     // const [normalisedValue, setNormalisedValue] = useState(0);
-    var _useState1 = _sliced_to_array$c(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useState1 = _sliced_to_array$e(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
     var scaledValueRef = useRef(null);
     var normalisedValueRef = useRef(null);
     var sliderState = Juce.getSliderState(id);
     var prevValueRef = useRef(null);
     // const randomValueSetCounter = useRef<number>(null);
-    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, _useGlobalContext_globalState = _useGlobalContext.// setModSlotRowTarget,
-    globalState, automatableParamsList = _useGlobalContext_globalState.automatableParamsList, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
-    var _useState2 = _sliced_to_array$c(useState(false), 2), isActive = _useState2[0], setIsActive = _useState2[1];
-    useEffect(function() {
-        document.addEventListener('click', clickListener);
-        document.addEventListener('keydown', keyDownListener);
-        return function() {
-            document.removeEventListener('click', clickListener);
-            document.removeEventListener('keydown', keyDownListener);
-        };
-    }, [
-        window,
-        isActive,
-        automatableParamsList,
-        modSlotTargets
-    ]);
+    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, // setModSlotRowTarget,
+    modSlotPreview = _useGlobalContext.globalState.modSlotPreview;
     // Set the initial state
     //@ts-expect-error
     useEffect(function() {
@@ -1945,7 +1923,7 @@ var useSlider = function(param) {
                 end: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties5 = sliderState.properties) === null || _sliderState_properties5 === void 0 ? void 0 : _sliderState_properties5.end,
                 skew: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties6 = sliderState.properties) === null || _sliderState_properties6 === void 0 ? void 0 : _sliderState_properties6.skew
             });
-            setNormalisedState(newValue);
+            setNormalisedState(clamp(newValue));
         };
         if (!isLocalhost) {
             setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
@@ -1962,11 +1940,15 @@ var useSlider = function(param) {
         }
     }, []);
     // TODO: take out mod slot logic
-    var changeHandler = function(scaledValueFromState, sliderId) {
+    var changeHandler = function(normalisedValue, sliderId) {
+        var scaledValue = normalisedToScaled({
+            normalisedValue: normalisedValue,
+            properties: sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties
+        });
         if (rowId === modSlotPreview.targetIndex) {
-            onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)), rowId);
+            onChange && onChange(parseFloat(scaledValue.toFixed(2)), rowId);
         } else {
-            onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)), sliderId);
+            onChange && onChange(parseFloat(scaledValue.toFixed(2)), sliderId);
         }
     };
     // Update the local state from JUCE
@@ -1977,7 +1959,6 @@ var useSlider = function(param) {
         normalisedValueRef.current = parseFloat(normalisedValueFromState.toFixed(2));
         if (scaledValue !== prevValueRef.current) {
             setScaledValue(scaledValue);
-            rowId && changeHandler(scaledValueFromState, rowId);
             if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
                 highlightedItemChanged({
                     label: label,
@@ -2017,49 +1998,10 @@ var useSlider = function(param) {
         var fixedNewValue = parseFloat(newValue.toFixed(2));
         if ((normalisedValueRef === null || normalisedValueRef === void 0 ? void 0 : normalisedValueRef.current) !== fixedNewValue) {
             !isLocalhost && sliderState.setNormalisedValue(clamp(fixedNewValue));
+            rowId && changeHandler(newValue, rowId);
             normalisedValueRef.current = fixedNewValue;
         }
     };
-    var updateValue = function(changeVal) {
-        var getNormalisedInterval = function() {
-            if (properties === null || properties === void 0 ? void 0 : properties.interval) {
-                if ((properties === null || properties === void 0 ? void 0 : properties.interval) >= 1) {
-                    return (properties === null || properties === void 0 ? void 0 : properties.interval) * 0.01;
-                } else {
-                    return properties === null || properties === void 0 ? void 0 : properties.interval;
-                }
-            } else {
-                return 0.01;
-            }
-        };
-        var normalisedInterval = getNormalisedInterval();
-        var _normalisedValueRef_current;
-        var newValue = ((_normalisedValueRef_current = normalisedValueRef.current) !== null && _normalisedValueRef_current !== void 0 ? _normalisedValueRef_current : 0) + changeVal * // (properties?.interval && properties?.interval.toString().length > 4
-        //   ? 4
-        //   : 0.4) *
-        normalisedInterval;
-        return clamp(newValue);
-    };
-    var incrementValue = function() {
-        var newValue = updateValue(10);
-        setNormalisedState(newValue);
-    };
-    var decrementValue = function() {
-        var newValue = updateValue(-10);
-        setNormalisedState(newValue);
-    };
-    var setScaledState = function(newValue) {
-        if ((scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== newValue) {
-            var _sliderState_properties, _sliderState_properties1, _sliderState_properties2;
-            !isLocalhost && properties && sliderState.setNormalisedValue(scaledToNormalised({
-                scaledValue: clamp(parseFloat(newValue.toFixed(2)), properties === null || properties === void 0 ? void 0 : properties.start, properties === null || properties === void 0 ? void 0 : properties.end),
-                start: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start,
-                end: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end,
-                skew: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.skew
-            }));
-            scaledValueRef.current = newValue;
-        }
-    };
     var bindDrag = useGesture({
         onMouseDown: function(param) {
             param.event;
@@ -2076,7 +2018,11 @@ var useSlider = function(param) {
         onDrag: function(param) {
             param.event; var delta = param.delta;
             var deltaVal = delta[1] * -1;
-            var newValue = updateValue(deltaVal);
+            var newValue = incrementValue({
+                incomingVal: deltaVal,
+                prevVal: normalisedValueRef.current || 0,
+                interval: properties === null || properties === void 0 ? void 0 : properties.interval
+            });
             setNormalisedState(newValue);
         },
         onMouseUp: function(param) {
@@ -2173,11 +2119,7 @@ var useSlider = function(param) {
     };
     return {
         setNormalisedState: setNormalisedState,
-        setScaledState: setScaledState,
         setToDefaultState: setToDefaultState,
-        incrementValue: incrementValue,
-        decrementValue: decrementValue,
-        isActive: isActive,
         scaledToNormalised: scaledToNormalised,
         bindBarSliderDrag: bindBarSliderDrag,
         bindSequenceBarSliderDrag: bindSequenceBarSliderDrag,
@@ -2188,9 +2130,140 @@ var useSlider = function(param) {
     };
 };
 
-var css_248z$6 = ".RotarySlider {\n  /* position: relative; */\n  /* border-radius: 50%; */\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  aspect-ratio: 1 / 1;\n  border: 1px solid transparent;\n}\n\n.RotarySlider-Inner {\n  height: 100%;\n  width: 100%;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--bg-popover);\n  border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: var(--spacing-xs);\n  height: 50%;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 5px 8px 5px;\n  transform: rotate(180deg);\n  padding-bottom: var(--spacing-sm);\n}\n\n.ProgressCircle-wrapper {\n  position: relative;\n}\n.ProgressCircle {\n  fill: none;\n  pointer-events: none;\n}\n\n.ProgressCircle-value {\n  text-align: center;\n  margin-top: -3px;\n  height: 0.8rem;\n  line-height: 0.8rem;\n}\n\n.ProgressCircle-bg {\n  stroke-width: 3px;\n  transform-origin: center;\n  transform: rotate(135deg);\n  stroke-linecap: round;\n  font-size: var(--text-sm);\n  pointer-events: none;\n}\n.ProgressCircle-fg {\n  stroke-width: 3px;\n  /* stroke-dasharray: 75; */\n  /* stroke-dashoffset: calc(880 - (660 * 0) / 100); */\n  transform-origin: center;\n  stroke-linecap: round;\n  pointer-events: none;\n}\n\n.corner-border {\n  --b: 1px; /* thickness of the border */\n  --c: var(--color-gray-500); /* color of the border */\n  --w: 5px; /* width of border */\n\n  border: var(--b) solid #0000; /* space for the border */\n  --_g: #0000 90deg, var(--c) 0;\n  --_p: var(--w) var(--w) border-box no-repeat;\n  background:\n    conic-gradient(from 90deg at top var(--b) left var(--b), var(--_g)) 0 0 /\n      var(--_p),\n    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) 100% 0 /\n      var(--_p),\n    conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--_g)) 0 100% /\n      var(--_p),\n    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g))\n      100% 100% / var(--_p);\n}\n";
+var css_248z$7 = ".RotarySlider {\n  /* position: relative; */\n  /* border-radius: 50%; */\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  aspect-ratio: 1 / 1;\n  border: 1px solid transparent;\n}\n\n.RotarySlider-Inner {\n  height: 100%;\n  width: 100%;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--bg-popover);\n  border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: var(--spacing-xs);\n  height: 50%;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 5px 8px 5px;\n  transform: rotate(180deg);\n  padding-bottom: var(--spacing-sm);\n}\n\n.ProgressCircle-wrapper {\n  position: relative;\n}\n.ProgressCircle {\n  fill: none;\n  pointer-events: none;\n}\n\n.ProgressCircle-value {\n  text-align: center;\n  margin-top: -3px;\n  height: 0.8rem;\n  line-height: 0.8rem;\n}\n\n.ProgressCircle-bg {\n  stroke-width: 3px;\n  transform-origin: center;\n  transform: rotate(135deg);\n  stroke-linecap: round;\n  font-size: var(--text-sm);\n  pointer-events: none;\n}\n.ProgressCircle-fg {\n  stroke-width: 3px;\n  /* stroke-dasharray: 75; */\n  /* stroke-dashoffset: calc(880 - (660 * 0) / 100); */\n  transform-origin: center;\n  stroke-linecap: round;\n  pointer-events: none;\n}\n\n.corner-border {\n  --b: 1px; /* thickness of the border */\n  --c: var(--color-gray-500); /* color of the border */\n  --w: 5px; /* width of border */\n\n  border: var(--b) solid #0000; /* space for the border */\n  --_g: #0000 90deg, var(--c) 0;\n  --_p: var(--w) var(--w) border-box no-repeat;\n  background:\n    conic-gradient(from 90deg at top var(--b) left var(--b), var(--_g)) 0 0 /\n      var(--_p),\n    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) 100% 0 /\n      var(--_p),\n    conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--_g)) 0 100% /\n      var(--_p),\n    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g))\n      100% 100% / var(--_p);\n}\n";
+styleInject(css_248z$7);
+
+var css_248z$6 = "";
 styleInject(css_248z$6);
 
+function _array_like_to_array$d(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$d(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$d(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$d() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array$d(arr, i) {
+    return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$d();
+}
+function _unsupported_iterable_to_array$d(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
+}
+function ControlGroup(param) {
+    var id = param.id, isDisabled = param.isDisabled, className = param.className, onChangeActiveState = param.onChangeActiveState, children = param.children;
+    // EXAMPLE CONTROL GROUP STRUCTURE
+    // <ControlGroup id={id-control-group} is-active>
+    //    <Slider id={id}></Slider>
+    //    <Input id={id-input}></Input>
+    // </ControlGroup>
+    var groupId = "".concat(id, "-control-group");
+    var _useState = _sliced_to_array$d(useState(false), 2), isActive = _useState[0], setIsActive = _useState[1];
+    var sliderState = Juce.getSliderState(id);
+    var clickListener = function(event) {
+        if (!isDisabled) {
+            var _event_target_closest;
+            document.getElementById("".concat(id, "-input")).disabled = false;
+            if (((_event_target_closest = event.target.closest('.controlGroup')) === null || _event_target_closest === void 0 ? void 0 : _event_target_closest.id) === groupId) {
+                var _document_getElementById, _document_getElementById1;
+                setIsActive(true);
+                onChangeActiveState && onChangeActiveState(true);
+                (_document_getElementById = document.getElementById("".concat(id, "-input"))) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.focus();
+                (_document_getElementById1 = document.getElementById("".concat(id, "-input"))) === null || _document_getElementById1 === void 0 ? void 0 : _document_getElementById1.select();
+            // event.stopPropagation();
+            } else {
+                var _document_getElementById2;
+                setIsActive(false);
+                onChangeActiveState && onChangeActiveState(false);
+                (_document_getElementById2 = document.getElementById("".concat(id, "-input"))) === null || _document_getElementById2 === void 0 ? void 0 : _document_getElementById2.blur();
+            // event.stopPropagation();
+            }
+        } else {
+            document.getElementById("".concat(id, "-input")).disabled = true;
+        }
+    };
+    var increment = function() {
+        var _sliderState_properties;
+        var normalisedVal = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
+        var newValue = incrementValue({
+            incomingVal: 10,
+            prevVal: normalisedVal,
+            interval: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.interval
+        });
+        sliderState.setNormalisedValue(newValue);
+    };
+    var decrement = function() {
+        var _sliderState_properties;
+        var normalisedVal = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
+        var newValue = incrementValue({
+            incomingVal: -10,
+            prevVal: normalisedVal,
+            interval: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.interval
+        });
+        sliderState === null || sliderState === void 0 ? void 0 : sliderState.setNormalisedValue(newValue);
+    };
+    function keyDownListener(event) {
+        if (isActive && !isDisabled) {
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                decrement();
+            }
+            if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                increment();
+            }
+        }
+    }
+    useEffect(function() {
+        document.addEventListener('click', clickListener);
+        document.addEventListener('keydown', keyDownListener);
+        return function() {
+            document.removeEventListener('click', clickListener);
+            document.removeEventListener('keydown', keyDownListener);
+        };
+    }, [
+        window,
+        isActive,
+        isDisabled
+    ]);
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        id: groupId,
+        className: "controlGroup ".concat(isActive ? 'isActive' : '', " ").concat(isDisabled ? 'isDisabled' : '', " ").concat(className)
+    }, children);
+}
+
 function _define_property$e(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -2309,7 +2382,9 @@ function RotarySlider(param) {
     }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, // onMouseEnter,
     setToDefaultState = _useSlider.setToDefaultState, setNormalisedState = _useSlider.setNormalisedState, // isActive,
     properties = _useSlider.properties;
-    return /*#__PURE__*/ React__default.createElement(Box, {
+    return /*#__PURE__*/ React__default.createElement(ControlGroup, {
+        id: id
+    }, /*#__PURE__*/ React__default.createElement(Box, {
         className: "RotarySlider-wrapper",
         flexDirection: Box.flexDirection.column,
         gap: Box.gap.none,
@@ -2370,7 +2445,7 @@ function RotarySlider(param) {
         ],
         fontSize: Label.fontSize.xSmall,
         value: label
-    }));
+    })));
 }
 RotarySlider.sliderPolarity = Polarity;
 
@@ -2546,15 +2621,15 @@ Heading.fontSize = FontSizes;
 Heading.tag = HeadingTags;
 Heading.padding = Spacing;
 
-function _array_like_to_array$b(arr, len) {
+function _array_like_to_array$c(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$b(arr) {
+function _array_with_holes$c(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$b(arr, i) {
+function _iterable_to_array_limit$c(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -2578,26 +2653,26 @@ function _iterable_to_array_limit$b(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$b() {
+function _non_iterable_rest$c() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$b(arr, i) {
-    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$b();
+function _sliced_to_array$c(arr, i) {
+    return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$c();
 }
-function _unsupported_iterable_to_array$b(o, minLen) {
+function _unsupported_iterable_to_array$c(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$c(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
 var useIndicator = function(param) {
     var id = param.id;
     var isLocalhost = window.location.hostname === 'localhost';
-    var _useState = _sliced_to_array$b(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
+    var _useState = _sliced_to_array$c(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
     // Set the initial state
     useEffect(function() {
         if (!isLocalhost) {
@@ -3180,12 +3255,12 @@ function LinePlot(param) {
 var css_248z$4 = ".Oscilloscope {\n    background: #0EAC8B;\n    box-shadow: inset 0 0 20px #086350;\n    height: 200px;\n  };";
 styleInject(css_248z$4);
 
-function _array_like_to_array$a(arr, len) {
+function _array_like_to_array$b(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$a(arr) {
+function _array_with_holes$b(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$7(obj, key, value) {
@@ -3201,7 +3276,7 @@ function _define_property$7(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$a(arr, i) {
+function _iterable_to_array_limit$b(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3225,7 +3300,7 @@ function _iterable_to_array_limit$a(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$a() {
+function _non_iterable_rest$b() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$7(target) {
@@ -3243,20 +3318,20 @@ function _object_spread$7(target) {
     }
     return target;
 }
-function _sliced_to_array$a(arr, i) {
-    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$a();
+function _sliced_to_array$b(arr, i) {
+    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$b();
 }
-function _unsupported_iterable_to_array$a(o, minLen) {
+function _unsupported_iterable_to_array$b(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
 }
 function Oscilloscope(param) {
     var width = param.width, height = param.height, className = param.className, style = param.style, id = param.id;
-    var _useState = _sliced_to_array$a(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
+    var _useState = _sliced_to_array$b(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
     var cycleLength = useRef(0);
     useEffect(function() {
         //@ts-expect-error
@@ -3300,12 +3375,12 @@ styleInject(css_248z$3);
 var css_248z$2 = ".PresetManagerContainer {\n  width: 100%;\n  height: 100%;\n  background-color: var(--bg-page);\n  color: var(--color-text);\n}\n\n.PresetManagerButton {\n  width: 100%;\n  height: 100%;\n  max-width: 300px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n  cursor: pointer;\n  text-align: center;\n  font-family: var(--font-leagueSpartan);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 225px;\n  display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25;\n  /* position: relative; */\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n  }\n  /* &.isDirty {\n    &::after {\n      content: '*';\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n    }\n  } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n  content: '*';\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  right: -0.75rem;\n  top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n  position: relative;\n  width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n  background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n  position: absolute;\n  font-family: var(--font-leagueSpartan);\n  right: 0px;\n  left: 0px;\n  width: 100%;\n  max-width: 400px !important;\n  color: var(--color-text);\n  background: var(--bg-popover);\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n  outline: none;\n}\n\n/* .PresetManagerCategoryItem {\n  font-family: var(--font-leagueSpartan);\n  cursor: pointer;\n  background: var(--color-gray-800);\n  text-transform: uppercase;\n  &:hover,\n  &.isSelected {\n    background: var(--bg-selected);\n  }\n} */\n\n.PresetManagerListItem {\n  cursor: pointer;\n  background: var(--color-gray-800);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.PresetManagerListItem:hover,\n.PresetManagerListItem.isSelected {\n  background: var(--bg-selected);\n}\n\n.PresetManagerListItemText {\n  display: inline-block;\n  vertical-align: middle;\n  height: 1.5rem;\n  line-height: 1.75;\n}\n";
 styleInject(css_248z$2);
 
-function _array_like_to_array$9(arr, len) {
+function _array_like_to_array$a(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$9(arr) {
+function _array_with_holes$a(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
@@ -3337,7 +3412,7 @@ function _async_to_generator$3(fn) {
         });
     };
 }
-function _iterable_to_array_limit$9(arr, i) {
+function _iterable_to_array_limit$a(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3361,23 +3436,23 @@ function _iterable_to_array_limit$9(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$9() {
+function _non_iterable_rest$a() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_destructuring_empty(o) {
     if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
     return o;
 }
-function _sliced_to_array$9(arr, i) {
-    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
+function _sliced_to_array$a(arr, i) {
+    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$a();
 }
-function _unsupported_iterable_to_array$9(o, minLen) {
+function _unsupported_iterable_to_array$a(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
 }
 function _ts_generator$3(thisArg, body) {
     var f, y, t, _ = {
@@ -3472,16 +3547,16 @@ function _ts_generator$3(thisArg, body) {
 }
 function PresetManager(param) {
     _object_destructuring_empty(param);
-    var _useState = _sliced_to_array$9(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
-    var _useState1 = _sliced_to_array$9(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
+    var _useState = _sliced_to_array$a(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
+    var _useState1 = _sliced_to_array$a(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
     var savePresetFunc = Juce.getNativeFunction('savePreset');
     var loadPresetFunc = Juce.getNativeFunction('loadPreset');
     var getAllPresetsFunc = Juce.getNativeFunction('getAllPresets');
     var getCurrentPresetFunc = Juce.getNativeFunction('getCurrentPreset');
     var isDirtyFunc = Juce.getNativeFunction('canUndo');
-    var _useState2 = _sliced_to_array$9(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
+    var _useState2 = _sliced_to_array$a(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
     var isLocalhost = window.location.hostname === 'localhost';
-    var _useState3 = _sliced_to_array$9(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
+    var _useState3 = _sliced_to_array$a(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
     useEffect(function() {
         if (!isLocalhost) {
             var isDirtyListenerId = //@ts-expect-error
@@ -3757,12 +3832,12 @@ function PresetManager(param) {
     }))))));
 }
 
-function _array_like_to_array$8(arr, len) {
+function _array_like_to_array$9(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$8(arr) {
+function _array_with_holes$9(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
@@ -3807,7 +3882,7 @@ function _define_property$6(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$8(arr, i) {
+function _iterable_to_array_limit$9(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3831,7 +3906,7 @@ function _iterable_to_array_limit$8(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$8() {
+function _non_iterable_rest$9() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$6(target) {
@@ -3849,16 +3924,16 @@ function _object_spread$6(target) {
     }
     return target;
 }
-function _sliced_to_array$8(arr, i) {
-    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
+function _sliced_to_array$9(arr, i) {
+    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
 }
-function _unsupported_iterable_to_array$8(o, minLen) {
+function _unsupported_iterable_to_array$9(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
 }
 function _ts_generator$2(thisArg, body) {
     var f, y, t, _ = {
@@ -4041,8 +4116,8 @@ function ModuleHeader(param) {
     }, [
         window
     ]);
-    var _useState = _sliced_to_array$8(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
-    var _useState1 = _sliced_to_array$8(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
+    var _useState = _sliced_to_array$9(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
+    var _useState1 = _sliced_to_array$9(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
     var handleUndo = function() {
         undo();
     };
@@ -4280,7 +4355,7 @@ function ModuleHeader(param) {
     }, "Advanced")))));
 }
 
-var css_248z$1 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n}\n\n.ModMatrixCell.isDisabled {\n  /* background: var(--bg-muted);\n  color: var(--color-gray-400); */\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.ModMatrixToggleCell {\n  cursor: pointer;\n}\n\n.ModMatrixComboboxCell {\n  background: #252429;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  bottom: -151px;\n  left: 0px;\n  height: 150px;\n  width: 100%;\n  background: var(--color-gray-500);\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  overflow-y: auto;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active,\n.ModMatrixComboboxItem[data-selected] {\n  background: var(--color-gray-600);\n}\n\n.ModMatrixComboboxItem {\n  padding: var(--spacing-md) var(--spacing-lg);\n  width: 100%;\n}\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n";
+var css_248z$1 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n}\n\n.ModMatrixCell.isDisabled {\n  /* background: var(--bg-muted);\n  color: var(--color-gray-400); */\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* .isActive .ModMatrixCell {\n  background: var(--color-gray-600);\n} */\n\n.ModMatrixToggleCell {\n  cursor: pointer;\n}\n\n.ModMatrixComboboxCell {\n  background: #252429;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  bottom: -151px;\n  left: 0px;\n  height: 150px;\n  width: 100%;\n  background: var(--color-gray-500);\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  overflow-y: auto;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active,\n.ModMatrixComboboxItem[data-selected] {\n  background: var(--color-gray-600);\n}\n\n.ModMatrixComboboxItem {\n  padding: var(--spacing-md) var(--spacing-lg);\n  width: 100%;\n}\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n\n.ModMatrixInput {\n  text-align: center;\n  height: 0.8rem;\n}\n";
 styleInject(css_248z$1);
 
 var targetColors = [
@@ -4296,15 +4371,15 @@ var targetColors = [
 var ComboboxCellWidth = '217px';
 var DeleteButtonCellWidth = '50px';
 
-function _array_like_to_array$7(arr, len) {
+function _array_like_to_array$8(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$7(arr) {
+function _array_with_holes$8(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$7(arr, i) {
+function _iterable_to_array_limit$8(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -4328,26 +4403,26 @@ function _iterable_to_array_limit$7(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$7() {
+function _non_iterable_rest$8() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$7(arr, i) {
-    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
+function _sliced_to_array$8(arr, i) {
+    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
 }
-function _unsupported_iterable_to_array$7(o, minLen) {
+function _unsupported_iterable_to_array$8(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
 }
 var useCombobox = function(param) {
     var id = param.id, filter = param.filter;
     var _Object_values;
     var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$7(useState(0), 2), value = _useState[0], setValue = _useState[1];
-    var _useState1 = _sliced_to_array$7(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useState = _sliced_to_array$8(useState(0), 2), value = _useState[0], setValue = _useState[1];
+    var _useState1 = _sliced_to_array$8(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
     var prevValue = useRef(null);
     var _useGlobalContext = useGlobalContext(); _useGlobalContext.highlightedItemChanged; var setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, _useGlobalContext_globalState = _useGlobalContext.globalState, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
     //TODO: Filter choices for subsequent rows
@@ -4435,12 +4510,12 @@ var useCombobox = function(param) {
     };
 };
 
-function _array_like_to_array$6(arr, len) {
+function _array_like_to_array$7(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$6(arr) {
+function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$5(obj, key, value) {
@@ -4456,7 +4531,7 @@ function _define_property$5(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$6(arr, i) {
+function _iterable_to_array_limit$7(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -4480,7 +4555,7 @@ function _iterable_to_array_limit$6(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$6() {
+function _non_iterable_rest$7() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$5(target) {
@@ -4498,20 +4573,20 @@ function _object_spread$5(target) {
     }
     return target;
 }
-function _sliced_to_array$6(arr, i) {
-    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
+function _sliced_to_array$7(arr, i) {
+    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
 }
-function _unsupported_iterable_to_array$6(o, minLen) {
+function _unsupported_iterable_to_array$7(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
 function ModMatrixComboboxCell(param) {
     var rowId = param.rowId, key = param.key, color = param.color, style = param.style;
-    var _useState = _sliced_to_array$6(useState(''), 2), filterString = _useState[0], setFilterString = _useState[1];
+    var _useState = _sliced_to_array$7(useState(''), 2), filterString = _useState[0], setFilterString = _useState[1];
     var _useGlobalContext = useGlobalContext(), updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, clearModSlotPreview = _useGlobalContext.clearModSlotPreview, setNewModSlotPreview = _useGlobalContext.setNewModSlotPreview, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotPreview = _useGlobalContext_globalState.modSlotPreview, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels;
     var _useCombobox = useCombobox({
         id: rowId,
@@ -4686,19 +4761,20 @@ function _object_spread$3(target) {
     return target;
 }
 function SingleBarViz(param) {
-    var _param_background = param.background, background = _param_background === void 0 ? 'var(--color-brand)' : _param_background, _param_height = param.height, height = _param_height === void 0 ? '6px' : _param_height, _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.horizontal : _param_orientation, value = param.value, className = param.className, style = param.style;
+    var _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'var(--color-gray-600)' : _param_backgroundColor, _param_sliderColor = param.sliderColor, sliderColor = _param_sliderColor === void 0 ? 'var(--color-brand)' : _param_sliderColor, _param_height = param.height, height = _param_height === void 0 ? '6px' : _param_height, _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.horizontal : _param_orientation, value = param.value, className = param.className, style = param.style;
     return /*#__PURE__*/ React__default.createElement("div", {
         className: className,
         style: {
             width: '100%',
             height: height,
-            background: 'var(--color-gray-600)',
-            position: 'relative'
+            position: 'relative',
+            background: backgroundColor
         }
     }, /*#__PURE__*/ React__default.createElement("div", {
+        className: "SingleBarViz",
         style: _object_spread$3({
             position: 'absolute',
-            background: background
+            background: sliderColor
         }, getBarTransformStyles({
             polarity: polarity,
             orientation: orientation,
@@ -4708,6 +4784,14 @@ function SingleBarViz(param) {
 }
 SingleBarViz.polarity = Polarity;
 
+function _array_like_to_array$6(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$6(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _define_property$2(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -4721,6 +4805,33 @@ function _define_property$2(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array_limit$6(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$6() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread$2(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -4755,10 +4866,22 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
+function _sliced_to_array$6(arr, i) {
+    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
+}
+function _unsupported_iterable_to_array$6(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
+}
 function ModMatrixCell(param) {
     var modifier = param.modifier, rowId = param.rowId, isDisabled = param.isDisabled, color = param.color, style = param.style;
     var _SingleBarViz_polarity;
     var _useGlobalContext = useGlobalContext(), setDefaultParameter = _useGlobalContext.setDefaultParameter, saveModSlotPreviewRowTargetToBackend = _useGlobalContext.saveModSlotPreviewRowTargetToBackend;
+    var _useState = _sliced_to_array$6(useState(false), 2); _useState[0]; var setIsActive = _useState[1];
     var _useSlider = useSlider({
         id: modifier,
         rowId: rowId,
@@ -4767,8 +4890,15 @@ function ModMatrixCell(param) {
         dragOrientation: Orientation.vertical,
         onChange: saveModSlotPreviewRowTargetToBackend,
         isDisabled: isDisabled
-    }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue;
-    return /*#__PURE__*/ React__default.createElement(Box, _object_spread_props(_object_spread$2({
+    }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, properties = _useSlider.properties, setNormalisedState = _useSlider.setNormalisedState;
+    return /*#__PURE__*/ React__default.createElement(ControlGroup, {
+        id: modifier,
+        className: "ModMatrixCell-Wrapper",
+        isDisabled: isDisabled,
+        onChangeActiveState: function(isActive) {
+            return setIsActive(isActive);
+        }
+    }, /*#__PURE__*/ React__default.createElement(Box, _object_spread_props(_object_spread$2({
         className: "ModMatrixCell ".concat(isDisabled ? 'isDisabled' : ''),
         justifyContent: Box.justifyContent.flexEnd,
         alignItems: Box.alignItems.flexStart,
@@ -4787,7 +4917,29 @@ function ModMatrixCell(param) {
         style: {
             pointerEvents: 'none'
         }
-    }, /*#__PURE__*/ React__default.createElement(Label, null, parseFloat(scaledValue.toFixed(2)) || '0')), /*#__PURE__*/ React__default.createElement(Box, {
+    }, /*#__PURE__*/ React__default.createElement(Input, {
+        className: "ModMatrixInput",
+        value: scaledValue,
+        id: modifier,
+        min: (properties === null || properties === void 0 ? void 0 : properties.start) || 0,
+        max: (properties === null || properties === void 0 ? void 0 : properties.end) || 0,
+        type: Input.type.number,
+        style: {
+            fontWeight: 'bold',
+            width: '100%',
+            // maxWidth: `${width}px`,
+            marginBottom: 'var(--spacing-sm)'
+        },
+        onComplete: function(value) {
+            var normalisedVal = properties && scaledToNormalised({
+                scaledValue: value,
+                start: properties === null || properties === void 0 ? void 0 : properties.start,
+                end: properties === null || properties === void 0 ? void 0 : properties.end,
+                skew: properties === null || properties === void 0 ? void 0 : properties.skew
+            });
+            normalisedVal !== undefined && setNormalisedState(normalisedVal);
+        }
+    })), /*#__PURE__*/ React__default.createElement(Box, {
         style: {
             alignSelf: 'flex-end',
             pointerEvents: 'none'
@@ -4795,7 +4947,10 @@ function ModMatrixCell(param) {
     }, /*#__PURE__*/ React__default.createElement(SingleBarViz, {
         value: (modifier === null || modifier === void 0 ? void 0 : modifier.value) || 0,
         polarity: SingleBarViz === null || SingleBarViz === void 0 ? void 0 : (_SingleBarViz_polarity = SingleBarViz.polarity) === null || _SingleBarViz_polarity === void 0 ? void 0 : _SingleBarViz_polarity.bipolar,
-        background: color,
+        // backgroundColor={
+        //   isActive ? 'var(--color-gray-500)' : 'var(--color-gray-600)'
+        // }
+        sliderColor: color,
         style: _object_spread$2({
             alignSelf: 'flex-end',
             pointerEvents: 'none'
@@ -4804,7 +4959,7 @@ function ModMatrixCell(param) {
             polarity: Polarity === null || Polarity === void 0 ? void 0 : Polarity.bipolar,
             normalisedValue: normalisedValue
         }))
-    })));
+    }))));
 }
 
 function ModMatrixRow(param) {