@antimatter-audio/antimatter-ui 14.0.6 → 14.0.8

package/dist/index.js

@@ -33,7 +33,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$f = "@theme static {\n  --color-brand: #bb68d9;\n  --color-brand-900: #443342;\n  --color-brand-700: #932eb8;\n  --color-brand-600: #826993;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-brand-secondary: #18d6d6;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-lv1: #0e0e12;\n  --bg-lv2: #121216;\n  --bg-lv3: #16171d;\n  --bg-lv4: #212128;\n  --bg-lv5: #2b2b31;\n  --bg-lv6: #34343a;\n  --bg-lv7: #3b3b41;\n  --bg-lv8: #49494d;\n  --bg-lv9: #535357;\n  --bg-lv10: #797887;\n  --bg-lv11: #9999a7;\n  --bg-lv12: #c1c1c1;\n  --bg-selected: #2e2c33;\n\n  /* --bg-lv3-brightened: #1a1b21; */\n\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: not-allowed;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n.cursor-hidden * {\n  cursor: none !important;\n}\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n  background-color: var(--color-gray-600);\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: #252429;\n}\n\n* {\n  -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n  display: none;\n} */\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
+var css_248z$f = "@theme static {\n  --color-brand: #bb68d9;\n  --color-brand-900: #443342;\n  --color-brand-700: #932eb8;\n  --color-brand-600: #826993;\n  --color-brand-400: #d199e6;\n  --color-brand-300: #f3d4f4;\n  --color-brand-secondary: #18d6d6;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-lv1: #0e0e12;\n  --bg-lv2: #121216;\n  --bg-lv3: #16171d;\n  --bg-lv4: #212128;\n  --bg-lv5: #2b2b31;\n  --bg-lv6: #34343a;\n  --bg-lv7: #3b3b41;\n  --bg-lv8: #49494d;\n  --bg-lv9: #535357;\n  --bg-lv10: #797887;\n  --bg-lv11: #9999a7;\n  --bg-lv12: #c1c1c1;\n  --bg-selected: #2e2c33;\n\n  /* --bg-lv3-brightened: #1a1b21; */\n\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: default;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n.cursor-hidden * {\n  cursor: none !important;\n}\n::-webkit-scrollbar,\n::-webkit-scrollbar-track {\n  background-color: var(--color-gray-600);\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: #252429;\n}\n\n* {\n  -ms-overflow-style: none;\n}\n\n/* div::-webkit-scrollbar {\n  display: none;\n} */\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
 styleInject(css_248z$f);
 
 var Spacing = /*#__PURE__*/ function(Spacing) {
@@ -111,7 +111,7 @@ var Orientation = /*#__PURE__*/ function(Orientation) {
     return Orientation;
 }({});
 
-var css_248z$e = ".Tabs {\n  display: flex;\n  font-size: 1rem;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.Tabs-item {\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Tabs-item::-moz-selection {\n  background: transparent;\n}\n.Tabs-item::selection {\n  background: transparent;\n}\n\n/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n/* TODO how do we want to style the scrollbars? */\n\n/* .Tabs-item {\n  color: var(--bg-lv11);\n  font-family: var(--font-leagueSpartan);\n  background: var(--bg-lv2);\n} */\n\n.Tabs-item[data-headlessui-state='hover'],\n.Tabs-item[data-headlessui-state='hover active'],\n.tabs-item:focus,\n.tabs-item:focus-visible {\n  filter: brightness(80%);\n}\n/* \n.Tabs-item[data-headlessui-state='selected hover'],\n.Tabs-item[data-headlessui-state='selected hover active'],\n.Tabs-item[data-headlessui-state='selected'],\n.Tabs-item[data-headlessui-state='selected focus'] {\n  background: var(--bg-lv3);\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg polyline {\n  stroke: var(--color-brand) !important;\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] .Label {\n  color: var(--color-brand) !important;\n} */\n";
+var css_248z$e = ".Tabs {\n  display: flex;\n  font-size: 1rem;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.Tabs-item {\n  &:disabled {\n    cursor: default;\n  }\n}\n\n.Tabs-item::-moz-selection {\n  background: transparent;\n}\n.Tabs-item::selection {\n  background: transparent;\n}\n\n/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n/* TODO how do we want to style the scrollbars? */\n\n/* .Tabs-item {\n  color: var(--bg-lv11);\n  font-family: var(--font-leagueSpartan);\n  background: var(--bg-lv2);\n} */\n\n.Tabs-item[data-headlessui-state='hover'],\n.Tabs-item[data-headlessui-state='hover active'],\n.tabs-item:focus,\n.tabs-item:focus-visible {\n  filter: brightness(80%);\n}\n/* \n.Tabs-item[data-headlessui-state='selected hover'],\n.Tabs-item[data-headlessui-state='selected hover active'],\n.Tabs-item[data-headlessui-state='selected'],\n.Tabs-item[data-headlessui-state='selected focus'] {\n  background: var(--bg-lv3);\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg path,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg line,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] svg polyline,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] svg polyline {\n  stroke: var(--color-brand) !important;\n}\n\n.LFOTab .Tabs-item[data-headlessui-state='selected hover'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected hover active'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected'] .Label,\n.LFOTab .Tabs-item[data-headlessui-state='selected focus'] .Label {\n  color: var(--color-brand) !important;\n} */\n";
 styleInject(css_248z$e);
 
 var css_248z$d = ".Button {\n  font-size: var(--text-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: var(--spacing-ms);\n  padding-left: var(--spacing-ms);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: enter;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  color: var(--color-text);\n  -webkit-user-select: none;\n  &.xSmall {\n    width: var(--spacing-ml);\n    height: var(--spacing-ml);\n  }\n  &.small {\n    font-size: var(--text-xs);\n    min-width: 1rem;\n    min-height: var(--spacing-sm);\n  }\n  &.large {\n    border-radius: var(--radius-sm);\n    min-width: 1rem;\n    min-height: var(--spacing-xl);\n  }\n}\n";
@@ -2119,7 +2119,7 @@ Tabs.justifyContent = JustifyContent$1;
 Tabs.alignItems = AlignItems$1;
 Tabs.fontSize = FontSizes;
 
-var css_248z$a = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-ml);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: center;\n  border-radius: 4px;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: 26px;\n  border: 1px solid var(--bg-lv9);\n  /* background: var(--color-gray-800); */\n  /* color: var(--color-text); */\n}\n\n.Dropdown-button:hover,\n.Dropdown-button[data-open] {\n  outline: none;\n  cursor: pointer;\n  border: 1px solid var(--color-brand-secondary);\n}\n\n.Dropdown-button:hover .Label {\n  cursor: pointer;\n}\n\n.Dropdown-button:disabled {\n  cursor: not-allowed;\n}\n\n.Dropdown-items {\n  border: 1px solid var(--bg-lv9);\n  background: var(--bg-lv4);\n  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 3px;\n  border-radius: 4px;\n  width: 150px;\n  z-index: 50;\n}\n\n.Dropdown-item {\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  min-width: 100px;\n  color: var(--color-text);\n  cursor: pointer;\n  /* text-align: center; */\n}\n\n.Dropdown-item[data-selected] {\n  color: var(--color-brand-secondary);\n}\n\n.Dropdown-item:hover {\n  background-color: var(--bg-lv7);\n}\n\n.Dropdown-item:hover:not([data-selected]) {\n  color: var(--color-text);\n}\n";
+var css_248z$a = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-ml);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: center;\n  border-radius: 4px;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: 26px;\n  border: 1px solid var(--bg-lv9);\n  /* background: var(--color-gray-800); */\n  /* color: var(--color-text); */\n}\n\n.Dropdown-button:hover,\n.Dropdown-button[data-open] {\n  outline: none;\n  cursor: pointer;\n  border: 1px solid var(--color-brand-secondary);\n}\n\n.Dropdown-button:hover .Label {\n  cursor: pointer;\n}\n\n.Dropdown-button:disabled {\n  cursor: default;\n}\n\n.Dropdown-items {\n  border: 1px solid var(--bg-lv9);\n  background: var(--bg-lv4);\n  box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 5px 3px;\n  border-radius: 4px;\n  width: 150px;\n  z-index: 50;\n}\n\n.Dropdown-item {\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  min-width: 100px;\n  color: var(--color-text);\n  cursor: pointer;\n  /* text-align: center; */\n}\n\n.Dropdown-item[data-selected] {\n  color: var(--color-brand-secondary);\n}\n\n.Dropdown-item:hover {\n  background-color: var(--bg-lv7);\n}\n\n.Dropdown-item:hover:not([data-selected]) {\n  color: var(--color-text);\n}\n";
 styleInject(css_248z$a);
 
 function _define_property$g(obj, key, value) {
@@ -2151,7 +2151,7 @@ function _object_spread$f(target) {
     return target;
 }
 function Dropdown(param) {
-    var label = param.label, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_labelColor = param.labelColor, labelColor = _param_labelColor === void 0 ? 'var(--color-text)' : _param_labelColor, className = param.className, onChange = param.onChange, width = param.width, id = param.id, style = param.style;
+    var label = param.label, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_labelColor = param.labelColor, labelColor = _param_labelColor === void 0 ? 'var(--color-text)' : _param_labelColor, className = param.className, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? '110px' : _param_width, _param_height = param.height, height = _param_height === void 0 ? '34px' : _param_height, id = param.id, style = param.style;
     var _useDropdown = useDropdown({
         id: id,
         label: label,
@@ -2181,7 +2181,7 @@ function Dropdown(param) {
         style: {
             position: 'relative',
             width: width,
-            height: '26px'
+            height: height
         }
     }, /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
@@ -2189,7 +2189,7 @@ function Dropdown(param) {
         gap: Box.gap.small,
         style: {
             position: 'absolute',
-            right: '8px',
+            right: '0',
             top: '0',
             bottom: '0',
             zIndex: '2'
@@ -2198,21 +2198,36 @@ function Dropdown(param) {
         id: "Dropdown-up-arrow",
         className: "Dropdown-arrow",
         backgroundColor: "transparent",
-        width: "8px",
         icon: IconButton.icon.up,
+        iconWidth: "8px",
+        disabled: value === choices[0],
+        padding: [
+            IconButton.padding.small,
+            IconButton.padding.small,
+            IconButton.padding.xSmall,
+            IconButton.padding.small
+        ],
         onClick: decrementValue
     }), /*#__PURE__*/ React__default.createElement(IconButton, {
         className: "Dropdown-arrow",
         id: "Dropdown-down-arrow",
         backgroundColor: "transparent",
-        width: "8px",
+        iconWidth: "8px",
+        disabled: value === choices[choices.length - 1],
         icon: IconButton.icon.down,
+        padding: [
+            IconButton.padding.xSmall,
+            IconButton.padding.small,
+            IconButton.padding.small,
+            IconButton.padding.small
+        ],
         onClick: incrementValue
     })), /*#__PURE__*/ React__default.createElement(ListboxButton, {
         className: classnames('Combobox Dropdown-button', className),
         style: _object_spread$f({
             color: "".concat(color ? color : 'initial'),
             width: "".concat(width ? width : '100%'),
+            height: height,
             // position: 'absolute',
             top: 0,
             bottom: 0,
@@ -2875,7 +2890,7 @@ function _unsupported_iterable_to_array$d(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;
+    var id = param.id, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, className = param.className, onChangeActiveState = param.onChangeActiveState, children = param.children, width = param.width;
     // EXPECTED CONTROL GROUP STRUCTURE
     // <ControlGroup id={id-control-group} is-active>
     //    <Slider id={id}></Slider>
@@ -2949,6 +2964,7 @@ function ControlGroup(param) {
     ]);
     return /*#__PURE__*/ React__default.createElement(Box, {
         id: groupId,
+        width: width,
         className: "controlGroup ".concat(isActive ? 'isActive' : '', " ").concat(isDisabled ? 'isDisabled' : '', " ").concat(className ? className : '')
     }, children);
 }
@@ -3289,88 +3305,6 @@ function RotaryCircle(param) {
 RotaryCircle.polarity = Polarity;
 RotaryCircle.size = RotarySliderSizes;
 
-// Rotary Slider UI component.
-// Connects to Juce's Slider element
-function RotarySlider(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, className = param.className, id = param.id, onChange = param.onChange, trackWidth = param.trackWidth, // trackOffset,
-    indicatorLineColor = param.indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, markerShape = param.markerShape, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
-        start: 20.0,
-        end: 15000.0,
-        interval: 0.1,
-        skew: 0.7
-    } : _param_mockProperties; param.style;
-    var _rotarySliderSizeMap_size;
-    var _useSlider = useSlider({
-        id: id,
-        label: label,
-        mockProperties: mockProperties,
-        mockInitialNormalisedValue: mockInitialNormalisedValue,
-        onChange: onChange,
-        isRandomizable: isRandomizable
-    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, setToDefaultState = _useSlider.setToDefaultState, setNormalisedState = _useSlider.setNormalisedState, properties = _useSlider.properties;
-    return /*#__PURE__*/ React__default.createElement(ControlGroup, {
-        id: id
-    }, /*#__PURE__*/ React__default.createElement(Box, {
-        className: "RotarySlider-wrapper",
-        flexDirection: Box.flexDirection.column,
-        gap: Box.gap.none,
-        flex: "0 1 auto"
-    }, label ? /*#__PURE__*/ React__default.createElement(Label, {
-        padding: [
-            Label.padding.none,
-            Label.padding.none,
-            Label.padding.mediumSmall,
-            Label.padding.none
-        ],
-        fontSize: Label.fontSize.xSmall,
-        value: label
-    }) : null, /*#__PURE__*/ React__default.createElement(RotaryCircle, {
-        polarity: polarity,
-        className: className,
-        id: id,
-        trackWidth: trackWidth,
-        markerShape: markerShape,
-        // trackOffset={trackOffset}
-        sliderValue: normalisedValue,
-        bindDrag: bindDrag,
-        onDoubleClick: setToDefaultState,
-        size: size,
-        indicatorLineColor: indicatorLineColor,
-        indicatorLineGradient: indicatorLineGradient,
-        trackColor: trackColor,
-        trackStrokeColor: trackStrokeColor,
-        knobStrokeColor: knobStrokeColor,
-        knobFillColor: knobFillColor
-    }), /*#__PURE__*/ React__default.createElement(Input, {
-        className: "ProgressCircle-value",
-        value: scaledValue,
-        id: id,
-        min: (properties === null || properties === void 0 ? void 0 : properties.start) || 0,
-        max: (properties === null || properties === void 0 ? void 0 : properties.end) || 0,
-        textAlign: Input.textAlign.center,
-        style: {
-            fontWeight: 'bold',
-            width: '100%',
-            maxWidth: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size === void 0 ? void 0 : _rotarySliderSizeMap_size.width, "px")
-        },
-        onComplete: function(value) {
-            var normalisedVal = properties && scaledToNormalised({
-                scaledValue: value,
-                start: properties === null || properties === void 0 ? void 0 : properties.start,
-                end: properties === null || properties === void 0 ? void 0 : properties.end,
-                skew: properties === null || properties === void 0 ? void 0 : properties.skew
-            });
-            normalisedVal !== undefined && setNormalisedState(normalisedVal);
-        }
-    })));
-}
-RotarySlider.polarity = Polarity;
-RotarySlider.size = RotarySliderSizes;
-RotarySlider.markerShape = RotarySliderMarkerShapes;
-
-var css_248z$6 = ".BarSlider {\n  --maxNarrowTrackIndicatorWidth: 6px;\n  --maxNarrowTrackWidth: 20px;\n  --minHorizontalWidth: 75px;\n  --minVerticalHeight: 75px;\n  --narrowTrackMargin: 8px;\n  --narrowTrackBorderRadius: 20px;\n}\n\n.BarSlider:hover {\n  cursor: pointer;\n}\n\n.BarSlider-Track {\n  touch-action: none;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  background-color: var(--bg-lv5);\n}\n\n.BarSlider-Track.isHighlighted {\n  background-color: var(--bg-lv6);\n}\n.Barslider-IndicatorLineWrapper,\n.BarSlider-MarkerWrapper {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSlider-IndicatorLine {\n  position: absolute;\n  top: 0;\n  /* left: 0; */\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n\n.BarSlider-Marker {\n  position: absolute;\n  pointer-events: none;\n}\n\n/* Narrow variant */\n.BarSlider--narrowTrack .BarSlider-Track {\n  border-radius: var(--narrowTrackBorderRadius);\n  background-color: var(--bg-lv3);\n  box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.25);\n}\n\n/* .BarSlider--narrowTrack .BarSlider-IndicatorLine {\n  border-radius: var(--narrowTrackBorderRadius);\n} */\n\n.BarSlider--narrowTrack .BarSlider-Marker {\n  border-radius: var(--narrowTrackBorderRadius);\n}\n\n.BarSlider--narrowTrack .Barslider-IndicatorLineWrapper {\n  border-radius: var(--narrowTrackBorderRadius);\n  overflow: hidden;\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .Barslider-IndicatorLineWrapper,\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-MarkerWrapper {\n  bottom: var(--maxNarrowTrackIndicatorWidth);\n  left: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  width: var(--maxNarrowTrackIndicatorWidth);\n  height: calc(100% - (var(--narrowTrackMargin) * 2));\n  margin-left: var(--narrowTrackMargin);\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .Barslider-IndicatorLineWrapper,\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-MarkerWrapper {\n  top: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  left: var(--maxNarrowTrackIndicatorWidth);\n  height: var(--maxNarrowTrackIndicatorWidth);\n  width: calc(100% - (var(--narrowTrackMargin) * 2));\n  margin-bottom: var(--narrowTrackMargin);\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-Track {\n  height: 100%;\n  max-height: 100%;\n  width: var(--maxNarrowTrackWidth);\n  min-height: var(--minVerticalHeight);\n  max-width: var(--maxNarrowTrackWidth);\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-Track {\n  width: 100%;\n  max-width: 100%;\n  height: var(--maxNarrowTrackWidth);\n  max-height: var(--maxNarrowTrackWidth);\n  min-width: var(--minHorizontalWidth);\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-IndicatorLine {\n  max-width: var(--maxNarrowTrackIndicatorWidth);\n  max-height: 100%;\n  left: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-IndicatorLine {\n  width: 100%;\n  max-width: 100%;\n  max-height: var(--maxNarrowTrackIndicatorWidth);\n  top: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  /* left: var(--narrowTrackMargin);\n  right: calc(100% - var(--narrowTrackMargin)); */\n}\n/* Wide variant */\n\n.BarSlider--wideTrack .BarSlider-Track {\n  border-radius: 2px;\n}\n\n.BarSlider--wideTrack.BarSlider--isVertical .BarSlider-Track {\n  min-height: var(--minVerticalHeight);\n}\n\n.BarSlider-Input {\n  font-weight: bold;\n  width: 100%;\n}\n.BarSlider-Input.includeValueInHeightIsTrue {\n}\n\n.BarSlider-Input.includeValueInHeightIsFalse {\n  position: absolute;\n  bottom: -1.7em;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n";
-styleInject(css_248z$6);
-
 function _define_property$c(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -3399,152 +3333,29 @@ function _object_spread$c(target) {
     }
     return target;
 }
-function ownKeys$1(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props$1(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$1(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-// Slider UI component.
-// Connects to Juce's Slider element.
-var BarSliderVariants = /*#__PURE__*/ function(BarSliderVariants) {
-    BarSliderVariants["narrowTrack"] = "narrowTrack";
-    BarSliderVariants["wideTrack"] = "wideTrack";
-    return BarSliderVariants;
-}({});
-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, _param_dragOrientation = param.dragOrientation, dragOrientation = _param_dragOrientation === void 0 ? Orientation.vertical : _param_dragOrientation, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_isStandalone = param.isStandalone, isStandalone = _param_isStandalone === void 0 ? true : _param_isStandalone, _param_isHighlighted = param.isHighlighted, isHighlighted = _param_isHighlighted === void 0 ? false : _param_isHighlighted, showValue = param.showValue, className = param.className, id = param.id, onChange = param.onChange, style = param.style, _param_indicatorLineColor = param.indicatorLineColor, indicatorLineColor = _param_indicatorLineColor === void 0 ? 'var(--color-brand)' : _param_indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, markerFillColor = param.markerFillColor, markerStrokeColor = param.markerStrokeColor, _param_barSliderVariant = param.barSliderVariant, barSliderVariant = _param_barSliderVariant === void 0 ? "narrowTrack" : _param_barSliderVariant, label = param.label, _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,
-        interval: 0.1,
-        skew: 0.7
-    } : _param_mockProperties;
-    var sliderElementRef = useRef(null);
-    var isNarrowTrack = barSliderVariant === "narrowTrack";
-    var isWideTrack = barSliderVariant === "wideTrack";
-    var isHorizontal = orientation === Orientation.horizontal;
-    var isVertical = orientation === Orientation.vertical;
-    var defaultShowValueState = barSliderVariant === "narrowTrack" ? true : false;
-    dragOrientation = isHorizontal ? Orientation.horizontal : orientation;
-    var multiColorGradient = "linear-gradient(".concat(isHorizontal ? 'to right' : 'to top', ", var(--color-brand) 0%, var(--color-brand-secondary) 100%");
-    var singleColorGradient = "linear-gradient(".concat(isHorizontal ? 'to right' : 'to top', ", var(--color-brand-700) 0%, var(--color-brand) 100%");
-    var _obj;
-    var selectedGradientMap = (_obj = {}, _define_property$c(_obj, GradientStyles.multicolor, multiColorGradient), _define_property$c(_obj, GradientStyles.unicolor, singleColorGradient), _obj);
-    var _useSlider = useSlider({
-        id: id,
-        label: label,
-        mockProperties: mockProperties,
-        mockInitialNormalisedValue: mockInitialNormalisedValue,
-        onChange: onChange,
-        isRandomizable: isRandomizable,
-        orientation: orientation,
-        dragOrientation: dragOrientation,
-        sliderElementRef: sliderElementRef
-    }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, bindSequenceBarSliderDrag = _useSlider.bindSequenceBarSliderDrag, // bindDrag,
-    normalisedValue = _useSlider.normalisedValue, setNormalisedState = _useSlider.setNormalisedState, properties = _useSlider.properties;
-    var drag = isStandalone ? bindBarSliderDrag : bindSequenceBarSliderDrag;
-    return /*#__PURE__*/ React__default.createElement(Box, {
-        flexDirection: Box.flexDirection.column,
-        justifyContent: Box.justifyContent.center,
-        className: classnames('BarSlider', isNarrowTrack && 'BarSlider--narrowTrack', isWideTrack && 'BarSlider--wideTrack', isVertical && 'BarSlider--isVertical', isHorizontal && 'BarSlider--isHorizontal', className),
-        id: id,
-        ref: sliderElementRef,
-        gap: Box.gap.mediumSmall,
-        height: isVertical ? '100%' : 'auto',
-        style: {
-            position: 'relative'
-        }
-    }, ' ', label ? /*#__PURE__*/ React__default.createElement(Label, {
-        fontSize: Label.fontSize.xSmall,
-        value: label,
-        color: "var(--color-text)"
-    }) : null, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
-        className: 'Slider-center-marker'
-    }), /*#__PURE__*/ React__default.createElement(Box, {
-        padding: isNarrowTrack ? (showValue !== null && showValue !== void 0 ? showValue : defaultShowValueState) ? [
-            Box.padding.none,
-            Box.padding.mediumSmall,
-            Box.padding.none,
-            Box.padding.mediumSmall
-        ] : [
-            Box.padding.mediumSmall
-        ] : [
-            Box.padding.none
-        ],
-        height: "100%"
-    }, /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$c({
-        className: classnames('BarSlider-Track', isHighlighted && 'isHighlighted')
-    }, drag()), {
-        // onMouseEnter={onMouseEnter}
+// Rotary Slider UI component.
+// Connects to Juce's Slider element
+function PositioningWrapper(param) {
+    var positionedElement = param.positionedElement, _param_top = param.top, top = _param_top === void 0 ? '0px' : _param_top, right = param.right, bottom = param.bottom, _param_left = param.left, left = _param_left === void 0 ? '0px' : _param_left, _param_margin = param.margin, margin = _param_margin === void 0 ? 0 : _param_margin, _param_height = param.height, height = _param_height === void 0 ? '100%' : _param_height, _param_width = param.width, width = _param_width === void 0 ? '100%' : _param_width, id = param.id, className = param.className, style = param.style, children = param.children;
+    return /*#__PURE__*/ React__default.createElement("div", {
         id: id,
+        className: className,
         style: _object_spread$c({
-            background: trackColor,
-            stroke: trackStrokeColor ? "1px solid ".concat(trackStrokeColor) : 'none'
+            position: 'relative',
+            height: height,
+            width: width,
+            margin: margin
         }, style)
-    }), normalisedValue !== null && normalisedValue !== undefined ? /*#__PURE__*/ React__default.createElement("div", {
-        className: "Barslider-IndicatorLineWrapper"
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        // TODO: Why aren't the Tailwind classes working?
-        // className={classnames('h-full', 'w-full', 'absolute', 'bg-panel')}
-        className: "BarSlider-IndicatorLine",
-        style: _object_spread$c({
-            background: indicatorLineGradient ? selectedGradientMap[indicatorLineGradient] : indicatorLineColor,
-            opacity: isStandalone || isHighlighted ? '100%' : '80%',
-            top: "".concat(isHorizontal && isNarrowTrack && 'calc(50% - 3px)'),
-            left: "".concat(isVertical && isNarrowTrack && 'calc(50% - 3px)')
-        }, getBarTransformStyles({
-            orientation: orientation,
-            polarity: polarity,
-            normalisedValue: normalisedValue
-        }))
-    })) : '', isNarrowTrack ? /*#__PURE__*/ React__default.createElement("div", {
-        className: "BarSlider-MarkerWrapper",
-        style: {
-            bottom: '2px'
-        }
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        className: "BarSlider-Marker",
-        style: {
-            bottom: isVertical ? "calc(".concat(normalisedValue * 100, "% - 6px)") : '-6px',
-            left: isHorizontal ? "calc(".concat(normalisedValue * 100, "% - 6px)") : '-6px'
-        }
-    }, /*#__PURE__*/ React__default.createElement(BarSliderMarker, {
-        markerFillColor: markerFillColor,
-        markerStrokeColor: markerStrokeColor,
-        strokeWidth: 5
-    }))) : null)), (showValue !== null && showValue !== void 0 ? showValue : defaultShowValueState) ? /*#__PURE__*/ React__default.createElement(Input, {
-        className: "BarSlider-Input ".concat(includeValueInHeight ? 'includeValueInHeightIsTrue' : 'includeValueInHeightIsFalse'),
-        value: normalisedValue,
-        id: id,
-        min: (properties === null || properties === void 0 ? void 0 : properties.start) || 0,
-        max: (properties === null || properties === void 0 ? void 0 : properties.end) || 0,
-        type: Input.type.number,
-        textColor: 'var(--bg-lv12)',
+    }, children, /*#__PURE__*/ React__default.createElement("div", {
         style: {
-        },
-        textAlign: Input.textAlign.center,
-        onComplete: function(value) {
-            normalisedValue !== undefined && setNormalisedState(normalisedValue);
+            position: 'absolute',
+            top: top,
+            right: right,
+            bottom: bottom,
+            left: left
         }
-    }) : null);
+    }, positionedElement ? positionedElement : null));
 }
-Slider$1.sliderType = SliderType;
-Slider$1.polarity = Polarity;
-Slider$1.orientation = Orientation;
 
 function _array_like_to_array$c(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -3592,24 +3403,490 @@ function _unsupported_iterable_to_array$c(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
 }
-var useCombobox = function(param) {
-    var id = param.id, label = param.label, filter = param.filter; param.onChange; var _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader, isDisabled = param.isDisabled;
-    var _Object_values;
-    var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$c(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState[0], setProperties = _useState[1];
-    var _useState1 = _sliced_to_array$c(useState(0), 2), index = _useState1[0], setIndex = _useState1[1];
-    var prevIndex = useRef(null);
-    var nextIndex = useRef(null);
-    var prevDragDirection = useRef(null);
-    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, _useGlobalContext_globalState = _useGlobalContext.globalState, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
-    //TODO: Filter choices for subsequent rows
-    // const availableChoices = properties?.choices;
-    useEffect(function() {
-        setIndex(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex());
-    }, [
-        id
-    ]);
-    useEffect(function() {
+// 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
+// ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
+var DataSource = /*#__PURE__*/ function(DataSource) {
+    DataSource["sliderAttachment"] = "sliderAttachment";
+    DataSource["buttonAttachment"] = "buttonAttachment";
+    DataSource["event"] = "event";
+    return DataSource;
+}({});
+var useIndicator = function(param) {
+    var id = param.id, _param_dataSource = param.dataSource, dataSource = _param_dataSource === void 0 ? "buttonAttachment" : _param_dataSource;
+    var isLocalhost = window.location.hostname === 'localhost';
+    // This value should be a range from 0 to 1
+    var _useState = _sliced_to_array$c(useState(0), 2), brightness = _useState[0], setBrightness = _useState[1];
+    var updateState = function() {
+        if (!isLocalhost && dataSource === "buttonAttachment") {
+            var _Juce_getToggleState;
+            var toggleState = (_Juce_getToggleState = Juce.getToggleState(id)) === null || _Juce_getToggleState === void 0 ? void 0 : _Juce_getToggleState.value;
+            setBrightness(toggleState);
+        } else if (!isLocalhost && dataSource === "sliderAttachment") {
+            var sliderState = Juce.getSliderState(id);
+            setBrightness(sliderState === null || sliderState === void 0 ? void 0 : sliderState.normalisedValue);
+        }
+    };
+    // Set the initial state
+    useEffect(function() {
+        updateState();
+    }, []);
+    // Update the local state when the ID changes
+    useEffect(function() {
+        updateState();
+    }, [
+        id
+    ]);
+    // Sets up listeners to handle changes on the backend
+    useEffect(function() {
+        if (!isLocalhost && dataSource === "buttonAttachment") {
+            var _toggleState_valueChangedEvent;
+            var toggleState = Juce.getToggleState(id);
+            var valueListenerId = toggleState === null || toggleState === void 0 ? void 0 : (_toggleState_valueChangedEvent = toggleState.valueChangedEvent) === null || _toggleState_valueChangedEvent === void 0 ? void 0 : _toggleState_valueChangedEvent.addListener(function() {
+                setBrightness(toggleState);
+            });
+            return function cleanup() {
+                var _toggleState_valueChangedEvent;
+                toggleState === null || toggleState === void 0 ? void 0 : (_toggleState_valueChangedEvent = toggleState.valueChangedEvent) === null || _toggleState_valueChangedEvent === void 0 ? void 0 : _toggleState_valueChangedEvent.removeListener(valueListenerId);
+            };
+        } else if (!isLocalhost && dataSource === "sliderAttachment") {
+            var _sliderState_valueChangedEvent;
+            var sliderState = Juce.getSliderState(id);
+            var valueListenerId1 = sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_valueChangedEvent = sliderState.valueChangedEvent) === null || _sliderState_valueChangedEvent === void 0 ? void 0 : _sliderState_valueChangedEvent.addListener(function() {
+                setBrightness(sliderState);
+            });
+            return function cleanup() {
+                var _sliderState_valueChangedEvent;
+                sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_valueChangedEvent = sliderState.valueChangedEvent) === null || _sliderState_valueChangedEvent === void 0 ? void 0 : _sliderState_valueChangedEvent.removeListener(valueListenerId1);
+            };
+        } else if (!isLocalhost && dataSource === "event") {
+            var getLFOOutdata = id && //@ts-expect-error
+            window.__JUCE__.backend.addEventListener("".concat(id), function(event) {
+                setBrightness(event);
+            });
+            return function cleanup() {
+                //@ts-expect-error
+                window.__JUCE__.backend.removeEventListener(getLFOOutdata);
+            };
+        } else {
+            return;
+        }
+    });
+    return {
+        dataSource: dataSource,
+        brightness: brightness
+    };
+};
+
+function _define_property$b(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$b(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$b(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function IndicatorLight(param) {
+    var id = param.id, className = param.className, label = param.label, dataSource = param.dataSource, _param_activeColor = param.activeColor, activeColor = _param_activeColor === void 0 ? 'var(--color-brand)' : _param_activeColor, _param_inactiveColor = param.inactiveColor, inactiveColor = _param_inactiveColor === void 0 ? 'var(--bg-lv1)' : _param_inactiveColor, _param_shape = param.shape, shape = _param_shape === void 0 ? "round" : _param_shape, style = param.style;
+    var brightness = useIndicator({
+        id: id,
+        dataSource: dataSource
+    }).brightness;
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        gap: Box.gap.small,
+        alignItems: Box.alignItems.center,
+        width: "auto"
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: _object_spread$b({
+            position: 'relative',
+            width: '12px',
+            height: '12px',
+            borderRadius: shape === "round" ? '100%' : 'initial',
+            overflow: 'hidden'
+        }, style)
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        className: classnames('IndicatorLight-bg', 'bg-panel', className),
+        style: {
+            width: '12px',
+            height: '12px',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            background: inactiveColor
+        }
+    }), /*#__PURE__*/ React__default.createElement("div", {
+        className: classnames('IndicatorLight', 'bg-panel', className),
+        style: {
+            opacity: brightness,
+            // transition: `opacity 500ms ease-in`,
+            background: activeColor,
+            position: 'absolute',
+            width: '12px',
+            height: '12px',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+        }
+    })), label ? /*#__PURE__*/ React__default.createElement(Label, {
+        value: label
+    }) : null);
+}
+IndicatorLight.dataSource = DataSource;
+
+// Rotary Slider UI component.
+// Connects to Juce's Slider element
+function RotarySlider(param) {
+    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, className = param.className, id = param.id, onChange = param.onChange, trackWidth = param.trackWidth, // trackOffset,
+    indicatorId = param.indicatorId, indicatorLineColor = param.indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, width = param.width, markerShape = param.markerShape, _param_mockInitialNormalisedValue = param.mockInitialNormalisedValue, mockInitialNormalisedValue = _param_mockInitialNormalisedValue === void 0 ? 0 : _param_mockInitialNormalisedValue, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
+        start: 20.0,
+        end: 15000.0,
+        interval: 0.1,
+        skew: 0.7
+    } : _param_mockProperties; param.style;
+    var _rotarySliderSizeMap_size, _rotarySliderSizeMap_size1, _rotarySliderSizeMap_size2;
+    var _useSlider = useSlider({
+        id: id,
+        label: label,
+        mockProperties: mockProperties,
+        mockInitialNormalisedValue: mockInitialNormalisedValue,
+        onChange: onChange,
+        isRandomizable: isRandomizable
+    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, setToDefaultState = _useSlider.setToDefaultState, setNormalisedState = _useSlider.setNormalisedState, properties = _useSlider.properties;
+    return /*#__PURE__*/ React__default.createElement(ControlGroup, {
+        id: id,
+        width: width
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        className: "RotarySlider-wrapper",
+        flexDirection: Box.flexDirection.column,
+        gap: Box.gap.none,
+        flex: "0 1 auto"
+    }, label ? /*#__PURE__*/ React__default.createElement(Label, {
+        padding: [
+            Label.padding.none,
+            Label.padding.none,
+            Label.padding.small,
+            Label.padding.none
+        ],
+        fontSize: Label.fontSize.xSmall,
+        value: label
+    }) : null, /*#__PURE__*/ React__default.createElement(PositioningWrapper, {
+        top: '25%',
+        left: '-16px',
+        width: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size === void 0 ? void 0 : _rotarySliderSizeMap_size.width, "px"),
+        height: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size1 = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size1 === void 0 ? void 0 : _rotarySliderSizeMap_size1.height, "px"),
+        positionedElement: indicatorId ? /*#__PURE__*/ React__default.createElement(IndicatorLight, {
+            id: indicatorId,
+            dataSource: IndicatorLight.dataSource.event
+        }) : null
+    }, /*#__PURE__*/ React__default.createElement(RotaryCircle, {
+        polarity: polarity,
+        className: className,
+        id: id,
+        trackWidth: trackWidth,
+        markerShape: markerShape,
+        // trackOffset={trackOffset}
+        sliderValue: normalisedValue,
+        bindDrag: bindDrag,
+        onDoubleClick: setToDefaultState,
+        size: size,
+        indicatorLineColor: indicatorLineColor,
+        indicatorLineGradient: indicatorLineGradient,
+        trackColor: trackColor,
+        trackStrokeColor: trackStrokeColor,
+        knobStrokeColor: knobStrokeColor,
+        knobFillColor: knobFillColor
+    })), /*#__PURE__*/ React__default.createElement(Input, {
+        className: "ProgressCircle-value",
+        value: scaledValue,
+        id: id,
+        min: (properties === null || properties === void 0 ? void 0 : properties.start) || 0,
+        max: (properties === null || properties === void 0 ? void 0 : properties.end) || 0,
+        textAlign: Input.textAlign.center,
+        style: {
+            fontWeight: 'bold',
+            width: '100%',
+            maxWidth: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size2 = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size2 === void 0 ? void 0 : _rotarySliderSizeMap_size2.width, "px")
+        },
+        onComplete: function(value) {
+            var normalisedVal = properties && scaledToNormalised({
+                scaledValue: value,
+                start: properties === null || properties === void 0 ? void 0 : properties.start,
+                end: properties === null || properties === void 0 ? void 0 : properties.end,
+                skew: properties === null || properties === void 0 ? void 0 : properties.skew
+            });
+            normalisedVal !== undefined && setNormalisedState(normalisedVal);
+        }
+    })));
+}
+RotarySlider.polarity = Polarity;
+RotarySlider.size = RotarySliderSizes;
+RotarySlider.markerShape = RotarySliderMarkerShapes;
+
+var css_248z$6 = ".BarSlider {\n  --maxNarrowTrackIndicatorWidth: 6px;\n  --maxNarrowTrackWidth: 20px;\n  --minHorizontalWidth: 75px;\n  --minVerticalHeight: 75px;\n  --narrowTrackMargin: 8px;\n  --narrowTrackBorderRadius: 20px;\n}\n\n.BarSlider:hover {\n  cursor: pointer;\n}\n\n.BarSlider-Track {\n  touch-action: none;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  background-color: var(--bg-lv5);\n}\n\n.BarSlider-Track.isHighlighted {\n  background-color: var(--bg-lv6);\n}\n.Barslider-IndicatorLineWrapper,\n.BarSlider-MarkerWrapper {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  pointer-events: none;\n}\n\n.BarSlider-IndicatorLine {\n  position: absolute;\n  top: 0;\n  /* left: 0; */\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n\n.BarSlider-Marker {\n  position: absolute;\n  pointer-events: none;\n}\n\n/* Narrow variant */\n.BarSlider--narrowTrack .BarSlider-Track {\n  border-radius: var(--narrowTrackBorderRadius);\n  background-color: var(--bg-lv3);\n  box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.25);\n}\n\n/* .BarSlider--narrowTrack .BarSlider-IndicatorLine {\n  border-radius: var(--narrowTrackBorderRadius);\n} */\n\n.BarSlider--narrowTrack .BarSlider-Marker {\n  border-radius: var(--narrowTrackBorderRadius);\n}\n\n.BarSlider--narrowTrack .Barslider-IndicatorLineWrapper {\n  border-radius: var(--narrowTrackBorderRadius);\n  overflow: hidden;\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .Barslider-IndicatorLineWrapper,\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-MarkerWrapper {\n  bottom: var(--maxNarrowTrackIndicatorWidth);\n  left: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  width: var(--maxNarrowTrackIndicatorWidth);\n  height: calc(100% - (var(--narrowTrackMargin) * 2));\n  margin-left: var(--narrowTrackMargin);\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .Barslider-IndicatorLineWrapper,\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-MarkerWrapper {\n  top: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  left: var(--maxNarrowTrackIndicatorWidth);\n  height: var(--maxNarrowTrackIndicatorWidth);\n  width: calc(100% - (var(--narrowTrackMargin) * 2));\n  margin-bottom: var(--narrowTrackMargin);\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-Track {\n  height: 100%;\n  max-height: 100%;\n  width: var(--maxNarrowTrackWidth);\n  min-height: var(--minVerticalHeight);\n  max-width: var(--maxNarrowTrackWidth);\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-Track {\n  width: 100%;\n  max-width: 100%;\n  height: var(--maxNarrowTrackWidth);\n  max-height: var(--maxNarrowTrackWidth);\n  min-width: var(--minHorizontalWidth);\n}\n\n.BarSlider--narrowTrack.BarSlider--isVertical .BarSlider-IndicatorLine {\n  max-width: var(--maxNarrowTrackIndicatorWidth);\n  max-height: 100%;\n  left: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n}\n\n.BarSlider--narrowTrack.BarSlider--isHorizontal .BarSlider-IndicatorLine {\n  width: 100%;\n  max-width: 100%;\n  max-height: var(--maxNarrowTrackIndicatorWidth);\n  top: calc(50% - (var(--maxNarrowTrackIndicatorWidth) / 2));\n  /* left: var(--narrowTrackMargin);\n  right: calc(100% - var(--narrowTrackMargin)); */\n}\n/* Wide variant */\n\n.BarSlider--wideTrack .BarSlider-Track {\n  border-radius: 2px;\n}\n\n.BarSlider--wideTrack.BarSlider--isVertical .BarSlider-Track {\n  min-height: var(--minVerticalHeight);\n}\n\n.BarSlider-Input {\n  font-weight: bold;\n  width: 100%;\n}\n.BarSlider-Input.includeValueInHeightIsTrue {\n}\n\n.BarSlider-Input.includeValueInHeightIsFalse {\n  position: absolute;\n  bottom: -1.7em;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n";
+styleInject(css_248z$6);
+
+function _define_property$a(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$a(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$a(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$1(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props$1(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$1(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+// Slider UI component.
+// Connects to Juce's Slider element.
+var BarSliderVariants = /*#__PURE__*/ function(BarSliderVariants) {
+    BarSliderVariants["narrowTrack"] = "narrowTrack";
+    BarSliderVariants["wideTrack"] = "wideTrack";
+    return BarSliderVariants;
+}({});
+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, _param_dragOrientation = param.dragOrientation, dragOrientation = _param_dragOrientation === void 0 ? Orientation.vertical : _param_dragOrientation, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_isStandalone = param.isStandalone, isStandalone = _param_isStandalone === void 0 ? true : _param_isStandalone, _param_isHighlighted = param.isHighlighted, isHighlighted = _param_isHighlighted === void 0 ? false : _param_isHighlighted, showValue = param.showValue, className = param.className, id = param.id, onChange = param.onChange, style = param.style, _param_indicatorLineColor = param.indicatorLineColor, indicatorLineColor = _param_indicatorLineColor === void 0 ? 'var(--color-brand)' : _param_indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, markerFillColor = param.markerFillColor, markerStrokeColor = param.markerStrokeColor, _param_barSliderVariant = param.barSliderVariant, barSliderVariant = _param_barSliderVariant === void 0 ? "narrowTrack" : _param_barSliderVariant, label = param.label, _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,
+        interval: 0.1,
+        skew: 0.7
+    } : _param_mockProperties;
+    var sliderElementRef = useRef(null);
+    var isNarrowTrack = barSliderVariant === "narrowTrack";
+    var isWideTrack = barSliderVariant === "wideTrack";
+    var isHorizontal = orientation === Orientation.horizontal;
+    var isVertical = orientation === Orientation.vertical;
+    var defaultShowValueState = barSliderVariant === "narrowTrack" ? true : false;
+    dragOrientation = isHorizontal ? Orientation.horizontal : orientation;
+    var multiColorGradient = "linear-gradient(".concat(isHorizontal ? 'to right' : 'to top', ", var(--color-brand) 0%, var(--color-brand-secondary) 100%");
+    var singleColorGradient = "linear-gradient(".concat(isHorizontal ? 'to right' : 'to top', ", var(--color-brand-700) 0%, var(--color-brand) 100%");
+    var _obj;
+    var selectedGradientMap = (_obj = {}, _define_property$a(_obj, GradientStyles.multicolor, multiColorGradient), _define_property$a(_obj, GradientStyles.unicolor, singleColorGradient), _obj);
+    var _useSlider = useSlider({
+        id: id,
+        label: label,
+        mockProperties: mockProperties,
+        mockInitialNormalisedValue: mockInitialNormalisedValue,
+        onChange: onChange,
+        isRandomizable: isRandomizable,
+        orientation: orientation,
+        dragOrientation: dragOrientation,
+        sliderElementRef: sliderElementRef
+    }), bindBarSliderDrag = _useSlider.bindBarSliderDrag, bindSequenceBarSliderDrag = _useSlider.bindSequenceBarSliderDrag, // bindDrag,
+    normalisedValue = _useSlider.normalisedValue, setNormalisedState = _useSlider.setNormalisedState, properties = _useSlider.properties;
+    var drag = isStandalone ? bindBarSliderDrag : bindSequenceBarSliderDrag;
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        justifyContent: Box.justifyContent.center,
+        className: classnames('BarSlider', isNarrowTrack && 'BarSlider--narrowTrack', isWideTrack && 'BarSlider--wideTrack', isVertical && 'BarSlider--isVertical', isHorizontal && 'BarSlider--isHorizontal', className),
+        id: id,
+        ref: sliderElementRef,
+        gap: Box.gap.mediumSmall,
+        height: isVertical ? '100%' : 'auto',
+        style: {
+            position: 'relative'
+        }
+    }, ' ', label ? /*#__PURE__*/ React__default.createElement(Label, {
+        fontSize: Label.fontSize.xSmall,
+        value: label,
+        color: "var(--color-text)"
+    }) : null, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
+        className: 'Slider-center-marker'
+    }), /*#__PURE__*/ React__default.createElement(Box, {
+        padding: isNarrowTrack ? (showValue !== null && showValue !== void 0 ? showValue : defaultShowValueState) ? [
+            Box.padding.none,
+            Box.padding.mediumSmall,
+            Box.padding.none,
+            Box.padding.mediumSmall
+        ] : [
+            Box.padding.mediumSmall
+        ] : [
+            Box.padding.none
+        ],
+        height: "100%"
+    }, /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$a({
+        className: classnames('BarSlider-Track', isHighlighted && 'isHighlighted')
+    }, drag()), {
+        // onMouseEnter={onMouseEnter}
+        id: id,
+        style: _object_spread$a({
+            background: trackColor,
+            stroke: trackStrokeColor ? "1px solid ".concat(trackStrokeColor) : 'none'
+        }, style)
+    }), normalisedValue !== null && normalisedValue !== undefined ? /*#__PURE__*/ React__default.createElement("div", {
+        className: "Barslider-IndicatorLineWrapper"
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        // TODO: Why aren't the Tailwind classes working?
+        // className={classnames('h-full', 'w-full', 'absolute', 'bg-panel')}
+        className: "BarSlider-IndicatorLine",
+        style: _object_spread$a({
+            background: indicatorLineGradient ? selectedGradientMap[indicatorLineGradient] : indicatorLineColor,
+            opacity: isStandalone || isHighlighted ? '100%' : '80%',
+            top: "".concat(isHorizontal && isNarrowTrack && 'calc(50% - 3px)'),
+            left: "".concat(isVertical && isNarrowTrack && 'calc(50% - 3px)')
+        }, getBarTransformStyles({
+            orientation: orientation,
+            polarity: polarity,
+            normalisedValue: normalisedValue
+        }))
+    })) : '', isNarrowTrack ? /*#__PURE__*/ React__default.createElement("div", {
+        className: "BarSlider-MarkerWrapper",
+        style: {
+            bottom: '2px'
+        }
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        className: "BarSlider-Marker",
+        style: {
+            bottom: isVertical ? "calc(".concat(normalisedValue * 100, "% - 6px)") : '-6px',
+            left: isHorizontal ? "calc(".concat(normalisedValue * 100, "% - 6px)") : '-6px'
+        }
+    }, /*#__PURE__*/ React__default.createElement(BarSliderMarker, {
+        markerFillColor: markerFillColor,
+        markerStrokeColor: markerStrokeColor,
+        strokeWidth: 5
+    }))) : null)), (showValue !== null && showValue !== void 0 ? showValue : defaultShowValueState) ? /*#__PURE__*/ React__default.createElement(Input, {
+        className: "BarSlider-Input ".concat(includeValueInHeight ? 'includeValueInHeightIsTrue' : 'includeValueInHeightIsFalse'),
+        value: normalisedValue,
+        id: id,
+        min: (properties === null || properties === void 0 ? void 0 : properties.start) || 0,
+        max: (properties === null || properties === void 0 ? void 0 : properties.end) || 0,
+        type: Input.type.number,
+        textColor: 'var(--bg-lv12)',
+        style: {
+        },
+        textAlign: Input.textAlign.center,
+        onComplete: function(value) {
+            normalisedValue !== undefined && setNormalisedState(normalisedValue);
+        }
+    }) : null);
+}
+Slider$1.sliderType = SliderType;
+Slider$1.polarity = Polarity;
+Slider$1.orientation = Orientation;
+
+function _array_like_to_array$b(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$b(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 _sliced_to_array$b(arr, i) {
+    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$b();
+}
+function _unsupported_iterable_to_array$b(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
+}
+var useCombobox = function(param) {
+    var id = param.id, label = param.label, filter = param.filter; param.onChange; var _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader, isDisabled = param.isDisabled;
+    var _Object_values;
+    var comboBoxState = Juce.getComboBoxState(id);
+    var _useState = _sliced_to_array$b(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState[0], setProperties = _useState[1];
+    var _useState1 = _sliced_to_array$b(useState(0), 2), index = _useState1[0], setIndex = _useState1[1];
+    var prevIndex = useRef(null);
+    var nextIndex = useRef(null);
+    var prevDragDirection = useRef(null);
+    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, _useGlobalContext_globalState = _useGlobalContext.globalState, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels, modSlotTargets = _useGlobalContext_globalState.modSlotTargets, modSlotPreview = _useGlobalContext_globalState.modSlotPreview;
+    //TODO: Filter choices for subsequent rows
+    // const availableChoices = properties?.choices;
+    useEffect(function() {
+        setIndex(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex());
+    }, [
+        id
+    ]);
+    useEffect(function() {
         setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
     });
     useEffect(function() {
@@ -3684,360 +3961,120 @@ var useCombobox = function(param) {
                 setModSlotRowTargetAsPreview({
                     paramId: id
                 });
-            }
-            var directionY;
-            if (direction[1] * -1 === 1 && directionY !== prevDragDirection.current) {
-                directionY = 1;
-            } else if (direction[1] * -1 === -1 && directionY !== prevDragDirection.current) {
-                directionY = -1;
-            }
-            if (index < (properties === null || properties === void 0 ? void 0 : properties.choices.length) && directionY && directionY === 1) {
-                incrementIndex();
-            } else if (index > 0 && directionY && directionY === -1) {
-                decrementIndex();
-            }
-            // console.log(nextIndex.current, 'nextIndexnextIndexnextIndex');
-            if (nextIndex.current !== null && nextIndex.current !== undefined && nextIndex.current !== index.current) {
-                comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.setChoiceIndex(nextIndex.current);
-            }
-        }
-    }, {
-        enabled: !isDisabled
-    });
-    var onMouseEnter = function() {
-        if (displayValInHeader) {
-            highlightedItemChanged({
-                label: label,
-                value: automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[index]
-            });
-        }
-    };
-    var onClick = function() {
-        setModSlotRowTargetAsPreview({
-            paramId: id
-        });
-    };
-    var onDoubleClick = function() {
-        setModSlotRowTargetAsPreview({
-            paramId: id
-        });
-    };
-    return {
-        index: index,
-        valueString: automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[index],
-        setIndex: setIndex,
-        choices: properties === null || properties === void 0 ? void 0 : properties.choices,
-        filteredChoices: filteredChoices,
-        onMouseEnter: onMouseEnter,
-        onClick: onClick,
-        onDoubleClick: onDoubleClick,
-        bindDrag: bindDrag
-    };
-};
-
-// Rotary Slider UI component.
-// Connects to Juce's Slider element
-function RotaryCombobox(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, className = param.className, id = param.id, trackWidth = param.trackWidth, // trackOffset,
-    indicatorLineColor = param.indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, markerShape = param.markerShape;
-    var _useCombobox = useCombobox({
-        id: id
-    }), index = _useCombobox.index, choices = _useCombobox.choices, valueString = _useCombobox.valueString, onDoubleClick = _useCombobox.onDoubleClick, bindDrag = _useCombobox.bindDrag;
-    return /*#__PURE__*/ React__default.createElement(ControlGroup, {
-        id: id
-    }, /*#__PURE__*/ React__default.createElement(Box, {
-        className: "RotarySlider-wrapper",
-        flexDirection: Box.flexDirection.column,
-        gap: Box.gap.none,
-        flex: "0 1 auto"
-    }, label ? /*#__PURE__*/ React__default.createElement(Label, {
-        padding: [
-            Label.padding.none,
-            Label.padding.none,
-            Label.padding.small,
-            Label.padding.none
-        ],
-        fontSize: Label.fontSize.xSmall,
-        value: label
-    }) : null, /*#__PURE__*/ React__default.createElement(RotaryCircle, {
-        polarity: polarity,
-        className: className,
-        id: id,
-        markerShape: markerShape,
-        trackWidth: trackWidth,
-        // trackOffset={trackOffset}
-        sliderValue: scaledToNormalised({
-            scaledValue: index,
-            start: 0,
-            end: choices.length - 1
-        }),
-        bindDrag: bindDrag,
-        onDoubleClick: onDoubleClick,
-        size: size,
-        indicatorLineColor: indicatorLineColor,
-        indicatorLineGradient: indicatorLineGradient,
-        trackColor: trackColor,
-        trackStrokeColor: trackStrokeColor,
-        knobStrokeColor: knobStrokeColor,
-        knobFillColor: knobFillColor
-    }), /*#__PURE__*/ React__default.createElement(Label, {
-        fontSize: Label.fontSize.xSmall
-    }, valueString)));
-}
-RotaryCombobox.polarity = Polarity;
-RotaryCombobox.size = RotarySliderSizes;
-RotaryCombobox.markerShape = RotarySliderMarkerShapes;
-
-function _define_property$b(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread$b(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property$b(target, key, source[key]);
-        });
-    }
-    return target;
-}
-// Rotary Slider UI component.
-// Connects to Juce's Slider element
-function PositioningWrapper(param) {
-    var positionedElement = param.positionedElement, _param_top = param.top, top = _param_top === void 0 ? '0px' : _param_top, right = param.right, bottom = param.bottom, _param_left = param.left, left = _param_left === void 0 ? '0px' : _param_left, _param_margin = param.margin, margin = _param_margin === void 0 ? 0 : _param_margin, _param_height = param.height, height = _param_height === void 0 ? '100%' : _param_height, _param_width = param.width, width = _param_width === void 0 ? '100%' : _param_width, id = param.id, className = param.className, style = param.style, children = param.children;
-    return /*#__PURE__*/ React__default.createElement("div", {
-        id: id,
-        className: className,
-        style: _object_spread$b({
-            position: 'relative',
-            height: height,
-            width: width,
-            margin: margin
-        }, style)
-    }, children, /*#__PURE__*/ React__default.createElement("div", {
-        style: {
-            position: 'absolute',
-            top: top,
-            right: right,
-            bottom: bottom,
-            left: left
-        }
-    }, positionedElement ? positionedElement : null));
-}
-
-function _array_like_to_array$b(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes$b(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-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 _sliced_to_array$b(arr, i) {
-    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$b();
-}
-function _unsupported_iterable_to_array$b(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
-}
-// 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
-// ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
-var DataSource = /*#__PURE__*/ function(DataSource) {
-    DataSource["sliderAttachment"] = "sliderAttachment";
-    DataSource["buttonAttachment"] = "buttonAttachment";
-    DataSource["event"] = "event";
-    return DataSource;
-}({});
-var useIndicator = function(param) {
-    var id = param.id, _param_dataSource = param.dataSource, dataSource = _param_dataSource === void 0 ? "buttonAttachment" : _param_dataSource;
-    var isLocalhost = window.location.hostname === 'localhost';
-    // This value should be a range from 0 to 1
-    var _useState = _sliced_to_array$b(useState(0), 2), brightness = _useState[0], setBrightness = _useState[1];
-    var updateState = function() {
-        if (!isLocalhost && dataSource === "buttonAttachment") {
-            var _Juce_getToggleState;
-            var toggleState = (_Juce_getToggleState = Juce.getToggleState(id)) === null || _Juce_getToggleState === void 0 ? void 0 : _Juce_getToggleState.value;
-            setBrightness(toggleState);
-        } else if (!isLocalhost && dataSource === "sliderAttachment") {
-            var sliderState = Juce.getSliderState(id);
-            setBrightness(sliderState === null || sliderState === void 0 ? void 0 : sliderState.normalisedValue);
+            }
+            var directionY;
+            if (direction[1] * -1 === 1 && directionY !== prevDragDirection.current) {
+                directionY = 1;
+            } else if (direction[1] * -1 === -1 && directionY !== prevDragDirection.current) {
+                directionY = -1;
+            }
+            if (index < (properties === null || properties === void 0 ? void 0 : properties.choices.length) && directionY && directionY === 1) {
+                incrementIndex();
+            } else if (index > 0 && directionY && directionY === -1) {
+                decrementIndex();
+            }
+            // console.log(nextIndex.current, 'nextIndexnextIndexnextIndex');
+            if (nextIndex.current !== null && nextIndex.current !== undefined && nextIndex.current !== index.current) {
+                comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.setChoiceIndex(nextIndex.current);
+            }
         }
-    };
-    // Set the initial state
-    useEffect(function() {
-        updateState();
-    }, []);
-    // Update the local state when the ID changes
-    useEffect(function() {
-        updateState();
-    }, [
-        id
-    ]);
-    // Sets up listeners to handle changes on the backend
-    useEffect(function() {
-        if (!isLocalhost && dataSource === "buttonAttachment") {
-            var _toggleState_valueChangedEvent;
-            var toggleState = Juce.getToggleState(id);
-            var valueListenerId = toggleState === null || toggleState === void 0 ? void 0 : (_toggleState_valueChangedEvent = toggleState.valueChangedEvent) === null || _toggleState_valueChangedEvent === void 0 ? void 0 : _toggleState_valueChangedEvent.addListener(function() {
-                setBrightness(toggleState);
-            });
-            return function cleanup() {
-                var _toggleState_valueChangedEvent;
-                toggleState === null || toggleState === void 0 ? void 0 : (_toggleState_valueChangedEvent = toggleState.valueChangedEvent) === null || _toggleState_valueChangedEvent === void 0 ? void 0 : _toggleState_valueChangedEvent.removeListener(valueListenerId);
-            };
-        } else if (!isLocalhost && dataSource === "sliderAttachment") {
-            var _sliderState_valueChangedEvent;
-            var sliderState = Juce.getSliderState(id);
-            var valueListenerId1 = sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_valueChangedEvent = sliderState.valueChangedEvent) === null || _sliderState_valueChangedEvent === void 0 ? void 0 : _sliderState_valueChangedEvent.addListener(function() {
-                setBrightness(sliderState);
-            });
-            return function cleanup() {
-                var _sliderState_valueChangedEvent;
-                sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_valueChangedEvent = sliderState.valueChangedEvent) === null || _sliderState_valueChangedEvent === void 0 ? void 0 : _sliderState_valueChangedEvent.removeListener(valueListenerId1);
-            };
-        } else if (!isLocalhost && dataSource === "event") {
-            var getLFOOutdata = id && //@ts-expect-error
-            window.__JUCE__.backend.addEventListener("".concat(id), function(event) {
-                setBrightness(event);
+    }, {
+        enabled: !isDisabled
+    });
+    var onMouseEnter = function() {
+        if (displayValInHeader) {
+            highlightedItemChanged({
+                label: label,
+                value: automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[index]
             });
-            return function cleanup() {
-                //@ts-expect-error
-                window.__JUCE__.backend.removeEventListener(getLFOOutdata);
-            };
-        } else {
-            return;
         }
-    });
+    };
+    var onClick = function() {
+        setModSlotRowTargetAsPreview({
+            paramId: id
+        });
+    };
+    var onDoubleClick = function() {
+        setModSlotRowTargetAsPreview({
+            paramId: id
+        });
+    };
     return {
-        dataSource: dataSource,
-        brightness: brightness
+        index: index,
+        valueString: automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[index],
+        setIndex: setIndex,
+        choices: properties === null || properties === void 0 ? void 0 : properties.choices,
+        filteredChoices: filteredChoices,
+        onMouseEnter: onMouseEnter,
+        onClick: onClick,
+        onDoubleClick: onDoubleClick,
+        bindDrag: bindDrag
     };
 };
 
-function _define_property$a(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread$a(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function IndicatorLight(param) {
-    var id = param.id, className = param.className, label = param.label, dataSource = param.dataSource, _param_activeColor = param.activeColor, activeColor = _param_activeColor === void 0 ? 'var(--color-brand)' : _param_activeColor, _param_inactiveColor = param.inactiveColor, inactiveColor = _param_inactiveColor === void 0 ? 'var(--bg-lv1)' : _param_inactiveColor, _param_shape = param.shape, shape = _param_shape === void 0 ? "round" : _param_shape, style = param.style;
-    var brightness = useIndicator({
+// Rotary Slider UI component.
+// Connects to Juce's Slider element
+function RotaryCombobox(param) {
+    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, className = param.className, id = param.id, indicatorId = param.indicatorId, trackWidth = param.trackWidth, width = param.width, // trackOffset,
+    indicatorLineColor = param.indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, markerShape = param.markerShape;
+    var _rotarySliderSizeMap_size, _rotarySliderSizeMap_size1;
+    var _useCombobox = useCombobox({
+        id: id
+    }), index = _useCombobox.index, choices = _useCombobox.choices, valueString = _useCombobox.valueString, onDoubleClick = _useCombobox.onDoubleClick, bindDrag = _useCombobox.bindDrag;
+    return /*#__PURE__*/ React__default.createElement(ControlGroup, {
         id: id,
-        dataSource: dataSource
-    }).brightness;
-    return /*#__PURE__*/ React__default.createElement(Box, {
+        width: width
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        className: "RotarySlider-wrapper",
         flexDirection: Box.flexDirection.column,
-        gap: Box.gap.small,
-        alignItems: Box.alignItems.center,
-        width: "auto"
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        style: _object_spread$a({
-            position: 'relative',
-            width: '12px',
-            height: '12px',
-            borderRadius: shape === "round" ? '100%' : 'initial',
-            overflow: 'hidden'
-        }, style)
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('IndicatorLight-bg', 'bg-panel', className),
-        style: {
-            width: '12px',
-            height: '12px',
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            background: inactiveColor
-        }
-    }), /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('IndicatorLight', 'bg-panel', className),
-        style: {
-            opacity: brightness,
-            // transition: `opacity 500ms ease-in`,
-            background: activeColor,
-            position: 'absolute',
-            width: '12px',
-            height: '12px',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0
-        }
-    })), label ? /*#__PURE__*/ React__default.createElement(Label, {
+        gap: Box.gap.none,
+        flex: "0 1 auto"
+    }, label ? /*#__PURE__*/ React__default.createElement(Label, {
+        padding: [
+            Label.padding.none,
+            Label.padding.none,
+            Label.padding.small,
+            Label.padding.none
+        ],
+        fontSize: Label.fontSize.xSmall,
         value: label
-    }) : null);
+    }) : null, /*#__PURE__*/ React__default.createElement(PositioningWrapper, {
+        top: '25%',
+        left: '-16px',
+        width: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size === void 0 ? void 0 : _rotarySliderSizeMap_size.width, "px"),
+        height: "".concat(rotarySliderSizeMap === null || rotarySliderSizeMap === void 0 ? void 0 : (_rotarySliderSizeMap_size1 = rotarySliderSizeMap[size]) === null || _rotarySliderSizeMap_size1 === void 0 ? void 0 : _rotarySliderSizeMap_size1.height, "px"),
+        positionedElement: indicatorId ? /*#__PURE__*/ React__default.createElement(IndicatorLight, {
+            id: indicatorId,
+            dataSource: IndicatorLight.dataSource.event
+        }) : null
+    }, /*#__PURE__*/ React__default.createElement(RotaryCircle, {
+        polarity: polarity,
+        className: className,
+        id: id,
+        markerShape: markerShape,
+        trackWidth: trackWidth,
+        // trackOffset={trackOffset}
+        sliderValue: scaledToNormalised({
+            scaledValue: index,
+            start: 0,
+            end: choices.length - 1
+        }),
+        bindDrag: bindDrag,
+        onDoubleClick: onDoubleClick,
+        size: size,
+        indicatorLineColor: indicatorLineColor,
+        indicatorLineGradient: indicatorLineGradient,
+        trackColor: trackColor,
+        trackStrokeColor: trackStrokeColor,
+        knobStrokeColor: knobStrokeColor,
+        knobFillColor: knobFillColor
+    })), /*#__PURE__*/ React__default.createElement(Label, {
+        fontSize: Label.fontSize.xSmall
+    }, valueString)));
 }
-IndicatorLight.dataSource = DataSource;
+RotaryCombobox.polarity = Polarity;
+RotaryCombobox.size = RotarySliderSizes;
+RotaryCombobox.markerShape = RotarySliderMarkerShapes;
 
 // Rotary Slider UI component.
 // Connects to Juce's Slider element
@@ -4048,26 +4085,16 @@ var SliderVariants = /*#__PURE__*/ function(SliderVariants) {
     return 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, label = param.label, labelColor = param.labelColor, indicatorLineColor = param.indicatorLineColor, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, markerFillColor = param.markerFillColor, markerStrokeColor = param.markerStrokeColor, markerShape = param.markerShape, indicatorLineGradient = param.indicatorLineGradient, trackWidth = param.trackWidth, className = param.className, id = param.id, onChange = param.onChange, indicatorId = param.indicatorId, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, _param_mockInitialNormalisedValue = param.// trackOffset = 0,
+    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, label = param.label, labelColor = param.labelColor, indicatorLineColor = param.indicatorLineColor, trackColor = param.trackColor, trackStrokeColor = param.trackStrokeColor, knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, markerFillColor = param.markerFillColor, markerStrokeColor = param.markerStrokeColor, markerShape = param.markerShape, indicatorLineGradient = param.indicatorLineGradient, trackWidth = param.trackWidth, className = param.className, id = param.id, width = param.width, onChange = param.onChange, indicatorId = param.indicatorId, _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, barSliderVariant = param.barSliderVariant, showValue = param.showValue, includeValueInHeight = param.includeValueInHeight, isRandomizable = param.isRandomizable, rotationBehavior = param.rotationBehavior, orientation = param.orientation, dragOrientation = param.dragOrientation, isStandalone = param.isStandalone, isHighlighted = param.isHighlighted; param.mockProperties; param.style;
-    var totalWidth = "".concat(rotarySliderSizeMap[size].width + 35, "px");
-    var totalHeight = "calc(".concat(rotarySliderSizeMap[size].width, " + 1em + ").concat(label ? 1 : 0, "em)");
-    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, variant === "rotary" ? /*#__PURE__*/ React__default.createElement(PositioningWrapper, {
-        top: '25%',
-        left: '-8px',
-        width: totalWidth,
-        height: totalHeight,
-        positionedElement: indicatorId ? /*#__PURE__*/ React__default.createElement(IndicatorLight, {
-            id: indicatorId,
-            dataSource: IndicatorLight.dataSource.event
-        }) : null
-    }, /*#__PURE__*/ React__default.createElement(RotarySlider, {
+    return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, variant === "rotary" ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
         polarity: polarity,
         label: label,
         labelColor: labelColor,
         trackWidth: trackWidth,
         indicatorLineColor: indicatorLineColor,
         indicatorLineGradient: indicatorLineGradient,
+        width: width,
         // trackOffset={trackOffset}
         markerShape: markerShape,
         trackColor: trackColor,
@@ -4076,23 +4103,16 @@ function Slider(param) {
         knobFillColor: knobFillColor,
         className: className,
         id: id,
+        indicatorId: indicatorId,
         onChange: onChange,
         size: size,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         isRandomizable: isRandomizable,
         rotationBehavior: rotationBehavior
-    })) : null, variant === "rotaryCombobox" ? /*#__PURE__*/ React__default.createElement(PositioningWrapper, {
-        top: '25%',
-        left: '-8px',
-        width: totalWidth,
-        height: totalHeight,
-        positionedElement: indicatorId ? /*#__PURE__*/ React__default.createElement(IndicatorLight, {
-            id: indicatorId,
-            dataSource: IndicatorLight.dataSource.event
-        }) : null
-    }, /*#__PURE__*/ React__default.createElement(RotaryCombobox, {
+    }) : null, variant === "rotaryCombobox" ? /*#__PURE__*/ React__default.createElement(RotaryCombobox, {
         polarity: polarity,
         label: label,
+        width: width,
         labelColor: labelColor,
         trackWidth: trackWidth,
         indicatorLineColor: indicatorLineColor,
@@ -4105,12 +4125,13 @@ function Slider(param) {
         knobFillColor: knobFillColor,
         className: className,
         id: id,
+        indicatorId: indicatorId,
         onChange: onChange,
         size: size,
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         isRandomizable: isRandomizable,
         rotationBehavior: rotationBehavior
-    })) : null, variant === "bar" ? /*#__PURE__*/ React__default.createElement(Slider$1, {
+    }) : null, variant === "bar" ? /*#__PURE__*/ React__default.createElement(Slider$1, {
         polarity: polarity,
         label: label,
         indicatorLineColor: indicatorLineColor,
@@ -5456,7 +5477,7 @@ function ModuleHeader(param) {
     }, "Advanced")))));
 }
 
-var css_248z$2 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n}\n\n.ModMatrixCell.isDisabled {\n  color: var(--color-gray-400);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* .isActive .ModMatrixCell {\n  background: var(--color-gray-600);\n} */\n\n.ModMatrixToggleCell {\n  cursor: pointer;\n}\n\n.ModMatrixComboboxCell {\n  background: #252429;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  bottom: -151px;\n  left: 0px;\n  height: 150px;\n  width: 100%;\n  background: var(--color-gray-500);\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  overflow-y: auto;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active,\n.ModMatrixComboboxItem[data-selected] {\n  background: var(--color-gray-600);\n}\n\n.ModMatrixComboboxItem {\n  padding: var(--spacing-md) var(--spacing-lg);\n  width: 100%;\n}\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n\n.ModMatrixInput {\n  text-align: center;\n  margin-top: 3px;\n}\n";
+var css_248z$2 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n}\n\n.ModMatrixCell.isDisabled {\n  color: var(--color-gray-400);\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* .isActive .ModMatrixCell {\n  background: var(--color-gray-600);\n} */\n\n.ModMatrixToggleCell {\n  cursor: pointer;\n}\n\n.ModMatrixComboboxCell {\n  background: #252429;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItems {\n  position: absolute;\n  z-index: 50;\n  bottom: -151px;\n  left: 0px;\n  height: 150px;\n  width: 100%;\n  background: var(--color-gray-500);\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  overflow-y: auto;\n  overflow-x: hidden;\n  cursor: pointer;\n}\n\n.ModMatrixComboboxItem:hover,\n.ModMatrixComboboxItem:active,\n.ModMatrixComboboxItem[data-selected] {\n  background: var(--color-gray-600);\n}\n\n.ModMatrixComboboxItem {\n  padding: var(--spacing-md) var(--spacing-lg);\n  width: 100%;\n}\n.ModMatrixComboboxButton {\n  cursor: pointer;\n}\n\n.ModMatrixInput {\n  text-align: center;\n  margin-top: 3px;\n}\n";
 styleInject(css_248z$2);
 
 var targetColors = [
@@ -6872,20 +6893,21 @@ function LFOBox(param) {
             Box.padding.large,
             Box.padding.mediumLarge
         ],
+        flex: "1 1 auto",
         fullHeight: true
     }, /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
         justifyContent: Box.justifyContent.flexStart,
         alignItems: Box.alignItems.flexStart,
         width: "130px",
-        flex: "0 0 130px",
+        // flex="0 0 130px"
         // padding={[Box.padding.medium]}
         fullHeight: true
     }, /*#__PURE__*/ React__default.createElement(Heading, {
         padding: [
             Heading.padding.none,
             Heading.padding.none,
-            Heading.padding.large,
+            Heading.padding.small,
             Heading.padding.none
         ],
         removeLineHeight: true,
@@ -6895,7 +6917,11 @@ function LFOBox(param) {
         flex: "1",
         gap: Box.gap.large,
         justifyContent: Box.justifyContent.flexStart
-    }, /*#__PURE__*/ React__default.createElement(Box, null, syncType === 0 ? /*#__PURE__*/ React__default.createElement(Slider, {
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        padding: [
+            Box.padding.small
+        ]
+    }, syncType === 0 ? /*#__PURE__*/ React__default.createElement(Slider, {
         size: Slider.size.large,
         id: "LFO".concat(id, "_Hz"),
         label: "LFO".concat(id, " Hz"),
@@ -7013,7 +7039,11 @@ function LFOTab() {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "LFOTab",
         gap: Box.gap.medium,
-        height: "100%"
+        fullHeight: true,
+        alignItems: Box.alignItems.flexStart,
+        padding: [
+            Box.padding.medium
+        ]
     }, /*#__PURE__*/ React__default.createElement(LFOBox, {
         id: 1
     }), /*#__PURE__*/ React__default.createElement(LFOBox, {
@@ -7220,10 +7250,11 @@ function SeqTab$1(param) {
         padding: [
             Box.padding.mediumLarge
         ],
-        height: "100%"
+        fullHeight: true
     }, /*#__PURE__*/ React__default.createElement(Box, {
         gap: Box.gap.medium,
-        justifyContent: Box.justifyContent.flexStart
+        justifyContent: Box.justifyContent.flexStart,
+        fullHeight: true
     }, /*#__PURE__*/ React__default.createElement(Heading, {
         padding: [
             Heading.padding.none,
@@ -7238,10 +7269,12 @@ function SeqTab$1(param) {
         gap: Box.gap.medium,
         height: "100%"
     }, /*#__PURE__*/ React__default.createElement(Box, {
-        flex: "1 0 auto"
+        flex: "0 0 170px",
+        height: "170px"
     }, /*#__PURE__*/ React__default.createElement(StepSequencer, {
         seqId: seqId
     })), /*#__PURE__*/ React__default.createElement(Box, {
+        height: "71px",
         gap: Box.gap.medium,
         padding: [
             Box.padding.none,
@@ -7277,10 +7310,12 @@ function SeqTab$1(param) {
         id: "seq".concat(seqId, "_syncRate"),
         label: "Seq".concat(seqId, " Sync Rate")
     }) : null, syncType === 3 ? /*#__PURE__*/ React__default.createElement(Slider, {
+        width: "155px",
         id: "seq".concat(seqId, "_thirds"),
         indicatorLineGradient: Slider.gradientStyles.unicolor,
         label: "Seq".concat(seqId, " Thirds")
     }) : null, syncType === 4 ? /*#__PURE__*/ React__default.createElement(Slider, {
+        width: "155px",
         indicatorLineGradient: Slider.gradientStyles.unicolor,
         id: "seq".concat(seqId, "_sixteenths"),
         label: "Seq".concat(seqId, " Sixteenths")
@@ -7298,7 +7333,11 @@ function SeqTab() {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "SeqTab",
         gap: Box.gap.medium,
-        fullHeight: true
+        fullHeight: true,
+        alignItems: Box.alignItems.flexStart,
+        padding: [
+            Box.padding.medium
+        ]
     }, /*#__PURE__*/ React__default.createElement(SeqTab$1, {
         seqId: 1
     }), /*#__PURE__*/ React__default.createElement(SeqTab$1, {
@@ -7597,12 +7636,13 @@ function ModuleFooter(param) {
         style: _object_spread({
             backgroundColor: 'var(--bg-lv3)'
         }, style),
-        flex: "1 1 auto"
+        height: "342px"
     }, /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
-        height: "100%",
+        fullHeight: true,
         justifyContent: Box.justifyContent.flexStart
     }, /*#__PURE__*/ React__default.createElement(Box, {
+        height: "32px",
         // style={{ backgroundColor: 'var(--bg-lv4)' }}
         padding: [
             Box.padding.xSmall,
@@ -7627,13 +7667,12 @@ function ModuleFooter(param) {
         ],
         backgroundColor: "var(--bg-lv4)",
         selectedBackgroundColor: "var(--bg-lv3)",
-        width: "100%"
+        width: "100%",
+        height: "32px"
     })), /*#__PURE__*/ React__default.createElement(Box, {
-        padding: [
-            Box.padding.medium
-        ],
         alignItems: Box.alignItems.flexStart,
-        flex: "1 1 auto"
+        height: "305px",
+        width: "100%"
     }, selectedTab === Object.keys(FooterTabs).indexOf("ModMatrix") ? /*#__PURE__*/ React__default.createElement(ModMatrixTab, null) : '', selectedTab === Object.keys(FooterTabs).indexOf("InputMod") ? /*#__PURE__*/ React__default.createElement(InputModTab, null) : '', selectedTab === Object.keys(FooterTabs).indexOf("LFOs") ? /*#__PURE__*/ React__default.createElement(LFOTab, null) : '', selectedTab === Object.keys(FooterTabs).indexOf("Sequencer") ? /*#__PURE__*/ React__default.createElement(SequencerTab, null) : '', selectedTab === Object.keys(FooterTabs).indexOf("Settings") ? /*#__PURE__*/ React__default.createElement(SettingsTab, null) : '')));
 }