@antimatter-audio/antimatter-ui 16.0.1 → 16.1.0

package/dist/index.js

@@ -34,7 +34,7 @@ function styleInject(css, ref) {
   }
 }
 
-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";
+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-xxs: 0.5rem;\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) {
@@ -101,6 +101,7 @@ var Width = /*#__PURE__*/ function(Width) {
     return Width;
 }({});
 var FontSizes = /*#__PURE__*/ function(FontSizes) {
+    FontSizes["xXSmall"] = "xxs";
     FontSizes["xSmall"] = "xs";
     FontSizes["small"] = "sm";
     FontSizes["medium"] = "md";
@@ -157,13 +158,13 @@ var StrokeStyle = /*#__PURE__*/ function(StrokeStyle) {
     return StrokeStyle;
 }({});
 
-function _array_like_to_array$n(arr, len) {
+function _array_like_to_array$p(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$n(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$p(arr);
 }
 function _iterable_to_array$3(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
@@ -172,15 +173,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$n(arr) || _non_iterable_spread$3();
+    return _array_without_holes$3(arr) || _iterable_to_array$3(arr) || _unsupported_iterable_to_array$p(arr) || _non_iterable_spread$3();
 }
-function _unsupported_iterable_to_array$n(o, minLen) {
+function _unsupported_iterable_to_array$p(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$n(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$p(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$n(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$p(o, minLen);
 }
 // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
 // mocks the `normalisedToScaledValue` internal method from JUCE
@@ -376,16 +377,16 @@ var getBorderValue = function(borderArray, borderDirection, returnNumericValue)
     }
 };
 
-function _array_like_to_array$m(arr, len) {
+function _array_like_to_array$o(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$l(arr) {
+function _array_with_holes$n(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$2(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$m(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$o(arr);
 }
 function _define_property$r(obj, key, value) {
     if (key in obj) {
@@ -403,7 +404,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$l(arr, i) {
+function _iterable_to_array_limit$n(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -427,7 +428,7 @@ function _iterable_to_array_limit$l(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$l() {
+function _non_iterable_rest$n() {
     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() {
@@ -467,9 +468,9 @@ function _object_spread_props$4(target, source) {
     }
     return target;
 }
-function _object_without_properties$2(source, excluded) {
+function _object_without_properties$3(source, excluded) {
     if (source == null) return {};
-    var target = _object_without_properties_loose$2(source, excluded);
+    var target = _object_without_properties_loose$3(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
         var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -482,7 +483,7 @@ function _object_without_properties$2(source, excluded) {
     }
     return target;
 }
-function _object_without_properties_loose$2(source, excluded) {
+function _object_without_properties_loose$3(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -494,19 +495,19 @@ function _object_without_properties_loose$2(source, excluded) {
     }
     return target;
 }
-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 _sliced_to_array$n(arr, i) {
+    return _array_with_holes$n(arr) || _iterable_to_array_limit$n(arr, i) || _unsupported_iterable_to_array$o(arr, i) || _non_iterable_rest$n();
 }
 function _to_consumable_array$2(arr) {
-    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$m(arr) || _non_iterable_spread$2();
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$o(arr) || _non_iterable_spread$2();
 }
-function _unsupported_iterable_to_array$m(o, minLen) {
+function _unsupported_iterable_to_array$o(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$m(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$o(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$m(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$o(o, minLen);
 }
 //This component is a hack to create beveled edges on an element.
 //This will be obsolete if/when Juce's browser supports
@@ -517,7 +518,7 @@ function BorderSVG(_param) {
         0,
         0,
         0
-    ] : _param_cornerBevel, _param_fillColor = _param.fillColor, fillColor = _param_fillColor === void 0 ? 'transparent' : _param_fillColor, borderColor = _param.borderColor, outerGlowRadius = _param.outerGlowRadius, outerGlowColors = _param.outerGlowColors, _param_highlightFillColor = _param.highlightFillColor, highlightFillColor = _param_highlightFillColor === void 0 ? 'transparent' : _param_highlightFillColor, _param_borderWidth = _param.borderWidth, borderWidth = _param_borderWidth === void 0 ? 0 : _param_borderWidth, setComponentIsHovered = _param.setComponentIsHovered, componentIsHovered = _param.componentIsHovered, style = _param.style, rest = _object_without_properties$2(_param, [
+    ] : _param_cornerBevel, _param_fillColor = _param.fillColor, fillColor = _param_fillColor === void 0 ? 'transparent' : _param_fillColor, borderColor = _param.borderColor, outerGlowRadius = _param.outerGlowRadius, outerGlowColors = _param.outerGlowColors, _param_highlightFillColor = _param.highlightFillColor, highlightFillColor = _param_highlightFillColor === void 0 ? 'transparent' : _param_highlightFillColor, _param_borderWidth = _param.borderWidth, borderWidth = _param_borderWidth === void 0 ? 0 : _param_borderWidth, setComponentIsHovered = _param.setComponentIsHovered, componentIsHovered = _param.componentIsHovered, style = _param.style, rest = _object_without_properties$3(_param, [
         "width",
         "height",
         "padding",
@@ -582,7 +583,7 @@ function BevelContainer(param) {
     }));
     if (hasBevel) {
         var _React_Children, _firstChild_props, _firstChild_props1, _firstChild_props2, _firstChild_props3;
-        var _useState = _sliced_to_array$l(useState(false), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
+        var _useState = _sliced_to_array$n(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 : [
@@ -647,12 +648,12 @@ var buttonHeightMap = {
     full: '100%'
 };
 
-function _array_like_to_array$l(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_with_holes$k(arr) {
+function _array_with_holes$m(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$q(obj, key, value) {
@@ -668,7 +669,7 @@ function _define_property$q(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$k(arr, i) {
+function _iterable_to_array_limit$m(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -692,7 +693,7 @@ function _iterable_to_array_limit$k(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$k() {
+function _non_iterable_rest$m() {
     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) {
@@ -710,9 +711,9 @@ function _object_spread$o(target) {
     }
     return target;
 }
-function _object_without_properties$1(source, excluded) {
+function _object_without_properties$2(source, excluded) {
     if (source == null) return {};
-    var target = _object_without_properties_loose$1(source, excluded);
+    var target = _object_without_properties_loose$2(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
         var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -725,7 +726,7 @@ function _object_without_properties$1(source, excluded) {
     }
     return target;
 }
-function _object_without_properties_loose$1(source, excluded) {
+function _object_without_properties_loose$2(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -737,16 +738,16 @@ function _object_without_properties_loose$1(source, excluded) {
     }
     return target;
 }
-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 _sliced_to_array$m(arr, i) {
+    return _array_with_holes$m(arr) || _iterable_to_array_limit$m(arr, i) || _unsupported_iterable_to_array$n(arr, i) || _non_iterable_rest$m();
 }
-function _unsupported_iterable_to_array$l(o, minLen) {
+function _unsupported_iterable_to_array$n(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$l(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$l(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$n(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_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 ? [
@@ -758,7 +759,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_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, [
+    ] : _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$2(_param, [
         "disabled",
         "text",
         "id",
@@ -782,13 +783,13 @@ function Button(_param) {
         "width",
         "height"
     ]);
-    var _React_useState = _sliced_to_array$k(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
+    var _React_useState = _sliced_to_array$m(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$k(useState(false), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
+    var _useState = _sliced_to_array$m(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;
@@ -983,9 +984,9 @@ function _object_spread_props$3(target, source) {
     }
     return target;
 }
-function _object_without_properties(source, excluded) {
+function _object_without_properties$1(source, excluded) {
     if (source == null) return {};
-    var target = _object_without_properties_loose(source, excluded);
+    var target = _object_without_properties_loose$1(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
         var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -998,7 +999,7 @@ function _object_without_properties(source, excluded) {
     }
     return target;
 }
-function _object_without_properties_loose(source, excluded) {
+function _object_without_properties_loose$1(source, excluded) {
     if (source == null) return {};
     var target = {};
     var sourceKeys = Object.keys(source);
@@ -1032,7 +1033,7 @@ function Box(_param) {
         0,
         0,
         0
-    ] : _param_cornerBevel, _param_gap = _param.gap, gap = _param_gap === void 0 ? Spacing.small : _param_gap, _param_tag = _param.tag, tag = _param_tag === void 0 ? LayoutTags.div : _param_tag, rest = _object_without_properties(_param, [
+    ] : _param_cornerBevel, _param_gap = _param.gap, gap = _param_gap === void 0 ? Spacing.small : _param_gap, _param_tag = _param.tag, tag = _param_tag === void 0 ? LayoutTags.div : _param_tag, rest = _object_without_properties$1(_param, [
         "className",
         "style",
         "children",
@@ -1512,6 +1513,14 @@ Icon.icon = Icons;
 Icon.padding = Spacing;
 Icon.margin = Spacing;
 
+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$l(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _define_property$n(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -1525,6 +1534,33 @@ function _define_property$n(obj, key, value) {
     }
     return obj;
 }
+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 = [];
+    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$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 _object_spread$l(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -1540,14 +1576,74 @@ function _object_spread$l(target) {
     }
     return target;
 }
-function Label(param) {
-    var value = param.value, id = param.id, className = param.className, style = param.style, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+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 _unsupported_iterable_to_array$m(o, minLen) {
+    if (!o) return;
+    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$m(o, minLen);
+}
+function Label(_param) {
+    var value = _param.value, id = _param.id, className = _param.className, style = _param.style, _param_color = _param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_highlightColor = _param.highlightColor, highlightColor = _param_highlightColor === void 0 ? 'var(--color-text)' : _param_highlightColor, _param_padding = _param.padding, padding = _param_padding === void 0 ? [
         Spacing.none
-    ] : _param_padding, uppercase = param.uppercase, outerGlowRadius = param.outerGlowRadius, outerGlowColor = param.outerGlowColor; param.blur; var children = param.children, htmlFor = param.htmlFor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.medium : _param_fontSize;
+    ] : _param_padding, uppercase = _param.uppercase, outerGlowRadius = _param.outerGlowRadius, outerGlowColor = _param.outerGlowColor; _param.blur; var children = _param.children, htmlFor = _param.htmlFor, _param_fontSize = _param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.medium : _param_fontSize, rest = _object_without_properties(_param, [
+        "value",
+        "id",
+        "className",
+        "style",
+        "color",
+        "highlightColor",
+        "padding",
+        "uppercase",
+        "outerGlowRadius",
+        "outerGlowColor",
+        "blur",
+        "children",
+        "htmlFor",
+        "fontSize"
+    ]);
+    var _useState = _sliced_to_array$l(useState(false), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
     var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React.createElement("label", {
+    return /*#__PURE__*/ React__default.createElement("label", _object_spread$l({
         id: id,
         htmlFor: htmlFor,
+        onMouseEnter: function() {
+            return setComponentIsHovered(true);
+        },
+        onMouseLeave: function() {
+            return setComponentIsHovered(false);
+        },
         style: _object_spread$l({
             fontSize: "var(--text-".concat(fontSize, ")"),
             paddingTop: "var(--p-".concat(padding[0], ")"),
@@ -1564,20 +1660,20 @@ function Label(param) {
             //     ? `0 0 ${outerGlowRadius}px ${outerGlowColor}`
             //     : 'none' + `blur(${blur}px)`
             // })`,
-            color: color
+            color: componentIsHovered ? highlightColor : color
         }, style),
         className: classnames('Label', 'select-none', className)
-    }, value !== null && value !== undefined ? value : children);
+    }, rest), value !== null && value !== undefined ? value : children);
 }
 Label.padding = Spacing;
 Label.fontSize = FontSizes;
 
-function _array_like_to_array$k(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$j(arr) {
+function _array_with_holes$k(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$m(obj, key, value) {
@@ -1593,7 +1689,7 @@ function _define_property$m(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$j(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 = [];
@@ -1617,7 +1713,7 @@ function _iterable_to_array_limit$j(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$j() {
+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$k(target) {
@@ -1635,16 +1731,16 @@ 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 _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$k(o, minLen) {
+function _unsupported_iterable_to_array$l(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$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$k(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$l(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, _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)',
@@ -1658,7 +1754,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];
+    var _useState = _sliced_to_array$k(useState(false), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
     return /*#__PURE__*/ React__default.createElement(Button, {
         id: id,
         className: "IconButton ".concat(className ? className : ''),
@@ -1694,15 +1790,15 @@ IconButton.icon = Icons;
 IconButton.padding = Spacing;
 IconButton.margin = Spacing;
 
-function _array_like_to_array$j(arr, len) {
+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$i(arr) {
+function _array_with_holes$j(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$i(arr, i) {
+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 = [];
@@ -1726,19 +1822,19 @@ function _iterable_to_array_limit$i(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$i() {
+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 _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$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$j(o, minLen) {
+function _unsupported_iterable_to_array$k(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$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$j(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$k(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 ? [
@@ -1756,9 +1852,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$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 _useState = _sliced_to_array$j(useState(null), 2), selectedIndex = _useState[0], setSelectedIndex = _useState[1];
+    var _useState1 = _sliced_to_array$j(useState([]), 2), choices = _useState1[0], setChoices = _useState1[1];
+    var _useState2 = _sliced_to_array$j(useState(null), 2), hoveredTab = _useState2[0], setHoveredTab = _useState2[1];
     var hasTabBevel = !!tabCornerBevel.find(function(item) {
         return item > 0;
     });
@@ -1948,16 +2044,16 @@ function useRandom() {
     return observableObject;
 }
 
-function _array_like_to_array$i(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$h(arr) {
+function _array_with_holes$i(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$1(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$i(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$j(arr);
 }
 function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -2004,7 +2100,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$h(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 = [];
@@ -2028,7 +2124,7 @@ function _iterable_to_array_limit$h(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$h() {
+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 _non_iterable_spread$1() {
@@ -2068,19 +2164,19 @@ function _object_spread_props$2(target, source) {
     }
     return target;
 }
-function _sliced_to_array$h(arr, i) {
-    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$h();
+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 _to_consumable_array$1(arr) {
-    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$i(arr) || _non_iterable_spread$1();
+    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$j(arr) || _non_iterable_spread$1();
 }
-function _unsupported_iterable_to_array$i(o, minLen) {
+function _unsupported_iterable_to_array$j(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$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$i(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$j(o, minLen);
 }
 function _ts_generator$4(thisArg, body) {
     var f, y, t, _ = {
@@ -2313,7 +2409,7 @@ function useGlobalContext(selector) {
 // Context provider
 function GlobalContextProvider(param) {
     var children = param.children;
-    var _useReducer = _sliced_to_array$h(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
+    var _useReducer = _sliced_to_array$i(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
     var highlightedItemChanged = useCallback(function(highlightedItem) {
         dispatch({
             type: 'HIGHLIGHTED_ITEM_CHANGED',
@@ -2610,15 +2706,15 @@ function GlobalContextProvider(param) {
     }, children);
 }
 
-function _array_like_to_array$h(arr, len) {
+function _array_like_to_array$i(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$g(arr) {
+function _array_with_holes$h(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$g(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 = [];
@@ -2642,26 +2738,26 @@ function _iterable_to_array_limit$g(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$g() {
+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 _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$h(arr, i) {
+    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$h();
 }
-function _unsupported_iterable_to_array$h(o, minLen) {
+function _unsupported_iterable_to_array$i(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$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$h(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(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; param.isRandomizable; param.randomizerObject;
     var _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
-    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 _useState = _sliced_to_array$h(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState[0], setProperties = _useState[1];
+    var _useState1 = _sliced_to_array$h(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);
@@ -2844,12 +2940,12 @@ var useCombobox = function(param) {
     };
 };
 
-function _array_like_to_array$g(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$f(arr) {
+function _array_with_holes$g(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$k(obj, key, value) {
@@ -2865,7 +2961,7 @@ function _define_property$k(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$f(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 = [];
@@ -2889,7 +2985,7 @@ function _iterable_to_array_limit$f(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$f() {
+function _non_iterable_rest$g() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$i(target) {
@@ -2907,16 +3003,16 @@ function _object_spread$i(target) {
     }
     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$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$g(o, minLen) {
+function _unsupported_iterable_to_array$h(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$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$g(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(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 ? [
@@ -2925,10 +3021,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$f(useState(''), 2), includeFilterString = _useState[0], setIncludeFilterString = _useState[1];
+    var _useState = _sliced_to_array$g(useState(''), 2), includeFilterString = _useState[0], setIncludeFilterString = _useState[1];
     var listItemsPerPage = 5;
-    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 _useState1 = _sliced_to_array$g(useState(null), 2), hoveredDropdownItem = _useState1[0], setHoveredDropdownItem = _useState1[1];
+    var _useState2 = _sliced_to_array$g(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);
@@ -3073,12 +3169,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$f(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$e(arr) {
+function _array_with_holes$f(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$j(obj, key, value) {
@@ -3094,7 +3190,7 @@ function _define_property$j(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$e(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 = [];
@@ -3118,7 +3214,7 @@ function _iterable_to_array_limit$e(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$e() {
+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$h(target) {
@@ -3136,16 +3232,16 @@ function _object_spread$h(target) {
     }
     return target;
 }
-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$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$f(o, minLen) {
+function _unsupported_iterable_to_array$g(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$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$f(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(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-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 ? [
@@ -3159,8 +3255,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$e(useState(), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
-    var _useState1 = _sliced_to_array$e(useState(null), 2), hoveredDropdownItem = _useState1[0], setHoveredDropdownItem = _useState1[1];
+    var _useState = _sliced_to_array$f(useState(), 2), componentIsHovered = _useState[0], setComponentIsHovered = _useState[1];
+    var _useState1 = _sliced_to_array$f(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",
@@ -3402,12 +3498,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$e(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$d(arr) {
+function _array_with_holes$e(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$i(obj, key, value) {
@@ -3423,7 +3519,7 @@ function _define_property$i(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$d(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 = [];
@@ -3447,7 +3543,7 @@ function _iterable_to_array_limit$d(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$d() {
+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$g(target) {
@@ -3465,16 +3561,16 @@ function _object_spread$g(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$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$e(o, minLen) {
+function _unsupported_iterable_to_array$f(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$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$e(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
 }
 // import { decimalToPercent, percentToDecimal } from '../../common/utils';
 // import debounce from 'lodash.debounce';
@@ -3486,9 +3582,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$d(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
+    var _useState = _sliced_to_array$e(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
     // const [hasError, setHasError] = useState<boolean>(false);
-    var _useState1 = _sliced_to_array$d(useState(false), 2), isHighlighted = _useState1[0], setIsHighlighted = _useState1[1];
+    var _useState1 = _sliced_to_array$e(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
@@ -3676,15 +3772,15 @@ var TrackWidths = /*#__PURE__*/ function(TrackWidths) {
     return TrackWidths;
 }({});
 
-function _array_like_to_array$d(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$c(arr) {
+function _array_with_holes$d(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$c(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 = [];
@@ -3708,19 +3804,19 @@ function _iterable_to_array_limit$c(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$c() {
+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 _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$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$d(o, minLen) {
+function _unsupported_iterable_to_array$e(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$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$d(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$e(o, minLen);
 }
 // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
 // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
@@ -3730,7 +3826,7 @@ var useSlider = function(param) {
         end: 15000,
         interval: 0.1,
         skew: 0.7
-    } : _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;
+    } : _param_mockProperties; param.marks; var 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.
@@ -3744,9 +3840,9 @@ 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$c(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
+    var _useState = _sliced_to_array$d(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
     // const [normalisedValue, setNormalisedValue] = useState(0);
-    var _useState1 = _sliced_to_array$c(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useState1 = _sliced_to_array$d(useState(), 2), properties = _useState1[0], setProperties = _useState1[1];
     var scaledValueRef = useRef(null);
     var normalisedValueRef = useRef(null);
     var sliderState = Juce.getSliderState(id);
@@ -3916,8 +4012,9 @@ var useSlider = function(param) {
         },
         onDrag: function(param) {
             var event = param.event, movement = param.movement;
-            var _event_target;
-            var rect = event === null || event === void 0 ? void 0 : (_event_target = event.target) === null || _event_target === void 0 ? void 0 : _event_target.getBoundingClientRect();
+            var parentSlider = event === null || event === void 0 ? void 0 : event.target.closest('[data-sliderElement]');
+            var sliderTarget = (event === null || event === void 0 ? void 0 : event.target.dataset.handle) ? parentSlider : event === null || event === void 0 ? void 0 : event.target;
+            var rect = sliderTarget === null || sliderTarget === void 0 ? void 0 : sliderTarget.getBoundingClientRect();
             var y = (event === null || event === void 0 ? void 0 : event.clientY) - rect.top;
             var x = (event === null || event === void 0 ? void 0 : event.clientX) - rect.left;
             // Sets the slider as a mod slot preview
@@ -4036,15 +4133,15 @@ styleInject(css_248z$b);
 var css_248z$a = "";
 styleInject(css_248z$a);
 
-function _array_like_to_array$c(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$b(arr) {
+function _array_with_holes$c(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$b(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 = [];
@@ -4068,19 +4165,19 @@ function _iterable_to_array_limit$b(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$b() {
+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$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$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$c(o, minLen) {
+function _unsupported_iterable_to_array$d(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$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$c(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
 }
 function ControlGroup(param) {
     var id = param.id, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, className = param.className, onChangeActiveState = param.onChangeActiveState, children = param.children, _param_width = param.width, width = _param_width === void 0 ? 'auto' : _param_width;
@@ -4090,7 +4187,7 @@ function ControlGroup(param) {
     //    <Input id={id-input}></Input>
     // </ControlGroup>
     var groupId = "".concat(id, "-control-group");
-    var _useState = _sliced_to_array$b(useState(false), 2), isActive = _useState[0], setIsActive = _useState[1];
+    var _useState = _sliced_to_array$c(useState(false), 2), isActive = _useState[0], setIsActive = _useState[1];
     var sliderState = Juce.getSliderState(id);
     var clickListener = function(event) {
         if (!isDisabled) {
@@ -4344,9 +4441,9 @@ var InnerCircle = function(param) {
 var BarSliderHandle = function(param) {
     var _param_handleFillColor = param.handleFillColor, handleFillColor = _param_handleFillColor === void 0 ? 'var(--bg-lv2)' : _param_handleFillColor, _param_handleStrokeColor = param.handleStrokeColor, handleStrokeColor = _param_handleStrokeColor === void 0 ? 'var(--bg-lv12)' : _param_handleStrokeColor, _param_strokeWidth = param.strokeWidth, strokeWidth = _param_strokeWidth === void 0 ? 3 : _param_strokeWidth, _param_width = param.width, width = _param_width === void 0 ? 18 : _param_width, outerGlowColors = param.outerGlowColors, outerGlowRadius = param.outerGlowRadius;
     return /*#__PURE__*/ React__default.createElement("svg", {
-        className: "BarSliderHandle",
         width: "".concat(width, "px"),
         height: "".concat(width, "px"),
+        "data-handle": 'handle',
         // style={{
         //   filter: `drop-shadow(${
         //     outerGlowRadius
@@ -4360,6 +4457,19 @@ var BarSliderHandle = function(param) {
     }, /*#__PURE__*/ React__default.createElement("circle", {
         id: "BarSliderHandle",
         className: "BarSliderHandle",
+        "data-handle": true,
+        onClick: function(e) {
+            return e === null || e === void 0 ? void 0 : e.preventDefault();
+        },
+        onMouseDown: function(e) {
+            return e === null || e === void 0 ? void 0 : e.preventDefault();
+        },
+        onMouseMove: function(e) {
+            return e === null || e === void 0 ? void 0 : e.preventDefault();
+        },
+        onDrag: function(e) {
+            return e === null || e === void 0 ? void 0 : e.preventDefault();
+        },
         r: "6px",
         cx: '50%',
         cy: '50%',
@@ -4866,9 +4976,17 @@ RotarySlider.handleShape = RotarySliderHandleShapes;
 RotarySlider.gradient = GradientStyles;
 RotarySlider.trackWidth = TrackWidths;
 
-var css_248z$8 = ".BarSlider-innerWrapper:hover {\n  cursor: pointer;\n}\n\n.BarSlider-Track {\n  touch-action: none;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  background-color: var(--bg-lv5);\n}\n\n.BarSlider-Track.isHighlighted {\n  background-color: var(--bg-lv6);\n}\n.Barslider-IndicatorLineWrapper,\n.BarSlider-HandleWrapper {\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSlider-IndicatorLine {\n  position: absolute;\n  top: 0;\n  /* left: 0; */\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n.BarSlider-Handle {\n  position: absolute;\n  pointer-events: none;\n}\n.Barslider-IndicatorLineWrapper {\n  /* border-radius: var(--trackBorderRadius); */\n  overflow: hidden;\n}\n\n.BarSlider-Input {\n  font-weight: bold;\n  width: 100%;\n}\n\n.BarSlider-Input.includeValueInHeightIsFalse {\n  position: absolute;\n  bottom: -1.7em;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n";
+var css_248z$8 = ".BarSlider-innerWrapper:hover {\n  cursor: pointer;\n}\n\n.BarSlider-Track {\n  touch-action: none;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  background-color: var(--bg-lv5);\n}\n\n.BarSlider-Track.isHighlighted {\n  background-color: var(--bg-lv6);\n}\n.Barslider-IndicatorLineWrapper,\n.BarSlider-HandleWrapper {\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSlider-IndicatorLine {\n  position: absolute;\n  top: 0;\n  /* left: 0; */\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n.BarSlider-Handle {\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSliderHandle {\n  pointer-events: auto;\n}\n.Barslider-IndicatorLineWrapper {\n  /* border-radius: var(--trackBorderRadius); */\n  overflow: hidden;\n}\n\n.BarSlider-Input {\n  font-weight: bold;\n  width: 100%;\n}\n\n.BarSlider-Input.includeValueInHeightIsFalse {\n  position: absolute;\n  bottom: -1.7em;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n";
 styleInject(css_248z$8);
 
+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$b(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _define_property$d(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -4882,6 +5000,33 @@ function _define_property$d(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array_limit$b(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$b() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread$c(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -4897,8 +5042,19 @@ function _object_spread$c(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 _unsupported_iterable_to_array$c(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$c(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
+}
 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, 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
+    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, _param_markColor = param.markColor, markColor = _param_markColor === void 0 ? 'var(--bg-lv7)' : _param_markColor, _param_markHighlightColor = param.markHighlightColor, markHighlightColor = _param_markHighlightColor === void 0 ? 'var(--color-text)' : _param_markHighlightColor, 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_marks = param.marks, marks = _param_marks === void 0 ? [] : _param_marks, _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,
@@ -4910,6 +5066,7 @@ function Slider$1(param) {
     var isVertical = orientation === Orientation.vertical;
     var handleWidth = 18;
     var defaultDragOrientation = orientation;
+    var _useState = _sliced_to_array$b(useState(), 2), hoveredMark = _useState[0], setHoveredMark = _useState[1];
     var trackWidthMap = {
         small: 5,
         large: 10
@@ -4937,10 +5094,15 @@ function Slider$1(param) {
         randomizerObject: randomizerObject,
         orientation: orientation,
         dragOrientation: dragOrientation || defaultDragOrientation,
-        sliderElementRef: sliderElementRef
+        sliderElementRef: sliderElementRef,
+        marks: marks
     }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, bindSequenceBarSliderDrag = _useSlider.bindSequenceBarSliderDrag, // bindDrag,
     normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, setNormalisedState = _useSlider.setNormalisedState, properties = _useSlider.properties;
     var drag = isStandalone ? bindBarSliderDrag : bindSequenceBarSliderDrag;
+    // const handleRef = useRef(null);
+    // useEffect(() => {
+    //   console.log(normalisedValue, 'NORMALIZEDVAL');
+    // }, [normalisedValue]);
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
         justifyContent: Box.justifyContent.center,
@@ -4948,7 +5110,7 @@ function Slider$1(param) {
         className: classnames('BarSlider', isVertical && 'BarSlider--isVertical', isHorizontal && 'BarSlider--isHorizontal', className),
         id: id,
         ref: sliderElementRef,
-        gap: Box.gap.mediumSmall,
+        gap: Box.gap.xSmall,
         height: isVertical ? height : '100%',
         width: isHorizontal ? width : width !== null && width !== void 0 ? width : '100%',
         style: {
@@ -4963,13 +5125,73 @@ function Slider$1(param) {
         blur: blur
     }) : null, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         className: 'Slider-center-marker'
-    }), /*#__PURE__*/ React__default.createElement(Box, _object_spread$c({
+    }), /*#__PURE__*/ React__default.createElement(Box, {
+        style: {
+            position: 'relative'
+        },
+        fullHeight: true
+    }, marks && (marks === null || marks === void 0 ? void 0 : marks.length) > 0 ? marks === null || marks === void 0 ? void 0 : marks.map(function(item) {
+        return /*#__PURE__*/ React__default.createElement(Box, {
+            width: '2.5rem',
+            height: '2rem',
+            flexDirection: Box.flexDirection.column,
+            style: {
+                position: 'absolute',
+                pointerEvents: 'none',
+                top: "1px",
+                height: '2rem',
+                width: '2rem',
+                left: "calc(".concat((item === null || item === void 0 ? void 0 : item.value) * 100, "% - 1rem)"),
+                zIndex: 1
+            }
+        }, /*#__PURE__*/ React__default.createElement("div", {
+            className: "BarSlider-Mark",
+            style: {
+                width: '5px',
+                height: '5px',
+                borderRadius: '100%',
+                background: hoveredMark === (item === null || item === void 0 ? void 0 : item.label) ? markHighlightColor : markColor,
+                zIndex: 1,
+                cursor: 'pointer',
+                pointerEvents: 'auto'
+            },
+            onMouseEnter: function() {
+                return setHoveredMark(item === null || item === void 0 ? void 0 : item.label);
+            },
+            onMouseLeave: function() {
+                return setHoveredMark(null);
+            },
+            onClick: function() {
+                setNormalisedState(item === null || item === void 0 ? void 0 : item.value);
+            }
+        }), (item === null || item === void 0 ? void 0 : item.label) ? /*#__PURE__*/ React__default.createElement(Label, {
+            id: item === null || item === void 0 ? void 0 : item.label,
+            value: item === null || item === void 0 ? void 0 : item.label,
+            fontSize: Label.fontSize.xXSmall,
+            onMouseEnter: function() {
+                return setHoveredMark(item === null || item === void 0 ? void 0 : item.label);
+            },
+            onMouseLeave: function() {
+                return setHoveredMark(null);
+            },
+            color: +normalisedValue.toFixed(2) === +(item === null || item === void 0 ? void 0 : item.value.toFixed(2)) || hoveredMark === (item === null || item === void 0 ? void 0 : item.label) ? markHighlightColor : markColor,
+            highlightColor: markHighlightColor,
+            onClick: function() {
+                setNormalisedState(item === null || item === void 0 ? void 0 : item.value);
+            },
+            style: {
+                cursor: 'pointer',
+                pointerEvents: 'auto'
+            }
+        }) : null);
+    }) : null, /*#__PURE__*/ React__default.createElement(Box, _object_spread$c({
         className: "BarSlider-innerWrapper",
         height: isHorizontal && showHandle ? "".concat(handleWidth, "px") : isHorizontal && !showHandle ? 'auto' : '100%',
         width: isVertical && showHandle ? "".concat(handleWidth, "px") : '100%',
         style: {
             filter: "blur(".concat(blur, "px)")
-        }
+        },
+        "data-sliderElement": "true"
     }, drag()), /*#__PURE__*/ React__default.createElement("div", {
         className: classnames('BarSlider-Track', isHighlighted && 'isHighlighted'),
         // onMouseEnter={onMouseEnter}
@@ -5013,7 +5235,8 @@ function Slider$1(param) {
             top: isHorizontal ? 0 : handleMargin / 2,
             left: isHorizontal ? handleMargin / 2 : 0,
             width: isHorizontal ? "calc(100% - ".concat(handleMargin, "px)") : '100%',
-            height: isHorizontal ? '100%' : "calc(100% - ".concat(handleMargin, "px)")
+            height: isHorizontal ? '100%' : "calc(100% - ".concat(handleMargin, "px)"),
+            zIndex: 2
         }
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: "BarSlider-Handle",
@@ -5027,7 +5250,7 @@ function Slider$1(param) {
         handleStrokeColor: handleStrokeColor,
         strokeWidth: 5,
         width: handleWidth
-    }))) : null)), showValue ? /*#__PURE__*/ React__default.createElement(Input, {
+    }))) : null))), showValue ? /*#__PURE__*/ React__default.createElement(Input, {
         className: "BarSlider-Input ".concat(includeValueInHeight ? 'includeValueInHeightIsTrue' : 'includeValueInHeightIsFalse'),
         value: scaledValue,
         id: id,
@@ -5144,7 +5367,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, 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;
+    mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, showValue = param.showValue, includeValueInHeight = param.includeValueInHeight, marks = param.marks, 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,
@@ -5226,6 +5449,7 @@ function Slider(param) {
         id: id,
         width: width,
         height: height,
+        marks: marks,
         trackWidth: trackWidth,
         onChange: onChange,
         outerGlowRadius: outerGlowRadius,
@@ -8378,6 +8602,16 @@ function LFOBox(param) {
     var handleSyncTypeChange = function(value) {
         setSyncType(value);
     };
+    var dottedMark = scaledToNormalised({
+        scaledValue: -33,
+        start: -75,
+        end: 75
+    }) || 0;
+    var tripletMark = scaledToNormalised({
+        scaledValue: 50,
+        start: -75,
+        end: 75
+    }) || 0;
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "LFOBox",
         gap: Box.gap.mediumLarge,
@@ -8447,6 +8681,16 @@ function LFOBox(param) {
         polarity: Slider.polarity.bipolar,
         orientation: Slider.orientation.horizontal,
         dragOrientation: Slider.orientation.horizontal,
+        marks: [
+            {
+                value: dottedMark,
+                label: 'Dotted'
+            },
+            {
+                value: tripletMark,
+                label: 'Triplet'
+            }
+        ],
         id: "LFO".concat(id, "_Sync_Offset")
     }) : null)), /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,