@antimatter-audio/antimatter-ui 14.0.7 → 14.0.9

package/dist/index.js

@@ -2151,7 +2151,7 @@ function _object_spread$f(target) {
     return target;
 }
 function Dropdown(param) {
-    var label = param.label, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_labelColor = param.labelColor, labelColor = _param_labelColor === void 0 ? 'var(--color-text)' : _param_labelColor, className = param.className, onChange = param.onChange, width = param.width, _param_height = param.height, height = _param_height === void 0 ? '34px' : _param_height, id = param.id, style = param.style;
+    var label = param.label, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_labelColor = param.labelColor, labelColor = _param_labelColor === void 0 ? 'var(--color-text)' : _param_labelColor, className = param.className, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? '110px' : _param_width, _param_height = param.height, height = _param_height === void 0 ? '34px' : _param_height, id = param.id, style = param.style;
     var _useDropdown = useDropdown({
         id: id,
         label: label,
@@ -2487,6 +2487,7 @@ function Input(param) {
 }
 Input.type = InputTypes;
 Input.textAlign = TextAlign;
+Input.fontSize = FontSizes;
 
 function _define_property$e(obj, key, value) {
     if (key in obj) {
@@ -2890,7 +2891,7 @@ function _unsupported_iterable_to_array$d(o, minLen) {
     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, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, className = param.className, onChangeActiveState = param.onChangeActiveState, children = param.children;
+    var id = param.id, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, className = param.className, onChangeActiveState = param.onChangeActiveState, children = param.children, width = param.width;
     // EXPECTED CONTROL GROUP STRUCTURE
     // <ControlGroup id={id-control-group} is-active>
     //    <Slider id={id}></Slider>
@@ -2964,6 +2965,7 @@ function ControlGroup(param) {
     ]);
     return /*#__PURE__*/ React__default.createElement(Box, {
         id: groupId,
+        width: width,
         className: "controlGroup ".concat(isActive ? 'isActive' : '', " ").concat(isDisabled ? 'isDisabled' : '', " ").concat(className ? className : '')
     }, children);
 }
@@ -3304,17 +3306,268 @@ function RotaryCircle(param) {
 RotaryCircle.polarity = Polarity;
 RotaryCircle.size = RotarySliderSizes;
 
+function _define_property$c(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$c(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$c(target, key, source[key]);
+        });
+    }
+    return target;
+}
+// Rotary Slider UI component.
+// Connects to Juce's Slider element
+function PositioningWrapper(param) {
+    var positionedElement = param.positionedElement, _param_top = param.top, top = _param_top === void 0 ? '0px' : _param_top, right = param.right, bottom = param.bottom, _param_left = param.left, left = _param_left === void 0 ? '0px' : _param_left, _param_margin = param.margin, margin = _param_margin === void 0 ? 0 : _param_margin, _param_height = param.height, height = _param_height === void 0 ? '100%' : _param_height, _param_width = param.width, width = _param_width === void 0 ? '100%' : _param_width, id = param.id, className = param.className, style = param.style, children = param.children;
+    return /*#__PURE__*/ React__default.createElement("div", {
+        id: id,
+        className: className,
+        style: _object_spread$c({
+            position: 'relative',
+            height: height,
+            width: width,
+            margin: margin
+        }, style)
+    }, children, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            position: 'absolute',
+            top: top,
+            right: right,
+            bottom: bottom,
+            left: left
+        }
+    }, positionedElement ? positionedElement : null));
+}
+
+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$c(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 = [];
+    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$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$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$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);
+}
+// 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
+// ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
+var DataSource = /*#__PURE__*/ function(DataSource) {
+    DataSource["sliderAttachment"] = "sliderAttachment";
+    DataSource["buttonAttachment"] = "buttonAttachment";
+    DataSource["event"] = "event";
+    return DataSource;
+}({});
+var useIndicator = function(param) {
+    var id = param.id, _param_dataSource = param.dataSource, dataSource = _param_dataSource === void 0 ? "buttonAttachment" : _param_dataSource;
+    var isLocalhost = window.location.hostname === 'localhost';
+    // This value should be a range from 0 to 1
+    var _useState = _sliced_to_array$c(useState(0), 2), brightness = _useState[0], setBrightness = _useState[1];
+    var updateState = function() {
+        if (!isLocalhost && dataSource === "buttonAttachment") {
+            var _Juce_getToggleState;
+            var toggleState = (_Juce_getToggleState = Juce.getToggleState(id)) === null || _Juce_getToggleState === void 0 ? void 0 : _Juce_getToggleState.value;
+            setBrightness(toggleState);
+        } else if (!isLocalhost && dataSource === "sliderAttachment") {
+            var sliderState = Juce.getSliderState(id);
+            setBrightness(sliderState === null || sliderState === void 0 ? void 0 : sliderState.normalisedValue);
+        }
+    };
+    // Set the initial state
+    useEffect(function() {
+        updateState();
+    }, []);
+    // Update the local state when the ID changes
+    useEffect(function() {
+        updateState();
+    }, [
+        id
+    ]);
+    // Sets up listeners to handle changes on the backend
+    useEffect(function() {
+        if (!isLocalhost && dataSource === "buttonAttachment") {
+            var _toggleState_valueChangedEvent;
+            var toggleState = Juce.getToggleState(id);
+            var valueListenerId = toggleState === null || toggleState === void 0 ? void 0 : (_toggleState_valueChangedEvent = toggleState.valueChangedEvent) === null || _toggleState_valueChangedEvent === void 0 ? void 0 : _toggleState_valueChangedEvent.addListener(function() {
+                setBrightness(toggleState);
+            });
+            return function cleanup() {
+                var _toggleState_valueChangedEvent;
+                toggleState === null || toggleState === void 0 ? void 0 : (_toggleState_valueChangedEvent = toggleState.valueChangedEvent) === null || _toggleState_valueChangedEvent === void 0 ? void 0 : _toggleState_valueChangedEvent.removeListener(valueListenerId);
+            };
+        } else if (!isLocalhost && dataSource === "sliderAttachment") {
+            var _sliderState_valueChangedEvent;
+            var sliderState = Juce.getSliderState(id);
+            var valueListenerId1 = sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_valueChangedEvent = sliderState.valueChangedEvent) === null || _sliderState_valueChangedEvent === void 0 ? void 0 : _sliderState_valueChangedEvent.addListener(function() {
+                setBrightness(sliderState);
+            });
+            return function cleanup() {
+                var _sliderState_valueChangedEvent;
+                sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_valueChangedEvent = sliderState.valueChangedEvent) === null || _sliderState_valueChangedEvent === void 0 ? void 0 : _sliderState_valueChangedEvent.removeListener(valueListenerId1);
+            };
+        } else if (!isLocalhost && dataSource === "event") {
+            var getLFOOutdata = id && //@ts-expect-error
+            window.__JUCE__.backend.addEventListener("".concat(id), function(event) {
+                setBrightness(event);
+            });
+            return function cleanup() {
+                //@ts-expect-error
+                window.__JUCE__.backend.removeEventListener(getLFOOutdata);
+            };
+        } else {
+            return;
+        }
+    });
+    return {
+        dataSource: dataSource,
+        brightness: brightness
+    };
+};
+
+function _define_property$b(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$b(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$b(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function IndicatorLight(param) {
+    var id = param.id, className = param.className, label = param.label, dataSource = param.dataSource, _param_activeColor = param.activeColor, activeColor = _param_activeColor === void 0 ? 'var(--color-brand)' : _param_activeColor, _param_inactiveColor = param.inactiveColor, inactiveColor = _param_inactiveColor === void 0 ? 'var(--bg-lv1)' : _param_inactiveColor, _param_shape = param.shape, shape = _param_shape === void 0 ? "round" : _param_shape, style = param.style;
+    var brightness = useIndicator({
+        id: id,
+        dataSource: dataSource
+    }).brightness;
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        gap: Box.gap.small,
+        alignItems: Box.alignItems.center,
+        width: "auto"
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: _object_spread$b({
+            position: 'relative',
+            width: '12px',
+            height: '12px',
+            borderRadius: shape === "round" ? '100%' : 'initial',
+            overflow: 'hidden'
+        }, style)
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        className: classnames('IndicatorLight-bg', 'bg-panel', className),
+        style: {
+            width: '12px',
+            height: '12px',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            background: inactiveColor
+        }
+    }), /*#__PURE__*/ React__default.createElement("div", {
+        className: classnames('IndicatorLight', 'bg-panel', className),
+        style: {
+            opacity: brightness,
+            // transition: `opacity 500ms ease-in`,
+            background: activeColor,
+            position: 'absolute',
+            width: '12px',
+            height: '12px',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+        }
+    })), label ? /*#__PURE__*/ React__default.createElement(Label, {
+        value: label
+    }) : null);
+}
+IndicatorLight.dataSource = DataSource;
+
 // Rotary Slider UI component.
 // Connects to Juce's Slider element
 function RotarySlider(param) {
     var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, className = param.className, id = param.id, onChange = param.onChange, trackWidth = param.trackWidth, // trackOffset,
-    indicatorLineColor = param.indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, markerShape = param.markerShape, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
+    indicatorId = param.indicatorId, indicatorLineColor = param.indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, width = param.width, markerShape = param.markerShape, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
         start: 20.0,
         end: 15000.0,
         interval: 0.1,
         skew: 0.7
     } : _param_mockProperties; param.style;
-    var _rotarySliderSizeMap_size;
+    var _rotarySliderSizeMap_size, _rotarySliderSizeMap_size1, _rotarySliderSizeMap_size2;
     var _useSlider = useSlider({
         id: id,
         label: label,
@@ -3324,22 +3577,33 @@ function RotarySlider(param) {
         isRandomizable: isRandomizable
     }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, setToDefaultState = _useSlider.setToDefaultState, setNormalisedState = _useSlider.setNormalisedState, properties = _useSlider.properties;
     return /*#__PURE__*/ React__default.createElement(ControlGroup, {
-        id: id
+        id: id,
+        width: width
     }, /*#__PURE__*/ React__default.createElement(Box, {
         className: "RotarySlider-wrapper",
         flexDirection: Box.flexDirection.column,
         gap: Box.gap.none,
-        flex: "0 1 auto"
+        flex: "0 1 auto",
+        height: "90px"
     }, label ? /*#__PURE__*/ React__default.createElement(Label, {
         padding: [
             Label.padding.none,
             Label.padding.none,
-            Label.padding.mediumSmall,
+            Label.padding.small,
             Label.padding.none
         ],
         fontSize: Label.fontSize.xSmall,
         value: label
-    }) : null, /*#__PURE__*/ React__default.createElement(RotaryCircle, {
+    }) : null, /*#__PURE__*/ React__default.createElement(PositioningWrapper, {
+        top: '25%',
+        left: '-16px',
+        width: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size === void 0 ? void 0 : _rotarySliderSizeMap_size.width, "px"),
+        height: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size1 = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size1 === void 0 ? void 0 : _rotarySliderSizeMap_size1.height, "px"),
+        positionedElement: indicatorId ? /*#__PURE__*/ React__default.createElement(IndicatorLight, {
+            id: indicatorId,
+            dataSource: IndicatorLight.dataSource.event
+        }) : null
+    }, /*#__PURE__*/ React__default.createElement(RotaryCircle, {
         polarity: polarity,
         className: className,
         id: id,
@@ -3356,17 +3620,18 @@ function RotarySlider(param) {
         trackStrokeColor: trackStrokeColor,
         knobStrokeColor: knobStrokeColor,
         knobFillColor: knobFillColor
-    }), /*#__PURE__*/ React__default.createElement(Input, {
+    })), /*#__PURE__*/ React__default.createElement(Input, {
         className: "ProgressCircle-value",
         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,
+        fontSize: Input.fontSize.xSmall,
         textAlign: Input.textAlign.center,
         style: {
             fontWeight: 'bold',
             width: '100%',
-            maxWidth: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size === void 0 ? void 0 : _rotarySliderSizeMap_size.width, "px")
+            maxWidth: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size2 = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size2 === void 0 ? void 0 : _rotarySliderSizeMap_size2.width, "px")
         },
         onComplete: function(value) {
             var normalisedVal = properties && scaledToNormalised({
@@ -3386,7 +3651,7 @@ RotarySlider.markerShape = RotarySliderMarkerShapes;
 var css_248z$6 = ".BarSlider {\n  --maxNarrowTrackIndicatorWidth: 6px;\n  --maxNarrowTrackWidth: 20px;\n  --minHorizontalWidth: 75px;\n  --minVerticalHeight: 75px;\n  --narrowTrackMargin: 8px;\n  --narrowTrackBorderRadius: 20px;\n}\n\n.BarSlider:hover {\n  cursor: pointer;\n}\n\n.BarSlider-Track {\n  touch-action: none;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  background-color: var(--bg-lv5);\n}\n\n.BarSlider-Track.isHighlighted {\n  background-color: var(--bg-lv6);\n}\n.Barslider-IndicatorLineWrapper,\n.BarSlider-MarkerWrapper {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSlider-IndicatorLine {\n  position: absolute;\n  top: 0;\n  /* left: 0; */\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n\n.BarSlider-Marker {\n  position: absolute;\n  pointer-events: none;\n}\n\n/* Narrow variant */\n.BarSlider--narrowTrack .BarSlider-Track {\n  border-radius: var(--narrowTrackBorderRadius);\n  background-color: var(--bg-lv3);\n  box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.25);\n}\n\n/* .BarSlider--narrowTrack .BarSlider-IndicatorLine {\n  border-radius: var(--narrowTrackBorderRadius);\n} */\n\n.BarSlider--narrowTrack .BarSlider-Marker {\n  border-radius: var(--narrowTrackBorderRadius);\n}\n\n.BarSlider--narrowTrack .Barslider-IndicatorLineWrapper {\n  border-radius: var(--narrowTrackBorderRadius);\n  overflow: hidden;\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .Barslider-IndicatorLineWrapper,\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-MarkerWrapper {\n  bottom: var(--maxNarrowTrackIndicatorWidth);\n  left: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  width: var(--maxNarrowTrackIndicatorWidth);\n  height: calc(100% - (var(--narrowTrackMargin) * 2));\n  margin-left: var(--narrowTrackMargin);\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .Barslider-IndicatorLineWrapper,\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-MarkerWrapper {\n  top: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  left: var(--maxNarrowTrackIndicatorWidth);\n  height: var(--maxNarrowTrackIndicatorWidth);\n  width: calc(100% - (var(--narrowTrackMargin) * 2));\n  margin-bottom: var(--narrowTrackMargin);\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-Track {\n  height: 100%;\n  max-height: 100%;\n  width: var(--maxNarrowTrackWidth);\n  min-height: var(--minVerticalHeight);\n  max-width: var(--maxNarrowTrackWidth);\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-Track {\n  width: 100%;\n  max-width: 100%;\n  height: var(--maxNarrowTrackWidth);\n  max-height: var(--maxNarrowTrackWidth);\n  min-width: var(--minHorizontalWidth);\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-IndicatorLine {\n  max-width: var(--maxNarrowTrackIndicatorWidth);\n  max-height: 100%;\n  left: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-IndicatorLine {\n  width: 100%;\n  max-width: 100%;\n  max-height: var(--maxNarrowTrackIndicatorWidth);\n  top: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  /* left: var(--narrowTrackMargin);\n  right: calc(100% - var(--narrowTrackMargin)); */\n}\n/* Wide variant */\n\n.BarSlider--wideTrack .BarSlider-Track {\n  border-radius: 2px;\n}\n\n.BarSlider--wideTrack.BarSlider--isVertical .BarSlider-Track {\n  min-height: var(--minVerticalHeight);\n}\n\n.BarSlider-Input {\n  font-weight: bold;\n  width: 100%;\n}\n.BarSlider-Input.includeValueInHeightIsTrue {\n}\n\n.BarSlider-Input.includeValueInHeightIsFalse {\n  position: absolute;\n  bottom: -1.7em;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n";
 styleInject(css_248z$6);
 
-function _define_property$c(obj, key, value) {
+function _define_property$a(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3399,7 +3664,7 @@ function _define_property$c(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$c(target) {
+function _object_spread$a(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3409,7 +3674,7 @@ function _object_spread$c(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$c(target, key, source[key]);
+            _define_property$a(target, key, source[key]);
         });
     }
     return target;
@@ -3458,7 +3723,7 @@ function Slider$1(param) {
     var multiColorGradient = "linear-gradient(".concat(isHorizontal ? 'to right' : 'to top', ", var(--color-brand) 0%, var(--color-brand-secondary) 100%");
     var singleColorGradient = "linear-gradient(".concat(isHorizontal ? 'to right' : 'to top', ", var(--color-brand-700) 0%, var(--color-brand) 100%");
     var _obj;
-    var selectedGradientMap = (_obj = {}, _define_property$c(_obj, GradientStyles.multicolor, multiColorGradient), _define_property$c(_obj, GradientStyles.unicolor, singleColorGradient), _obj);
+    var selectedGradientMap = (_obj = {}, _define_property$a(_obj, GradientStyles.multicolor, multiColorGradient), _define_property$a(_obj, GradientStyles.unicolor, singleColorGradient), _obj);
     var _useSlider = useSlider({
         id: id,
         label: label,
@@ -3501,12 +3766,12 @@ function Slider$1(param) {
             Box.padding.none
         ],
         height: "100%"
-    }, /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$c({
+    }, /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$a({
         className: classnames('BarSlider-Track', isHighlighted && 'isHighlighted')
     }, drag()), {
         // onMouseEnter={onMouseEnter}
         id: id,
-        style: _object_spread$c({
+        style: _object_spread$a({
             background: trackColor,
             stroke: trackStrokeColor ? "1px solid ".concat(trackStrokeColor) : 'none'
         }, style)
@@ -3516,7 +3781,7 @@ function Slider$1(param) {
         // TODO: Why aren't the Tailwind classes working?
         // className={classnames('h-full', 'w-full', 'absolute', 'bg-panel')}
         className: "BarSlider-IndicatorLine",
-        style: _object_spread$c({
+        style: _object_spread$a({
             background: indicatorLineGradient ? selectedGradientMap[indicatorLineGradient] : indicatorLineColor,
             opacity: isStandalone || isHighlighted ? '100%' : '80%',
             top: "".concat(isHorizontal && isNarrowTrack && 'calc(50% - 3px)'),
@@ -3561,15 +3826,15 @@ Slider$1.sliderType = SliderType;
 Slider$1.polarity = Polarity;
 Slider$1.orientation = Orientation;
 
-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 _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 = [];
@@ -3593,26 +3858,26 @@ 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 _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);
 }
 var useCombobox = function(param) {
     var id = param.id, label = param.label, filter = param.filter; param.onChange; var _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader, isDisabled = param.isDisabled;
-    var _Object_values;
+    var _Object_values, _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$c(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState[0], setProperties = _useState[1];
-    var _useState1 = _sliced_to_array$c(useState(0), 2), index = _useState1[0], setIndex = _useState1[1];
+    var _useState = _sliced_to_array$b(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState[0], setProperties = _useState[1];
+    var _useState1 = _sliced_to_array$b(useState(0), 2), index = _useState1[0], setIndex = _useState1[1];
     var prevIndex = useRef(null);
     var nextIndex = useRef(null);
     var prevDragDirection = useRef(null);
@@ -3698,361 +3963,122 @@ var useCombobox = function(param) {
             if (id !== modSlotPreview.rowId) {
                 setModSlotRowTargetAsPreview({
                     paramId: id
-                });
-            }
-            var directionY;
-            if (direction[1] * -1 === 1 && directionY !== prevDragDirection.current) {
-                directionY = 1;
-            } else if (direction[1] * -1 === -1 && directionY !== prevDragDirection.current) {
-                directionY = -1;
-            }
-            if (index < (properties === null || properties === void 0 ? void 0 : properties.choices.length) && directionY && directionY === 1) {
-                incrementIndex();
-            } else if (index > 0 && directionY && directionY === -1) {
-                decrementIndex();
-            }
-            // console.log(nextIndex.current, 'nextIndexnextIndexnextIndex');
-            if (nextIndex.current !== null && nextIndex.current !== undefined && nextIndex.current !== index.current) {
-                comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.setChoiceIndex(nextIndex.current);
-            }
-        }
-    }, {
-        enabled: !isDisabled
-    });
-    var onMouseEnter = function() {
-        if (displayValInHeader) {
-            highlightedItemChanged({
-                label: label,
-                value: automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[index]
-            });
-        }
-    };
-    var onClick = function() {
-        setModSlotRowTargetAsPreview({
-            paramId: id
-        });
-    };
-    var onDoubleClick = function() {
-        setModSlotRowTargetAsPreview({
-            paramId: id
-        });
-    };
-    return {
-        index: index,
-        valueString: automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[index],
-        setIndex: setIndex,
-        choices: properties === null || properties === void 0 ? void 0 : properties.choices,
-        filteredChoices: filteredChoices,
-        onMouseEnter: onMouseEnter,
-        onClick: onClick,
-        onDoubleClick: onDoubleClick,
-        bindDrag: bindDrag
-    };
-};
-
-// Rotary Slider UI component.
-// Connects to Juce's Slider element
-function RotaryCombobox(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, className = param.className, id = param.id, trackWidth = param.trackWidth, // trackOffset,
-    indicatorLineColor = param.indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, markerShape = param.markerShape;
-    var _useCombobox = useCombobox({
-        id: id
-    }), index = _useCombobox.index, choices = _useCombobox.choices, valueString = _useCombobox.valueString, onDoubleClick = _useCombobox.onDoubleClick, bindDrag = _useCombobox.bindDrag;
-    return /*#__PURE__*/ React__default.createElement(ControlGroup, {
-        id: id
-    }, /*#__PURE__*/ React__default.createElement(Box, {
-        className: "RotarySlider-wrapper",
-        flexDirection: Box.flexDirection.column,
-        gap: Box.gap.none,
-        flex: "0 1 auto"
-    }, label ? /*#__PURE__*/ React__default.createElement(Label, {
-        padding: [
-            Label.padding.none,
-            Label.padding.none,
-            Label.padding.small,
-            Label.padding.none
-        ],
-        fontSize: Label.fontSize.xSmall,
-        value: label
-    }) : null, /*#__PURE__*/ React__default.createElement(RotaryCircle, {
-        polarity: polarity,
-        className: className,
-        id: id,
-        markerShape: markerShape,
-        trackWidth: trackWidth,
-        // trackOffset={trackOffset}
-        sliderValue: scaledToNormalised({
-            scaledValue: index,
-            start: 0,
-            end: choices.length - 1
-        }),
-        bindDrag: bindDrag,
-        onDoubleClick: onDoubleClick,
-        size: size,
-        indicatorLineColor: indicatorLineColor,
-        indicatorLineGradient: indicatorLineGradient,
-        trackColor: trackColor,
-        trackStrokeColor: trackStrokeColor,
-        knobStrokeColor: knobStrokeColor,
-        knobFillColor: knobFillColor
-    }), /*#__PURE__*/ React__default.createElement(Label, {
-        fontSize: Label.fontSize.xSmall
-    }, valueString)));
-}
-RotaryCombobox.polarity = Polarity;
-RotaryCombobox.size = RotarySliderSizes;
-RotaryCombobox.markerShape = RotarySliderMarkerShapes;
-
-function _define_property$b(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread$b(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property$b(target, key, source[key]);
-        });
-    }
-    return target;
-}
-// Rotary Slider UI component.
-// Connects to Juce's Slider element
-function PositioningWrapper(param) {
-    var positionedElement = param.positionedElement, _param_top = param.top, top = _param_top === void 0 ? '0px' : _param_top, right = param.right, bottom = param.bottom, _param_left = param.left, left = _param_left === void 0 ? '0px' : _param_left, _param_margin = param.margin, margin = _param_margin === void 0 ? 0 : _param_margin, _param_height = param.height, height = _param_height === void 0 ? '100%' : _param_height, _param_width = param.width, width = _param_width === void 0 ? '100%' : _param_width, id = param.id, className = param.className, style = param.style, children = param.children;
-    return /*#__PURE__*/ React__default.createElement("div", {
-        id: id,
-        className: className,
-        style: _object_spread$b({
-            position: 'relative',
-            height: height,
-            width: width,
-            margin: margin
-        }, style)
-    }, children, /*#__PURE__*/ React__default.createElement("div", {
-        style: {
-            position: 'absolute',
-            top: top,
-            right: right,
-            bottom: bottom,
-            left: left
-        }
-    }, positionedElement ? positionedElement : null));
-}
-
-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$b(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-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 = [];
-    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$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 _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$b(o, minLen) {
-    if (!o) return;
-    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$b(o, minLen);
-}
-// 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
-// ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
-var DataSource = /*#__PURE__*/ function(DataSource) {
-    DataSource["sliderAttachment"] = "sliderAttachment";
-    DataSource["buttonAttachment"] = "buttonAttachment";
-    DataSource["event"] = "event";
-    return DataSource;
-}({});
-var useIndicator = function(param) {
-    var id = param.id, _param_dataSource = param.dataSource, dataSource = _param_dataSource === void 0 ? "buttonAttachment" : _param_dataSource;
-    var isLocalhost = window.location.hostname === 'localhost';
-    // This value should be a range from 0 to 1
-    var _useState = _sliced_to_array$b(useState(0), 2), brightness = _useState[0], setBrightness = _useState[1];
-    var updateState = function() {
-        if (!isLocalhost && dataSource === "buttonAttachment") {
-            var _Juce_getToggleState;
-            var toggleState = (_Juce_getToggleState = Juce.getToggleState(id)) === null || _Juce_getToggleState === void 0 ? void 0 : _Juce_getToggleState.value;
-            setBrightness(toggleState);
-        } else if (!isLocalhost && dataSource === "sliderAttachment") {
-            var sliderState = Juce.getSliderState(id);
-            setBrightness(sliderState === null || sliderState === void 0 ? void 0 : sliderState.normalisedValue);
+                });
+            }
+            var directionY;
+            if (direction[1] * -1 === 1 && directionY !== prevDragDirection.current) {
+                directionY = 1;
+            } else if (direction[1] * -1 === -1 && directionY !== prevDragDirection.current) {
+                directionY = -1;
+            }
+            if (index < (properties === null || properties === void 0 ? void 0 : properties.choices.length) && directionY && directionY === 1) {
+                incrementIndex();
+            } else if (index > 0 && directionY && directionY === -1) {
+                decrementIndex();
+            }
+            // console.log(nextIndex.current, 'nextIndexnextIndexnextIndex');
+            if (nextIndex.current !== null && nextIndex.current !== undefined && nextIndex.current !== index.current) {
+                comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.setChoiceIndex(nextIndex.current);
+            }
         }
-    };
-    // Set the initial state
-    useEffect(function() {
-        updateState();
-    }, []);
-    // Update the local state when the ID changes
-    useEffect(function() {
-        updateState();
-    }, [
-        id
-    ]);
-    // Sets up listeners to handle changes on the backend
-    useEffect(function() {
-        if (!isLocalhost && dataSource === "buttonAttachment") {
-            var _toggleState_valueChangedEvent;
-            var toggleState = Juce.getToggleState(id);
-            var valueListenerId = toggleState === null || toggleState === void 0 ? void 0 : (_toggleState_valueChangedEvent = toggleState.valueChangedEvent) === null || _toggleState_valueChangedEvent === void 0 ? void 0 : _toggleState_valueChangedEvent.addListener(function() {
-                setBrightness(toggleState);
-            });
-            return function cleanup() {
-                var _toggleState_valueChangedEvent;
-                toggleState === null || toggleState === void 0 ? void 0 : (_toggleState_valueChangedEvent = toggleState.valueChangedEvent) === null || _toggleState_valueChangedEvent === void 0 ? void 0 : _toggleState_valueChangedEvent.removeListener(valueListenerId);
-            };
-        } else if (!isLocalhost && dataSource === "sliderAttachment") {
-            var _sliderState_valueChangedEvent;
-            var sliderState = Juce.getSliderState(id);
-            var valueListenerId1 = sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_valueChangedEvent = sliderState.valueChangedEvent) === null || _sliderState_valueChangedEvent === void 0 ? void 0 : _sliderState_valueChangedEvent.addListener(function() {
-                setBrightness(sliderState);
-            });
-            return function cleanup() {
-                var _sliderState_valueChangedEvent;
-                sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_valueChangedEvent = sliderState.valueChangedEvent) === null || _sliderState_valueChangedEvent === void 0 ? void 0 : _sliderState_valueChangedEvent.removeListener(valueListenerId1);
-            };
-        } else if (!isLocalhost && dataSource === "event") {
-            var getLFOOutdata = id && //@ts-expect-error
-            window.__JUCE__.backend.addEventListener("".concat(id), function(event) {
-                setBrightness(event);
+    }, {
+        enabled: !isDisabled
+    });
+    var onMouseEnter = function() {
+        if (displayValInHeader) {
+            highlightedItemChanged({
+                label: label,
+                value: automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[index]
             });
-            return function cleanup() {
-                //@ts-expect-error
-                window.__JUCE__.backend.removeEventListener(getLFOOutdata);
-            };
-        } else {
-            return;
         }
-    });
+    };
+    var onClick = function() {
+        setModSlotRowTargetAsPreview({
+            paramId: id
+        });
+    };
+    var onDoubleClick = function() {
+        setModSlotRowTargetAsPreview({
+            paramId: id
+        });
+    };
     return {
-        dataSource: dataSource,
-        brightness: brightness
+        index: index,
+        valueString: properties === null || properties === void 0 ? void 0 : (_properties_choices = properties.choices) === null || _properties_choices === void 0 ? void 0 : _properties_choices[index],
+        setIndex: setIndex,
+        choices: properties === null || properties === void 0 ? void 0 : properties.choices,
+        filteredChoices: filteredChoices,
+        onMouseEnter: onMouseEnter,
+        onClick: onClick,
+        onDoubleClick: onDoubleClick,
+        bindDrag: bindDrag
     };
 };
 
-function _define_property$a(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread$a(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function IndicatorLight(param) {
-    var id = param.id, className = param.className, label = param.label, dataSource = param.dataSource, _param_activeColor = param.activeColor, activeColor = _param_activeColor === void 0 ? 'var(--color-brand)' : _param_activeColor, _param_inactiveColor = param.inactiveColor, inactiveColor = _param_inactiveColor === void 0 ? 'var(--bg-lv1)' : _param_inactiveColor, _param_shape = param.shape, shape = _param_shape === void 0 ? "round" : _param_shape, style = param.style;
-    var brightness = useIndicator({
+// Rotary Slider UI component.
+// Connects to Juce's Slider element
+function RotaryCombobox(param) {
+    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, className = param.className, id = param.id, indicatorId = param.indicatorId, trackWidth = param.trackWidth, width = param.width, // trackOffset,
+    indicatorLineColor = param.indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, markerShape = param.markerShape;
+    var _rotarySliderSizeMap_size, _rotarySliderSizeMap_size1;
+    var _useCombobox = useCombobox({
+        id: id
+    }), index = _useCombobox.index, choices = _useCombobox.choices, valueString = _useCombobox.valueString, onDoubleClick = _useCombobox.onDoubleClick, bindDrag = _useCombobox.bindDrag;
+    return /*#__PURE__*/ React__default.createElement(ControlGroup, {
         id: id,
-        dataSource: dataSource
-    }).brightness;
-    return /*#__PURE__*/ React__default.createElement(Box, {
+        width: width
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        className: "RotarySlider-wrapper",
         flexDirection: Box.flexDirection.column,
-        gap: Box.gap.small,
-        alignItems: Box.alignItems.center,
-        width: "auto"
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        style: _object_spread$a({
-            position: 'relative',
-            width: '12px',
-            height: '12px',
-            borderRadius: shape === "round" ? '100%' : 'initial',
-            overflow: 'hidden'
-        }, style)
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('IndicatorLight-bg', 'bg-panel', className),
-        style: {
-            width: '12px',
-            height: '12px',
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            background: inactiveColor
-        }
-    }), /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('IndicatorLight', 'bg-panel', className),
-        style: {
-            opacity: brightness,
-            // transition: `opacity 500ms ease-in`,
-            background: activeColor,
-            position: 'absolute',
-            width: '12px',
-            height: '12px',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0
-        }
-    })), label ? /*#__PURE__*/ React__default.createElement(Label, {
+        gap: Box.gap.none,
+        flex: "0 1 auto",
+        height: "90px"
+    }, label ? /*#__PURE__*/ React__default.createElement(Label, {
+        padding: [
+            Label.padding.none,
+            Label.padding.none,
+            Label.padding.small,
+            Label.padding.none
+        ],
+        fontSize: Label.fontSize.xSmall,
         value: label
-    }) : null);
+    }) : null, /*#__PURE__*/ React__default.createElement(PositioningWrapper, {
+        top: '25%',
+        left: '-16px',
+        width: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size === void 0 ? void 0 : _rotarySliderSizeMap_size.width, "px"),
+        height: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size1 = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size1 === void 0 ? void 0 : _rotarySliderSizeMap_size1.height, "px"),
+        positionedElement: indicatorId ? /*#__PURE__*/ React__default.createElement(IndicatorLight, {
+            id: indicatorId,
+            dataSource: IndicatorLight.dataSource.event
+        }) : null
+    }, /*#__PURE__*/ React__default.createElement(RotaryCircle, {
+        polarity: polarity,
+        className: className,
+        id: id,
+        markerShape: markerShape,
+        trackWidth: trackWidth,
+        // trackOffset={trackOffset}
+        sliderValue: scaledToNormalised({
+            scaledValue: index,
+            start: 0,
+            end: choices.length - 1
+        }),
+        bindDrag: bindDrag,
+        onDoubleClick: onDoubleClick,
+        size: size,
+        indicatorLineColor: indicatorLineColor,
+        indicatorLineGradient: indicatorLineGradient,
+        trackColor: trackColor,
+        trackStrokeColor: trackStrokeColor,
+        knobStrokeColor: knobStrokeColor,
+        knobFillColor: knobFillColor
+    })), /*#__PURE__*/ React__default.createElement(Label, {
+        fontSize: Label.fontSize.xSmall
+    }, valueString)));
 }
-IndicatorLight.dataSource = DataSource;
+RotaryCombobox.polarity = Polarity;
+RotaryCombobox.size = RotarySliderSizes;
+RotaryCombobox.markerShape = RotarySliderMarkerShapes;
 
 // Rotary Slider UI component.
 // Connects to Juce's Slider element
@@ -4063,26 +4089,16 @@ var SliderVariants = /*#__PURE__*/ function(SliderVariants) {
     return SliderVariants;
 }({});
 function Slider(param) {
-    var _param_variant = param.variant, variant = _param_variant === void 0 ? "rotary" : _param_variant, _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, labelColor = param.labelColor, indicatorLineColor = param.indicatorLineColor, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, markerFillColor = param.markerFillColor, markerStrokeColor = param.markerStrokeColor, markerShape = param.markerShape, indicatorLineGradient = param.indicatorLineGradient, trackWidth = param.trackWidth, className = param.className, id = param.id, onChange = param.onChange, indicatorId = param.indicatorId, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, _param_mockInitialNormalisedValue = param.// trackOffset = 0,
+    var _param_variant = param.variant, variant = _param_variant === void 0 ? "rotary" : _param_variant, _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, labelColor = param.labelColor, indicatorLineColor = param.indicatorLineColor, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, markerFillColor = param.markerFillColor, markerStrokeColor = param.markerStrokeColor, markerShape = param.markerShape, indicatorLineGradient = param.indicatorLineGradient, trackWidth = param.trackWidth, className = param.className, id = param.id, width = param.width, onChange = param.onChange, indicatorId = param.indicatorId, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, _param_mockInitialNormalisedValue = param.// trackOffset = 0,
     mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, barSliderVariant = param.barSliderVariant, showValue = param.showValue, includeValueInHeight = param.includeValueInHeight, isRandomizable = param.isRandomizable, rotationBehavior = param.rotationBehavior, orientation = param.orientation, dragOrientation = param.dragOrientation, isStandalone = param.isStandalone, isHighlighted = param.isHighlighted; param.mockProperties; param.style;
-    var totalWidth = "".concat(rotarySliderSizeMap[size].width + 35, "px");
-    var totalHeight = "calc(".concat(rotarySliderSizeMap[size].width, " + 1em + ").concat(label ? 1 : 0, "em)");
-    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, variant === "rotary" ? /*#__PURE__*/ React__default.createElement(PositioningWrapper, {
-        top: '25%',
-        left: '-8px',
-        width: totalWidth,
-        height: totalHeight,
-        positionedElement: indicatorId ? /*#__PURE__*/ React__default.createElement(IndicatorLight, {
-            id: indicatorId,
-            dataSource: IndicatorLight.dataSource.event
-        }) : null
-    }, /*#__PURE__*/ React__default.createElement(RotarySlider, {
+    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, variant === "rotary" ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
         polarity: polarity,
         label: label,
         labelColor: labelColor,
         trackWidth: trackWidth,
         indicatorLineColor: indicatorLineColor,
         indicatorLineGradient: indicatorLineGradient,
+        width: width,
         // trackOffset={trackOffset}
         markerShape: markerShape,
         trackColor: trackColor,
@@ -4091,23 +4107,16 @@ function Slider(param) {
         knobFillColor: knobFillColor,
         className: className,
         id: id,
+        indicatorId: indicatorId,
         onChange: onChange,
         size: size,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         isRandomizable: isRandomizable,
         rotationBehavior: rotationBehavior
-    })) : null, variant === "rotaryCombobox" ? /*#__PURE__*/ React__default.createElement(PositioningWrapper, {
-        top: '25%',
-        left: '-8px',
-        width: totalWidth,
-        height: totalHeight,
-        positionedElement: indicatorId ? /*#__PURE__*/ React__default.createElement(IndicatorLight, {
-            id: indicatorId,
-            dataSource: IndicatorLight.dataSource.event
-        }) : null
-    }, /*#__PURE__*/ React__default.createElement(RotaryCombobox, {
+    }) : null, variant === "rotaryCombobox" ? /*#__PURE__*/ React__default.createElement(RotaryCombobox, {
         polarity: polarity,
         label: label,
+        width: width,
         labelColor: labelColor,
         trackWidth: trackWidth,
         indicatorLineColor: indicatorLineColor,
@@ -4120,12 +4129,13 @@ function Slider(param) {
         knobFillColor: knobFillColor,
         className: className,
         id: id,
+        indicatorId: indicatorId,
         onChange: onChange,
         size: size,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         isRandomizable: isRandomizable,
         rotationBehavior: rotationBehavior
-    })) : null, variant === "bar" ? /*#__PURE__*/ React__default.createElement(Slider$1, {
+    }) : null, variant === "bar" ? /*#__PURE__*/ React__default.createElement(Slider$1, {
         polarity: polarity,
         label: label,
         indicatorLineColor: indicatorLineColor,
@@ -6887,20 +6897,21 @@ function LFOBox(param) {
             Box.padding.large,
             Box.padding.mediumLarge
         ],
+        flex: "1 1 auto",
         fullHeight: true
     }, /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
         justifyContent: Box.justifyContent.flexStart,
         alignItems: Box.alignItems.flexStart,
         width: "130px",
-        flex: "0 0 130px",
+        // flex="0 0 130px"
         // padding={[Box.padding.medium]}
         fullHeight: true
     }, /*#__PURE__*/ React__default.createElement(Heading, {
         padding: [
             Heading.padding.none,
             Heading.padding.none,
-            Heading.padding.large,
+            Heading.padding.small,
             Heading.padding.none
         ],
         removeLineHeight: true,
@@ -6910,7 +6921,11 @@ function LFOBox(param) {
         flex: "1",
         gap: Box.gap.large,
         justifyContent: Box.justifyContent.flexStart
-    }, /*#__PURE__*/ React__default.createElement(Box, null, syncType === 0 ? /*#__PURE__*/ React__default.createElement(Slider, {
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        padding: [
+            Box.padding.small
+        ]
+    }, syncType === 0 ? /*#__PURE__*/ React__default.createElement(Slider, {
         size: Slider.size.large,
         id: "LFO".concat(id, "_Hz"),
         label: "LFO".concat(id, " Hz"),
@@ -6941,8 +6956,7 @@ function LFOBox(param) {
         color: "var(--color-brand)",
         id: "LFO".concat(id, "_SyncType"),
         label: "LFO".concat(id, " Sync Type"),
-        onChange: handleSyncTypeChange,
-        width: "110px"
+        onChange: handleSyncTypeChange
     }), syncType !== 0 && syncType !== 1 ? /*#__PURE__*/ React__default.createElement(Slider, {
         variant: Slider.variant.bar,
         polarity: Slider.polarity.bipolar,
@@ -7029,7 +7043,11 @@ function LFOTab() {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "LFOTab",
         gap: Box.gap.medium,
-        height: "100%"
+        fullHeight: true,
+        alignItems: Box.alignItems.flexStart,
+        padding: [
+            Box.padding.medium
+        ]
     }, /*#__PURE__*/ React__default.createElement(LFOBox, {
         id: 1
     }), /*#__PURE__*/ React__default.createElement(LFOBox, {
@@ -7236,10 +7254,11 @@ function SeqTab$1(param) {
         padding: [
             Box.padding.mediumLarge
         ],
-        height: "100%"
+        fullHeight: true
     }, /*#__PURE__*/ React__default.createElement(Box, {
         gap: Box.gap.medium,
-        justifyContent: Box.justifyContent.flexStart
+        justifyContent: Box.justifyContent.flexStart,
+        fullHeight: true
     }, /*#__PURE__*/ React__default.createElement(Heading, {
         padding: [
             Heading.padding.none,
@@ -7254,10 +7273,12 @@ function SeqTab$1(param) {
         gap: Box.gap.medium,
         height: "100%"
     }, /*#__PURE__*/ React__default.createElement(Box, {
-        flex: "1 0 auto"
+        flex: "0 0 170px",
+        height: "170px"
     }, /*#__PURE__*/ React__default.createElement(StepSequencer, {
         seqId: seqId
     })), /*#__PURE__*/ React__default.createElement(Box, {
+        height: "71px",
         gap: Box.gap.medium,
         padding: [
             Box.padding.none,
@@ -7293,10 +7314,12 @@ function SeqTab$1(param) {
         id: "seq".concat(seqId, "_syncRate"),
         label: "Seq".concat(seqId, " Sync Rate")
     }) : null, syncType === 3 ? /*#__PURE__*/ React__default.createElement(Slider, {
+        width: "155px",
         id: "seq".concat(seqId, "_thirds"),
         indicatorLineGradient: Slider.gradientStyles.unicolor,
         label: "Seq".concat(seqId, " Thirds")
     }) : null, syncType === 4 ? /*#__PURE__*/ React__default.createElement(Slider, {
+        width: "155px",
         indicatorLineGradient: Slider.gradientStyles.unicolor,
         id: "seq".concat(seqId, "_sixteenths"),
         label: "Seq".concat(seqId, " Sixteenths")
@@ -7314,7 +7337,11 @@ function SeqTab() {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "SeqTab",
         gap: Box.gap.medium,
-        fullHeight: true
+        fullHeight: true,
+        alignItems: Box.alignItems.flexStart,
+        padding: [
+            Box.padding.medium
+        ]
     }, /*#__PURE__*/ React__default.createElement(SeqTab$1, {
         seqId: 1
     }), /*#__PURE__*/ React__default.createElement(SeqTab$1, {
@@ -7613,12 +7640,13 @@ function ModuleFooter(param) {
         style: _object_spread({
             backgroundColor: 'var(--bg-lv3)'
         }, style),
-        flex: "1 1 auto"
+        height: "342px"
     }, /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
-        height: "100%",
+        fullHeight: true,
         justifyContent: Box.justifyContent.flexStart
     }, /*#__PURE__*/ React__default.createElement(Box, {
+        height: "32px",
         // style={{ backgroundColor: 'var(--bg-lv4)' }}
         padding: [
             Box.padding.xSmall,
@@ -7643,13 +7671,12 @@ function ModuleFooter(param) {
         ],
         backgroundColor: "var(--bg-lv4)",
         selectedBackgroundColor: "var(--bg-lv3)",
-        width: "100%"
+        width: "100%",
+        height: "32px"
     })), /*#__PURE__*/ React__default.createElement(Box, {
-        padding: [
-            Box.padding.medium
-        ],
         alignItems: Box.alignItems.flexStart,
-        flex: "1 1 auto"
+        height: "305px",
+        width: "100%"
     }, selectedTab === Object.keys(FooterTabs).indexOf("ModMatrix") ? /*#__PURE__*/ React__default.createElement(ModMatrixTab, null) : '', selectedTab === Object.keys(FooterTabs).indexOf("InputMod") ? /*#__PURE__*/ React__default.createElement(InputModTab, null) : '', selectedTab === Object.keys(FooterTabs).indexOf("LFOs") ? /*#__PURE__*/ React__default.createElement(LFOTab, null) : '', selectedTab === Object.keys(FooterTabs).indexOf("Sequencer") ? /*#__PURE__*/ React__default.createElement(SequencerTab, null) : '', selectedTab === Object.keys(FooterTabs).indexOf("Settings") ? /*#__PURE__*/ React__default.createElement(SettingsTab, null) : '')));
 }