@antimatter-audio/antimatter-ui 15.4.2 → 16.0.1

package/dist/index.js

@@ -34,8 +34,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$i = "@theme static {\n  /* Default theme colors */\n  --color-brand: #bb68d9;\n  --color-brand-900: #1b181c;\n  /* --color-brand-900: #443342; */\n  --color-brand-700: #932eb8;\n  --color-brand-600: #ac47d1;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-brand-secondary: #18d6d6;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  /* Main section theme colors */\n  --color-GreenScreen-100: #1b4b3d;\n  --color-GreenScreen-200: #29705b;\n  --color-GreenScreen-300: #369679;\n  --color-GreenScreen-400: #44bb97;\n  --color-GreenScreen-500: #61c6a7;\n  --color-GreenScreen-600: #7cd0b7;\n  --color-GreenScreen-700: #a1ddcb;\n  --color-GreenScreen-1000: #c7ebe0;\n\n  --color-AmberScreen-100: #371815;\n  --color-AmberScreen-200: #5c2824;\n  --color-AmberScreen-300: #813932;\n  --color-AmberScreen-400: #a54940;\n  --color-AmberScreen-500: #bd5e56;\n  --color-AmberScreen-600: #c6746c;\n  --color-AmberScreen-700: #d49691;\n  --color-AmberScreen-1000: #e2b9b6;\n\n  --color-BlackScreen-100: #000000;\n  --color-BlackScreen-200: #0b0b0f;\n  --color-BlackScreen-300: #16161d;\n  --color-BlackScreen-400: #21212c;\n  --color-BlackScreen-500: #2c2c3a;\n  --color-BlackScreen-600: #373749;\n  --color-BlackScreen-700: #424257;\n  --color-BlackScreen-1000: #4d4d66;\n\n  --color-GreenAccent-100: #082b20;\n  --color-GreenAccent-200: #105640;\n  --color-GreenAccent-300: #188160;\n  --color-GreenAccent-400: #21ab7f;\n  --color-GreenAccent-500: #27ca96;\n  --color-GreenAccent-600: #3edaa9;\n  --color-GreenAccent-700: #69e2bc;\n  --color-GreenAccent-1000: #94ebcf;\n\n  --color-YellowAccent-100: #ad6a05;\n  --color-YellowAccent-200: #df8807;\n  --color-YellowAccent-300: #f8a220;\n  --color-YellowAccent-400: #fab752;\n  --color-YellowAccent-500: #faba58;\n  --color-YellowAccent-600: #fac16b;\n  --color-YellowAccent-700: #fbcb83;\n  --color-YellowAccent-1000: #fcd69c;\n\n  --color-RedAccent-100: #260d10;\n  --color-RedAccent-200: #391318;\n  --color-RedAccent-300: #4d191f;\n  --color-RedAccent-400: #602027;\n  --color-RedAccent-500: #73262f;\n  --color-RedAccent-600: #862d37;\n  --color-RedAccent-700: #99333f;\n  --color-RedAccent-1000: #bf404f;\n\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-lv1: #0e0e12;\n  --bg-lv2: #121216;\n  --bg-lv3: #16171d;\n  --bg-lv4: #212128;\n  --bg-lv5: #2b2b31;\n  --bg-lv6: #3b3b44;\n  --bg-lv7: #4c4a54;\n  --bg-lv8: #595763;\n  --bg-lv9: #838091;\n  --bg-lv10: #9a96ab;\n  --bg-lv11: #9999a7;\n  --bg-lv12: #c1c1c1;\n  --bg-selected: #2e2c33;\n\n  /* --bg-lv3-brightened: #1a1b21; */\n\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.7rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: default;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n/* .cursor-hidden * {\n  cursor: none !important;\n} */\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n  background-color: var(--bg-lv4);\n  scrollbar-width: 3px;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: var(--bg-lv7);\n  border-radius: 6px;\n  width: 3px;\n}\n\n* {\n  -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n  display: none;\n} */\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
-styleInject(css_248z$i);
+var css_248z$j = "@theme static {\n  /* Default theme colors */\n  --color-brand: #bb68d9;\n  --color-brand-900: #1b181c;\n  /* --color-brand-900: #443342; */\n  --color-brand-700: #932eb8;\n  --color-brand-600: #ac47d1;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-brand-secondary: #18d6d6;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  /* Main section theme colors */\n  --color-GreenScreen-100: #1b4b3d;\n  --color-GreenScreen-200: #29705b;\n  --color-GreenScreen-300: #369679;\n  --color-GreenScreen-400: #44bb97;\n  --color-GreenScreen-500: #61c6a7;\n  --color-GreenScreen-600: #7cd0b7;\n  --color-GreenScreen-700: #a1ddcb;\n  --color-GreenScreen-1000: #c7ebe0;\n\n  --color-AmberScreen-100: #371815;\n  --color-AmberScreen-200: #5c2824;\n  --color-AmberScreen-300: #813932;\n  --color-AmberScreen-400: #a54940;\n  --color-AmberScreen-500: #bd5e56;\n  --color-AmberScreen-600: #c6746c;\n  --color-AmberScreen-700: #d49691;\n  --color-AmberScreen-1000: #e2b9b6;\n\n  --color-BlackScreen-100: #000000;\n  --color-BlackScreen-200: #0b0b0f;\n  --color-BlackScreen-300: #16161d;\n  --color-BlackScreen-400: #21212c;\n  --color-BlackScreen-500: #2c2c3a;\n  --color-BlackScreen-600: #373749;\n  --color-BlackScreen-700: #424257;\n  --color-BlackScreen-1000: #4d4d66;\n\n  --color-GreenAccent-100: #082b20;\n  --color-GreenAccent-200: #105640;\n  --color-GreenAccent-300: #188160;\n  --color-GreenAccent-400: #21ab7f;\n  --color-GreenAccent-500: #27ca96;\n  --color-GreenAccent-600: #3edaa9;\n  --color-GreenAccent-700: #69e2bc;\n  --color-GreenAccent-1000: #94ebcf;\n\n  --color-YellowAccent-100: #ad6a05;\n  --color-YellowAccent-200: #df8807;\n  --color-YellowAccent-300: #f8a220;\n  --color-YellowAccent-400: #fab752;\n  --color-YellowAccent-500: #faba58;\n  --color-YellowAccent-600: #fac16b;\n  --color-YellowAccent-700: #fbcb83;\n  --color-YellowAccent-1000: #fcd69c;\n\n  --color-RedAccent-100: #260d10;\n  --color-RedAccent-200: #391318;\n  --color-RedAccent-300: #4d191f;\n  --color-RedAccent-400: #602027;\n  --color-RedAccent-500: #73262f;\n  --color-RedAccent-600: #862d37;\n  --color-RedAccent-700: #99333f;\n  --color-RedAccent-1000: #bf404f;\n\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-lv1: #0e0e12;\n  --bg-lv2: #121216;\n  --bg-lv3: #16171d;\n  --bg-lv4: #212128;\n  --bg-lv5: #2b2b31;\n  --bg-lv6: #3b3b44;\n  --bg-lv7: #4c4a54;\n  --bg-lv8: #595763;\n  --bg-lv9: #838091;\n  --bg-lv10: #9a96ab;\n  --bg-lv11: #9999a7;\n  --bg-lv12: #c1c1c1;\n  --bg-selected: #2e2c33;\n\n  /* --bg-lv3-brightened: #1a1b21; */\n\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.7rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: default;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n/* .cursor-hidden * {\n  cursor: none !important;\n} */\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n  background-color: var(--bg-lv4);\n  scrollbar-width: 3px;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: var(--bg-lv7);\n  border-radius: 6px;\n  width: 3px;\n}\n\n* {\n  -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n  display: none;\n} */\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
+styleInject(css_248z$j);
 
 var Spacing = /*#__PURE__*/ function(Spacing) {
     Spacing["none"] = "none";
@@ -49,9 +49,11 @@ var Spacing = /*#__PURE__*/ function(Spacing) {
     return Spacing;
 }({});
 var ButtonSize = /*#__PURE__*/ function(ButtonSize) {
-    ButtonSize["xSmall"] = "xSmall";
     ButtonSize["small"] = "small";
+    ButtonSize["medium"] = "medium";
     ButtonSize["large"] = "large";
+    ButtonSize["auto"] = "auto";
+    ButtonSize["full"] = "full";
     return ButtonSize;
 }({});
 var FlexDirection = /*#__PURE__*/ function(FlexDirection) {
@@ -155,13 +157,13 @@ var StrokeStyle = /*#__PURE__*/ function(StrokeStyle) {
     return StrokeStyle;
 }({});
 
-function _array_like_to_array$k(arr, len) {
+function _array_like_to_array$n(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
 function _array_without_holes$3(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$k(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$n(arr);
 }
 function _iterable_to_array$3(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
@@ -170,15 +172,15 @@ function _non_iterable_spread$3() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _to_consumable_array$3(arr) {
-    return _array_without_holes$3(arr) || _iterable_to_array$3(arr) || _unsupported_iterable_to_array$k(arr) || _non_iterable_spread$3();
+    return _array_without_holes$3(arr) || _iterable_to_array$3(arr) || _unsupported_iterable_to_array$n(arr) || _non_iterable_spread$3();
 }
-function _unsupported_iterable_to_array$k(o, minLen) {
+function _unsupported_iterable_to_array$n(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$k(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$n(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$k(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$n(o, minLen);
 }
 // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
 // mocks the `normalisedToScaledValue` internal method from JUCE
@@ -374,16 +376,16 @@ var getBorderValue = function(borderArray, borderDirection, returnNumericValue)
     }
 };
 
-function _array_like_to_array$j(arr, len) {
+function _array_like_to_array$m(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$i(arr) {
+function _array_with_holes$l(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$2(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$j(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$m(arr);
 }
 function _define_property$r(obj, key, value) {
     if (key in obj) {
@@ -401,7 +403,7 @@ function _define_property$r(obj, key, value) {
 function _iterable_to_array$2(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$i(arr, i) {
+function _iterable_to_array_limit$l(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -425,7 +427,7 @@ function _iterable_to_array_limit$i(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$i() {
+function _non_iterable_rest$l() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$2() {
@@ -492,19 +494,19 @@ function _object_without_properties_loose$2(source, excluded) {
     }
     return target;
 }
-function _sliced_to_array$i(arr, i) {
-    return _array_with_holes$i(arr) || _iterable_to_array_limit$i(arr, i) || _unsupported_iterable_to_array$j(arr, i) || _non_iterable_rest$i();
+function _sliced_to_array$l(arr, i) {
+    return _array_with_holes$l(arr) || _iterable_to_array_limit$l(arr, i) || _unsupported_iterable_to_array$m(arr, i) || _non_iterable_rest$l();
 }
 function _to_consumable_array$2(arr) {
-    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$j(arr) || _non_iterable_spread$2();
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$m(arr) || _non_iterable_spread$2();
 }
-function _unsupported_iterable_to_array$j(o, minLen) {
+function _unsupported_iterable_to_array$m(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$j(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$m(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$j(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$m(o, minLen);
 }
 //This component is a hack to create beveled edges on an element.
 //This will be obsolete if/when Juce's browser supports
@@ -580,7 +582,7 @@ function BevelContainer(param) {
     }));
     if (hasBevel) {
         var _React_Children, _firstChild_props, _firstChild_props1, _firstChild_props2, _firstChild_props3;
-        var _useState = _sliced_to_array$i(useState(false), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
+        var _useState = _sliced_to_array$l(useState(false), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
         var childrenOfContainer = (_React_Children = React__default.Children) === null || _React_Children === void 0 ? void 0 : _React_Children.toArray(children);
         var firstChild = (childrenOfContainer === null || childrenOfContainer === void 0 ? void 0 : childrenOfContainer[0]) || [];
         var childrenOfFirstChild = Array.isArray(firstChild === null || firstChild === void 0 ? void 0 : (_firstChild_props = firstChild.props) === null || _firstChild_props === void 0 ? void 0 : _firstChild_props.children) ? firstChild === null || firstChild === void 0 ? void 0 : (_firstChild_props1 = firstChild.props) === null || _firstChild_props1 === void 0 ? void 0 : _firstChild_props1.children : [
@@ -618,11 +620,11 @@ function BevelContainer(param) {
     }
 }
 
-var css_248z$h = ".Tabs {\n  display: flex;\n  font-size: 1rem;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.Tabs-item {\n  &:disabled {\n    cursor: default;\n  }\n}\n\n.Tabs-item::-moz-selection {\n  background: transparent;\n}\n.Tabs-item::selection {\n  background: transparent;\n}\n\n/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n/* TODO how do we want to style the scrollbars? */\n\n/* .Tabs-item {\n  color: var(--bg-lv11);\n  font-family: var(--font-leagueSpartan);\n  background: var(--bg-lv2);\n} */\n\n.Tabs-item[data-headlessui-state='hover'],\n.Tabs-item[data-headlessui-state='hover active'],\n.tabs-item:focus,\n.tabs-item:focus-visible {\n  filter: brightness(80%);\n}\n/* \n.Tabs-item[data-headlessui-state='selected hover'],\n.Tabs-item[data-headlessui-state='selected hover active'],\n.Tabs-item[data-headlessui-state='selected'],\n.Tabs-item[data-headlessui-state='selected focus'] {\n  background: var(--bg-lv3);\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg polyline {\n  stroke: var(--color-brand) !important;\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] .Label {\n  color: var(--color-brand) !important;\n} */\n";
-styleInject(css_248z$h);
+var css_248z$i = ".Tabs {\n  display: flex;\n  font-size: 1rem;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.Tabs-item {\n  &:disabled {\n    cursor: default;\n  }\n}\n\n.Tabs-item::-moz-selection {\n  background: transparent;\n}\n.Tabs-item::selection {\n  background: transparent;\n}\n\n/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n/* TODO how do we want to style the scrollbars? */\n\n/* .Tabs-item {\n  color: var(--bg-lv11);\n  font-family: var(--font-leagueSpartan);\n  background: var(--bg-lv2);\n} */\n\n.Tabs-item[data-headlessui-state='hover'],\n.Tabs-item[data-headlessui-state='hover active'],\n.tabs-item:focus,\n.tabs-item:focus-visible {\n  filter: brightness(80%);\n}\n/* \n.Tabs-item[data-headlessui-state='selected hover'],\n.Tabs-item[data-headlessui-state='selected hover active'],\n.Tabs-item[data-headlessui-state='selected'],\n.Tabs-item[data-headlessui-state='selected focus'] {\n  background: var(--bg-lv3);\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg polyline {\n  stroke: var(--color-brand) !important;\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] .Label {\n  color: var(--color-brand) !important;\n} */\n";
+styleInject(css_248z$i);
 
-var css_248z$g = ".Button {\n  font-size: var(--text-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: var(--spacing-ms);\n  padding-left: var(--spacing-ms);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: enter;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  &.xSmall {\n    width: var(--spacing-ml);\n    height: var(--spacing-ml);\n  }\n  &.small {\n    font-size: var(--text-xs);\n    min-width: 1rem;\n    min-height: var(--spacing-sm);\n  }\n  &.large {\n    border-radius: var(--radius-sm);\n    min-width: 1rem;\n    min-height: var(--spacing-xl);\n  }\n}\n";
-styleInject(css_248z$g);
+var css_248z$h = ".Button {\n  font-size: var(--text-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: var(--spacing-ms);\n  padding-left: var(--spacing-ms);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: enter;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  &.xSmall {\n    width: var(--spacing-ml);\n    height: var(--spacing-ml);\n  }\n  &.small {\n    font-size: var(--text-xs);\n    min-width: 1rem;\n    min-height: var(--spacing-sm);\n  }\n  &.large {\n    border-radius: var(--radius-sm);\n    min-width: 1rem;\n    min-height: var(--spacing-xl);\n  }\n}\n";
+styleInject(css_248z$h);
 
 var ButtonType = /*#__PURE__*/ function(ButtonType) {
     ButtonType["momentary"] = "momentary";
@@ -630,27 +632,27 @@ var ButtonType = /*#__PURE__*/ function(ButtonType) {
     return ButtonType;
 }({});
 
-var buttonSizeMap = {
-    xSmall: {
-        width: 12,
-        height: 12
-    },
-    small: {
-        width: 150,
-        height: 30
-    },
-    large: {
-        width: 150,
-        height: 40
-    }
+var buttonWidthMap = {
+    small: '12px',
+    medium: '100px',
+    large: '150px',
+    auto: 'auto',
+    full: '100%'
+};
+var buttonHeightMap = {
+    small: '12px',
+    medium: '30px',
+    large: '40px',
+    auto: 'auto',
+    full: '100%'
 };
 
-function _array_like_to_array$i(arr, len) {
+function _array_like_to_array$l(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$h(arr) {
+function _array_with_holes$k(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$q(obj, key, value) {
@@ -666,7 +668,7 @@ function _define_property$q(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$h(arr, i) {
+function _iterable_to_array_limit$k(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -690,7 +692,7 @@ function _iterable_to_array_limit$h(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$h() {
+function _non_iterable_rest$k() {
     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$o(target) {
@@ -735,19 +737,19 @@ function _object_without_properties_loose$1(source, excluded) {
     }
     return target;
 }
-function _sliced_to_array$h(arr, i) {
-    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$h();
+function _sliced_to_array$k(arr, i) {
+    return _array_with_holes$k(arr) || _iterable_to_array_limit$k(arr, i) || _unsupported_iterable_to_array$l(arr, i) || _non_iterable_rest$k();
 }
-function _unsupported_iterable_to_array$i(o, minLen) {
+function _unsupported_iterable_to_array$l(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$i(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$l(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$l(o, minLen);
 }
 function Button(_param) {
-    var disabled = _param.disabled, text = _param.text, id = _param.id, className = _param.className, style = _param.style, onClick = _param.onClick, children = _param.children, outerGlowRadius = _param.outerGlowRadius, outerGlowColors = _param.outerGlowColors, _param_color = _param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_backgroundColor = _param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'var(--bg-lv1)' : _param_backgroundColor; _param.highlightBackground; var highlightBorderColor = _param.highlightBorderColor; _param.highlightColor; var borderWidth = _param.borderWidth, borderColor = _param.borderColor, _param_cornerBevel = _param.cornerBevel, cornerBevel = _param_cornerBevel === void 0 ? [
+    var disabled = _param.disabled, text = _param.text, id = _param.id, className = _param.className, style = _param.style, onClick = _param.onClick, children = _param.children, outerGlowRadius = _param.outerGlowRadius, outerGlowColors = _param.outerGlowColors, _param_color = _param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_highlightBackground = _param.highlightBackground, highlightBackground = _param_highlightBackground === void 0 ? 'var(--bg-lv6)' : _param_highlightBackground, _param_backgroundColor = _param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'var(--bg-lv5)' : _param_backgroundColor, highlightBorderColor = _param.highlightBorderColor, _param_highlightColor = _param.highlightColor, highlightColor = _param_highlightColor === void 0 ? 'var(--color-gray-100)' : _param_highlightColor, borderWidth = _param.borderWidth, borderColor = _param.borderColor, _param_cornerBevel = _param.cornerBevel, cornerBevel = _param_cornerBevel === void 0 ? [
         0,
         0,
         0,
@@ -756,7 +758,7 @@ function Button(_param) {
         Spacing.small
     ] : _param_padding, _param_margin = _param.margin, margin = _param_margin === void 0 ? [
         Spacing.none
-    ] : _param_margin, _param_type = _param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = _param.size, size = _param_size === void 0 ? ButtonSize.small : _param_size, rest = _object_without_properties$1(_param, [
+    ] : _param_margin, _param_type = _param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_width = _param.width, width = _param_width === void 0 ? ButtonSize.medium : _param_width, _param_height = _param.height, height = _param_height === void 0 ? ButtonSize.medium : _param_height, rest = _object_without_properties$1(_param, [
         "disabled",
         "text",
         "id",
@@ -767,8 +769,8 @@ function Button(_param) {
         "outerGlowRadius",
         "outerGlowColors",
         "color",
-        "backgroundColor",
         "highlightBackground",
+        "backgroundColor",
         "highlightBorderColor",
         "highlightColor",
         "borderWidth",
@@ -777,17 +779,19 @@ function Button(_param) {
         "padding",
         "margin",
         "type",
-        "size"
+        "width",
+        "height"
     ]);
-    var _buttonSizeMap_size, _buttonSizeMap_size1;
-    var _React_useState = _sliced_to_array$h(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
+    var _React_useState = _sliced_to_array$k(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
     var buttonState = Juce.getToggleState(id);
     var isLocalhost = window.location.hostname === 'localhost';
     var hasBevel = !!cornerBevel.find(function(item) {
         return item > 0;
     });
-    var _useState = _sliced_to_array$h(useState(false), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
+    var _useState = _sliced_to_array$k(useState(false), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
     // const { updateModSlotRowTarget } = useGlobalContext();
+    var widthValue = (buttonWidthMap === null || buttonWidthMap === void 0 ? void 0 : buttonWidthMap[width]) ? buttonWidthMap === null || buttonWidthMap === void 0 ? void 0 : buttonWidthMap[width] : width;
+    var heightValue = (buttonHeightMap === null || buttonHeightMap === void 0 ? void 0 : buttonHeightMap[height]) ? buttonHeightMap === null || buttonHeightMap === void 0 ? void 0 : buttonHeightMap[height] : height;
     // Update the local state when the ID changes
     useEffect(function() {
         setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
@@ -843,8 +847,8 @@ function Button(_param) {
     ]);
     var _padding_, _padding_1, _padding_2, _ref, _margin_, _margin_1, _margin_2, _ref1;
     return /*#__PURE__*/ React__default.createElement(BevelContainer, {
-        width: (_buttonSizeMap_size = buttonSizeMap[size]) === null || _buttonSizeMap_size === void 0 ? void 0 : _buttonSizeMap_size.width,
-        height: (_buttonSizeMap_size1 = buttonSizeMap[size]) === null || _buttonSizeMap_size1 === void 0 ? void 0 : _buttonSizeMap_size1.height,
+        width: width,
+        height: height,
         cornerBevel: cornerBevel,
         fillColor: backgroundColor,
         borderWidth: borderWidth,
@@ -873,22 +877,24 @@ function Button(_param) {
             marginRight: "var(--p-".concat((_margin_ = margin === null || margin === void 0 ? void 0 : margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin === null || margin === void 0 ? void 0 : margin[0], ")"),
             marginBottom: "var(--p-".concat((_margin_1 = margin === null || margin === void 0 ? void 0 : margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin === null || margin === void 0 ? void 0 : margin[0], ")"),
             marginLeft: "var(--p-".concat((_ref1 = (_margin_2 = margin === null || margin === void 0 ? void 0 : margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin === null || margin === void 0 ? void 0 : margin[1]) !== null && _ref1 !== void 0 ? _ref1 : margin === null || margin === void 0 ? void 0 : margin[0], ")"),
-            width: hasBevel ? buttonSizeMap === null || buttonSizeMap === void 0 ? void 0 : buttonSizeMap[size].width : 'auto',
-            backgroundColor: hasBevel ? 'transparent' : backgroundColor,
+            width: widthValue,
+            height: heightValue,
+            backgroundColor: hasBevel ? 'transparent' : componentIsHovered ? highlightBackground : backgroundColor,
             border: !hasBevel ? "".concat(borderWidth, "px solid ").concat(borderColor) : 'none',
             filter: generateDropShadowFilterString(outerGlowColors, outerGlowRadius),
-            color: color
+            color: componentIsHovered ? highlightColor : color
         }, style),
-        className: classnames('Button', isSelected && 'selected', "".concat(size), className)
-    }, rest), size !== ButtonSize.xSmall && (text ? text : children)));
+        className: classnames('Button', isSelected && 'selected', className)
+    }, rest), width !== buttonWidthMap.small && (text ? text : children)));
 }
 Button.padding = Spacing;
 Button.margin = Spacing;
 Button.type = ButtonType;
-Button.size = ButtonSize;
+Button.width = ButtonSize;
+Button.height = ButtonSize;
 
-var css_248z$f = ".IconButton {\n  cursor: pointer;\n}\n.IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n";
-styleInject(css_248z$f);
+var css_248z$g = ".IconButton {\n  cursor: pointer;\n}\n.IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n";
+styleInject(css_248z$g);
 
 var JustifyContent = /*#__PURE__*/ function(JustifyContent) {
     JustifyContent["flexStart"] = "flex-start";
@@ -927,6 +933,9 @@ var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
     return LayoutTags;
 }({});
 
+var css_248z$f = ".divider-right:after {\n  content: '';\n  border-color: inherit;\n  border-right-width: 1px;\n  border-style: solid;\n  position: absolute;\n  right: 0;\n  height: var(--spacing-xl);\n  top: 50%;\n}\n\n.divider-left:after {\n  content: '';\n  border-color: inherit;\n  border-left-width: 1px;\n  border-style: solid;\n  position: absolute;\n  height: var(--spacing-xl);\n  right: 0;\n  top: 50%;\n}\n";
+styleInject(css_248z$f);
+
 function _define_property$p(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -1012,7 +1021,8 @@ function Box(_param) {
         '0px',
         '0px',
         '0px'
-    ] : _param_borderWidth, _param_borderStyle = _param.borderStyle, borderStyle = _param_borderStyle === void 0 ? BorderStyles.solid : _param_borderStyle, _param_borderColor = _param.borderColor, borderColor = _param_borderColor === void 0 ? 'var(--bg-lv8)' : _param_borderColor, borderRadius = _param.borderRadius, _param_flexDirection = _param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, backgroundColor = _param.backgroundColor, _param_fullHeight = _param.fullHeight, fullHeight = _param_fullHeight === void 0 ? false : _param_fullHeight, _param_padding = _param.padding, padding = _param_padding === void 0 ? [
+    ] : _param_borderWidth, _param_borderStyle = _param.borderStyle, borderStyle = _param_borderStyle === void 0 ? BorderStyles.solid : _param_borderStyle, _param_borderColor = _param.borderColor, borderColor = _param_borderColor === void 0 ? 'var(--bg-lv8)' : _param_borderColor, borderRadius = _param.borderRadius, _param_dividerRight = _param.dividerRight, dividerRight = _param_dividerRight === void 0 ? false : _param_dividerRight, _param_dividerLeft = _param.dividerLeft, dividerLeft = _param_dividerLeft === void 0 ? false : _param_dividerLeft; _param.dividerColor; var _param_flexDirection = _param.// dividerHeight = 'var(--spacing-xl)',
+    flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, backgroundColor = _param.backgroundColor, _param_fullHeight = _param.fullHeight, fullHeight = _param_fullHeight === void 0 ? false : _param_fullHeight, _param_padding = _param.padding, padding = _param_padding === void 0 ? [
         Spacing.none,
         Spacing.none,
         Spacing.none,
@@ -1040,6 +1050,9 @@ function Box(_param) {
         "borderStyle",
         "borderColor",
         "borderRadius",
+        "dividerRight",
+        "dividerLeft",
+        "dividerColor",
         "flexDirection",
         "backgroundColor",
         "fullHeight",
@@ -1066,7 +1079,7 @@ function Box(_param) {
     }, /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$3(_object_spread$n({
         // id="globalValues"
         key: key,
-        className: className,
+        className: "".concat(className ? className : '', " ").concat(dividerRight ? 'divider-right' : '', " ").concat(dividerLeft ? 'divider-left' : ''),
         onClick: onClick
     }, rest), {
         style: _object_spread$n({
@@ -1092,6 +1105,7 @@ function Box(_param) {
             justifyContent: "".concat(justifyContent),
             alignContent: "".concat(alignContent),
             alignItems: "".concat(alignItems),
+            position: 'relative',
             flex: flex ? flex : '',
             filter: !hasBevel ? generateDropShadowFilterString(outerGlowColors, outerGlowRadius) : 'none'
         }, style)
@@ -1553,11 +1567,19 @@ function Label(param) {
             color: color
         }, style),
         className: classnames('Label', 'select-none', className)
-    }, value ? value : children);
+    }, value !== null && value !== undefined ? value : children);
 }
 Label.padding = Spacing;
 Label.fontSize = FontSizes;
 
+function _array_like_to_array$k(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$j(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _define_property$m(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -1571,6 +1593,33 @@ function _define_property$m(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array_limit$j(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$j() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread$k(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -1586,8 +1635,19 @@ function _object_spread$k(target) {
     }
     return target;
 }
+function _sliced_to_array$j(arr, i) {
+    return _array_with_holes$j(arr) || _iterable_to_array_limit$j(arr, i) || _unsupported_iterable_to_array$k(arr, i) || _non_iterable_rest$j();
+}
+function _unsupported_iterable_to_array$k(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$k(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$k(o, minLen);
+}
 function IconButton(param) {
-    var id = param.id, icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, // backgroundColor = 'var(--bg-lv1)',
+    var id = param.id, icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_iconColor = param.iconColor, iconColor = _param_iconColor === void 0 ? 'var(--color-gray-200)' : _param_iconColor, highlightColor = param.highlightColor, _param_highlightIconColor = param.highlightIconColor, highlightIconColor = _param_highlightIconColor === void 0 ? 'var(--color-text)' : _param_highlightIconColor, // backgroundColor = 'var(--bg-lv1)',
     backgroundColor = param.backgroundColor, _param_padding = param.padding, padding = _param_padding === void 0 ? [
         Button.padding.none
     ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
@@ -1598,6 +1658,7 @@ function IconButton(param) {
     var numberWidth = parseInt(((_width_match = width.match(/\d/g)) !== null && _width_match !== void 0 ? _width_match : []).join(''), 10);
     var _iconWidth_match;
     var iconNumberWidth = typeof iconWidth === 'string' && parseInt(((_iconWidth_match = iconWidth === null || iconWidth === void 0 ? void 0 : iconWidth.match(/\d/g)) !== null && _iconWidth_match !== void 0 ? _iconWidth_match : []).join(''), 10);
+    var _useState = _sliced_to_array$j(useState(false), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
     return /*#__PURE__*/ React__default.createElement(Button, {
         id: id,
         className: "IconButton ".concat(className ? className : ''),
@@ -1605,6 +1666,13 @@ function IconButton(param) {
         padding: padding,
         margin: margin,
         disabled: disabled,
+        highlightColor: highlightColor,
+        onMouseEnter: function() {
+            return !disabled && setComponentIsHovered(true);
+        },
+        onMouseLeave: function() {
+            return !disabled && setComponentIsHovered(false);
+        },
         style: _object_spread$k({
             backgroundColor: backgroundColor,
             width: width,
@@ -1615,7 +1683,7 @@ function IconButton(param) {
         gap: Box.gap.mediumSmall
     }, /*#__PURE__*/ React__default.createElement(Icon, {
         width: iconNumberWidth || numberWidth,
-        color: disabled ? 'var(--color-gray-400)' : color
+        color: disabled ? 'var(--color-gray-400)' : componentIsHovered ? highlightIconColor : iconColor
     }), label ? /*#__PURE__*/ React__default.createElement(Label, {
         color: color,
         fontSize: Label.fontSize.xSmall,
@@ -1626,15 +1694,15 @@ IconButton.icon = Icons;
 IconButton.padding = Spacing;
 IconButton.margin = Spacing;
 
-function _array_like_to_array$h(arr, len) {
+function _array_like_to_array$j(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$g(arr) {
+function _array_with_holes$i(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$g(arr, i) {
+function _iterable_to_array_limit$i(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1658,19 +1726,19 @@ function _iterable_to_array_limit$g(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$g() {
+function _non_iterable_rest$i() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$g(arr, i) {
-    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$g();
+function _sliced_to_array$i(arr, i) {
+    return _array_with_holes$i(arr) || _iterable_to_array_limit$i(arr, i) || _unsupported_iterable_to_array$j(arr, i) || _non_iterable_rest$i();
 }
-function _unsupported_iterable_to_array$h(o, minLen) {
+function _unsupported_iterable_to_array$j(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$j(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$j(o, minLen);
 }
 function Tabs(param) {
     var items = param.items, _param_initialSelectedIndex = param.initialSelectedIndex, initialSelectedIndex = _param_initialSelectedIndex === void 0 ? undefined : _param_initialSelectedIndex, _param_id = param.id, id = _param_id === void 0 ? '' : _param_id, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
@@ -1688,9 +1756,9 @@ function Tabs(param) {
         0,
         0
     ] : _param_outerCornerBevel, outerBorderWidth = param.outerBorderWidth, tabBorderWidth = param.tabBorderWidth, _param_borderColor = param.borderColor, borderColor = _param_borderColor === void 0 ? 'var(--color-text)' : _param_borderColor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.small : _param_fontSize, selectedBackgroundColor = param.selectedBackgroundColor, icons = param.icons, onChange = param.onChange, isDisabled = param.isDisabled;
-    var _useState = _sliced_to_array$g(useState(null), 2), selectedIndex = _useState[0], setSelectedIndex = _useState[1];
-    var _useState1 = _sliced_to_array$g(useState([]), 2), choices = _useState1[0], setChoices = _useState1[1];
-    var _useState2 = _sliced_to_array$g(useState(null), 2), hoveredTab = _useState2[0], setHoveredTab = _useState2[1];
+    var _useState = _sliced_to_array$i(useState(null), 2), selectedIndex = _useState[0], setSelectedIndex = _useState[1];
+    var _useState1 = _sliced_to_array$i(useState([]), 2), choices = _useState1[0], setChoices = _useState1[1];
+    var _useState2 = _sliced_to_array$i(useState(null), 2), hoveredTab = _useState2[0], setHoveredTab = _useState2[1];
     var hasTabBevel = !!tabCornerBevel.find(function(item) {
         return item > 0;
     });
@@ -1842,7 +1910,7 @@ function useObservable(param) {
             ]);
         }
     };
-    var unsubscribe = function(observer, id) {
+    var unsubscribe = function(id) {
         var _observers_current;
         if (((_observers_current = observers.current) === null || _observers_current === void 0 ? void 0 : _observers_current.find(function(item) {
             return item[1] === id;
@@ -1868,16 +1936,28 @@ function useObservable(param) {
     };
 }
 
-function _array_like_to_array$g(arr, len) {
+function useRandom() {
+    var onFire = function() {
+        var //@ts-expect-error
+        _window___JUCE___backend, _window___JUCE__, _window;
+        (_window = window) === null || _window === void 0 ? void 0 : (_window___JUCE__ = _window.__JUCE__) === null || _window___JUCE__ === void 0 ? void 0 : (_window___JUCE___backend = _window___JUCE__.backend) === null || _window___JUCE___backend === void 0 ? void 0 : _window___JUCE___backend.emitEvent('setRandom', {});
+    };
+    var observableObject = useObservable({
+        onFire: onFire
+    });
+    return observableObject;
+}
+
+function _array_like_to_array$i(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$f(arr) {
+function _array_with_holes$h(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$1(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$g(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$i(arr);
 }
 function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -1924,7 +2004,7 @@ function _define_property$l(obj, key, value) {
 function _iterable_to_array$1(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$f(arr, i) {
+function _iterable_to_array_limit$h(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1948,7 +2028,7 @@ function _iterable_to_array_limit$f(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$f() {
+function _non_iterable_rest$h() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$1() {
@@ -1988,19 +2068,19 @@ function _object_spread_props$2(target, source) {
     }
     return target;
 }
-function _sliced_to_array$f(arr, i) {
-    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$f();
+function _sliced_to_array$h(arr, i) {
+    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$h();
 }
 function _to_consumable_array$1(arr) {
-    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$g(arr) || _non_iterable_spread$1();
+    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$i(arr) || _non_iterable_spread$1();
 }
-function _unsupported_iterable_to_array$g(o, minLen) {
+function _unsupported_iterable_to_array$i(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$i(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(o, minLen);
 }
 function _ts_generator$4(thisArg, body) {
     var f, y, t, _ = {
@@ -2233,7 +2313,7 @@ function useGlobalContext(selector) {
 // Context provider
 function GlobalContextProvider(param) {
     var children = param.children;
-    var _useReducer = _sliced_to_array$f(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
+    var _useReducer = _sliced_to_array$h(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
     var highlightedItemChanged = useCallback(function(highlightedItem) {
         dispatch({
             type: 'HIGHLIGHTED_ITEM_CHANGED',
@@ -2500,14 +2580,7 @@ function GlobalContextProvider(param) {
             saveToBackend: true
         });
     };
-    var onFire = function() {
-        var //@ts-expect-error
-        _window___JUCE___backend, _window___JUCE__, _window;
-        (_window = window) === null || _window === void 0 ? void 0 : (_window___JUCE__ = _window.__JUCE__) === null || _window___JUCE__ === void 0 ? void 0 : (_window___JUCE___backend = _window___JUCE__.backend) === null || _window___JUCE___backend === void 0 ? void 0 : _window___JUCE___backend.emitEvent('setRandom', {});
-    };
-    var useRandom = useObservable({
-        onFire: onFire
-    });
+    var mainPanelrandomizerObject = useRandom();
     var value = {
         globalState: state,
         highlightedItemChanged: highlightedItemChanged,
@@ -2530,22 +2603,22 @@ function GlobalContextProvider(param) {
         // setModSlotTarget,
         modSlotParamsListReceived: modSlotParamsListReceived,
         modSlotParamLabelsReceived: modSlotParamLabelsReceived,
-        useRandom: useRandom
+        mainPanelrandomizerObject: mainPanelrandomizerObject
     };
     return /*#__PURE__*/ React__default.createElement(GlobalContext.Provider, {
         value: value
     }, children);
 }
 
-function _array_like_to_array$f(arr, len) {
+function _array_like_to_array$h(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$e(arr) {
+function _array_with_holes$g(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$e(arr, i) {
+function _iterable_to_array_limit$g(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -2569,26 +2642,26 @@ function _iterable_to_array_limit$e(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$e() {
+function _non_iterable_rest$g() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$e(arr, i) {
-    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$e();
+function _sliced_to_array$g(arr, i) {
+    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$g();
 }
-function _unsupported_iterable_to_array$f(o, minLen) {
+function _unsupported_iterable_to_array$h(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$f(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
 }
 var useCombobox = 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, _param_updateModSlotPreview = param.updateModSlotPreview, updateModSlotPreview = _param_updateModSlotPreview === void 0 ? true : _param_updateModSlotPreview, _param_updateBackendStateInHook = param.updateBackendStateInHook, updateBackendStateInHook = _param_updateBackendStateInHook === void 0 ? true : _param_updateBackendStateInHook, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled;
+    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, _param_updateModSlotPreview = param.updateModSlotPreview, updateModSlotPreview = _param_updateModSlotPreview === void 0 ? true : _param_updateModSlotPreview, _param_updateBackendStateInHook = param.updateBackendStateInHook, updateBackendStateInHook = _param_updateBackendStateInHook === void 0 ? true : _param_updateBackendStateInHook, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled; param.isRandomizable; param.randomizerObject;
     var _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$e(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState[0], setProperties = _useState[1];
-    var _useState1 = _sliced_to_array$e(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex()), 2), selectedIndex = _useState1[0], setSelectedIndex = _useState1[1];
+    var _useState = _sliced_to_array$g(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState[0], setProperties = _useState[1];
+    var _useState1 = _sliced_to_array$g(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex()), 2), selectedIndex = _useState1[0], setSelectedIndex = _useState1[1];
     var prevIndex = useRef(null);
     var nextIndex = useRef(null);
     var prevDragDirection = useRef(null);
@@ -2771,12 +2844,12 @@ var useCombobox = function(param) {
     };
 };
 
-function _array_like_to_array$e(arr, len) {
+function _array_like_to_array$g(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$d(arr) {
+function _array_with_holes$f(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$k(obj, key, value) {
@@ -2792,7 +2865,7 @@ function _define_property$k(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$d(arr, i) {
+function _iterable_to_array_limit$f(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -2816,7 +2889,7 @@ function _iterable_to_array_limit$d(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$d() {
+function _non_iterable_rest$f() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$i(target) {
@@ -2834,16 +2907,16 @@ function _object_spread$i(target) {
     }
     return target;
 }
-function _sliced_to_array$d(arr, i) {
-    return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$d();
+function _sliced_to_array$f(arr, i) {
+    return _array_with_holes$f(arr) || _iterable_to_array_limit$f(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$f();
 }
-function _unsupported_iterable_to_array$e(o, minLen) {
+function _unsupported_iterable_to_array$g(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$e(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
 }
 function ComboboxComponent(param) {
     var id = param.id, anchorTo = param.anchorTo, _param_excludeItems = param.excludeItems, excludeItems = _param_excludeItems === void 0 ? [] : _param_excludeItems, items = param.items, onChange = param.onChange, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, label = param.label; param.unsavedPreviewIndex; var _param_labelColor = param.labelColor, labelColor = _param_labelColor === void 0 ? 'var(--color-text)' : _param_labelColor, dropdownBorderWidth = param.dropdownBorderWidth, _param_dropdownBorderColor = param.dropdownBorderColor, dropdownBorderColor = _param_dropdownBorderColor === void 0 ? 'var(--bg-lv9)' : _param_dropdownBorderColor, _param_dropdownBackgroundColor = param.dropdownBackgroundColor, dropdownBackgroundColor = _param_dropdownBackgroundColor === void 0 ? 'var(--bg-lv4)' : _param_dropdownBackgroundColor, dropdownItemHighlightBackground = param.dropdownItemHighlightBackground, dropdownItemHighlightColor = param.dropdownItemHighlightColor, dropdownSelectedItemColor = param.dropdownSelectedItemColor, dropdownSelectedItemBackground = param.dropdownSelectedItemBackground, buttonHighlightBackground = param.buttonHighlightBackground, buttonHighlightColor = param.buttonHighlightColor, buttonBorderColor = param.buttonBorderColor, buttonBorderWidth = param.buttonBorderWidth, _param_buttonCornerBevel = param.buttonCornerBevel, buttonCornerBevel = _param_buttonCornerBevel === void 0 ? [
@@ -2852,10 +2925,10 @@ function ComboboxComponent(param) {
         0,
         0
     ] : _param_buttonCornerBevel, buttonBackgroundColor = param.buttonBackgroundColor, _param_buttonHeight = param.buttonHeight, buttonHeight = _param_buttonHeight === void 0 ? 40 : _param_buttonHeight, key = param.key, width = param.width, _param_listItemHeight = param.listItemHeight, listItemHeight = _param_listItemHeight === void 0 ? 25 : _param_listItemHeight; param.updateModSlotPreview; param.updateBackendStateInComponent; param.placeholderText; var isDisabled = param.isDisabled, style = param.style, className = param.className;
-    var _useState = _sliced_to_array$d(useState(''), 2), includeFilterString = _useState[0], setIncludeFilterString = _useState[1];
+    var _useState = _sliced_to_array$f(useState(''), 2), includeFilterString = _useState[0], setIncludeFilterString = _useState[1];
     var listItemsPerPage = 5;
-    var _useState1 = _sliced_to_array$d(useState(null), 2), hoveredDropdownItem = _useState1[0], setHoveredDropdownItem = _useState1[1];
-    var _useState2 = _sliced_to_array$d(useState(), 2), buttonIsHovered = _useState2[0], setButtonIsHovered = _useState2[1];
+    var _useState1 = _sliced_to_array$f(useState(null), 2), hoveredDropdownItem = _useState1[0], setHoveredDropdownItem = _useState1[1];
+    var _useState2 = _sliced_to_array$f(useState(), 2), buttonIsHovered = _useState2[0], setButtonIsHovered = _useState2[1];
     var _useGlobalContext = useGlobalContext(), modSlotTargets = _useGlobalContext.globalState.modSlotTargets;
     var changeHandler = function(newValue) {
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
@@ -3000,12 +3073,12 @@ function ComboboxComponent(param) {
 var css_248z$d = ".Combobox-items {\n  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 3px;\n  border-radius: 4px;\n  z-index: 50;\n  scrollbar-width: thin;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n.Combobox-items::-webkit-scrollbar {\n  width: 10px;\n}\n\n.Combobox-item {\n  display: flex;\n  align-items: center;\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  cursor: pointer;\n  /* text-align: center; */\n}\n\n.Combobox-button:not(:disabled),\n.Combobox-arrow:not(:disabled),\n.Combobox-button-element:not(:disabled) {\n  cursor: pointer;\n}\n";
 styleInject(css_248z$d);
 
-function _array_like_to_array$d(arr, len) {
+function _array_like_to_array$f(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$c(arr) {
+function _array_with_holes$e(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$j(obj, key, value) {
@@ -3021,7 +3094,7 @@ function _define_property$j(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$c(arr, i) {
+function _iterable_to_array_limit$e(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3045,7 +3118,7 @@ function _iterable_to_array_limit$c(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$c() {
+function _non_iterable_rest$e() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$h(target) {
@@ -3063,19 +3136,19 @@ function _object_spread$h(target) {
     }
     return target;
 }
-function _sliced_to_array$c(arr, i) {
-    return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$c();
+function _sliced_to_array$e(arr, i) {
+    return _array_with_holes$e(arr) || _iterable_to_array_limit$e(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$e();
 }
-function _unsupported_iterable_to_array$d(o, minLen) {
+function _unsupported_iterable_to_array$f(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$f(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
 }
 function Combobox$1(param) {
-    var label = param.label, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, labelColor = param.labelColor, dropdownBorderWidth = param.dropdownBorderWidth, dropdownBorderColor = param.dropdownBorderColor, _param_dropdownBackgroundColor = param.dropdownBackgroundColor, dropdownBackgroundColor = _param_dropdownBackgroundColor === void 0 ? 'var(--bg-lv4)' : _param_dropdownBackgroundColor, dropdownItemHighlightBackground = param.dropdownItemHighlightBackground, _param_dropdownItemHighlightColor = param.dropdownItemHighlightColor, dropdownItemHighlightColor = _param_dropdownItemHighlightColor === void 0 ? 'var(--color-text)' : _param_dropdownItemHighlightColor, dropdownSelectedItemColor = param.dropdownSelectedItemColor, dropdownSelectedItemBackground = param.dropdownSelectedItemBackground, buttonHighlightBackground = param.buttonHighlightBackground, _param_buttonHighlightBorderColor = param.buttonHighlightBorderColor, buttonHighlightBorderColor = _param_buttonHighlightBorderColor === void 0 ? 'var(--bg-lv7)' : _param_buttonHighlightBorderColor, _param_buttonBorderColor = param.buttonBorderColor, buttonBorderColor = _param_buttonBorderColor === void 0 ? 'var(--bg-lv7)' : _param_buttonBorderColor, _param_buttonBorderRadius = param.buttonBorderRadius, buttonBorderRadius = _param_buttonBorderRadius === void 0 ? 4 : _param_buttonBorderRadius, _param_buttonBorderWidth = param.buttonBorderWidth, buttonBorderWidth = _param_buttonBorderWidth === void 0 ? 1 : _param_buttonBorderWidth, _param_buttonCornerBevel = param.buttonCornerBevel, buttonCornerBevel = _param_buttonCornerBevel === void 0 ? [
+    var label = param.label, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, labelColor = param.labelColor, dropdownBorderWidth = param.dropdownBorderWidth, dropdownBorderColor = param.dropdownBorderColor, _param_dropdownBackgroundColor = param.dropdownBackgroundColor, dropdownBackgroundColor = _param_dropdownBackgroundColor === void 0 ? 'var(--bg-lv4)' : _param_dropdownBackgroundColor, dropdownItemHighlightBackground = param.dropdownItemHighlightBackground, _param_dropdownItemHighlightColor = param.dropdownItemHighlightColor, dropdownItemHighlightColor = _param_dropdownItemHighlightColor === void 0 ? 'var(--color-text)' : _param_dropdownItemHighlightColor, dropdownSelectedItemColor = param.dropdownSelectedItemColor, dropdownSelectedItemBackground = param.dropdownSelectedItemBackground, buttonHighlightBackground = param.buttonHighlightBackground, _param_buttonHighlightBorderColor = param.buttonHighlightBorderColor, buttonHighlightBorderColor = _param_buttonHighlightBorderColor === void 0 ? 'var(--bg-lv8)' : _param_buttonHighlightBorderColor, _param_buttonBorderColor = param.buttonBorderColor, buttonBorderColor = _param_buttonBorderColor === void 0 ? 'var(--bg-lv7)' : _param_buttonBorderColor, _param_buttonBorderRadius = param.buttonBorderRadius, buttonBorderRadius = _param_buttonBorderRadius === void 0 ? 4 : _param_buttonBorderRadius, _param_buttonBorderWidth = param.buttonBorderWidth, buttonBorderWidth = _param_buttonBorderWidth === void 0 ? 1 : _param_buttonBorderWidth, _param_buttonCornerBevel = param.buttonCornerBevel, buttonCornerBevel = _param_buttonCornerBevel === void 0 ? [
         0,
         0,
         0,
@@ -3086,8 +3159,8 @@ function Combobox$1(param) {
         label: label,
         onChange: onChange
     }), selectedIndexLabel = _useCombobox.selectedIndexLabel, choices = _useCombobox.choices, onMouseEnter = _useCombobox.onMouseEnter, onMouseExit = _useCombobox.onMouseExit, handleChange = _useCombobox.handleChange, onClick = _useCombobox.onClick, incrementValue = _useCombobox.incrementValue, properties = _useCombobox.properties, decrementValue = _useCombobox.decrementValue;
-    var _useState = _sliced_to_array$c(useState(), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
-    var _useState1 = _sliced_to_array$c(useState(null), 2), hoveredDropdownItem = _useState1[0], setHoveredDropdownItem = _useState1[1];
+    var _useState = _sliced_to_array$e(useState(), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
+    var _useState1 = _sliced_to_array$e(useState(null), 2), hoveredDropdownItem = _useState1[0], setHoveredDropdownItem = _useState1[1];
     // const bevel = buttonCornerBevel?.find((item: number) => item > 0);
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "ListboxComponent-wrapper",
@@ -3131,7 +3204,7 @@ function Combobox$1(param) {
             borderRadius: buttonBorderRadius,
             border: buttonCornerBevel.find(function(item) {
                 return item > 1;
-            }) ? '' : "".concat(buttonBorderWidth, "px solid ").concat(buttonBorderColor)
+            }) ? '' : "".concat(buttonBorderWidth, "px solid ").concat(componentIsHovered ? buttonHighlightBorderColor : buttonBorderColor)
         }, style),
         onMouseEnter: function() {
             onMouseEnter();
@@ -3329,12 +3402,12 @@ Combobox.anchorTo = AnchorTo;
 var css_248z$c = ".TextInput {\n  pointer-events: auto;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n\n.TextInput:disabled {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.isActive .TextInput {\n  -webkit-user-select: auto;\n  -moz-user-select: auto;\n  -ms-user-select: auto;\n  user-select: auto;\n}\n";
 styleInject(css_248z$c);
 
-function _array_like_to_array$c(arr, len) {
+function _array_like_to_array$e(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$b(arr) {
+function _array_with_holes$d(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$i(obj, key, value) {
@@ -3350,7 +3423,7 @@ function _define_property$i(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$b(arr, i) {
+function _iterable_to_array_limit$d(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3374,7 +3447,7 @@ function _iterable_to_array_limit$b(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$b() {
+function _non_iterable_rest$d() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$g(target) {
@@ -3392,16 +3465,16 @@ function _object_spread$g(target) {
     }
     return target;
 }
-function _sliced_to_array$b(arr, i) {
-    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$b();
+function _sliced_to_array$d(arr, i) {
+    return _array_with_holes$d(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$e(arr, i) || _non_iterable_rest$d();
 }
-function _unsupported_iterable_to_array$c(o, minLen) {
+function _unsupported_iterable_to_array$e(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$c(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$e(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
 }
 // import { decimalToPercent, percentToDecimal } from '../../common/utils';
 // import debounce from 'lodash.debounce';
@@ -3413,9 +3486,9 @@ var InputTypes = /*#__PURE__*/ function(InputTypes) {
 function Input(param) {
     var onComplete = param.onComplete, value = param.value; param.min; param.max; var _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.xSmall : _param_fontSize, style = param.style, outerGlowRadius = param.outerGlowRadius, outerGlowColor = param.outerGlowColor; param.blur; var className = param.className, isDisabled = param.isDisabled, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? 'var(--color-text)' : _param_textColor, _param_highlightColor = param.highlightColor, highlightColor = _param_highlightColor === void 0 ? 'var(--color-brand)' : _param_highlightColor, _param_textAlign = param.textAlign, textAlign = _param_textAlign === void 0 ? TextAlign.center : _param_textAlign;
     var _inputRef_current;
-    var _useState = _sliced_to_array$b(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
+    var _useState = _sliced_to_array$d(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
     // const [hasError, setHasError] = useState<boolean>(false);
-    var _useState1 = _sliced_to_array$b(useState(false), 2), isHighlighted = _useState1[0], setIsHighlighted = _useState1[1];
+    var _useState1 = _sliced_to_array$d(useState(false), 2), isHighlighted = _useState1[0], setIsHighlighted = _useState1[1];
     var valueRef = useRef(null);
     var isLocalhost = window.location.hostname === 'localhost';
     // Sets up listeners to handle changes on the backend
@@ -3603,15 +3676,15 @@ var TrackWidths = /*#__PURE__*/ function(TrackWidths) {
     return TrackWidths;
 }({});
 
-function _array_like_to_array$b(arr, len) {
+function _array_like_to_array$d(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$a(arr) {
+function _array_with_holes$c(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$a(arr, i) {
+function _iterable_to_array_limit$c(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3635,19 +3708,19 @@ function _iterable_to_array_limit$a(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$a() {
+function _non_iterable_rest$c() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$a(arr, i) {
-    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$a();
+function _sliced_to_array$c(arr, i) {
+    return _array_with_holes$c(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$c();
 }
-function _unsupported_iterable_to_array$b(o, minLen) {
+function _unsupported_iterable_to_array$d(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
@@ -3657,7 +3730,7 @@ var useSlider = function(param) {
         end: 15000,
         interval: 0.1,
         skew: 0.7
-    } : _param_mockProperties, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_isControlGroup = param.isControlGroup, isControlGroup = _param_isControlGroup === void 0 ? false : _param_isControlGroup, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.vertical : _param_orientation, _param_dragOrientation = param.dragOrientation, dragOrientation = _param_dragOrientation === void 0 ? Orientation.vertical : _param_dragOrientation, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, _param_updateModSlotPreview = param.updateModSlotPreview, updateModSlotPreview = _param_updateModSlotPreview === void 0 ? true : _param_updateModSlotPreview, onChange = param.onChange; param.sliderElementRef; var _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled;
+    } : _param_mockProperties, isRandomizable = param.isRandomizable, randomizerObject = param.randomizerObject, resetterObject = param.resetterObject, _param_isControlGroup = param.isControlGroup, isControlGroup = _param_isControlGroup === void 0 ? false : _param_isControlGroup, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.vertical : _param_orientation, _param_dragOrientation = param.dragOrientation, dragOrientation = _param_dragOrientation === void 0 ? Orientation.vertical : _param_dragOrientation, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0.0 : _param_mockInitialNormalisedValue, _param_updateModSlotPreview = param.updateModSlotPreview, updateModSlotPreview = _param_updateModSlotPreview === void 0 ? true : _param_updateModSlotPreview, onChange = param.onChange; param.sliderElementRef; var _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled;
     var _window_location, _window;
     // const sliderState: JuceSlider = Juce.getSliderState(id);
     // if isLocalhost is true, the front end app is running outside of JUCE in a browser.
@@ -3671,16 +3744,17 @@ var useSlider = function(param) {
    * AudioProcessorParameter::getValue() (C++).
    */ // See https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L230C1-L238C6
     // NOTE: We can think of this as a percentage value, in 0 to 1 format
-    var _useState = _sliced_to_array$a(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
+    var _useState = _sliced_to_array$c(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
     // const [normalisedValue, setNormalisedValue] = useState(0);
-    var _useState1 = _sliced_to_array$a(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useState1 = _sliced_to_array$c(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
     var scaledValueRef = useRef(null);
     var normalisedValueRef = useRef(null);
     var sliderState = Juce.getSliderState(id);
     var prevValueRef = useRef(null);
     // const randomValueSetCounter = useRef<number>(null);
-    var _useGlobalContext = useGlobalContext(), useRandom = _useGlobalContext.useRandom, highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter, updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, // setModSlotRowTarget,
-    getModSlotPreview = _useGlobalContext.getModSlotPreview;
+    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setDefaultParameter = _useGlobalContext.setDefaultParameter, updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, // setModSlotRowTarget,
+    getModSlotPreview = _useGlobalContext.getModSlotPreview, mainPanelrandomizerObject = _useGlobalContext.mainPanelrandomizerObject;
+    var randomizerObjectToUse = randomizerObject && Object.keys(randomizerObject).length > 0 ? randomizerObject : mainPanelrandomizerObject;
     var modSlotPreview = getModSlotPreview();
     // Set the initial state
     //@ts-expect-error
@@ -3696,13 +3770,18 @@ var useSlider = function(param) {
             });
             setNormalisedState(clamp(newValue));
         };
+        var clearValue = function() {
+            setNormalisedState(0);
+        };
         if (!isLocalhost) {
+            resetterObject === null || resetterObject === void 0 ? void 0 : resetterObject.subscribe(clearValue, id);
             setProperties(sliderState === null || sliderState === void 0 ? void 0 : sliderState.properties);
             if (isRandomizable) {
-                useRandom === null || useRandom === void 0 ? void 0 : useRandom.subscribe(setRandom, id);
+                randomizerObjectToUse === null || randomizerObjectToUse === void 0 ? void 0 : randomizerObjectToUse.subscribe(setRandom, id);
             }
             return function() {
-                useRandom === null || useRandom === void 0 ? void 0 : useRandom.unsubscribe(setRandom, id);
+                randomizerObjectToUse === null || randomizerObjectToUse === void 0 ? void 0 : randomizerObjectToUse.unsubscribe(setRandom, id);
+                resetterObject === null || resetterObject === void 0 ? void 0 : resetterObject.unsubscribe(id);
             };
         } else {
             // This sets 'mockProperties' as the value for 'properties' if the app is running in a browser.
@@ -3957,15 +4036,15 @@ styleInject(css_248z$b);
 var css_248z$a = "";
 styleInject(css_248z$a);
 
-function _array_like_to_array$a(arr, len) {
+function _array_like_to_array$c(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$9(arr) {
+function _array_with_holes$b(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$9(arr, i) {
+function _iterable_to_array_limit$b(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3989,19 +4068,19 @@ function _iterable_to_array_limit$9(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$9() {
+function _non_iterable_rest$b() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$9(arr, i) {
-    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$9();
+function _sliced_to_array$b(arr, i) {
+    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$b();
 }
-function _unsupported_iterable_to_array$a(o, minLen) {
+function _unsupported_iterable_to_array$c(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$c(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
 }
 function ControlGroup(param) {
     var id = param.id, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, className = param.className, onChangeActiveState = param.onChangeActiveState, children = param.children, _param_width = param.width, width = _param_width === void 0 ? 'auto' : _param_width;
@@ -4011,7 +4090,7 @@ function ControlGroup(param) {
     //    <Input id={id-input}></Input>
     // </ControlGroup>
     var groupId = "".concat(id, "-control-group");
-    var _useState = _sliced_to_array$9(useState(false), 2), isActive = _useState[0], setIsActive = _useState[1];
+    var _useState = _sliced_to_array$b(useState(false), 2), isActive = _useState[0], setIsActive = _useState[1];
     var sliderState = Juce.getSliderState(id);
     var clickListener = function(event) {
         if (!isDisabled) {
@@ -4677,8 +4756,8 @@ function IndicatorLight(param) {
 // Rotary Slider UI component.
 // Connects to Juce's Slider element
 function RotarySlider(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, className = param.className, id = param.id, onChange = param.onChange, innerCircleGap = param.innerCircleGap, _param_trackWidth = param.trackWidth, trackWidth = _param_trackWidth === void 0 ? TrackWidths.small : _param_trackWidth, // trackOffset,
-    indicatorId = param.indicatorId, indicatorLineColor = param.indicatorLineColor, _param_indicatorLineGradient = param.indicatorLineGradient, indicatorLineGradient = _param_indicatorLineGradient === void 0 ? GradientStyles.unicolor : _param_indicatorLineGradient, indicatorLineActiveArea = param.indicatorLineActiveArea, _param_trackColor = param.trackColor, trackColor = _param_trackColor === void 0 ? 'var(--color-brand-900)' : _param_trackColor, trackStrokeColor = param.trackStrokeColor, _param_handleStrokeColor = param.handleStrokeColor, handleStrokeColor = _param_handleStrokeColor === void 0 ? 'var(--color-brand)' : _param_handleStrokeColor, handleFillColor = param.handleFillColor, outerGlowRadius = param.outerGlowRadius, outerGlowColors = param.outerGlowColors, blur = param.blur, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, width = param.width, labelColor = param.labelColor, _param_showLabel = param.showLabel, showLabel = _param_showLabel === void 0 ? true : _param_showLabel, inputHighlightColor = param.inputHighlightColor, handleShape = param.handleShape, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
+    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, className = param.className, id = param.id, onChange = param.onChange, innerCircleGap = param.innerCircleGap, _param_trackWidth = param.trackWidth, trackWidth = _param_trackWidth === void 0 ? TrackWidths.small : _param_trackWidth, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, randomizerObject = param.randomizerObject, resetterObject = param.resetterObject, // trackOffset,
+    indicatorId = param.indicatorId, indicatorLineColor = param.indicatorLineColor, _param_indicatorLineGradient = param.indicatorLineGradient, indicatorLineGradient = _param_indicatorLineGradient === void 0 ? GradientStyles.unicolor : _param_indicatorLineGradient, indicatorLineActiveArea = param.indicatorLineActiveArea, _param_trackColor = param.trackColor, trackColor = _param_trackColor === void 0 ? 'var(--color-brand-900)' : _param_trackColor, trackStrokeColor = param.trackStrokeColor, _param_handleStrokeColor = param.handleStrokeColor, handleStrokeColor = _param_handleStrokeColor === void 0 ? 'var(--color-brand)' : _param_handleStrokeColor, handleFillColor = param.handleFillColor, outerGlowRadius = param.outerGlowRadius, outerGlowColors = param.outerGlowColors, blur = param.blur, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, width = param.width, labelColor = param.labelColor, _param_showLabel = param.showLabel, showLabel = _param_showLabel === void 0 ? true : _param_showLabel, inputHighlightColor = param.inputHighlightColor, handleShape = param.handleShape, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
         start: 20.0,
         end: 15000.0,
         interval: 0.1,
@@ -4688,10 +4767,12 @@ function RotarySlider(param) {
     var _useSlider = useSlider({
         id: id,
         label: label,
+        resetterObject: resetterObject,
         mockProperties: mockProperties,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         onChange: onChange,
-        isRandomizable: isRandomizable
+        isRandomizable: isRandomizable,
+        randomizerObject: randomizerObject
     }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, setToDefaultState = _useSlider.setToDefaultState, setNormalisedState = _useSlider.setNormalisedState, properties = _useSlider.properties;
     // const defaultGradientColor =
     //   size === RotarySliderSizes.large
@@ -4817,7 +4898,7 @@ function _object_spread$c(target) {
     return target;
 }
 function Slider$1(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.vertical : _param_orientation, dragOrientation = param.dragOrientation, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_isStandalone = param.isStandalone, isStandalone = _param_isStandalone === void 0 ? true : _param_isStandalone, _param_isHighlighted = param.isHighlighted, isHighlighted = _param_isHighlighted === void 0 ? false : _param_isHighlighted, _param_showValue = param.showValue, showValue = _param_showValue === void 0 ? true : _param_showValue, _param_showHandle = param.showHandle, showHandle = _param_showHandle === void 0 ? true : _param_showHandle, _param_showLabel = param.showLabel, showLabel = _param_showLabel === void 0 ? true : _param_showLabel, _param_showInsetBoxShadow = param.showInsetBoxShadow, showInsetBoxShadow = _param_showInsetBoxShadow === void 0 ? true : _param_showInsetBoxShadow, className = param.className, id = param.id, width = param.width, _param_height = param.height, height = _param_height === void 0 ? '100%' : _param_height, onChange = param.onChange, outerGlowRadius = param.outerGlowRadius, outerGlowColors = param.outerGlowColors, _param_trackBorderRadius = param.trackBorderRadius, trackBorderRadius = _param_trackBorderRadius === void 0 ? 20 : _param_trackBorderRadius, blur = param.blur, style = param.style, _param_indicatorLineColor = param.indicatorLineColor, indicatorLineColor = _param_indicatorLineColor === void 0 ? 'var(--color-brand)' : _param_indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, _param_trackColor = param.trackColor, trackColor = _param_trackColor === void 0 ? 'var(--bg-lv3)' : _param_trackColor, trackStrokeColor = param.trackStrokeColor, handleFillColor = param.handleFillColor, handleStrokeColor = param.handleStrokeColor, _param_trackWidth = param.trackWidth, trackWidth = _param_trackWidth === void 0 ? TrackWidths.small : _param_trackWidth, label = param.label, labelColor = param.labelColor, _param_inputHighlightColor = param.inputHighlightColor, inputHighlightColor = _param_inputHighlightColor === void 0 ? 'var(--color-brand)' : _param_inputHighlightColor, _param_includeValueInHeight = param.includeValueInHeight, includeValueInHeight = _param_includeValueInHeight === void 0 ? true : _param_includeValueInHeight, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
+    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.vertical : _param_orientation, dragOrientation = param.dragOrientation, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, randomizerObject = param.randomizerObject, _param_isStandalone = param.isStandalone, isStandalone = _param_isStandalone === void 0 ? true : _param_isStandalone, _param_isHighlighted = param.isHighlighted, isHighlighted = _param_isHighlighted === void 0 ? false : _param_isHighlighted, _param_showValue = param.showValue, showValue = _param_showValue === void 0 ? true : _param_showValue, _param_showHandle = param.showHandle, showHandle = _param_showHandle === void 0 ? true : _param_showHandle, _param_showLabel = param.showLabel, showLabel = _param_showLabel === void 0 ? true : _param_showLabel, _param_showInsetBoxShadow = param.showInsetBoxShadow, showInsetBoxShadow = _param_showInsetBoxShadow === void 0 ? true : _param_showInsetBoxShadow, resetterObject = param.resetterObject, className = param.className, id = param.id, width = param.width, _param_height = param.height, height = _param_height === void 0 ? '100%' : _param_height, onChange = param.onChange, outerGlowRadius = param.outerGlowRadius, outerGlowColors = param.outerGlowColors, _param_trackBorderRadius = param.trackBorderRadius, trackBorderRadius = _param_trackBorderRadius === void 0 ? 20 : _param_trackBorderRadius, blur = param.blur, style = param.style, _param_indicatorLineColor = param.indicatorLineColor, indicatorLineColor = _param_indicatorLineColor === void 0 ? 'var(--color-brand)' : _param_indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, _param_trackColor = param.trackColor, trackColor = _param_trackColor === void 0 ? 'var(--bg-lv3)' : _param_trackColor, trackStrokeColor = param.trackStrokeColor, handleFillColor = param.handleFillColor, handleStrokeColor = param.handleStrokeColor, _param_trackWidth = param.trackWidth, trackWidth = _param_trackWidth === void 0 ? TrackWidths.small : _param_trackWidth, label = param.label, labelColor = param.labelColor, _param_inputHighlightColor = param.inputHighlightColor, inputHighlightColor = _param_inputHighlightColor === void 0 ? 'var(--color-brand)' : _param_inputHighlightColor, _param_includeValueInHeight = param.includeValueInHeight, includeValueInHeight = _param_includeValueInHeight === void 0 ? true : _param_includeValueInHeight, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
     mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
         start: 20.0,
         end: 15000.0,
@@ -4849,9 +4930,11 @@ function Slider$1(param) {
         id: id,
         label: label,
         mockProperties: mockProperties,
+        resetterObject: resetterObject,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         onChange: onChange,
         isRandomizable: isRandomizable,
+        randomizerObject: randomizerObject,
         orientation: orientation,
         dragOrientation: dragOrientation || defaultDragOrientation,
         sliderElementRef: sliderElementRef
@@ -4877,13 +4960,7 @@ function Slider$1(param) {
         color: labelColor,
         outerGlowRadius: outerGlowRadius,
         outerGlowColor: labelColor,
-        blur: blur,
-        padding: [
-            Label.padding.none,
-            Label.padding.none,
-            Label.padding.mediumSmall,
-            Label.padding.none
-        ]
+        blur: blur
     }) : null, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         className: 'Slider-center-marker'
     }), /*#__PURE__*/ React__default.createElement(Box, _object_spread$c({
@@ -4986,10 +5063,11 @@ Slider$1.orientation = Orientation;
 // Connects to Juce's Slider element
 function RotaryCombobox(param) {
     var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, className = param.className, id = param.id, indicatorId = param.indicatorId, _param_showLabel = param.showLabel, showLabel = _param_showLabel === void 0 ? true : _param_showLabel, _param_trackWidth = param.trackWidth, trackWidth = _param_trackWidth === void 0 ? TrackWidths.small : _param_trackWidth, width = param.width, // trackOffset,
-    innerCircleGap = param.innerCircleGap, labelColor = param.labelColor; param.inputHighlightColor; var indicatorLineColor = param.indicatorLineColor, _param_indicatorLineGradient = param.indicatorLineGradient, indicatorLineGradient = _param_indicatorLineGradient === void 0 ? GradientStyles.unicolor : _param_indicatorLineGradient, _param_trackColor = param.trackColor, trackColor = _param_trackColor === void 0 ? 'var(--color-brand-900)' : _param_trackColor, trackStrokeColor = param.trackStrokeColor, _param_handleStrokeColor = param.handleStrokeColor, handleStrokeColor = _param_handleStrokeColor === void 0 ? 'var(--color-brand)' : _param_handleStrokeColor, handleFillColor = param.handleFillColor, outerGlowRadius = param.outerGlowRadius, outerGlowColors = param.outerGlowColors, blur = param.blur, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, handleShape = param.handleShape;
+    innerCircleGap = param.innerCircleGap, labelColor = param.labelColor; param.inputHighlightColor; var indicatorLineColor = param.indicatorLineColor, _param_indicatorLineGradient = param.indicatorLineGradient, indicatorLineGradient = _param_indicatorLineGradient === void 0 ? GradientStyles.unicolor : _param_indicatorLineGradient, _param_trackColor = param.trackColor, trackColor = _param_trackColor === void 0 ? 'var(--color-brand-900)' : _param_trackColor, trackStrokeColor = param.trackStrokeColor, _param_handleStrokeColor = param.handleStrokeColor, handleStrokeColor = _param_handleStrokeColor === void 0 ? 'var(--color-brand)' : _param_handleStrokeColor, handleFillColor = param.handleFillColor, outerGlowRadius = param.outerGlowRadius, outerGlowColors = param.outerGlowColors; param.isRandomizable; var randomizerObject = param.randomizerObject; param.resetterObject; var blur = param.blur, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, handleShape = param.handleShape;
     var _rotarySliderSizeMap_size, _rotarySliderSizeMap_size1;
     var _useCombobox = useCombobox({
-        id: id
+        id: id,
+        randomizerObject: randomizerObject
     }), selectedIndex = _useCombobox.selectedIndex, choices = _useCombobox.choices, selectedIndexLabel = _useCombobox.selectedIndexLabel, onDoubleClick = _useCombobox.onDoubleClick, bindDrag = _useCombobox.bindDrag, properties = _useCombobox.properties;
     return /*#__PURE__*/ React__default.createElement(ControlGroup, {
         id: id,
@@ -5066,7 +5144,7 @@ var SliderVariants = /*#__PURE__*/ function(SliderVariants) {
 }({});
 function Slider(param) {
     var _param_variant = param.variant, variant = _param_variant === void 0 ? "rotary" : _param_variant, _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, _param_inputHighlightColor = param.inputHighlightColor, inputHighlightColor = _param_inputHighlightColor === void 0 ? 'var(--color-brand)' : _param_inputHighlightColor, label = param.label, labelColor = param.labelColor, showLabel = param.showLabel, indicatorLineColor = param.indicatorLineColor, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, handleStrokeColor = param.handleStrokeColor, handleFillColor = param.handleFillColor, handleShape = param.handleShape, showHandle = param.showHandle, showInsetBoxShadow = param.showInsetBoxShadow, indicatorLineGradient = param.indicatorLineGradient, outerGlowRadius = param.outerGlowRadius, outerGlowColors = param.outerGlowColors, blur = param.blur, trackWidth = param.trackWidth, trackBorderRadius = param.trackBorderRadius, className = param.className, id = param.id, width = param.width, height = param.height, onChange = param.onChange, indicatorId = param.indicatorId, innerCircleGap = param.innerCircleGap, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, _param_mockInitialNormalisedValue = param.// trackOffset = 0,
-    mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, showValue = param.showValue, includeValueInHeight = param.includeValueInHeight, isRandomizable = param.isRandomizable, rotationBehavior = param.rotationBehavior, orientation = param.orientation, dragOrientation = param.dragOrientation, isStandalone = param.isStandalone, isHighlighted = param.isHighlighted; param.mockProperties; param.style;
+    mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, showValue = param.showValue, includeValueInHeight = param.includeValueInHeight, isRandomizable = param.isRandomizable, randomizerObject = param.randomizerObject, resetterObject = param.resetterObject, rotationBehavior = param.rotationBehavior, orientation = param.orientation, dragOrientation = param.dragOrientation, isStandalone = param.isStandalone, isHighlighted = param.isHighlighted; param.mockProperties; param.style;
     return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, variant === "rotary" ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
         polarity: polarity,
         label: label,
@@ -5081,6 +5159,7 @@ function Slider(param) {
         blur: blur,
         inputHighlightColor: inputHighlightColor,
         showLabel: showLabel,
+        resetterObject: resetterObject,
         // trackOffset={trackOffset}
         handleShape: handleShape,
         trackColor: trackColor,
@@ -5094,6 +5173,7 @@ function Slider(param) {
         size: size,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         isRandomizable: isRandomizable,
+        randomizerObject: randomizerObject,
         rotationBehavior: rotationBehavior
     }) : null, variant === "rotaryCombobox" ? /*#__PURE__*/ React__default.createElement(RotaryCombobox, {
         polarity: polarity,
@@ -5108,6 +5188,7 @@ function Slider(param) {
         inputHighlightColor: inputHighlightColor,
         outerGlowRadius: outerGlowRadius,
         outerGlowColors: outerGlowColors,
+        resetterObject: resetterObject,
         blur: blur,
         // trackOffset={trackOffset}
         handleShape: handleShape,
@@ -5121,6 +5202,7 @@ function Slider(param) {
         onChange: onChange,
         size: size,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
+        randomizerObject: randomizerObject,
         isRandomizable: isRandomizable,
         rotationBehavior: rotationBehavior
     }) : null, variant === "bar" ? /*#__PURE__*/ React__default.createElement(Slider$1, {
@@ -5134,6 +5216,7 @@ function Slider(param) {
         handleFillColor: handleFillColor,
         handleStrokeColor: handleStrokeColor,
         showInsetBoxShadow: showInsetBoxShadow,
+        resetterObject: resetterObject,
         className: className,
         showHandle: showHandle,
         showLabel: showLabel,
@@ -5154,6 +5237,7 @@ function Slider(param) {
         isStandalone: isStandalone,
         isHighlighted: isHighlighted,
         includeValueInHeight: includeValueInHeight,
+        randomizerObject: randomizerObject,
         blur: blur
     }) : null);
 }
@@ -5994,12 +6078,12 @@ styleInject(css_248z$5);
 var css_248z$4 = ".PresetManagerContainer {\n  width: 100%;\n  height: 100%;\n  background-color: var(--bg-lv1);\n  color: var(--color-text);\n}\n\n.PresetManagerButton {\n  width: 100%;\n  height: 100%;\n  max-width: 300px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n  cursor: pointer;\n  text-align: center;\n  font-family: var(--font-leagueSpartan);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 225px;\n  display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25;\n  /* position: relative; */\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n  }\n  /* &.isDirty {\n    &::after {\n      content: '*';\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n    }\n  } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n  content: '*';\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  right: -0.75rem;\n  top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n  position: relative;\n  width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n  background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n  position: absolute;\n  font-family: var(--font-leagueSpartan);\n  right: 0px;\n  left: 0px;\n  width: 100%;\n  max-width: 400px !important;\n  color: var(--color-text);\n  background: var(--bg-lv5);\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n  outline: none;\n}\n\n.PresetManagerListItem {\n  cursor: pointer;\n  background: var(--color-gray-800);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.PresetManagerListItem:hover,\n.PresetManagerListItem.isSelected {\n  background: var(--bg-selected);\n}\n\n.PresetManagerListItemText {\n  display: inline-block;\n  vertical-align: middle;\n  height: 1.5rem;\n  line-height: 1.75;\n}\n";
 styleInject(css_248z$4);
 
-function _array_like_to_array$9(arr, len) {
+function _array_like_to_array$b(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$8(arr) {
+function _array_with_holes$a(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
@@ -6031,7 +6115,7 @@ function _async_to_generator$3(fn) {
         });
     };
 }
-function _iterable_to_array_limit$8(arr, i) {
+function _iterable_to_array_limit$a(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -6055,23 +6139,23 @@ function _iterable_to_array_limit$8(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$8() {
+function _non_iterable_rest$a() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_destructuring_empty(o) {
     if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
     return o;
 }
-function _sliced_to_array$8(arr, i) {
-    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$8();
+function _sliced_to_array$a(arr, i) {
+    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$a();
 }
-function _unsupported_iterable_to_array$9(o, minLen) {
+function _unsupported_iterable_to_array$b(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
 }
 function _ts_generator$3(thisArg, body) {
     var f, y, t, _ = {
@@ -6166,16 +6250,16 @@ function _ts_generator$3(thisArg, body) {
 }
 function PresetManager(param) {
     _object_destructuring_empty(param);
-    var _useState = _sliced_to_array$8(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
-    var _useState1 = _sliced_to_array$8(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
+    var _useState = _sliced_to_array$a(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
+    var _useState1 = _sliced_to_array$a(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
     var savePresetFunc = Juce.getNativeFunction('savePreset');
     var loadPresetFunc = Juce.getNativeFunction('loadPreset');
     var getAllPresetsFunc = Juce.getNativeFunction('getAllPresets');
     var getCurrentPresetFunc = Juce.getNativeFunction('getCurrentPreset');
     var isDirtyFunc = Juce.getNativeFunction('canUndo');
-    var _useState2 = _sliced_to_array$8(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
+    var _useState2 = _sliced_to_array$a(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
     var isLocalhost = window.location.hostname === 'localhost';
-    var _useState3 = _sliced_to_array$8(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
+    var _useState3 = _sliced_to_array$a(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
     useEffect(function() {
         if (!isLocalhost) {
             var _window___JUCE___backend, _window___JUCE__, _window;
@@ -6454,12 +6538,12 @@ function PresetManager(param) {
     }))))));
 }
 
-function _array_like_to_array$8(arr, len) {
+function _array_like_to_array$a(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$7(arr) {
+function _array_with_holes$9(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
@@ -6504,7 +6588,7 @@ function _define_property$7(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$7(arr, i) {
+function _iterable_to_array_limit$9(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -6528,7 +6612,7 @@ function _iterable_to_array_limit$7(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$7() {
+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$7(target) {
@@ -6546,16 +6630,16 @@ function _object_spread$7(target) {
     }
     return target;
 }
-function _sliced_to_array$7(arr, i) {
-    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$7();
+function _sliced_to_array$9(arr, i) {
+    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$9();
 }
-function _unsupported_iterable_to_array$8(o, minLen) {
+function _unsupported_iterable_to_array$a(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
 }
 function _ts_generator$2(thisArg, body) {
     var f, y, t, _ = {
@@ -6740,8 +6824,8 @@ function ModuleHeader(param) {
     }, [
         window
     ]);
-    var _useState = _sliced_to_array$7(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
-    var _useState1 = _sliced_to_array$7(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
+    var _useState = _sliced_to_array$9(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
+    var _useState1 = _sliced_to_array$9(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
     var handleUndo = function() {
         undo();
     };
@@ -6971,14 +7055,16 @@ function ModuleHeader(param) {
             Button.padding.small,
             Button.padding.large
         ],
-        onClick: toggleAdvancedView
+        onClick: toggleAdvancedView,
+        backgroundColor: "var(--bg-lv1)",
+        highlightBackground: "var(--bg-lv2)"
     }, /*#__PURE__*/ React__default.createElement(Label, {
         fontSize: Label.fontSize.large,
         className: "advancedLayoutButtonLabel"
     }, "Advanced")))));
 }
 
-var css_248z$3 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  position: relative;\n}\n\n.ModMatrixBodyCell,\n.ModMatrixComboboxCell {\n  background: #252429;\n}\n\n.ModMatrixBodyCell.isDisabled,\n.ModMatrixDeleteCell.isDisabled {\n  opacity: 0.4;\n}\n\n.ModMatrixCell.isDisabled {\n  color: var(--color-gray-400);\n  cursor: default;\n}\n\n/* .isActive .ModMatrixCell {\n  background: var(--color-gray-600);\n} */\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  left: 0px;\n  /* height: 150px; */\n  /* width: 100%; */\n  color: var(--color-text);\n  /* -ms-overflow-style: none; */\n  scrollbar-width: thin;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems::-webkit-scrollbar {\n  width: 10px;\n}\n\n.ModMatrixComboboxItem {\n  display: flex;\n  align-items: center;\n  background: var(--bg-lv4);\n  padding: 0 var(--spacing-md);\n  width: 100%;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active {\n  background: var(--bg-lv5);\n}\n\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n\n.ModMatrixInput {\n  text-align: center;\n  margin-top: 3px;\n}\n";
+var css_248z$3 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  position: relative;\n}\n\n.ModMatrixBodyCell,\n.ModMatrixComboboxCell {\n  background: var(--bg-lv4);\n}\n\n.ModMatrixBodyCell.isDisabled,\n.ModMatrixDeleteCell.isDisabled {\n  opacity: 0.4;\n}\n\n.ModMatrixCell.isDisabled {\n  color: var(--color-gray-400);\n  cursor: default;\n}\n\n/* .isActive .ModMatrixCell {\n  background: var(--color-gray-600);\n} */\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  left: 0px;\n  /* height: 150px; */\n  /* width: 100%; */\n  color: var(--color-text);\n  /* -ms-overflow-style: none; */\n  scrollbar-width: thin;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems::-webkit-scrollbar {\n  width: 10px;\n}\n\n.ModMatrixComboboxItem {\n  display: flex;\n  align-items: center;\n  background: var(--bg-lv4);\n  padding: 0 var(--spacing-md);\n  width: 100%;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active {\n  background: var(--bg-lv5);\n}\n\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n\n.ModMatrixInput {\n  text-align: center;\n  margin-top: 3px;\n}\n";
 styleInject(css_248z$3);
 
 var targetColors = [
@@ -7093,6 +7179,14 @@ function ModMatrixComboboxCell(param) {
     }));
 }
 
+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$8(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _define_property$5(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -7106,6 +7200,33 @@ function _define_property$5(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array_limit$8(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$8() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread$5(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -7121,15 +7242,29 @@ function _object_spread$5(target) {
     }
     return target;
 }
+function _sliced_to_array$8(arr, i) {
+    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$8();
+}
+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 Toggle(param) {
-    var id = param.id, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, onChange = param.onChange, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.small : _param_size, label = param.label, labelColor = param.labelColor, outerGlowRadius = param.outerGlowRadius, displayValInHeader = param.displayValInHeader, blur = param.blur, width = param.width, color = param.color, style = param.style;
-    var _buttonSizeMap_size, _buttonSizeMap_size1, _properties_choices;
+    var id = param.id, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? ButtonSize.medium : _param_width, _param_height = param.height, height = _param_height === void 0 ? ButtonSize.medium : _param_height, label = param.label, labelColor = param.labelColor, outerGlowRadius = param.outerGlowRadius, displayValInHeader = param.displayValInHeader, blur = param.blur, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_highlightColor = param.highlightColor, highlightColor = _param_highlightColor === void 0 ? 'var(--color-text)' : _param_highlightColor, _param_highlightBackgroundColor = param.highlightBackgroundColor, highlightBackgroundColor = _param_highlightBackgroundColor === void 0 ? 'var(--bg-lv6)' : _param_highlightBackgroundColor, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'var(--bg-lv5)' : _param_backgroundColor, style = param.style;
+    var _properties_choices;
+    var _useState = _sliced_to_array$8(useState(false), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
     var _useCombobox = useCombobox({
         id: id,
         displayValInHeader: displayValInHeader,
         isDisabled: isDisabled,
         onChange: onChange
     }), selectedIndex = _useCombobox.selectedIndex, handleChange = _useCombobox.handleChange, properties = _useCombobox.properties, onMouseEnter = _useCombobox.onMouseEnter;
+    var widthValue = (buttonWidthMap === null || buttonWidthMap === void 0 ? void 0 : buttonWidthMap[width]) ? buttonWidthMap === null || buttonWidthMap === void 0 ? void 0 : buttonWidthMap[width] : width;
+    var heightValue = (buttonHeightMap === null || buttonHeightMap === void 0 ? void 0 : buttonHeightMap[height]) ? buttonHeightMap === null || buttonHeightMap === void 0 ? void 0 : buttonHeightMap[height] : height;
     return /*#__PURE__*/ React__default.createElement(Box, {
         gap: Box.gap.mediumSmall,
         flexDirection: Box.flexDirection.column
@@ -7146,13 +7281,20 @@ function Toggle(param) {
         alignItems: Box.alignItems.flexStart,
         flexDirection: Box.flexDirection.column,
         style: _object_spread$5({
-            color: color,
+            color: componentIsHovered ? highlightColor : color,
+            backgroundColor: componentIsHovered ? highlightBackgroundColor : backgroundColor,
             cursor: isDisabled ? 'default' : 'pointer',
             pointerEvents: 'all'
         }, style),
-        width: width !== null && width !== void 0 ? width : "".concat((_buttonSizeMap_size = buttonSizeMap[size]) === null || _buttonSizeMap_size === void 0 ? void 0 : _buttonSizeMap_size.width, "px"),
-        height: "".concat((_buttonSizeMap_size1 = buttonSizeMap[size]) === null || _buttonSizeMap_size1 === void 0 ? void 0 : _buttonSizeMap_size1.height, "px"),
-        onMouseEnter: onMouseEnter,
+        width: widthValue,
+        height: heightValue,
+        onMouseEnter: function() {
+            onMouseEnter();
+            !isDisabled && setComponentIsHovered(true);
+        },
+        onMouseLeave: function() {
+            return !isDisabled && setComponentIsHovered(false);
+        },
         onClick: function(val) {
             // Update the toggle state
             var newIndex = Math.abs(selectedIndex - 1);
@@ -7172,7 +7314,8 @@ function Toggle(param) {
         }
     }, (properties === null || properties === void 0 ? void 0 : (_properties_choices = properties.choices) === null || _properties_choices === void 0 ? void 0 : _properties_choices[selectedIndex]) || '0'))));
 }
-Toggle.size = ButtonSize;
+Toggle.width = ButtonSize;
+Toggle.height = ButtonSize;
 
 // import * as Juce from 'juce-framework-frontend';
 function ModMatrixToggleCell(param) {
@@ -7195,8 +7338,9 @@ function ModMatrixToggleCell(param) {
         id: modifier,
         onChange: handleChange,
         isDisabled: isDisabled,
-        size: Toggle.size.large,
-        width: '100%'
+        width: Toggle.width.full,
+        height: Toggle.height.large,
+        backgroundColor: "transparent"
     }));
 }
 
@@ -7253,12 +7397,12 @@ function SingleBarViz(param) {
 }
 SingleBarViz.polarity = Polarity;
 
-function _array_like_to_array$7(arr, len) {
+function _array_like_to_array$8(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$6(arr) {
+function _array_with_holes$7(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$3(obj, key, value) {
@@ -7274,7 +7418,7 @@ function _define_property$3(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$6(arr, i) {
+function _iterable_to_array_limit$7(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -7298,7 +7442,7 @@ function _iterable_to_array_limit$6(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$6() {
+function _non_iterable_rest$7() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$3(target) {
@@ -7335,22 +7479,22 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-function _sliced_to_array$6(arr, i) {
-    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$6();
+function _sliced_to_array$7(arr, i) {
+    return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$7();
 }
-function _unsupported_iterable_to_array$7(o, minLen) {
+function _unsupported_iterable_to_array$8(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
 }
 function ModMatrixCell(param) {
     var modifier = param.modifier, rowId = param.rowId, isDisabled = param.isDisabled, color = param.color, style = param.style;
     var _SingleBarViz_polarity;
     var _useGlobalContext = useGlobalContext(), setDefaultParameter = _useGlobalContext.setDefaultParameter, updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, modSlotTargets = _useGlobalContext.globalState.modSlotTargets;
-    var _useState = _sliced_to_array$6(useState(false), 2); _useState[0]; var setIsActive = _useState[1];
+    var _useState = _sliced_to_array$7(useState(false), 2); _useState[0]; var setIsActive = _useState[1];
     var _useSlider = useSlider({
         id: modifier,
         rowId: rowId,
@@ -7534,13 +7678,13 @@ function ModMatrixRow(param) {
     }) : null));
 }
 
-function _array_like_to_array$6(arr, len) {
+function _array_like_to_array$7(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
 function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$6(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$7(arr);
 }
 function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -7606,15 +7750,15 @@ function _object_spread$2(target) {
     return target;
 }
 function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$6(arr) || _non_iterable_spread();
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array$7(arr) || _non_iterable_spread();
 }
-function _unsupported_iterable_to_array$6(o, minLen) {
+function _unsupported_iterable_to_array$7(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$7(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
 }
 function _ts_generator$1(thisArg, body) {
     var f, y, t, _ = {
@@ -7907,15 +8051,15 @@ function createBase64WorkerFactory$3(base64, sourcemapArg, enableUnicodeArg) {
 var WorkerFactory$1 = /*#__PURE__*/createBase64WorkerFactory$3('Lyogcm9sbHVwLXBsdWdpbi13ZWItd29ya2VyLWxvYWRlciAqLwooZnVuY3Rpb24gKCkgewogICd1c2Ugc3RyaWN0JzsKCiAgZnVuY3Rpb24gX2FycmF5X2xpa2VfdG9fYXJyYXkoYXJyLCBsZW4pIHsKICAgICAgaWYgKGxlbiA9PSBudWxsIHx8IGxlbiA+IGFyci5sZW5ndGgpIGxlbiA9IGFyci5sZW5ndGg7CiAgICAgIGZvcih2YXIgaSA9IDAsIGFycjIgPSBuZXcgQXJyYXkobGVuKTsgaSA8IGxlbjsgaSsrKWFycjJbaV0gPSBhcnJbaV07CiAgICAgIHJldHVybiBhcnIyOwogIH0KICBmdW5jdGlvbiBfYXJyYXlfd2l0aG91dF9ob2xlcyhhcnIpIHsKICAgICAgaWYgKEFycmF5LmlzQXJyYXkoYXJyKSkgcmV0dXJuIF9hcnJheV9saWtlX3RvX2FycmF5KGFycik7CiAgfQogIGZ1bmN0aW9uIF9pdGVyYWJsZV90b19hcnJheShpdGVyKSB7CiAgICAgIGlmICh0eXBlb2YgU3ltYm9sICE9PSAidW5kZWZpbmVkIiAmJiBpdGVyW1N5bWJvbC5pdGVyYXRvcl0gIT0gbnVsbCB8fCBpdGVyWyJAQGl0ZXJhdG9yIl0gIT0gbnVsbCkgcmV0dXJuIEFycmF5LmZyb20oaXRlcik7CiAgfQogIGZ1bmN0aW9uIF9ub25faXRlcmFibGVfc3ByZWFkKCkgewogICAgICB0aHJvdyBuZXcgVHlwZUVycm9yKCJJbnZhbGlkIGF0dGVtcHQgdG8gc3ByZWFkIG5vbi1pdGVyYWJsZSBpbnN0YW5jZS5cXG5JbiBvcmRlciB0byBiZSBpdGVyYWJsZSwgbm9uLWFycmF5IG9iamVjdHMgbXVzdCBoYXZlIGEgW1N5bWJvbC5pdGVyYXRvcl0oKSBtZXRob2QuIik7CiAgfQogIGZ1bmN0aW9uIF90b19jb25zdW1hYmxlX2FycmF5KGFycikgewogICAgICByZXR1cm4gX2FycmF5X3dpdGhvdXRfaG9sZXMoYXJyKSB8fCBfaXRlcmFibGVfdG9fYXJyYXkoYXJyKSB8fCBfdW5zdXBwb3J0ZWRfaXRlcmFibGVfdG9fYXJyYXkoYXJyKSB8fCBfbm9uX2l0ZXJhYmxlX3NwcmVhZCgpOwogIH0KICBmdW5jdGlvbiBfdW5zdXBwb3J0ZWRfaXRlcmFibGVfdG9fYXJyYXkobywgbWluTGVuKSB7CiAgICAgIGlmICghbykgcmV0dXJuOwogICAgICBpZiAodHlwZW9mIG8gPT09ICJzdHJpbmciKSByZXR1cm4gX2FycmF5X2xpa2VfdG9fYXJyYXkobywgbWluTGVuKTsKICAgICAgdmFyIG4gPSBPYmplY3QucHJvdG90eXBlLnRvU3RyaW5nLmNhbGwobykuc2xpY2UoOCwgLTEpOwogICAgICBpZiAobiA9PT0gIk9iamVjdCIgJiYgby5jb25zdHJ1Y3RvcikgbiA9IG8uY29uc3RydWN0b3IubmFtZTsKICAgICAgaWYgKG4gPT09ICJNYXAiIHx8IG4gPT09ICJTZXQiKSByZXR1cm4gQXJyYXkuZnJvbShuKTsKICAgICAgaWYgKG4gPT09ICJBcmd1bWVudHMiIHx8IC9eKD86VWl8SSludCg/Ojh8MTZ8MzIpKD86Q2xhbXBlZCk/QXJyYXkkLy50ZXN0KG4pKSByZXR1cm4gX2FycmF5X2xpa2VfdG9fYXJyYXkobywgbWluTGVuKTsKICB9CiAgaW1wb3J0U2NyaXB0cygnaHR0cHM6Ly9kM2pzLm9yZy9kMy52Ny5taW4uanMnKTsKICB2YXIgTEZPRG90Q2FudmFzOwogIHZhciBidWZmZXJBcnJheSA9IFtdOwogIHZhciB2aXNpYmxlV2F2ZWZvcm1zID0gW107CiAgdmFyIGN1cnJlbnRXYXZlZm9ybSA9IFtdOwogIHZhciBhcnJheUxlbmd0aCA9IDEwMjQ7CiAgZnVuY3Rpb24gbm9ybWFsaXplVG9aZXJvT25lKHZhbHVlLCBtaW4sIG1heCkgewogICAgICByZXR1cm4gKHZhbHVlIC0gbWluKSAvIChtYXggLSBtaW4pOwogIH0KICB2YXIgcmVkdWNlUmVzb2x1dGlvblRvID0gZnVuY3Rpb24oYXJyLCBuKSB7CiAgICAgIHZhciBuZXdSZXMgPSBNYXRoLmZsb29yKChhcnIgPT09IG51bGwgfHwgYXJyID09PSB2b2lkIDAgPyB2b2lkIDAgOiBhcnIubGVuZ3RoKSAvIG4pOwogICAgICByZXR1cm4gYXJyID09PSBudWxsIHx8IGFyciA9PT0gdm9pZCAwID8gdm9pZCAwIDogYXJyLmZpbHRlcihmdW5jdGlvbihfLCBpbmRleCkgewogICAgICAgICAgcmV0dXJuIGluZGV4ICUgTWF0aC5mbG9vcigoYXJyID09PSBudWxsIHx8IGFyciA9PT0gdm9pZCAwID8gdm9pZCAwIDogYXJyLmxlbmd0aCkgLyBuZXdSZXMpID09PSAwOwogICAgICB9KTsKICB9OwogIHNlbGYub25tZXNzYWdlID0gZnVuY3Rpb24oZXZlbnQpIHsKICAgICAgdmFyIGRhdGEgPSBldmVudC5kYXRhOwogICAgICB2YXIgbGluZVdpZHRoID0gMjsKICAgICAgdmFyIG51bUN5Y2xlcyA9IE1hdGgubWluKE1hdGguZmxvb3IoTWF0aC5tYXgoZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLmh6VmFsdWVGb3JTeW5jVHlwZSwgMSkpLCA1MCk7CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICdpbml0JykgewogICAgICAgICAgTEZPRG90Q2FudmFzID0gZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLmNhbnZhczsKICAgICAgICAgIGJ1ZmZlckFycmF5ID0gW107CiAgICAgICAgICBjdXJyZW50V2F2ZWZvcm0gPSBBcnJheS5mcm9tKHsKICAgICAgICAgICAgICBsZW5ndGg6IE1hdGguZmxvb3IoYXJyYXlMZW5ndGggLSB2aXNpYmxlV2F2ZWZvcm1zLmxlbmd0aCkKICAgICAgICAgIH0sIGZ1bmN0aW9uKGl0ZW0sIGkpIHsKICAgICAgICAgICAgICByZXR1cm4gewogICAgICAgICAgICAgICAgICB4OiBpLAogICAgICAgICAgICAgICAgICB5OiAwCiAgICAgICAgICAgICAgfTsKICAgICAgICAgIH0pOwogICAgICB9CiAgICAgIGlmIChkYXRhLnR5cGUgPT09ICduZXdXYXZlJykgewogICAgICAgICAgdmFyIGxvd2VyUmVzV2F2ZWZvcm0gPSByZWR1Y2VSZXNvbHV0aW9uVG8oZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLndhdmVGb3JtLCBudW1DeWNsZXMpOwogICAgICAgICAgLy8gVE9ETzogcmUtZW5hYmxlIHJhbmRvbQogICAgICAgICAgLy8gbGV0IG5ld1dhdmU6IEFycmF5PFhZVmFsdWU+ID0gW107CiAgICAgICAgICAvLyBUT0RPOiByZS1lbmFibGUgcmFuZG9tCiAgICAgICAgICAvLyBpZiAobG93ZXJSZXNXYXZlZm9ybS5sZW5ndGggPiAwKSB7CiAgICAgICAgICAvLyAgIG5ld1dhdmUgPSBsb3dlclJlc1dhdmVmb3JtLm1hcCgoaXRlbTogWFlWYWx1ZSwgaTogbnVtYmVyKSA9PiAoewogICAgICAgICAgLy8gICAgIHg6IGl0ZW0ueCwKICAgICAgICAgIC8vICAgICB5OiBpdGVtLnkgKiAoMSAtIGRhdGE/LnJhbmRBbW91bnRWYWx1ZSksCiAgICAgICAgICAvLyAgIH0pKTsKICAgICAgICAgIC8vIH0KICAgICAgICAgIC8vIHJhbmRBbW91bnRWYWwgPSBkYXRhPy5yYW5kQW1vdW50VmFsdWU7CiAgICAgICAgICB2YXIgZmlsbGVySXRlbXMgPSBBcnJheS5mcm9tKHsKICAgICAgICAgICAgICBsZW5ndGg6IE1hdGguZmxvb3IoTWF0aC5hYnMoTWF0aC5tYXgobnVtQ3ljbGVzIC0gKGJ1ZmZlckFycmF5ID09PSBudWxsIHx8IGJ1ZmZlckFycmF5ID09PSB2b2lkIDAgPyB2b2lkIDAgOiBidWZmZXJBcnJheS5sZW5ndGgpIC0gMSwgMCkpKQogICAgICAgICAgfSwgZnVuY3Rpb24oKSB7CiAgICAgICAgICAgICAgcmV0dXJuIEFycmF5LmZyb20oewogICAgICAgICAgICAgICAgICBsZW5ndGg6IE1hdGguZmxvb3IobG93ZXJSZXNXYXZlZm9ybS5sZW5ndGgpCiAgICAgICAgICAgICAgfSwgZnVuY3Rpb24oaXRlbSwgaSkgewogICAgICAgICAgICAgICAgICByZXR1cm4gewogICAgICAgICAgICAgICAgICAgICAgeDogaSwKICAgICAgICAgICAgICAgICAgICAgIHk6IDAKICAgICAgICAgICAgICAgICAgfTsKICAgICAgICAgICAgICB9KTsKICAgICAgICAgIH0pOwogICAgICAgICAgdmFyIG5ld0J1ZmZlckFycmF5ID0gKGJ1ZmZlckFycmF5ID09PSBudWxsIHx8IGJ1ZmZlckFycmF5ID09PSB2b2lkIDAgPyB2b2lkIDAgOiBidWZmZXJBcnJheS5sZW5ndGgpID49IG51bUN5Y2xlcyA/IF90b19jb25zdW1hYmxlX2FycmF5KGJ1ZmZlckFycmF5LnNsaWNlKC1NYXRoLm1heChNYXRoLmZsb29yKG51bUN5Y2xlcyksIDEpKSkuY29uY2F0KFsKICAgICAgICAgICAgICBsb3dlclJlc1dhdmVmb3JtCiAgICAgICAgICBdLCBfdG9fY29uc3VtYWJsZV9hcnJheShmaWxsZXJJdGVtcykpIDogX3RvX2NvbnN1bWFibGVfYXJyYXkoZmlsbGVySXRlbXMpLmNvbmNhdChfdG9fY29uc3VtYWJsZV9hcnJheShidWZmZXJBcnJheSksIFsKICAgICAgICAgICAgICBsb3dlclJlc1dhdmVmb3JtCiAgICAgICAgICBdKTsKICAgICAgICAgIGJ1ZmZlckFycmF5ID0gbmV3QnVmZmVyQXJyYXk7CiAgICAgIH0KICAgICAgaWYgKGRhdGEudHlwZSA9PT0gJ2N5Y2xlVXBkYXRlJykgewogICAgICAgICAgdmFyIF9idWZmZXJBcnJheV87CiAgICAgICAgICB2YXIgdXBkYXRlZFZpc2libGVXYXZlRm9ybXMgPSBidWZmZXJBcnJheS5sZW5ndGggPiAwID8gX3RvX2NvbnN1bWFibGVfYXJyYXkoKF9idWZmZXJBcnJheV8gPSBidWZmZXJBcnJheVswXSkgPT09IG51bGwgfHwgX2J1ZmZlckFycmF5XyA9PT0gdm9pZCAwID8gdm9pZCAwIDogX2J1ZmZlckFycmF5Xy5zbGljZShNYXRoLm1heChNYXRoLmZsb29yKGJ1ZmZlckFycmF5WzBdLmxlbmd0aCAqIG5vcm1hbGl6ZVRvWmVyb09uZShkYXRhLnJhbXBWYWx1ZSwgMCwgMTAyMykpLCAxKSkpLmNvbmNhdChfdG9fY29uc3VtYWJsZV9hcnJheShidWZmZXJBcnJheS5zbGljZSgxKS5mbGF0KCkpLCBfdG9fY29uc3VtYWJsZV9hcnJheShjdXJyZW50V2F2ZWZvcm0gPT09IG51bGwgfHwgY3VycmVudFdhdmVmb3JtID09PSB2b2lkIDAgPyB2b2lkIDAgOiBjdXJyZW50V2F2ZWZvcm0uc2xpY2UoMCwgTWF0aC5mbG9vcihjdXJyZW50V2F2ZWZvcm0ubGVuZ3RoICogbm9ybWFsaXplVG9aZXJvT25lKGRhdGEucmFtcFZhbHVlLCAwLCAxMDIzKSkpKSkgOiBfdG9fY29uc3VtYWJsZV9hcnJheShjdXJyZW50V2F2ZWZvcm0pOwogICAgICAgICAgLy8gY29uc29sZS5sb2coZGF0YT8ucmFtcFZhbHVlLCAnZGF0YT8ucmFtcFZhbHVlJyk7CiAgICAgICAgICB2YXIgeHlWYWx1ZXMgPSB1cGRhdGVkVmlzaWJsZVdhdmVGb3JtcyA9PT0gbnVsbCB8fCB1cGRhdGVkVmlzaWJsZVdhdmVGb3JtcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogdXBkYXRlZFZpc2libGVXYXZlRm9ybXMubWFwKGZ1bmN0aW9uKGl0ZW0sIGkpIHsKICAgICAgICAgICAgICByZXR1cm4gewogICAgICAgICAgICAgICAgICB4OiBpLAogICAgICAgICAgICAgICAgICB5OiBpdGVtLnkKICAgICAgICAgICAgICB9OwogICAgICAgICAgfSk7CiAgICAgICAgICB2aXNpYmxlV2F2ZWZvcm1zID0geHlWYWx1ZXM7CiAgICAgICAgICAvLyBUT0RPOiBUcm91Ymxlc2hvb3QgcmFuZG9tCiAgICAgICAgICAvLyBpZiAoCiAgICAgICAgICAvLyAgIHVwZGF0ZWRWaXNpYmxlV2F2ZUZvcm1zWzBdPy55ICE9PSAwICYmCiAgICAgICAgICAvLyAgIHByZXZWaXNpYmxlV2F2ZUZvcm0/LnkgIT09IDAgJiYKICAgICAgICAgIC8vICAgdXBkYXRlZFZpc2libGVXYXZlRm9ybXNbMF0/LnkgIT09IHByZXZWaXNpYmxlV2F2ZUZvcm0/LnkKICAgICAgICAgIC8vICkgewogICAgICAgICAgLy8gICAvLyBjb25zb2xlLmxvZygnUFJPQkxFTScpOwogICAgICAgICAgLy8gfQogICAgICAgICAgdmFyIHhTY2FsZSA9IGQzLnNjYWxlTGluZWFyKCkuZG9tYWluKC8vIGQzLmV4dGVudCh2aXNpYmxlV2F2ZWZvcm1zLCBmdW5jdGlvbiAoZCkgewogICAgICAgICAgLy8gICByZXR1cm4gZC54OwogICAgICAgICAgLy8gfSksCiAgICAgICAgICBbCiAgICAgICAgICAgICAgMCwKICAgICAgICAgICAgICBhcnJheUxlbmd0aAogICAgICAgICAgXSkucmFuZ2UoWwogICAgICAgICAgICAgIDAsCiAgICAgICAgICAgICAgZGF0YSA9PT0gbnVsbCB8fCBkYXRhID09PSB2b2lkIDAgPyB2b2lkIDAgOiBkYXRhLndpZHRoCiAgICAgICAgICBdKTsKICAgICAgICAgIHZhciB5U2NhbGUgPSBkMy5zY2FsZUxpbmVhcigpLmRvbWFpbihbCiAgICAgICAgICAgICAgMCwKICAgICAgICAgICAgICAxCiAgICAgICAgICBdKS5yYW5nZShbCiAgICAgICAgICAgICAgKGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS5oZWlnaHQpIC0gbGluZVdpZHRoLAogICAgICAgICAgICAgIGxpbmVXaWR0aAogICAgICAgICAgXSk7CiAgICAgICAgICBpZiAoZGF0YSAhPSBudWxsKSB7CiAgICAgICAgICAgICAgdmFyIGN0eCA9IExGT0RvdENhbnZhcyA9PT0gbnVsbCB8fCBMRk9Eb3RDYW52YXMgPT09IHZvaWQgMCA/IHZvaWQgMCA6IExGT0RvdENhbnZhcy5nZXRDb250ZXh0KCcyZCcpOwogICAgICAgICAgICAgIGN0eC5jbGVhclJlY3QoMCwgMCwgZGF0YS53aWR0aCwgZGF0YS5oZWlnaHQpOwogICAgICAgICAgICAgIHZhciBsaW5lR2VuZXJhdG9yID0gZDMubGluZShmdW5jdGlvbihkKSB7CiAgICAgICAgICAgICAgICAgIHJldHVybiB4U2NhbGUoZC54KTsKICAgICAgICAgICAgICB9LCBmdW5jdGlvbihkKSB7CiAgICAgICAgICAgICAgICAgIHJldHVybiB5U2NhbGUoZC55KTsKICAgICAgICAgICAgICB9KS5jb250ZXh0KGN0eCkuY3VydmUoZDMuY3VydmVCYXNpcyk7CiAgICAgICAgICAgICAgY3R4LmJlZ2luUGF0aCgpOwogICAgICAgICAgICAgIGN0eC5saW5lV2lkdGggPSBsaW5lV2lkdGg7CiAgICAgICAgICAgICAgY3R4LnN0cm9rZVN0eWxlID0gJ3JnYigxOTgsIDQ1LCAyMjQpJzsKICAgICAgICAgICAgICBjdHgubGluZUNhcCA9ICdyb3VuZCc7CiAgICAgICAgICAgICAgY3R4LnNoYWRvd0NvbG9yID0gJ3JnYmEoMTg3LCAxMDQsIDIxNywgLjQpJzsKICAgICAgICAgICAgICBjdHguc2V0TGluZURhc2goW10pOwogICAgICAgICAgICAgIGN0eC5pbWFnZVNtb290aGluZ0VuYWJsZWQgPSBmYWxzZTsKICAgICAgICAgICAgICBjdHguc2hhZG93Qmx1ciA9IDU7CiAgICAgICAgICAgICAgbGluZUdlbmVyYXRvcih2aXNpYmxlV2F2ZWZvcm1zKTsKICAgICAgICAgICAgICBjdHguc3Ryb2tlKCk7CiAgICAgICAgICAgICAgdmFyIGxpbmVhckdyYWRpZW50ID0gY3R4LmNyZWF0ZUxpbmVhckdyYWRpZW50KDAsIDAsIDAsIGRhdGEgPT09IG51bGwgfHwgZGF0YSA9PT0gdm9pZCAwID8gdm9pZCAwIDogZGF0YS5oZWlnaHQpOwogICAgICAgICAgICAgIC8vIGxpbmVhckdyYWRpZW50LmFkZENvbG9yU3RvcCgwLCAncmdiYSgxNDcsIDQ2LCAxODQsIC4xNSknKTsKICAgICAgICAgICAgICBsaW5lYXJHcmFkaWVudC5hZGRDb2xvclN0b3AoMCwgJ3JnYmEoMTk4LCA0NSwgMjI0LCAuMDUpJyk7CiAgICAgICAgICAgICAgbGluZWFyR3JhZGllbnQuYWRkQ29sb3JTdG9wKDAuOCwgJ3JnYmEoMTk4LCA0NSwgMjI0LCAwKScpOwogICAgICAgICAgICAgIHZhciBhcmVhR2VuZXJhdG9yID0gZDMuYXJlYSgpLngoZnVuY3Rpb24oZCkgewogICAgICAgICAgICAgICAgICByZXR1cm4geFNjYWxlKGQueCk7CiAgICAgICAgICAgICAgfSkueTAoZnVuY3Rpb24oKSB7CiAgICAgICAgICAgICAgICAgIHJldHVybiB5U2NhbGUoLTEpOwogICAgICAgICAgICAgIH0pLnkxKGZ1bmN0aW9uKGQpIHsKICAgICAgICAgICAgICAgICAgcmV0dXJuIHlTY2FsZShkLnkpOwogICAgICAgICAgICAgIH0pLmNvbnRleHQoY3R4KTsKICAgICAgICAgICAgICBjdHguYmVnaW5QYXRoKCk7CiAgICAgICAgICAgICAgLy9AdHMtZXhwZWN0LWVycm9yCiAgICAgICAgICAgICAgYXJlYUdlbmVyYXRvcih2aXNpYmxlV2F2ZWZvcm1zKTsKICAgICAgICAgICAgICBjdHguZmlsbFN0eWxlID0gbGluZWFyR3JhZGllbnQ7CiAgICAgICAgICAgICAgY3R4LmZpbGwoKTsKICAgICAgICAgICAgICBMRk9Eb3RDYW52YXMgPT09IG51bGwgfHwgTEZPRG90Q2FudmFzID09PSB2b2lkIDAgPyB2b2lkIDAgOiBMRk9Eb3RDYW52YXMuZ2V0Q29udGV4dCgnMmQnKS5kcmF3SW1hZ2UoTEZPRG90Q2FudmFzLCAwLCAwKTsKICAgICAgICAgICAgICB2YXIgYml0bWFwID0gTEZPRG90Q2FudmFzID09PSBudWxsIHx8IExGT0RvdENhbnZhcyA9PT0gdm9pZCAwID8gdm9pZCAwIDogTEZPRG90Q2FudmFzLnRyYW5zZmVyVG9JbWFnZUJpdG1hcCgpOwogICAgICAgICAgICAgIHNlbGYucG9zdE1lc3NhZ2UoYml0bWFwKTsKICAgICAgICAgIH0KICAgICAgfQogIH07Cgp9KSgpOwovLyMgc291cmNlTWFwcGluZ1VSTD13b3JrZXIuanMubWFwCgo=', 'data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid29ya2VyLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyJ9');
 /* eslint-enable */
 
-function _array_like_to_array$5(arr, len) {
+function _array_like_to_array$6(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$5(arr) {
+function _array_with_holes$6(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$5(arr, i) {
+function _iterable_to_array_limit$6(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -7939,30 +8083,30 @@ function _iterable_to_array_limit$5(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$5() {
+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 _sliced_to_array$5(arr, i) {
-    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
+function _sliced_to_array$6(arr, i) {
+    return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
 }
-function _unsupported_iterable_to_array$5(o, minLen) {
+function _unsupported_iterable_to_array$6(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$6(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
 }
 function LFOVisualizer(param) {
     var id = param.id, _param_width = param.width, width = _param_width === void 0 ? 365 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 160 : _param_height;
     var isLocalhost = window.location.hostname === 'localhost';
-    var _useState = _sliced_to_array$5(useState(0), 2), syncTypeValue = _useState[0], setSyncTypeValue = _useState[1];
+    var _useState = _sliced_to_array$6(useState(0), 2), syncTypeValue = _useState[0], setSyncTypeValue = _useState[1];
     // TODO: Fix random
     // const [randValue, setRandValue] = useState(0);
-    var _useState1 = _sliced_to_array$5(useState(0), 2), hzModulatedValue = _useState1[0], setHzModulatedValue = _useState1[1];
-    var _useState2 = _sliced_to_array$5(useState(0), 2), hzHiModulatedValue = _useState2[0], setHzHiModulatedValue = _useState2[1];
-    var _useState3 = _sliced_to_array$5(useState(0), 2), syncLFOHzValue = _useState3[0], setSyncLFOHzValue = _useState3[1];
-    var _useState4 = _sliced_to_array$5(useState(null), 2), waveType = _useState4[0], setWaveType = _useState4[1];
+    var _useState1 = _sliced_to_array$6(useState(0), 2), hzModulatedValue = _useState1[0], setHzModulatedValue = _useState1[1];
+    var _useState2 = _sliced_to_array$6(useState(0), 2), hzHiModulatedValue = _useState2[0], setHzHiModulatedValue = _useState2[1];
+    var _useState3 = _sliced_to_array$6(useState(0), 2), syncLFOHzValue = _useState3[0], setSyncLFOHzValue = _useState3[1];
+    var _useState4 = _sliced_to_array$6(useState(null), 2), waveType = _useState4[0], setWaveType = _useState4[1];
     var workerRef = useRef(null);
     var cycleRef = useRef([]);
     var prevRampValue = useRef(null);
@@ -8175,15 +8319,15 @@ function LFOVisualizer(param) {
     }))))));
 }
 
-function _array_like_to_array$4(arr, len) {
+function _array_like_to_array$5(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$4(arr) {
+function _array_with_holes$5(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$4(arr, i) {
+function _iterable_to_array_limit$5(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -8207,23 +8351,23 @@ function _iterable_to_array_limit$4(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$4() {
+function _non_iterable_rest$5() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$4(arr, i) {
-    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
+function _sliced_to_array$5(arr, i) {
+    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
 }
-function _unsupported_iterable_to_array$4(o, minLen) {
+function _unsupported_iterable_to_array$5(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$4(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
 function LFOBox(param) {
     var id = param.id;
-    var _useState = _sliced_to_array$4(useState(0), 2), syncType = _useState[0], setSyncType = _useState[1];
+    var _useState = _sliced_to_array$5(useState(0), 2), syncType = _useState[0], setSyncType = _useState[1];
     useEffect(function() {
         var _Juce_getComboBoxState;
         var syncType = (_Juce_getComboBoxState = Juce.getComboBoxState("LFO".concat(id, "_SyncType"))) === null || _Juce_getComboBoxState === void 0 ? void 0 : _Juce_getComboBoxState.getChoiceIndex();
@@ -8394,15 +8538,15 @@ function LFOTab() {
     }));
 }
 
-function _array_like_to_array$3(arr, len) {
+function _array_like_to_array$4(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$4(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$3(arr, i) {
+function _iterable_to_array_limit$4(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -8426,24 +8570,24 @@ function _iterable_to_array_limit$3(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$3() {
+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 _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$4(arr, i) {
+    return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
 }
-function _unsupported_iterable_to_array$3(o, minLen) {
+function _unsupported_iterable_to_array$4(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$4(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$4(o, minLen);
 }
 function StepSequencer(param) {
-    var seqId = param.seqId, _param_numSteps = param.numSteps, numSteps = _param_numSteps === void 0 ? 16 : _param_numSteps;
+    var seqId = param.seqId, randomizerObject = param.randomizerObject, resetterObject = param.resetterObject, _param_numSteps = param.numSteps, numSteps = _param_numSteps === void 0 ? 16 : _param_numSteps;
     var isLocalhost = window.location.hostname === 'localhost';
-    var _useState = _sliced_to_array$3(useState(1), 2), currentSeqStep = _useState[0], setCurrentSeqStep = _useState[1];
+    var _useState = _sliced_to_array$4(useState(1), 2), currentSeqStep = _useState[0], setCurrentSeqStep = _useState[1];
     var steps = new Array(numSteps).fill(0);
     //     const currentElementRef = useRef<string>(null);
     //   const isMouseDownRef = useRef<boolean>(false);
@@ -8522,23 +8666,38 @@ function StepSequencer(param) {
             showInsetBoxShadow: false,
             isStandalone: false,
             orientation: Slider.orientation.vertical,
+            isRandomizable: true,
+            randomizerObject: randomizerObject,
             trackBorderRadius: 0,
             showLabel: false,
             id: "seq".concat(seqId, "_step").concat(sliderNumber),
-            isHighlighted: currentSeqStep === sliderNumber
+            isHighlighted: currentSeqStep === sliderNumber,
+            resetterObject: resetterObject
         });
     }));
 }
 
-function _array_like_to_array$2(arr, len) {
+function useReset() {
+    var onFire = function() {
+        var //@ts-expect-error
+        _window___JUCE___backend, _window___JUCE__, _window;
+        (_window = window) === null || _window === void 0 ? void 0 : (_window___JUCE__ = _window.__JUCE__) === null || _window___JUCE__ === void 0 ? void 0 : (_window___JUCE___backend = _window___JUCE__.backend) === null || _window___JUCE___backend === void 0 ? void 0 : _window___JUCE___backend.emitEvent('reset', {});
+    };
+    var observableObject = useObservable({
+        onFire: onFire
+    });
+    return observableObject;
+}
+
+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$2(arr) {
+function _array_with_holes$3(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$2(arr, i) {
+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 = [];
@@ -8562,24 +8721,24 @@ function _iterable_to_array_limit$2(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$2() {
+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$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 _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$2(o, minLen) {
+function _unsupported_iterable_to_array$3(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
+    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$2(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
 }
 // import IndicatorLight from '../../core/Indicators/IndicatorLight';
 function SeqTab$1(param) {
     var seqId = param.seqId;
-    var _useState = _sliced_to_array$2(useState(0), 2), syncType = _useState[0], setSyncType = _useState[1];
+    var _useState = _sliced_to_array$3(useState(0), 2), syncType = _useState[0], setSyncType = _useState[1];
     useEffect(function() {
         var _Juce_getSliderState;
         var syncType = (_Juce_getSliderState = Juce.getSliderState("seq".concat(seqId, "_syncType"))) === null || _Juce_getSliderState === void 0 ? void 0 : _Juce_getSliderState.scaledValue;
@@ -8590,7 +8749,9 @@ function SeqTab$1(param) {
     var handleSyncTypeChange = function(value) {
         setSyncType(value);
     };
-    var sliderWidth = '100px';
+    var sequencerRandomizableObject = useRandom();
+    var sequencerResetterObject = useReset();
+    var sliderWidth = '75px';
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
         gap: Box.gap.medium,
@@ -8620,7 +8781,9 @@ function SeqTab$1(param) {
         flex: "0 0 170px",
         height: "170px"
     }, /*#__PURE__*/ React__default.createElement(StepSequencer, {
-        seqId: seqId
+        seqId: seqId,
+        randomizerObject: sequencerRandomizableObject,
+        resetterObject: sequencerResetterObject
     })), /*#__PURE__*/ React__default.createElement(Box, {
         height: "71px",
         gap: Box.gap.medium,
@@ -8628,23 +8791,26 @@ function SeqTab$1(param) {
     }, /*#__PURE__*/ React__default.createElement(Box, {
         justifyContent: Box.justifyContent.flexStart,
         width: "218px",
-        borderWidth: [
-            '0px',
-            '1px',
-            '0px',
-            '0px'
+        // borderWidth={['0px', '1px', '0px', '0px']}
+        dividerRight: true,
+        padding: [
+            Box.padding.none,
+            Box.padding.xLarge,
+            Box.padding.none,
+            Box.padding.none
         ]
     }, /*#__PURE__*/ React__default.createElement(Combobox, {
         id: "seq".concat(seqId, "_syncType"),
         onChange: handleSyncTypeChange,
         width: 175
     })), /*#__PURE__*/ React__default.createElement(Box, {
-        padding: [
-            Box.padding.none,
-            Box.padding.none,
-            Box.padding.none,
-            Box.padding.small
-        ],
+        // padding={[
+        //   Box.padding.none,
+        //   Box.padding.none,
+        //   Box.padding.none,
+        //   Box.padding.mediumLarge,
+        // ]}
+        dividerRight: true,
         width: Box.width.auto
     }, syncType === 0 ? /*#__PURE__*/ React__default.createElement(Slider, {
         id: "seq".concat(seqId, "_hertz"),
@@ -8712,6 +8878,47 @@ function SeqTab$1(param) {
         handleStrokeColor: "var(--color-brand)",
         trackColor: "var(--color-brand-900)",
         handleShape: Slider.handleShape.rectangle
+    })), /*#__PURE__*/ React__default.createElement(Box, {
+        justifyContent: Box.justifyContent.spaceEvenly,
+        padding: [
+            Box.padding.none,
+            Box.padding.none,
+            Box.padding.none,
+            Box.padding.mediumLarge
+        ]
+    }, /*#__PURE__*/ React__default.createElement(IconButton, {
+        icon: IconButton.icon.random,
+        // width={Button.width.full}
+        id: "randomize",
+        label: "Randomize",
+        iconColor: 'var(--color-brand)',
+        highlightIconColor: 'var(--color-brand-400)',
+        onClick: function() {
+            return sequencerRandomizableObject === null || sequencerRandomizableObject === void 0 ? void 0 : sequencerRandomizableObject.fire();
+        },
+        padding: [
+            IconButton.padding.none,
+            IconButton.padding.mediumSmall,
+            IconButton.padding.none,
+            IconButton.padding.none
+        ]
+    }), /*#__PURE__*/ React__default.createElement(Button, {
+        id: "Clear",
+        text: "Clear",
+        // margin={[
+        //   IconButton.margin.none,
+        //   IconButton.margin.none,
+        //   IconButton.margin.none,
+        //   IconButton.margin.large,
+        // ]}
+        width: Button.width.auto,
+        padding: [
+            Button.padding.none,
+            Button.padding.large
+        ],
+        onClick: function() {
+            return sequencerResetterObject === null || sequencerResetterObject === void 0 ? void 0 : sequencerResetterObject.fire();
+        }
     })))));
 }
 
@@ -8898,6 +9105,71 @@ function VUMeter(param) {
     })))));
 }
 
+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;
+        }
+    } 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$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);
+}
+var FreqOut = function() {
+    var _useState = _sliced_to_array$2(useState(), 2), freqOut = _useState[0], setFreqOut = _useState[1];
+    useEffect(function() {
+        var _window___JUCE___backend, _window___JUCE__, _window;
+        //@ts-expect-error
+        (_window = window) === null || _window === void 0 ? void 0 : (_window___JUCE__ = _window.__JUCE__) === null || _window___JUCE__ === void 0 ? void 0 : (_window___JUCE___backend = _window___JUCE__.backend) === null || _window___JUCE___backend === void 0 ? void 0 : _window___JUCE___backend.addEventListener("freqOut", function(event) {
+            setFreqOut(event);
+        });
+    }, []);
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        width: "100px",
+        flexDirection: Box.flexDirection.column
+    }, /*#__PURE__*/ React__default.createElement(Label, {
+        value: "Freq Out",
+        fontSize: Heading.fontSize.xSmall
+    }), /*#__PURE__*/ React__default.createElement(Label, {
+        value: freqOut
+    }));
+};
 function InputModTab$1() {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "InputModTab",
@@ -8946,7 +9218,8 @@ function InputModTab$1() {
         size: Slider.size.large
     }), /*#__PURE__*/ React__default.createElement(Toggle, {
         id: "inputSource",
-        size: Toggle.size.large
+        width: Toggle.width.large,
+        height: Toggle.height.large
     }), /*#__PURE__*/ React__default.createElement(Combobox, {
         id: "inputLRM"
     }))), /*#__PURE__*/ React__default.createElement(Box, {
@@ -9072,7 +9345,7 @@ function InputModTab$1() {
         color: "var(--color-brand)"
     }, "Output")), /*#__PURE__*/ React__default.createElement(Box, {
         flex: '3'
-    }, /*#__PURE__*/ React__default.createElement(VUMeter, {
+    }, /*#__PURE__*/ React__default.createElement(FreqOut, null), /*#__PURE__*/ React__default.createElement(VUMeter, {
         width: 50,
         height: 125,
         id: "VUMeter"