@antimatter-audio/antimatter-ui 10.9.5 → 10.10.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useRef, useReducer, useCallback, createContext, useContext } from 'react';
+import React__default, { useEffect, useRef, useReducer, useCallback, createContext, useContext, useState } from 'react';
 import classnames from 'classnames';
 import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption } from '@headlessui/react';
 import * as Juce from 'juce-framework-frontend';
@@ -67,12 +67,6 @@ var Width = /*#__PURE__*/ function(Width) {
     Width["auto"] = "auto";
     return Width;
 }({});
-var InputErrorStates = /*#__PURE__*/ function(InputErrorStates) {
-    InputErrorStates["exceedsMaxLength"] = "exceedsMaxLength";
-    InputErrorStates["valueOutOfRange"] = "valueOutOfRange";
-    InputErrorStates["invalidCharacter"] = "invalidCharacter";
-    return InputErrorStates;
-}({});
 var FontSizes = /*#__PURE__*/ function(FontSizes) {
     FontSizes["xSmall"] = "xs";
     FontSizes["small"] = "sm";
@@ -96,61 +90,15 @@ var Orientation = /*#__PURE__*/ function(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);
 
-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$e(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-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 = [];
-    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$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$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$e(o, minLen) {
-    if (!o) return;
-    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$e(o, minLen);
-}
 function Tabs(param) {
     var items = param.items, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
         Spacing.mediumSmall
     ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
         Spacing.none
     ] : _param_margin, gap = param.gap, width = param.width, onChange = param.onChange, selectedIndex = param.selectedIndex;
-    var _useState = _sliced_to_array$e(useState(0), 2), selectedItem = _useState[0], setSelectedItem = _useState[1];
+    // const [selectedItem, setSelectedItem] = useState(0);
     var handleChange = function(index) {
-        setSelectedItem(index);
+        // setSelectedItem(index);
         onChange(index);
     };
     var _margin_, _margin_1, _margin_2, _ref;
@@ -165,6 +113,7 @@ function Tabs(param) {
             marginLeft: "var(--ml-".concat((_ref = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref !== void 0 ? _ref : margin[0], ")"),
             width: width
         },
+        manual: true,
         selectedIndex: selectedIndex,
         onChange: function(index) {
             return handleChange(index);
@@ -188,7 +137,7 @@ function Tabs(param) {
                 paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
                 paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")")
             },
-            className: classnames('Tabs-item', 'bg-input', 'color-input-text', index === selectedItem && 'bg-input-selected')
+            className: classnames('Tabs-item', 'bg-input', 'color-input-text')
         }, item);
     })));
 }
@@ -215,7 +164,7 @@ function _array_like_to_array$d(arr, len) {
     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$c(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$k(obj, key, value) {
@@ -231,7 +180,7 @@ function _define_property$k(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$d(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 = [];
@@ -255,7 +204,7 @@ function _iterable_to_array_limit$d(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$d() {
+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 _object_spread$k(target) {
@@ -273,8 +222,8 @@ function _object_spread$k(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$c(arr, i) {
+    return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$c();
 }
 function _unsupported_iterable_to_array$d(o, minLen) {
     if (!o) return;
@@ -290,7 +239,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$d(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
+    var _React_useState = _sliced_to_array$c(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
     var buttonState = Juce.getToggleState(id);
     var isLocalhost = window.location.hostname === 'localhost';
     // Update the local state when the ID changes
@@ -408,10 +357,31 @@ function useObservable(param) {
     };
 }
 
-var clamp = function(val) {
-    var min = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, max = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
-    return Math.max(min, Math.min(max, val));
-};
+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_without_holes$1(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$c(arr);
+}
+function _iterable_to_array$1(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread$1() {
+    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$1(arr) {
+    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$c(arr) || _non_iterable_spread$1();
+}
+function _unsupported_iterable_to_array$c(o, minLen) {
+    if (!o) return;
+    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$c(o, minLen);
+}
 // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
 // mocks the `normalisedToScaledValue` internal method from JUCE
 // This will allow us to test the JS UI without needing access to the JUCE backend
@@ -426,7 +396,6 @@ function normalisedToScaled(param) {
 function scaledToNormalised(param) {
     var scaledValue = param.scaledValue, properties = param.properties;
     var start = properties.start, end = properties.end, skew = properties.skew;
-    console.log(start, end, skew, 'start, end, skew');
     return Math.pow((scaledValue - start) / (end - start), skew);
 }
 var decimalToPercent = function(decimal) {
@@ -435,13 +404,104 @@ var decimalToPercent = function(decimal) {
 var percentToDecimal = function(percent) {
     return Math.round(0.01 * (typeof percent === 'string' ? parseFloat(percent) : percent));
 };
+var inputCharacterIsValid = function(char) {
+    var validCharacter = /^[\d.-]$/;
+    return validCharacter.test(char.toString());
+};
+var clamp = function(val) {
+    var min = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, max = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
+    return Math.max(min, Math.min(max, val));
+};
+function snapToLegalValue(param) {
+    var value = param.value, properties = param.properties;
+    var interval = properties.interval, start = properties.start, end = properties.end;
+    if (interval == 0) return value;
+    var roundedInterval = parseFloat(interval === null || interval === void 0 ? void 0 : interval.toFixed(2));
+    var formattedValue = start + roundedInterval * Math.floor((value - start) / roundedInterval + 0.5);
+    return clamp(parseFloat(formattedValue.toFixed(2)), start, end);
+}
+// const validNumber = /^-?\.?\d+(\.\d)?$/;
+// const lastNumberIsDigit = /\d$/;
+var validateInputChange = function(e) {
+    return e.nativeEvent.data === '' || e.nativeEvent.data === null || inputCharacterIsValid(e.nativeEvent.data);
+};
+var getValidValueForInput = function(param) {
+    var value = param.value, oldValue = param.oldValue, properties = param.properties;
+    var _splitValueArray_;
+    // TODO: Clean up
+    var matchCriteria = /^-?(?:\d+\.\d+|\d+|\.\d+)$/g;
+    var splitValue = value.toString().matchAll(matchCriteria);
+    var splitValueArray = _to_consumable_array$1(splitValue);
+    var validValue = splitValueArray === null || splitValueArray === void 0 ? void 0 : (_splitValueArray_ = splitValueArray[0]) === null || _splitValueArray_ === void 0 ? void 0 : _splitValueArray_[0];
+    var start = properties.start, end = properties.end;
+    if (validValue !== null && validValue !== undefined) {
+        if (parseFloat(validValue) > end) {
+            return end;
+        } else if (parseFloat(validValue) < start) {
+            return start;
+        } else {
+            return snapToLegalValue({
+                value: parseFloat(validValue),
+                properties: properties
+            });
+        }
+    } else {
+        return oldValue;
+    }
+};
+var getBarTransformStyles = function(param) {
+    var polarity = param.polarity, orientation = param.orientation, normalisedValue = param.normalisedValue;
+    var wholeNumberNormalisedValue = normalisedValue * 100;
+    var linearValue = wholeNumberNormalisedValue ? parseFloat(wholeNumberNormalisedValue === null || wholeNumberNormalisedValue === void 0 ? void 0 : wholeNumberNormalisedValue.toFixed(2)) : 0;
+    var bipolarValue = (wholeNumberNormalisedValue - 50) / 100;
+    if (polarity === Polarity.linear) {
+        return orientation === Orientation.horizontal ? {
+            width: linearValue ? "100%" : '1px',
+            height: '100%',
+            transform: linearValue ? "scale(".concat(Math.ceil(linearValue) * 0.01, ", 1)") : 'none',
+            transformOrigin: 'center left',
+            top: '0',
+            bottom: '0',
+            left: '0'
+        } : {
+            width: "100%",
+            height: linearValue ? '100%' : '1px',
+            transform: "scale(1, ".concat(Math.ceil(linearValue) * 0.01, ")"),
+            transformOrigin: 'bottom center',
+            top: '0',
+            bottom: '0',
+            left: '0'
+        };
+    } else {
+        return orientation === Orientation.horizontal ? {
+            width: bipolarValue ? "100%" : '1px',
+            height: '100%',
+            transform: bipolarValue ? "scale(".concat(bipolarValue, ", 1)") : 'none',
+            transformOrigin: 'left center',
+            top: '0',
+            bottom: '0',
+            left: '50%'
+        } : {
+            width: "100%",
+            height: bipolarValue ? '100%' : '1px',
+            transform: bipolarValue ? "scale(1, ".concat(bipolarValue, ")") : 'none',
+            transformOrigin: 'bottom center',
+            bottom: '50%',
+            left: '0',
+            right: '0'
+        };
+    }
+};
+var randomizeValue = function(min, max) {
+    return Math.random() * (max - min) + min;
+};
 
-function _array_like_to_array$c(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$c(arr) {
+function _array_with_holes$b(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$j(obj, key, value) {
@@ -457,7 +517,7 @@ function _define_property$j(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$c(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 = [];
@@ -481,7 +541,7 @@ function _iterable_to_array_limit$c(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$c() {
+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$j(target) {
@@ -518,16 +578,16 @@ function _object_spread_props$4(target, source) {
     }
     return target;
 }
-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$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$c(o, minLen) {
+function _unsupported_iterable_to_array$b(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$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$c(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
 }
 // Initial state
 var defaultGlobalStateValue = {
@@ -612,7 +672,7 @@ function useGlobalContext(selector) {
 // Context provider
 function GlobalContextProvider(param) {
     var children = param.children;
-    var _useReducer = _sliced_to_array$c(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
+    var _useReducer = _sliced_to_array$b(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
     var highlightedItemChanged = useCallback(function(highlightedItem) {
         dispatch({
             type: 'HIGHLIGHTED_ITEM_CHANGED',
@@ -720,15 +780,15 @@ function GlobalContextProvider(param) {
     }, children);
 }
 
-function _array_like_to_array$b(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$b(arr) {
+function _array_with_holes$a(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$b(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 = [];
@@ -752,26 +812,26 @@ function _iterable_to_array_limit$b(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$b() {
+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 _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$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$b(o, minLen) {
+function _unsupported_iterable_to_array$a(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$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$b(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
 }
 var useDropdown = function(param) {
     var id = param.id, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, 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$b(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
-    var _useState1 = _sliced_to_array$b(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useState = _sliced_to_array$a(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
+    var _useState1 = _sliced_to_array$a(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
     var setHighlightedItem = useGlobalContext().setHighlightedItem;
     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) {
@@ -1096,7 +1156,9 @@ function Dropdown(param) {
     }), value = _useDropdown.value, choices = _useDropdown.choices, onMouseEnter = _useDropdown.onMouseEnter, handleChange = _useDropdown.handleChange;
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
-        onMouseEnter: onMouseEnter
+        onMouseEnter: onMouseEnter,
+        width: "100%",
+        flex: "0 1 auto"
     }, /*#__PURE__*/ React__default.createElement(Listbox, {
         value: value,
         onChange: handleChange
@@ -1127,6 +1189,9 @@ function Dropdown(param) {
         }, item);
     }))), /*#__PURE__*/ React__default.createElement(Label, {
         padding: [
+            Label.padding.mediumSmall,
+            Label.padding.mediumSmall,
+            Label.padding.none,
             Label.padding.mediumSmall
         ],
         fontSize: Label.fontSize.xSmall,
@@ -1137,90 +1202,15 @@ function Dropdown(param) {
     }));
 }
 
-var validate = function(param) {
-    var value = param.value, minLength = param.minLength, maxLength = param.maxLength, min = param.min, max = param.max, _param_type = param.type, type = _param_type === void 0 ? InputTypes.text : _param_type;
-    // TODO: Clean up
-    var errorMessages = [];
-    var isIncomplete = false;
-    var length = value.toString().length;
-    if (length > maxLength && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.exceedsMaxLength)) === -1) {
-        errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.push(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.exceedsMaxLength);
-    }
-    if (length < minLength) {
-        isIncomplete = true;
-    }
-    if (type === InputTypes.number) {
-        if (!(value === '' || /^-?[\d-.]+$/.test(value.toString()))) {
-            errorMessages.push(InputErrorStates.invalidCharacter);
-        }
-        if (typeof value === 'number') {
-            if ((value > max || value < min) && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates.valueOutOfRange)) === -1) {
-                errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.push(InputErrorStates.valueOutOfRange);
-            }
-        }
-    }
-    return {
-        errorMessages: errorMessages,
-        isIncomplete: isIncomplete,
-        isValid: !errorMessages.length && !isIncomplete
-    };
-};
-var getBarTransformStyles = function(param) {
-    var polarity = param.polarity, orientation = param.orientation, normalisedValue = param.normalisedValue;
-    var wholeNumberNormalisedValue = normalisedValue * 100;
-    var linearValue = wholeNumberNormalisedValue ? parseFloat(wholeNumberNormalisedValue === null || wholeNumberNormalisedValue === void 0 ? void 0 : wholeNumberNormalisedValue.toFixed(2)) : 0;
-    var bipolarValue = (wholeNumberNormalisedValue - 50) / 100;
-    if (polarity === Polarity.linear) {
-        return orientation === Orientation.horizontal ? {
-            width: linearValue ? "100%" : '1px',
-            height: '100%',
-            transform: linearValue ? "scale(".concat(Math.ceil(linearValue) * 0.01, ", 1)") : 'none',
-            transformOrigin: 'center left',
-            top: '0',
-            bottom: '0',
-            left: '0'
-        } : {
-            width: "100%",
-            height: linearValue ? '100%' : '1px',
-            transform: "scale(1, ".concat(Math.ceil(linearValue) * 0.01, ")"),
-            transformOrigin: 'bottom center',
-            top: '0',
-            bottom: '0',
-            left: '0'
-        };
-    } else {
-        return orientation === Orientation.horizontal ? {
-            width: bipolarValue ? "100%" : '1px',
-            height: '100%',
-            transform: bipolarValue ? "scale(".concat(bipolarValue, ", 1)") : 'none',
-            transformOrigin: 'left center',
-            top: '0',
-            bottom: '0',
-            left: '50%'
-        } : {
-            width: "100%",
-            height: bipolarValue ? '100%' : '1px',
-            transform: bipolarValue ? "scale(1, ".concat(bipolarValue, ")") : 'none',
-            transformOrigin: 'bottom center',
-            bottom: '50%',
-            left: '0',
-            right: '0'
-        };
-    }
-};
-var randomizeValue = function(min, max) {
-    return Math.random() * (max - min) + min;
-};
-
-var css_248z$7 = ".TextInput {\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n";
+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);
 
-function _array_like_to_array$a(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$a(arr) {
+function _array_with_holes$9(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$f(obj, key, value) {
@@ -1236,7 +1226,7 @@ function _define_property$f(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$a(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 = [];
@@ -1260,7 +1250,7 @@ function _iterable_to_array_limit$a(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$a() {
+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$f(target) {
@@ -1278,16 +1268,16 @@ function _object_spread$f(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$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$a(o, minLen) {
+function _unsupported_iterable_to_array$9(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$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$a(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
 }
 // import { decimalToPercent, percentToDecimal } from '../../common/utils';
 // import debounce from 'lodash.debounce';
@@ -1297,62 +1287,85 @@ var InputTypes = /*#__PURE__*/ function(InputTypes) {
     return InputTypes;
 }({});
 function Input(param) {
-    var onComplete = param.onComplete, value = param.value, min = param.min, max = param.max, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, _param_minLength = param.minLength, minLength = _param_minLength === void 0 ? 1 : _param_minLength, _param_maxLength = param.maxLength, maxLength = _param_maxLength === void 0 ? 20 : _param_maxLength, fontSize = param.fontSize, style = param.style, className = param.className, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? '#999' : _param_textColor;
+    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$a(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
-    var _useState1 = _sliced_to_array$a(useState(false), 2), hasError = _useState1[0], setHasError = _useState1[1];
-    var _useState2 = _sliced_to_array$a(useState(false), 2), hasIncompleteValue = _useState2[0], setHasIncompleteValue = _useState2[1];
+    var _useState = _sliced_to_array$9(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
+    // const [hasError, setHasError] = useState<boolean>(false);
+    var _useState1 = _sliced_to_array$9(useState(false), 2), isHighlighted = _useState1[0], setIsHighlighted = _useState1[1];
     var valueRef = useRef(null);
-    var timer, timeoutVal = 2000;
+    var isLocalhost = window.location.hostname === 'localhost';
+    // Sets up listeners to handle changes on the backend
+    useEffect(function() {
+        var sliderState = Juce.getSliderState(id);
+        var legalVal = snapToLegalValue({
+            value: sliderState === null || sliderState === void 0 ? void 0 : sliderState.scaledValue,
+            properties: sliderState.properties
+        });
+        setInternalValue(legalVal);
+        valueRef.current = legalVal;
+    }, [
+        id
+    ]);
+    useEffect(function() {
+        if (!isLocalhost) {
+            var sliderState = Juce.getSliderState(id);
+            var valueListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.valueChangedEvent.addListener(function(e) {
+                var legalVal = snapToLegalValue({
+                    value: sliderState === null || sliderState === void 0 ? void 0 : sliderState.scaledValue,
+                    properties: sliderState.properties
+                });
+                valueRef.current = legalVal;
+                setInternalValue(legalVal);
+            });
+            return function() {
+                sliderState === null || sliderState === void 0 ? void 0 : sliderState.valueChangedEvent.removeListener(valueListenerId);
+            };
+        }
+        return;
+    }, [
+        window
+    ]);
     // (inputValue === '' || /^-?\d+$/.test(inputValue)
-    function handleKeyPress(e) {
-        window.clearTimeout(timer);
-        var key = e.keyCode || e.which;
-        if (key === 13 || key === 9) {
-            var newValue = e.target.value;
-            var _validate = validate({
+    function clickListener(event) {
+        if (event.target.id === id) {
+            var _document_getElementById;
+            (_document_getElementById = document.getElementById(id)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.focus();
+            setIsHighlighted(true);
+        } else {
+            var _document_getElementById1;
+            setIsHighlighted(false);
+            (_document_getElementById1 = document.getElementById(id)) === null || _document_getElementById1 === void 0 ? void 0 : _document_getElementById1.blur();
+        }
+    }
+    function handleSubmit(e) {
+        var newValue = e.target.value;
+        var _Juce_getSliderState = Juce.getSliderState(id), scaledValue = _Juce_getSliderState.scaledValue, properties = _Juce_getSliderState.properties;
+        if ((valueRef === null || valueRef === void 0 ? void 0 : valueRef.current) !== newValue && e.target.id === id) {
+            var validValue = getValidValueForInput({
                 value: newValue,
-                type: type,
-                minLength: minLength,
-                maxLength: maxLength,
-                min: min,
-                max: max
-            }), errorMessages = _validate.errorMessages, isIncomplete = _validate.isIncomplete;
-            if (errorMessages.length === 0 && !isIncomplete) {
-                setHasIncompleteValue(false);
-                setHasError(false);
+                oldValue: scaledValue,
+                properties: properties
+            });
+            valueRef.current = validValue;
+            onComplete(validValue);
+            if (validValue === valueRef.current) {
+                setInternalValue(validValue);
             }
         }
     }
+    useEffect(function() {
+        document.addEventListener('click', clickListener);
+        return function() {
+            document.removeEventListener('click', clickListener);
+        };
+    }, [
+        window,
+        isHighlighted
+    ]);
     function handleKeyUp(e) {
-        window.clearTimeout(timer); // prevent errant multiple timeouts from being generated
-        timer = window.setTimeout(function() {
-            var newValue = e.target.value;
-            if ((valueRef === null || valueRef === void 0 ? void 0 : valueRef.current) !== newValue) {
-                var _validate = validate({
-                    value: newValue,
-                    type: type,
-                    minLength: minLength,
-                    maxLength: maxLength,
-                    min: min,
-                    max: max
-                }), errorMessages = _validate.errorMessages, isIncomplete = _validate.isIncomplete;
-                if (errorMessages.length && !isIncomplete) {
-                    setHasError(true);
-                    setHasIncompleteValue(false);
-                }
-                if (isIncomplete) {
-                    setHasIncompleteValue(true);
-                }
-                if (errorMessages.length === 0 && !isIncomplete) {
-                    setHasIncompleteValue(false);
-                    setHasError(false);
-                    onComplete && onComplete(newValue);
-                }
-                onComplete && onComplete(newValue);
-                valueRef.current = newValue;
-            }
-        }, timeoutVal);
+        if (e.key === 'Enter') {
+            handleSubmit(e);
+        }
     }
     var inputRef = useRef('');
     // detects when the user is actively typing
@@ -1360,70 +1373,34 @@ function Input(param) {
     // triggers a check to see if the user is actually done typing
     inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.addEventListener('keyup', handleKeyUp));
     var handleChange = useCallback(function(e) {
-        var newValue = e.target.value;
-        setHasError(false);
-        var _validate = validate({
-            value: newValue,
-            type: type,
-            minLength: minLength,
-            maxLength: maxLength,
-            min: min,
-            max: max
-        }), errorMessages = _validate.errorMessages, isValid = _validate.isValid;
-        if (isValid) {
-            setHasError(false);
-            setHasIncompleteValue(false);
-        }
         // Don't set the internal value if the value exceeds the max length
         // Don't set the internal value if the value contains an invalid character
-        if ((errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.exceedsMaxLength)) === -1 && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.invalidCharacter)) === -1) {
-            setInternalValue(newValue);
+        if (validateInputChange(e)) {
+            setInternalValue(e.target.value);
         }
     }, [
-        setHasError,
-        validate,
+        getValidValueForInput,
         setInternalValue
     ]);
-    useEffect(function() {
-        setInternalValue(value);
-        var isValid = validate({
-            value: value,
-            type: type,
-            minLength: minLength,
-            maxLength: maxLength,
-            min: min,
-            max: max
-        }).isValid;
-        if (isValid) {
-            setHasError(false);
-            setHasIncompleteValue(false);
-        }
-    }, [
-        value
-    ]);
+    // useEffect(() => {
+    //   setInternalValue(value);
+    // }, [value]);
     return /*#__PURE__*/ React__default.createElement("input", {
         id: id,
         ref: inputRef,
-        className: classnames('TextInput', hasIncompleteValue || hasError ? 'is-blinking' : '', className),
+        className: classnames('TextInput', isHighlighted ? 'is-highlighted' : '', className),
         style: _object_spread$f({
-            // TODO
-            // color: hasError ? 'red' : hasIncompleteValue ? '#999' : textColor
-            color: hasError ? 'red' : textColor,
-            fontSize: fontSize
+            fontSize: "var(--text-".concat(fontSize),
+            color: textColor
         }, style),
         value: internalValue,
         onKeyUp: function() {
             return handleKeyUp;
         },
-        onKeyDown: function() {
-            return handleKeyPress;
-        },
-        onBlur: function() {
-            return setInternalValue(internalValue);
-        },
-        onFocus: function(e) {
-            return e.target.select();
+        onBlur: function(e) {
+            return handleSubmit(e);
         },
+        // onFocus={(e) => e.target.select()}
         onChange: function(e) {
             return handleChange(e);
         }
@@ -1438,15 +1415,15 @@ var SliderType = /*#__PURE__*/ function(SliderType) {
     return SliderType;
 }({});
 
-function _array_like_to_array$9(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$9(arr) {
+function _array_with_holes$8(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$9(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 = [];
@@ -1470,19 +1447,19 @@ function _iterable_to_array_limit$9(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$9() {
+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$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$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$9(o, minLen) {
+function _unsupported_iterable_to_array$8(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$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$9(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
@@ -1493,6 +1470,28 @@ 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;
+    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) {
+            setIsActive(true);
+            event.stopPropagation();
+        } else {
+            setIsActive(false);
+            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';
@@ -1505,13 +1504,25 @@ 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$9(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
+    var _useState = _sliced_to_array$8(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
     // const [normalisedValue, setNormalisedValue] = useState(0);
-    var _useState1 = _sliced_to_array$9(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useState1 = _sliced_to_array$8(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
     var scaledValueRef = useRef(null);
     var normalisedValueRef = useRef(null);
     // const randomValueSetCounter = useRef<number>(null);
     var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter;
+    var _useState2 = _sliced_to_array$8(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
+    ]);
     // Set the initial state
     //@ts-expect-error
     useEffect(function() {
@@ -1647,8 +1658,6 @@ var useSlider = function(param) {
                 i: "".concat(0)
             });
         }
-    }, {
-        preventDefault: true
     });
     var bindBarSliderDrag = function() {
         var drag = useDrag(function(param) {
@@ -1725,8 +1734,10 @@ var useSlider = function(param) {
         setToDefaultState: setToDefaultState,
         incrementValue: incrementValue,
         decrementValue: decrementValue,
+        isActive: isActive,
         // onChangeStarted,
         // onChangeCommitted,
+        scaledToNormalised: scaledToNormalised,
         onMouseEnter: onMouseEnter,
         bindBarSliderDrag: bindBarSliderDrag,
         bindDrag: bindDrag,
@@ -1736,17 +1747,9 @@ var useSlider = function(param) {
     };
 };
 
-var css_248z$6 = ".RotarySlider {\n  position: relative;\n  /* border-radius: 50%; */\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}\n\n.ProgressCircle-value {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  text-align: center;\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}\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}\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$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";
 styleInject(css_248z$6);
 
-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$8(arr) {
-    if (Array.isArray(arr)) return arr;
-}
 function _define_property$e(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -1760,33 +1763,6 @@ function _define_property$e(obj, key, value) {
     }
     return obj;
 }
-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 = [];
-    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$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 _object_spread$e(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -1821,17 +1797,6 @@ function _object_spread_props$2(target, source) {
     }
     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 _unsupported_iterable_to_array$8(o, minLen) {
-    if (!o) return;
-    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$8(o, minLen);
-}
 var ProgressCircle = function(param) {
     var color = param.color, bgColor = param.bgColor, _param_width = param.width, width = _param_width === void 0 ? 40 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 40 : _param_height, _param_strokeWidth = param.strokeWidth, strokeWidth = _param_strokeWidth === void 0 ? 3 : _param_strokeWidth, _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.linear : _param_polarity, value = param.value;
     var cx = width / 2;
@@ -1841,7 +1806,6 @@ var ProgressCircle = function(param) {
     var activeZone = circ - circ * 0.25;
     var linearOffset = circ - activeZone * (value * 100) / 100;
     var bipolarOffset = circ - activeZone * (value * 100 - 50) / 100;
-    console.log(width, height, 'width, height in progresscircle');
     return /*#__PURE__*/ React__default.createElement("svg", {
         className: "ProgressCircle",
         width: width,
@@ -1893,7 +1857,7 @@ function RotarySlider(param) {
         end: 15000.0,
         interval: 0.1,
         skew: 0.7
-    } : _param_mockProperties; param.labelColor; var _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-500)' : _param_color, _param_bgColor = param.bgColor, bgColor = _param_bgColor === void 0 ? 'var(--color-gray-200)' : _param_bgColor, _param_width = param.width, width = _param_width === void 0 ? 40 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 40 : _param_height, style = param.style;
+    } : _param_mockProperties; param.labelColor; var _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-500)' : _param_color, _param_bgColor = param.bgColor, bgColor = _param_bgColor === void 0 ? 'var(--color-gray-200)' : _param_bgColor, _param_width = param.width, width = _param_width === void 0 ? 40 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 38 : _param_height, style = param.style;
     var _useSlider = useSlider({
         id: id,
         label: label,
@@ -1901,42 +1865,12 @@ function RotarySlider(param) {
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         onChange: onChange,
         isRandomizable: isRandomizable
-    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, onMouseEnter = _useSlider.onMouseEnter, setToDefaultState = _useSlider.setToDefaultState, incrementValue = _useSlider.incrementValue, decrementValue = _useSlider.decrementValue;
-    var _useState = _sliced_to_array$8(useState(false), 2), isActive = _useState[0], setIsActive = _useState[1];
-    function clickListener(event) {
-        var _event_target_closest;
-        if (((_event_target_closest = event.target.closest('.RotarySlider')) === null || _event_target_closest === void 0 ? void 0 : _event_target_closest.id) === id) {
-            setIsActive(true);
-        } else {
-            setIsActive(false);
-        }
-    }
-    function keyDownListener(event) {
-        if (isActive) {
-            if (event.key === 'ArrowLeft') {
-                event.preventDefault();
-                decrementValue();
-            }
-            if (event.key === 'ArrowRight') {
-                event.preventDefault();
-                incrementValue();
-            }
-        }
-    }
-    useEffect(function() {
-        document.addEventListener('click', clickListener, true);
-        document.addEventListener('keydown', keyDownListener);
-        return function() {
-            document.removeEventListener('click', clickListener);
-            document.removeEventListener('keydown', keyDownListener);
-        };
-    }, [
-        window,
-        isActive
-    ]);
+    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, onMouseEnter = _useSlider.onMouseEnter, setToDefaultState = _useSlider.setToDefaultState, setNormalisedState = _useSlider.setNormalisedState, isActive = _useSlider.isActive, properties = _useSlider.properties;
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "RotarySlider-wrapper",
-        flexDirection: Box.flexDirection.column
+        flexDirection: Box.flexDirection.column,
+        gap: Box.gap.none,
+        flex: "0 1 auto"
     }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         style: {
             borderColor: "".concat(color, " transparent ").concat(color, " transparent")
@@ -1944,7 +1878,7 @@ function RotarySlider(param) {
         className: classnames('RotarySlider-center-marker')
     }), /*#__PURE__*/ React__default.createElement(Box, _object_spread_props$2(_object_spread$e({
         id: id,
-        className: classnames('RotarySlider', isActive ? 'corner-border' : '', polarity === Polarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
+        className: classnames('Slider', 'RotarySlider', isActive ? 'corner-border' : '', polarity === Polarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
     }, bindDrag()), {
         onMouseEnter: onMouseEnter,
         onDoubleClick: function() {
@@ -1964,16 +1898,28 @@ function RotarySlider(param) {
         bgColor: color,
         width: width,
         height: height
-    }), /*#__PURE__*/ React__default.createElement(Label, {
+    })) : ''), /*#__PURE__*/ React__default.createElement(Input, {
         className: "ProgressCircle-value",
-        color: "var(--color-gray-200)",
-        fontSize: Label.fontSize.xSmall,
+        value: scaledValue,
+        id: id,
+        min: (properties === null || properties === void 0 ? void 0 : properties.start) || 0,
+        max: (properties === null || properties === void 0 ? void 0 : properties.end) || 0,
         style: {
-            fontWeight: 'bold'
+            fontWeight: 'bold',
+            width: '100%',
+            maxWidth: "".concat(width, "px"),
+            marginBottom: 'var(--spacing-sm)'
+        },
+        onComplete: function(value) {
+            var normalisedVal = properties && scaledToNormalised({
+                scaledValue: value,
+                properties: properties
+            });
+            normalisedVal !== undefined && setNormalisedState(normalisedVal);
         }
-    }, scaledValue)) : ''), /*#__PURE__*/ React__default.createElement(Label, {
+    }), /*#__PURE__*/ React__default.createElement(Label, {
         padding: [
-            Label.padding.mediumSmall
+            Label.padding.none
         ],
         fontSize: Label.fontSize.xSmall,
         value: label
@@ -2085,24 +2031,6 @@ Slider.sliderType = SliderType;
 Slider.sliderPolarity = Polarity;
 Slider.sliderOrientation = Orientation;
 
-function SliderValue(param) {
-    var value = param.value, min = param.min, max = param.max, minLength = param.minLength, maxLength = param.maxLength, isEditable = param.isEditable, onChange = param.onChange, className = param.className, style = param.style;
-    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, isEditable ? /*#__PURE__*/ React__default.createElement(Input, {
-        value: value,
-        min: min,
-        max: max,
-        minLength: minLength,
-        maxLength: maxLength,
-        style: style,
-        onComplete: onChange,
-        className: classnames('SliderValue', className)
-    }) : /*#__PURE__*/ React__default.createElement(Label, {
-        value: value,
-        className: classnames('SliderValue', className),
-        style: style
-    }));
-}
-
 var HeadingTags = /*#__PURE__*/ function(HeadingTags) {
     HeadingTags["h1"] = "h1";
     HeadingTags["h2"] = "h2";
@@ -3612,17 +3540,17 @@ function ModuleHeader(param) {
     function keydownListener(event) {
         var _document;
         var activeElement = (_document = document) === null || _document === void 0 ? void 0 : _document.activeElement;
-        // 8, Backspace
         var elements = [
             'input',
-            'select',
-            'button',
-            'textarea',
-            'div'
+            'textarea'
         ];
+        var eventMatchesActiveInput = activeElement && elements.includes(activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName.toLowerCase()) && event.target.id === (activeElement === null || activeElement === void 0 ? void 0 : activeElement.id);
         if (event.key === 'Backspace' && activeElement && elements.indexOf(activeElement.tagName.toLowerCase()) === -1) {
             event.preventDefault();
         }
+        if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && !eventMatchesActiveInput) {
+            event.preventDefault();
+        }
     }
     useEffect(function() {
         getParameters();
@@ -4805,7 +4733,10 @@ function LFOTab() {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "LFOTab",
         flexDirection: Box.flexDirection.column
-    }, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Dropdown, {
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        alignItems: Box.alignItems.flexEnd,
+        justifyContent: Box.justifyContent.spaceEvenly
+    }, /*#__PURE__*/ React__default.createElement(Dropdown, {
         labelColor: "var(--color-text)",
         color: "var(--color-brand)",
         id: "LFO1_Wave",
@@ -4849,7 +4780,10 @@ function LFOTab() {
     }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
         id: "LFO1_Rand",
         label: "LFO1 Rand"
-    })), /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Dropdown, {
+    })), /*#__PURE__*/ React__default.createElement(Box, {
+        alignItems: Box.alignItems.flexEnd,
+        justifyContent: Box.justifyContent.spaceEvenly
+    }, /*#__PURE__*/ React__default.createElement(Dropdown, {
         labelColor: "var(--color-text)",
         color: "var(--color-brand)",
         id: "LFO2_Wave",
@@ -4896,7 +4830,7 @@ function LFOTab() {
     })));
 }
 
-var css_248z = "/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n\n.ModuleFooter {\n  overflow-y: scroll;\n}\n\n.ModuleFooter .Tabs-item {\n  background: transparent;\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  background: var(--color-gray-600);\n  flex: 1 0 auto;\n}\n\n.ModuleFooter .Tabs-item:hover,\n.ModuleFooter .tabs-item:focus,\n.ModuleFooter .tabs-item:focus-visible {\n  background: var(--color-gray-700);\n}\n\n.ModuleFooter .Tabs-item[data-headlessui-state='selected'] {\n  background: var(--color-gray-700);\n}\n";
+var css_248z = "/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n\n.ModuleFooter {\n  overflow-y: scroll;\n}\n\n.ModuleFooter .Tabs-item {\n  background: transparent;\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  background: var(--color-gray-600);\n  flex: 1 0 auto;\n}\n\n.ModuleFooter .Tabs-item:hover,\n.ModuleFooter .tabs-item:focus,\n.ModuleFooter .tabs-item:focus-visible {\n  background: var(--color-gray-700);\n}\n\n.ModuleFooter .Tabs-item[data-headlessui-state='selected'],\n.ModuleFooter .Tabs-item[data-headlessui-state='selected focus'] {\n  background: var(--color-gray-700);\n}\n";
 styleInject(css_248z);
 
 function _array_like_to_array(arr, len) {
@@ -5226,5 +5160,5 @@ function ModuleFooter(param) {
     }, isTabSelected("ModMatrix") ? /*#__PURE__*/ React__default.createElement(ModMatrixTab, null) : '', isTabSelected("InputMod") ? /*#__PURE__*/ React__default.createElement(InputModTab, null) : '', isTabSelected("LFOs") ? /*#__PURE__*/ React__default.createElement(LFOTab, null) : '', isTabSelected("Sequencer") ? /*#__PURE__*/ React__default.createElement(SequencerTab, null) : '', isTabSelected("Settings") ? /*#__PURE__*/ React__default.createElement(SettingsTab, null) : '')));
 }
 
-export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, GlobalContextProvider, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, clamp, decimalToPercent, defaultGlobalStateValue as defaultValue, normalisedToScaled, percentToDecimal, randomizeValue, scaledToNormalised as scaledTonormalised, useGlobalContext, useObservable, useSlider };
+export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, GlobalContextProvider, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, Spacing, Tabs, clamp, decimalToPercent, defaultGlobalStateValue as defaultValue, normalisedToScaled, percentToDecimal, randomizeValue, scaledToNormalised as scaledTonormalised, useGlobalContext, useObservable, useSlider };
 //# sourceMappingURL=index.js.map