@antimatter-audio/antimatter-ui 10.2.0 → 10.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, useRef, useReducer, useCallback, createContext, useContext, useMemo } from 'react';
+import React__default, { useState, useEffect, useRef, useReducer, useCallback, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption } from '@headlessui/react';
 import * as Juce from 'juce-framework-frontend';
@@ -33,7 +33,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$b = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n  --color-brand: #bb68d9;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-page: #1e1d21;\n  --bg-section: #1e1d21;\n  --bg-popover: #09090a;\n  --bg-highlighted: #838091;\n  --bg-muted: #595763;\n  --bg-selected: #2e2c33;\n  --bg-input: #1e1d21;\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  border: none;\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: not-allowed;\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$b = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n  --color-brand: #bb68d9;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-page: #1e1d21;\n  --bg-section: #1e1d21;\n  --bg-popover: #09090a;\n  --bg-highlighted: #838091;\n  --bg-muted: #595763;\n  --bg-selected: #2e2c33;\n  --bg-input: #1e1d21;\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: not-allowed;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
 styleInject(css_248z$b);
 
 var Spacing = /*#__PURE__*/ function(Spacing) {
@@ -218,7 +218,7 @@ function _array_like_to_array$c(arr, len) {
 function _array_with_holes$c(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$i(obj, key, value) {
+function _define_property$k(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -258,7 +258,7 @@ function _iterable_to_array_limit$c(arr, i) {
 function _non_iterable_rest$c() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$i(target) {
+function _object_spread$k(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -268,7 +268,7 @@ function _object_spread$i(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$i(target, key, source[key]);
+            _define_property$k(target, key, source[key]);
         });
     }
     return target;
@@ -347,7 +347,7 @@ function Button(param) {
         onMouseDown: handleMouseDown,
         disabled: disabled,
         onClick: onClick && onClick,
-        style: _object_spread$i({
+        style: _object_spread$k({
             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], ")"),
@@ -365,7 +365,7 @@ Button.margin = Spacing;
 Button.type = ButtonType;
 Button.size = ButtonSize;
 
-var css_248z$8 = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  border-radius: var(--radius-sm);\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: var(--spacing-xl);\n  background: var(--bg-input);\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n    background-color: var(--bg-highlighted);\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Dropdown-item {\n  background-color: var(--bg-popover);\n  padding: var(--spacing-l);\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  &:hover {\n    background-color: var(--bg-highlighted);\n  }\n  &[data-selected] {\n    background-color: var(--bg-selected);\n  }\n}\n";
+var css_248z$8 = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border-radius: var(--radius-sm);\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: var(--spacing-xl);\n  background: var(--color-gray-800);\n  color: var(--color-text);\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n    background-color: var(--bg-highlighted);\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Dropdown-items {\n  border: 2px solid;\n}\n\n.Dropdown-item {\n  background-color: var(--bg-page);\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  min-width: 100px;\n  color: var(--color-text);\n  cursor: pointer;\n  text-align: center;\n  text-transform: uppercase;\n  font-weight: bold;\n}\n\n.Dropdown-item[data-selected] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n\n.Dropdown-item[data-active] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n";
 styleInject(css_248z$8);
 
 function useObservable(param) {
@@ -416,7 +416,7 @@ function _array_like_to_array$b(arr, len) {
 function _array_with_holes$b(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$h(obj, key, value) {
+function _define_property$j(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -456,7 +456,7 @@ function _iterable_to_array_limit$b(arr, i) {
 function _non_iterable_rest$b() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$h(target) {
+function _object_spread$j(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -466,7 +466,7 @@ function _object_spread$h(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$h(target, key, source[key]);
+            _define_property$j(target, key, source[key]);
         });
     }
     return target;
@@ -507,9 +507,9 @@ var defaultGlobalStateValue = {
         label: 'Antimatter Audio',
         value: 0
     },
-    automatableParams: [],
+    automatableParamsList: [],
     automatableParamLabels: [],
-    modSlots: [],
+    modSlots: {},
     modSlotParams: [],
     modSlotParamLabels: [],
     advancedView: false
@@ -517,33 +517,41 @@ var defaultGlobalStateValue = {
 // Reducer function to handle state updates
 var reducer = function(state, action) {
     switch(action.type){
-        case 'SET_HIGHLIGHTED_ITEM':
-            return _object_spread_props$3(_object_spread$h({}, state), {
+        case 'HIGHLIGHTED_ITEM_CHANGED':
+            return _object_spread_props$3(_object_spread$j({}, state), {
                 highlightedItem: action.payload
             });
-        case 'TOGGLE_ADVANCED_VIEW':
-            return _object_spread_props$3(_object_spread$h({}, state), {
+        case 'ADVANCED_VIEW_TOGGLED':
+            return _object_spread_props$3(_object_spread$j({}, state), {
                 advancedView: action.payload
             });
-        case 'SET_AUTOMATABLE_PARAMS':
-            return _object_spread_props$3(_object_spread$h({}, state), {
-                automatableParams: action.payload
+        case 'AUTOMATABLE_PARAMS_LIST_RECEIVED':
+            return _object_spread_props$3(_object_spread$j({}, state), {
+                automatableParamsList: action.payload
             });
-        case 'SET_AUTOMATABLE_PARAM_LABELS':
-            return _object_spread_props$3(_object_spread$h({}, state), {
+        case 'AUTOMATABLE_PARAM_LABELS_RECEIVED':
+            return _object_spread_props$3(_object_spread$j({}, state), {
                 automatableParamLabels: action.payload
             });
-        case 'SET_MOD_SLOTS':
-            return _object_spread_props$3(_object_spread$h({}, state), {
-                modSlots: action.payload
+        case 'MOD_SLOTS_RECEIVED':
+            var _action_payload;
+            return _object_spread_props$3(_object_spread$j({}, state), {
+                modSlots: 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$3(_object_spread$j({}, acc), _define_property$j({}, val[0], val[1]));
+                }, {})
+            });
+        case 'MOD_SLOT_UPDATED':
+            var _action_payload1, _action_payload2;
+            return _object_spread_props$3(_object_spread$j({}, state), {
+                modSlots: _object_spread_props$3(_object_spread$j({}, state === null || state === void 0 ? void 0 : state.modSlots), _define_property$j({}, (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1[0], action === null || action === void 0 ? void 0 : (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2[1]))
             });
-        case 'SET_MOD_SLOT_PARAMS':
-            return _object_spread_props$3(_object_spread$h({}, state), {
-                modSlotParams: action.payload
+        case 'MOD_SLOT_PARAMS_LIST_RECEIVED':
+            return _object_spread_props$3(_object_spread$j({}, state), {
+                modSlotParams: action === null || action === void 0 ? void 0 : action.payload
             });
-        case 'SET_MOD_SLOT_PARAM_LABELS':
-            return _object_spread_props$3(_object_spread$h({}, state), {
-                modSlotParamLabels: action.payload
+        case 'MOD_SLOT_PARAM_LABELS_RECIEVED':
+            return _object_spread_props$3(_object_spread$j({}, state), {
+                modSlotParamLabels: action === null || action === void 0 ? void 0 : action.payload
             });
         default:
             return state;
@@ -562,45 +570,51 @@ function useGlobalContext(selector) {
 function GlobalContextProvider(param) {
     var children = param.children;
     var _useReducer = _sliced_to_array$b(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
-    var setHighlightedItem = useCallback(function(highlightedItem) {
+    var highlightedItemChanged = useCallback(function(highlightedItem) {
         dispatch({
-            type: 'SET_HIGHLIGHTED_ITEM',
+            type: 'HIGHLIGHTED_ITEM_CHANGED',
             payload: highlightedItem
         });
     }, []);
-    var setAdvancedView = useCallback(function(advancedView) {
+    var advancedViewToggled = useCallback(function(advancedView) {
         dispatch({
-            type: 'TOGGLE_ADVANCED_VIEW',
+            type: 'ADVANCED_VIEW_TOGGLED',
             payload: advancedView
         });
     }, []);
-    var setAutomatableParams = useCallback(function(automatableParams) {
+    var automatableParamsListReceived = useCallback(function(automatableParamsList) {
         dispatch({
-            type: 'SET_AUTOMATABLE_PARAMS',
-            payload: automatableParams
+            type: 'AUTOMATABLE_PARAMS_LIST_RECEIVED',
+            payload: automatableParamsList
         });
     }, []);
-    var setAutomatableParamLabels = useCallback(function(automatableParamLabels) {
+    var automatableParamLabelsReceived = useCallback(function(automatableParamLabels) {
         dispatch({
-            type: 'SET_AUTOMATABLE_PARAM_LABELS',
+            type: 'AUTOMATABLE_PARAM_LABELS_RECEIVED',
             payload: automatableParamLabels
         });
     }, []);
-    var setModSlots = useCallback(function(modSlots) {
+    var modSlotsReceived = useCallback(function(modSlots) {
         dispatch({
-            type: 'SET_MOD_SLOTS',
+            type: 'MOD_SLOTS_RECEIVED',
             payload: modSlots
         });
     }, []);
-    var setModSlotParams = useCallback(function(modSlotParams) {
+    var modSlotUpdated = useCallback(function(modSlot) {
         dispatch({
-            type: 'SET_MOD_SLOT_PARAMS',
+            type: 'MOD_SLOT_UPDATED',
+            payload: modSlot
+        });
+    }, []);
+    var modSlotParamsListReceived = useCallback(function(modSlotParams) {
+        dispatch({
+            type: 'MOD_SLOT_PARAMS_LIST_RECEIVED',
             payload: modSlotParams
         });
     }, []);
-    var setModSlotParamLabels = useCallback(function(modSlotParamLables) {
+    var modSlotParamLabelsReceived = useCallback(function(modSlotParamLables) {
         dispatch({
-            type: 'SET_MOD_SLOT_PARAM_LABELS',
+            type: 'MOD_SLOT_PARAM_LABELS_RECIEVED',
             payload: modSlotParamLables
         });
     }, []);
@@ -613,13 +627,14 @@ function GlobalContextProvider(param) {
     });
     var value = {
         globalState: state,
-        setHighlightedItem: setHighlightedItem,
-        setAdvancedView: setAdvancedView,
-        setAutomatableParams: setAutomatableParams,
-        setAutomatableParamLabels: setAutomatableParamLabels,
-        setModSlots: setModSlots,
-        setModSlotParams: setModSlotParams,
-        setModSlotParamLabels: setModSlotParamLabels,
+        highlightedItemChanged: highlightedItemChanged,
+        advancedViewToggled: advancedViewToggled,
+        automatableParamsListReceived: automatableParamsListReceived,
+        automatableParamLabelsReceived: automatableParamLabelsReceived,
+        modSlotsReceived: modSlotsReceived,
+        modSlotUpdated: modSlotUpdated,
+        modSlotParamsListReceived: modSlotParamsListReceived,
+        modSlotParamLabelsReceived: modSlotParamLabelsReceived,
         useRandom: useRandom
     };
     return /*#__PURE__*/ React__default.createElement(GlobalContext.Provider, {
@@ -673,11 +688,11 @@ function _unsupported_iterable_to_array$a(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
 }
-var useCombobox = function(param) {
+var useDropdown = function(param) {
     var id = param.id, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, filter = param.filter, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
     var _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$a(useState(comboBoxState.getChoiceIndex()), 2), value = _useState[0], setValue = _useState[1];
+    var _useState = _sliced_to_array$a(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
     var _useState1 = _sliced_to_array$a(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
     var setHighlightedItem = useGlobalContext().setHighlightedItem;
     var choices = items.length ? items : (properties === null || properties === void 0 ? void 0 : (_properties_choices = properties.choices) === null || _properties_choices === void 0 ? void 0 : _properties_choices.length) ? properties === null || properties === void 0 ? void 0 : properties.choices : [];
@@ -687,32 +702,32 @@ var useCombobox = function(param) {
     }) : choices;
     var prevIndex = useRef(null);
     var handleChange = function(value) {
-        var index = choices === null || choices === void 0 ? void 0 : choices.indexOf(value);
-        // const index = 0;
-        if (index !== prevIndex.current) {
-            comboBoxState.setChoiceIndex(index);
-            setValue(value);
-            onChange && onChange(index);
+        var choiceIndex = choices.indexOf(value);
+        if (choiceIndex !== prevIndex.current) {
+            comboBoxState.setChoiceIndex(choiceIndex);
+            setIndex(choiceIndex);
+            onChange && onChange(choiceIndex);
             // //@ts-expect-error
             // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
             if (displayValInHeader) {
-                setHighlightedItem({
+                setHighlightedItem && setHighlightedItem({
                     label: label,
-                    value: choices === null || choices === void 0 ? void 0 : choices[index]
+                    value: value
                 });
             }
-            prevIndex.current = index;
+            prevIndex.current = choiceIndex;
         }
+        return choices[choiceIndex];
     };
     useEffect(function() {
         var comboBoxState = Juce.getComboBoxState(id);
-        setValue(comboBoxState.getChoiceIndex());
+        setIndex(comboBoxState.getChoiceIndex());
     }, [
         id
     ]);
     useEffect(function() {
         var valueListenerId = comboBoxState.valueChangedEvent.addListener(function() {
-            setValue(comboBoxState.getChoiceIndex());
+            setIndex(comboBoxState.getChoiceIndex());
         });
         var propertiesListenerId = comboBoxState.propertiesChangedEvent.addListener(function() {
             setProperties(comboBoxState.properties);
@@ -726,16 +741,16 @@ var useCombobox = function(param) {
     ]);
     var onMouseEnter = function() {
         if (displayValInHeader) {
-            setHighlightedItem({
+            setHighlightedItem && (setHighlightedItem === null || setHighlightedItem === void 0 ? void 0 : setHighlightedItem({
                 label: label,
-                value: choices === null || choices === void 0 ? void 0 : choices[value]
-            });
+                value: choices === null || choices === void 0 ? void 0 : choices[index]
+            }));
         }
     };
     return {
-        value: value,
-        valueString: choices === null || choices === void 0 ? void 0 : choices[value],
-        setValue: setValue,
+        value: choices[index],
+        index: index,
+        setIndex: setIndex,
         choices: choices,
         filteredChoices: filteredChoices,
         onMouseEnter: onMouseEnter,
@@ -743,127 +758,35 @@ var useCombobox = function(param) {
     };
 };
 
-function Dropdown(param) {
-    var _param_items = param.items, items = _param_items === void 0 ? [
-        'Mock Item 1',
-        'Mock Item 2',
-        'Mock Item 3'
-    ] : _param_items, label = param.label, className = param.className, onChange = param.onChange, id = param.id, style = param.style;
-    var _useCombobox = useCombobox({
-        id: id,
-        label: label,
-        items: items,
-        onChange: onChange
-    }), value = _useCombobox.value, choices = _useCombobox.choices, onMouseEnter = _useCombobox.onMouseEnter, handleChange = _useCombobox.handleChange;
-    return /*#__PURE__*/ React__default.createElement("div", {
-        onMouseEnter: onMouseEnter
-    }, /*#__PURE__*/ React__default.createElement(Listbox, {
-        value: value,
-        onChange: handleChange
-    }, /*#__PURE__*/ React__default.createElement(ListboxButton, {
-        className: classnames('Dropdown-button', className),
-        style: style,
-        "aria-label": "Assignee",
-        onChange: function(value) {
-            return console.log(value);
-        }
-    }, choices[value]), /*#__PURE__*/ React__default.createElement(ListboxOptions, {
-        anchor: "bottom",
-        portal: false,
-        className: "Dropdown-items z-10"
-    }, choices.map(function(item, i) {
-        return /*#__PURE__*/ React__default.createElement(ListboxOption, {
-            className: classnames('Dropdown-item'),
-            key: item,
-            value: i
-        }, item);
-    }))));
-}
-
-var validate = function(param) {
-    var value = param.value, minLength = param.minLength, maxLength = param.maxLength, min = param.min, max = param.max, _param_type = param.type, type = _param_type === void 0 ? InputTypes.text : _param_type;
-    // TODO: Clean up
-    var errorMessages = [];
-    var isIncomplete = false;
-    var length = value.toString().length;
-    if (length > maxLength && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.exceedsMaxLength)) === -1) {
-        errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.push(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.exceedsMaxLength);
-    }
-    if (length < minLength) {
-        isIncomplete = true;
-    }
-    if (type === InputTypes.number) {
-        if (!(value === '' || /^-?[\d-.]+$/.test(value.toString()))) {
-            errorMessages.push(InputErrorStates.invalidCharacter);
-        }
-        if (typeof value === 'number') {
-            if ((value > max || value < min) && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates.valueOutOfRange)) === -1) {
-                errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.push(InputErrorStates.valueOutOfRange);
-            }
-        }
-    }
-    return {
-        errorMessages: errorMessages,
-        isIncomplete: isIncomplete,
-        isValid: !errorMessages.length && !isIncomplete
-    };
-};
-var getBarTransformStyles = function(param) {
-    var polarity = param.polarity, orientation = param.orientation, value = param.value;
-    if (polarity === Polarity.linear) {
-        return orientation === Orientation.horizontal ? {
-            width: value ? "100%" : '1px',
-            height: '100%',
-            transform: value ? "scale(".concat(Math.ceil(value) * 0.01, ", 1)") : 'none',
-            transformOrigin: 'center left',
-            top: '0',
-            bottom: '0',
-            left: '0'
-        } : {
-            width: "100%",
-            height: value ? '100%' : '1px',
-            transform: "scale(1, ".concat(Math.ceil(value) * 0.01, ")"),
-            transformOrigin: 'bottom center',
-            top: '0',
-            bottom: '0',
-            left: '0'
-        };
-    } else {
-        return orientation === Orientation.horizontal ? {
-            width: value ? "100%" : '1px',
-            height: '100%',
-            transform: value ? "scale(".concat(Math.ceil(value) * 0.01 / 2, ", 1)") : 'none',
-            transformOrigin: 'left center',
-            top: '0',
-            bottom: '0',
-            left: '50%'
-        } : {
-            width: "100%",
-            height: value ? '100%' : '1px',
-            transform: value ? "scale(1, ".concat(Math.ceil(value) * 0.01 / 2, ")") : 'none',
-            transformOrigin: 'bottom center',
-            bottom: '50%',
-            left: '0',
-            right: '0'
-        };
-    }
-};
-var randomizeValue = function(min, max) {
-    return Math.random() * (max - min) + min;
-};
-
-var css_248z$7 = ".TextInput {\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n";
-styleInject(css_248z$7);
+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 _array_like_to_array$9(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes$9(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _define_property$g(obj, key, value) {
+function _define_property$i(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -876,34 +799,7 @@ function _define_property$g(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$9(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    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$9() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _object_spread$g(target) {
+function _object_spread$i(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -913,60 +809,442 @@ function _object_spread$g(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$g(target, key, source[key]);
+            _define_property$i(target, key, source[key]);
         });
     }
     return target;
 }
-function _sliced_to_array$9(arr, i) {
-    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
+function ownKeys$2(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
 }
-function _unsupported_iterable_to_array$9(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
+function _object_spread_props$2(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$2(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
 }
-// import { decimalToPercent, percentToDecimal } from '../../common/utils';
-// import debounce from 'lodash.debounce';
-var InputTypes = /*#__PURE__*/ function(InputTypes) {
-    InputTypes["text"] = "text";
-    InputTypes["number"] = "number";
-    return InputTypes;
-}({});
-function Input(param) {
-    var onComplete = param.onComplete, value = param.value, min = param.min, max = param.max, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, _param_minLength = param.minLength, minLength = _param_minLength === void 0 ? 1 : _param_minLength, _param_maxLength = param.maxLength, maxLength = _param_maxLength === void 0 ? 20 : _param_maxLength, fontSize = param.fontSize, style = param.style, className = param.className, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? '#999' : _param_textColor;
-    var _inputRef_current;
-    var _useState = _sliced_to_array$9(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
-    var _useState1 = _sliced_to_array$9(useState(false), 2), hasError = _useState1[0], setHasError = _useState1[1];
-    var _useState2 = _sliced_to_array$9(useState(false), 2), hasIncompleteValue = _useState2[0], setHasIncompleteValue = _useState2[1];
-    var valueRef = useRef(null);
-    var timer, timeoutVal = 2000;
-    // (inputValue === '' || /^-?\d+$/.test(inputValue)
-    function handleKeyPress(e) {
-        window.clearTimeout(timer);
-        var key = e.keyCode || e.which;
-        if (key === 13 || key === 9) {
-            var newValue = e.target.value;
-            var _validate = validate({
-                value: newValue,
-                type: type,
-                minLength: minLength,
-                maxLength: maxLength,
-                min: min,
-                max: max
-            }), errorMessages = _validate.errorMessages, isIncomplete = _validate.isIncomplete;
-            if (errorMessages.length === 0 && !isIncomplete) {
-                setHasIncompleteValue(false);
-                setHasError(false);
-            }
+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];
         }
     }
-    function handleKeyUp(e) {
-        window.clearTimeout(timer); // prevent errant multiple timeouts from being generated
-        timer = window.setTimeout(function() {
+    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.auto : _param_width, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, _param_height = _param.height, height = _param_height === void 0 ? Height.auto : _param_height, _param_border = _param.border, border = _param_border === void 0 ? false : _param_border, _param_flexDirection = _param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _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",
+        "border",
+        "flexDirection",
+        "padding",
+        "gap",
+        "tag"
+    ]);
+    var Tag = tag;
+    var _padding_, _padding_1, _padding_2, _ref;
+    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$2(_object_spread$i({
+        // id="globalValues"
+        key: key,
+        className: className,
+        onClick: onClick
+    }, rest), {
+        style: _object_spread$i({
+            flexWrap: flexWrap,
+            display: display,
+            gap: "var(--gap-".concat(gap, ")"),
+            width: '100%',
+            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], ")"),
+            border: border ? '2px solid #999' : '',
+            maxWidth: width,
+            height: 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;
+
+function _define_property$h(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$h(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$h(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function Label(param) {
+    var value = param.value, id = param.id, className = param.className, style = param.style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none
+    ] : _param_padding, 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$h({
+            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'
+        }, style),
+        className: classnames('Label', 'select-none', className)
+    }, value ? value : children);
+}
+Label.padding = Spacing;
+Label.fontSize = FontSizes;
+
+function _define_property$g(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$g(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$g(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function Dropdown(param) {
+    var label = param.label, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_labelColor = param.labelColor, labelColor = _param_labelColor === void 0 ? 'var(--color-text)' : _param_labelColor, className = param.className, onChange = param.onChange, id = param.id, style = param.style;
+    var _useDropdown = useDropdown({
+        id: id,
+        label: label,
+        onChange: onChange
+    }), value = _useDropdown.value, choices = _useDropdown.choices, onMouseEnter = _useDropdown.onMouseEnter, handleChange = _useDropdown.handleChange;
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        onMouseEnter: onMouseEnter
+    }, /*#__PURE__*/ React__default.createElement(Listbox, {
+        value: value,
+        onChange: handleChange
+    }, /*#__PURE__*/ React__default.createElement(ListboxButton, {
+        className: classnames('Dropdown-button', className),
+        style: _object_spread$g({
+            color: "".concat(color ? color : 'initial')
+        }, style),
+        "aria-label": "Assignee",
+        onChange: function(value) {
+            return console.log(value);
+        }
+    }, value), /*#__PURE__*/ React__default.createElement(ListboxOptions, {
+        anchor: "bottom",
+        portal: false,
+        className: "Dropdown-items z-10",
+        style: {
+            color: "".concat(color ? color : 'initial')
+        }
+    }, choices === null || choices === void 0 ? void 0 : choices.map(function(item, i) {
+        return /*#__PURE__*/ React__default.createElement(ListboxOption, {
+            className: classnames('Dropdown-item'),
+            key: item,
+            value: item,
+            style: {
+                color: "".concat(color ? color : 'initial')
+            }
+        }, item);
+    }))), /*#__PURE__*/ React__default.createElement(Label, {
+        padding: [
+            Label.padding.mediumSmall
+        ],
+        fontSize: Label.fontSize.small,
+        value: label,
+        style: {
+            color: "".concat(labelColor ? labelColor : 'initial')
+        }
+    }));
+}
+
+var validate = function(param) {
+    var value = param.value, minLength = param.minLength, maxLength = param.maxLength, min = param.min, max = param.max, _param_type = param.type, type = _param_type === void 0 ? InputTypes.text : _param_type;
+    // TODO: Clean up
+    var errorMessages = [];
+    var isIncomplete = false;
+    var length = value.toString().length;
+    if (length > maxLength && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.exceedsMaxLength)) === -1) {
+        errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.push(InputErrorStates === null || InputErrorStates === void 0 ? void 0 : InputErrorStates.exceedsMaxLength);
+    }
+    if (length < minLength) {
+        isIncomplete = true;
+    }
+    if (type === InputTypes.number) {
+        if (!(value === '' || /^-?[\d-.]+$/.test(value.toString()))) {
+            errorMessages.push(InputErrorStates.invalidCharacter);
+        }
+        if (typeof value === 'number') {
+            if ((value > max || value < min) && (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.indexOf(InputErrorStates.valueOutOfRange)) === -1) {
+                errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.push(InputErrorStates.valueOutOfRange);
+            }
+        }
+    }
+    return {
+        errorMessages: errorMessages,
+        isIncomplete: isIncomplete,
+        isValid: !errorMessages.length && !isIncomplete
+    };
+};
+var getBarTransformStyles = function(param) {
+    var polarity = param.polarity, orientation = param.orientation, value = param.value;
+    if (polarity === Polarity.linear) {
+        return orientation === Orientation.horizontal ? {
+            width: value ? "100%" : '1px',
+            height: '100%',
+            transform: value ? "scale(".concat(Math.ceil(value) * 0.01, ", 1)") : 'none',
+            transformOrigin: 'center left',
+            top: '0',
+            bottom: '0',
+            left: '0'
+        } : {
+            width: "100%",
+            height: value ? '100%' : '1px',
+            transform: "scale(1, ".concat(Math.ceil(value) * 0.01, ")"),
+            transformOrigin: 'bottom center',
+            top: '0',
+            bottom: '0',
+            left: '0'
+        };
+    } else {
+        return orientation === Orientation.horizontal ? {
+            width: value ? "100%" : '1px',
+            height: '100%',
+            transform: value ? "scale(".concat(Math.ceil(value) * 0.01 / 2, ", 1)") : 'none',
+            transformOrigin: 'left center',
+            top: '0',
+            bottom: '0',
+            left: '50%'
+        } : {
+            width: "100%",
+            height: value ? '100%' : '1px',
+            transform: value ? "scale(1, ".concat(Math.ceil(value) * 0.01 / 2, ")") : 'none',
+            transformOrigin: 'bottom center',
+            bottom: '50%',
+            left: '0',
+            right: '0'
+        };
+    }
+};
+var randomizeValue = function(min, max) {
+    return Math.random() * (max - min) + min;
+};
+
+var css_248z$7 = ".TextInput {\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n";
+styleInject(css_248z$7);
+
+function _array_like_to_array$9(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$9(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property$f(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$9(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$9() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread$f(target) {
+    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$f(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _sliced_to_array$9(arr, i) {
+    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
+}
+function _unsupported_iterable_to_array$9(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
+}
+// import { decimalToPercent, percentToDecimal } from '../../common/utils';
+// import debounce from 'lodash.debounce';
+var InputTypes = /*#__PURE__*/ function(InputTypes) {
+    InputTypes["text"] = "text";
+    InputTypes["number"] = "number";
+    return InputTypes;
+}({});
+function Input(param) {
+    var onComplete = param.onComplete, value = param.value, min = param.min, max = param.max, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, _param_minLength = param.minLength, minLength = _param_minLength === void 0 ? 1 : _param_minLength, _param_maxLength = param.maxLength, maxLength = _param_maxLength === void 0 ? 20 : _param_maxLength, fontSize = param.fontSize, style = param.style, className = param.className, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? '#999' : _param_textColor;
+    var _inputRef_current;
+    var _useState = _sliced_to_array$9(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
+    var _useState1 = _sliced_to_array$9(useState(false), 2), hasError = _useState1[0], setHasError = _useState1[1];
+    var _useState2 = _sliced_to_array$9(useState(false), 2), hasIncompleteValue = _useState2[0], setHasIncompleteValue = _useState2[1];
+    var valueRef = useRef(null);
+    var timer, timeoutVal = 2000;
+    // (inputValue === '' || /^-?\d+$/.test(inputValue)
+    function handleKeyPress(e) {
+        window.clearTimeout(timer);
+        var key = e.keyCode || e.which;
+        if (key === 13 || key === 9) {
+            var newValue = e.target.value;
+            var _validate = validate({
+                value: newValue,
+                type: type,
+                minLength: minLength,
+                maxLength: maxLength,
+                min: min,
+                max: max
+            }), errorMessages = _validate.errorMessages, isIncomplete = _validate.isIncomplete;
+            if (errorMessages.length === 0 && !isIncomplete) {
+                setHasIncompleteValue(false);
+                setHasError(false);
+            }
+        }
+    }
+    function handleKeyUp(e) {
+        window.clearTimeout(timer); // prevent errant multiple timeouts from being generated
+        timer = window.setTimeout(function() {
             var newValue = e.target.value;
             if ((valueRef === null || valueRef === void 0 ? void 0 : valueRef.current) !== newValue) {
                 var _validate = validate({
@@ -1045,7 +1323,7 @@ function Input(param) {
         id: id,
         ref: inputRef,
         className: classnames('TextInput', hasIncompleteValue || hasError ? 'is-blinking' : '', className),
-        style: _object_spread$g({
+        style: _object_spread$f({
             // TODO
             // color: hasError ? 'red' : hasIncompleteValue ? '#999' : textColor
             color: hasError ? 'red' : textColor,
@@ -1184,7 +1462,7 @@ var useSlider = function(param) {
     var scaledValueRef = useRef(null);
     var normalisedValueRef = useRef(null);
     // const randomValueSetCounter = useRef<number>(null);
-    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, setHighlightedItem = _useGlobalContext.setHighlightedItem;
+    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged;
     // Set the initial state
     //@ts-expect-error
     useEffect(function() {
@@ -1209,410 +1487,191 @@ var useSlider = function(param) {
             };
         } else {
             // This sets 'mockProperties' as the value for 'properties' if the app is running in a browser.
-            setProperties(mockProperties);
-            normalisedValueRef.current = mockInitialNormalisedValue;
-        }
-    }, []);
-    // Update the local state when the ID changes
-    useEffect(function() {
-        var sliderState = Juce.getSliderState(id);
-        updateLocalState(sliderState);
-    }, [
-        id
-    ]);
-    // Sets up listeners to handle changes on the backend
-    //@ts-expect-error
-    useEffect(function() {
-        if (!isLocalhost) {
-            var sliderState = Juce.getSliderState(id);
-            var valueListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.valueChangedEvent.addListener(function() {
-                updateLocalState(sliderState);
-            });
-            var propertiesListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.propertiesChangedEvent.addListener(function() {
-                return setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
-            });
-            return function() {
-                sliderState === null || sliderState === void 0 ? void 0 : sliderState.valueChangedEvent.removeListener(valueListenerId);
-                sliderState === null || sliderState === void 0 ? void 0 : sliderState.propertiesChangedEvent.removeListener(propertiesListenerId);
-            };
-        }
-    }, [
-        window
-    ]);
-    // Update the local state from JUCE
-    var updateLocalState = function(sliderState) {
-        var normalisedValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
-        var scaledValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getScaledValue();
-        var scaledValue = parseFloat(scaledValueFromState.toFixed(2));
-        normalisedValueRef.current = parseFloat(normalisedValueFromState.toFixed(2));
-        setScaledValue(scaledValue);
-        onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)));
-        if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
-            setHighlightedItem({
-                label: label,
-                value: scaledValue
-            });
-        }
-    };
-    // Update JUCE state
-    var setNormalisedState = function(newValue) {
-        var sliderState = Juce.getSliderState(id);
-        var fixedNewValue = parseFloat(newValue.toFixed(2));
-        if ((normalisedValueRef === null || normalisedValueRef === void 0 ? void 0 : normalisedValueRef.current) !== fixedNewValue) {
-            !isLocalhost && sliderState.setNormalisedValue(clamp(fixedNewValue));
-            normalisedValueRef.current = fixedNewValue;
-        }
-    };
-    var setScaledState = function(newValue) {
-        var sliderState = Juce.getSliderState(id);
-        if ((scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== newValue) {
-            !isLocalhost && properties && sliderState.setNormalisedValue(scaledToNormalised({
-                scaledValue: clamp(parseFloat(newValue.toFixed(2)), properties === null || properties === void 0 ? void 0 : properties.start, properties === null || properties === void 0 ? void 0 : properties.end),
-                properties: properties
-            }));
-            scaledValueRef.current = newValue;
-        }
-    };
-    var bindDrag = useDrag(function(param) {
-        var down = param.down, delta = param.delta, first = param.first, last = param.last;
-        if (first) {
-            //@ts-expect-error
-            window.__JUCE__.backend.emitEvent('jsDragStarted', {
-                i: "".concat(0)
-            });
-        }
-        if (down) {
-            var deltaVal = delta[1] * -1;
-            var _normalisedValueRef_current;
-            var newValue = ((_normalisedValueRef_current = normalisedValueRef.current) !== null && _normalisedValueRef_current !== void 0 ? _normalisedValueRef_current : 0) + deltaVal * // (properties?.interval && properties?.interval.toString().length > 4
-            //   ? 4
-            //   : 0.4) *
-            ((properties === null || properties === void 0 ? void 0 : properties.interval) || 0.01);
-            setNormalisedState(newValue);
-        }
-        if (last) {
-            //@ts-expect-error
-            window.__JUCE__.backend.emitEvent('jsDragEnded', {
-                i: "".concat(0)
-            });
-        }
-    }, {
-        preventDefault: true
-    });
-    var bindBarSliderDrag = function() {
-        var orientation = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : Orientation.vertical;
-        var drag = useDrag(function(param) {
-            var down = param.down, event = param.event, first = param.first, last = param.last;
-            var _event_target;
-            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;
-            // 1138 - 1043.1
-            if (first) {
-                //@ts-expect-error
-                window.__JUCE__.backend.emitEvent('jsDragStarted', {
-                    i: "".concat(0)
-                });
-            }
-            // START
-            // bottom: 685
-            // height: 40
-            // left: 733.5
-            // right: 884.328125
-            // top: 645
-            // width: 150.828125
-            // x: 733.5
-            // y: 645
-            // clientx 735
-            // 735 - 733.5
-            // END
-            // bottom: 685
-            // height: 40
-            // left: 733.5
-            // right: 884.328125
-            // top: 645
-            // width: 150.828125
-            // x: 733.5
-            // y: 645
-            // clientx: 883
-            if (down) {
-                // TODO: Increments?
-                var newValue;
-                if (orientation === Orientation.vertical) {
-                    newValue = 1 - y / rect.height;
-                } else {
-                    newValue = x / rect.width;
-                }
-                setNormalisedState(newValue);
-            }
-            if (last) {
-                //@ts-expect-error
-                window.__JUCE__.backend.emitEvent('jsDragEnded', {
-                    i: "".concat(0)
-                });
-            }
-        }, {
-            preventDefault: true
-        });
-        return drag();
-    };
-    var onMouseEnter = function() {
+            setProperties(mockProperties);
+            normalisedValueRef.current = mockInitialNormalisedValue;
+        }
+    }, []);
+    // Update the local state when the ID changes
+    useEffect(function() {
+        var sliderState = Juce.getSliderState(id);
+        updateLocalState(sliderState);
+    }, [
+        id
+    ]);
+    // Sets up listeners to handle changes on the backend
+    //@ts-expect-error
+    useEffect(function() {
+        if (!isLocalhost) {
+            var sliderState = Juce.getSliderState(id);
+            var valueListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.valueChangedEvent.addListener(function() {
+                updateLocalState(sliderState);
+            });
+            var propertiesListenerId = sliderState === null || sliderState === void 0 ? void 0 : sliderState.propertiesChangedEvent.addListener(function() {
+                return setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
+            });
+            return function() {
+                sliderState === null || sliderState === void 0 ? void 0 : sliderState.valueChangedEvent.removeListener(valueListenerId);
+                sliderState === null || sliderState === void 0 ? void 0 : sliderState.propertiesChangedEvent.removeListener(propertiesListenerId);
+            };
+        }
+    }, [
+        window
+    ]);
+    // Update the local state from JUCE
+    var updateLocalState = function(sliderState) {
+        var normalisedValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getNormalisedValue();
+        var scaledValueFromState = sliderState === null || sliderState === void 0 ? void 0 : sliderState.getScaledValue();
+        var scaledValue = parseFloat(scaledValueFromState.toFixed(2));
+        normalisedValueRef.current = parseFloat(normalisedValueFromState.toFixed(2));
+        setScaledValue(scaledValue);
+        onChange && onChange(parseFloat(scaledValueFromState.toFixed(2)));
         if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
-            setHighlightedItem({
+            highlightedItemChanged({
                 label: label,
                 value: scaledValue
             });
         }
     };
-    // TODO: Refactor
-    // const onChangeStarted = () => sliderState.sliderDragStarted();
-    // const onChangeCommitted = () => sliderState.sliderDragEnded();
-    // useEffect(() => {
-    //   console.log(
-    //     normalisedValueRef.current,
-    //     'normalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.currentnormalisedValueRef.current',
-    //   );
-    // }, [normalisedValueRef.current]);
-    return {
-        setNormalisedState: setNormalisedState,
-        setScaledState: setScaledState,
-        // onChangeStarted,
-        // onChangeCommitted,
-        onMouseEnter: onMouseEnter,
-        bindBarSliderDrag: bindBarSliderDrag,
-        bindDrag: bindDrag,
-        normalisedValue: normalisedValueRef.current || 0,
-        scaledValue: scaledValue,
-        properties: properties
+    // Update JUCE state
+    var setNormalisedState = function(newValue) {
+        var sliderState = Juce.getSliderState(id);
+        var fixedNewValue = parseFloat(newValue.toFixed(2));
+        if ((normalisedValueRef === null || normalisedValueRef === void 0 ? void 0 : normalisedValueRef.current) !== fixedNewValue) {
+            !isLocalhost && sliderState.setNormalisedValue(clamp(fixedNewValue));
+            normalisedValueRef.current = fixedNewValue;
+        }
     };
-};
-
-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$f(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$f(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;
+    var setScaledState = function(newValue) {
+        var sliderState = Juce.getSliderState(id);
+        if ((scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== newValue) {
+            !isLocalhost && properties && sliderState.setNormalisedValue(scaledToNormalised({
+                scaledValue: clamp(parseFloat(newValue.toFixed(2)), properties === null || properties === void 0 ? void 0 : properties.start, properties === null || properties === void 0 ? void 0 : properties.end),
+                properties: properties
             }));
+            scaledValueRef.current = newValue;
         }
-        ownKeys.forEach(function(key) {
-            _define_property$f(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys$2(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$2(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$2(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.auto : _param_width, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, _param_height = _param.height, height = _param_height === void 0 ? Height.auto : _param_height, _param_border = _param.border, border = _param_border === void 0 ? false : _param_border, _param_flexDirection = _param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _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",
-        "border",
-        "flexDirection",
-        "padding",
-        "gap",
-        "tag"
-    ]);
-    var Tag = tag;
-    var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$2(_object_spread$f({
-        // id="globalValues"
-        key: key,
-        className: className,
-        onClick: onClick
-    }, rest), {
-        style: _object_spread$f({
-            flexWrap: flexWrap,
-            display: display,
-            gap: "var(--gap-".concat(gap, ")"),
-            width: '100%',
-            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], ")"),
-            border: border ? '2px solid #999' : '',
-            maxWidth: width,
-            height: 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;
-
-function _define_property$e(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$e(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;
-            }));
+    };
+    var bindDrag = useDrag(function(param) {
+        var down = param.down, delta = param.delta, first = param.first, last = param.last;
+        if (first) {
+            //@ts-expect-error
+            window.__JUCE__.backend.emitEvent('jsDragStarted', {
+                i: "".concat(0)
+            });
         }
-        ownKeys.forEach(function(key) {
-            _define_property$e(target, key, source[key]);
+        if (down) {
+            var deltaVal = delta[1] * -1;
+            var getNormalisedInterval = function() {
+                if (properties === null || properties === void 0 ? void 0 : properties.interval) {
+                    if ((properties === null || properties === void 0 ? void 0 : properties.interval) >= 1) {
+                        return (properties === null || properties === void 0 ? void 0 : properties.interval) * 0.01;
+                    } else {
+                        return properties === null || properties === void 0 ? void 0 : properties.interval;
+                    }
+                } else {
+                    return 0.01;
+                }
+            };
+            var normalisedInterval = getNormalisedInterval();
+            var _normalisedValueRef_current;
+            var newValue = ((_normalisedValueRef_current = normalisedValueRef.current) !== null && _normalisedValueRef_current !== void 0 ? _normalisedValueRef_current : 0) + deltaVal * // (properties?.interval && properties?.interval.toString().length > 4
+            //   ? 4
+            //   : 0.4) *
+            normalisedInterval;
+            setNormalisedState(clamp(newValue));
+        }
+        if (last) {
+            //@ts-expect-error
+            window.__JUCE__.backend.emitEvent('jsDragEnded', {
+                i: "".concat(0)
+            });
+        }
+    }, {
+        preventDefault: true
+    });
+    var bindBarSliderDrag = function() {
+        var orientation = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : Orientation.vertical;
+        var drag = useDrag(function(param) {
+            var down = param.down, event = param.event, first = param.first, last = param.last;
+            var _event_target;
+            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;
+            // 1138 - 1043.1
+            if (first) {
+                //@ts-expect-error
+                window.__JUCE__.backend.emitEvent('jsDragStarted', {
+                    i: "".concat(0)
+                });
+            }
+            // START
+            // bottom: 685
+            // height: 40
+            // left: 733.5
+            // right: 884.328125
+            // top: 645
+            // width: 150.828125
+            // x: 733.5
+            // y: 645
+            // clientx 735
+            // 735 - 733.5
+            // END
+            // bottom: 685
+            // height: 40
+            // left: 733.5
+            // right: 884.328125
+            // top: 645
+            // width: 150.828125
+            // x: 733.5
+            // y: 645
+            // clientx: 883
+            if (down) {
+                // TODO: Increments?
+                var newValue;
+                if (orientation === Orientation.vertical) {
+                    newValue = 1 - y / rect.height;
+                } else {
+                    newValue = x / rect.width;
+                }
+                setNormalisedState(clamp(newValue));
+            }
+            if (last) {
+                //@ts-expect-error
+                window.__JUCE__.backend.emitEvent('jsDragEnded', {
+                    i: "".concat(0)
+                });
+            }
+        }, {
+            preventDefault: true
         });
-    }
-    return target;
-}
-function Label(param) {
-    var value = param.value, id = param.id, className = param.className, style = param.style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none
-    ] : _param_padding, 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$e({
-            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'
-        }, style),
-        className: classnames('Label', 'select-none', className)
-    }, value ? value : children);
-}
-Label.padding = Spacing;
-Label.fontSize = FontSizes;
+        return drag();
+    };
+    var onMouseEnter = function() {
+        if (displayValInHeader && (scaledValueRef === null || scaledValueRef === void 0 ? void 0 : scaledValueRef.current) !== scaledValue) {
+            highlightedItemChanged({
+                label: label,
+                value: scaledValue
+            });
+        }
+    };
+    return {
+        setNormalisedState: setNormalisedState,
+        setScaledState: setScaledState,
+        // onChangeStarted,
+        // onChangeCommitted,
+        onMouseEnter: onMouseEnter,
+        bindBarSliderDrag: bindBarSliderDrag,
+        bindDrag: bindDrag,
+        normalisedValue: normalisedValueRef.current || 0,
+        scaledValue: scaledValue,
+        properties: properties
+    };
+};
 
-var css_248z$6 = ".RotarySlider {\n  position: relative;\n  height: 50px;\n  width: 50px;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n  height: 100%;\n  width: 100%;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--bg-popover);\n  border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: var(--spacing-xs);\n  height: 50%;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n  border-color: var(--bg-popover) transparent var(--bg-popover) transparent;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 7px 10px 7px;\n  transform: rotate(180deg);\n  padding-bottom: var(--spacing-sm);\n}\n";
+var css_248z$6 = ".RotarySlider {\n  position: relative;\n  height: 50px;\n  width: 50px;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n  height: 100%;\n  width: 100%;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--bg-popover);\n  border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: var(--spacing-xs);\n  height: 50%;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 5px 8px 5px;\n  transform: rotate(180deg);\n  padding-bottom: var(--spacing-sm);\n}\n";
 styleInject(css_248z$6);
 
-function _define_property$d(obj, key, value) {
+function _define_property$e(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1625,7 +1684,7 @@ function _define_property$d(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$d(target) {
+function _object_spread$e(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1635,7 +1694,7 @@ function _object_spread$d(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$d(target, key, source[key]);
+            _define_property$e(target, key, source[key]);
         });
     }
     return target;
@@ -1666,7 +1725,7 @@ function RotarySlider(param) {
         end: 15000.0,
         interval: 0.1,
         skew: 0.7
-    } : _param_mockProperties, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-400)' : _param_color, style = param.style;
+    } : _param_mockProperties, labelColor = param.labelColor, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-400)' : _param_color, style = param.style;
     var _useSlider = useSlider({
         id: id,
         label: label,
@@ -1678,12 +1737,15 @@ function RotarySlider(param) {
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column
     }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            borderColor: "".concat(color, " transparent ").concat(color, " transparent")
+        },
         className: classnames('RotarySlider-center-marker')
-    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$d({
+    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$e({
         className: classnames('RotarySlider', polarity === Polarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
     }, bindDrag()), {
         onMouseEnter: onMouseEnter,
-        style: _object_spread$d({
+        style: _object_spread$e({
             touchAction: 'none'
         }, style)
     }), normalisedValue !== null ? /*#__PURE__*/ React__default.createElement("div", {
@@ -1693,7 +1755,7 @@ function RotarySlider(param) {
         }
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: classnames('RotarySlider-Indicator'),
-        style: _object_spread$d({
+        style: _object_spread$e({
             backgroundColor: color
         }, style)
     })) : ''), /*#__PURE__*/ React__default.createElement(Label, {
@@ -1701,12 +1763,15 @@ function RotarySlider(param) {
             Label.padding.mediumSmall
         ],
         fontSize: Label.fontSize.small,
-        value: label
+        value: label,
+        style: {
+            color: "".concat(labelColor ? labelColor : 'initial')
+        }
     }));
 }
 RotarySlider.sliderPolarity = Polarity;
 
-function _define_property$c(obj, key, value) {
+function _define_property$d(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1719,7 +1784,7 @@ function _define_property$c(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$c(target) {
+function _object_spread$d(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1729,7 +1794,7 @@ function _object_spread$c(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$c(target, key, source[key]);
+            _define_property$d(target, key, source[key]);
         });
     }
     return target;
@@ -1775,11 +1840,11 @@ function Slider(param) {
         className: classnames(className)
     }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         className: 'Slider-center-marker'
-    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props(_object_spread$c({
+    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props(_object_spread$d({
         className: classnames('Slider-bar', 'relative')
     }, bindBarSliderDrag()), {
         onMouseEnter: onMouseEnter,
-        style: _object_spread$c({
+        style: _object_spread$d({
             touchAction: 'none',
             backgroundColor: 'var(--bg-input)',
             minWidth: sliderOrientation === Orientation.horizontal ? '100px' : '20px',
@@ -1788,7 +1853,7 @@ function Slider(param) {
     }), normalisedValue ? /*#__PURE__*/ React__default.createElement("div", {
         // TODO: Why aren't the Tailwind classes working?
         // className={classnames('h-full', 'w-full', 'absolute', 'bg-input')}
-        style: _object_spread$c({
+        style: _object_spread$d({
             position: 'absolute',
             backgroundColor: color,
             pointerEvents: 'none'
@@ -1835,7 +1900,7 @@ var HeadingTags = /*#__PURE__*/ function(HeadingTags) {
     return HeadingTags;
 }({});
 
-function _define_property$b(obj, key, value) {
+function _define_property$c(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1848,7 +1913,7 @@ function _define_property$b(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$b(target) {
+function _object_spread$c(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1858,7 +1923,7 @@ function _object_spread$b(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$b(target, key, source[key]);
+            _define_property$c(target, key, source[key]);
         });
     }
     return target;
@@ -1871,7 +1936,7 @@ function Heading(param) {
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React.createElement(Tag, {
         id: id,
-        style: _object_spread$b({
+        style: _object_spread$c({
             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], ")"),
@@ -1972,7 +2037,7 @@ var useIndicator = function(param) {
     };
 };
 
-function _define_property$a(obj, key, value) {
+function _define_property$b(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1985,7 +2050,7 @@ function _define_property$a(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$a(target) {
+function _object_spread$b(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1995,7 +2060,7 @@ function _object_spread$a(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
+            _define_property$b(target, key, source[key]);
         });
     }
     return target;
@@ -2012,7 +2077,7 @@ function IndicatorLight(param) {
     }, /*#__PURE__*/ React__default.createElement("div", {
         id: id,
         className: classnames('IndicatorLight', 'bg-input', className),
-        style: _object_spread$a({
+        style: _object_spread$b({
             width: '12px',
             height: '12px',
             background: isActive ? color : ''
@@ -2025,7 +2090,7 @@ function IndicatorLight(param) {
 var css_248z$5 = ".IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n\nsvg {\n  height: 100%;\n  width: 100%;\n}\n";
 styleInject(css_248z$5);
 
-function _define_property$9(obj, key, value) {
+function _define_property$a(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2038,7 +2103,7 @@ function _define_property$9(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$9(target) {
+function _object_spread$a(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2048,7 +2113,7 @@ function _object_spread$9(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$9(target, key, source[key]);
+            _define_property$a(target, key, source[key]);
         });
     }
     return target;
@@ -2292,7 +2357,7 @@ function Icon(param) {
         className: "Icon ".concat(className),
         onClick: onClick,
         padding: padding,
-        style: _object_spread$9({
+        style: _object_spread$a({
             width: width,
             height: height
         }, style)
@@ -2305,7 +2370,7 @@ Icon.icon = Icons;
 Icon.padding = Spacing;
 Icon.margin = Spacing;
 
-function _define_property$8(obj, key, value) {
+function _define_property$9(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2318,7 +2383,7 @@ function _define_property$8(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$8(target) {
+function _object_spread$9(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2328,7 +2393,7 @@ function _object_spread$8(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$8(target, key, source[key]);
+            _define_property$9(target, key, source[key]);
         });
     }
     return target;
@@ -2347,7 +2412,7 @@ function IconButton(param) {
         padding: padding,
         margin: margin,
         disabled: disabled,
-        style: _object_spread$8({
+        style: _object_spread$9({
             backgroundColor: backgroundColor,
             width: width,
             height: height
@@ -2361,7 +2426,7 @@ IconButton.icon = Icons;
 IconButton.padding = Spacing;
 IconButton.margin = Spacing;
 
-function _define_property$7(obj, key, value) {
+function _define_property$8(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2374,7 +2439,7 @@ function _define_property$7(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$7(target) {
+function _object_spread$8(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2384,7 +2449,7 @@ function _object_spread$7(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$7(target, key, source[key]);
+            _define_property$8(target, key, source[key]);
         });
     }
     return target;
@@ -2396,7 +2461,7 @@ function KeyValueDisplayScreen(param) {
         // justifyContent={Box.justifyContent.flexStart}
         alignItems: Box.alignItems.flexStart,
         gap: Box.gap.small,
-        style: _object_spread$7({}, style),
+        style: _object_spread$8({}, style),
         padding: [
             Box.padding.small,
             Box.padding.none,
@@ -2509,7 +2574,7 @@ function _array_like_to_array$6(arr, len) {
 function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$6(obj, key, value) {
+function _define_property$7(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2549,7 +2614,7 @@ function _iterable_to_array_limit$6(arr, i) {
 function _non_iterable_rest$6() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$6(target) {
+function _object_spread$7(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2559,7 +2624,7 @@ function _object_spread$6(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$6(target, key, source[key]);
+            _define_property$7(target, key, source[key]);
         });
     }
     return target;
@@ -2595,7 +2660,7 @@ function Oscilloscope(param) {
     }, []);
     return /*#__PURE__*/ React__default.createElement("div", {
         id: id,
-        style: _object_spread$6({
+        style: _object_spread$7({
             height: height
         }, style),
         className: classnames('Oscilloscope', className)
@@ -3106,7 +3171,7 @@ function _async_to_generator$2(fn) {
         });
     };
 }
-function _define_property$5(obj, key, value) {
+function _define_property$6(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3146,7 +3211,7 @@ function _iterable_to_array_limit$4(arr, i) {
 function _non_iterable_rest$4() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$5(target) {
+function _object_spread$6(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3156,7 +3221,7 @@ function _object_spread$5(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$5(target, key, source[key]);
+            _define_property$6(target, key, source[key]);
         });
     }
     return target;
@@ -3275,7 +3340,7 @@ function ModuleHeader(param) {
     var isLocalhost = window.location.hostname === 'localhost';
     var _useState = _sliced_to_array$4(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
     var _useState1 = _sliced_to_array$4(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
-    var _useGlobalContext = useGlobalContext(), globalState = _useGlobalContext.globalState, setAdvancedView = _useGlobalContext.setAdvancedView;
+    var _useGlobalContext = useGlobalContext(), globalState = _useGlobalContext.globalState, advancedViewToggled = _useGlobalContext.advancedViewToggled;
     var handleUndo = function() {
         undo();
     };
@@ -3302,7 +3367,7 @@ function ModuleHeader(param) {
                         case 1:
                             advancedViewStatus = _state.sent();
                             setAdvancedViewFunc(!advancedViewStatus);
-                            setAdvancedView(!advancedViewStatus);
+                            advancedViewToggled(!advancedViewStatus);
                             return [
                                 3,
                                 3
@@ -3352,7 +3417,7 @@ function ModuleHeader(param) {
                                 ];
                             case 1:
                                 advancedViewStatus = _state.sent();
-                                setAdvancedView(advancedViewStatus);
+                                advancedViewToggled(advancedViewStatus);
                                 return [
                                     3,
                                     3
@@ -3441,7 +3506,7 @@ function ModuleHeader(param) {
             Box.padding.large
         ],
         className: classnames('ModuleHeader', className),
-        style: _object_spread$5({}, style)
+        style: _object_spread$6({}, style)
     }, /*#__PURE__*/ React__default.createElement(Box, {
         style: {
             width: '1000px'
@@ -3513,7 +3578,7 @@ function ModuleHeader(param) {
     }, "Advanced")))));
 }
 
-var css_248z$1 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n}\n\n.ModMatrixComboboxCell {\n  background: #252429;\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}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active {\n  background: var(--color-gray-600);\n}\n\n.ModMatrixComboboxItem {\n  padding: var(--spacing-md) var(--spacing-lg);\n  width: 100%;\n}\n\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n";
+var css_248z$1 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n  cursor: grab;\n}\n\n.ModMatrixCell:active {\n  cursor: grabbing;\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";
 styleInject(css_248z$1);
 
 var targetColors = [
@@ -3523,11 +3588,12 @@ var targetColors = [
     '#ce5847',
     '#d98368',
     '#E0859D',
-    '#4DA1CB'
+    '#4DA1CB',
+    '#cb4d62'
 ];
 var ComboboxCellWidth = '217px';
 
-function _define_property$4(obj, key, value) {
+function _define_property$5(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3540,7 +3606,7 @@ function _define_property$4(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$4(target) {
+function _object_spread$5(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3550,7 +3616,7 @@ function _object_spread$4(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$4(target, key, source[key]);
+            _define_property$5(target, key, source[key]);
         });
     }
     return target;
@@ -3566,7 +3632,7 @@ function SingleBarViz(param) {
             position: 'relative'
         }
     }, /*#__PURE__*/ React__default.createElement("div", {
-        style: _object_spread$4({
+        style: _object_spread$5({
             position: 'absolute',
             background: background
         }, getBarTransformStyles({
@@ -3576,17 +3642,132 @@ function SingleBarViz(param) {
         }), style)
     }));
 }
-SingleBarViz.polarity = Polarity;
+SingleBarViz.polarity = Polarity;
+
+function _array_like_to_array$3(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$3(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$3(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$3() {
+    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$3(arr, i) {
+    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
+}
+function _unsupported_iterable_to_array$3(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$3(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$3(o, minLen);
+}
+var useCombobox = function(param) {
+    var id = param.id, filter = param.filter, onChange = param.onChange;
+    var _Object_values;
+    var comboBoxState = Juce.getComboBoxState(id);
+    var _useState = _sliced_to_array$3(useState(0), 2), value = _useState[0], setValue = _useState[1];
+    var _useState1 = _sliced_to_array$3(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useGlobalContext = useGlobalContext(); _useGlobalContext.highlightedItemChanged; var _useGlobalContext_globalState = _useGlobalContext.globalState, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels, modSlots = _useGlobalContext_globalState.modSlots;
+    //TODO: Filter choices for subsequent rows
+    // const availableChoices = properties?.choices;
+    useEffect(function() {
+        setValue(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex());
+    }, [
+        id
+    ]);
+    useEffect(function() {
+        setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
+    });
+    useEffect(function() {
+        var _comboBoxState_valueChangedEvent, _comboBoxState_propertiesChangedEvent;
+        var valueListenerId = comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_valueChangedEvent = comboBoxState.valueChangedEvent) === null || _comboBoxState_valueChangedEvent === void 0 ? void 0 : _comboBoxState_valueChangedEvent.addListener(function() {
+            setValue(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex());
+        });
+        var propertiesListenerId = comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_propertiesChangedEvent = comboBoxState.propertiesChangedEvent) === null || _comboBoxState_propertiesChangedEvent === void 0 ? void 0 : _comboBoxState_propertiesChangedEvent.addListener(function() {
+            setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
+        });
+        return function cleanup() {
+            var _comboBoxState_valueChangedEvent, _comboBoxState_propertiesChangedEvent;
+            comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_valueChangedEvent = comboBoxState.valueChangedEvent) === null || _comboBoxState_valueChangedEvent === void 0 ? void 0 : _comboBoxState_valueChangedEvent.removeListener(valueListenerId);
+            comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_propertiesChangedEvent = comboBoxState.propertiesChangedEvent) === null || _comboBoxState_propertiesChangedEvent === void 0 ? void 0 : _comboBoxState_propertiesChangedEvent.removeListener(propertiesListenerId);
+        };
+    }, [
+        window
+    ]);
+    var selectedChoices = (_Object_values = Object.values(modSlots)) === null || _Object_values === void 0 ? void 0 : _Object_values.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 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[value];
+    });
+    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;
+    var prevValue = useRef(null);
+    var handleChange = function(newValue) {
+        if (newValue !== prevValue.current) {
+            var juceIndex = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.indexOf(newValue);
+            comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.setChoiceIndex(juceIndex);
+            setValue(newValue);
+            onChange && onChange(juceIndex);
+            prevValue.current = juceIndex;
+        }
+    };
+    var onMouseEnter = function() {
+    };
+    return {
+        value: value,
+        valueString: automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[value],
+        setValue: setValue,
+        choices: properties === null || properties === void 0 ? void 0 : properties.choices,
+        filteredChoices: filteredChoices,
+        onMouseEnter: onMouseEnter,
+        handleChange: handleChange
+    };
+};
 
-function _array_like_to_array$3(arr, len) {
+function _array_like_to_array$2(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$3(arr) {
+function _array_with_holes$2(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$3(obj, key, value) {
+function _define_property$4(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3599,7 +3780,7 @@ function _define_property$3(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$3(arr, i) {
+function _iterable_to_array_limit$2(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3623,10 +3804,10 @@ function _iterable_to_array_limit$3(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$3() {
+function _non_iterable_rest$2() {
     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$3(target) {
+function _object_spread$4(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3636,34 +3817,33 @@ function _object_spread$3(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$3(target, key, source[key]);
+            _define_property$4(target, key, source[key]);
         });
     }
     return target;
 }
-function _sliced_to_array$3(arr, i) {
-    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
+function _sliced_to_array$2(arr, i) {
+    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
 }
-function _unsupported_iterable_to_array$3(o, minLen) {
+function _unsupported_iterable_to_array$2(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$3(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$2(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$3(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
 }
 function ModMatrixComboboxCell(param) {
-    var target = param.target, handleTargetChange = param.handleTargetChange, rowId = param.rowId, color = param.color, style = param.style;
-    var _useState = _sliced_to_array$3(useState(), 2), targetValue = _useState[0], setTargetValue = _useState[1];
-    var _useState1 = _sliced_to_array$3(useState(''), 2), filterString = _useState1[0], setFilterString = _useState1[1];
-    var globalState = useGlobalContext().globalState;
+    var target = param.target, handleTargetChange = param.handleTargetChange, rowId = param.rowId, key = param.key, color = param.color, style = param.style;
+    var _SingleBarViz_polarity;
+    var _useState = _sliced_to_array$2(useState(), 2), targetValue = _useState[0], setTargetValue = _useState[1];
+    var _useState1 = _sliced_to_array$2(useState(''), 2), filterString = _useState1[0], setFilterString = _useState1[1];
+    var _useGlobalContext = useGlobalContext(), automatableParamLabels = _useGlobalContext.globalState.automatableParamLabels;
     var _useCombobox = useCombobox({
         id: rowId,
-        items: globalState === null || globalState === void 0 ? void 0 : globalState.automatableParams,
         filter: filterString,
-        displayValInHeader: false,
         onChange: handleTargetChange
-    }), value = _useCombobox.value, choices = _useCombobox.choices, filteredChoices = _useCombobox.filteredChoices, handleChange = _useCombobox.handleChange;
+    }), value = _useCombobox.value, filteredChoices = _useCombobox.filteredChoices, handleChange = _useCombobox.handleChange;
     useEffect(function() {
         if (target) {
             var sliderState = Juce.getSliderState(target);
@@ -3673,17 +3853,12 @@ function ModMatrixComboboxCell(param) {
     }, [
         target
     ]);
-    // useEffect(() => {
-    //   console.log(
-    //     globalState?.automatableParams,
-    //     'globalState?.automatableParams',
-    //   );
-    // });
     return /*#__PURE__*/ React__default.createElement(Box, {
+        key: key,
         className: "ModMatrixCell ModMatrixComboboxCell",
         justifyContent: Box.justifyContent.flexEnd,
         flexDirection: Box.flexDirection.column,
-        style: _object_spread$3({
+        style: _object_spread$4({
             color: color
         }, style),
         padding: [
@@ -3696,13 +3871,15 @@ function ModMatrixComboboxCell(param) {
         value: value,
         onChange: handleChange
     }, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(ComboboxInput, {
-        displayValue: function() {
-            var _globalState_automatableParamLabels;
-            return globalState === null || globalState === void 0 ? void 0 : (_globalState_automatableParamLabels = globalState.automatableParamLabels) === null || _globalState_automatableParamLabels === void 0 ? void 0 : _globalState_automatableParamLabels[value];
+        displayValue: function(item) {
+            return value ? automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[value] : '';
         },
+        placeholder: "Select a target...",
         onChange: function(e) {
-            return setFilterString(e.target.value);
-        }
+            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
     }), /*#__PURE__*/ React__default.createElement(ComboboxButton, {
         className: "ModMatrixComboboxButton"
     }, /*#__PURE__*/ React__default.createElement(Icon, {
@@ -3719,20 +3896,14 @@ function ModMatrixComboboxCell(param) {
         //   anchor="bottom"
         transition: true
     }, filteredChoices === null || filteredChoices === void 0 ? void 0 : filteredChoices.map(function(item) {
-        var _globalState_automatableParamLabels;
-        return(//   <Box
-        //     padding={[Box.padding.medium, Box.padding.large]}
-        //     justifyContent={Box.justifyContent.flexStart}
-        //     className="ModMatrixComboboxItemContainer"
-        //   >
-        /*#__PURE__*/ React__default.createElement(ComboboxOption, {
+        return /*#__PURE__*/ React__default.createElement(ComboboxOption, {
             className: "ModMatrixComboboxItem",
             key: item,
             value: item
-        }, /*#__PURE__*/ React__default.createElement(Label, null, item ? globalState === null || globalState === void 0 ? void 0 : (_globalState_automatableParamLabels = globalState.automatableParamLabels) === null || _globalState_automatableParamLabels === void 0 ? void 0 : _globalState_automatableParamLabels[choices === null || choices === void 0 ? void 0 : choices.indexOf(item)] : '')));
+        }, /*#__PURE__*/ React__default.createElement(Label, null, item));
     }))), /*#__PURE__*/ React__default.createElement(SingleBarViz, {
         value: targetValue,
-        polarity: SingleBarViz.polarity.linear,
+        polarity: SingleBarViz === null || SingleBarViz === void 0 ? void 0 : (_SingleBarViz_polarity = SingleBarViz.polarity) === null || _SingleBarViz_polarity === void 0 ? void 0 : _SingleBarViz_polarity.linear,
         background: color,
         style: {
             alignSelf: 'flex-end'
@@ -3740,6 +3911,65 @@ function ModMatrixComboboxCell(param) {
     }));
 }
 
+function _define_property$3(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$3(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$3(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ModMatrixToggleCell(param) {
+    var modifier = param.modifier, color = param.color, style = param.style;
+    var _useDropdown = useDropdown({
+        id: modifier
+    }), index = _useDropdown.index, choices = _useDropdown.choices, handleChange = _useDropdown.handleChange;
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        className: "ModMatrixCell ModMatrixToggleCell",
+        justifyContent: Box.justifyContent.flexEnd,
+        alignItems: Box.alignItems.flexStart,
+        flexDirection: Box.flexDirection.column,
+        style: _object_spread$3({
+            color: color,
+            pointerEvents: 'all'
+        }, style),
+        height: '2.5rem',
+        onClick: function() {
+            var newIndex = Math.abs(index - 1);
+            handleChange(choices[newIndex]);
+        }
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        flex: "1",
+        style: {
+            pointerEvents: 'none'
+        }
+    }, /*#__PURE__*/ React__default.createElement(Label, {
+        style: {
+            pointerEvents: 'none'
+        }
+    }, Object.keys(Polarity)[index] || '0')));
+}
+
 function _define_property$2(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -3769,7 +3999,8 @@ function _object_spread$2(target) {
     return target;
 }
 function ModMatrixCell(param) {
-    param.target; var modifier = param.modifier; param.value; var color = param.color, style = param.style;
+    var modifier = param.modifier, color = param.color, style = param.style;
+    var _SingleBarViz_polarity;
     var _useSlider = useSlider({
         id: modifier,
         displayValInHeader: false
@@ -3797,73 +4028,52 @@ function ModMatrixCell(param) {
         }
     }, /*#__PURE__*/ React__default.createElement(SingleBarViz, {
         value: (modifier === null || modifier === void 0 ? void 0 : modifier.value) || 0,
-        polarity: SingleBarViz.polarity.linear,
+        polarity: SingleBarViz === null || SingleBarViz === void 0 ? void 0 : (_SingleBarViz_polarity = SingleBarViz.polarity) === null || _SingleBarViz_polarity === void 0 ? void 0 : _SingleBarViz_polarity.linear,
         background: color,
         style: _object_spread$2({
             alignSelf: 'flex-end',
             pointerEvents: 'none'
         }, getBarTransformStyles({
-            orientation: Orientation.horizontal,
-            polarity: Polarity.linear,
-            value: parseFloat(scaledNormalisedValue.toFixed(2))
+            orientation: Orientation === null || Orientation === void 0 ? void 0 : Orientation.horizontal,
+            polarity: Polarity === null || Polarity === void 0 ? void 0 : Polarity.linear,
+            value: parseFloat(scaledNormalisedValue === null || scaledNormalisedValue === void 0 ? void 0 : scaledNormalisedValue.toFixed(2))
         }))
     })));
 }
 
-function _array_like_to_array$2(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$2(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit$2(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;
+function ModMatrixRow(param) {
+    var rowId = param.rowId, key = param.key, _param_isPreview = param.//   rowIndex,
+    isPreview, isPreview = _param_isPreview === void 0 ? false : _param_isPreview, setIsPreview = param.setIsPreview;
+    var _Object_keys, _modSlotParams_modSlotIndex;
+    //   const [rowTarget, setRowTarget] = useState<number>();
+    //   const getModSlotsFunc = Juce.getNativeFunction('getModSlots');
+    var _useGlobalContext = useGlobalContext(), modSlotUpdated = _useGlobalContext.modSlotUpdated, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotParams = _useGlobalContext_globalState.modSlotParams, modSlots = _useGlobalContext_globalState.modSlots;
+    var modSlotIndex = (_Object_keys = Object.keys(modSlots)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.indexOf(rowId);
+    var handleTargetChange = function(newTarget) {
+        if (newTarget > 0) {
+            modSlotUpdated([
+                rowId,
+                newTarget
+            ]);
+        } else {
+            var _modSlotParams_modSlotIndex;
+            modSlotUpdated([
+                rowId,
+                0
+            ]);
+            modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_modSlotIndex = modSlotParams[modSlotIndex]) === null || _modSlotParams_modSlotIndex === void 0 ? void 0 : _modSlotParams_modSlotIndex.forEach(function(item) {
+                var sliderState = Juce.getSliderState(item);
+                sliderState === null || sliderState === void 0 ? void 0 : sliderState.setNormalisedValue(0);
+            });
         }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
+        if (isPreview && newTarget) {
+            setIsPreview(false);
         }
-    }
-    return _arr;
-}
-function _non_iterable_rest$2() {
-    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$2(arr, i) {
-    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
-}
-function _unsupported_iterable_to_array$2(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2(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$2(o, minLen);
-}
-function ModMatrixRow(param) {
-    var rowId = param.rowId, rowIndex = param.rowIndex; param.isPreview;
-    var _globalState_modSlotParams_rowIndex;
-    var _useState = _sliced_to_array$2(useState(), 2), rowTarget = _useState[0], setRowTarget = _useState[1];
-    var globalState = useGlobalContext().globalState;
+    };
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "ModMatrixBodyRow",
-        gap: Box.gap.medium
+        gap: Box.gap.medium,
+        key: key
     }, /*#__PURE__*/ React__default.createElement(Box, {
         className: "ModMatrixBodyCell ModMatrixComboboxCell",
         justifyContent: Box.justifyContent.flexStart,
@@ -3872,24 +4082,28 @@ function ModMatrixRow(param) {
             color: targetColors[0]
         }
     }, /*#__PURE__*/ React__default.createElement(ModMatrixComboboxCell, {
-        target: rowTarget,
-        handleTargetChange: setRowTarget,
+        target: modSlots[rowId],
+        handleTargetChange: handleTargetChange,
         rowId: rowId,
         color: targetColors[0],
         style: {
             width: ComboboxCellWidth
-        }
-    })), globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlotParams_rowIndex = globalState.modSlotParams[rowIndex]) === null || _globalState_modSlotParams_rowIndex === void 0 ? void 0 : _globalState_modSlotParams_rowIndex.map(function(item, i) {
-        var _globalState_modSlotParams_rowIndex, _globalState_modSlotParams;
+        },
+        key: rowId
+    })), modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_modSlotIndex = modSlotParams[modSlotIndex]) === null || _modSlotParams_modSlotIndex === void 0 ? void 0 : _modSlotParams_modSlotIndex.map(function(item, i, arr) {
+        var _modSlotParams_modSlotIndex, _modSlotParams_modSlotIndex1;
         return /*#__PURE__*/ React__default.createElement(Box, {
             className: "ModMatrixBodyCell",
             flexDirection: Box.flexDirection.column,
             style: {
                 color: targetColors[i + 1]
-            }
-        }, /*#__PURE__*/ React__default.createElement(ModMatrixCell, {
-            target: rowTarget,
-            modifier: globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlotParams = globalState.modSlotParams) === null || _globalState_modSlotParams === void 0 ? void 0 : (_globalState_modSlotParams_rowIndex = _globalState_modSlotParams[rowIndex]) === null || _globalState_modSlotParams_rowIndex === void 0 ? void 0 : _globalState_modSlotParams_rowIndex[i],
+            },
+            key: item
+        }, i !== arr.length - 1 ? /*#__PURE__*/ React__default.createElement(ModMatrixCell, {
+            modifier: modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_modSlotIndex = modSlotParams[modSlotIndex]) === null || _modSlotParams_modSlotIndex === void 0 ? void 0 : _modSlotParams_modSlotIndex[i],
+            color: targetColors[i + 1]
+        }) : /*#__PURE__*/ React__default.createElement(ModMatrixToggleCell, {
+            modifier: modSlotParams === null || modSlotParams === void 0 ? void 0 : (_modSlotParams_modSlotIndex1 = modSlotParams[modSlotIndex]) === null || _modSlotParams_modSlotIndex1 === void 0 ? void 0 : _modSlotParams_modSlotIndex1[i],
             color: targetColors[i + 1]
         }));
     }));
@@ -4101,77 +4315,105 @@ function _ts_generator$1(thisArg, body) {
         };
     }
 }
-function ModuleFooter$1(param) {
+//
+function ModMatrix(param) {
     var className = param.className, style = param.style;
-    var _useState = _sliced_to_array$1(useState(), 2), previewRowId = _useState[0], setPreviewRowId = _useState[1];
-    var getAllAPVTSParamsFunc = Juce.getNativeFunction('getAllAPVTSParams');
-    var _useGlobalContext = useGlobalContext(), setAutomatableParams = _useGlobalContext.setAutomatableParams, setAutomatableParamLabels = _useGlobalContext.setAutomatableParamLabels, setModSlots = _useGlobalContext.setModSlots, setModSlotParams = _useGlobalContext.setModSlotParams, setModSlotParamLabels = _useGlobalContext.setModSlotParamLabels, globalState = _useGlobalContext.globalState;
-    var assignedModSlots = useMemo(function() {
-        var _globalState_modSlots;
-        return globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlots = globalState.modSlots) === null || _globalState_modSlots === void 0 ? void 0 : _globalState_modSlots.filter(function(item) {
-            return (item === null || item === void 0 ? void 0 : item[1]) !== 0;
-        });
-    }, [
-        globalState === null || globalState === void 0 ? void 0 : globalState.modSlots
-    ]);
+    var _Object_keys, _Object_keys1, _Object_keys2;
+    var _useState = _sliced_to_array$1(useState(), 2), previewRowIsActive = _useState[0], setPreviewRowIsActive = _useState[1];
+    var getAutomatableParamsListFunc = Juce.getNativeFunction('getAutomatableParamsList');
+    var getAllModSlotsFunc = Juce.getNativeFunction('getAllModSlots');
+    var getModSlotParamsFunc = Juce.getNativeFunction('getModSlotParams');
+    var _useGlobalContext = useGlobalContext(), automatableParamsListReceived = _useGlobalContext.automatableParamsListReceived, automatableParamLabelsReceived = _useGlobalContext.automatableParamLabelsReceived, modSlotsReceived = _useGlobalContext.modSlotsReceived, modSlotParamsListReceived = _useGlobalContext.modSlotParamsListReceived, modSlotParamLabelsReceived = _useGlobalContext.modSlotParamLabelsReceived, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotParamLabels = _useGlobalContext_globalState.modSlotParamLabels, modSlots = _useGlobalContext_globalState.modSlots;
+    var getAPVTSParams = function() {
+        return _async_to_generator$1(function() {
+            var automatableParamsList, modSlotsData, modSlotParams, e;
+            return _ts_generator$1(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        _state.trys.push([
+                            0,
+                            4,
+                            ,
+                            5
+                        ]);
+                        return [
+                            4,
+                            getAutomatableParamsListFunc()
+                        ];
+                    case 1:
+                        automatableParamsList = _state.sent();
+                        return [
+                            4,
+                            getAllModSlotsFunc()
+                        ];
+                    case 2:
+                        modSlotsData = _state.sent();
+                        return [
+                            4,
+                            getModSlotParamsFunc()
+                        ];
+                    case 3:
+                        modSlotParams = _state.sent();
+                        automatableParamsListReceived(automatableParamsList === null || automatableParamsList === void 0 ? void 0 : automatableParamsList[0]);
+                        automatableParamLabelsReceived(automatableParamsList === null || automatableParamsList === void 0 ? void 0 : automatableParamsList[1]);
+                        modSlotsReceived(modSlotsData || []);
+                        modSlotParamsListReceived(modSlotParams === null || modSlotParams === void 0 ? void 0 : modSlotParams[0]);
+                        modSlotParamLabelsReceived(modSlotParams === null || modSlotParams === void 0 ? void 0 : modSlotParams[1]);
+                        return [
+                            3,
+                            5
+                        ];
+                    case 4:
+                        e = _state.sent();
+                        console.log(e);
+                        return [
+                            3,
+                            5
+                        ];
+                    case 5:
+                        return [
+                            2
+                        ];
+                }
+            });
+        })();
+    };
     useEffect(function() {
-        var getAPVTSParams = function() {
-            return _async_to_generator$1(function() {
-                var params, e;
-                return _ts_generator$1(this, function(_state) {
-                    switch(_state.label){
-                        case 0:
-                            _state.trys.push([
-                                0,
-                                2,
-                                ,
-                                3
-                            ]);
-                            return [
-                                4,
-                                getAllAPVTSParamsFunc()
-                            ];
-                        case 1:
-                            params = _state.sent();
-                            setAutomatableParams(params === null || params === void 0 ? void 0 : params[0]);
-                            setAutomatableParamLabels(params === null || params === void 0 ? void 0 : params[1]);
-                            setModSlots(params === null || params === void 0 ? void 0 : params[2]);
-                            setModSlotParams(params === null || params === void 0 ? void 0 : params[3]);
-                            setModSlotParamLabels(params === null || params === void 0 ? void 0 : params[4]);
-                            return [
-                                3,
-                                3
-                            ];
-                        case 2:
-                            e = _state.sent();
-                            console.log(e);
-                            return [
-                                3,
-                                3
-                            ];
-                        case 3:
-                            return [
-                                2
-                            ];
-                    }
-                });
-            })();
-        };
         getAPVTSParams();
     }, [
         window
     ]);
     useEffect(function() {
+        var _Object_keys;
+        var assignedModSlots = (_Object_keys = Object.keys(modSlots)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.filter(function(item) {
+            return (modSlots === null || modSlots === void 0 ? void 0 : modSlots[item]) > 0;
+        });
         if (!assignedModSlots.length) {
-            var _globalState_modSlots_, _globalState_modSlots;
-            setPreviewRowId(globalState === null || globalState === void 0 ? void 0 : (_globalState_modSlots = globalState.modSlots) === null || _globalState_modSlots === void 0 ? void 0 : (_globalState_modSlots_ = _globalState_modSlots[0]) === null || _globalState_modSlots_ === void 0 ? void 0 : _globalState_modSlots_[0]);
+            setPreviewRowIsActive(true);
         }
     }, [
-        globalState === null || globalState === void 0 ? void 0 : globalState.modSlots
+        modSlots
     ]);
     var headers = [
         'Target'
-    ].concat(_to_consumable_array(globalState === null || globalState === void 0 ? void 0 : globalState.modSlotParamLabels));
+    ].concat(_to_consumable_array(modSlotParamLabels));
+    // [slot2, slot3] unassigned
+    // [slot1] assigned
+    var assignedModSlots = (_Object_keys = Object.keys(modSlots)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.filter(function(item) {
+        return (modSlots === null || modSlots === void 0 ? void 0 : modSlots[item]) > 0;
+    });
+    var unassignedModSlots = (_Object_keys1 = Object.keys(modSlots)) === null || _Object_keys1 === void 0 ? void 0 : _Object_keys1.filter(function(item) {
+        return (modSlots === null || modSlots === void 0 ? void 0 : modSlots[item]) === 0;
+    });
+    var displayedModSlots = (_Object_keys2 = Object.keys(modSlots)) === null || _Object_keys2 === void 0 ? void 0 : _Object_keys2.reduce(function(acc, item) {
+        if ((modSlots === null || modSlots === void 0 ? void 0 : modSlots[item]) > 0 || previewRowIsActive && item === (unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots[0])) {
+            return _to_consumable_array(acc).concat([
+                item
+            ]);
+        } else {
+            return _to_consumable_array(acc);
+        }
+    }, []);
     return /*#__PURE__*/ React__default.createElement(Box, {
         gap: Box.gap.medium,
         padding: [
@@ -4186,12 +4428,13 @@ function ModuleFooter$1(param) {
     }, /*#__PURE__*/ React__default.createElement(Box, {
         className: "ModMatrixHeader",
         gap: Box.gap.medium
-    }, headers.map(function(item, i) {
+    }, headers === null || headers === void 0 ? void 0 : headers.map(function(item, i) {
         return /*#__PURE__*/ React__default.createElement(Box, {
             style: {
                 color: targetColors[i],
                 flex: i === 0 ? "0 0 ".concat(ComboboxCellWidth) : 'initial'
             },
+            key: item,
             className: "ModMatrixHeaderCell",
             padding: [
                 Box.padding.medium,
@@ -4202,19 +4445,15 @@ function ModuleFooter$1(param) {
         className: "ModMatrixBody",
         gap: Box.gap.medium,
         flexDirection: Box.flexDirection.column
-    }, (assignedModSlots === null || assignedModSlots === void 0 ? void 0 : assignedModSlots.length) ? assignedModSlots === null || assignedModSlots === void 0 ? void 0 : assignedModSlots.map(function(item, i) {
+    }, (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,
-            rowIndex: i
+            key: item,
+            // rowIndex={i}
+            setIsPreview: setPreviewRowIsActive,
+            isPreview: previewRowIsActive && (unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots.indexOf(item)) === 0
         });
-    }) : null, previewRowId ? /*#__PURE__*/ React__default.createElement(ModMatrixRow, {
-        rowId: previewRowId,
-        rowIndex: 0,
-        // onChange={(item: any) =>
-        //   setAssignedRowIds([...assignedRowIds, item])
-        // }
-        isPreview: true
-    }) : ''), /*#__PURE__*/ React__default.createElement(Box, {
+    }) : null), /*#__PURE__*/ React__default.createElement(Box, {
         justifyContent: Box.justifyContent.flexStart
     }, /*#__PURE__*/ React__default.createElement(IconButton, {
         id: "addModMatrixRow",
@@ -4225,13 +4464,86 @@ function ModuleFooter$1(param) {
         padding: [
             IconButton.padding.small
         ],
+        disabled: (assignedModSlots === null || assignedModSlots === void 0 ? void 0 : assignedModSlots.length) === 0 || (unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots.length) === 0,
         // color="var(--color-gray-500)"
         // backgroundColor="transparent"
-        onClick: function(e) {}
+        onClick: function(e) {
+            if ((unassignedModSlots === null || unassignedModSlots === void 0 ? void 0 : unassignedModSlots.length) > 0) {
+                setPreviewRowIsActive(true);
+            }
+        }
     })));
 }
 
-var css_248z = "/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n\n.ModuleFooter .Tabs-item {\n  background: transparent;\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  background: var(--color-gray-600);\n  flex: 1 0 auto;\n}\n\n.ModuleFooter .Tabs-item:hover,\n.ModuleFooter .tabs-item:focus,\n.ModuleFooter .tabs-item:focus-visible {\n  background: var(--color-gray-700);\n}\n\n.ModuleFooter .Tabs-item[data-headlessui-state='selected'] {\n  background: var(--color-gray-700);\n}\n";
+function LFOTab() {
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        className: "LFOTab"
+    }, /*#__PURE__*/ React__default.createElement(Dropdown, {
+        labelColor: "var(--color-text)",
+        color: "var(--color-brand)",
+        id: "LFO1_Wave",
+        label: "LFO1 Wave"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        labelColor: "var(--color-text)",
+        id: "LFO1_Hz",
+        label: "LFO1 Hz",
+        color: "var(--color-brand)"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        labelColor: "var(--color-text)",
+        id: "LFO1_Hz_Hi",
+        label: "LFO1 Hz Hi",
+        color: "var(--color-brand)"
+    }), /*#__PURE__*/ React__default.createElement(Dropdown, {
+        labelColor: "var(--color-text)",
+        color: "var(--color-brand)",
+        id: "LFO1_SyncRate",
+        label: "LFO1 Sync Rate"
+    }), /*#__PURE__*/ React__default.createElement(Dropdown, {
+        labelColor: "var(--color-text)",
+        color: "var(--color-brand)",
+        id: "LFO1_SyncType",
+        label: "LFO1 Sync Type"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        id: "LFO1_Sixteenths",
+        label: "LFO1 Sixteenths"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        id: "LFO1_Thirds",
+        label: "LFO1 Thirds"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        polarity: RotarySlider.sliderPolarity.bipolar,
+        id: "LFO1_Sync_Offset",
+        label: "LFO1 Sync Offset"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        polarity: RotarySlider.sliderPolarity.bipolar,
+        id: "LFO1_Phase",
+        label: "LFO1 Phase"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        id: "LFO1_Width",
+        label: "LFO1 Width"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        id: "LFO1_Amp",
+        label: "LFO1 Amp"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        id: "LFO1_Rand",
+        label: "LFO1 Rand"
+    }));
+}
+
+var css_248z = "/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n\n.ModuleFooter {\n  overflow-y: scroll;\n}\n\n.ModuleFooter .Tabs-item {\n  background: transparent;\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  background: var(--color-gray-600);\n  flex: 1 0 auto;\n}\n\n.ModuleFooter .Tabs-item:hover,\n.ModuleFooter .tabs-item:focus,\n.ModuleFooter .tabs-item:focus-visible {\n  background: var(--color-gray-700);\n}\n\n.ModuleFooter .Tabs-item[data-headlessui-state='selected'] {\n  background: var(--color-gray-700);\n}\n";
 styleInject(css_248z);
 
 function _array_like_to_array(arr, len) {
@@ -4437,14 +4749,11 @@ var FooterTabs = /*#__PURE__*/ function(FooterTabs) {
     return FooterTabs;
 }({});
 var ModMatrixTab = function() {
-    return /*#__PURE__*/ React__default.createElement(ModuleFooter$1, null);
+    return /*#__PURE__*/ React__default.createElement(ModMatrix, null);
 };
 var InputModTab = function() {
     return /*#__PURE__*/ React__default.createElement(Box, null, "InputModTab");
 };
-var LFOsTab = function() {
-    return /*#__PURE__*/ React__default.createElement(Box, null, "LFOsTab");
-};
 var SequencerTab = function() {
     return /*#__PURE__*/ React__default.createElement(Box, null, "SequencerTab");
 };
@@ -4561,7 +4870,7 @@ function ModuleFooter(param) {
         padding: [
             Box.padding.large
         ]
-    }, isTabSelected("ModMatrix") ? /*#__PURE__*/ React__default.createElement(ModMatrixTab, null) : '', isTabSelected("InputMod") ? /*#__PURE__*/ React__default.createElement(InputModTab, null) : '', isTabSelected("LFOs") ? /*#__PURE__*/ React__default.createElement(LFOsTab, null) : '', isTabSelected("Sequencer") ? /*#__PURE__*/ React__default.createElement(SequencerTab, null) : '', isTabSelected("Settings") ? /*#__PURE__*/ React__default.createElement(SettingsTab, null) : '')));
+    }, isTabSelected("ModMatrix") ? /*#__PURE__*/ React__default.createElement(ModMatrixTab, null) : '', isTabSelected("InputMod") ? /*#__PURE__*/ React__default.createElement(InputModTab, null) : '', isTabSelected("LFOs") ? /*#__PURE__*/ React__default.createElement(LFOTab, null) : '', isTabSelected("Sequencer") ? /*#__PURE__*/ React__default.createElement(SequencerTab, null) : '', isTabSelected("Settings") ? /*#__PURE__*/ React__default.createElement(SettingsTab, null) : '')));
 }
 
 export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, GlobalContextProvider, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, clamp, decimalToPercent, defaultGlobalStateValue as defaultValue, normalisedToScaled, percentToDecimal, randomizeValue, scaledToNormalised as scaledTonormalised, useGlobalContext, useObservable, useSlider };