@antimatter-audio/antimatter-ui 14.15.1 → 14.17.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import React__default, { useRef, useReducer, useCallback, createContext, useContext, useEffect, useState, useEffectEvent } from 'react';
+import React__default, { useEffect, useState, useRef, useReducer, useCallback, createContext, useContext, useEffectEvent } from 'react';
+import * as Juce from 'juce-framework-frontend';
 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';
 import { useGesture } from '@use-gesture/react';
 import * as d3 from 'd3';
 import { line, curveBasis, area, scaleLinear, stack, scaleOrdinal } from 'd3';
@@ -34,7 +34,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$g = "@theme static {\n  --color-brand: #bb68d9;\n  --color-brand-900: #1b181c;\n  /* --color-brand-900: #443342; */\n  --color-brand-700: #932eb8;\n  --color-brand-600: #ac47d1;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-brand-secondary: #18d6d6;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-lv1: #0e0e12;\n  --bg-lv2: #121216;\n  --bg-lv3: #16171d;\n  --bg-lv4: #212128;\n  --bg-lv5: #2b2b31;\n  --bg-lv6: #34343a;\n  --bg-lv7: #3b3b41;\n  --bg-lv8: #49494d;\n  --bg-lv9: #535357;\n  --bg-lv10: #797887;\n  --bg-lv11: #9999a7;\n  --bg-lv12: #c1c1c1;\n  --bg-selected: #2e2c33;\n\n  /* --bg-lv3-brightened: #1a1b21; */\n\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: default;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n.cursor-hidden * {\n  cursor: none !important;\n}\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n  background-color: var(--color-gray-600);\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: #252429;\n}\n\n* {\n  -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n  display: none;\n} */\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
+var css_248z$g = "@theme static {\n  --color-brand: #bb68d9;\n  --color-brand-900: #1b181c;\n  /* --color-brand-900: #443342; */\n  --color-brand-700: #932eb8;\n  --color-brand-600: #ac47d1;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-brand-secondary: #18d6d6;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-lv1: #0e0e12;\n  --bg-lv2: #121216;\n  --bg-lv3: #16171d;\n  --bg-lv4: #212128;\n  --bg-lv5: #2b2b31;\n  --bg-lv6: #3b3b44;\n  --bg-lv7: #4c4a54;\n  --bg-lv8: #595763;\n  --bg-lv9: #838091;\n  --bg-lv10: #9a96ab;\n  --bg-lv11: #9999a7;\n  --bg-lv12: #c1c1c1;\n  --bg-selected: #2e2c33;\n\n  /* --bg-lv3-brightened: #1a1b21; */\n\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.7rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: default;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n/* .cursor-hidden * {\n  cursor: none !important;\n} */\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n  background-color: var(--bg-lv4);\n  scrollbar-width: 3px;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: var(--bg-lv7);\n  border-radius: 6px;\n  width: 3px;\n}\n\n* {\n  -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n  display: none;\n} */\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
 styleInject(css_248z$g);
 
 var Spacing = /*#__PURE__*/ function(Spacing) {
@@ -96,6 +96,7 @@ var FontSizes = /*#__PURE__*/ function(FontSizes) {
     FontSizes["xSmall"] = "xs";
     FontSizes["small"] = "sm";
     FontSizes["medium"] = "md";
+    FontSizes["mediumSmall"] = "ms";
     FontSizes["large"] = "lg";
     FontSizes["xLarge"] = "xl";
     FontSizes["title"] = "title";
@@ -153,260 +154,14 @@ var ButtonType = /*#__PURE__*/ function(ButtonType) {
     return ButtonType;
 }({});
 
-function useObservable(param) {
-    var onFire = param.onFire;
-    var observers = useRef([]);
-    var subscribe = function(observer, id) {
-        var _observers_current;
-        if (((_observers_current = observers.current) === null || _observers_current === void 0 ? void 0 : _observers_current.find(function(item) {
-            return item[1] === id;
-        })) === undefined) {
-            observers.current.push([
-                observer,
-                id
-            ]);
-        }
-    };
-    var unsubscribe = function(observer, id) {
-        var _observers_current;
-        if (((_observers_current = observers.current) === null || _observers_current === void 0 ? void 0 : _observers_current.find(function(item) {
-            return item[1] === id;
-        })) !== undefined) {
-            var _observers_current1;
-            var index = (_observers_current1 = observers.current) === null || _observers_current1 === void 0 ? void 0 : _observers_current1.findIndex(function(item) {
-                return item[1] === id;
-            });
-            observers.current.splice(index, 1);
-        }
-    };
-    var fire = function() {
-        var _observers_current;
-        onFire();
-        (_observers_current = observers.current) === null || _observers_current === void 0 ? void 0 : _observers_current.forEach(function(observer) {
-            return observer[0]();
-        });
-    };
-    return {
-        subscribe: subscribe,
-        unsubscribe: unsubscribe,
-        fire: fire
-    };
-}
-
 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$2(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$i(arr);
-}
-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$2() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _to_consumable_array$2(arr) {
-    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$i(arr) || _non_iterable_spread$2();
-}
-function _unsupported_iterable_to_array$i(o, minLen) {
-    if (!o) return;
-    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$i(o, minLen);
-}
-// export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
-// mocks the `normalisedToScaledValue` internal method from JUCE
-// This will allow us to test the JS UI without needing access to the JUCE backend
-// ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
-function normalisedToScaled(param) {
-    var normalisedValue = param.normalisedValue, properties = param.properties;
-    var skew = properties.skew, end = properties.end, start = properties.start;
-    return Math.pow(normalisedValue, 1 / skew) * (end - start) + start;
-}
-// mocks the `getnormalisedValue` method from JUCE
-// This will allow us to test the JS UI without needing access to the JUCE backend
-function scaledToNormalised(param) {
-    var scaledValue = param.scaledValue, start = param.start, end = param.end, skew = param.skew;
-    return Math.pow((scaledValue - start) / (end - start), skew !== null && skew !== void 0 ? skew : 1);
-}
-var decimalToPercent = function(decimal) {
-    return Math.round(100 * (typeof decimal === 'string' ? parseFloat(decimal) : decimal));
-};
-var percentToDecimal = function(percent) {
-    return Math.round(0.01 * (typeof percent === 'string' ? parseFloat(percent) : percent));
-};
-var inputCharacterIsValid = function(char) {
-    var validCharacter = /^[\d.-]$/;
-    return validCharacter.test(char.toString());
-};
-var clamp = function(val) {
-    var min = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, max = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
-    return Math.max(min, Math.min(max, val));
-};
-function snapToLegalValue(param) {
-    var value = param.value, properties = param.properties;
-    var interval = properties.interval, start = properties.start, end = properties.end;
-    if (interval == 0) return value;
-    var roundedInterval = parseFloat(interval === null || interval === void 0 ? void 0 : interval.toFixed(2));
-    var formattedValue = start + roundedInterval * Math.floor((value - start) / roundedInterval + 0.5);
-    return clamp(parseFloat(formattedValue.toFixed(2)), start, end);
-}
-// const validNumber = /^-?\.?\d+(\.\d)?$/;
-// const lastNumberIsDigit = /\d$/;
-var validateInputChange = function(e) {
-    return e.nativeEvent.data === '' || e.nativeEvent.data === null || inputCharacterIsValid(e.nativeEvent.data);
-};
-var getValidValueForInput = function(param) {
-    var value = param.value, oldValue = param.oldValue, properties = param.properties;
-    var _splitValueArray_;
-    // TODO: Clean up
-    var matchCriteria = /^-?(?:\d+\.\d+|\d+|\.\d+)$/g;
-    var splitValue = value.toString().matchAll(matchCriteria);
-    var splitValueArray = _to_consumable_array$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) {
-        if (parseFloat(validValue) > end) {
-            return end;
-        } else if (parseFloat(validValue) < start) {
-            return start;
-        } else {
-            return snapToLegalValue({
-                value: parseFloat(validValue),
-                properties: properties
-            });
-        }
-    } else {
-        return oldValue;
-    }
-};
-var getBarTransformStyles = function(param) {
-    var polarity = param.polarity, orientation = param.orientation, normalisedValue = param.normalisedValue, isDisabled = param.isDisabled;
-    var wholeNumberNormalisedValue = normalisedValue * 100;
-    var unipolarValue = wholeNumberNormalisedValue ? parseFloat(wholeNumberNormalisedValue === null || wholeNumberNormalisedValue === void 0 ? void 0 : wholeNumberNormalisedValue.toFixed(2)) : 0;
-    var bipolarValue = (wholeNumberNormalisedValue - 50) / 100;
-    if (!isDisabled) {
-        if (polarity === Polarity.unipolar) {
-            return orientation === Orientation.horizontal ? {
-                width: unipolarValue ? "100%" : '1px',
-                height: '100%',
-                transform: unipolarValue ? "scale(".concat(Math.ceil(unipolarValue) * 0.01, ", 1)") : 'none',
-                transformOrigin: 'center left',
-                top: '0',
-                bottom: '0',
-                left: '0'
-            } : {
-                width: "100%",
-                height: unipolarValue ? '100%' : '1px',
-                transform: "scale(1, ".concat(Math.ceil(unipolarValue) * 0.01, ")"),
-                transformOrigin: 'bottom center',
-                top: '0',
-                bottom: '0',
-                left: '0'
-            };
-        } else {
-            return orientation === Orientation.horizontal ? {
-                width: bipolarValue ? "100%" : '1px',
-                height: '100%',
-                transform: bipolarValue ? "scale(".concat(bipolarValue, ", 1)") : 'none',
-                transformOrigin: 'left center',
-                top: '0',
-                bottom: '0',
-                left: '50%'
-            } : {
-                width: "100%",
-                height: bipolarValue ? '100%' : '1px',
-                transform: bipolarValue ? "scale(1, ".concat(bipolarValue, ")") : 'none',
-                transformOrigin: 'bottom center',
-                bottom: '50%',
-                left: '0',
-                right: '0'
-            };
-        }
-    } else return;
-};
-var randomizeValue = function(min, max) {
-    return Math.random() * (max - min) + min;
-};
-var incrementValue = function(param) {
-    var incomingVal = param.incomingVal, prevVal = param.prevVal, interval = param.interval;
-    var getNormalisedInterval = function() {
-        if (interval) {
-            if (interval >= 1) {
-                return interval * 0.01;
-            } else {
-                return interval;
-            }
-        } else {
-            return 0.01;
-        }
-    };
-    var normalisedInterval = getNormalisedInterval();
-    var newValue = (prevVal !== null && prevVal !== void 0 ? prevVal : 0) + incomingVal * // (interval && interval.toString().length > 4
-    //   ? 4
-    //   : 0.4) *
-    normalisedInterval;
-    return clamp(newValue);
-};
-var timerFlag = null;
-function throttle(mainFunction, delay) {
-    return function() {
-        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
-            args[_key] = arguments[_key];
-        }
-        if (timerFlag === null) {
-            mainFunction.apply(void 0, _to_consumable_array$2(args));
-            timerFlag = setTimeout(function() {
-                timerFlag = null;
-            }, delay);
-        }
-    };
-}
-
-function _array_like_to_array$h(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
 function _array_with_holes$h(arr) {
     if (Array.isArray(arr)) return 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 {
-        var info = gen[key](arg);
-        var value = info.value;
-    } catch (error) {
-        reject(error);
-        return;
-    }
-    if (info.done) {
-        resolve(value);
-    } else {
-        Promise.resolve(value).then(_next, _throw);
-    }
-}
-function _async_to_generator$4(fn) {
-    return function() {
-        var self = this, args = arguments;
-        return new Promise(function(resolve, reject) {
-            var gen = fn.apply(self, args);
-            function _next(value) {
-                asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, "next", value);
-            }
-            function _throw(err) {
-                asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, "throw", err);
-            }
-            _next(undefined);
-        });
-    };
-}
 function _define_property$o(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -420,9 +175,6 @@ function _define_property$o(obj, key, value) {
     }
     return obj;
 }
-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) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -450,9 +202,6 @@ 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$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$n(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -468,11 +217,168 @@ function _object_spread$n(target) {
     }
     return target;
 }
-function ownKeys$4(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        keys.push.apply(keys, symbols);
+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();
+}
+function _unsupported_iterable_to_array$i(o, minLen) {
+    if (!o) return;
+    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$i(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 ? [
+        Spacing.small
+    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
+        Spacing.none
+    ] : _param_margin, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, size = param.size;
+    var _React_useState = _sliced_to_array$h(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
+    var buttonState = Juce.getToggleState(id);
+    var isLocalhost = window.location.hostname === 'localhost';
+    // const { updateModSlotRowTarget } = useGlobalContext();
+    // Update the local state when the ID changes
+    useEffect(function() {
+        setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
+    }, [
+        id
+    ]);
+    // Sets up listeners to handle changes on the backend
+    useEffect(function() {
+        if (!isLocalhost && !onClick) {
+            var valueListenerId = buttonState === null || buttonState === void 0 ? void 0 : buttonState.valueChangedEvent.addListener(function() {
+                setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
+            });
+            return function cleanup() {
+                buttonState === null || buttonState === void 0 ? void 0 : buttonState.valueChangedEvent.removeListener(valueListenerId);
+            };
+        } else {
+            return;
+        }
+    });
+    var handleMouseDown = function(e) {
+        // TODO: handle this in a callback?
+        // updateModSlotRowTarget({
+        //   value: id,
+        //   saveToBackend: false,
+        // });
+        if (!onClick) {
+            e.preventDefault();
+            if (type === ButtonType.momentary) {
+                setIsSelected(true);
+                buttonState.setValue(true);
+            } else {
+                setIsSelected(!isSelected);
+                buttonState.setValue(!isSelected);
+            }
+        }
+    };
+    var handleMouseUp = function() {
+        if (!onClick) {
+            setIsSelected(false);
+            buttonState.setValue(false);
+        }
+    };
+    React__default.useEffect(function() {
+        if (type === ButtonType.momentary && !onClick) {
+            window.addEventListener('mouseup', handleMouseUp);
+            return function() {
+                window.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+        return;
+    }, [
+        isSelected
+    ]);
+    var _padding_, _padding_1, _padding_2, _ref, _margin_, _margin_1, _margin_2, _ref1;
+    return /*#__PURE__*/ React__default.createElement("button", {
+        id: id,
+        onMouseDown: handleMouseDown,
+        disabled: disabled,
+        onClick: onClick && onClick,
+        style: _object_spread$n({
+            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], ")"),
+            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+            marginTop: "var(--p-".concat(margin[0], ")"),
+            marginRight: "var(--p-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
+            marginBottom: "var(--p-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
+            marginLeft: "var(--p-".concat((_ref1 = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref1 !== void 0 ? _ref1 : margin[0], ")")
+        }, style),
+        className: classnames('Button', isSelected && 'selected', "".concat(size), className)
+    }, size !== ButtonSize.xSmall && (text ? text : children));
+}
+Button.padding = Spacing;
+Button.margin = Spacing;
+Button.type = ButtonType;
+Button.size = ButtonSize;
+
+var css_248z$d = ".IconButton {\n  cursor: pointer;\n}\n.IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n";
+styleInject(css_248z$d);
+
+var JustifyContent = /*#__PURE__*/ function(JustifyContent) {
+    JustifyContent["flexStart"] = "flex-start";
+    JustifyContent["flexEnd"] = "flex-end";
+    JustifyContent["center"] = "center";
+    JustifyContent["spaceBetween"] = "space-between";
+    JustifyContent["spaceAround"] = "space-around";
+    JustifyContent["spaceEvenly"] = "space-evenly";
+    return JustifyContent;
+}({});
+var AlignItems = /*#__PURE__*/ function(AlignItems) {
+    AlignItems["flexStart"] = "flex-start";
+    AlignItems["flexEnd"] = "flex-end";
+    AlignItems["center"] = "center";
+    AlignItems["stretch"] = "stretch";
+    AlignItems["baseline"] = "baseline";
+    return AlignItems;
+}({});
+var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
+    LayoutTags["header"] = "header";
+    LayoutTags["main"] = "main";
+    LayoutTags["section"] = "section";
+    LayoutTags["div"] = "div";
+    LayoutTags["footer"] = "footer";
+    LayoutTags["ul"] = "ul";
+    LayoutTags["li"] = "li";
+    return LayoutTags;
+}({});
+
+function _define_property$n(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$m(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$n(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$4(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        keys.push.apply(keys, symbols);
     }
     return keys;
 }
@@ -487,947 +393,186 @@ 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$h(arr, i) || _non_iterable_rest$h();
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
 }
-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 _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
 }
-function _unsupported_iterable_to_array$h(o, minLen) {
-    if (!o) return;
-    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$h(o, minLen);
+var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
+    BoxDisplay["flex"] = "flex";
+    BoxDisplay["block"] = "block";
+    return BoxDisplay;
+}(BoxDisplay || {});
+function Box(_param) {
+    var className = _param.className, style = _param.style, children = _param.children, flex = _param.flex, key = _param.key, onClick = _param.onClick, _param_alignItems = _param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = _param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = _param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = _param.width, width = _param_width === void 0 ? Width.full : _param_width, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, height = _param.height, _param_borderWidth = _param.borderWidth, borderWidth = _param_borderWidth === void 0 ? [
+        '0px',
+        '0px',
+        '0px',
+        '0px'
+    ] : _param_borderWidth, _param_borderStyle = _param.borderStyle, borderStyle = _param_borderStyle === void 0 ? BorderStyles.solid : _param_borderStyle, _param_borderColor = _param.borderColor, borderColor = _param_borderColor === void 0 ? 'var(--bg-lv8)' : _param_borderColor, _param_flexDirection = _param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _param_fullHeight = _param.fullHeight, fullHeight = _param_fullHeight === void 0 ? false : _param_fullHeight, _param_padding = _param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none,
+        Spacing.none,
+        Spacing.none,
+        Spacing.none
+    ] : _param_padding, _param_gap = _param.gap, gap = _param_gap === void 0 ? Spacing.xSmall : _param_gap, _param_tag = _param.tag, tag = _param_tag === void 0 ? LayoutTags.div : _param_tag, rest = _object_without_properties(_param, [
+        "className",
+        "style",
+        "children",
+        "flex",
+        "key",
+        "onClick",
+        "alignItems",
+        "justifyContent",
+        "display",
+        "width",
+        "flexWrap",
+        "height",
+        "borderWidth",
+        "borderStyle",
+        "borderColor",
+        "flexDirection",
+        "fullHeight",
+        "padding",
+        "gap",
+        "tag"
+    ]);
+    var Tag = tag;
+    var _padding_, _padding_1, _padding_2, _ref;
+    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$4(_object_spread$m({
+        // id="globalValues"
+        key: key,
+        className: className,
+        onClick: onClick
+    }, rest), {
+        style: _object_spread$m({
+            flexWrap: flexWrap,
+            display: display,
+            width: width,
+            gap: "var(--gap-".concat(gap, ")"),
+            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], ")"),
+            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+            borderTop: borderWidth[0],
+            borderRight: borderWidth[1] !== null ? borderWidth[1] : borderWidth[0],
+            borderBottom: borderWidth[2] !== null ? borderWidth[2] : borderWidth[0],
+            borderLeft: borderWidth[3] !== null ? borderWidth[3] : borderWidth[1] !== null ? borderWidth[1] : borderWidth[0],
+            borderColor: borderColor,
+            borderStyle: borderStyle,
+            maxWidth: width,
+            height: fullHeight ? '100%' : height,
+            flexDirection: flexDirection === FlexDirection.row ? FlexDirection.row : FlexDirection.column,
+            justifyContent: "".concat(justifyContent),
+            alignItems: "".concat(alignItems),
+            flex: flex ? flex : ''
+        }, style)
+    }), children);
 }
-function _ts_generator$4(thisArg, body) {
-    var f, y, t, _ = {
-        label: 0,
-        sent: function() {
-            if (t[0] & 1) throw t[1];
-            return t[1];
-        },
-        trys: [],
-        ops: []
-    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
-        return this;
-    }), g;
-    function verb(n) {
-        return function(v) {
-            return step([
-                n,
-                v
-            ]);
-        };
+// Object.assign(Layout, width, height, ALIGN, JUSTIFY, DIRECTION, SPACING);
+Box.display = BoxDisplay;
+Box.alignItems = AlignItems;
+Box.justifyContent = JustifyContent;
+Box.gap = Spacing;
+Box.flexDirection = FlexDirection;
+Box.width = Width;
+Box.height = Height;
+Box.padding = Spacing;
+Box.flexWrap = FlexWrap;
+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) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
     }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while(g && (g = 0, op[0] && (_ = 0)), _)try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [
-                op[0] & 2,
-                t.value
-            ];
-            switch(op[0]){
-                case 0:
-                case 1:
-                    t = op;
-                    break;
-                case 4:
-                    _.label++;
-                    return {
-                        value: op[1],
-                        done: false
-                    };
-                case 5:
-                    _.label++;
-                    y = op[1];
-                    op = [
-                        0
-                    ];
-                    continue;
-                case 7:
-                    op = _.ops.pop();
-                    _.trys.pop();
-                    continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
-                        _ = 0;
-                        continue;
-                    }
-                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
-                        _.label = op[1];
-                        break;
-                    }
-                    if (op[0] === 6 && _.label < t[1]) {
-                        _.label = t[1];
-                        t = op;
-                        break;
-                    }
-                    if (t && _.label < t[2]) {
-                        _.label = t[2];
-                        _.ops.push(op);
-                        break;
-                    }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop();
-                    continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) {
-            op = [
-                6,
-                e
-            ];
-            y = 0;
-        } finally{
-            f = t = 0;
+    return obj;
+}
+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);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
         }
-        if (op[0] & 5) throw op[1];
-        return {
-            value: op[0] ? op[1] : void 0,
-            done: true
-        };
+        ownKeys.forEach(function(key) {
+            _define_property$m(target, key, source[key]);
+        });
     }
+    return target;
 }
-// Initial state
-var defaultGlobalStateValue = {
-    highlightedItem: {
-        label: 'Antimatter Audio',
-        value: 0
-    },
-    // focusedItem: '',
-    allParameters: [],
-    automatableParamsList: [],
-    automatableParamLabels: [],
-    parameterTypes: [],
-    modSlotTargets: {},
-    modSlotIds: [],
-    modSlotPreview: {
-        slotId: '',
-        targetIndex: 0,
-        isEditable: false
-    },
-    modSlotParams: [],
-    modSlotParamLabels: [],
-    defaultParamValues: [],
-    advancedView: false
-};
-// Reducer function to handle state updates
-var reducer = function(state, action) {
-    switch(action.type){
-        case 'HIGHLIGHTED_ITEM_CHANGED':
-            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$n({}, state), {
-                advancedView: action.payload
-            });
-        case 'AUTOMATABLE_PARAMS_LIST_RECEIVED':
-            return _object_spread_props$4(_object_spread$n({}, state), {
-                automatableParamsList: action.payload
-            });
-        case 'AUTOMATABLE_PARAM_LABELS_RECEIVED':
-            return _object_spread_props$4(_object_spread$n({}, state), {
-                automatableParamLabels: action.payload
-            });
-        case 'PARAMETER_TYPES_RECEIVED':
-            return _object_spread_props$4(_object_spread$n({}, state), {
-                parameterTypes: action.payload
-            });
-        case 'ALL_PARAMETERS_RECEIVED':
-            return _object_spread_props$4(_object_spread$n({}, state), {
-                allParameters: action.payload
-            });
-        case 'MOD_SLOTS_RECEIVED':
-            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$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$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$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$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$n({}, state), {
-                    modSlotPreview: _object_spread_props$4(_object_spread$n({}, state.modSlotPreview), {
-                        slotId: action === null || action === void 0 ? void 0 : action.payload
-                    })
-                });
-            }
-        case 'SET_NEW_MOD_SLOT_PREVIEW':
-            {
-                var _state_modSlotIds_find;
-                return _object_spread_props$4(_object_spread$n({}, state), {
-                    modSlotPreview: {
-                        slotId: (_state_modSlotIds_find = state.modSlotIds.find(function(item) {
-                            return state.modSlotTargets[item] <= 0;
-                        })) !== null && _state_modSlotIds_find !== void 0 ? _state_modSlotIds_find : '',
-                        isEditable: false,
-                        targetIndex: 0
-                    }
-                });
-            }
-        case 'CLEAR_MOD_SLOT_PREVIEW':
-            {
-                return _object_spread_props$4(_object_spread$n({}, state), {
-                    modSlotPreview: {
-                        slotId: '',
-                        isEditable: false,
-                        targetIndex: 0
-                    }
-                });
-            }
-        case 'MOD_SLOT_PREVIEW_IS_EDITABLE_UPDATED':
-            {
-                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$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$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$n({}, state), {
-                modSlotParamLabels: action === null || action === void 0 ? void 0 : action.payload
-            });
-        default:
-            return state;
-    }
-};
-// Create the context
-var GlobalContext = /*#__PURE__*/ createContext({
-    globalState: defaultGlobalStateValue
-});
-// Custom hook for consuming context with a selector
-function useGlobalContext(selector) {
-    var localContext = useContext(GlobalContext);
-    return selector ? selector(localContext) : localContext;
-}
-// Context provider
-function GlobalContextProvider(param) {
-    var children = param.children;
-    var _useReducer = _sliced_to_array$h(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
-    var highlightedItemChanged = useCallback(function(highlightedItem) {
-        dispatch({
-            type: 'HIGHLIGHTED_ITEM_CHANGED',
-            payload: highlightedItem
-        });
-    }, []);
-    // const focusedItemChanged = useCallback((focusedItem: string) => {
-    //   dispatch({ type: 'FOCUSED_ITEM_CHANGED', payload: focusedItem });
-    // }, []);
-    var advancedViewToggled = useCallback(function(advancedView) {
-        dispatch({
-            type: 'ADVANCED_VIEW_TOGGLED',
-            payload: advancedView
-        });
-    }, []);
-    var automatableParamsListReceived = useCallback(function(automatableParamsList) {
-        dispatch({
-            type: 'AUTOMATABLE_PARAMS_LIST_RECEIVED',
-            payload: [
-                'none'
-            ].concat(_to_consumable_array$1(automatableParamsList))
-        });
-    }, []);
-    var allParametersReceived = useCallback(function(allParameters) {
-        dispatch({
-            type: 'ALL_PARAMETERS_RECEIVED',
-            payload: allParameters
-        });
-    }, []);
-    var parameterTypesReceived = useCallback(function(parameterTypes) {
-        dispatch({
-            type: 'PARAMETER_TYPES_RECEIVED',
-            payload: parameterTypes
-        });
-    }, []);
-    var automatableParamLabelsReceived = useCallback(function(automatableParamLabels) {
-        dispatch({
-            type: 'AUTOMATABLE_PARAM_LABELS_RECEIVED',
-            payload: automatableParamLabels
-        });
-    }, []);
-    var defaultParamValuesReceived = useCallback(function(defaultParamValues) {
-        dispatch({
-            type: 'DEFAULT_PARAM_VALUES_RECEIVED',
-            payload: defaultParamValues
-        });
-    }, []);
-    var modSlotsReceived = useCallback(function(modSlots) {
-        dispatch({
-            type: 'MOD_SLOTS_RECEIVED',
-            payload: modSlots
-        });
-    }, []);
-    var modSlotRowTargetsReceived = useCallback(function(modSlots) {
-        dispatch({
-            type: 'MOD_SLOT_ROW_TARGETS_RECEIVED',
-            payload: modSlots
-        });
-    }, []);
-    var modSlotRowTargetUpdated = useCallback(function(modSlot) {
-        dispatch({
-            type: 'MOD_SLOT_ROW_TARGET_UPDATED',
-            payload: modSlot
-        });
-    }, []);
-    var modSlotPreviewTargetIndexUpdated = useCallback(function(targetIndex) {
-        dispatch({
-            type: 'MOD_SLOT_PREVIEW_TARGET_INDEX_UPDATED',
-            payload: targetIndex
-        });
-    }, []);
-    var modSlotPreviewIsEditableUpdated = useCallback(function(isEditable) {
-        dispatch({
-            type: 'MOD_SLOT_PREVIEW_IS_EDITABLE_UPDATED',
-            payload: isEditable
-        });
-    }, []);
-    var modSlotPreviewSlotIdUpdated = useCallback(function(slotId) {
-        dispatch({
-            type: 'MOD_SLOT_PREVIEW_SLOT_ID_UPDATED',
-            payload: slotId
-        });
-    }, []);
-    var setNewModSlotPreview = useCallback(function() {
-        dispatch({
-            type: 'SET_NEW_MOD_SLOT_PREVIEW',
-            payload: null
-        });
-    }, []);
-    var clearModSlotPreview = useCallback(function() {
-        dispatch({
-            type: 'CLEAR_MOD_SLOT_PREVIEW',
-            payload: null
-        });
-    }, []);
-    var modSlotParamsListReceived = useCallback(function(modSlotParams) {
-        dispatch({
-            type: 'MOD_SLOT_PARAMS_LIST_RECEIVED',
-            payload: modSlotParams
-        });
-    }, []);
-    var modSlotParamLabelsReceived = useCallback(function(modSlotParamLables) {
-        dispatch({
-            type: 'MOD_SLOT_PARAM_LABELS_RECIEVED',
-            payload: modSlotParamLables
-        });
-    }, []);
-    var setDefaultParameter = function(id) {
-        var paramIndex = state === null || state === void 0 ? void 0 : state.allParameters.indexOf(id);
-        var defaultValue = state === null || state === void 0 ? void 0 : state.defaultParamValues[paramIndex];
-        var parameterType = state === null || state === void 0 ? void 0 : state.parameterTypes[paramIndex];
-        if (parameterType === 'slider') {
-            var _sliderState_properties, _sliderState_properties1, _sliderState_properties2;
-            var sliderState = Juce.getSliderState(id);
-            var normalisedDefaultValue = scaledToNormalised({
-                scaledValue: defaultValue,
-                start: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start,
-                end: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end,
-                skew: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.skew
-            });
-            sliderState.setNormalisedValue(normalisedDefaultValue);
-        // if(state?.modSlots)
-        } else if (parameterType === 'combobox') {
-            var comboBoxState = Juce.getComboBoxState(id);
-            comboBoxState.setChoiceIndex(defaultValue);
-        }
-    };
-    var getDefaultParameter = function(id) {
-        var paramIndex = state === null || state === void 0 ? void 0 : state.allParameters.indexOf(id);
-        return state === null || state === void 0 ? void 0 : state.defaultParamValues[paramIndex];
-    };
-    // const setModSlotTarget = (newTarget: number, rowId: string) => {
-    //   const comboBoxState = Juce.getComboBoxState(rowId);
-    //   comboBoxState?.setChoiceIndex(newTarget);
-    // };
-    var refetchModSlots = function() {
-        return _async_to_generator$4(function() {
-            var getAllModSlotsFunc, modSlotsData, e;
-            return _ts_generator$4(this, function(_state) {
-                switch(_state.label){
-                    case 0:
-                        _state.trys.push([
-                            0,
-                            2,
-                            ,
-                            3
-                        ]);
-                        getAllModSlotsFunc = Juce.getNativeFunction('getAllModSlots');
-                        return [
-                            4,
-                            getAllModSlotsFunc()
-                        ];
-                    case 1:
-                        modSlotsData = _state.sent();
-                        modSlotRowTargetsReceived(modSlotsData || []);
-                        return [
-                            3,
-                            3
-                        ];
-                    case 2:
-                        e = _state.sent();
-                        console.log(e);
-                        return [
-                            3,
-                            3
-                        ];
-                    case 3:
-                        return [
-                            2
-                        ];
-                }
-            });
-        })();
-    };
-    var setModSlotRowTargetAsPreview = function(param) {
-        var paramIndex = param.paramIndex, paramId = param.paramId;
-        var _Object_values;
-        // Setting a row target for a preview row enables the preview row to be interactive.
-        // This row target will not be saved to Juce until a user sets a new value for one of the inputs in the row.
-        // This function only stores the target in local state and does NOT save anything to the Juce state.
-        var targetIndex = paramId ? state.automatableParamsList.indexOf(paramId) : paramIndex;
-        if (!((_Object_values = Object.values(state.modSlotTargets)) === null || _Object_values === void 0 ? void 0 : _Object_values.includes(targetIndex))) {
-            setNewModSlotPreview();
-            modSlotPreviewTargetIndexUpdated(targetIndex);
-            modSlotPreviewIsEditableUpdated(true);
-        }
-    };
-    var saveModSlotPreviewRowTargetToBackend = function(value, rowId) {
-        var _state_modSlotPreview, _state_modSlotPreview1, _state_modSlotPreview2;
-        var rowState = Juce.getComboBoxState(rowId);
-        // If the row is a preview row, setting a target will remove the row's preview status.
-        // In this scenario, we want to clear the current row's preview status and set a new preview row (if there is an unassigned mod slot available)
-        var defaultParameter = getDefaultParameter(rowId);
-        if (((_state_modSlotPreview = state.modSlotPreview) === null || _state_modSlotPreview === void 0 ? void 0 : _state_modSlotPreview.slotId) && ((_state_modSlotPreview1 = state.modSlotPreview) === null || _state_modSlotPreview1 === void 0 ? void 0 : _state_modSlotPreview1.targetIndex) && ((_state_modSlotPreview2 = state.modSlotPreview) === null || _state_modSlotPreview2 === void 0 ? void 0 : _state_modSlotPreview2.slotId) === rowId && defaultParameter !== null && defaultParameter !== undefined && value !== defaultParameter) {
-            var _state_modSlotPreview3;
-            modSlotRowTargetUpdated({
-                id: state.modSlotPreview.slotId,
-                value: state.modSlotPreview.targetIndex
-            });
-            rowState === null || rowState === void 0 ? void 0 : rowState.setChoiceIndex((_state_modSlotPreview3 = state.modSlotPreview) === null || _state_modSlotPreview3 === void 0 ? void 0 : _state_modSlotPreview3.targetIndex);
-            clearModSlotPreview();
-            setNewModSlotPreview();
-            refetchModSlots();
-        }
-    };
-    var updateModSlotRowTarget = function(value, rowId) {
-        // An index of 0 = 'none' in the mod slot target list.
-        // If the new row target value is 0, the user is deleting the row's target.
-        // Clear all of the values that have been set for that target on the front end and in JUCE.
-        var rowState = Juce.getComboBoxState(rowId);
-        rowState === null || rowState === void 0 ? void 0 : rowState.setChoiceIndex(value);
-        if (rowId === state.modSlotPreview.slotId) {
-            clearModSlotPreview();
-        }
-        if (value === 0) {
-            var _state_modSlotParams_rowId, _state_modSlotParams;
-            state === null || state === void 0 ? void 0 : (_state_modSlotParams = state.modSlotParams) === null || _state_modSlotParams === void 0 ? void 0 : (_state_modSlotParams_rowId = _state_modSlotParams[rowId]) === null || _state_modSlotParams_rowId === void 0 ? void 0 : _state_modSlotParams_rowId.forEach(function(item) {
-                setDefaultParameter(item);
-            });
-            clearModSlotPreview();
-            setNewModSlotPreview();
-        }
-        modSlotRowTargetUpdated({
-            id: rowId,
-            value: value
-        });
-        refetchModSlots();
-    };
-    var onFire = function() {
-        var //@ts-expect-error
-        _window___JUCE___backend, _window___JUCE__, _window;
-        (_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.emitEvent('setRandom', {});
-    };
-    var useRandom = useObservable({
-        onFire: onFire
-    });
-    var value = {
-        globalState: state,
-        highlightedItemChanged: highlightedItemChanged,
-        // focusedItemChanged,
-        clearModSlotPreview: clearModSlotPreview,
-        setNewModSlotPreview: setNewModSlotPreview,
-        modSlotPreviewSlotIdUpdated: modSlotPreviewSlotIdUpdated,
-        modSlotPreviewTargetIndexUpdated: modSlotPreviewTargetIndexUpdated,
-        modSlotPreviewIsEditableUpdated: modSlotPreviewIsEditableUpdated,
-        advancedViewToggled: advancedViewToggled,
-        automatableParamsListReceived: automatableParamsListReceived,
-        automatableParamLabelsReceived: automatableParamLabelsReceived,
-        parameterTypesReceived: parameterTypesReceived,
-        allParametersReceived: allParametersReceived,
-        defaultParamValuesReceived: defaultParamValuesReceived,
-        setDefaultParameter: setDefaultParameter,
-        getDefaultParameter: getDefaultParameter,
-        modSlotsReceived: modSlotsReceived,
-        modSlotRowTargetsReceived: modSlotRowTargetsReceived,
-        // setModSlotTarget,
-        modSlotParamsListReceived: modSlotParamsListReceived,
-        modSlotParamLabelsReceived: modSlotParamLabelsReceived,
-        setModSlotRowTargetAsPreview: setModSlotRowTargetAsPreview,
-        saveModSlotPreviewRowTargetToBackend: saveModSlotPreviewRowTargetToBackend,
-        updateModSlotRowTarget: updateModSlotRowTarget,
-        useRandom: useRandom
-    };
-    return /*#__PURE__*/ React__default.createElement(GlobalContext.Provider, {
-        value: value
-    }, children);
-}
-
-function _array_like_to_array$g(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes$g(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _define_property$n(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 _iterable_to_array_limit$g(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest$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$m(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$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$g(arr, i) || _non_iterable_rest$g();
-}
-function _unsupported_iterable_to_array$g(o, minLen) {
-    if (!o) return;
-    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$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 ? [
-        Spacing.small
-    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
-        Spacing.none
-    ] : _param_margin, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, size = param.size;
-    var _React_useState = _sliced_to_array$g(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
-    var buttonState = Juce.getToggleState(id);
-    var isLocalhost = window.location.hostname === 'localhost';
-    var setModSlotRowTargetAsPreview = useGlobalContext().setModSlotRowTargetAsPreview;
-    // Update the local state when the ID changes
-    useEffect(function() {
-        setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
-    }, [
-        id
-    ]);
-    // Sets up listeners to handle changes on the backend
-    useEffect(function() {
-        if (!isLocalhost && !onClick) {
-            var valueListenerId = buttonState === null || buttonState === void 0 ? void 0 : buttonState.valueChangedEvent.addListener(function() {
-                setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
-            });
-            return function cleanup() {
-                buttonState === null || buttonState === void 0 ? void 0 : buttonState.valueChangedEvent.removeListener(valueListenerId);
-            };
-        } else {
-            return;
-        }
-    });
-    var handleMouseDown = function(e) {
-        // TODO: handle this in a callback?
-        setModSlotRowTargetAsPreview({
-            paramId: id
-        });
-        if (!onClick) {
-            e.preventDefault();
-            if (type === ButtonType.momentary) {
-                setIsSelected(true);
-                buttonState.setValue(true);
-            } else {
-                setIsSelected(!isSelected);
-                buttonState.setValue(!isSelected);
-            }
-        }
-    };
-    var handleMouseUp = function() {
-        if (!onClick) {
-            setIsSelected(false);
-            buttonState.setValue(false);
-        }
-    };
-    React__default.useEffect(function() {
-        if (type === ButtonType.momentary && !onClick) {
-            window.addEventListener('mouseup', handleMouseUp);
-            return function() {
-                window.removeEventListener('mouseup', handleMouseUp);
-            };
-        }
-        return;
-    }, [
-        isSelected
-    ]);
-    var _padding_, _padding_1, _padding_2, _ref, _margin_, _margin_1, _margin_2, _ref1;
-    return /*#__PURE__*/ React__default.createElement("button", {
-        id: id,
-        onMouseDown: handleMouseDown,
-        disabled: disabled,
-        onClick: onClick && onClick,
-        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], ")"),
-            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
-            marginTop: "var(--p-".concat(margin[0], ")"),
-            marginRight: "var(--p-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
-            marginBottom: "var(--p-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
-            marginLeft: "var(--p-".concat((_ref1 = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref1 !== void 0 ? _ref1 : margin[0], ")")
-        }, style),
-        className: classnames('Button', isSelected && 'selected', "".concat(size), className)
-    }, size !== ButtonSize.xSmall && (text ? text : children));
-}
-Button.padding = Spacing;
-Button.margin = Spacing;
-Button.type = ButtonType;
-Button.size = ButtonSize;
-
-var css_248z$d = ".IconButton {\n  cursor: pointer;\n}\n.IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n";
-styleInject(css_248z$d);
-
-var JustifyContent = /*#__PURE__*/ function(JustifyContent) {
-    JustifyContent["flexStart"] = "flex-start";
-    JustifyContent["flexEnd"] = "flex-end";
-    JustifyContent["center"] = "center";
-    JustifyContent["spaceBetween"] = "space-between";
-    JustifyContent["spaceAround"] = "space-around";
-    JustifyContent["spaceEvenly"] = "space-evenly";
-    return JustifyContent;
-}({});
-var AlignItems = /*#__PURE__*/ function(AlignItems) {
-    AlignItems["flexStart"] = "flex-start";
-    AlignItems["flexEnd"] = "flex-end";
-    AlignItems["center"] = "center";
-    AlignItems["stretch"] = "stretch";
-    AlignItems["baseline"] = "baseline";
-    return AlignItems;
-}({});
-var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
-    LayoutTags["header"] = "header";
-    LayoutTags["main"] = "main";
-    LayoutTags["section"] = "section";
-    LayoutTags["div"] = "div";
-    LayoutTags["footer"] = "footer";
-    LayoutTags["ul"] = "ul";
-    LayoutTags["li"] = "li";
-    return LayoutTags;
-}({});
-
-function _define_property$m(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$l(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$m(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys$3(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props$3(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$3(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _object_without_properties(source, excluded) {
-    if (source == null) return {};
-    var target = _object_without_properties_loose(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
-    BoxDisplay["flex"] = "flex";
-    BoxDisplay["block"] = "block";
-    return BoxDisplay;
-}(BoxDisplay || {});
-function Box(_param) {
-    var className = _param.className, style = _param.style, children = _param.children, flex = _param.flex, key = _param.key, onClick = _param.onClick, _param_alignItems = _param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = _param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = _param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = _param.width, width = _param_width === void 0 ? Width.full : _param_width, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, height = _param.height, _param_borderWidth = _param.borderWidth, borderWidth = _param_borderWidth === void 0 ? [
-        '0px',
-        '0px',
-        '0px',
-        '0px'
-    ] : _param_borderWidth, _param_borderStyle = _param.borderStyle, borderStyle = _param_borderStyle === void 0 ? BorderStyles.solid : _param_borderStyle, _param_borderColor = _param.borderColor, borderColor = _param_borderColor === void 0 ? 'var(--bg-lv8)' : _param_borderColor, _param_flexDirection = _param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _param_fullHeight = _param.fullHeight, fullHeight = _param_fullHeight === void 0 ? false : _param_fullHeight, _param_padding = _param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none,
-        Spacing.none,
-        Spacing.none,
-        Spacing.none
-    ] : _param_padding, _param_gap = _param.gap, gap = _param_gap === void 0 ? Spacing.xSmall : _param_gap, _param_tag = _param.tag, tag = _param_tag === void 0 ? LayoutTags.div : _param_tag, rest = _object_without_properties(_param, [
-        "className",
-        "style",
-        "children",
-        "flex",
-        "key",
-        "onClick",
-        "alignItems",
-        "justifyContent",
-        "display",
-        "width",
-        "flexWrap",
-        "height",
-        "borderWidth",
-        "borderStyle",
-        "borderColor",
-        "flexDirection",
-        "fullHeight",
-        "padding",
-        "gap",
-        "tag"
-    ]);
-    var Tag = tag;
-    var _padding_, _padding_1, _padding_2, _ref;
-    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$l({
-            flexWrap: flexWrap,
-            display: display,
-            width: width,
-            gap: "var(--gap-".concat(gap, ")"),
-            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], ")"),
-            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
-            borderTop: borderWidth[0],
-            borderRight: borderWidth[1] !== null ? borderWidth[1] : borderWidth[0],
-            borderBottom: borderWidth[2] !== null ? borderWidth[2] : borderWidth[0],
-            borderLeft: borderWidth[3] !== null ? borderWidth[3] : borderWidth[1] !== null ? borderWidth[1] : borderWidth[0],
-            borderColor: borderColor,
-            borderStyle: borderStyle,
-            maxWidth: width,
-            height: fullHeight ? '100%' : height,
-            flexDirection: flexDirection === FlexDirection.row ? FlexDirection.row : FlexDirection.column,
-            justifyContent: "".concat(justifyContent),
-            alignItems: "".concat(alignItems),
-            flex: flex ? flex : ''
-        }, style)
-    }), children);
-}
-// Object.assign(Layout, width, height, ALIGN, JUSTIFY, DIRECTION, SPACING);
-Box.display = BoxDisplay;
-Box.alignItems = AlignItems;
-Box.justifyContent = JustifyContent;
-Box.gap = Spacing;
-Box.flexDirection = FlexDirection;
-Box.width = Width;
-Box.height = Height;
-Box.padding = Spacing;
-Box.flexWrap = FlexWrap;
-Box.tag = LayoutTags;
-
-var css_248z$c = ".Icon svg {\n  width: 100%;\n}\n";
-styleInject(css_248z$c);
-
-function _define_property$l(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$k(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$l(target, key, source[key]);
-        });
-    }
-    return target;
-}
-var Icons = /*#__PURE__*/ function(Icons) {
-    Icons["undo"] = "Undo";
-    Icons["redo"] = "Redo";
-    Icons["random"] = "Random";
-    Icons["favorite"] = "Favorite";
-    Icons["up"] = "Up";
-    Icons["down"] = "Down";
-    Icons["save"] = "Save";
-    Icons["add"] = "Add";
-    Icons["delete"] = "Delete";
-    Icons["negativeSaw"] = "NegativeSaw";
-    Icons["positiveSaw"] = "PositiveSaw";
-    Icons["sine"] = "Sine";
-    Icons["square"] = "Square";
-    Icons["triangle"] = "Triangle";
-    return Icons;
-}({});
-var Undo = function(param) {
-    var color = param.color, width = param.width;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        viewBox: "0 0 25 25",
-        "stroke-width": "1.5",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        color: color,
-        height: width,
-        width: width
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        d: "M4.5 8C8.5 8 11 8 15 8C15 8 15 8 15 8C15 8 20 8 20 12.7059C20 18 15 18 15 18C11.5714 18 9.71429 18 6.28571 18",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M7.5 11.5C6.13317 10.1332 5.36683 9.36683 4 8C5.36683 6.63317 6.13317 5.86683 7.5 4.5",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-    }));
+var Icons = /*#__PURE__*/ function(Icons) {
+    Icons["undo"] = "Undo";
+    Icons["redo"] = "Redo";
+    Icons["random"] = "Random";
+    Icons["favorite"] = "Favorite";
+    Icons["up"] = "Up";
+    Icons["down"] = "Down";
+    Icons["save"] = "Save";
+    Icons["add"] = "Add";
+    Icons["delete"] = "Delete";
+    Icons["negativeSaw"] = "NegativeSaw";
+    Icons["positiveSaw"] = "PositiveSaw";
+    Icons["sine"] = "Sine";
+    Icons["square"] = "Square";
+    Icons["triangle"] = "Triangle";
+    return Icons;
+}({});
+var Undo = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        viewBox: "0 0 25 25",
+        "stroke-width": "1.5",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color,
+        height: width,
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M4.5 8C8.5 8 11 8 15 8C15 8 15 8 15 8C15 8 20 8 20 12.7059C20 18 15 18 15 18C11.5714 18 9.71429 18 6.28571 18",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M7.5 11.5C6.13317 10.1332 5.36683 9.36683 4 8C5.36683 6.63317 6.13317 5.86683 7.5 4.5",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }));
 };
 var Redo = function(param) {
     var color = param.color, width = param.width;
@@ -1616,136 +761,672 @@ var Delete = function(param) {
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
         color: color,
-        "stroke-width": "1.5",
-        height: width,
-        width: width
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
-        d: "M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM9.70164 8.64124C9.40875 8.34835 8.93388 8.34835 8.64098 8.64124C8.34809 8.93414 8.34809 9.40901 8.64098 9.7019L10.9391 12L8.64098 14.2981C8.34809 14.591 8.34809 15.0659 8.64098 15.3588C8.93388 15.6517 9.40875 15.6517 9.70164 15.3588L11.9997 13.0607L14.2978 15.3588C14.5907 15.6517 15.0656 15.6517 15.3585 15.3588C15.6514 15.0659 15.6514 14.591 15.3585 14.2981L13.0604 12L15.3585 9.7019C15.6514 9.40901 15.6514 8.93414 15.3585 8.64124C15.0656 8.34835 14.5907 8.34835 14.2978 8.64124L11.9997 10.9393L9.70164 8.64124Z",
-        fill: color
-    }));
+        "stroke-width": "1.5",
+        height: width,
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM9.70164 8.64124C9.40875 8.34835 8.93388 8.34835 8.64098 8.64124C8.34809 8.93414 8.34809 9.40901 8.64098 9.7019L10.9391 12L8.64098 14.2981C8.34809 14.591 8.34809 15.0659 8.64098 15.3588C8.93388 15.6517 9.40875 15.6517 9.70164 15.3588L11.9997 13.0607L14.2978 15.3588C14.5907 15.6517 15.0656 15.6517 15.3585 15.3588C15.6514 15.0659 15.6514 14.591 15.3585 14.2981L13.0604 12L15.3585 9.7019C15.6514 9.40901 15.6514 8.93414 15.3585 8.64124C15.0656 8.34835 14.5907 8.34835 14.2978 8.64124L11.9997 10.9393L9.70164 8.64124Z",
+        fill: color
+    }));
+};
+var NegativeSaw = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 67.27 33.41",
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("polyline", {
+        points: "2.5 2.5 2.5 30.91 64.77 2.5 64.77 30.91",
+        fill: "none",
+        stroke: color,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "4"
+    }));
+};
+var PositiveSaw = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 67.27 33.41",
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("polyline", {
+        points: "64.77 2.5 64.77 30.91 2.5 2.5 2.5 30.91",
+        fill: "none",
+        stroke: color,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "4"
+    }));
+};
+var Sine = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        width: width,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 65.2 33.19"
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M4,17.08c3.67-6.45,7.25-13.08,14.58-13.08,14.31,0,14.31,25.19,28.62,25.19,6.94,0,10.52-5.93,13.99-12.03",
+        fill: "none",
+        stroke: color,
+        "stroke-linecap": "round",
+        "stroke-miterlimit": "10",
+        "stroke-width": "4"
+    }));
+};
+var Square = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        width: width,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 68.77 33.8"
+    }, /*#__PURE__*/ React__default.createElement("polyline", {
+        points: "2.5 31.3 2.5 2.5 34.38 2.5 34.38 31.3 66.27 31.3 66.27 2.5",
+        fill: "none",
+        stroke: color,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "4"
+    }));
+};
+var Triangle = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: width,
+        viewBox: "0 0 72.68 35.16"
+    }, /*#__PURE__*/ React__default.createElement("polyline", {
+        points: "3 32.16 25.59 3 47.69 31.54 69.68 3.15",
+        fill: "none",
+        stroke: color,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "4"
+    }));
+};
+var iconList = {
+    Undo: Undo,
+    Redo: Redo,
+    Random: Random,
+    Favorite: Favorite,
+    Up: Up,
+    Down: Down,
+    Save: Save,
+    Add: Add,
+    Delete: Delete,
+    NegativeSaw: NegativeSaw,
+    PositiveSaw: PositiveSaw,
+    Sine: Sine,
+    Square: Square,
+    Triangle: Triangle
+};
+// const getViewBoxWidth = (width: string) => {
+//   const numericWidth = width.match(/\d+/)?.[0];
+//   return numericWidth !== undefined ? parseInt(numericWidth) : 24;
+// };
+function Icon(param) {
+    var icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none
+    ] : _param_padding, _param_width = param.width, width = _param_width === void 0 ? '24px' : _param_width, height = param.height, className = param.className, style = param.style;
+    var _$Icon = iconList[icon];
+    var _width_match;
+    var numberWidth = parseInt(((_width_match = width.match(/\d/g)) !== null && _width_match !== void 0 ? _width_match : []).join(''), 10);
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        className: "Icon ".concat(className ? className : ''),
+        onClick: onClick,
+        padding: padding,
+        style: _object_spread$l({
+            width: width,
+            height: height !== null && height !== void 0 ? height : width
+        }, style)
+    }, /*#__PURE__*/ React__default.createElement(_$Icon, {
+        width: numberWidth,
+        color: disabled ? 'var(--color-gray-400)' : color
+    }));
+}
+Icon.icon = Icons;
+Icon.padding = Spacing;
+Icon.margin = Spacing;
+
+function _define_property$l(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$k(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$l(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function Label(param) {
+    var value = param.value, id = param.id, className = param.className, style = param.style, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none
+    ] : _param_padding, uppercase = param.uppercase, children = param.children, htmlFor = param.htmlFor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.medium : _param_fontSize;
+    var _padding_, _padding_1, _padding_2, _ref;
+    return /*#__PURE__*/ React.createElement("label", {
+        id: id,
+        htmlFor: htmlFor,
+        style: _object_spread$k({
+            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], ")"),
+            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
+            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+            WebkitUserSelect: 'none',
+            userSelect: 'none',
+            textTransform: uppercase ? 'uppercase' : 'none',
+            cursor: 'inherit',
+            color: color
+        }, style),
+        className: classnames('Label', 'select-none', className)
+    }, value ? value : children);
+}
+Label.padding = Spacing;
+Label.fontSize = FontSizes;
+
+function _define_property$k(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$j(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$k(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function IconButton(param) {
+    var id = param.id, icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, // backgroundColor = 'var(--bg-lv1)',
+    backgroundColor = param.backgroundColor, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Button.padding.none
+    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
+        Button.margin.none
+    ] : _param_margin, _param_width = param.width, width = _param_width === void 0 ? '24px' : _param_width, iconWidth = param.iconWidth, label = param.label, height = param.height, className = param.className, style = param.style;
+    var Icon = iconList[icon];
+    var _width_match;
+    var numberWidth = parseInt(((_width_match = width.match(/\d/g)) !== null && _width_match !== void 0 ? _width_match : []).join(''), 10);
+    var _iconWidth_match;
+    var iconNumberWidth = typeof iconWidth === 'string' && parseInt(((_iconWidth_match = iconWidth === null || iconWidth === void 0 ? void 0 : iconWidth.match(/\d/g)) !== null && _iconWidth_match !== void 0 ? _iconWidth_match : []).join(''), 10);
+    return /*#__PURE__*/ React__default.createElement(Button, {
+        id: id,
+        className: "IconButton ".concat(className ? className : ''),
+        onClick: onClick,
+        padding: padding,
+        margin: margin,
+        disabled: disabled,
+        style: _object_spread$j({
+            backgroundColor: backgroundColor,
+            width: width,
+            height: height !== null && height !== void 0 ? height : 'auto'
+        }, style)
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        gap: Box.gap.mediumSmall
+    }, /*#__PURE__*/ React__default.createElement(Icon, {
+        width: iconNumberWidth || numberWidth,
+        color: disabled ? 'var(--color-gray-400)' : color
+    }), label ? /*#__PURE__*/ React__default.createElement(Label, {
+        color: color,
+        fontSize: Label.fontSize.xSmall,
+        value: label
+    }) : null));
+}
+IconButton.icon = Icons;
+IconButton.padding = Spacing;
+IconButton.margin = Spacing;
+
+function _array_like_to_array$h(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$g(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$g(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$g() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array$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();
+}
+function _unsupported_iterable_to_array$h(o, minLen) {
+    if (!o) return;
+    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$h(o, minLen);
+}
+function Tabs(param) {
+    var items = param.items, _param_initialSelectedIndex = param.initialSelectedIndex, initialSelectedIndex = _param_initialSelectedIndex === void 0 ? undefined : _param_initialSelectedIndex, _param_id = param.id, id = _param_id === void 0 ? '' : _param_id, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none
+    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
+        Spacing.none
+    ] : _param_margin, _param_gap = param.gap, gap = _param_gap === void 0 ? Spacing.small : _param_gap, width = param.width, height = param.height, tabWidth = param.tabWidth, tabHeight = param.tabHeight, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.horizontal : _param_orientation, _param_justifyContent = param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent$1.stretch : _param_justifyContent, _param_alignItems = param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems$1.stretch : _param_alignItems, _param_color = param.color, color = _param_color === void 0 ? 'var(--bg-lv11)' : _param_color, _param_selectedColor = param.selectedColor, selectedColor = _param_selectedColor === void 0 ? 'var(--color-brand)' : _param_selectedColor, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'transparent' : _param_backgroundColor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.small : _param_fontSize, selectedBackgroundColor = param.selectedBackgroundColor, icons = param.icons, onChange = param.onChange, isDisabled = param.isDisabled;
+    var _useState = _sliced_to_array$g(useState(null), 2), selectedIndex = _useState[0], setSelectedIndex = _useState[1];
+    var _useState1 = _sliced_to_array$g(useState([]), 2), choices = _useState1[0], setChoices = _useState1[1];
+    var dataSource = id ? "JuceCombobox" : "JuceAction";
+    var comboBoxState = dataSource === "JuceCombobox" ? Juce.getComboBoxState(id) : null;
+    useEffect(function() {
+        if (dataSource === "JuceCombobox") {
+            var _comboBoxState_properties;
+            setChoices(comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_properties = comboBoxState.properties) === null || _comboBoxState_properties === void 0 ? void 0 : _comboBoxState_properties.choices);
+            setSelectedIndex(comboBoxState.getChoiceIndex());
+        } else {
+            setChoices((items === null || items === void 0 ? void 0 : items.length) ? items : []);
+        }
+    }, [
+        window
+    ]);
+    useEffect(function() {
+        if (initialSelectedIndex !== null && initialSelectedIndex !== undefined && selectedIndex === null) {
+            setSelectedIndex(initialSelectedIndex);
+        }
+    }, [
+        initialSelectedIndex
+    ]);
+    var handleChange = function(choiceIndex) {
+        if (!isDisabled && choiceIndex !== selectedIndex) {
+            if (dataSource === "JuceCombobox") {
+                comboBoxState.setChoiceIndex(choiceIndex);
+            }
+            onChange && onChange(choiceIndex);
+            setSelectedIndex(choiceIndex);
+            return choices[choiceIndex];
+        }
+        return;
+    };
+    var _margin_, _margin_1, _margin_2, _ref;
+    // console.log(choices, 'CHOICES');
+    //around
+    //vertical, horizontal
+    // top, right, bottom, left
+    return /*#__PURE__*/ React__default.createElement(TabGroup, {
+        style: {
+            marginTop: "var(--mt-".concat(margin[0], ")"),
+            marginRight: "var(--mr-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
+            marginBottom: "var(--mb-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
+            marginLeft: "var(--ml-".concat((_ref = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref !== void 0 ? _ref : margin[0], ")"),
+            width: width,
+            height: height
+        },
+        manual: true,
+        selectedIndex: selectedIndex !== null && selectedIndex !== void 0 ? selectedIndex : 0,
+        onChange: function(index) {
+            return handleChange(index);
+        }
+    }, /*#__PURE__*/ React__default.createElement(TabList, {
+        className: classnames('Tabs', className),
+        style: {
+            gap: "var(--gap-".concat(gap, ")"),
+            height: height ? height : 'auto',
+            justifyContent: justifyContent,
+            alignItems: alignItems,
+            flexDirection: orientation === Orientation.horizontal ? 'row' : 'column'
+        }
+    }, choices && choices.map(function(item, i) {
+        var _padding_, _padding_1, _padding_2, _ref;
+        return /*#__PURE__*/ React__default.createElement(Tab, {
+            key: item,
+            id: item,
+            style: {
+                cursor: 'pointer',
+                width: tabWidth,
+                height: tabHeight,
+                fontSize: 'var(--text-md)',
+                lineHeight: '1.25rem',
+                backgroundColor: i === selectedIndex ? selectedBackgroundColor !== null && selectedBackgroundColor !== void 0 ? selectedBackgroundColor : backgroundColor : backgroundColor,
+                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], ")"),
+                paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+                display: 'flex',
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center'
+            },
+            className: classnames('Tabs-item', 'bg-body', 'color-input-text')
+        }, icons && icons[i] ? /*#__PURE__*/ React__default.createElement(IconButton, {
+            icon: icons[i],
+            id: item,
+            iconWidth: "20px",
+            // width={tabWidth}
+            // height={tabHeight}
+            color: i === selectedIndex ? selectedColor : color
+        }) : /*#__PURE__*/ React__default.createElement(Label, {
+            value: item,
+            fontSize: fontSize,
+            color: color
+        }));
+    })));
+}
+Tabs.padding = Spacing;
+Tabs.gap = Spacing;
+Tabs.margin = Spacing;
+Tabs.orientation = Orientation;
+Tabs.justifyContent = JustifyContent$1;
+Tabs.alignItems = AlignItems$1;
+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  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow-y: scroll;\n}\n.Dropdown-items::-webkit-scrollbar {\n  display: none;\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 useObservable(param) {
+    var onFire = param.onFire;
+    var observers = useRef([]);
+    var subscribe = function(observer, id) {
+        var _observers_current;
+        if (((_observers_current = observers.current) === null || _observers_current === void 0 ? void 0 : _observers_current.find(function(item) {
+            return item[1] === id;
+        })) === undefined) {
+            observers.current.push([
+                observer,
+                id
+            ]);
+        }
+    };
+    var unsubscribe = function(observer, id) {
+        var _observers_current;
+        if (((_observers_current = observers.current) === null || _observers_current === void 0 ? void 0 : _observers_current.find(function(item) {
+            return item[1] === id;
+        })) !== undefined) {
+            var _observers_current1;
+            var index = (_observers_current1 = observers.current) === null || _observers_current1 === void 0 ? void 0 : _observers_current1.findIndex(function(item) {
+                return item[1] === id;
+            });
+            observers.current.splice(index, 1);
+        }
+    };
+    var fire = function() {
+        var _observers_current;
+        onFire();
+        (_observers_current = observers.current) === null || _observers_current === void 0 ? void 0 : _observers_current.forEach(function(observer) {
+            return observer[0]();
+        });
+    };
+    return {
+        subscribe: subscribe,
+        unsubscribe: unsubscribe,
+        fire: fire
+    };
+}
+
+function _array_like_to_array$g(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_without_holes$2(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$g(arr);
+}
+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$2() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _to_consumable_array$2(arr) {
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$g(arr) || _non_iterable_spread$2();
+}
+function _unsupported_iterable_to_array$g(o, minLen) {
+    if (!o) return;
+    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$g(o, minLen);
+}
+// export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
+// mocks the `normalisedToScaledValue` internal method from JUCE
+// This will allow us to test the JS UI without needing access to the JUCE backend
+// ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
+function normalisedToScaled(param) {
+    var normalisedValue = param.normalisedValue, properties = param.properties;
+    var skew = properties.skew, end = properties.end, start = properties.start;
+    return Math.pow(normalisedValue, 1 / skew) * (end - start) + start;
+}
+// mocks the `getnormalisedValue` method from JUCE
+// This will allow us to test the JS UI without needing access to the JUCE backend
+function scaledToNormalised(param) {
+    var scaledValue = param.scaledValue, start = param.start, end = param.end, skew = param.skew;
+    return Math.pow((scaledValue - start) / (end - start), skew !== null && skew !== void 0 ? skew : 1);
+}
+var decimalToPercent = function(decimal) {
+    return Math.round(100 * (typeof decimal === 'string' ? parseFloat(decimal) : decimal));
 };
-var NegativeSaw = function(param) {
-    var color = param.color, width = param.width;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 67.27 33.41",
-        width: width
-    }, /*#__PURE__*/ React__default.createElement("polyline", {
-        points: "2.5 2.5 2.5 30.91 64.77 2.5 64.77 30.91",
-        fill: "none",
-        stroke: color,
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "stroke-width": "4"
-    }));
+var percentToDecimal = function(percent) {
+    return Math.round(0.01 * (typeof percent === 'string' ? parseFloat(percent) : percent));
 };
-var PositiveSaw = function(param) {
-    var color = param.color, width = param.width;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 67.27 33.41",
-        width: width
-    }, /*#__PURE__*/ React__default.createElement("polyline", {
-        points: "64.77 2.5 64.77 30.91 2.5 2.5 2.5 30.91",
-        fill: "none",
-        stroke: color,
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "stroke-width": "4"
-    }));
+var inputCharacterIsValid = function(char) {
+    var validCharacter = /^[\d.-]$/;
+    return validCharacter.test(char.toString());
 };
-var Sine = function(param) {
-    var color = param.color, width = param.width;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        width: width,
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 65.2 33.19"
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        d: "M4,17.08c3.67-6.45,7.25-13.08,14.58-13.08,14.31,0,14.31,25.19,28.62,25.19,6.94,0,10.52-5.93,13.99-12.03",
-        fill: "none",
-        stroke: color,
-        "stroke-linecap": "round",
-        "stroke-miterlimit": "10",
-        "stroke-width": "4"
-    }));
+var clamp = function(val) {
+    var min = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, max = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
+    return Math.max(min, Math.min(max, val));
 };
-var Square = function(param) {
-    var color = param.color, width = param.width;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        width: width,
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 68.77 33.8"
-    }, /*#__PURE__*/ React__default.createElement("polyline", {
-        points: "2.5 31.3 2.5 2.5 34.38 2.5 34.38 31.3 66.27 31.3 66.27 2.5",
-        fill: "none",
-        stroke: color,
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "stroke-width": "4"
-    }));
+function snapToLegalValue(param) {
+    var value = param.value, properties = param.properties;
+    var interval = properties.interval, start = properties.start, end = properties.end;
+    if (interval == 0) return value;
+    var roundedInterval = parseFloat(interval === null || interval === void 0 ? void 0 : interval.toFixed(2));
+    var formattedValue = start + roundedInterval * Math.floor((value - start) / roundedInterval + 0.5);
+    return clamp(parseFloat(formattedValue.toFixed(2)), start, end);
+}
+// const validNumber = /^-?\.?\d+(\.\d)?$/;
+// const lastNumberIsDigit = /\d$/;
+var validateInputChange = function(e) {
+    return e.nativeEvent.data === '' || e.nativeEvent.data === null || inputCharacterIsValid(e.nativeEvent.data);
 };
-var Triangle = function(param) {
-    var color = param.color, width = param.width;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: width,
-        viewBox: "0 0 72.68 35.16"
-    }, /*#__PURE__*/ React__default.createElement("polyline", {
-        points: "3 32.16 25.59 3 47.69 31.54 69.68 3.15",
-        fill: "none",
-        stroke: color,
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round",
-        "stroke-width": "4"
-    }));
+var getValidValueForInput = function(param) {
+    var value = param.value, oldValue = param.oldValue, properties = param.properties;
+    var _splitValueArray_;
+    // TODO: Clean up
+    var matchCriteria = /^-?(?:\d+\.\d+|\d+|\.\d+)$/g;
+    var splitValue = value.toString().matchAll(matchCriteria);
+    var splitValueArray = _to_consumable_array$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) {
+        if (parseFloat(validValue) > end) {
+            return end;
+        } else if (parseFloat(validValue) < start) {
+            return start;
+        } else {
+            return snapToLegalValue({
+                value: parseFloat(validValue),
+                properties: properties
+            });
+        }
+    } else {
+        return oldValue;
+    }
 };
-var iconList = {
-    Undo: Undo,
-    Redo: Redo,
-    Random: Random,
-    Favorite: Favorite,
-    Up: Up,
-    Down: Down,
-    Save: Save,
-    Add: Add,
-    Delete: Delete,
-    NegativeSaw: NegativeSaw,
-    PositiveSaw: PositiveSaw,
-    Sine: Sine,
-    Square: Square,
-    Triangle: Triangle
+var getBarTransformStyles = function(param) {
+    var polarity = param.polarity, orientation = param.orientation, normalisedValue = param.normalisedValue, isDisabled = param.isDisabled;
+    var wholeNumberNormalisedValue = normalisedValue * 100;
+    var unipolarValue = wholeNumberNormalisedValue ? parseFloat(wholeNumberNormalisedValue === null || wholeNumberNormalisedValue === void 0 ? void 0 : wholeNumberNormalisedValue.toFixed(2)) : 0;
+    var bipolarValue = (wholeNumberNormalisedValue - 50) / 100;
+    if (!isDisabled) {
+        if (polarity === Polarity.unipolar) {
+            return orientation === Orientation.horizontal ? {
+                width: unipolarValue ? "100%" : '1px',
+                height: '100%',
+                transform: unipolarValue ? "scale(".concat(Math.ceil(unipolarValue) * 0.01, ", 1)") : 'none',
+                transformOrigin: 'center left',
+                top: '0',
+                bottom: '0',
+                left: '0'
+            } : {
+                width: "100%",
+                height: unipolarValue ? '100%' : '1px',
+                transform: "scale(1, ".concat(Math.ceil(unipolarValue) * 0.01, ")"),
+                transformOrigin: 'bottom center',
+                top: '0',
+                bottom: '0',
+                left: '0'
+            };
+        } else {
+            return orientation === Orientation.horizontal ? {
+                width: bipolarValue ? "100%" : '1px',
+                height: '100%',
+                transform: bipolarValue ? "scale(".concat(bipolarValue, ", 1)") : 'none',
+                transformOrigin: 'left center',
+                top: '0',
+                bottom: '0',
+                left: '50%'
+            } : {
+                width: "100%",
+                height: bipolarValue ? '100%' : '1px',
+                transform: bipolarValue ? "scale(1, ".concat(bipolarValue, ")") : 'none',
+                transformOrigin: 'bottom center',
+                bottom: '50%',
+                left: '0',
+                right: '0'
+            };
+        }
+    } else return;
 };
-// const getViewBoxWidth = (width: string) => {
-//   const numericWidth = width.match(/\d+/)?.[0];
-//   return numericWidth !== undefined ? parseInt(numericWidth) : 24;
-// };
-function Icon(param) {
-    var icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none
-    ] : _param_padding, _param_width = param.width, width = _param_width === void 0 ? '24px' : _param_width, height = param.height, className = param.className, style = param.style;
-    var _$Icon = iconList[icon];
-    var _width_match;
-    var numberWidth = parseInt(((_width_match = width.match(/\d/g)) !== null && _width_match !== void 0 ? _width_match : []).join(''), 10);
-    return /*#__PURE__*/ React__default.createElement(Box, {
-        className: "Icon ".concat(className ? className : ''),
-        onClick: onClick,
-        padding: padding,
-        style: _object_spread$k({
-            width: width,
-            height: height !== null && height !== void 0 ? height : width
-        }, style)
-    }, /*#__PURE__*/ React__default.createElement(_$Icon, {
-        width: numberWidth,
-        color: disabled ? 'var(--color-gray-400)' : color
-    }));
+var randomizeValue = function(min, max) {
+    return Math.random() * (max - min) + min;
+};
+var incrementValue = function(param) {
+    var incomingVal = param.incomingVal, prevVal = param.prevVal, interval = param.interval;
+    var getNormalisedInterval = function() {
+        if (interval) {
+            if (interval >= 1) {
+                return interval * 0.01;
+            } else {
+                return interval;
+            }
+        } else {
+            return 0.01;
+        }
+    };
+    var normalisedInterval = getNormalisedInterval();
+    var newValue = (prevVal !== null && prevVal !== void 0 ? prevVal : 0) + incomingVal * // (interval && interval.toString().length > 4
+    //   ? 4
+    //   : 0.4) *
+    normalisedInterval;
+    return clamp(newValue);
+};
+var timerFlag = null;
+function throttle(mainFunction, delay) {
+    return function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        if (timerFlag === null) {
+            mainFunction.apply(void 0, _to_consumable_array$2(args));
+            timerFlag = setTimeout(function() {
+                timerFlag = null;
+            }, delay);
+        }
+    };
+}
+
+function _array_like_to_array$f(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$f(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes$1(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array$f(arr);
+}
+function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
 }
-Icon.icon = Icons;
-Icon.padding = Spacing;
-Icon.margin = Spacing;
-
-function _define_property$k(obj, key, value) {
+function _async_to_generator$4(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property$j(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1758,7 +1439,40 @@ function _define_property$k(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$j(target) {
+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$f(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$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 _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$i(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1768,116 +1482,516 @@ 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;
+}
+function ownKeys$3(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props$3(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$3(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
-    return target;
-}
-function Label(param) {
-    var value = param.value, id = param.id, className = param.className, style = param.style, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none
-    ] : _param_padding, uppercase = param.uppercase, children = param.children, htmlFor = param.htmlFor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.medium : _param_fontSize;
-    var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React.createElement("label", {
-        id: id,
-        htmlFor: htmlFor,
-        style: _object_spread$j({
-            fontSize: "var(--text-".concat(fontSize, ")"),
-            lineHeight: "var(--text-".concat(fontSize, ")"),
-            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], ")"),
-            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
-            WebkitUserSelect: 'none',
-            userSelect: 'none',
-            letterSpacing: '1px',
-            textTransform: uppercase ? 'uppercase' : 'none',
-            cursor: 'inherit',
-            color: color
-        }, style),
-        className: classnames('Label', 'select-none', className)
-    }, value ? value : children);
+    return target;
+}
+function _sliced_to_array$f(arr, i) {
+    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$f();
+}
+function _to_consumable_array$1(arr) {
+    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$f(arr) || _non_iterable_spread$1();
+}
+function _unsupported_iterable_to_array$f(o, minLen) {
+    if (!o) return;
+    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$f(o, minLen);
+}
+function _ts_generator$4(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+// Initial state
+var defaultGlobalStateValue = {
+    highlightedItem: {
+        label: 'Antimatter Audio',
+        value: 0
+    },
+    // focusedItem: '',
+    allParameters: [],
+    automatableParamsList: [],
+    automatableParamLabels: [],
+    parameterTypes: [],
+    modSlotTargets: {},
+    modSlotIds: [],
+    modSlotParams: [],
+    modSlotParamLabels: [],
+    defaultParamValues: [],
+    advancedView: false
+};
+// Reducer function to handle state updates
+var reducer = function(state, action) {
+    switch(action.type){
+        case 'HIGHLIGHTED_ITEM_CHANGED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                highlightedItem: action.payload
+            });
+        // case 'FOCUSED_ITEM_CHANGED':
+        //   return { ...state, focusedItem: action.payload };
+        case 'ADVANCED_VIEW_TOGGLED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                advancedView: action.payload
+            });
+        case 'AUTOMATABLE_PARAMS_LIST_RECEIVED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                automatableParamsList: action.payload
+            });
+        case 'AUTOMATABLE_PARAM_LABELS_RECEIVED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                automatableParamLabels: action.payload
+            });
+        case 'PARAMETER_TYPES_RECEIVED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                parameterTypes: action.payload
+            });
+        case 'ALL_PARAMETERS_RECEIVED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                allParameters: action.payload
+            });
+        case 'MOD_SLOTS_RECEIVED':
+            var _action_payload;
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                modSlotIds: action === null || action === void 0 ? void 0 : (_action_payload = action.payload) === null || _action_payload === void 0 ? void 0 : _action_payload.map(function(val) {
+                    return val === null || val === void 0 ? void 0 : val[0];
+                })
+            });
+        case 'MOD_SLOT_ROW_TARGETS_RECEIVED':
+            var _Object_values, _action_payload1;
+            var unsavedPreview = (_Object_values = Object.values(state === null || state === void 0 ? void 0 : state.modSlotTargets)) === null || _Object_values === void 0 ? void 0 : _Object_values.find(function(item) {
+                return (item === null || item === void 0 ? void 0 : item.targetIndex) > 0 && !item.isSaved;
+            });
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                modSlotTargets: action === null || action === void 0 ? void 0 : (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1.reduce(function(acc, val) {
+                    var newVal = _object_spread_props$3(_object_spread$i({}, acc), _define_property$j({}, val === null || val === void 0 ? void 0 : val[0], {
+                        rowId: val === null || val === void 0 ? void 0 : val[0],
+                        targetIndex: val === null || val === void 0 ? void 0 : val[1],
+                        isSaved: (val === null || val === void 0 ? void 0 : val[1]) > 0
+                    }));
+                    if (unsavedPreview !== undefined) {
+                        newVal[unsavedPreview.rowId] = {
+                            rowId: unsavedPreview.rowId,
+                            targetIndex: unsavedPreview.targetIndex,
+                            isSaved: false
+                        };
+                    }
+                    acc = newVal;
+                    return acc;
+                }, {})
+            });
+        // modSlotTargets have three states:
+        // 1. Unassigned:
+        //    rowId: 'modSlotId',
+        //    targetIndex: 0,
+        //    isSaved: false
+        // 2. Assigned and unsaved:
+        //    rowId: 'modSlotId',
+        //    targetIndex: 2,
+        //    isSaved: false
+        // 3. Assigned and saved:
+        //    rowId: 'modSlotId',
+        //    targetIndex: 2,
+        //    isSaved: true
+        case 'MOD_SLOT_ROW_TARGET_UPDATED':
+            var _action_payload2, _action_payload3, _state_modSlotTargets, _action_payload4, _state_modSlotTargets_action_payload_id, _state_modSlotTargets1, _action_payload5, _state_modSlotTargets_action_payload_id1, _action_payload6, _state_modSlotTargets2;
+            var _action_payload_value, _action_payload_isSaved;
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                modSlotTargets: _object_spread_props$3(_object_spread$i({}, state === null || state === void 0 ? void 0 : state.modSlotTargets), _define_property$j({}, (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2.id, _object_spread_props$3(_object_spread$i({}, state === null || state === void 0 ? void 0 : (_state_modSlotTargets = state.modSlotTargets) === null || _state_modSlotTargets === void 0 ? void 0 : _state_modSlotTargets[(_action_payload3 = action.payload) === null || _action_payload3 === void 0 ? void 0 : _action_payload3.id]), {
+                    targetIndex: (_action_payload_value = action === null || action === void 0 ? void 0 : (_action_payload4 = action.payload) === null || _action_payload4 === void 0 ? void 0 : _action_payload4.value) !== null && _action_payload_value !== void 0 ? _action_payload_value : state === null || state === void 0 ? void 0 : (_state_modSlotTargets1 = state.modSlotTargets) === null || _state_modSlotTargets1 === void 0 ? void 0 : (_state_modSlotTargets_action_payload_id = _state_modSlotTargets1[action.payload.id]) === null || _state_modSlotTargets_action_payload_id === void 0 ? void 0 : _state_modSlotTargets_action_payload_id.targetIndex,
+                    isSaved: (_action_payload_isSaved = action === null || action === void 0 ? void 0 : (_action_payload5 = action.payload) === null || _action_payload5 === void 0 ? void 0 : _action_payload5.isSaved) !== null && _action_payload_isSaved !== void 0 ? _action_payload_isSaved : state === null || state === void 0 ? void 0 : (_state_modSlotTargets2 = state.modSlotTargets) === null || _state_modSlotTargets2 === void 0 ? void 0 : (_state_modSlotTargets_action_payload_id1 = _state_modSlotTargets2[(_action_payload6 = action.payload) === null || _action_payload6 === void 0 ? void 0 : _action_payload6.id]) === null || _state_modSlotTargets_action_payload_id1 === void 0 ? void 0 : _state_modSlotTargets_action_payload_id1.isSaved
+                })))
+            });
+        case 'MOD_SLOT_PARAMS_LIST_RECEIVED':
+            var modSlotNames = Object.keys(state.modSlotTargets);
+            return _object_spread_props$3(_object_spread$i({}, 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$3(_object_spread$i({}, state), {
+                defaultParamValues: action === null || action === void 0 ? void 0 : action.payload
+            });
+        case 'MOD_SLOT_PARAM_LABELS_RECIEVED':
+            return _object_spread_props$3(_object_spread$i({}, state), {
+                modSlotParamLabels: action === null || action === void 0 ? void 0 : action.payload
+            });
+        default:
+            return state;
+    }
+};
+// Create the context
+var GlobalContext = /*#__PURE__*/ createContext({
+    globalState: defaultGlobalStateValue
+});
+// Custom hook for consuming context with a selector
+function useGlobalContext(selector) {
+    var localContext = useContext(GlobalContext);
+    return selector ? selector(localContext) : localContext;
 }
-Label.padding = Spacing;
-Label.fontSize = FontSizes;
-
-function _define_property$j(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
+// Context provider
+function GlobalContextProvider(param) {
+    var children = param.children;
+    var _useReducer = _sliced_to_array$f(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
+    var highlightedItemChanged = useCallback(function(highlightedItem) {
+        dispatch({
+            type: 'HIGHLIGHTED_ITEM_CHANGED',
+            payload: highlightedItem
         });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-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);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
+    }, []);
+    // const focusedItemChanged = useCallback((focusedItem: string) => {
+    //   dispatch({ type: 'FOCUSED_ITEM_CHANGED', payload: focusedItem });
+    // }, []);
+    var advancedViewToggled = useCallback(function(advancedView) {
+        dispatch({
+            type: 'ADVANCED_VIEW_TOGGLED',
+            payload: advancedView
+        });
+    }, []);
+    var automatableParamsListReceived = useCallback(function(automatableParamsList) {
+        dispatch({
+            type: 'AUTOMATABLE_PARAMS_LIST_RECEIVED',
+            payload: [
+                'none'
+            ].concat(_to_consumable_array$1(automatableParamsList))
+        });
+    }, []);
+    var allParametersReceived = useCallback(function(allParameters) {
+        dispatch({
+            type: 'ALL_PARAMETERS_RECEIVED',
+            payload: allParameters
+        });
+    }, []);
+    var parameterTypesReceived = useCallback(function(parameterTypes) {
+        dispatch({
+            type: 'PARAMETER_TYPES_RECEIVED',
+            payload: parameterTypes
+        });
+    }, []);
+    var automatableParamLabelsReceived = useCallback(function(automatableParamLabels) {
+        dispatch({
+            type: 'AUTOMATABLE_PARAM_LABELS_RECEIVED',
+            payload: automatableParamLabels
+        });
+    }, []);
+    var defaultParamValuesReceived = useCallback(function(defaultParamValues) {
+        dispatch({
+            type: 'DEFAULT_PARAM_VALUES_RECEIVED',
+            payload: defaultParamValues
+        });
+    }, []);
+    var modSlotsReceived = useCallback(function(modSlots) {
+        dispatch({
+            type: 'MOD_SLOTS_RECEIVED',
+            payload: modSlots
+        });
+    }, []);
+    var modSlotRowTargetsReceived = useCallback(function(modSlots) {
+        dispatch({
+            type: 'MOD_SLOT_ROW_TARGETS_RECEIVED',
+            payload: modSlots
+        });
+    }, []);
+    var modSlotRowTargetUpdated = useCallback(function(modSlot) {
+        dispatch({
+            type: 'MOD_SLOT_ROW_TARGET_UPDATED',
+            payload: modSlot
+        });
+    }, []);
+    var modSlotParamsListReceived = useCallback(function(modSlotParams) {
+        dispatch({
+            type: 'MOD_SLOT_PARAMS_LIST_RECEIVED',
+            payload: modSlotParams
+        });
+    }, []);
+    var modSlotParamLabelsReceived = useCallback(function(modSlotParamLables) {
+        dispatch({
+            type: 'MOD_SLOT_PARAM_LABELS_RECIEVED',
+            payload: modSlotParamLables
+        });
+    }, []);
+    var setDefaultParameter = function(id) {
+        var paramIndex = state === null || state === void 0 ? void 0 : state.allParameters.indexOf(id);
+        var defaultValue = state === null || state === void 0 ? void 0 : state.defaultParamValues[paramIndex];
+        var parameterType = state === null || state === void 0 ? void 0 : state.parameterTypes[paramIndex];
+        if (parameterType === 'slider') {
+            var _sliderState_properties, _sliderState_properties1, _sliderState_properties2;
+            var sliderState = Juce.getSliderState(id);
+            var normalisedDefaultValue = scaledToNormalised({
+                scaledValue: defaultValue,
+                start: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start,
+                end: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end,
+                skew: sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.skew
+            });
+            sliderState === null || sliderState === void 0 ? void 0 : sliderState.setNormalisedValue(normalisedDefaultValue);
+        // if(state?.modSlots)
+        } else if (parameterType === 'combobox') {
+            var comboBoxState = Juce.getComboBoxState(id);
+            comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.setChoiceIndex(defaultValue);
         }
-        ownKeys.forEach(function(key) {
-            _define_property$j(target, key, source[key]);
+    };
+    var getDefaultParameter = function(id) {
+        var paramIndex = state === null || state === void 0 ? void 0 : state.allParameters.indexOf(id);
+        return state === null || state === void 0 ? void 0 : state.defaultParamValues[paramIndex];
+    };
+    var getModSlotPreview = function() {
+        var _Object_values, _Object;
+        return (_Object = Object) === null || _Object === void 0 ? void 0 : (_Object_values = _Object.values(state === null || state === void 0 ? void 0 : state.modSlotTargets)) === null || _Object_values === void 0 ? void 0 : _Object_values.find(function(item) {
+            return !(item === null || item === void 0 ? void 0 : item.isSaved);
         });
-    }
-    return target;
-}
-function IconButton(param) {
-    var id = param.id, icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, // backgroundColor = 'var(--bg-lv1)',
-    backgroundColor = param.backgroundColor, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Button.padding.none
-    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
-        Button.margin.none
-    ] : _param_margin, _param_width = param.width, width = _param_width === void 0 ? '24px' : _param_width, iconWidth = param.iconWidth, label = param.label, height = param.height, className = param.className, style = param.style;
-    var Icon = iconList[icon];
-    var _width_match;
-    var numberWidth = parseInt(((_width_match = width.match(/\d/g)) !== null && _width_match !== void 0 ? _width_match : []).join(''), 10);
-    var _iconWidth_match;
-    var iconNumberWidth = typeof iconWidth === 'string' && parseInt(((_iconWidth_match = iconWidth === null || iconWidth === void 0 ? void 0 : iconWidth.match(/\d/g)) !== null && _iconWidth_match !== void 0 ? _iconWidth_match : []).join(''), 10);
-    return /*#__PURE__*/ React__default.createElement(Button, {
-        id: id,
-        className: "IconButton ".concat(className ? className : ''),
-        onClick: onClick,
-        padding: padding,
-        margin: margin,
-        disabled: disabled,
-        style: _object_spread$i({
-            backgroundColor: backgroundColor,
-            width: width,
-            height: height !== null && height !== void 0 ? height : 'auto'
-        }, style)
-    }, /*#__PURE__*/ React__default.createElement(Box, {
-        flexDirection: Box.flexDirection.column,
-        gap: Box.gap.mediumSmall
-    }, /*#__PURE__*/ React__default.createElement(Icon, {
-        width: iconNumberWidth || numberWidth,
-        color: disabled ? 'var(--color-gray-400)' : color
-    }), label ? /*#__PURE__*/ React__default.createElement(Label, {
-        color: color,
-        fontSize: Label.fontSize.xSmall,
-        value: label
-    }) : null));
+    };
+    // const setModSlotTarget = (newTarget: number, rowId: string) => {
+    //   const comboBoxState = Juce.getComboBoxState(rowId);
+    //   comboBoxState?.setChoiceIndex(newTarget);
+    // };
+    var refetchModSlots = function() {
+        return _async_to_generator$4(function() {
+            var getAllModSlotsFunc, modSlotsData, e;
+            return _ts_generator$4(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        _state.trys.push([
+                            0,
+                            2,
+                            ,
+                            3
+                        ]);
+                        getAllModSlotsFunc = Juce.getNativeFunction('getAllModSlots');
+                        return [
+                            4,
+                            getAllModSlotsFunc()
+                        ];
+                    case 1:
+                        modSlotsData = _state.sent();
+                        modSlotRowTargetsReceived(modSlotsData || []);
+                        return [
+                            3,
+                            3
+                        ];
+                    case 2:
+                        e = _state.sent();
+                        console.log(e);
+                        return [
+                            3,
+                            3
+                        ];
+                    case 3:
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
+    // modSlotTargets have three states:
+    // 1. Unassigned:
+    //    rowId: 'modSlotId',
+    //    targetIndex: 0,
+    //    isSaved: false
+    // 2. Assigned and unsaved:
+    //    rowId: 'modSlotId',
+    //    targetIndex: 2,
+    //    isSaved: false
+    // 3. Assigned and saved:
+    //    rowId: 'modSlotId',
+    //    targetIndex: 2,
+    //    isSaved: true
+    var updateModSlotRowTarget = function(param) {
+        var value = param.value, rowId = param.rowId, saveToBackend = param.saveToBackend;
+        var _Object_values;
+        // Convert a string id to an automatableParamsList index
+        var numValue = typeof value === 'string' ? state === null || state === void 0 ? void 0 : state.automatableParamsList.findIndex(function(item) {
+            return item === value;
+        }) : value;
+        // Don't allow duplicate targets
+        // This check happens when a new (unsaved) target is added to the matriz
+        var targetExists = ((_Object_values = Object.values(state === null || state === void 0 ? void 0 : state.modSlotTargets)) === null || _Object_values === void 0 ? void 0 : _Object_values.find(function(item) {
+            return (item === null || item === void 0 ? void 0 : item.targetIndex) === numValue;
+        })) !== undefined;
+        var isPreview = !saveToBackend;
+        if (isPreview && !targetExists) {
+            modSlotRowTargetUpdated({
+                id: rowId,
+                value: numValue > -1 ? numValue : undefined,
+                isSaved: false
+            });
+        } else if (!isPreview && value !== null && value !== undefined || numValue === 0) {
+            modSlotRowTargetUpdated({
+                id: rowId,
+                value: numValue > -1 ? numValue : undefined,
+                isSaved: true
+            });
+            var rowState = Juce.getComboBoxState(rowId);
+            rowState === null || rowState === void 0 ? void 0 : rowState.setChoiceIndex(value);
+            if (value === 0) {
+                var _state_modSlotParams_rowId, _state_modSlotParams;
+                state === null || state === void 0 ? void 0 : (_state_modSlotParams = state.modSlotParams) === null || _state_modSlotParams === void 0 ? void 0 : (_state_modSlotParams_rowId = _state_modSlotParams[rowId]) === null || _state_modSlotParams_rowId === void 0 ? void 0 : _state_modSlotParams_rowId.forEach(function(item) {
+                    setDefaultParameter(item);
+                });
+            }
+            refetchModSlots();
+        }
+    };
+    var deleteModSlotRowTarget = function(rowId) {
+        updateModSlotRowTarget({
+            rowId: rowId,
+            value: 0,
+            saveToBackend: true
+        });
+    };
+    var onFire = function() {
+        var //@ts-expect-error
+        _window___JUCE___backend, _window___JUCE__, _window;
+        (_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.emitEvent('setRandom', {});
+    };
+    var useRandom = useObservable({
+        onFire: onFire
+    });
+    var value = {
+        globalState: state,
+        highlightedItemChanged: highlightedItemChanged,
+        advancedViewToggled: advancedViewToggled,
+        automatableParamsListReceived: automatableParamsListReceived,
+        automatableParamLabelsReceived: automatableParamLabelsReceived,
+        parameterTypesReceived: parameterTypesReceived,
+        allParametersReceived: allParametersReceived,
+        defaultParamValuesReceived: defaultParamValuesReceived,
+        setDefaultParameter: setDefaultParameter,
+        getDefaultParameter: getDefaultParameter,
+        getModSlotPreview: getModSlotPreview,
+        modSlotsReceived: modSlotsReceived,
+        modSlotRowTargetsReceived: modSlotRowTargetsReceived,
+        updateModSlotRowTarget: updateModSlotRowTarget,
+        deleteModSlotRowTarget: deleteModSlotRowTarget,
+        // setModSlotTarget,
+        modSlotParamsListReceived: modSlotParamsListReceived,
+        modSlotParamLabelsReceived: modSlotParamLabelsReceived,
+        useRandom: useRandom
+    };
+    return /*#__PURE__*/ React__default.createElement(GlobalContext.Provider, {
+        value: value
+    }, children);
 }
-IconButton.icon = Icons;
-IconButton.padding = Spacing;
-IconButton.margin = Spacing;
 
-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;
 }
-function _array_with_holes$f(arr) {
+function _array_with_holes$e(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$f(arr, i) {
+function _iterable_to_array_limit$e(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1901,28 +2015,28 @@ function _iterable_to_array_limit$f(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$f() {
+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$f(arr, i) {
-    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$f();
+function _sliced_to_array$e(arr, i) {
+    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$e();
 }
-function _unsupported_iterable_to_array$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);
 }
 var useDropdown = function(param) {
     var id = param.id, // TODO: Is there a better way to handle mod matrix dropdowns?
     rowId = param.rowId, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, filter = param.filter, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
     var _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$f(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
-    var _useState1 = _sliced_to_array$f(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
-    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview;
+    var _useState = _sliced_to_array$e(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
+    var _useState1 = _sliced_to_array$e(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget;
     var choices = items.length ? items : (properties === null || properties === void 0 ? void 0 : (_properties_choices = properties.choices) === null || _properties_choices === void 0 ? void 0 : _properties_choices.length) ? properties === null || properties === void 0 ? void 0 : properties.choices : [];
     var filteredChoices = filter ? choices === null || choices === void 0 ? void 0 : choices.filter(function(item) {
         var _item_;
@@ -1999,8 +2113,9 @@ var useDropdown = function(param) {
         }
     };
     var onClick = function() {
-        setModSlotRowTargetAsPreview({
-            paramId: id
+        updateModSlotRowTarget({
+            value: id,
+            saveToBackend: false
         });
     };
     return {
@@ -2017,148 +2132,6 @@ var useDropdown = function(param) {
     };
 };
 
-function _array_like_to_array$e(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes$e(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit$e(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest$e() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array$e(arr, i) {
-    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$e();
-}
-function _unsupported_iterable_to_array$e(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$e(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
-}
-function Tabs(param) {
-    var items = param.items, _param_id = param.id, id = _param_id === void 0 ? '' : _param_id, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none
-    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
-        Spacing.none
-    ] : _param_margin, _param_gap = param.gap, gap = _param_gap === void 0 ? Spacing.small : _param_gap, width = param.width, height = param.height, tabWidth = param.tabWidth, tabHeight = param.tabHeight, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.horizontal : _param_orientation, _param_justifyContent = param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent$1.stretch : _param_justifyContent, _param_alignItems = param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems$1.stretch : _param_alignItems, _param_color = param.color, color = _param_color === void 0 ? 'var(--bg-lv11)' : _param_color, _param_selectedColor = param.selectedColor, selectedColor = _param_selectedColor === void 0 ? 'var(--color-brand)' : _param_selectedColor, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'transparent' : _param_backgroundColor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.small : _param_fontSize, selectedBackgroundColor = param.selectedBackgroundColor, icons = param.icons, onChange = param.onChange;
-    var _useState = _sliced_to_array$e(useState(0), 2), selectedIndex = _useState[0], setSelectedIndex = _useState[1];
-    var _useDropdown = useDropdown({
-        id: id,
-        onChange: onChange
-    }), index = _useDropdown.index, choices = _useDropdown.choices, handleChange = _useDropdown.handleChange;
-    var changeHandler = function(index) {
-        if (id) {
-            handleChange(index);
-        } else {
-            setSelectedIndex(index);
-            onChange && onChange(index);
-        }
-    };
-    var currentIndex = id ? index : selectedIndex;
-    // console.log(choices, 'CHOICES');
-    var displayedItems = items !== null && items !== void 0 ? items : choices;
-    var _margin_, _margin_1, _margin_2, _ref;
-    //around
-    //vertical, horizontal
-    // top, right, bottom, left
-    return /*#__PURE__*/ React__default.createElement(TabGroup, {
-        style: {
-            marginTop: "var(--mt-".concat(margin[0], ")"),
-            marginRight: "var(--mr-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
-            marginBottom: "var(--mb-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
-            marginLeft: "var(--ml-".concat((_ref = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref !== void 0 ? _ref : margin[0], ")"),
-            width: width,
-            height: height
-        },
-        manual: true,
-        selectedIndex: currentIndex,
-        onChange: function(index) {
-            return changeHandler(index);
-        }
-    }, /*#__PURE__*/ React__default.createElement(TabList, {
-        className: classnames('Tabs', className),
-        style: {
-            gap: "var(--gap-".concat(gap, ")"),
-            height: height ? height : 'auto',
-            justifyContent: justifyContent,
-            alignItems: alignItems,
-            flexDirection: orientation === Orientation.horizontal ? 'row' : 'column'
-        }
-    }, displayedItems && displayedItems.map(function(item, i) {
-        var _padding_, _padding_1, _padding_2, _ref;
-        return /*#__PURE__*/ React__default.createElement(Tab, {
-            key: item,
-            id: item,
-            style: {
-                cursor: 'pointer',
-                width: tabWidth,
-                height: tabHeight,
-                fontSize: 'var(--text-md)',
-                lineHeight: '1.25rem',
-                backgroundColor: i === currentIndex ? selectedBackgroundColor !== null && selectedBackgroundColor !== void 0 ? selectedBackgroundColor : backgroundColor : backgroundColor,
-                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], ")"),
-                paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
-                display: 'flex',
-                flex: 1,
-                justifyContent: 'center',
-                alignItems: 'center'
-            },
-            className: classnames('Tabs-item', 'bg-body', 'color-input-text')
-        }, icons && icons[i] ? /*#__PURE__*/ React__default.createElement(IconButton, {
-            icon: icons[i],
-            id: item,
-            iconWidth: "20px",
-            // width={tabWidth}
-            // height={tabHeight}
-            color: i === currentIndex ? selectedColor : color
-        }) : /*#__PURE__*/ React__default.createElement(Label, {
-            value: item,
-            fontSize: fontSize,
-            color: color
-        }));
-    })));
-}
-Tabs.padding = Spacing;
-Tabs.gap = Spacing;
-Tabs.margin = Spacing;
-Tabs.orientation = Orientation;
-Tabs.justifyContent = JustifyContent$1;
-Tabs.alignItems = AlignItems$1;
-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$i(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -2497,6 +2470,7 @@ function Input(param) {
         id: "".concat(id, "-input"),
         ref: inputRef,
         className: classnames('TextInput', isHighlighted ? 'is-highlighted' : '', className),
+        spellCheck: false,
         style: _object_spread$g({
             fontSize: "var(--text-".concat(fontSize),
             textAlign: textAlign,
@@ -2612,7 +2586,7 @@ var useSlider = function(param) {
         end: 15000,
         interval: 0.1,
         skew: 0.7
-    } : _param_mockProperties, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_isControlGroup = param.isControlGroup, isControlGroup = _param_isControlGroup === void 0 ? false : _param_isControlGroup, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.vertical : _param_orientation, _param_dragOrientation = param.dragOrientation, dragOrientation = _param_dragOrientation === void 0 ? Orientation.vertical : _param_dragOrientation, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, onChange = param.onChange; param.sliderElementRef; var _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled;
+    } : _param_mockProperties, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_isControlGroup = param.isControlGroup, isControlGroup = _param_isControlGroup === void 0 ? false : _param_isControlGroup, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.vertical : _param_orientation, _param_dragOrientation = param.dragOrientation, dragOrientation = _param_dragOrientation === void 0 ? Orientation.vertical : _param_dragOrientation, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, _param_updateModSlot = param.updateModSlot, updateModSlot = _param_updateModSlot === void 0 ? true : _param_updateModSlot, onChange = param.onChange; param.sliderElementRef; var _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled;
     // const sliderState: JuceSlider = Juce.getSliderState(id);
     // if isLocalhost is true, the front end app is running outside of JUCE in a browser.
     var isLocalhost = window.location.hostname === 'localhost';
@@ -2633,8 +2607,9 @@ var useSlider = function(param) {
     var sliderState = Juce.getSliderState(id);
     var prevValueRef = useRef(null);
     // const randomValueSetCounter = useRef<number>(null);
-    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, // setModSlotRowTarget,
-    modSlotPreview = _useGlobalContext.globalState.modSlotPreview;
+    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter, updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, // setModSlotRowTarget,
+    getModSlotPreview = _useGlobalContext.getModSlotPreview;
+    var modSlotPreview = getModSlotPreview();
     // Set the initial state
     //@ts-expect-error
     useEffect(function() {
@@ -2669,7 +2644,7 @@ var useSlider = function(param) {
             normalisedValue: normalisedValue,
             properties: sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties
         });
-        if (rowId === modSlotPreview.targetIndex) {
+        if (rowId === (modSlotPreview === null || modSlotPreview === void 0 ? void 0 : modSlotPreview.targetIndex)) {
             onChange && onChange(parseFloat(scaledValue.toFixed(2)), rowId);
         } else {
             onChange && onChange(parseFloat(scaledValue.toFixed(2)), sliderId);
@@ -2730,9 +2705,11 @@ var useSlider = function(param) {
         onDrag: function(param) {
             param.event; var delta = param.delta;
             //TODO: Move this out of useSlider
-            if (id !== modSlotPreview.rowId) {
-                setModSlotRowTargetAsPreview({
-                    paramId: id
+            // Sets the slider as a mod slot preview
+            if (updateModSlot) {
+                updateModSlotRowTarget({
+                    rowId: modSlotPreview === null || modSlotPreview === void 0 ? void 0 : modSlotPreview.rowId,
+                    value: id
                 });
             }
             if (!dragInProgress) {
@@ -2770,6 +2747,13 @@ var useSlider = function(param) {
             var rect = event === null || event === void 0 ? void 0 : (_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.getBoundingClientRect();
             var y = (event === null || event === void 0 ? void 0 : event.clientY) - rect.top;
             var x = (event === null || event === void 0 ? void 0 : event.clientX) - rect.left;
+            // Sets the slider as a mod slot preview
+            if (updateModSlot) {
+                updateModSlotRowTarget({
+                    rowId: modSlotPreview === null || modSlotPreview === void 0 ? void 0 : modSlotPreview.rowId,
+                    value: id
+                });
+            }
             hasMoved = dragOrientation === Orientation.vertical ? movement[1] !== 0 : movement[0] !== 0;
             var ignoreMoveStatus = !isControlGroup;
             if (event.buttons === 1) {
@@ -3867,14 +3851,15 @@ function _unsupported_iterable_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;
-    var _Object_values, _properties_choices;
+    var _Object_values_find, _Object_values, _Object_values_map, _Object_values1, _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
     var _useState = _sliced_to_array$a(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState[0], setProperties = _useState[1];
     var _useState1 = _sliced_to_array$a(useState(0), 2), index = _useState1[0], setIndex = _useState1[1];
     var prevIndex = useRef(null);
     var nextIndex = useRef(null);
     var prevDragDirection = useRef(null);
-    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, _useGlobalContext_globalState = _useGlobalContext.globalState, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
+    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, getModSlotPreview = _useGlobalContext.getModSlotPreview, updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, _useGlobalContext_globalState = _useGlobalContext.globalState, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels, modSlotTargets = _useGlobalContext_globalState.modSlotTargets;
+    var modSlotPreview = getModSlotPreview();
     //TODO: Filter choices for subsequent rows
     // const availableChoices = properties?.choices;
     useEffect(function() {
@@ -3886,8 +3871,8 @@ var useCombobox = function(param) {
         setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
     });
     useEffect(function() {
-        if (modSlotPreview.slotId === id) {
-            setIndex(modSlotPreview.targetIndex);
+        if ((modSlotPreview === null || modSlotPreview === void 0 ? void 0 : modSlotPreview.rowId) === id) {
+            setIndex(modSlotPreview === null || modSlotPreview === void 0 ? void 0 : modSlotPreview.targetIndex);
         }
     }, [
         modSlotTargets,
@@ -3911,19 +3896,29 @@ var useCombobox = function(param) {
     }, [
         window
     ]);
-    var selectedChoices = (_Object_values = Object.values(modSlotTargets)) === null || _Object_values === void 0 ? void 0 : _Object_values.filter(function(item) {
+    //TODO: Remove mod slot code from this component
+    var selectedIndex = (_Object_values = Object.values(modSlotTargets)) === null || _Object_values === void 0 ? void 0 : (_Object_values_find = _Object_values.find(function(item) {
+        return (item === null || item === void 0 ? void 0 : item.rowId) === id;
+    })) === null || _Object_values_find === void 0 ? void 0 : _Object_values_find.targetIndex;
+    var selectedItem = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.find(function(_, i) {
+        return selectedIndex === i;
+    });
+    var allSelectedIndexes = (_Object_values1 = Object.values(modSlotTargets)) === null || _Object_values1 === void 0 ? void 0 : (_Object_values_map = _Object_values1.map(function(item) {
+        return item === null || item === void 0 ? void 0 : item.targetIndex;
+    })) === null || _Object_values_map === void 0 ? void 0 : _Object_values_map.filter(function(item) {
         return item > 0;
     });
-    var selectedLabels = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.filter(function(item, i) {
-        return selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices.includes(i);
+    var allSelectedItems = allSelectedIndexes === null || allSelectedIndexes === void 0 ? void 0 : allSelectedIndexes.map(function(item) {
+        return automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[item];
     });
     var displayedLabels = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.filter(function(item) {
-        return !(selectedLabels === null || selectedLabels === void 0 ? void 0 : selectedLabels.includes(item)) || item === automatableParamLabels[index];
+        return !(allSelectedItems === null || allSelectedItems === void 0 ? void 0 : allSelectedItems.includes(item)) || item === automatableParamLabels[index];
     });
     var filteredChoices = filter && (filter === null || filter === void 0 ? void 0 : filter.length) > 1 ? displayedLabels === null || displayedLabels === void 0 ? void 0 : displayedLabels.filter(function(item) {
         var _item_toLowerCase;
         return item === null || item === void 0 ? void 0 : (_item_toLowerCase = item.toLowerCase()) === null || _item_toLowerCase === void 0 ? void 0 : _item_toLowerCase.includes(filter === null || filter === void 0 ? void 0 : filter.toLowerCase());
     }) : displayedLabels;
+    // console.log(filteredChoices, 'FILTERED');
     // const prevIndex = useRef<string | null>(null);
     // const handleChange = (newValue: number) => {
     //   if (newValue !== prevIndex.current) {
@@ -3962,8 +3957,10 @@ var useCombobox = function(param) {
             var direction = param.direction, velocity = param.velocity;
             //TODO: Move this out of useSlider
             if (id !== modSlotPreview.rowId) {
-                setModSlotRowTargetAsPreview({
-                    paramId: id
+                updateModSlotRowTarget({
+                    rowId: modSlotPreview.rowId,
+                    value: id,
+                    saveToBackend: false
                 });
             }
             var directionY;
@@ -3994,13 +3991,17 @@ var useCombobox = function(param) {
         }
     };
     var onClick = function() {
-        setModSlotRowTargetAsPreview({
-            paramId: id
+        updateModSlotRowTarget({
+            value: id,
+            rowId: modSlotPreview.rowId,
+            saveToBackend: false
         });
     };
     var onDoubleClick = function() {
-        setModSlotRowTargetAsPreview({
-            paramId: id
+        updateModSlotRowTarget({
+            value: id,
+            rowId: modSlotPreview.rowId,
+            saveToBackend: false
         });
     };
     return {
@@ -4012,6 +4013,8 @@ var useCombobox = function(param) {
         onMouseEnter: onMouseEnter,
         onClick: onClick,
         onDoubleClick: onDoubleClick,
+        selectedIndex: selectedIndex,
+        selectedItem: selectedItem,
         bindDrag: bindDrag
     };
 };
@@ -5953,7 +5956,7 @@ function ModuleHeader(param) {
     }, "Advanced")))));
 }
 
-var css_248z$2 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n}\n\n.ModMatrixCell.isDisabled {\n  color: var(--color-gray-400);\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* .isActive .ModMatrixCell {\n  background: var(--color-gray-600);\n} */\n\n.ModMatrixToggleCell {\n  cursor: pointer;\n}\n\n.ModMatrixComboboxCell {\n  background: #252429;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  bottom: -151px;\n  left: 0px;\n  height: 150px;\n  width: 100%;\n  background: var(--color-gray-500);\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  overflow-y: auto;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active,\n.ModMatrixComboboxItem[data-selected] {\n  background: var(--color-gray-600);\n}\n\n.ModMatrixComboboxItem {\n  padding: var(--spacing-md) var(--spacing-lg);\n  width: 100%;\n}\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n\n.ModMatrixInput {\n  text-align: center;\n  margin-top: 3px;\n}\n";
+var css_248z$2 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n}\n\n.ModMatrixCell.isDisabled {\n  color: var(--color-gray-400);\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* .isActive .ModMatrixCell {\n  background: var(--color-gray-600);\n} */\n\n.ModMatrixToggleCell {\n  cursor: pointer;\n}\n\n.ModMatrixComboboxCell {\n  background: #252429;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  left: 0px;\n  /* height: 150px; */\n  /* width: 100%; */\n  color: var(--color-text);\n  /* -ms-overflow-style: none; */\n  scrollbar-width: thin;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems::-webkit-scrollbar {\n  width: 10px;\n}\n\n.ModMatrixComboboxItem {\n  display: flex;\n  align-items: center;\n  background: var(--bg-lv4);\n  padding: 0 var(--spacing-md);\n  width: 100%;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active {\n  background: var(--bg-lv5);\n}\n\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n\n.ModMatrixInput {\n  text-align: center;\n  margin-top: 3px;\n}\n";
 styleInject(css_248z$2);
 
 var targetColors = [
@@ -5966,7 +5969,7 @@ var targetColors = [
     '#4DA1CB',
     '#cb4d62'
 ];
-var ComboboxCellWidth = '217px';
+var ComboboxCellWidth = '200px';
 var DeleteButtonCellWidth = '50px';
 
 function _array_like_to_array$7(arr, len) {
@@ -6044,50 +6047,58 @@ function _unsupported_iterable_to_array$7(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
 function ModMatrixComboboxCell(param) {
-    var rowId = param.rowId, key = param.key, color = param.color, style = param.style;
+    var rowId = param.rowId, rowIndex = param.rowIndex, key = param.key, color = param.color, style = param.style;
     var _useState = _sliced_to_array$7(useState(''), 2), filterString = _useState[0], setFilterString = _useState[1];
-    var _useGlobalContext = useGlobalContext(), updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, clearModSlotPreview = _useGlobalContext.clearModSlotPreview, setNewModSlotPreview = _useGlobalContext.setNewModSlotPreview, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotPreview = _useGlobalContext_globalState.modSlotPreview, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels;
+    var listItemHeight = 25;
+    var maxVisibleItems = 5;
+    var _useGlobalContext = useGlobalContext(), updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, getModSlotPreview = _useGlobalContext.getModSlotPreview, automatableParamLabels = _useGlobalContext.globalState.automatableParamLabels;
     var _useCombobox = useCombobox({
         id: rowId,
         filter: filterString,
         displayValInHeader: false
-    }), index = _useCombobox.index, filteredChoices = _useCombobox.filteredChoices;
-    var previewValue = modSlotPreview.slotId === rowId ? modSlotPreview.targetIndex : null;
+    }), index = _useCombobox.index, filteredChoices = _useCombobox.filteredChoices, selectedItem = _useCombobox.selectedItem;
+    var previewValue = getModSlotPreview();
     var onChange = function(newValue) {
         // TODO: 'juceIndex' is needed here because the 'value' from the combobox is the string label.
         // Refactor the combobox so that the 'value' is the index number corresponding to the parameter's index in JUCE?
+        setFilterString('');
         var juceIndex = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.indexOf(newValue);
         // handleChange(juceIndex);
-        if (rowId === modSlotPreview.slotId) {
+        if (previewValue.rowId === rowId) {
             if (juceIndex > 0) {
-                setModSlotRowTargetAsPreview({
-                    paramIndex: juceIndex
+                // setModSlotRowTargetAsPreview({ paramIndex: juceIndex });
+                updateModSlotRowTarget({
+                    value: juceIndex,
+                    rowId: rowId,
+                    saveToBackend: false
                 });
-            } else {
-                clearModSlotPreview();
-                setNewModSlotPreview();
             }
         } else {
-            updateModSlotRowTarget(juceIndex, rowId);
+            updateModSlotRowTarget({
+                value: juceIndex,
+                rowId: rowId,
+                saveToBackend: true
+            });
         }
     };
+    var numVisibleItems = filteredChoices.length > maxVisibleItems ? maxVisibleItems : filteredChoices.length;
+    var anchorTo = rowIndex > 3 ? 'top' : 'bottom';
     return /*#__PURE__*/ React__default.createElement(Box, {
         key: key,
         className: "ModMatrixCell ModMatrixComboboxCell",
-        justifyContent: Box.justifyContent.flexEnd,
+        justifyContent: Box.justifyContent.center,
         flexDirection: Box.flexDirection.column,
         style: _object_spread$6({
             color: color
         }, style),
-        padding: [
-            Box.padding.medium,
-            Box.padding.large
-        ],
-        alignItems: Box.alignItems.flexStart,
+        alignItems: Box.alignItems.center,
         height: '2.5rem'
     }, /*#__PURE__*/ React__default.createElement(Combobox, {
-        value: index || previewValue,
-        onChange: onChange
+        value: index || (previewValue === null || previewValue === void 0 ? void 0 : previewValue.targetIndex),
+        onChange: onChange,
+        onClose: function() {
+            setFilterString('');
+        }
     }, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(ComboboxInput, {
         displayValue: function(item) {
             return index ? automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[index] : '';
@@ -6097,7 +6108,8 @@ function ModMatrixComboboxCell(param) {
             var _e_target;
             setFilterString(e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.value);
         },
-        autoFocus: true
+        autoFocus: true,
+        spellCheck: false
     }), /*#__PURE__*/ React__default.createElement(ComboboxButton, {
         className: "ModMatrixComboboxButton",
         id: rowId
@@ -6113,13 +6125,37 @@ function ModMatrixComboboxCell(param) {
     }))), /*#__PURE__*/ React__default.createElement(ComboboxOptions, {
         className: "ModMatrixComboboxItems",
         //   anchor="bottom"
+        anchor: {
+            to: anchorTo,
+            offset: 'var(--spacing-ms)',
+            gap: 'var(--spacing-ms)'
+        },
+        style: {
+            visibility: numVisibleItems === 0 ? 'hidden' : 'visible',
+            // bottom: `${-(listItemHeight * numVisibleItems)}px`,
+            height: "".concat(listItemHeight * numVisibleItems, "px"),
+            width: ComboboxCellWidth
+        },
         transition: true
     }, filteredChoices === null || filteredChoices === void 0 ? void 0 : filteredChoices.map(function(item) {
+        // console.log(
+        //   item,
+        //   selectedItem,
+        //   selectedItem === item,
+        //   'item, selectedItem',
+        // );
         return /*#__PURE__*/ React__default.createElement(ComboboxOption, {
+            "data-selected": selectedItem === item,
+            style: {
+                height: "".concat(listItemHeight, "px")
+            },
             className: "ModMatrixComboboxItem",
             key: item,
             value: item
-        }, /*#__PURE__*/ React__default.createElement(Label, null, item));
+        }, /*#__PURE__*/ React__default.createElement(Label, {
+            color: selectedItem === item ? 'var(--color-brand)' : 'var(--color-text)',
+            fontSize: Label.fontSize.mediumSmall
+        }, item));
     }))));
 }
 
@@ -6154,14 +6190,21 @@ function _object_spread$5(target) {
 // import * as Juce from 'juce-framework-frontend';
 function ModMatrixToggleCell(param) {
     var modifier = param.modifier, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, rowId = param.rowId, color = param.color, style = param.style;
-    var // getDefaultParameter,
-    saveModSlotPreviewRowTargetToBackend = useGlobalContext().saveModSlotPreviewRowTargetToBackend;
+    var _useGlobalContext = useGlobalContext(), // getDefaultParameter,
+    updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, modSlotTargets = _useGlobalContext.globalState.modSlotTargets;
     // const rowState = Juce.getComboBoxState(rowId);
     var _useDropdown = useDropdown({
         id: modifier,
         rowId: rowId,
         isDisabled: isDisabled,
-        onChange: saveModSlotPreviewRowTargetToBackend
+        onChange: function() {
+            var _modSlotTargets_rowId;
+            return updateModSlotRowTarget({
+                value: modSlotTargets === null || modSlotTargets === void 0 ? void 0 : (_modSlotTargets_rowId = modSlotTargets[rowId]) === null || _modSlotTargets_rowId === void 0 ? void 0 : _modSlotTargets_rowId.targetIndex,
+                rowId: rowId,
+                saveToBackend: true
+            });
+        }
     }), index = _useDropdown.index, choices = _useDropdown.choices, handleChange = _useDropdown.handleChange;
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "ModMatrixCell ModMatrixToggleCell ".concat(isDisabled ? 'isDisabled' : ''),
@@ -6186,6 +6229,7 @@ function ModMatrixToggleCell(param) {
             pointerEvents: 'none'
         }
     }, /*#__PURE__*/ React__default.createElement(Label, {
+        fontSize: Label.fontSize.mediumSmall,
         style: {
             pointerEvents: 'none'
         }
@@ -6341,15 +6385,23 @@ function _unsupported_iterable_to_array$6(o, minLen) {
 function ModMatrixCell(param) {
     var modifier = param.modifier, rowId = param.rowId, isDisabled = param.isDisabled, color = param.color, style = param.style;
     var _SingleBarViz_polarity;
-    var _useGlobalContext = useGlobalContext(), setDefaultParameter = _useGlobalContext.setDefaultParameter, saveModSlotPreviewRowTargetToBackend = _useGlobalContext.saveModSlotPreviewRowTargetToBackend;
+    var _useGlobalContext = useGlobalContext(), setDefaultParameter = _useGlobalContext.setDefaultParameter, updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, modSlotTargets = _useGlobalContext.globalState.modSlotTargets;
     var _useState = _sliced_to_array$6(useState(false), 2); _useState[0]; var setIsActive = _useState[1];
     var _useSlider = useSlider({
         id: modifier,
         rowId: rowId,
+        updateModSlot: false,
         displayValInHeader: false,
         orientation: Orientation.horizontal,
         dragOrientation: Orientation.vertical,
-        onChange: saveModSlotPreviewRowTargetToBackend,
+        onChange: function() {
+            var _modSlotTargets_rowId;
+            updateModSlotRowTarget({
+                value: modSlotTargets === null || modSlotTargets === void 0 ? void 0 : (_modSlotTargets_rowId = modSlotTargets[rowId]) === null || _modSlotTargets_rowId === void 0 ? void 0 : _modSlotTargets_rowId.targetIndex,
+                rowId: rowId,
+                saveToBackend: true
+            });
+        },
         isDisabled: isDisabled,
         isControlGroup: true
     }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, properties = _useSlider.properties, setNormalisedState = _useSlider.setNormalisedState;
@@ -6413,6 +6465,7 @@ function ModMatrixCell(param) {
         // backgroundColor={
         //   isActive ? 'var(--color-gray-500)' : 'var(--color-gray-600)'
         // }
+        className: "FOOOOOOOOO",
         sliderColor: color,
         style: _object_spread$3({
             alignSelf: 'flex-end',
@@ -6426,10 +6479,17 @@ function ModMatrixCell(param) {
 }
 
 function ModMatrixRow(param) {
-    var rowId = param.rowId, key = param.key;
+    var rowId = param.rowId, rowIndex = param.rowIndex, key = param.key;
     var _modSlotParams_rowId;
-    var _useGlobalContext = useGlobalContext(), updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotParams = _useGlobalContext_globalState.modSlotParams, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
-    var isDisabled = modSlotPreview.slotId === rowId && !modSlotPreview.targetIndex;
+    var _useGlobalContext = useGlobalContext(), deleteModSlotRowTarget = _useGlobalContext.deleteModSlotRowTarget, getModSlotPreview = _useGlobalContext.getModSlotPreview, modSlotParams = _useGlobalContext.globalState.modSlotParams;
+    var previewValue = getModSlotPreview();
+    // console.log(
+    //   modSlotParams?.[rowId],
+    //   'modSlotParams?.[rowId]modSlotParams?.[rowId]modSlotParams?.[rowId]',
+    // );
+    // const isDisabled =
+    // modSlotPreview.slotId === rowId && !modSlotPreview.targetIndex;
+    var isDisabled = (previewValue === null || previewValue === void 0 ? void 0 : previewValue.rowId) === rowId && !(previewValue === null || previewValue === void 0 ? void 0 : previewValue.targetIndex);
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "ModMatrixBodyRow",
         gap: Box.gap.medium,
@@ -6445,6 +6505,7 @@ function ModMatrixRow(param) {
     }, /*#__PURE__*/ React__default.createElement(ModMatrixComboboxCell, {
         // target={modSlotTargets[rowId]}
         rowId: rowId,
+        rowIndex: rowIndex,
         color: targetColors[0],
         style: {
             width: ComboboxCellWidth
@@ -6480,7 +6541,7 @@ function ModMatrixRow(param) {
         width: "20px",
         disabled: isDisabled,
         onClick: function() {
-            return updateModSlotRowTarget(0, rowId);
+            return deleteModSlotRowTarget(rowId);
         }
     })));
 }
@@ -6698,52 +6759,17 @@ function ModMatrix(param) {
     var getAllModSlotsFunc = Juce.getNativeFunction('getAllModSlots');
     var getModSlotParamsFunc = Juce.getNativeFunction('getModSlotParams');
     var _useState = _sliced_to_array$5(useState([]), 2), displayedModSlots = _useState[0], setDisplayedModSlots = _useState[1];
-    var _useGlobalContext = useGlobalContext(), automatableParamsListReceived = _useGlobalContext.automatableParamsListReceived, automatableParamLabelsReceived = _useGlobalContext.automatableParamLabelsReceived, modSlotsReceived = _useGlobalContext.modSlotsReceived, modSlotRowTargetsReceived = _useGlobalContext.modSlotRowTargetsReceived, setNewModSlotPreview = _useGlobalContext.setNewModSlotPreview, modSlotParamsListReceived = _useGlobalContext.modSlotParamsListReceived, modSlotParamLabelsReceived = _useGlobalContext.modSlotParamLabelsReceived, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotParamLabels = _useGlobalContext_globalState.modSlotParamLabels, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotIds = _useGlobalContext_globalState.modSlotIds, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
+    // const [previewSlot, setPreviewSlot] = useState<Array<string>>([]);
+    // const [previewSlot, setPreviewSlot] = useState<string>();
+    var _useGlobalContext = useGlobalContext(), automatableParamsListReceived = _useGlobalContext.automatableParamsListReceived, automatableParamLabelsReceived = _useGlobalContext.automatableParamLabelsReceived, modSlotsReceived = _useGlobalContext.modSlotsReceived, modSlotRowTargetsReceived = _useGlobalContext.modSlotRowTargetsReceived, modSlotParamsListReceived = _useGlobalContext.modSlotParamsListReceived, modSlotParamLabelsReceived = _useGlobalContext.modSlotParamLabelsReceived, getModSlotPreview = _useGlobalContext.getModSlotPreview, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotParamLabels = _useGlobalContext_globalState.modSlotParamLabels, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotIds = _useGlobalContext_globalState.modSlotIds;
     // Empty state preview row
-    useEffect(function() {
-        var unassignedModSlots = modSlotIds === null || modSlotIds === void 0 ? void 0 : modSlotIds.filter(function(item) {
-            return modSlotTargets[item] <= 0;
-        });
-        if ((unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots.length) > 0 && modSlotPreview.slotId.length === 0) {
-            setNewModSlotPreview();
-        }
-    }, [
-        window,
-        modSlotIds,
-        modSlotPreview
-    ]);
     // console.log(
     //   modSlotTargets,
     //   'modSlotTargetsmodSlotTargetsmodSlotTargetsmodSlotTargets',
     // );
-    useEffect(function() {
-        var _Object_keys;
-        var displayedSlots = (_Object_keys = Object.keys(modSlotTargets)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.reduce(function(acc, item) {
-            if ((modSlotTargets === null || modSlotTargets === void 0 ? void 0 : modSlotTargets[item]) > 0) {
-                acc === null || acc === void 0 ? void 0 : acc.push(item);
-            }
-            return acc;
-        }, []);
-        // .sort();
-        var unassignedModSlots = modSlotIds === null || modSlotIds === void 0 ? void 0 : modSlotIds.filter(function(item) {
-            return modSlotTargets[item] <= 0;
-        });
-        if (unassignedModSlots.length > 0 && modSlotPreview.slotId) {
-            setDisplayedModSlots(_to_consumable_array(displayedSlots).concat([
-                modSlotPreview.slotId
-            ]));
-        } else {
-            setDisplayedModSlots(displayedSlots);
-        }
-    }, [
-        window,
-        modSlotTargets,
-        modSlotIds,
-        modSlotPreview
-    ]);
     var getAPVTSParams = function() {
         return _async_to_generator$1(function() {
-            var automatableParamsList, modSlotsData, modSlotParams, e;
+            var automatableParamsList, modSlotsData, modSlotParams, modSlotPreview, hasUnsavedPreview, e;
             return _ts_generator$1(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -6771,11 +6797,15 @@ function ModMatrix(param) {
                         ];
                     case 3:
                         modSlotParams = _state.sent();
+                        modSlotPreview = getModSlotPreview();
                         // const ap = await getAllParametersFunc();
                         automatableParamsListReceived(automatableParamsList === null || automatableParamsList === void 0 ? void 0 : automatableParamsList[0]);
                         automatableParamLabelsReceived(automatableParamsList === null || automatableParamsList === void 0 ? void 0 : automatableParamsList[1]);
                         modSlotsReceived(modSlotsData || []);
-                        modSlotRowTargetsReceived(modSlotsData || []);
+                        hasUnsavedPreview = (modSlotPreview === null || modSlotPreview === void 0 ? void 0 : modSlotPreview.targetIndex) > 0 && !(modSlotPreview === null || modSlotPreview === void 0 ? void 0 : modSlotPreview.isSaved);
+                        if (!hasUnsavedPreview) {
+                            modSlotRowTargetsReceived(modSlotsData || []);
+                        }
                         modSlotParamsListReceived(modSlotParams === null || modSlotParams === void 0 ? void 0 : modSlotParams[0]);
                         modSlotParamLabelsReceived(modSlotParams === null || modSlotParams === void 0 ? void 0 : modSlotParams[1]);
                         return [
@@ -6798,10 +6828,34 @@ function ModMatrix(param) {
         })();
     };
     useEffect(function() {
+        console.log('dssdffsd');
         getAPVTSParams();
     }, [
         window
     ]);
+    useEffect(function() {
+        var _Object_keys;
+        var savedSlots = (_Object_keys = Object.keys(modSlotTargets)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.reduce(function(acc, item) {
+            if (modSlotTargets === null || modSlotTargets === void 0 ? void 0 : modSlotTargets[item].isSaved) {
+                acc === null || acc === void 0 ? void 0 : acc.push(item);
+            }
+            return acc;
+        }, []);
+        // .sort();
+        var previewSlot = getModSlotPreview();
+        var displayPreviewSlot = previewSlot !== undefined;
+        if (displayPreviewSlot) {
+            setDisplayedModSlots(_to_consumable_array(savedSlots).concat([
+                previewSlot.rowId
+            ]));
+        } else {
+            setDisplayedModSlots(savedSlots);
+        }
+        console.log(modSlotTargets, 'modSlotTargets');
+    }, [
+        modSlotTargets,
+        modSlotIds
+    ]);
     var headers = [
         'Target'
     ].concat(_to_consumable_array(modSlotParamLabels), [
@@ -6810,7 +6864,6 @@ function ModMatrix(param) {
     return /*#__PURE__*/ React__default.createElement(Box, {
         gap: Box.gap.medium,
         padding: [
-            Box.padding.medium,
             Box.padding.large
         ],
         className: "ModMatrix ".concat(className ? className : ''),
@@ -6828,11 +6881,7 @@ function ModMatrix(param) {
                 flex: i === 0 ? "0 0 ".concat(ComboboxCellWidth) : i === headers.length - 1 ? "0 0 ".concat(DeleteButtonCellWidth) : '2'
             },
             key: item,
-            className: "ModMatrixHeaderCell",
-            padding: [
-                Box.padding.medium,
-                Box.padding.large
-            ]
+            className: "ModMatrixHeaderCell"
         }, /*#__PURE__*/ React__default.createElement(Label, {
             fontSize: Label.fontSize.small
         }, item));
@@ -6843,7 +6892,8 @@ function ModMatrix(param) {
     }, (displayedModSlots === null || displayedModSlots === void 0 ? void 0 : displayedModSlots.length) ? displayedModSlots === null || displayedModSlots === void 0 ? void 0 : displayedModSlots.map(function(item, i) {
         return /*#__PURE__*/ React__default.createElement(ModMatrixRow, {
             rowId: item,
-            key: "".concat(item + i)
+            key: "".concat(item + i),
+            rowIndex: i
         });
     }) : null));
 }
@@ -8211,7 +8261,7 @@ var SettingsTab = function() {
 };
 function ModuleFooter(param) {
     var className = param.className, style = param.style;
-    var _useState = _sliced_to_array(useState(0), 2), selectedTab = _useState[0], setSelectedTab = _useState[1];
+    var _useState = _sliced_to_array(useState(null), 2), selectedTab = _useState[0], setSelectedTab = _useState[1];
     var setSelectedFooterTabFunc = Juce.getNativeFunction('setSelectedFooterTab');
     var getSelectedFooterTabFunc = Juce.getNativeFunction('getSelectedFooterTab');
     useEffect(function() {
@@ -8258,22 +8308,8 @@ function ModuleFooter(param) {
         window
     ]);
     var handleTabChange = function(newSelection) {
-        var updateBackend = function() {
-            return _async_to_generator(function() {
-                return _ts_generator(this, function(_state) {
-                    try {
-                        setSelectedFooterTabFunc(newSelection);
-                        setSelectedTab(newSelection);
-                    } catch (e) {
-                        console.log(e);
-                    }
-                    return [
-                        2
-                    ];
-                });
-            })();
-        };
-        updateBackend();
+        setSelectedTab(newSelection);
+        setSelectedFooterTabFunc(newSelection);
     };
     return /*#__PURE__*/ React__default.createElement(Box, {
         gap: Box.gap.small,
@@ -8307,6 +8343,7 @@ function ModuleFooter(param) {
             'Sequencer',
             'Settings'
         ],
+        initialSelectedIndex: selectedTab,
         onChange: handleTabChange,
         padding: [
             Tabs.padding.medium,