@antimatter-audio/antimatter-ui 14.13.0 → 14.14.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useRef, useReducer, useCallback, createContext, useContext, useEffect, useState } from 'react';
+import React__default, { useRef, useReducer, useCallback, createContext, useContext, useEffect, useState, useEffectEvent } 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';
@@ -193,30 +193,30 @@ function useObservable(param) {
     };
 }
 
-function _array_like_to_array$j(arr, len) {
+function _array_like_to_array$i(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_without_holes$3(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$j(arr);
+function _array_without_holes$2(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$i(arr);
 }
-function _iterable_to_array$3(iter) {
+function _iterable_to_array$2(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _non_iterable_spread$3() {
+function _non_iterable_spread$2() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _to_consumable_array$3(arr) {
-    return _array_without_holes$3(arr) || _iterable_to_array$3(arr) || _unsupported_iterable_to_array$j(arr) || _non_iterable_spread$3();
+function _to_consumable_array$2(arr) {
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$i(arr) || _non_iterable_spread$2();
 }
-function _unsupported_iterable_to_array$j(o, minLen) {
+function _unsupported_iterable_to_array$i(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$j(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$i(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$j(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(o, minLen);
 }
 // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
 // mocks the `normalisedToScaledValue` internal method from JUCE
@@ -266,7 +266,7 @@ var getValidValueForInput = function(param) {
     // TODO: Clean up
     var matchCriteria = /^-?(?:\d+\.\d+|\d+|\.\d+)$/g;
     var splitValue = value.toString().matchAll(matchCriteria);
-    var splitValueArray = _to_consumable_array$3(splitValue);
+    var splitValueArray = _to_consumable_array$2(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) {
@@ -359,7 +359,7 @@ function throttle(mainFunction, delay) {
             args[_key] = arguments[_key];
         }
         if (timerFlag === null) {
-            mainFunction.apply(void 0, _to_consumable_array$3(args));
+            mainFunction.apply(void 0, _to_consumable_array$2(args));
             timerFlag = setTimeout(function() {
                 timerFlag = null;
             }, delay);
@@ -367,7 +367,7 @@ function throttle(mainFunction, delay) {
     };
 }
 
-function _array_like_to_array$i(arr, len) {
+function _array_like_to_array$h(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
@@ -375,8 +375,8 @@ function _array_like_to_array$i(arr, len) {
 function _array_with_holes$h(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _array_without_holes$2(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$i(arr);
+function _array_without_holes$1(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$h(arr);
 }
 function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -407,7 +407,7 @@ function _async_to_generator$4(fn) {
         });
     };
 }
-function _define_property$p(obj, key, value) {
+function _define_property$o(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -420,7 +420,7 @@ function _define_property$p(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array$2(iter) {
+function _iterable_to_array$1(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 function _iterable_to_array_limit$h(arr, i) {
@@ -450,10 +450,10 @@ function _iterable_to_array_limit$h(arr, i) {
 function _non_iterable_rest$h() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _non_iterable_spread$2() {
+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 _object_spread$o(target) {
+function _object_spread$n(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -463,7 +463,7 @@ function _object_spread$o(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$p(target, key, source[key]);
+            _define_property$o(target, key, source[key]);
         });
     }
     return target;
@@ -488,18 +488,18 @@ function _object_spread_props$4(target, source) {
     return target;
 }
 function _sliced_to_array$h(arr, i) {
-    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$h();
+    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$h();
 }
-function _to_consumable_array$2(arr) {
-    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$i(arr) || _non_iterable_spread$2();
+function _to_consumable_array$1(arr) {
+    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$h(arr) || _non_iterable_spread$1();
 }
-function _unsupported_iterable_to_array$i(o, minLen) {
+function _unsupported_iterable_to_array$h(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$i(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
 }
 function _ts_generator$4(thisArg, body) {
     var f, y, t, _ = {
@@ -619,61 +619,61 @@ var defaultGlobalStateValue = {
 var reducer = function(state, action) {
     switch(action.type){
         case 'HIGHLIGHTED_ITEM_CHANGED':
-            return _object_spread_props$4(_object_spread$o({}, state), {
+            return _object_spread_props$4(_object_spread$n({}, state), {
                 highlightedItem: action.payload
             });
         // case 'FOCUSED_ITEM_CHANGED':
         //   return { ...state, focusedItem: action.payload };
         case 'ADVANCED_VIEW_TOGGLED':
-            return _object_spread_props$4(_object_spread$o({}, state), {
+            return _object_spread_props$4(_object_spread$n({}, state), {
                 advancedView: action.payload
             });
         case 'AUTOMATABLE_PARAMS_LIST_RECEIVED':
-            return _object_spread_props$4(_object_spread$o({}, state), {
+            return _object_spread_props$4(_object_spread$n({}, state), {
                 automatableParamsList: action.payload
             });
         case 'AUTOMATABLE_PARAM_LABELS_RECEIVED':
-            return _object_spread_props$4(_object_spread$o({}, state), {
+            return _object_spread_props$4(_object_spread$n({}, state), {
                 automatableParamLabels: action.payload
             });
         case 'PARAMETER_TYPES_RECEIVED':
-            return _object_spread_props$4(_object_spread$o({}, state), {
+            return _object_spread_props$4(_object_spread$n({}, state), {
                 parameterTypes: action.payload
             });
         case 'ALL_PARAMETERS_RECEIVED':
-            return _object_spread_props$4(_object_spread$o({}, state), {
+            return _object_spread_props$4(_object_spread$n({}, state), {
                 allParameters: action.payload
             });
         case 'MOD_SLOTS_RECEIVED':
-            return _object_spread_props$4(_object_spread$o({}, state), {
+            return _object_spread_props$4(_object_spread$n({}, state), {
                 modSlotIds: action.payload.map(function(val) {
                     return val[0];
                 })
             });
         case 'MOD_SLOT_ROW_TARGETS_RECEIVED':
             var _action_payload;
-            return _object_spread_props$4(_object_spread$o({}, state), {
+            return _object_spread_props$4(_object_spread$n({}, state), {
                 modSlotTargets: action === null || action === void 0 ? void 0 : (_action_payload = action.payload) === null || _action_payload === void 0 ? void 0 : _action_payload.reduce(function(acc, val) {
-                    return _object_spread_props$4(_object_spread$o({}, acc), _define_property$p({}, val[0], val[1]));
+                    return _object_spread_props$4(_object_spread$n({}, acc), _define_property$o({}, val[0], val[1]));
                 }, {})
             });
         case 'MOD_SLOT_ROW_TARGET_UPDATED':
             var _action_payload1, _action_payload2;
-            return _object_spread_props$4(_object_spread$o({}, state), {
-                modSlotTargets: _object_spread_props$4(_object_spread$o({}, state === null || state === void 0 ? void 0 : state.modSlotTargets), _define_property$p({}, (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1.id, action === null || action === void 0 ? void 0 : (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2.value))
+            return _object_spread_props$4(_object_spread$n({}, state), {
+                modSlotTargets: _object_spread_props$4(_object_spread$n({}, state === null || state === void 0 ? void 0 : state.modSlotTargets), _define_property$o({}, (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1.id, action === null || action === void 0 ? void 0 : (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2.value))
             });
         case 'MOD_SLOT_PREVIEW_TARGET_INDEX_UPDATED':
             {
-                return _object_spread_props$4(_object_spread$o({}, state), {
-                    modSlotPreview: _object_spread_props$4(_object_spread$o({}, state.modSlotPreview), {
+                return _object_spread_props$4(_object_spread$n({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$n({}, state.modSlotPreview), {
                         targetIndex: action.payload
                     })
                 });
             }
         case 'MOD_SLOT_PREVIEW_SLOT_ID_UPDATED':
             {
-                return _object_spread_props$4(_object_spread$o({}, state), {
-                    modSlotPreview: _object_spread_props$4(_object_spread$o({}, state.modSlotPreview), {
+                return _object_spread_props$4(_object_spread$n({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$n({}, state.modSlotPreview), {
                         slotId: action === null || action === void 0 ? void 0 : action.payload
                     })
                 });
@@ -681,7 +681,7 @@ var reducer = function(state, action) {
         case 'SET_NEW_MOD_SLOT_PREVIEW':
             {
                 var _state_modSlotIds_find;
-                return _object_spread_props$4(_object_spread$o({}, state), {
+                return _object_spread_props$4(_object_spread$n({}, state), {
                     modSlotPreview: {
                         slotId: (_state_modSlotIds_find = state.modSlotIds.find(function(item) {
                             return state.modSlotTargets[item] <= 0;
@@ -693,7 +693,7 @@ var reducer = function(state, action) {
             }
         case 'CLEAR_MOD_SLOT_PREVIEW':
             {
-                return _object_spread_props$4(_object_spread$o({}, state), {
+                return _object_spread_props$4(_object_spread$n({}, state), {
                     modSlotPreview: {
                         slotId: '',
                         isEditable: false,
@@ -703,26 +703,26 @@ var reducer = function(state, action) {
             }
         case 'MOD_SLOT_PREVIEW_IS_EDITABLE_UPDATED':
             {
-                return _object_spread_props$4(_object_spread$o({}, state), {
-                    modSlotPreview: _object_spread_props$4(_object_spread$o({}, state.modSlotPreview), {
+                return _object_spread_props$4(_object_spread$n({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$n({}, state.modSlotPreview), {
                         isEditable: action === null || action === void 0 ? void 0 : action.payload
                     })
                 });
             }
         case 'MOD_SLOT_PARAMS_LIST_RECEIVED':
             var modSlotNames = Object.keys(state.modSlotTargets);
-            return _object_spread_props$4(_object_spread$o({}, state), {
+            return _object_spread_props$4(_object_spread$n({}, state), {
                 modSlotParams: action === null || action === void 0 ? void 0 : action.payload.reduce(function(acc, item, i) {
                     acc[modSlotNames[i]] = item;
                     return acc;
                 }, {})
             });
         case 'DEFAULT_PARAM_VALUES_RECEIVED':
-            return _object_spread_props$4(_object_spread$o({}, state), {
+            return _object_spread_props$4(_object_spread$n({}, state), {
                 defaultParamValues: action === null || action === void 0 ? void 0 : action.payload
             });
         case 'MOD_SLOT_PARAM_LABELS_RECIEVED':
-            return _object_spread_props$4(_object_spread$o({}, state), {
+            return _object_spread_props$4(_object_spread$n({}, state), {
                 modSlotParamLabels: action === null || action === void 0 ? void 0 : action.payload
             });
         default:
@@ -762,7 +762,7 @@ function GlobalContextProvider(param) {
             type: 'AUTOMATABLE_PARAMS_LIST_RECEIVED',
             payload: [
                 'none'
-            ].concat(_to_consumable_array$2(automatableParamsList))
+            ].concat(_to_consumable_array$1(automatableParamsList))
         });
     }, []);
     var allParametersReceived = useCallback(function(allParameters) {
@@ -1010,7 +1010,7 @@ function GlobalContextProvider(param) {
     }, children);
 }
 
-function _array_like_to_array$h(arr, len) {
+function _array_like_to_array$g(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
@@ -1018,7 +1018,7 @@ function _array_like_to_array$h(arr, len) {
 function _array_with_holes$g(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$o(obj, key, value) {
+function _define_property$n(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1058,7 +1058,7 @@ function _iterable_to_array_limit$g(arr, i) {
 function _non_iterable_rest$g() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$n(target) {
+function _object_spread$m(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1068,21 +1068,21 @@ function _object_spread$n(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$o(target, key, source[key]);
+            _define_property$n(target, key, source[key]);
         });
     }
     return target;
 }
 function _sliced_to_array$g(arr, i) {
-    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$g();
+    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$g();
 }
-function _unsupported_iterable_to_array$h(o, minLen) {
+function _unsupported_iterable_to_array$g(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
 }
 function Button(param) {
     var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, onClick = param.onClick, children = param.children, _param_padding = param.padding, padding = _param_padding === void 0 ? [
@@ -1152,7 +1152,7 @@ function Button(param) {
         onMouseDown: handleMouseDown,
         disabled: disabled,
         onClick: onClick && onClick,
-        style: _object_spread$n({
+        style: _object_spread$m({
             paddingTop: "var(--p-".concat(padding[0], ")"),
             paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
             paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
@@ -1201,7 +1201,7 @@ var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
     return LayoutTags;
 }({});
 
-function _define_property$n(obj, key, value) {
+function _define_property$m(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1214,7 +1214,7 @@ function _define_property$n(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$m(target) {
+function _object_spread$l(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1224,7 +1224,7 @@ function _object_spread$m(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$n(target, key, source[key]);
+            _define_property$m(target, key, source[key]);
         });
     }
     return target;
@@ -1315,13 +1315,13 @@ function Box(_param) {
     ]);
     var Tag = tag;
     var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$3(_object_spread$m({
+    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$3(_object_spread$l({
         // id="globalValues"
         key: key,
         className: className,
         onClick: onClick
     }, rest), {
-        style: _object_spread$m({
+        style: _object_spread$l({
             flexWrap: flexWrap,
             display: display,
             width: width,
@@ -1360,7 +1360,7 @@ Box.tag = LayoutTags;
 var css_248z$c = ".Icon svg {\n  width: 100%;\n}\n";
 styleInject(css_248z$c);
 
-function _define_property$m(obj, key, value) {
+function _define_property$l(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1373,7 +1373,7 @@ function _define_property$m(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$l(target) {
+function _object_spread$k(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1383,7 +1383,7 @@ function _object_spread$l(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$m(target, key, source[key]);
+            _define_property$l(target, key, source[key]);
         });
     }
     return target;
@@ -1732,7 +1732,7 @@ function Icon(param) {
         className: "Icon ".concat(className ? className : ''),
         onClick: onClick,
         padding: padding,
-        style: _object_spread$l({
+        style: _object_spread$k({
             width: width,
             height: height !== null && height !== void 0 ? height : width
         }, style)
@@ -1745,7 +1745,7 @@ Icon.icon = Icons;
 Icon.padding = Spacing;
 Icon.margin = Spacing;
 
-function _define_property$l(obj, key, value) {
+function _define_property$k(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1758,7 +1758,7 @@ function _define_property$l(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$k(target) {
+function _object_spread$j(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1768,7 +1768,7 @@ function _object_spread$k(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$l(target, key, source[key]);
+            _define_property$k(target, key, source[key]);
         });
     }
     return target;
@@ -1781,7 +1781,7 @@ function Label(param) {
     return /*#__PURE__*/ React.createElement("label", {
         id: id,
         htmlFor: htmlFor,
-        style: _object_spread$k({
+        style: _object_spread$j({
             fontSize: "var(--text-".concat(fontSize, ")"),
             lineHeight: "var(--text-".concat(fontSize, ")"),
             paddingTop: "var(--p-".concat(padding[0], ")"),
@@ -1801,7 +1801,7 @@ function Label(param) {
 Label.padding = Spacing;
 Label.fontSize = FontSizes;
 
-function _define_property$k(obj, key, value) {
+function _define_property$j(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1814,7 +1814,7 @@ function _define_property$k(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$j(target) {
+function _object_spread$i(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1824,7 +1824,7 @@ function _object_spread$j(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$k(target, key, source[key]);
+            _define_property$j(target, key, source[key]);
         });
     }
     return target;
@@ -1848,7 +1848,7 @@ function IconButton(param) {
         padding: padding,
         margin: margin,
         disabled: disabled,
-        style: _object_spread$j({
+        style: _object_spread$i({
             backgroundColor: backgroundColor,
             width: width,
             height: height !== null && height !== void 0 ? height : 'auto'
@@ -1869,7 +1869,7 @@ IconButton.icon = Icons;
 IconButton.padding = Spacing;
 IconButton.margin = Spacing;
 
-function _array_like_to_array$g(arr, len) {
+function _array_like_to_array$f(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
@@ -1905,15 +1905,15 @@ function _non_iterable_rest$f() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _sliced_to_array$f(arr, i) {
-    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$f();
+    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$f();
 }
-function _unsupported_iterable_to_array$g(o, minLen) {
+function _unsupported_iterable_to_array$f(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$f(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
 }
 var useDropdown = function(param) {
     var id = param.id, // TODO: Is there a better way to handle mod matrix dropdowns?
@@ -2017,7 +2017,7 @@ var useDropdown = function(param) {
     };
 };
 
-function _array_like_to_array$f(arr, len) {
+function _array_like_to_array$e(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
@@ -2053,15 +2053,15 @@ 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$f(arr, i) || _non_iterable_rest$e();
+    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$f(o, minLen) {
+function _unsupported_iterable_to_array$e(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$f(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$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$f(o, minLen);
+    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, _param_id = param.id, id = _param_id === void 0 ? '' : _param_id, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
@@ -2159,7 +2159,7 @@ Tabs.fontSize = FontSizes;
 var css_248z$b = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-ml);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: center;\n  border-radius: 4px;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: 26px;\n  border: 1px solid var(--bg-lv9);\n  /* background: var(--color-gray-800); */\n  /* color: var(--color-text); */\n}\n\n.Dropdown-button:hover,\n.Dropdown-button[data-open] {\n  outline: none;\n  cursor: pointer;\n  border: 1px solid var(--color-brand-secondary);\n}\n\n.Dropdown-button:hover .Label {\n  cursor: pointer;\n}\n\n.Dropdown-button:disabled {\n  cursor: default;\n}\n\n.Dropdown-items {\n  border: 1px solid var(--bg-lv9);\n  background: var(--bg-lv4);\n  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 3px;\n  border-radius: 4px;\n  width: 150px;\n  z-index: 50;\n}\n\n.Dropdown-item {\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  min-width: 100px;\n  color: var(--color-text);\n  cursor: pointer;\n  /* text-align: center; */\n}\n\n.Dropdown-item[data-selected] {\n  color: var(--color-brand-secondary);\n}\n\n.Dropdown-item:hover {\n  background-color: var(--bg-lv7);\n}\n\n.Dropdown-item:hover:not([data-selected]) {\n  color: var(--color-text);\n}\n";
 styleInject(css_248z$b);
 
-function _define_property$j(obj, key, value) {
+function _define_property$i(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2172,7 +2172,7 @@ function _define_property$j(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$i(target) {
+function _object_spread$h(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2182,7 +2182,7 @@ function _object_spread$i(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$j(target, key, source[key]);
+            _define_property$i(target, key, source[key]);
         });
     }
     return target;
@@ -2255,7 +2255,7 @@ function Dropdown(param) {
         onClick: incrementValue
     })), /*#__PURE__*/ React__default.createElement(ListboxButton, {
         className: classnames('Combobox Dropdown-button', className),
-        style: _object_spread$i({
+        style: _object_spread$h({
             color: "".concat(color ? color : 'initial'),
             width: "".concat(width ? width : '100%'),
             height: height,
@@ -2293,7 +2293,7 @@ function Dropdown(param) {
 var css_248z$a = ".TextInput {\n  pointer-events: auto;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n\n.TextInput:disabled {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.isActive .TextInput {\n  -webkit-user-select: auto;\n  -moz-user-select: auto;\n  -ms-user-select: auto;\n  user-select: auto;\n}\n";
 styleInject(css_248z$a);
 
-function _array_like_to_array$e(arr, len) {
+function _array_like_to_array$d(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
@@ -2301,7 +2301,7 @@ function _array_like_to_array$e(arr, len) {
 function _array_with_holes$d(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$i(obj, key, value) {
+function _define_property$h(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2341,7 +2341,7 @@ function _iterable_to_array_limit$d(arr, i) {
 function _non_iterable_rest$d() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$h(target) {
+function _object_spread$g(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2351,21 +2351,21 @@ function _object_spread$h(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$i(target, key, source[key]);
+            _define_property$h(target, key, source[key]);
         });
     }
     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$e(arr, i) || _non_iterable_rest$d();
+    return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$d();
 }
-function _unsupported_iterable_to_array$e(o, minLen) {
+function _unsupported_iterable_to_array$d(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$e(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
 }
 // import { decimalToPercent, percentToDecimal } from '../../common/utils';
 // import debounce from 'lodash.debounce';
@@ -2497,7 +2497,7 @@ function Input(param) {
         id: "".concat(id, "-input"),
         ref: inputRef,
         className: classnames('TextInput', isHighlighted ? 'is-highlighted' : '', className),
-        style: _object_spread$h({
+        style: _object_spread$g({
             fontSize: "var(--text-".concat(fontSize),
             textAlign: textAlign,
             color: textColor
@@ -2520,7 +2520,7 @@ Input.type = InputTypes;
 Input.textAlign = TextAlign;
 Input.fontSize = FontSizes;
 
-function _define_property$h(obj, key, value) {
+function _define_property$g(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2550,15 +2550,15 @@ var RotarySliderSizes = /*#__PURE__*/ function(RotarySliderSizes) {
     return RotarySliderSizes;
 }({});
 var _obj;
-var rotarySliderSizeMap = (_obj = {}, _define_property$h(_obj, "small", {
+var rotarySliderSizeMap = (_obj = {}, _define_property$g(_obj, "small", {
     width: 40,
     height: 40
-}), _define_property$h(_obj, "large", {
+}), _define_property$g(_obj, "large", {
     width: 65,
     height: 65
 }), _obj);
 
-function _array_like_to_array$d(arr, len) {
+function _array_like_to_array$c(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
@@ -2594,15 +2594,15 @@ 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$d(arr, i) || _non_iterable_rest$c();
+    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$d(o, minLen) {
+function _unsupported_iterable_to_array$c(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$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$d(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
@@ -2870,7 +2870,7 @@ styleInject(css_248z$9);
 var css_248z$8 = "";
 styleInject(css_248z$8);
 
-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;
@@ -2906,15 +2906,15 @@ 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$c(arr, i) || _non_iterable_rest$b();
+    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);
 }
 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, width = param.width;
@@ -3223,7 +3223,7 @@ var BarSliderMarker = function(param) {
     }))));
 };
 
-function _define_property$g(obj, key, value) {
+function _define_property$f(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3236,7 +3236,7 @@ function _define_property$g(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$g(target) {
+function _object_spread$f(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3246,7 +3246,7 @@ function _object_spread$g(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$g(target, key, source[key]);
+            _define_property$f(target, key, source[key]);
         });
     }
     return target;
@@ -3278,7 +3278,7 @@ function RotaryCircle(param) {
     var circ = 2 * 3.14 * radius;
     var activeZone = circ - circ * 0.25;
     // console.log(markerShape, 'MARKERSHAPE');
-    return /*#__PURE__*/ React__default.createElement(Box, _object_spread_props$2(_object_spread$g({
+    return /*#__PURE__*/ React__default.createElement(Box, _object_spread_props$2(_object_spread$f({
         id: id,
         key: "RotaryCircle-".concat(id),
         tabIndex: 0,
@@ -3287,7 +3287,7 @@ function RotaryCircle(param) {
         onDoubleClick: function() {
             onDoubleClick && onDoubleClick();
         },
-        style: _object_spread$g({
+        style: _object_spread$f({
             touchAction: 'none',
             height: "".concat(height !== null && height !== void 0 ? height : width, "px"),
             width: "".concat(width, "px")
@@ -3334,7 +3334,7 @@ function RotaryCircle(param) {
 RotaryCircle.polarity = Polarity;
 RotaryCircle.size = RotarySliderSizes;
 
-function _define_property$f(obj, key, value) {
+function _define_property$e(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3347,7 +3347,7 @@ function _define_property$f(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$f(target) {
+function _object_spread$e(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3357,7 +3357,7 @@ function _object_spread$f(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$f(target, key, source[key]);
+            _define_property$e(target, key, source[key]);
         });
     }
     return target;
@@ -3369,7 +3369,7 @@ function PositioningWrapper(param) {
     return /*#__PURE__*/ React__default.createElement("div", {
         id: id,
         className: className,
-        style: _object_spread$f({
+        style: _object_spread$e({
             position: 'relative',
             height: height,
             width: width,
@@ -3435,7 +3435,7 @@ AnimationDataWrapper.dataTypes = DataTypes;
 var css_248z$7 = ".canvasContainer {\n  --color-brand: #bb68d9;\n}\n";
 styleInject(css_248z$7);
 
-function _define_property$e(obj, key, value) {
+function _define_property$d(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3448,7 +3448,7 @@ function _define_property$e(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$e(target) {
+function _object_spread$d(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3458,7 +3458,7 @@ function _object_spread$e(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$e(target, key, source[key]);
+            _define_property$d(target, key, source[key]);
         });
     }
     return target;
@@ -3511,7 +3511,7 @@ function IndicatorLight(param) {
         width: "auto"
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: "canvasContainer",
-        style: _object_spread$e({
+        style: _object_spread$d({
             position: 'relative',
             width: "".concat(width, "px"),
             height: "".concat(height, "px"),
@@ -3644,7 +3644,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$d(obj, key, value) {
+function _define_property$c(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3657,7 +3657,7 @@ function _define_property$d(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$d(target) {
+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);
@@ -3667,7 +3667,7 @@ function _object_spread$d(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$d(target, key, source[key]);
+            _define_property$c(target, key, source[key]);
         });
     }
     return target;
@@ -3716,7 +3716,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$d(_obj, GradientStyles.multicolor, multiColorGradient), _define_property$d(_obj, GradientStyles.unicolor, singleColorGradient), _obj);
+    var selectedGradientMap = (_obj = {}, _define_property$c(_obj, GradientStyles.multicolor, multiColorGradient), _define_property$c(_obj, GradientStyles.unicolor, singleColorGradient), _obj);
     var _useSlider = useSlider({
         id: id,
         label: label,
@@ -3759,12 +3759,12 @@ function Slider$1(param) {
             Box.padding.none
         ],
         height: "100%"
-    }, /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$d({
+    }, /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$c({
         className: classnames('BarSlider-Track', isHighlighted && 'isHighlighted')
     }, drag()), {
         // onMouseEnter={onMouseEnter}
         id: id,
-        style: _object_spread$d({
+        style: _object_spread$c({
             background: trackColor,
             stroke: trackStrokeColor ? "1px solid ".concat(trackStrokeColor) : 'none'
         }, style)
@@ -3774,7 +3774,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$d({
+        style: _object_spread$c({
             background: indicatorLineGradient ? selectedGradientMap[indicatorLineGradient] : indicatorLineColor,
             opacity: isStandalone || isHighlighted ? '100%' : '80%',
             top: "".concat(isHorizontal && isNarrowTrack && 'calc(50% - 3px)'),
@@ -3819,7 +3819,7 @@ Slider$1.sliderType = SliderType;
 Slider$1.polarity = Polarity;
 Slider$1.orientation = Orientation;
 
-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;
@@ -3855,15 +3855,15 @@ 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$a(arr, i) {
-    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$a();
+    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 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;
@@ -4174,7 +4174,7 @@ var HeadingTags = /*#__PURE__*/ function(HeadingTags) {
     return HeadingTags;
 }({});
 
-function _define_property$c(obj, key, value) {
+function _define_property$b(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -4187,7 +4187,7 @@ function _define_property$c(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$c(target) {
+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);
@@ -4197,7 +4197,7 @@ function _object_spread$c(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$c(target, key, source[key]);
+            _define_property$b(target, key, source[key]);
         });
     }
     return target;
@@ -4210,7 +4210,7 @@ function Heading(param) {
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React.createElement(Tag, {
         id: id,
-        style: _object_spread$c({
+        style: _object_spread$b({
             fontSize: "var(--text-".concat(fontSize),
             paddingTop: "var(--p-".concat(padding[0], ")"),
             paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
@@ -4229,7 +4229,7 @@ Heading.fontSize = FontSizes;
 Heading.tag = HeadingTags;
 Heading.padding = Spacing;
 
-function _define_property$b(obj, key, value) {
+function _define_property$a(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -4242,7 +4242,7 @@ function _define_property$b(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$b(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);
@@ -4252,7 +4252,7 @@ function _object_spread$b(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$b(target, key, source[key]);
+            _define_property$a(target, key, source[key]);
         });
     }
     return target;
@@ -4264,7 +4264,7 @@ function KeyValueDisplayScreen(param) {
         // justifyContent={Box.justifyContent.flexStart}
         alignItems: Box.alignItems.flexStart,
         gap: Box.gap.small,
-        style: _object_spread$b({}, style),
+        style: _object_spread$a({}, style),
         padding: [
             Box.padding.small,
             Box.padding.none,
@@ -4478,7 +4478,7 @@ function LineChartSvg(param) {
     })));
 }
 
-function _define_property$a(obj, key, value) {
+function _define_property$9(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -4491,7 +4491,7 @@ function _define_property$a(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$a(target) {
+function _object_spread$9(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -4501,7 +4501,7 @@ function _object_spread$a(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
+            _define_property$9(target, key, source[key]);
         });
     }
     return target;
@@ -4536,7 +4536,7 @@ function LineChartCanvas(param) {
         data
     ]);
     return /*#__PURE__*/ React__default.createElement("div", {
-        style: _object_spread$a({
+        style: _object_spread$9({
             width: width,
             height: height,
             position: 'relative'
@@ -4783,69 +4783,69 @@ Chart.fillGradient = GradientStyles;
 Chart.chartType = ChartTypes;
 Chart.renderAs = GraphicRenderOptions;
 
-var WorkerClass$3 = null;
+var WorkerClass$2 = null;
 
 try {
-    var WorkerThreads$3 =
+    var WorkerThreads$2 =
         typeof module !== 'undefined' && typeof module.require === 'function' && module.require('worker_threads') ||
         typeof __non_webpack_require__ === 'function' && __non_webpack_require__('worker_threads') ||
         typeof require === 'function' && require('worker_threads');
-    WorkerClass$3 = WorkerThreads$3.Worker;
+    WorkerClass$2 = WorkerThreads$2.Worker;
 } catch(e) {} // eslint-disable-line
 
-function decodeBase64$7(base64, enableUnicode) {
+function decodeBase64$5(base64, enableUnicode) {
     return Buffer.from(base64, 'base64').toString('utf8');
 }
 
-function createBase64WorkerFactory$b(base64, sourcemapArg, enableUnicodeArg) {
+function createBase64WorkerFactory$8(base64, sourcemapArg, enableUnicodeArg) {
     var sourcemap = sourcemapArg;
-    var source = decodeBase64$7(base64);
+    var source = decodeBase64$5(base64);
     var start = source.indexOf('\n', 10) + 1;
     var body = source.substring(start) + ('\/\/# sourceMappingURL=' + sourcemap );
     return function WorkerFactory(options) {
-        return new WorkerClass$3(body, Object.assign({}, options, { eval: true }));
+        return new WorkerClass$2(body, Object.assign({}, options, { eval: true }));
     };
 }
 
-function decodeBase64$6(base64, enableUnicode) {
+function decodeBase64$4(base64, enableUnicode) {
     var binaryString = atob(base64);
     return binaryString;
 }
 
-function createURL$3(base64, sourcemapArg, enableUnicodeArg) {
+function createURL$2(base64, sourcemapArg, enableUnicodeArg) {
     var sourcemap = sourcemapArg;
-    var source = decodeBase64$6(base64);
+    var source = decodeBase64$4(base64);
     var start = source.indexOf('\n', 10) + 1;
     var body = source.substring(start) + ('\/\/# sourceMappingURL=' + sourcemap );
     var blob = new Blob([body], { type: 'application/javascript' });
     return URL.createObjectURL(blob);
 }
 
-function createBase64WorkerFactory$a(base64, sourcemapArg, enableUnicodeArg) {
+function createBase64WorkerFactory$7(base64, sourcemapArg, enableUnicodeArg) {
     var url;
     return function WorkerFactory(options) {
-        url = url || createURL$3(base64, sourcemapArg);
+        url = url || createURL$2(base64, sourcemapArg);
         return new Worker(url, options);
     };
 }
 
-var kIsNodeJS$3 = Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';
+var kIsNodeJS$2 = Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';
 
-function isNodeJS$3() {
-    return kIsNodeJS$3;
+function isNodeJS$2() {
+    return kIsNodeJS$2;
 }
 
-function createBase64WorkerFactory$9(base64, sourcemapArg, enableUnicodeArg) {
-    if (isNodeJS$3()) {
-        return createBase64WorkerFactory$b(base64, sourcemapArg);
+function createBase64WorkerFactory$6(base64, sourcemapArg, enableUnicodeArg) {
+    if (isNodeJS$2()) {
+        return createBase64WorkerFactory$8(base64, sourcemapArg);
     }
-    return createBase64WorkerFactory$a(base64, sourcemapArg);
+    return createBase64WorkerFactory$7(base64, sourcemapArg);
 }
 
-var WorkerFactory$3 = /*#__PURE__*/createBase64WorkerFactory$9('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICB2YXIgY2FudmFzOwogIHNlbGYub25tZXNzYWdlID0gZnVuY3Rpb24oZXZlbnQpIHsKICAgICAgdmFyIGRhdGEgPSBldmVudC5kYXRhOwogICAgICBpZiAoZGF0YS50eXBlID09PSAnaW5pdCcpIHsKICAgICAgICAgIGNhbnZhcyA9IGRhdGEuY2FudmFzOwogICAgICB9CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICd1cGRhdGUnKSB7CiAgICAgICAgICB2YXIgX2RhdGFfcmVuZGVyRGF0YV87CiAgICAgICAgICB2YXIgZXZlbnRJZCA9ICdvc2NEYXRhJzsKICAgICAgICAgIHZhciBtYXJnaW4gPSAxMDsKICAgICAgICAgIHZhciBzbGljZWREYXRhID0gZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiAoX2RhdGFfcmVuZGVyRGF0YV8gPSBkYXRhLnJlbmRlckRhdGFbIiIuY29uY2F0KGV2ZW50SWQpXSkgPT09IG51bGwgfHwgX2RhdGFfcmVuZGVyRGF0YV8gPT09IHZvaWQgMCA/IHZvaWQgMCA6IF9kYXRhX3JlbmRlckRhdGFfLnNsaWNlKDAsIGRhdGEuY3ljbGVMZW5ndGgpOwogICAgICAgICAgdmFyIHhTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKFsKICAgICAgICAgICAgICAwLAogICAgICAgICAgICAgIHNsaWNlZERhdGEgPT09IG51bGwgfHwgc2xpY2VkRGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogc2xpY2VkRGF0YS5sZW5ndGgKICAgICAgICAgIF0pLnJhbmdlKFsKICAgICAgICAgICAgICBtYXJnaW4sCiAgICAgICAgICAgICAgZGF0YS53aWR0aCAtIG1hcmdpbgogICAgICAgICAgXSk7CiAgICAgICAgICAvLyAubmljZSgpOwogICAgICAgICAgdmFyIHlTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS55U2NhbGVEb21haW4pLnJhbmdlKFsKICAgICAgICAgICAgICBkYXRhLmhlaWdodCAtIG1hcmdpbiwKICAgICAgICAgICAgICBtYXJnaW4KICAgICAgICAgIF0pOwogICAgICAgICAgLy8gLm5pY2UoKTsKICAgICAgICAgIGlmIChzbGljZWREYXRhICE9IG51bGwpIHsKICAgICAgICAgICAgICAvLyBmaWxsOiAnbm9uZScsCiAgICAgICAgICAgICAgLy8gJ3NoYXBlLXJlbmRlcmluZyc6ICdjcmlzcEVkZ2VzJywKICAgICAgICAgICAgICB2YXIgY3R4ID0gY2FudmFzID09PSBudWxsIHx8IGNhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogY2FudmFzLmdldENvbnRleHQoJzJkJyk7CiAgICAgICAgICAgICAgdmFyIGxpbmUgPSBkMy5saW5lKGZ1bmN0aW9uKF8sIGkpIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIHhTY2FsZShpKTsKICAgICAgICAgICAgICB9LCB5U2NhbGUpLmNvbnRleHQoY3R4KTsKICAgICAgICAgICAgICB2YXIgbGluZURhdGEgPSBzbGljZWREYXRhOwogICAgICAgICAgICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KTsKICAgICAgICAgICAgICBjdHguc2F2ZSgpOwogICAgICAgICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICAgICAgICBsaW5lLmN1cnZlKGQzLmN1cnZlQmFzaXMpKGxpbmVEYXRhKTsKICAgICAgICAgICAgICBjdHgubGluZVdpZHRoID0gMjsKICAgICAgICAgICAgICBjdHguc3Ryb2tlU3R5bGUgPSAnIzZGRkZGNSc7CiAgICAgICAgICAgICAgY3R4LnNoYWRvd0NvbG9yID0gJ3JnYmEoMTExLCAyNTUsIDI0NSwgLjcpJzsKICAgICAgICAgICAgICBjdHguaW1hZ2VTbW9vdGhpbmdFbmFibGVkID0gZmFsc2U7CiAgICAgICAgICAgICAgY3R4LnNoYWRvd0JsdXIgPSA1OwogICAgICAgICAgICAgIGN0eC5zaGFkb3dPZmZzZXRYID0gMDsKICAgICAgICAgICAgICBjdHguc2hhZG93T2Zmc2V0WSA9IDA7CiAgICAgICAgICAgICAgY3R4LnN0cm9rZSgpOwogICAgICAgICAgICAgIGNhbnZhcyA9PT0gbnVsbCB8fCBjYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpLmRyYXdJbWFnZShjYW52YXMsIDAsIDApOwogICAgICAgICAgICAgIHZhciBiaXRtYXAgPSBjYW52YXMgPT09IG51bGwgfHwgY2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiBjYW52YXMudHJhbnNmZXJUb0ltYWdlQml0bWFwKCk7CiAgICAgICAgICAgICAgc2VsZi5wb3N0TWVzc2FnZShiaXRtYXApOwogICAgICAgICAgfQogICAgICB9CiAgfTsKCn0pKCk7Ci8vIyBzb3VyY2VNYXBwaW5nVVJMPXdvcmtlci5qcy5tYXAKCg==', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=');
+var WorkerFactory$2 = /*#__PURE__*/createBase64WorkerFactory$6('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICB2YXIgY2FudmFzOwogIHNlbGYub25tZXNzYWdlID0gZnVuY3Rpb24oZXZlbnQpIHsKICAgICAgdmFyIGRhdGEgPSBldmVudC5kYXRhOwogICAgICBpZiAoZGF0YS50eXBlID09PSAnaW5pdCcpIHsKICAgICAgICAgIGNhbnZhcyA9IGRhdGEuY2FudmFzOwogICAgICB9CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICd1cGRhdGUnKSB7CiAgICAgICAgICB2YXIgX2RhdGFfcmVuZGVyRGF0YV87CiAgICAgICAgICB2YXIgZXZlbnRJZCA9ICdvc2NEYXRhJzsKICAgICAgICAgIHZhciBtYXJnaW4gPSAxMDsKICAgICAgICAgIHZhciBzbGljZWREYXRhID0gZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiAoX2RhdGFfcmVuZGVyRGF0YV8gPSBkYXRhLnJlbmRlckRhdGFbIiIuY29uY2F0KGV2ZW50SWQpXSkgPT09IG51bGwgfHwgX2RhdGFfcmVuZGVyRGF0YV8gPT09IHZvaWQgMCA/IHZvaWQgMCA6IF9kYXRhX3JlbmRlckRhdGFfLnNsaWNlKDAsIGRhdGEuY3ljbGVMZW5ndGgpOwogICAgICAgICAgdmFyIHhTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKFsKICAgICAgICAgICAgICAwLAogICAgICAgICAgICAgIHNsaWNlZERhdGEgPT09IG51bGwgfHwgc2xpY2VkRGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogc2xpY2VkRGF0YS5sZW5ndGgKICAgICAgICAgIF0pLnJhbmdlKFsKICAgICAgICAgICAgICBtYXJnaW4sCiAgICAgICAgICAgICAgZGF0YS53aWR0aCAtIG1hcmdpbgogICAgICAgICAgXSk7CiAgICAgICAgICAvLyAubmljZSgpOwogICAgICAgICAgdmFyIHlTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS55U2NhbGVEb21haW4pLnJhbmdlKFsKICAgICAgICAgICAgICBkYXRhLmhlaWdodCAtIG1hcmdpbiwKICAgICAgICAgICAgICBtYXJnaW4KICAgICAgICAgIF0pOwogICAgICAgICAgLy8gLm5pY2UoKTsKICAgICAgICAgIGlmIChzbGljZWREYXRhICE9IG51bGwpIHsKICAgICAgICAgICAgICAvLyBmaWxsOiAnbm9uZScsCiAgICAgICAgICAgICAgLy8gJ3NoYXBlLXJlbmRlcmluZyc6ICdjcmlzcEVkZ2VzJywKICAgICAgICAgICAgICB2YXIgY3R4ID0gY2FudmFzID09PSBudWxsIHx8IGNhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogY2FudmFzLmdldENvbnRleHQoJzJkJyk7CiAgICAgICAgICAgICAgdmFyIGxpbmUgPSBkMy5saW5lKGZ1bmN0aW9uKF8sIGkpIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIHhTY2FsZShpKTsKICAgICAgICAgICAgICB9LCB5U2NhbGUpLmNvbnRleHQoY3R4KTsKICAgICAgICAgICAgICB2YXIgbGluZURhdGEgPSBzbGljZWREYXRhOwogICAgICAgICAgICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KTsKICAgICAgICAgICAgICBjdHguc2F2ZSgpOwogICAgICAgICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICAgICAgICBsaW5lLmN1cnZlKGQzLmN1cnZlQmFzaXMpKGxpbmVEYXRhKTsKICAgICAgICAgICAgICBjdHgubGluZVdpZHRoID0gMjsKICAgICAgICAgICAgICBjdHguc3Ryb2tlU3R5bGUgPSAnIzZGRkZGNSc7CiAgICAgICAgICAgICAgY3R4LnNoYWRvd0NvbG9yID0gJ3JnYmEoMTExLCAyNTUsIDI0NSwgLjcpJzsKICAgICAgICAgICAgICBjdHguaW1hZ2VTbW9vdGhpbmdFbmFibGVkID0gZmFsc2U7CiAgICAgICAgICAgICAgY3R4LnNoYWRvd0JsdXIgPSA1OwogICAgICAgICAgICAgIGN0eC5zaGFkb3dPZmZzZXRYID0gMDsKICAgICAgICAgICAgICBjdHguc2hhZG93T2Zmc2V0WSA9IDA7CiAgICAgICAgICAgICAgY3R4LnN0cm9rZSgpOwogICAgICAgICAgICAgIGNhbnZhcyA9PT0gbnVsbCB8fCBjYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpLmRyYXdJbWFnZShjYW52YXMsIDAsIDApOwogICAgICAgICAgICAgIHZhciBiaXRtYXAgPSBjYW52YXMgPT09IG51bGwgfHwgY2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiBjYW52YXMudHJhbnNmZXJUb0ltYWdlQml0bWFwKCk7CiAgICAgICAgICAgICAgc2VsZi5wb3N0TWVzc2FnZShiaXRtYXApOwogICAgICAgICAgfQogICAgICB9CiAgfTsKCn0pKCk7Ci8vIyBzb3VyY2VNYXBwaW5nVVJMPXdvcmtlci5qcy5tYXAKCg==', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7In0=');
 /* eslint-enable */
 
-function _define_property$9(obj, key, value) {
+function _define_property$8(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -4858,7 +4858,7 @@ function _define_property$9(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$9(target) {
+function _object_spread$8(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -4868,7 +4868,7 @@ function _object_spread$9(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$9(target, key, source[key]);
+            _define_property$8(target, key, source[key]);
         });
     }
     return target;
@@ -4886,7 +4886,7 @@ function Oscilloscope(param) {
             canvas.width = width;
             canvas.height = height;
         }
-        var worker = new WorkerFactory$3();
+        var worker = new WorkerFactory$2();
         var offscreenCanvas = canvas.transferControlToOffscreen();
         worker.postMessage({
             type: 'init',
@@ -4915,7 +4915,7 @@ function Oscilloscope(param) {
         };
     };
     return /*#__PURE__*/ React__default.createElement("div", {
-        style: _object_spread$9({
+        style: _object_spread$8({
             height: height,
             width: width,
             flex: "0 0 ".concat(width)
@@ -4969,7 +4969,7 @@ styleInject(css_248z$4);
 var css_248z$3 = ".PresetManagerContainer {\n  width: 100%;\n  height: 100%;\n  background-color: var(--bg-lv1);\n  color: var(--color-text);\n}\n\n.PresetManagerButton {\n  width: 100%;\n  height: 100%;\n  max-width: 300px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n  cursor: pointer;\n  text-align: center;\n  font-family: var(--font-leagueSpartan);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 225px;\n  display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25;\n  /* position: relative; */\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n  }\n  /* &.isDirty {\n    &::after {\n      content: '*';\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n    }\n  } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n  content: '*';\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  right: -0.75rem;\n  top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n  position: relative;\n  width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n  background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n  position: absolute;\n  font-family: var(--font-leagueSpartan);\n  right: 0px;\n  left: 0px;\n  width: 100%;\n  max-width: 400px !important;\n  color: var(--color-text);\n  background: var(--bg-lv5);\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n  outline: none;\n}\n\n.PresetManagerListItem {\n  cursor: pointer;\n  background: var(--color-gray-800);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.PresetManagerListItem:hover,\n.PresetManagerListItem.isSelected {\n  background: var(--bg-selected);\n}\n\n.PresetManagerListItemText {\n  display: inline-block;\n  vertical-align: middle;\n  height: 1.5rem;\n  line-height: 1.75;\n}\n";
 styleInject(css_248z$3);
 
-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;
@@ -5038,15 +5038,15 @@ function _object_destructuring_empty(o) {
     return o;
 }
 function _sliced_to_array$9(arr, i) {
-    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$9();
+    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);
 }
 function _ts_generator$3(thisArg, body) {
     var f, y, t, _ = {
@@ -5429,7 +5429,7 @@ function PresetManager(param) {
     }))))));
 }
 
-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;
@@ -5466,7 +5466,7 @@ function _async_to_generator$2(fn) {
         });
     };
 }
-function _define_property$8(obj, key, value) {
+function _define_property$7(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -5506,7 +5506,7 @@ function _iterable_to_array_limit$8(arr, i) {
 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$8(target) {
+function _object_spread$7(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -5516,21 +5516,21 @@ function _object_spread$8(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$8(target, key, source[key]);
+            _define_property$7(target, key, source[key]);
         });
     }
     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$9(arr, i) || _non_iterable_rest$8();
+    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);
 }
 function _ts_generator$2(thisArg, body) {
     var f, y, t, _ = {
@@ -5883,7 +5883,7 @@ function ModuleHeader(param) {
         ],
         className: classnames('ModuleHeader', className),
         height: "72px",
-        style: _object_spread$8({}, style)
+        style: _object_spread$7({}, style)
     }, /*#__PURE__*/ React__default.createElement(Box, {
         style: {
             width: '1000px'
@@ -5969,7 +5969,7 @@ var targetColors = [
 var ComboboxCellWidth = '217px';
 var DeleteButtonCellWidth = '50px';
 
-function _array_like_to_array$8(arr, len) {
+function _array_like_to_array$7(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
@@ -5977,7 +5977,7 @@ function _array_like_to_array$8(arr, len) {
 function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$7(obj, key, value) {
+function _define_property$6(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -6017,7 +6017,7 @@ function _iterable_to_array_limit$7(arr, i) {
 function _non_iterable_rest$7() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$7(target) {
+function _object_spread$6(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -6027,21 +6027,21 @@ function _object_spread$7(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$7(target, key, source[key]);
+            _define_property$6(target, key, source[key]);
         });
     }
     return target;
 }
 function _sliced_to_array$7(arr, i) {
-    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$7();
+    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
 }
-function _unsupported_iterable_to_array$8(o, minLen) {
+function _unsupported_iterable_to_array$7(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
 function ModMatrixComboboxCell(param) {
     var rowId = param.rowId, key = param.key, color = param.color, style = param.style;
@@ -6076,7 +6076,7 @@ function ModMatrixComboboxCell(param) {
         className: "ModMatrixCell ModMatrixComboboxCell",
         justifyContent: Box.justifyContent.flexEnd,
         flexDirection: Box.flexDirection.column,
-        style: _object_spread$7({
+        style: _object_spread$6({
             color: color
         }, style),
         padding: [
@@ -6123,7 +6123,7 @@ function ModMatrixComboboxCell(param) {
     }))));
 }
 
-function _define_property$6(obj, key, value) {
+function _define_property$5(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -6136,7 +6136,7 @@ function _define_property$6(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$6(target) {
+function _object_spread$5(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -6146,7 +6146,7 @@ function _object_spread$6(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$6(target, key, source[key]);
+            _define_property$5(target, key, source[key]);
         });
     }
     return target;
@@ -6168,7 +6168,7 @@ function ModMatrixToggleCell(param) {
         justifyContent: Box.justifyContent.flexEnd,
         alignItems: Box.alignItems.flexStart,
         flexDirection: Box.flexDirection.column,
-        style: _object_spread$6({
+        style: _object_spread$5({
             color: color,
             pointerEvents: 'all'
         }, style),
@@ -6192,7 +6192,7 @@ function ModMatrixToggleCell(param) {
     }, Object.keys(Polarity)[index] || '0')));
 }
 
-function _define_property$5(obj, key, value) {
+function _define_property$4(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -6205,7 +6205,7 @@ function _define_property$5(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$5(target) {
+function _object_spread$4(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -6215,7 +6215,7 @@ function _object_spread$5(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$5(target, key, source[key]);
+            _define_property$4(target, key, source[key]);
         });
     }
     return target;
@@ -6232,7 +6232,7 @@ function SingleBarViz(param) {
         }
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: "SingleBarViz",
-        style: _object_spread$5({
+        style: _object_spread$4({
             position: 'absolute',
             background: sliderColor
         }, getBarTransformStyles({
@@ -6245,7 +6245,7 @@ function SingleBarViz(param) {
 }
 SingleBarViz.polarity = Polarity;
 
-function _array_like_to_array$7(arr, len) {
+function _array_like_to_array$6(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
@@ -6253,7 +6253,7 @@ function _array_like_to_array$7(arr, len) {
 function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$4(obj, key, value) {
+function _define_property$3(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -6293,7 +6293,7 @@ function _iterable_to_array_limit$6(arr, i) {
 function _non_iterable_rest$6() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$4(target) {
+function _object_spread$3(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -6303,7 +6303,7 @@ function _object_spread$4(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$4(target, key, source[key]);
+            _define_property$3(target, key, source[key]);
         });
     }
     return target;
@@ -6328,15 +6328,15 @@ function _object_spread_props(target, source) {
     return target;
 }
 function _sliced_to_array$6(arr, i) {
-    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$6();
+    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
 }
-function _unsupported_iterable_to_array$7(o, minLen) {
+function _unsupported_iterable_to_array$6(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
 }
 function ModMatrixCell(param) {
     var modifier = param.modifier, rowId = param.rowId, isDisabled = param.isDisabled, color = param.color, style = param.style;
@@ -6360,12 +6360,12 @@ function ModMatrixCell(param) {
         onChangeActiveState: function(isActive) {
             return setIsActive(isActive);
         }
-    }, /*#__PURE__*/ React__default.createElement(Box, _object_spread_props(_object_spread$4({
+    }, /*#__PURE__*/ React__default.createElement(Box, _object_spread_props(_object_spread$3({
         className: "ModMatrixCell ".concat(isDisabled ? 'isDisabled' : ''),
         justifyContent: Box.justifyContent.flexEnd,
         alignItems: Box.alignItems.flexStart,
         flexDirection: Box.flexDirection.column,
-        style: _object_spread$4({
+        style: _object_spread$3({
             color: color,
             pointerEvents: 'all'
         }, style),
@@ -6414,7 +6414,7 @@ function ModMatrixCell(param) {
         //   isActive ? 'var(--color-gray-500)' : 'var(--color-gray-600)'
         // }
         sliderColor: color,
-        style: _object_spread$4({
+        style: _object_spread$3({
             alignSelf: 'flex-end',
             pointerEvents: 'none'
         }, getBarTransformStyles({
@@ -6485,7 +6485,7 @@ function ModMatrixRow(param) {
     })));
 }
 
-function _array_like_to_array$6(arr, len) {
+function _array_like_to_array$5(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;
@@ -6493,8 +6493,8 @@ function _array_like_to_array$6(arr, len) {
 function _array_with_holes$5(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _array_without_holes$1(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$6(arr);
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$5(arr);
 }
 function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -6525,7 +6525,7 @@ function _async_to_generator$1(fn) {
         });
     };
 }
-function _define_property$3(obj, key, value) {
+function _define_property$2(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -6538,7 +6538,7 @@ function _define_property$3(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array$1(iter) {
+function _iterable_to_array(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 function _iterable_to_array_limit$5(arr, i) {
@@ -6568,10 +6568,10 @@ function _iterable_to_array_limit$5(arr, i) {
 function _non_iterable_rest$5() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _non_iterable_spread$1() {
+function _non_iterable_spread() {
     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 _object_spread$3(target) {
+function _object_spread$2(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -6581,24 +6581,24 @@ function _object_spread$3(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$3(target, key, source[key]);
+            _define_property$2(target, key, source[key]);
         });
     }
     return target;
 }
 function _sliced_to_array$5(arr, i) {
-    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$5();
+    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
 }
-function _to_consumable_array$1(arr) {
-    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$6(arr) || _non_iterable_spread$1();
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$5(arr) || _non_iterable_spread();
 }
-function _unsupported_iterable_to_array$6(o, minLen) {
+function _unsupported_iterable_to_array$5(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
 function _ts_generator$1(thisArg, body) {
     var f, y, t, _ = {
@@ -6729,7 +6729,7 @@ function ModMatrix(param) {
             return modSlotTargets[item] <= 0;
         });
         if (unassignedModSlots.length > 0 && modSlotPreview.slotId) {
-            setDisplayedModSlots(_to_consumable_array$1(displayedSlots).concat([
+            setDisplayedModSlots(_to_consumable_array(displayedSlots).concat([
                 modSlotPreview.slotId
             ]));
         } else {
@@ -6804,7 +6804,7 @@ function ModMatrix(param) {
     ]);
     var headers = [
         'Target'
-    ].concat(_to_consumable_array$1(modSlotParamLabels), [
+    ].concat(_to_consumable_array(modSlotParamLabels), [
         ''
     ]);
     return /*#__PURE__*/ React__default.createElement(Box, {
@@ -6814,7 +6814,7 @@ function ModMatrix(param) {
             Box.padding.large
         ],
         className: "ModMatrix ".concat(className ? className : ''),
-        style: _object_spread$3({
+        style: _object_spread$2({
             backgroundColor: 'var(--bg-lvl2)'
         }, style),
         flexDirection: Box.flexDirection.column
@@ -6848,362 +6848,6 @@ function ModMatrix(param) {
     }) : null));
 }
 
-var WorkerClass$2 = null;
-
-try {
-    var WorkerThreads$2 =
-        typeof module !== 'undefined' && typeof module.require === 'function' && module.require('worker_threads') ||
-        typeof __non_webpack_require__ === 'function' && __non_webpack_require__('worker_threads') ||
-        typeof require === 'function' && require('worker_threads');
-    WorkerClass$2 = WorkerThreads$2.Worker;
-} catch(e) {} // eslint-disable-line
-
-function decodeBase64$5(base64, enableUnicode) {
-    return Buffer.from(base64, 'base64').toString('utf8');
-}
-
-function createBase64WorkerFactory$8(base64, sourcemapArg, enableUnicodeArg) {
-    var sourcemap = sourcemapArg;
-    var source = decodeBase64$5(base64);
-    var start = source.indexOf('\n', 10) + 1;
-    var body = source.substring(start) + ('\/\/# sourceMappingURL=' + sourcemap );
-    return function WorkerFactory(options) {
-        return new WorkerClass$2(body, Object.assign({}, options, { eval: true }));
-    };
-}
-
-function decodeBase64$4(base64, enableUnicode) {
-    var binaryString = atob(base64);
-    return binaryString;
-}
-
-function createURL$2(base64, sourcemapArg, enableUnicodeArg) {
-    var sourcemap = sourcemapArg;
-    var source = decodeBase64$4(base64);
-    var start = source.indexOf('\n', 10) + 1;
-    var body = source.substring(start) + ('\/\/# sourceMappingURL=' + sourcemap );
-    var blob = new Blob([body], { type: 'application/javascript' });
-    return URL.createObjectURL(blob);
-}
-
-function createBase64WorkerFactory$7(base64, sourcemapArg, enableUnicodeArg) {
-    var url;
-    return function WorkerFactory(options) {
-        url = url || createURL$2(base64, sourcemapArg);
-        return new Worker(url, options);
-    };
-}
-
-var kIsNodeJS$2 = Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) === '[object process]';
-
-function isNodeJS$2() {
-    return kIsNodeJS$2;
-}
-
-function createBase64WorkerFactory$6(base64, sourcemapArg, enableUnicodeArg) {
-    if (isNodeJS$2()) {
-        return createBase64WorkerFactory$8(base64, sourcemapArg);
-    }
-    return createBase64WorkerFactory$7(base64, sourcemapArg);
-}
-
-var WorkerFactory$2 = /*#__PURE__*/createBase64WorkerFactory$6('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICB2YXIgdnVNZXRlckhvcml6b250YWxDYW52YXM7CiAgdmFyIGludGVuc2l0eVZhbHVlcyA9IFtdOwogIHZhciByYW1wUG9zaXRpb247CiAgdmFyIGxhc3RTZWxlY3RlZEluZGV4OwogIHZhciBhbmltYXRpb25EaXJlY3Rpb247CiAgc2VsZi5vbm1lc3NhZ2UgPSBmdW5jdGlvbihldmVudCkgewogICAgICB2YXIgZGF0YSA9IGV2ZW50LmRhdGE7CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICdpbml0JykgewogICAgICAgICAgdnVNZXRlckhvcml6b250YWxDYW52YXMgPSBkYXRhID09PSBudWxsIHx8IGRhdGEgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGRhdGEuY2FudmFzOwogICAgICB9CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICd1cGRhdGVJbnRlbnNpdHlWYWx1ZXMnKSB7CiAgICAgICAgICBpbnRlbnNpdHlWYWx1ZXMgPSBkYXRhLmludGVuc2l0eVZhbHVlcy5tYXAoZnVuY3Rpb24oaXRlbSkgewogICAgICAgICAgICAgIHZhciBvdXRwdXQ7CiAgICAgICAgICAgICAgaWYgKGl0ZW0ueSA+PSAxKSB7CiAgICAgICAgICAgICAgICAgIG91dHB1dCA9IDAuOTk5OwogICAgICAgICAgICAgIH0gZWxzZSBpZiAoaXRlbS55IDwgMC4wMikgewogICAgICAgICAgICAgICAgICBvdXRwdXQgPSAwOwogICAgICAgICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgICAgICAgIG91dHB1dCA9IGl0ZW0ueTsKICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgcmV0dXJuIG91dHB1dDsKICAgICAgICAgIH0pOwogICAgICB9CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICd1cGRhdGUnKSB7CiAgICAgICAgICByYW1wUG9zaXRpb24gPSBkYXRhLnJhbXBQb3NpdGlvbjsKICAgICAgICAgIHZhciBiYXNlU2VnbWVudFdpZHRoID0gNTsKICAgICAgICAgIHZhciBzZWdtZW50TWFyZ2luID0gMjsKICAgICAgICAgIHZhciBjb2xvcnMgPSBbCiAgICAgICAgICAgICAgJyNBQzQ3RDEnLAogICAgICAgICAgICAgICcjODkzQkE3JywKICAgICAgICAgICAgICAnIzZDMzE4NCcsCiAgICAgICAgICAgICAgJyMzNTFFNDEnCiAgICAgICAgICBdOwogICAgICAgICAgdmFyIGxpZ2h0ZXN0Q29sb3IgPSBjb2xvcnNbMF07CiAgICAgICAgICB2YXIgZGFya2VzdENvbG9yID0gY29sb3JzW2NvbG9ycy5sZW5ndGggLSAxXTsKICAgICAgICAgIC8vIGNvbnN0IGh6RGFya0NvbG9yID0KICAgICAgICAgIC8vICAgZGF0YS5oelZhbHVlID4gMjAKICAgICAgICAgIC8vICAgICA/IGNvbG9yc1swXQogICAgICAgICAgLy8gICAgIDogZGF0YS5hbXBWYWx1ZSA+IDE1CiAgICAgICAgICAvLyAgICAgICA/IGNvbG9yc1sxXQogICAgICAgICAgLy8gICAgICAgOiBkYXRhLmFtcFZhbHVlID4gMTAKICAgICAgICAgIC8vICAgICAgICAgPyBjb2xvcnNbMl0KICAgICAgICAgIC8vICAgICAgICAgOiBjb2xvcnNbM107CiAgICAgICAgICB2YXIgbnVtU2VnbWVudHMgPSBNYXRoLmZsb29yKGRhdGEud2lkdGggLyAoYmFzZVNlZ21lbnRXaWR0aCArIHNlZ21lbnRNYXJnaW4pKTsKICAgICAgICAgIHZhciBzZWdtZW50cyA9IEFycmF5LmZyb20oewogICAgICAgICAgICAgIGxlbmd0aDogbnVtU2VnbWVudHMKICAgICAgICAgIH0sIGZ1bmN0aW9uKF8sIGkpIHsKICAgICAgICAgICAgICByZXR1cm4gIiIuY29uY2F0KGkpOwogICAgICAgICAgfSk7CiAgICAgICAgICB2YXIgaW50ZW5zaXR5SW5kZXggPSBNYXRoLmZsb29yKGludGVuc2l0eVZhbHVlcy5sZW5ndGggKiByYW1wUG9zaXRpb24pOwogICAgICAgICAgdmFyIHhTY2FsZSA9IGQzLnNjYWxlQmFuZCgpLmRvbWFpbihzZWdtZW50cykucmFuZ2UoWwogICAgICAgICAgICAgIDAsCiAgICAgICAgICAgICAgZGF0YS53aWR0aAogICAgICAgICAgXSkucGFkZGluZygwLjIpOwogICAgICAgICAgdmFyIHJhbmdlID0gbnVtU2VnbWVudHMgKiBkYXRhLmFtcFZhbHVlOwogICAgICAgICAgdmFyIG9mZnNldCA9IChudW1TZWdtZW50cyAtIHJhbmdlKSAvIDI7CiAgICAgICAgICB2YXIgc2VsZWN0ZWRJbmRleCA9IE1hdGguZmxvb3IobnVtU2VnbWVudHMgKiBpbnRlbnNpdHlWYWx1ZXNbaW50ZW5zaXR5SW5kZXhdICsgb2Zmc2V0KTsKICAgICAgICAgIGlmIChkYXRhICE9IG51bGwpIHsKICAgICAgICAgICAgICB2YXIgY3R4ID0gdnVNZXRlckhvcml6b250YWxDYW52YXMgPT09IG51bGwgfHwgdnVNZXRlckhvcml6b250YWxDYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IHZ1TWV0ZXJIb3Jpem9udGFsQ2FudmFzLmdldENvbnRleHQoJzJkJyk7CiAgICAgICAgICAgICAgY3R4LmNsZWFyUmVjdCgwLCAwLCB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gbnVsbCB8fCB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdnVNZXRlckhvcml6b250YWxDYW52YXMud2lkdGgsIHZ1TWV0ZXJIb3Jpem9udGFsQ2FudmFzLmhlaWdodCk7CiAgICAgICAgICAgICAgdmFyIGhlaWdodCA9IHZ1TWV0ZXJIb3Jpem9udGFsQ2FudmFzID09PSBudWxsIHx8IHZ1TWV0ZXJIb3Jpem9udGFsQ2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiB2dU1ldGVySG9yaXpvbnRhbENhbnZhcy5oZWlnaHQ7CiAgICAgICAgICAgICAgdmFyIGNvbG9yR3JhZGllbnRTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKGFuaW1hdGlvbkRpcmVjdGlvbiA9PT0gIkZhbGxpbmciID8gWwogICAgICAgICAgICAgICAgICBzZWxlY3RlZEluZGV4LAogICAgICAgICAgICAgICAgICBudW1TZWdtZW50cyAtIDEKICAgICAgICAgICAgICBdIDogWwogICAgICAgICAgICAgICAgICAwLAogICAgICAgICAgICAgICAgICBzZWxlY3RlZEluZGV4CiAgICAgICAgICAgICAgXSkucmFuZ2UoLy9AdHMtZXhwZWN0LWVycm9yCiAgICAgICAgICAgICAgYW5pbWF0aW9uRGlyZWN0aW9uID09PSAiRmFsbGluZyIgPyBbCiAgICAgICAgICAgICAgICAgIGxpZ2h0ZXN0Q29sb3IsCiAgICAgICAgICAgICAgICAgIGRhcmtlc3RDb2xvcgogICAgICAgICAgICAgIF0gOiBbCiAgICAgICAgICAgICAgICAgIGRhcmtlc3RDb2xvciwKICAgICAgICAgICAgICAgICAgbGlnaHRlc3RDb2xvcgogICAgICAgICAgICAgIF0pLy9AdHMtZXhwZWN0LWVycm9yCiAgICAgICAgICAgICAgLmludGVycG9sYXRlKGQzLmludGVycG9sYXRlSGNsKTsKICAgICAgICAgICAgICB2YXIgY29sb3JTY2FsZSA9IGQzLnNjYWxlT3JkaW5hbCgpLmRvbWFpbih4U2NhbGUuZG9tYWluKCkpLnJhbmdlKHNlZ21lbnRzLm1hcChmdW5jdGlvbihfLCBpKSB7CiAgICAgICAgICAgICAgICAgIGlmIChhbmltYXRpb25EaXJlY3Rpb24gPT09ICJGYWxsaW5nIiAmJiBpID4gc2VsZWN0ZWRJbmRleCAmJiBpIDwgcmFuZ2UgKyBvZmZzZXQgfHwgYW5pbWF0aW9uRGlyZWN0aW9uID09PSAiUmlzaW5nIiAmJiBpIDwgc2VsZWN0ZWRJbmRleCAmJiBpID4gb2Zmc2V0KSB7CiAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gY29sb3JHcmFkaWVudFNjYWxlKGkpOwogICAgICAgICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIGRhcmtlc3RDb2xvcjsKICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgIH0pKTsKICAgICAgICAgICAgICBzZWdtZW50cy5mb3JFYWNoKGZ1bmN0aW9uKF8sIGkpIHsKICAgICAgICAgICAgICAgICAgdmFyIHNlZ21lbnRQb3MgPSB4U2NhbGUoIiIuY29uY2F0KGkpKSB8fCAwOwogICAgICAgICAgICAgICAgICB2YXIgaXNJbmRleCA9IHNlbGVjdGVkSW5kZXggPT09IGk7CiAgICAgICAgICAgICAgICAgIGlmIChzZWxlY3RlZEluZGV4ID4gbGFzdFNlbGVjdGVkSW5kZXgpIHsKICAgICAgICAgICAgICAgICAgICAgIGFuaW1hdGlvbkRpcmVjdGlvbiA9ICJSaXNpbmciOwogICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgIGlmIChzZWxlY3RlZEluZGV4IDwgbGFzdFNlbGVjdGVkSW5kZXgpIHsKICAgICAgICAgICAgICAgICAgICAgIGFuaW1hdGlvbkRpcmVjdGlvbiA9ICJGYWxsaW5nIjsKICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICBpZiAoaXNJbmRleCkgewogICAgICAgICAgICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9IGxpZ2h0ZXN0Q29sb3I7CiAgICAgICAgICAgICAgICAgIH0gZWxzZSBpZiAoaSA+IG9mZnNldCAmJiBpIDwgcmFuZ2UgKyBvZmZzZXQgJiYgZGF0YS5oelZhbHVlID4gMSkgewogICAgICAgICAgICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9ICIiLmNvbmNhdChjb2xvclNjYWxlKCIiLmNvbmNhdChpKSkpOwogICAgICAgICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9IGRhcmtlc3RDb2xvcjsKICAgICAgICAgICAgICAgICAgfQogICAgICAgICAgICAgICAgICBjdHguZmlsbFJlY3Qoc2VnbWVudFBvcywgMCwgeFNjYWxlLmJhbmR3aWR0aCgpLCBoZWlnaHQpOwogICAgICAgICAgICAgICAgICBsYXN0U2VsZWN0ZWRJbmRleCA9IHNlbGVjdGVkSW5kZXg7CiAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgc2VnbWVudHMuZm9yRWFjaChmdW5jdGlvbihfLCBpKSB7CiAgICAgICAgICAgICAgICAgIHZhciBzZWdtZW50UG9zID0geFNjYWxlKCIiLmNvbmNhdChpKSkgfHwgMDsKICAgICAgICAgICAgICAgICAgaWYgKGkgPiBvZmZzZXQgJiYgaSA8IHJhbmdlICsgb2Zmc2V0ICYmIGRhdGEuaHpWYWx1ZSA+IDEgJiYgaSAhPT0gc2VsZWN0ZWRJbmRleCkgewogICAgICAgICAgICAgICAgICAgICAgY3R4LmZpbGxTdHlsZSA9ICJyZ2JhKDE3MiwgNzEsIDIwOSwgIi5jb25jYXQoZGF0YS5oelZhbHVlTm9ybWFsaXNlZCwgIikiKTsKICAgICAgICAgICAgICAgICAgfSBlbHNlIHsKICAgICAgICAgICAgICAgICAgICAgIGN0eC5maWxsU3R5bGUgPSAicmdiYSgxNzIsIDcxLCAyMDksIDAiOwogICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICAgIGN0eC5maWxsUmVjdChzZWdtZW50UG9zLCAwLCB4U2NhbGUuYmFuZHdpZHRoKCksIGhlaWdodCk7CiAgICAgICAgICAgICAgICAgIGxhc3RTZWxlY3RlZEluZGV4ID0gc2VsZWN0ZWRJbmRleDsKICAgICAgICAgICAgICB9KTsKICAgICAgICAgICAgICB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gbnVsbCB8fCB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdnVNZXRlckhvcml6b250YWxDYW52YXMuZ2V0Q29udGV4dCgnMmQnKS5kcmF3SW1hZ2UodnVNZXRlckhvcml6b250YWxDYW52YXMsIDAsIDApOwogICAgICAgICAgICAgIHZhciBiaXRtYXAgPSB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gbnVsbCB8fCB2dU1ldGVySG9yaXpvbnRhbENhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdnVNZXRlckhvcml6b250YWxDYW52YXMudHJhbnNmZXJUb0ltYWdlQml0bWFwKCk7CiAgICAgICAgICAgICAgc2VsZi5wb3N0TWVzc2FnZShiaXRtYXApOwogICAgICAgICAgfQogICAgICB9CiAgfTsKCn0pKCk7Ci8vIyBzb3VyY2VNYXBwaW5nVVJMPXdvcmtlci5qcy5tYXAKCg==', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsifQ==');
-/* eslint-enable */
-
-function _define_property$2(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$2(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$2(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function LFOIntensityMeter(param) {
-    var _param_width = param.width, width = _param_width === void 0 ? 150 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 8 : _param_height, className = param.className, intensityValues = param.intensityValues; param.waveType; var style = param.style, id = param.id;
-    var workerRef = useRef(null);
-    // const [ampValue, setAmpValue] = useState(0);
-    // const ampValue = useRef(null);
-    var yScaleDomain = [
-        0,
-        1
-    ];
-    useEffect(function() {
-        var _workerRef_current;
-        workerRef === null || workerRef === void 0 ? void 0 : (_workerRef_current = workerRef.current) === null || _workerRef_current === void 0 ? void 0 : _workerRef_current.postMessage({
-            type: 'updateIntensityValues',
-            intensityValues: intensityValues,
-            height: height * 0.75,
-            width: width
-        });
-    //   renderFuction();
-    }, [
-        intensityValues
-    ]);
-    useEffect(function() {
-        // const canvas = document.getElementById(`${id}`);
-        var canvas = document.createElement('canvas');
-        if (canvas) {
-            canvas.width = width;
-            canvas.height = height;
-        }
-        var worker = new WorkerFactory$2();
-        var offscreenCanvas = canvas.transferControlToOffscreen();
-        worker.postMessage({
-            type: 'init',
-            canvas: offscreenCanvas
-        }, [
-            offscreenCanvas
-        ]);
-        workerRef.current = worker;
-    }, [
-        window
-    ]);
-    // useEffect(() => {
-    //   workerRef?.current?.postMessage({
-    //     type: 'updateAmpValue',
-    //     ampValue: ampValue,
-    //   });
-    //   renderFuction();
-    // }, [ampValue]);
-    var renderFuction = function(data) {
-        var ampState = Juce.getSliderState("LFO".concat(id, "_Amp"));
-        var waveState = Juce.getComboBoxState("LFO".concat(id, "_Wave"));
-        var hzState = Juce.getSliderState("LFO".concat(id, "_Hz"));
-        workerRef === null || workerRef === void 0 ? void 0 : workerRef.current.postMessage({
-            type: 'update',
-            rampPosition: data,
-            waveType: waveState === null || waveState === void 0 ? void 0 : waveState.getChoiceIndex(),
-            ampValue: ampState === null || ampState === void 0 ? void 0 : ampState.scaledValue,
-            hzValue: hzState === null || hzState === void 0 ? void 0 : hzState.scaledValue,
-            hzValueNormalised: hzState === null || hzState === void 0 ? void 0 : hzState.getNormalisedValue(),
-            intensityValues: intensityValues,
-            height: height,
-            width: width,
-            yScaleDomain: yScaleDomain
-        });
-        workerRef.current.onmessage = function(e) {
-            var _document_getElementById, _document;
-            var imageBitmap = e === null || e === void 0 ? void 0 : e.data;
-            var canvas = (_document = document) === null || _document === void 0 ? void 0 : (_document_getElementById = _document.getElementById("LFO".concat(id, "_Ramp"))) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.getContext('bitmaprenderer');
-            canvas === null || canvas === void 0 ? void 0 : canvas.transferFromImageBitmap(imageBitmap);
-        };
-    };
-    return /*#__PURE__*/ React__default.createElement("div", {
-        style: _object_spread$2({
-            height: height,
-            width: width,
-            flex: "0 0 ".concat(width)
-        }, style),
-        className: classnames('LFOIntensityMeter', className)
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        style: {
-            position: 'relative',
-            width: width,
-            height: height
-        }
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        style: {
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            right: 0,
-            left: 0,
-            height: height,
-            width: width
-        }
-    }, /*#__PURE__*/ React__default.createElement(AnimationDataWrapper, {
-        renderFunction: renderFuction,
-        eventId: "LFO".concat(id, "_Ramp"),
-        dataType: AnimationDataWrapper.dataTypes.number
-    }, /*#__PURE__*/ React__default.createElement(Chart, {
-        chartType: Chart.chartType.bar,
-        renderAs: Chart.renderAs.canvas,
-        width: width,
-        height: height,
-        yScaleDomain: yScaleDomain,
-        id: "LFO".concat(id, "_Ramp")
-    })))));
-}
-
-var WaveTypes = /*#__PURE__*/ function(WaveTypes) {
-    WaveTypes["Sine"] = "Sine";
-    WaveTypes["Triangle"] = "Triangle";
-    WaveTypes["Ramp"] = "Ramp";
-    WaveTypes["Saw"] = "Saw";
-    // ExpUp = 'Exp Up',
-    // ExpDown = 'Exp Down',
-    WaveTypes["Square"] = "Square";
-    return WaveTypes;
-}({});
-
-function _array_like_to_array$5(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(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$5(arr);
-}
-function _iterable_to_array(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _non_iterable_spread() {
-    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(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$5(arr) || _non_iterable_spread();
-}
-function _unsupported_iterable_to_array$5(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$5(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$5(o, minLen);
-}
-// const randomNumbers = [0.3, 0.7, 0.5, 0.2, 0.6, 0.3, 0.2, 0.3, 0.4, 0.4];
-var minCycleLength = 93;
-// Returns a coordinate array for one cycle
-function generateCycle(param) {
-    var waveType = param.waveType, _param_ampValue = param.ampValue, ampValue = _param_ampValue === void 0 ? 1 : _param_ampValue, _param_cycleLength = param.cycleLength, cycleLength = _param_cycleLength === void 0 ? minCycleLength : _param_cycleLength, _param_pulseWidth = param.pulseWidth, pulseWidth = _param_pulseWidth === void 0 ? 1 : _param_pulseWidth;
-    var cycle = [];
-    //Generate the coordinate array for the cycle
-    for(var i = 1; i < cycleLength; i++){
-        var getAdjustedVal = function() {
-            var startingValue = i + cycleLength;
-            var returnValue;
-            if (startingValue > cycleLength) {
-                returnValue = startingValue % cycleLength;
-            } else if (startingValue < 0) {
-                returnValue = cycleLength - Math.abs(startingValue);
-            } else {
-                returnValue = startingValue;
-            }
-            var pulseWidthParam = 1 - pulseWidth;
-            returnValue = returnValue * (1 + 4 * pulseWidthParam);
-            if (returnValue > cycleLength) {
-                returnValue = 0;
-            }
-            return scaledToNormalised({
-                scaledValue: returnValue,
-                start: 0,
-                end: cycleLength
-            });
-        };
-        var adjustedVal = getAdjustedVal();
-        switch(waveType){
-            case WaveTypes.Sine:
-                var angle = adjustedVal * (2 * Math.PI);
-                //prettier-ignore
-                var sineShape = angle > 0 ? Math.sin(angle) / 2 + 0.5 : 0;
-                cycle.push({
-                    x: adjustedVal,
-                    //prettier-ignore
-                    y: sineShape
-                });
-                break;
-            case WaveTypes.Ramp:
-                cycle.push({
-                    y: adjustedVal
-                });
-                break;
-            case WaveTypes.Saw:
-                cycle.push({
-                    y: adjustedVal > 0 ? 1 - adjustedVal : 0
-                });
-                break;
-            case WaveTypes.Square:
-                cycle.push({
-                    y: adjustedVal > 0.5 ? 1 : 0
-                });
-                break;
-            case WaveTypes.Triangle:
-                cycle.push({
-                    y: // prettier-ignore
-                    adjustedVal * 2 > 1 ? 2 - adjustedVal * 2 : adjustedVal * 2
-                });
-                break;
-        }
-    }
-    if (waveType === WaveTypes.Sine && pulseWidth < 1) {
-        var smallestValIndex = cycle === null || cycle === void 0 ? void 0 : cycle.findIndex(function(item, i) {
-            var _cycle_;
-            return (item === null || item === void 0 ? void 0 : item.y) < 0.1 && (cycle === null || cycle === void 0 ? void 0 : (_cycle_ = cycle[i + 1]) === null || _cycle_ === void 0 ? void 0 : _cycle_.y) > (item === null || item === void 0 ? void 0 : item.y);
-        });
-        var beginning = cycle === null || cycle === void 0 ? void 0 : cycle.slice(0, smallestValIndex);
-        var end = cycle === null || cycle === void 0 ? void 0 : cycle.slice(smallestValIndex);
-        var zeroIndex = end === null || end === void 0 ? void 0 : end.findIndex(function(item) {
-            return (item === null || item === void 0 ? void 0 : item.y) === 0;
-        });
-        var slicedArray = _to_consumable_array(beginning).concat(_to_consumable_array(end.slice(zeroIndex)), _to_consumable_array(end.slice(0, zeroIndex)));
-        return slicedArray.map(function(item) {
-            return {
-                x: item.x,
-                y: item.y * ampValue
-            };
-        });
-    }
-    return cycle.map(function(item) {
-        return {
-            x: item.x,
-            y: item.y * ampValue
-        };
-    });
-}
-var phaseShift = function(dataArray, phaseValue) {
-    if (!(dataArray === null || dataArray === void 0 ? void 0 : dataArray.length)) {
-        return [];
-    }
-    var output = [];
-    var arrayToUse = _to_consumable_array(dataArray).concat(_to_consumable_array(dataArray));
-    var phaseVal = arrayToUse.length * phaseValue;
-    var phasedAllCycles = arrayToUse.concat(arrayToUse.splice(0, phaseVal));
-    for(var i = 0; i < dataArray.length; i++){
-        var _phasedAllCycles_i;
-        output.push({
-            x: i,
-            y: (_phasedAllCycles_i = phasedAllCycles[i]) === null || _phasedAllCycles_i === void 0 ? void 0 : _phasedAllCycles_i.y
-        });
-    }
-    return output;
-};
-var getSingleCyclePointArray = function(param) {
-    var waveType = param.waveType, _param_pulseWidth = param.pulseWidth, pulseWidth = _param_pulseWidth === void 0 ? 1 : _param_pulseWidth, _param_ampValue = param.ampValue, ampValue = _param_ampValue === void 0 ? 0.5 : _param_ampValue, phaseValue = param.phaseValue;
-    var data = waveType && generateCycle({
-        waveType: waveType,
-        pulseWidth: pulseWidth,
-        ampValue: ampValue
-    }).map(function(item, i) {
-        return {
-            x: i,
-            y: item.y
-        };
-    }).filter(function(item) {
-        return item.y !== undefined;
-    });
-    return phaseShift(data, phaseValue);
-};
-
 var css_248z$1 = "/* *[id^='outerglow'] {\n  opacity: 0.5;\n} */\n.area {\n  fill: url(#area-gradient);\n  /* stroke-width: 0px;w */\n}\n";
 styleInject(css_248z$1);
 
@@ -7266,7 +6910,7 @@ function createBase64WorkerFactory$3(base64, sourcemapArg, enableUnicodeArg) {
     return createBase64WorkerFactory$4(base64, sourcemapArg);
 }
 
-var WorkerFactory$1 = /*#__PURE__*/createBase64WorkerFactory$3('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICB2YXIgTEZPRG90Q2FudmFzOwogIHZhciBwb2ludEFycmF5ID0gW107CiAgc2VsZi5vbm1lc3NhZ2UgPSBmdW5jdGlvbihldmVudCkgewogICAgICB2YXIgZGF0YSA9IGV2ZW50LmRhdGE7CiAgICAgIC8vICAgY29uc3QgeVZhbHVlcyA9IGRhdGE/LnlWYWx1ZXM7CiAgICAgIHZhciBsaW5lV2lkdGggPSAyOwogICAgICAvLyAgIGNvbnN0IG1hcmdpbiA9IDE0OwogICAgICAvLyAgIGNvbnN0IGlubmVyV2lkdGggPSBkYXRhPy53aWR0aCAtIG1hcmdpbiAqIDI7CiAgICAgIHZhciBoZWlnaHQgPSBkYXRhLmhlaWdodCArIDIyOwogICAgICBpZiAoZGF0YS50eXBlID09PSAnaW5pdCcpIHsKICAgICAgICAgIExGT0RvdENhbnZhcyA9IGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS5jYW52YXM7CiAgICAgIH0KICAgICAgaWYgKGRhdGEudHlwZSA9PT0gJ3VwZGF0ZVBvaW50QXJyYXknKSB7CiAgICAgICAgICAvLyBjb25zdCBldmVudElkID0gJ1ZVTWV0ZXJTaWduYWwnOwogICAgICAgICAgdmFyIGRhdGExID0gZXZlbnQuZGF0YTsKICAgICAgICAgIHBvaW50QXJyYXkgPSBkYXRhMSA9PT0gbnVsbCB8fCBkYXRhMSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YTEucG9pbnRBcnJheTsKICAgICAgICAgIHZhciB4U2NhbGUgPSBkMy5zY2FsZUxpbmVhcigpLmRvbWFpbihbCiAgICAgICAgICAgICAgMCwKICAgICAgICAgICAgICBwb2ludEFycmF5ID09PSBudWxsIHx8IHBvaW50QXJyYXkgPT09IHZvaWQgMCA/IHZvaWQgMCA6IHBvaW50QXJyYXkubGVuZ3RoCiAgICAgICAgICBdKS5yYW5nZShbCiAgICAgICAgICAgICAgMCwKICAgICAgICAgICAgICBkYXRhMSA9PT0gbnVsbCB8fCBkYXRhMSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YTEud2lkdGgKICAgICAgICAgIF0pOwogICAgICAgICAgdmFyIHlTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKFsKICAgICAgICAgICAgICAwLAogICAgICAgICAgICAgIDEKICAgICAgICAgIF0pLnJhbmdlKFsKICAgICAgICAgICAgICBoZWlnaHQsCiAgICAgICAgICAgICAgMAogICAgICAgICAgXSk7CiAgICAgICAgICAvL3lWYWx1ZXNbTWF0aC5mbG9vcih5VmFsdWVzLmxlbmd0aCAqIGRhdGE/LnJhbXBWYWx1ZSwpXT8ueQogICAgICAgICAgLy8gLm5pY2UoKTsKICAgICAgICAgIGlmIChkYXRhMSAhPSBudWxsKSB7CiAgICAgICAgICAgICAgdmFyIGN0eCA9IExGT0RvdENhbnZhcyA9PT0gbnVsbCB8fCBMRk9Eb3RDYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IExGT0RvdENhbnZhcy5nZXRDb250ZXh0KCcyZCcpOwogICAgICAgICAgICAgIC8vIGNvbnN0IGxpbmUgPSBkMy5saW5lKChfLCBpKSA9PiB4U2NhbGUoaSksIHlTY2FsZSkuY29udGV4dChjdHgpOwogICAgICAgICAgICAgIHZhciBsaW5lQkcgPSBkMy5saW5lKGZ1bmN0aW9uKF8sIGkpIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIHhTY2FsZShpKTsKICAgICAgICAgICAgICB9LCB5U2NhbGUpLmNvbnRleHQoY3R4KTsKICAgICAgICAgICAgICBjdHguY2xlYXJSZWN0KDAsIDAsIGRhdGExLndpZHRoLCBkYXRhMS5oZWlnaHQpOwogICAgICAgICAgICAgIC8vICAgY3R4LnRyYW5zbGF0ZShsaW5lV2lkdGgsIGxpbmVXaWR0aCk7CiAgICAgICAgICAgICAgdmFyIHZhbHMgPSBwb2ludEFycmF5ID09PSBudWxsIHx8IHBvaW50QXJyYXkgPT09IHZvaWQgMCA/IHZvaWQgMCA6IHBvaW50QXJyYXkubWFwKGZ1bmN0aW9uKGl0ZW0pIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIGl0ZW0ueSAtIGxpbmVXaWR0aCAqIDAuMDE7CiAgICAgICAgICAgICAgfSk7CiAgICAgICAgICAgICAgdmFyIHhQb3MgPSB4U2NhbGUucmFuZ2UoKVsxXSAqIChkYXRhMSA9PT0gbnVsbCB8fCBkYXRhMSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YTEucmFtcFZhbHVlKSArIGxpbmVXaWR0aCAqIDAuMDE7CiAgICAgICAgICAgICAgdmFyIGxpbmVhckdyYWRpZW50ID0gY3R4LmNyZWF0ZUxpbmVhckdyYWRpZW50KDAsIDAsIDAsIGhlaWdodCk7CiAgICAgICAgICAgICAgLy8gbGluZWFyR3JhZGllbnQuYWRkQ29sb3JTdG9wKDAsICdyZ2JhKDE0NywgNDYsIDE4NCwgLjE1KScpOwogICAgICAgICAgICAgIGxpbmVhckdyYWRpZW50LmFkZENvbG9yU3RvcCgwLCAncmdiYSgxNDcsIDQ2LCAxODQsIC4xKScpOwogICAgICAgICAgICAgIGxpbmVhckdyYWRpZW50LmFkZENvbG9yU3RvcCgwLjg1LCAncmdiYSgxNDcsIDQ2LCAxODQsIDApJyk7CiAgICAgICAgICAgICAgdmFyIGFyZWFHZW5lcmF0b3IgPSBkMy5hcmVhKCkueChmdW5jdGlvbihkKSB7CiAgICAgICAgICAgICAgICAgIHJldHVybiB4U2NhbGUoZC54KTsKICAgICAgICAgICAgICB9KS55MChmdW5jdGlvbigpIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIHlTY2FsZSgtMSk7CiAgICAgICAgICAgICAgfSkueTEoZnVuY3Rpb24oZCkgewogICAgICAgICAgICAgICAgICByZXR1cm4geVNjYWxlKGQueSk7CiAgICAgICAgICAgICAgfSkuY29udGV4dChjdHgpOwogICAgICAgICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICAgICAgICAvL0B0cy1leHBlY3QtZXJyb3IKICAgICAgICAgICAgICBhcmVhR2VuZXJhdG9yKHBvaW50QXJyYXkpOwogICAgICAgICAgICAgIGN0eC5maWxsU3R5bGUgPSBsaW5lYXJHcmFkaWVudDsKICAgICAgICAgICAgICBjdHguZmlsbCgpOwogICAgICAgICAgICAgIGN0eC5iZWdpblBhdGgoKTsKICAgICAgICAgICAgICBjdHgubGluZVdpZHRoID0gbGluZVdpZHRoOwogICAgICAgICAgICAgIGN0eC5zdHJva2VTdHlsZSA9ICcjYWM0N2QxJzsKICAgICAgICAgICAgICBjdHgubGluZUNhcCA9ICdyb3VuZCc7CiAgICAgICAgICAgICAgY3R4LnNoYWRvd0NvbG9yID0gJ3JnYmEoMTg3LCAxMDQsIDIxNywgLjQpJzsKICAgICAgICAgICAgICBjdHguc2V0TGluZURhc2goW10pOwogICAgICAgICAgICAgIGN0eC5pbWFnZVNtb290aGluZ0VuYWJsZWQgPSBmYWxzZTsKICAgICAgICAgICAgICBjdHguc2hhZG93Qmx1ciA9IDU7CiAgICAgICAgICAgICAgbGluZUJHKHZhbHMpOwogICAgICAgICAgICAgIGN0eC5zdHJva2UoKTsKICAgICAgICAgICAgICB2YXIgeVBvcyA9IHlTY2FsZSh2YWxzW01hdGguZmxvb3IodmFscy5sZW5ndGggKiAoZGF0YTEgPT09IG51bGwgfHwgZGF0YTEgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGRhdGExLnJhbXBWYWx1ZSkpXSk7CiAgICAgICAgICAgICAgdmFyIHJhZGl1cyA9IDQ7CiAgICAgICAgICAgICAgY3R4LmJlZ2luUGF0aCgpOwogICAgICAgICAgICAgIGN0eC5zaGFkb3dDb2xvciA9ICdub25lJzsKICAgICAgICAgICAgICBjdHguc2hhZG93Qmx1ciA9IDA7CiAgICAgICAgICAgICAgY3R4LmFyYyh4UG9zLCB5UG9zLCByYWRpdXMsIDAsIDIgKiBNYXRoLlBJKTsKICAgICAgICAgICAgICBjdHguZmlsbFN0eWxlID0gJyNkMTk5ZTYnOwogICAgICAgICAgICAgIGN0eC5maWxsKCk7CiAgICAgICAgICAgICAgTEZPRG90Q2FudmFzID09PSBudWxsIHx8IExGT0RvdENhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogTEZPRG90Q2FudmFzLmdldENvbnRleHQoJzJkJykuZHJhd0ltYWdlKExGT0RvdENhbnZhcywgMCwgMCk7CiAgICAgICAgICAgICAgdmFyIGJpdG1hcCA9IExGT0RvdENhbnZhcyA9PT0gbnVsbCB8fCBMRk9Eb3RDYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IExGT0RvdENhbnZhcy50cmFuc2ZlclRvSW1hZ2VCaXRtYXAoKTsKICAgICAgICAgICAgICBzZWxmLnBvc3RNZXNzYWdlKGJpdG1hcCk7CiAgICAgICAgICB9CiAgICAgIH0KICB9OwoKfSkoKTsKLy8jIHNvdXJjZU1hcHBpbmdVUkw9d29ya2VyLmpzLm1hcAoK', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9');
+var WorkerFactory$1 = /*#__PURE__*/createBase64WorkerFactory$3('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgZnVuY3Rpb24gX2FycmF5X2xpa2VfdG9fYXJyYXkoYXJyLCBsZW4pIHsKICAgICAgaWYgKGxlbiA9PSBudWxsIHx8IGxlbiA+IGFyci5sZW5ndGgpIGxlbiA9IGFyci5sZW5ndGg7CiAgICAgIGZvcih2YXIgaSA9IDAsIGFycjIgPSBuZXcgQXJyYXkobGVuKTsgaSA8IGxlbjsgaSsrKWFycjJbaV0gPSBhcnJbaV07CiAgICAgIHJldHVybiBhcnIyOwogIH0KICBmdW5jdGlvbiBfYXJyYXlfd2l0aG91dF9ob2xlcyhhcnIpIHsKICAgICAgaWYgKEFycmF5LmlzQXJyYXkoYXJyKSkgcmV0dXJuIF9hcnJheV9saWtlX3RvX2FycmF5KGFycik7CiAgfQogIGZ1bmN0aW9uIF9pdGVyYWJsZV90b19hcnJheShpdGVyKSB7CiAgICAgIGlmICh0eXBlb2YgU3ltYm9sICE9PSAidW5kZWZpbmVkIiAmJiBpdGVyW1N5bWJvbC5pdGVyYXRvcl0gIT0gbnVsbCB8fCBpdGVyWyJAQGl0ZXJhdG9yIl0gIT0gbnVsbCkgcmV0dXJuIEFycmF5LmZyb20oaXRlcik7CiAgfQogIGZ1bmN0aW9uIF9ub25faXRlcmFibGVfc3ByZWFkKCkgewogICAgICB0aHJvdyBuZXcgVHlwZUVycm9yKCJJbnZhbGlkIGF0dGVtcHQgdG8gc3ByZWFkIG5vbi1pdGVyYWJsZSBpbnN0YW5jZS5cXG5JbiBvcmRlciB0byBiZSBpdGVyYWJsZSwgbm9uLWFycmF5IG9iamVjdHMgbXVzdCBoYXZlIGEgW1N5bWJvbC5pdGVyYXRvcl0oKSBtZXRob2QuIik7CiAgfQogIGZ1bmN0aW9uIF90b19jb25zdW1hYmxlX2FycmF5KGFycikgewogICAgICByZXR1cm4gX2FycmF5X3dpdGhvdXRfaG9sZXMoYXJyKSB8fCBfaXRlcmFibGVfdG9fYXJyYXkoYXJyKSB8fCBfdW5zdXBwb3J0ZWRfaXRlcmFibGVfdG9fYXJyYXkoYXJyKSB8fCBfbm9uX2l0ZXJhYmxlX3NwcmVhZCgpOwogIH0KICBmdW5jdGlvbiBfdW5zdXBwb3J0ZWRfaXRlcmFibGVfdG9fYXJyYXkobywgbWluTGVuKSB7CiAgICAgIGlmICghbykgcmV0dXJuOwogICAgICBpZiAodHlwZW9mIG8gPT09ICJzdHJpbmciKSByZXR1cm4gX2FycmF5X2xpa2VfdG9fYXJyYXkobywgbWluTGVuKTsKICAgICAgdmFyIG4gPSBPYmplY3QucHJvdG90eXBlLnRvU3RyaW5nLmNhbGwobykuc2xpY2UoOCwgLTEpOwogICAgICBpZiAobiA9PT0gIk9iamVjdCIgJiYgby5jb25zdHJ1Y3RvcikgbiA9IG8uY29uc3RydWN0b3IubmFtZTsKICAgICAgaWYgKG4gPT09ICJNYXAiIHx8IG4gPT09ICJTZXQiKSByZXR1cm4gQXJyYXkuZnJvbShuKTsKICAgICAgaWYgKG4gPT09ICJBcmd1bWVudHMiIHx8IC9eKD86VWl8SSludCg/Ojh8MTZ8MzIpKD86Q2xhbXBlZCk/QXJyYXkkLy50ZXN0KG4pKSByZXR1cm4gX2FycmF5X2xpa2VfdG9fYXJyYXkobywgbWluTGVuKTsKICB9CiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICB2YXIgTEZPRG90Q2FudmFzOwogIHZhciBidWZmZXJBcnJheSA9IFtdOwogIHZhciB2aXNpYmxlV2F2ZWZvcm1zID0gW107CiAgdmFyIGN1cnJlbnRXYXZlZm9ybSA9IFtdOwogIHZhciBhcnJheUxlbmd0aCA9IDEwMjQ7CiAgZnVuY3Rpb24gbm9ybWFsaXplVG9aZXJvT25lKHZhbHVlLCBtaW4sIG1heCkgewogICAgICByZXR1cm4gKHZhbHVlIC0gbWluKSAvIChtYXggLSBtaW4pOwogIH0KICB2YXIgcmVkdWNlUmVzb2x1dGlvblRvID0gZnVuY3Rpb24oYXJyLCBuKSB7CiAgICAgIHZhciBuZXdSZXMgPSBNYXRoLmZsb29yKChhcnIgPT09IG51bGwgfHwgYXJyID09PSB2b2lkIDAgPyB2b2lkIDAgOiBhcnIubGVuZ3RoKSAvIG4pOwogICAgICByZXR1cm4gYXJyID09PSBudWxsIHx8IGFyciA9PT0gdm9pZCAwID8gdm9pZCAwIDogYXJyLmZpbHRlcihmdW5jdGlvbihfLCBpbmRleCkgewogICAgICAgICAgcmV0dXJuIGluZGV4ICUgTWF0aC5mbG9vcigoYXJyID09PSBudWxsIHx8IGFyciA9PT0gdm9pZCAwID8gdm9pZCAwIDogYXJyLmxlbmd0aCkgLyBuZXdSZXMpID09PSAwOwogICAgICB9KTsKICB9OwogIHNlbGYub25tZXNzYWdlID0gZnVuY3Rpb24oZXZlbnQpIHsKICAgICAgdmFyIGRhdGEgPSBldmVudC5kYXRhOwogICAgICB2YXIgbGluZVdpZHRoID0gMjsKICAgICAgdmFyIG51bUN5Y2xlcyA9IE1hdGgubWluKE1hdGguZmxvb3IoTWF0aC5tYXgoZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLmh6VmFsdWVGb3JTeW5jVHlwZSwgMSkpLCA1MCk7CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICdpbml0JykgewogICAgICAgICAgTEZPRG90Q2FudmFzID0gZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLmNhbnZhczsKICAgICAgICAgIGJ1ZmZlckFycmF5ID0gW107CiAgICAgICAgICBjdXJyZW50V2F2ZWZvcm0gPSBBcnJheS5mcm9tKHsKICAgICAgICAgICAgICBsZW5ndGg6IE1hdGguZmxvb3IoYXJyYXlMZW5ndGggLSB2aXNpYmxlV2F2ZWZvcm1zLmxlbmd0aCkKICAgICAgICAgIH0sIGZ1bmN0aW9uKGl0ZW0sIGkpIHsKICAgICAgICAgICAgICByZXR1cm4gewogICAgICAgICAgICAgICAgICB4OiBpLAogICAgICAgICAgICAgICAgICB5OiAwCiAgICAgICAgICAgICAgfTsKICAgICAgICAgIH0pOwogICAgICB9CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICduZXdXYXZlJykgewogICAgICAgICAgdmFyIGxvd2VyUmVzV2F2ZWZvcm0gPSByZWR1Y2VSZXNvbHV0aW9uVG8oZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLndhdmVGb3JtLCBudW1DeWNsZXMpOwogICAgICAgICAgLy8gVE9ETzogcmUtZW5hYmxlIHJhbmRvbQogICAgICAgICAgLy8gbGV0IG5ld1dhdmU6IEFycmF5PFhZVmFsdWU+ID0gW107CiAgICAgICAgICAvLyBUT0RPOiByZS1lbmFibGUgcmFuZG9tCiAgICAgICAgICAvLyBpZiAobG93ZXJSZXNXYXZlZm9ybS5sZW5ndGggPiAwKSB7CiAgICAgICAgICAvLyAgIG5ld1dhdmUgPSBsb3dlclJlc1dhdmVmb3JtLm1hcCgoaXRlbTogWFlWYWx1ZSwgaTogbnVtYmVyKSA9PiAoewogICAgICAgICAgLy8gICAgIHg6IGl0ZW0ueCwKICAgICAgICAgIC8vICAgICB5OiBpdGVtLnkgKiAoMSAtIGRhdGE/LnJhbmRBbW91bnRWYWx1ZSksCiAgICAgICAgICAvLyAgIH0pKTsKICAgICAgICAgIC8vIH0KICAgICAgICAgIC8vIHJhbmRBbW91bnRWYWwgPSBkYXRhPy5yYW5kQW1vdW50VmFsdWU7CiAgICAgICAgICB2YXIgZmlsbGVySXRlbXMgPSBBcnJheS5mcm9tKHsKICAgICAgICAgICAgICBsZW5ndGg6IE1hdGguZmxvb3IoTWF0aC5hYnMoTWF0aC5tYXgobnVtQ3ljbGVzIC0gKGJ1ZmZlckFycmF5ID09PSBudWxsIHx8IGJ1ZmZlckFycmF5ID09PSB2b2lkIDAgPyB2b2lkIDAgOiBidWZmZXJBcnJheS5sZW5ndGgpIC0gMSwgMCkpKQogICAgICAgICAgfSwgZnVuY3Rpb24oKSB7CiAgICAgICAgICAgICAgcmV0dXJuIEFycmF5LmZyb20oewogICAgICAgICAgICAgICAgICBsZW5ndGg6IE1hdGguZmxvb3IobG93ZXJSZXNXYXZlZm9ybS5sZW5ndGgpCiAgICAgICAgICAgICAgfSwgZnVuY3Rpb24oaXRlbSwgaSkgewogICAgICAgICAgICAgICAgICByZXR1cm4gewogICAgICAgICAgICAgICAgICAgICAgeDogaSwKICAgICAgICAgICAgICAgICAgICAgIHk6IDAKICAgICAgICAgICAgICAgICAgfTsKICAgICAgICAgICAgICB9KTsKICAgICAgICAgIH0pOwogICAgICAgICAgdmFyIG5ld0J1ZmZlckFycmF5ID0gKGJ1ZmZlckFycmF5ID09PSBudWxsIHx8IGJ1ZmZlckFycmF5ID09PSB2b2lkIDAgPyB2b2lkIDAgOiBidWZmZXJBcnJheS5sZW5ndGgpID49IG51bUN5Y2xlcyA/IF90b19jb25zdW1hYmxlX2FycmF5KGJ1ZmZlckFycmF5LnNsaWNlKC1NYXRoLm1heChNYXRoLmZsb29yKG51bUN5Y2xlcyksIDEpKSkuY29uY2F0KFsKICAgICAgICAgICAgICBsb3dlclJlc1dhdmVmb3JtCiAgICAgICAgICBdLCBfdG9fY29uc3VtYWJsZV9hcnJheShmaWxsZXJJdGVtcykpIDogX3RvX2NvbnN1bWFibGVfYXJyYXkoZmlsbGVySXRlbXMpLmNvbmNhdChfdG9fY29uc3VtYWJsZV9hcnJheShidWZmZXJBcnJheSksIFsKICAgICAgICAgICAgICBsb3dlclJlc1dhdmVmb3JtCiAgICAgICAgICBdKTsKICAgICAgICAgIGJ1ZmZlckFycmF5ID0gbmV3QnVmZmVyQXJyYXk7CiAgICAgIH0KICAgICAgaWYgKGRhdGEudHlwZSA9PT0gJ2N5Y2xlVXBkYXRlJykgewogICAgICAgICAgdmFyIF9idWZmZXJBcnJheV87CiAgICAgICAgICB2YXIgdXBkYXRlZFZpc2libGVXYXZlRm9ybXMgPSBidWZmZXJBcnJheS5sZW5ndGggPiAwID8gX3RvX2NvbnN1bWFibGVfYXJyYXkoKF9idWZmZXJBcnJheV8gPSBidWZmZXJBcnJheVswXSkgPT09IG51bGwgfHwgX2J1ZmZlckFycmF5XyA9PT0gdm9pZCAwID8gdm9pZCAwIDogX2J1ZmZlckFycmF5Xy5zbGljZShNYXRoLm1heChNYXRoLmZsb29yKGJ1ZmZlckFycmF5WzBdLmxlbmd0aCAqIG5vcm1hbGl6ZVRvWmVyb09uZShkYXRhLnJhbXBWYWx1ZSwgMCwgMTAyMykpLCAxKSkpLmNvbmNhdChfdG9fY29uc3VtYWJsZV9hcnJheShidWZmZXJBcnJheS5zbGljZSgxKS5mbGF0KCkpLCBfdG9fY29uc3VtYWJsZV9hcnJheShjdXJyZW50V2F2ZWZvcm0gPT09IG51bGwgfHwgY3VycmVudFdhdmVmb3JtID09PSB2b2lkIDAgPyB2b2lkIDAgOiBjdXJyZW50V2F2ZWZvcm0uc2xpY2UoMCwgTWF0aC5mbG9vcihjdXJyZW50V2F2ZWZvcm0ubGVuZ3RoICogbm9ybWFsaXplVG9aZXJvT25lKGRhdGEucmFtcFZhbHVlLCAwLCAxMDIzKSkpKSkgOiBfdG9fY29uc3VtYWJsZV9hcnJheShjdXJyZW50V2F2ZWZvcm0pOwogICAgICAgICAgLy8gY29uc29sZS5sb2coZGF0YT8ucmFtcFZhbHVlLCAnZGF0YT8ucmFtcFZhbHVlJyk7CiAgICAgICAgICB2YXIgeHlWYWx1ZXMgPSB1cGRhdGVkVmlzaWJsZVdhdmVGb3JtcyA9PT0gbnVsbCB8fCB1cGRhdGVkVmlzaWJsZVdhdmVGb3JtcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdXBkYXRlZFZpc2libGVXYXZlRm9ybXMubWFwKGZ1bmN0aW9uKGl0ZW0sIGkpIHsKICAgICAgICAgICAgICByZXR1cm4gewogICAgICAgICAgICAgICAgICB4OiBpLAogICAgICAgICAgICAgICAgICB5OiBpdGVtLnkKICAgICAgICAgICAgICB9OwogICAgICAgICAgfSk7CiAgICAgICAgICB2aXNpYmxlV2F2ZWZvcm1zID0geHlWYWx1ZXM7CiAgICAgICAgICAvLyBUT0RPOiBUcm91Ymxlc2hvb3QgcmFuZG9tCiAgICAgICAgICAvLyBpZiAoCiAgICAgICAgICAvLyAgIHVwZGF0ZWRWaXNpYmxlV2F2ZUZvcm1zWzBdPy55ICE9PSAwICYmCiAgICAgICAgICAvLyAgIHByZXZWaXNpYmxlV2F2ZUZvcm0/LnkgIT09IDAgJiYKICAgICAgICAgIC8vICAgdXBkYXRlZFZpc2libGVXYXZlRm9ybXNbMF0/LnkgIT09IHByZXZWaXNpYmxlV2F2ZUZvcm0/LnkKICAgICAgICAgIC8vICkgewogICAgICAgICAgLy8gICAvLyBjb25zb2xlLmxvZygnUFJPQkxFTScpOwogICAgICAgICAgLy8gfQogICAgICAgICAgdmFyIHhTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKC8vIGQzLmV4dGVudCh2aXNpYmxlV2F2ZWZvcm1zLCBmdW5jdGlvbiAoZCkgewogICAgICAgICAgLy8gICByZXR1cm4gZC54OwogICAgICAgICAgLy8gfSksCiAgICAgICAgICBbCiAgICAgICAgICAgICAgMCwKICAgICAgICAgICAgICBhcnJheUxlbmd0aAogICAgICAgICAgXSkucmFuZ2UoWwogICAgICAgICAgICAgIDAsCiAgICAgICAgICAgICAgZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLndpZHRoCiAgICAgICAgICBdKTsKICAgICAgICAgIHZhciB5U2NhbGUgPSBkMy5zY2FsZUxpbmVhcigpLmRvbWFpbihbCiAgICAgICAgICAgICAgMCwKICAgICAgICAgICAgICAxCiAgICAgICAgICBdKS5yYW5nZShbCiAgICAgICAgICAgICAgKGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS5oZWlnaHQpIC0gbGluZVdpZHRoLAogICAgICAgICAgICAgIGxpbmVXaWR0aAogICAgICAgICAgXSk7CiAgICAgICAgICBpZiAoZGF0YSAhPSBudWxsKSB7CiAgICAgICAgICAgICAgdmFyIGN0eCA9IExGT0RvdENhbnZhcyA9PT0gbnVsbCB8fCBMRk9Eb3RDYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IExGT0RvdENhbnZhcy5nZXRDb250ZXh0KCcyZCcpOwogICAgICAgICAgICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgZGF0YS53aWR0aCwgZGF0YS5oZWlnaHQpOwogICAgICAgICAgICAgIHZhciBsaW5lR2VuZXJhdG9yID0gZDMubGluZShmdW5jdGlvbihkKSB7CiAgICAgICAgICAgICAgICAgIHJldHVybiB4U2NhbGUoZC54KTsKICAgICAgICAgICAgICB9LCBmdW5jdGlvbihkKSB7CiAgICAgICAgICAgICAgICAgIHJldHVybiB5U2NhbGUoZC55KTsKICAgICAgICAgICAgICB9KS5jb250ZXh0KGN0eCkuY3VydmUoZDMuY3VydmVCYXNpcyk7CiAgICAgICAgICAgICAgY3R4LmJlZ2luUGF0aCgpOwogICAgICAgICAgICAgIGN0eC5saW5lV2lkdGggPSBsaW5lV2lkdGg7CiAgICAgICAgICAgICAgY3R4LnN0cm9rZVN0eWxlID0gJ3JnYigxOTgsIDQ1LCAyMjQpJzsKICAgICAgICAgICAgICBjdHgubGluZUNhcCA9ICdyb3VuZCc7CiAgICAgICAgICAgICAgY3R4LnNoYWRvd0NvbG9yID0gJ3JnYmEoMTg3LCAxMDQsIDIxNywgLjQpJzsKICAgICAgICAgICAgICBjdHguc2V0TGluZURhc2goW10pOwogICAgICAgICAgICAgIGN0eC5pbWFnZVNtb290aGluZ0VuYWJsZWQgPSBmYWxzZTsKICAgICAgICAgICAgICBjdHguc2hhZG93Qmx1ciA9IDU7CiAgICAgICAgICAgICAgbGluZUdlbmVyYXRvcih2aXNpYmxlV2F2ZWZvcm1zKTsKICAgICAgICAgICAgICBjdHguc3Ryb2tlKCk7CiAgICAgICAgICAgICAgdmFyIGxpbmVhckdyYWRpZW50ID0gY3R4LmNyZWF0ZUxpbmVhckdyYWRpZW50KDAsIDAsIDAsIGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS5oZWlnaHQpOwogICAgICAgICAgICAgIC8vIGxpbmVhckdyYWRpZW50LmFkZENvbG9yU3RvcCgwLCAncmdiYSgxNDcsIDQ2LCAxODQsIC4xNSknKTsKICAgICAgICAgICAgICBsaW5lYXJHcmFkaWVudC5hZGRDb2xvclN0b3AoMCwgJ3JnYmEoMTk4LCA0NSwgMjI0LCAuMDUpJyk7CiAgICAgICAgICAgICAgbGluZWFyR3JhZGllbnQuYWRkQ29sb3JTdG9wKDAuOCwgJ3JnYmEoMTk4LCA0NSwgMjI0LCAwKScpOwogICAgICAgICAgICAgIHZhciBhcmVhR2VuZXJhdG9yID0gZDMuYXJlYSgpLngoZnVuY3Rpb24oZCkgewogICAgICAgICAgICAgICAgICByZXR1cm4geFNjYWxlKGQueCk7CiAgICAgICAgICAgICAgfSkueTAoZnVuY3Rpb24oKSB7CiAgICAgICAgICAgICAgICAgIHJldHVybiB5U2NhbGUoLTEpOwogICAgICAgICAgICAgIH0pLnkxKGZ1bmN0aW9uKGQpIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIHlTY2FsZShkLnkpOwogICAgICAgICAgICAgIH0pLmNvbnRleHQoY3R4KTsKICAgICAgICAgICAgICBjdHguYmVnaW5QYXRoKCk7CiAgICAgICAgICAgICAgLy9AdHMtZXhwZWN0LWVycm9yCiAgICAgICAgICAgICAgYXJlYUdlbmVyYXRvcih2aXNpYmxlV2F2ZWZvcm1zKTsKICAgICAgICAgICAgICBjdHguZmlsbFN0eWxlID0gbGluZWFyR3JhZGllbnQ7CiAgICAgICAgICAgICAgY3R4LmZpbGwoKTsKICAgICAgICAgICAgICBMRk9Eb3RDYW52YXMgPT09IG51bGwgfHwgTEZPRG90Q2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiBMRk9Eb3RDYW52YXMuZ2V0Q29udGV4dCgnMmQnKS5kcmF3SW1hZ2UoTEZPRG90Q2FudmFzLCAwLCAwKTsKICAgICAgICAgICAgICB2YXIgYml0bWFwID0gTEZPRG90Q2FudmFzID09PSBudWxsIHx8IExGT0RvdENhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogTEZPRG90Q2FudmFzLnRyYW5zZmVyVG9JbWFnZUJpdG1hcCgpOwogICAgICAgICAgICAgIHNlbGYucG9zdE1lc3NhZ2UoYml0bWFwKTsKICAgICAgICAgIH0KICAgICAgfQogIH07Cgp9KSgpOwovLyMgc291cmNlTWFwcGluZ1VSTD13b3JrZXIuanMubWFwCgo=', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9');
 /* eslint-enable */
 
 function _array_like_to_array$4(arr, len) {
@@ -7317,96 +6961,127 @@ function _unsupported_iterable_to_array$4(o, minLen) {
 }
 function LFOVisualizer(param) {
     var id = param.id, _param_width = param.width, width = _param_width === void 0 ? 365 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 160 : _param_height;
-    // const svgRef = useRef(null);
     var isLocalhost = window.location.hostname === 'localhost';
-    // const [waveValue, setWaveValue] = useState(0);
-    //@ts-expect-error
-    var _useState = _sliced_to_array$4(useState(0), 2); _useState[0]; var setHzValue = _useState[1];
-    //@ts-expect-error
-    var _useState1 = _sliced_to_array$4(useState(0), 2); _useState1[0]; var setHzHiValue = _useState1[1];
-    //@ts-expect-error
-    var _useState2 = _sliced_to_array$4(useState(0), 2); _useState2[0]; var setSyncRateValue = _useState2[1];
-    //@ts-expect-error
-    var _useState3 = _sliced_to_array$4(useState(0), 2); _useState3[0]; var setSyncTypeValue = _useState3[1];
-    //@ts-expect-error
-    var _useState4 = _sliced_to_array$4(useState(0), 2); _useState4[0]; var setSixteenthsValue = _useState4[1];
-    //@ts-expect-error
-    var _useState5 = _sliced_to_array$4(useState(0), 2); _useState5[0]; var setThirdsValue = _useState5[1];
-    //@ts-expect-error
-    var _useState6 = _sliced_to_array$4(useState(0), 2); _useState6[0]; var setSyncOffsetValue = _useState6[1];
-    var _useState7 = _sliced_to_array$4(useState(0), 2), phaseValue = _useState7[0], setPhaseValue = _useState7[1];
-    var _useState8 = _sliced_to_array$4(useState(0), 2), widthValue = _useState8[0], setWidthValue = _useState8[1];
-    var _useState9 = _sliced_to_array$4(useState(0), 2), ampValue = _useState9[0], setAmpValue = _useState9[1];
-    //@ts-expect-error
-    var _useState10 = _sliced_to_array$4(useState(0), 2); _useState10[0]; var setRandValue = _useState10[1];
-    var _useState11 = _sliced_to_array$4(useState(null), 2), waveType = _useState11[0], setWaveType = _useState11[1];
-    var _useState12 = _sliced_to_array$4(useState(null), 2), pointArray = _useState12[0], setPointArray = _useState12[1];
+    var _useState = _sliced_to_array$4(useState(0), 2), syncTypeValue = _useState[0], setSyncTypeValue = _useState[1];
+    // TODO: Fix random
+    // const [randValue, setRandValue] = useState(0);
+    var _useState1 = _sliced_to_array$4(useState(0), 2), hzModulatedValue = _useState1[0], setHzModulatedValue = _useState1[1];
+    var _useState2 = _sliced_to_array$4(useState(0), 2), hzHiModulatedValue = _useState2[0], setHzHiModulatedValue = _useState2[1];
+    var _useState3 = _sliced_to_array$4(useState(0), 2), syncLFOHzValue = _useState3[0], setSyncLFOHzValue = _useState3[1];
+    var _useState4 = _sliced_to_array$4(useState(null), 2), waveType = _useState4[0], setWaveType = _useState4[1];
     var workerRef = useRef(null);
+    var cycleRef = useRef([]);
+    var prevRampValue = useRef(null);
+    var hzValueForSyncType = useRef(null);
+    var onNewWave = useEffectEvent(function() {
+        var //Send the data to the worker
+        _workerRef_current;
+        switch(syncTypeValue){
+            case 0:
+                hzValueForSyncType.current = Math.min(hzModulatedValue, 20);
+                break;
+            case 1:
+                hzValueForSyncType.current = Math.min(hzHiModulatedValue, 100);
+                break;
+            case 2:
+                hzValueForSyncType.current = syncLFOHzValue;
+                break;
+            default:
+                hzValueForSyncType.current = 0;
+        }
+        workerRef === null || workerRef === void 0 ? void 0 : (_workerRef_current = workerRef.current) === null || _workerRef_current === void 0 ? void 0 : _workerRef_current.postMessage({
+            type: 'newWave',
+            waveType: waveType,
+            waveForm: cycleRef.current,
+            hzValueForSyncType: hzValueForSyncType.current,
+            syncTypeValue: syncTypeValue,
+            hzModulatedValue: hzModulatedValue,
+            hzHiModulatedValue: hzHiModulatedValue,
+            syncLFOHzValue: syncLFOHzValue,
+            // randValue,
+            randAmountValue: 0,
+            height: height * 0.75,
+            width: width
+        });
+    });
+    // Event handler that fires when the ramp value changes
+    // This controls the animation
+    var onRampUpdate = useEffectEvent(function(rampValue) {
+        var _workerRef_current;
+        workerRef === null || workerRef === void 0 ? void 0 : (_workerRef_current = workerRef.current) === null || _workerRef_current === void 0 ? void 0 : _workerRef_current.postMessage({
+            type: 'cycleUpdate',
+            rampValue: rampValue,
+            hzValueForSyncType: hzValueForSyncType.current,
+            width: width,
+            height: height
+        });
+        renderFuction();
+    });
     // Sets up listeners to handle changes on the backend
     //@ts-expect-error
     useEffect(function() {
         // Set up slider state listeners for each LFO parameter
         if (!isLocalhost) {
+            var _window___JUCE___backend, _window___JUCE__, _window, _window___JUCE___backend1, _window___JUCE__1, _window1, _window___JUCE___backend2, _window___JUCE__2, _window2, _window___JUCE___backend3, _window___JUCE__3, _window3, _window___JUCE___backend4, _window___JUCE__4, _window4;
             var waveState = Juce.getComboBoxState("LFO".concat(id, "_Wave"));
-            // setWaveValue(waveState?.getChoiceIndex());
-            setWaveType(waveState === null || waveState === void 0 ? void 0 : waveState.getChoiceIndex());
-            var hzState = Juce.getSliderState("LFO".concat(id, "_Hz"));
-            setHzValue(hzState === null || hzState === void 0 ? void 0 : hzState.getNormalisedValue());
-            var hzHiState = Juce.getSliderState("LFO".concat(id, "_Hz_Hi"));
-            setHzHiValue(hzHiState === null || hzHiState === void 0 ? void 0 : hzHiState.getNormalisedValue());
-            var syncRateState = Juce.getComboBoxState("LFO".concat(id, "_SyncRate"));
-            setSyncRateValue(syncRateState === null || syncRateState === void 0 ? void 0 : syncRateState.getChoiceIndex());
             var syncTypeState = Juce.getComboBoxState("LFO".concat(id, "_SyncType"));
-            setSyncTypeValue(syncTypeState === null || syncTypeState === void 0 ? void 0 : syncTypeState.getChoiceIndex());
-            var sixteenthsState = Juce.getSliderState("LFO".concat(id, "_Sixteenths"));
-            setSixteenthsValue(sixteenthsState === null || sixteenthsState === void 0 ? void 0 : sixteenthsState.getNormalisedValue());
-            var thirdsState = Juce.getSliderState("LFO".concat(id, "_Thirds"));
-            setThirdsValue(thirdsState === null || thirdsState === void 0 ? void 0 : thirdsState.getNormalisedValue());
-            var syncOffsetState = Juce.getSliderState("LFO".concat(id, "_Sync_Offset"));
-            setSyncOffsetValue(syncOffsetState === null || syncOffsetState === void 0 ? void 0 : syncOffsetState.getNormalisedValue());
-            var phaseState = Juce.getSliderState("LFO".concat(id, "_Phase"));
-            setPhaseValue(phaseState === null || phaseState === void 0 ? void 0 : phaseState.getNormalisedValue());
-            var widthState = Juce.getSliderState("LFO".concat(id, "_Width"));
-            setWidthValue(widthState === null || widthState === void 0 ? void 0 : widthState.getNormalisedValue());
-            var ampState = Juce.getSliderState("LFO".concat(id, "_Amp"));
-            setAmpValue(ampState === null || ampState === void 0 ? void 0 : ampState.getNormalisedValue());
-            var randState = Juce.getSliderState("LFO".concat(id, "_Rand"));
-            setRandValue(randState === null || randState === void 0 ? void 0 : randState.getNormalisedValue());
-            var waveListenerId = waveState === null || waveState === void 0 ? void 0 : waveState.valueChangedEvent.addListener(function() {
-                setWaveType(waveState === null || waveState === void 0 ? void 0 : waveState.getChoiceIndex());
-            });
-            var hzListenerId = hzState.valueChangedEvent.addListener(function() {
-                setHzValue(hzState === null || hzState === void 0 ? void 0 : hzState.getNormalisedValue());
-            });
-            var hzHiListenerId = hzHiState.valueChangedEvent.addListener(function() {
-                setHzHiValue(hzHiState === null || hzHiState === void 0 ? void 0 : hzHiState.getNormalisedValue());
-            });
-            var syncRateListenerId = syncRateState.valueChangedEvent.addListener(function() {
-                setSyncRateValue(syncRateState === null || syncRateState === void 0 ? void 0 : syncRateState.getChoiceIndex());
-            });
             var syncTypeListenerId = syncTypeState.valueChangedEvent.addListener(function() {
                 setSyncTypeValue(syncTypeState === null || syncTypeState === void 0 ? void 0 : syncTypeState.getChoiceIndex());
             });
-            var sixteenthsListenerId = sixteenthsState.valueChangedEvent.addListener(function() {
-                setSixteenthsValue(sixteenthsState === null || sixteenthsState === void 0 ? void 0 : sixteenthsState.getNormalisedValue());
-            });
-            var thirdsListenerId = thirdsState.valueChangedEvent.addListener(function() {
-                setThirdsValue(thirdsState === null || thirdsState === void 0 ? void 0 : thirdsState.getNormalisedValue());
+            var waveListenerId = waveState === null || waveState === void 0 ? void 0 : waveState.valueChangedEvent.addListener(function() {
+                setWaveType(waveState === null || waveState === void 0 ? void 0 : waveState.getChoiceIndex());
             });
-            var syncOffsetListenerId = syncOffsetState.valueChangedEvent.addListener(function() {
-                setSyncOffsetValue(syncOffsetState === null || syncOffsetState === void 0 ? void 0 : syncOffsetState.getNormalisedValue());
+            //TODO: fix random
+            // const randListenerId = randState.valueChangedEvent.addListener(() => {
+            //   setRandValue(randState?.getNormalisedValue());
+            // });
+            //ramp array dictates when it updates
+            //@ts-expect-error
+            var rampListenerId = (_window = window) === null || _window === void 0 ? void 0 : (_window___JUCE__ = _window.__JUCE__) === null || _window___JUCE__ === void 0 ? void 0 : (_window___JUCE___backend = _window___JUCE__.backend) === null || _window___JUCE___backend === void 0 ? void 0 : _window___JUCE___backend.addEventListener("LFO".concat(id, "_Ramp"), function(event) {
+                var _prevRampValue_current;
+                // Trigger 'onNewWave' when the ramp value drops.
+                // This represents the beginning of a new wave.
+                if (Math.abs(event - ((_prevRampValue_current = prevRampValue.current) !== null && _prevRampValue_current !== void 0 ? _prevRampValue_current : 0)) > 0.5) {
+                    onNewWave();
+                }
+                // Updates the animatiom
+                onRampUpdate(event);
+                prevRampValue.current = event;
             });
-            var phaseListenerId = phaseState.valueChangedEvent.addListener(function() {
-                setPhaseValue(phaseState === null || phaseState === void 0 ? void 0 : phaseState.getNormalisedValue());
+            //TODO: fix random
+            // const randAmountListenerId = window?.__JUCE__?.backend?.addEventListener(
+            //   `LFO${id}_RandAmount`,
+            //   (event: any) => {
+            //       // todo: fix random
+            //       prevRandAmountValue.current = event;
+            //     }
+            //   },
+            // );
+            //@ts-expect-error
+            var hzModulatedListenerId = (_window1 = window) === null || _window1 === void 0 ? void 0 : (_window___JUCE__1 = _window1.__JUCE__) === null || _window___JUCE__1 === void 0 ? void 0 : (_window___JUCE___backend1 = _window___JUCE__1.backend) === null || _window___JUCE___backend1 === void 0 ? void 0 : _window___JUCE___backend1.addEventListener("LFO".concat(id, "_Hz_Modulated"), function(event) {
+                setHzModulatedValue(event);
             });
-            var widthListenerId = widthState.valueChangedEvent.addListener(function() {
-                setWidthValue(widthState === null || widthState === void 0 ? void 0 : widthState.getNormalisedValue());
+            var hzHiModulatedListenerId = (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window___JUCE__2 = _window2.__JUCE__) === null || _window___JUCE__2 === void 0 ? void 0 : (_window___JUCE___backend2 = _window___JUCE__2.backend) === null || _window___JUCE___backend2 === void 0 ? void 0 : _window___JUCE___backend2.addEventListener("LFO".concat(id, "_Hz_Hi_Modulated"), function(event) {
+                setHzHiModulatedValue(event);
             });
-            var ampListenerId = ampState.valueChangedEvent.addListener(function() {
-                setAmpValue(ampState === null || ampState === void 0 ? void 0 : ampState.getNormalisedValue());
+            //@ts-expect-error
+            var syncLFOHzListenerId = (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window___JUCE__3 = _window3.__JUCE__) === null || _window___JUCE__3 === void 0 ? void 0 : (_window___JUCE___backend3 = _window___JUCE__3.backend) === null || _window___JUCE___backend3 === void 0 ? void 0 : _window___JUCE___backend3.addEventListener("LFO".concat(id, "_Sync_LFO_Hz"), function(event) {
+                setSyncLFOHzValue(event);
             });
-            var randListenerId = randState.valueChangedEvent.addListener(function() {
-                setRandValue(randState === null || randState === void 0 ? void 0 : randState.getNormalisedValue());
+            //@ts-expect-error
+            var waveformListenerId = (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window___JUCE__4 = _window4.__JUCE__) === null || _window___JUCE__4 === void 0 ? void 0 : (_window___JUCE___backend4 = _window___JUCE__4.backend) === null || _window___JUCE___backend4 === void 0 ? void 0 : _window___JUCE___backend4.addEventListener("LFO".concat(id, "_Cycle"), function(event) {
+                fetch(Juce.getBackendResourceAddress("LFO".concat(id, "_Cycle.json"))).then(function(response) {
+                    return response.text();
+                }).then(function(text) {
+                    var data = JSON.parse(text);
+                    var vals = data === null || data === void 0 ? void 0 : data["LFO".concat(id, "_Cycle")].map(function(item, i) {
+                        return {
+                            x: i,
+                            y: item
+                        };
+                    });
+                    cycleRef.current = vals;
+                });
             });
             // Canvas
             var canvas = document.createElement('canvas');
@@ -7416,6 +7091,7 @@ function LFOVisualizer(param) {
             }
             var worker = new WorkerFactory$1();
             var offscreenCanvas = canvas.transferControlToOffscreen();
+            // Initialize the canvas
             worker.postMessage({
                 type: 'init',
                 canvas: offscreenCanvas
@@ -7426,19 +7102,27 @@ function LFOVisualizer(param) {
                 workerRef.current = worker;
             }
             return function() {
+                var //TODO: Fix random
+                // randState?.valueChangedEvent.removeListener(randListenerId);
+                //@ts-expect-error
+                _window___JUCE___backend, _window___JUCE__, _window, //@ts-expect-error
+                _window___JUCE___backend1, _window___JUCE__1, _window1, // window?.__JUCE__?.backend?.removeEventListener(randAmountListenerId);
+                //@ts-expect-error
+                _window___JUCE___backend2, _window___JUCE__2, _window2, //@ts-expect-error
+                _window___JUCE___backend3, _window___JUCE__3, _window3, //@ts-expect-error
+                _window___JUCE___backend4, _window___JUCE__4, _window4, //@ts-expect-error
+                _window___JUCE___backend5, _window___JUCE__5, _window5, //@ts-expect-error
+                _window___JUCE___backend6, _window___JUCE__6, _window6;
                 // Remove listeners on unmount
-                waveState === null || waveState === void 0 ? void 0 : waveState.valueChangedEvent.removeListener(waveListenerId);
-                hzState === null || hzState === void 0 ? void 0 : hzState.valueChangedEvent.removeListener(hzListenerId);
-                hzHiState === null || hzHiState === void 0 ? void 0 : hzHiState.valueChangedEvent.removeListener(hzHiListenerId);
-                syncRateState === null || syncRateState === void 0 ? void 0 : syncRateState.valueChangedEvent.removeListener(syncRateListenerId);
                 syncTypeState === null || syncTypeState === void 0 ? void 0 : syncTypeState.valueChangedEvent.removeListener(syncTypeListenerId);
-                sixteenthsState === null || sixteenthsState === void 0 ? void 0 : sixteenthsState.valueChangedEvent.removeListener(sixteenthsListenerId);
-                thirdsState === null || thirdsState === void 0 ? void 0 : thirdsState.valueChangedEvent.removeListener(thirdsListenerId);
-                syncOffsetState === null || syncOffsetState === void 0 ? void 0 : syncOffsetState.valueChangedEvent.removeListener(syncOffsetListenerId);
-                phaseState === null || phaseState === void 0 ? void 0 : phaseState.valueChangedEvent.removeListener(phaseListenerId);
-                widthState === null || widthState === void 0 ? void 0 : widthState.valueChangedEvent.removeListener(widthListenerId);
-                ampState === null || ampState === void 0 ? void 0 : ampState.valueChangedEvent.removeListener(ampListenerId);
-                randState === null || randState === void 0 ? void 0 : randState.valueChangedEvent.removeListener(randListenerId);
+                waveState === null || waveState === void 0 ? void 0 : waveState.valueChangedEvent.removeListener(waveListenerId);
+                (_window = window) === null || _window === void 0 ? void 0 : (_window___JUCE__ = _window.__JUCE__) === null || _window___JUCE__ === void 0 ? void 0 : (_window___JUCE___backend = _window___JUCE__.backend) === null || _window___JUCE___backend === void 0 ? void 0 : _window___JUCE___backend.removeEventListener(waveformListenerId);
+                (_window1 = window) === null || _window1 === void 0 ? void 0 : (_window___JUCE__1 = _window1.__JUCE__) === null || _window___JUCE__1 === void 0 ? void 0 : (_window___JUCE___backend1 = _window___JUCE__1.backend) === null || _window___JUCE___backend1 === void 0 ? void 0 : _window___JUCE___backend1.removeEventListener(rampListenerId);
+                (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window___JUCE__2 = _window2.__JUCE__) === null || _window___JUCE__2 === void 0 ? void 0 : (_window___JUCE___backend2 = _window___JUCE__2.backend) === null || _window___JUCE___backend2 === void 0 ? void 0 : _window___JUCE___backend2.removeEventListener(hzModulatedListenerId);
+                (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window___JUCE__3 = _window3.__JUCE__) === null || _window___JUCE__3 === void 0 ? void 0 : (_window___JUCE___backend3 = _window___JUCE__3.backend) === null || _window___JUCE___backend3 === void 0 ? void 0 : _window___JUCE___backend3.removeEventListener(hzHiModulatedListenerId);
+                (_window4 = window) === null || _window4 === void 0 ? void 0 : (_window___JUCE__4 = _window4.__JUCE__) === null || _window___JUCE__4 === void 0 ? void 0 : (_window___JUCE___backend4 = _window___JUCE__4.backend) === null || _window___JUCE___backend4 === void 0 ? void 0 : _window___JUCE___backend4.removeEventListener(syncLFOHzListenerId);
+                (_window5 = window) === null || _window5 === void 0 ? void 0 : (_window___JUCE__5 = _window5.__JUCE__) === null || _window___JUCE__5 === void 0 ? void 0 : (_window___JUCE___backend5 = _window___JUCE__5.backend) === null || _window___JUCE___backend5 === void 0 ? void 0 : _window___JUCE___backend5.removeEventListener(waveformListenerId);
+                (_window6 = window) === null || _window6 === void 0 ? void 0 : (_window___JUCE__6 = _window6.__JUCE__) === null || _window___JUCE__6 === void 0 ? void 0 : (_window___JUCE___backend6 = _window___JUCE__6.backend) === null || _window___JUCE___backend6 === void 0 ? void 0 : _window___JUCE___backend6.removeEventListener(rampListenerId);
                 if (workerRef === null || workerRef === void 0 ? void 0 : workerRef.current) {
                     workerRef === null || workerRef === void 0 ? void 0 : workerRef.current.terminate();
                     workerRef.current = null;
@@ -7448,30 +7132,7 @@ function LFOVisualizer(param) {
     }, [
         window
     ]);
-    useEffect(function() {
-        var _Object_values;
-        var pointValues = getSingleCyclePointArray({
-            waveType: waveType !== null ? (_Object_values = Object.values(WaveTypes)) === null || _Object_values === void 0 ? void 0 : _Object_values[waveType] : null,
-            pulseWidth: widthValue,
-            ampValue: ampValue,
-            phaseValue: phaseValue
-        });
-        setPointArray(pointValues);
-    }, [
-        waveType,
-        window,
-        WaveTypes,
-        widthValue,
-        ampValue,
-        phaseValue
-    ]);
     var renderFuction = function() {
-        // workerRef?.current?.postMessage({
-        //   type: 'updateAnimation',
-        //   rampValue: data,
-        //   height: height * 0.75,
-        //   width,
-        // });
         if (workerRef === null || workerRef === void 0 ? void 0 : workerRef.current) {
             workerRef.current.onmessage = function(e) {
                 var _document_getElementById, _document;
@@ -7481,18 +7142,6 @@ function LFOVisualizer(param) {
             };
         }
     };
-    useEffect(function() {
-        var _workerRef_current;
-        workerRef === null || workerRef === void 0 ? void 0 : (_workerRef_current = workerRef.current) === null || _workerRef_current === void 0 ? void 0 : _workerRef_current.postMessage({
-            type: 'updatePointArray',
-            pointArray: pointArray,
-            height: height * 0.75,
-            width: width
-        });
-        renderFuction();
-    }, [
-        pointArray
-    ]);
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column
     }, /*#__PURE__*/ React__default.createElement(Box, {
@@ -7530,19 +7179,7 @@ function LFOVisualizer(param) {
         height: height,
         chartType: Chart.chartType.line,
         renderAs: Chart.renderAs.canvas
-    }))))), /*#__PURE__*/ React__default.createElement(Box, {
-        padding: [
-            Box.padding.xSmall,
-            Box.padding.none,
-            Box.padding.none,
-            Box.padding.none
-        ]
-    }, /*#__PURE__*/ React__default.createElement(LFOIntensityMeter, {
-        width: width + 16,
-        // height={125}
-        id: id,
-        intensityValues: pointArray
-    })));
+    }))))));
 }
 
 function _array_like_to_array$3(arr, len) {