@antimatter-audio/antimatter-ui 12.0.4 → 14.0.0

package/dist/index.js

@@ -33,8 +33,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$c = "@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-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-page: #111111;\n  --bg-section: #1e1d21;\n  --bg-popover: #09090a;\n  --bg-highlighted: #838091;\n  --bg-muted: #595763;\n  --bg-selected: #2e2c33;\n  --bg-input: #1e1d21;\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: not-allowed;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n.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$c);
+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";
+styleInject(css_248z$f);
 
 var Spacing = /*#__PURE__*/ function(Spacing) {
     Spacing["none"] = "none";
@@ -52,11 +52,35 @@ var FlexDirection = /*#__PURE__*/ function(FlexDirection) {
     FlexDirection["column"] = "column";
     return FlexDirection;
 }({});
+var TextAlign = /*#__PURE__*/ function(TextAlign) {
+    TextAlign["left"] = "left";
+    TextAlign["center"] = "center";
+    TextAlign["right"] = "right";
+    return TextAlign;
+}({});
 var FlexWrap = /*#__PURE__*/ function(FlexWrap) {
     FlexWrap["wrap"] = "wrap";
     FlexWrap["noWrap"] = "nowrap";
     return FlexWrap;
 }({});
+var JustifyContent$1 = /*#__PURE__*/ function(JustifyContent) {
+    JustifyContent["flexStart"] = "flex-start";
+    JustifyContent["flexEnd"] = "flex-end";
+    JustifyContent["center"] = "center";
+    JustifyContent["spaceBetween"] = "space-between";
+    JustifyContent["spaceAround"] = "space-around";
+    JustifyContent["spaceEvenly"] = "space-evenly";
+    JustifyContent["stretch"] = "stretch";
+    return JustifyContent;
+}({});
+var AlignItems$1 = /*#__PURE__*/ function(AlignItems) {
+    AlignItems["flexStart"] = "flex-start";
+    AlignItems["flexEnd"] = "flex-end";
+    AlignItems["center"] = "center";
+    AlignItems["stretch"] = "stretch";
+    AlignItems["baseline"] = "baseline";
+    return AlignItems;
+}({});
 var Height = /*#__PURE__*/ function(Height) {
     Height["full"] = "100%";
     Height["auto"] = "auto";
@@ -87,65 +111,11 @@ var Orientation = /*#__PURE__*/ function(Orientation) {
     return Orientation;
 }({});
 
-var css_248z$b = ".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";
-styleInject(css_248z$b);
-
-function Tabs(param) {
-    var items = param.items, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.mediumSmall
-    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
-        Spacing.none
-    ] : _param_margin, gap = param.gap, width = param.width, onChange = param.onChange, selectedIndex = param.selectedIndex;
-    // const [selectedItem, setSelectedItem] = useState(0);
-    var handleChange = function(index) {
-        // setSelectedItem(index);
-        onChange(index);
-    };
-    var _margin_, _margin_1, _margin_2, _ref;
-    //around
-    //vertical, horizontal
-    // top, right, bottom, left
-    return /*#__PURE__*/ React__default.createElement(TabGroup, {
-        style: {
-            marginTop: "var(--mt-".concat(margin[0], ")"),
-            marginRight: "var(--mr-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
-            marginBottom: "var(--mb-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
-            marginLeft: "var(--ml-".concat((_ref = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref !== void 0 ? _ref : margin[0], ")"),
-            width: width
-        },
-        manual: true,
-        selectedIndex: selectedIndex,
-        onChange: function(index) {
-            return handleChange(index);
-        }
-    }, /*#__PURE__*/ React__default.createElement(TabList, {
-        className: classnames('Tabs', className),
-        style: {
-            gap: gap
-        }
-    }, items && items.map(function(item, index) {
-        var _padding_, _padding_1, _padding_2, _ref;
-        return /*#__PURE__*/ React__default.createElement(Tab, {
-            key: item,
-            id: item,
-            style: {
-                cursor: 'pointer',
-                fontSize: 'var(--text-md)',
-                lineHeight: '1.25rem',
-                paddingTop: "var(--p-".concat(padding[0], ")"),
-                paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
-                paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
-                paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")")
-            },
-            className: classnames('Tabs-item', 'bg-input', 'color-input-text')
-        }, item);
-    })));
-}
-Tabs.padding = Spacing;
-Tabs.margin = Spacing;
+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";
+styleInject(css_248z$e);
 
-var css_248z$a = ".Button {\n  font-size: var(--text-xs);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: var(--spacing-ms);\n  padding-left: var(--spacing-ms);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: enter;\n  border: 0;\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  &.xSmall {\n    width: var(--spacing-ml);\n    height: var(--spacing-ml);\n  }\n  &.small {\n    font-size: var(--text-xs);\n    min-width: 1rem;\n    min-height: var(--spacing-sm);\n  }\n  &.large {\n    border-radius: var(--radius-sm);\n    min-width: 1rem;\n    min-height: var(--spacing-xl);\n  }\n}\n";
-styleInject(css_248z$a);
+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";
+styleInject(css_248z$d);
 
 var ButtonSize = /*#__PURE__*/ function(ButtonSize) {
     ButtonSize["xSmall"] = "xSmall";
@@ -199,13 +169,13 @@ function useObservable(param) {
     };
 }
 
-function _array_like_to_array$j(arr, len) {
+function _array_like_to_array$k(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
 function _array_without_holes$2(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$j(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$k(arr);
 }
 function _iterable_to_array$2(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
@@ -214,15 +184,15 @@ function _non_iterable_spread$2() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _to_consumable_array$2(arr) {
-    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$j(arr) || _non_iterable_spread$2();
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$k(arr) || _non_iterable_spread$2();
 }
-function _unsupported_iterable_to_array$j(o, minLen) {
+function _unsupported_iterable_to_array$k(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$j(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$k(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$j(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$k(o, minLen);
 }
 // export const roundUpToTwoDecimals = (val: number) => Math.ceil(val * 100) / 100;
 // mocks the `normalisedToScaledValue` internal method from JUCE
@@ -358,17 +328,31 @@ var incrementValue = function(param) {
     normalisedInterval;
     return clamp(newValue);
 };
+var timerFlag = null;
+function throttle(mainFunction, delay) {
+    return function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        if (timerFlag === null) {
+            mainFunction.apply(void 0, _to_consumable_array$2(args));
+            timerFlag = setTimeout(function() {
+                timerFlag = null;
+            }, delay);
+        }
+    };
+}
 
-function _array_like_to_array$i(arr, len) {
+function _array_like_to_array$j(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$i(arr) {
+function _array_with_holes$j(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _array_without_holes$1(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$i(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$j(arr);
 }
 function asyncGeneratorStep$4(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -399,7 +383,7 @@ function _async_to_generator$4(fn) {
         });
     };
 }
-function _define_property$k(obj, key, value) {
+function _define_property$m(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -415,7 +399,7 @@ function _define_property$k(obj, key, value) {
 function _iterable_to_array$1(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-function _iterable_to_array_limit$i(arr, i) {
+function _iterable_to_array_limit$j(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -439,13 +423,13 @@ function _iterable_to_array_limit$i(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$i() {
+function _non_iterable_rest$j() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _non_iterable_spread$1() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$k(target) {
+function _object_spread$l(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -455,7 +439,7 @@ function _object_spread$k(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$k(target, key, source[key]);
+            _define_property$m(target, key, source[key]);
         });
     }
     return target;
@@ -479,19 +463,19 @@ function _object_spread_props$4(target, source) {
     }
     return target;
 }
-function _sliced_to_array$i(arr, i) {
-    return _array_with_holes$i(arr) || _iterable_to_array_limit$i(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$i();
+function _sliced_to_array$j(arr, i) {
+    return _array_with_holes$j(arr) || _iterable_to_array_limit$j(arr, i) || _unsupported_iterable_to_array$j(arr, i) || _non_iterable_rest$j();
 }
 function _to_consumable_array$1(arr) {
-    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$i(arr) || _non_iterable_spread$1();
+    return _array_without_holes$1(arr) || _iterable_to_array$1(arr) || _unsupported_iterable_to_array$j(arr) || _non_iterable_spread$1();
 }
-function _unsupported_iterable_to_array$i(o, minLen) {
+function _unsupported_iterable_to_array$j(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$i(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$j(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$j(o, minLen);
 }
 function _ts_generator$4(thisArg, body) {
     var f, y, t, _ = {
@@ -611,61 +595,61 @@ var defaultGlobalStateValue = {
 var reducer = function(state, action) {
     switch(action.type){
         case 'HIGHLIGHTED_ITEM_CHANGED':
-            return _object_spread_props$4(_object_spread$k({}, state), {
+            return _object_spread_props$4(_object_spread$l({}, state), {
                 highlightedItem: action.payload
             });
         // case 'FOCUSED_ITEM_CHANGED':
         //   return { ...state, focusedItem: action.payload };
         case 'ADVANCED_VIEW_TOGGLED':
-            return _object_spread_props$4(_object_spread$k({}, state), {
+            return _object_spread_props$4(_object_spread$l({}, state), {
                 advancedView: action.payload
             });
         case 'AUTOMATABLE_PARAMS_LIST_RECEIVED':
-            return _object_spread_props$4(_object_spread$k({}, state), {
+            return _object_spread_props$4(_object_spread$l({}, state), {
                 automatableParamsList: action.payload
             });
         case 'AUTOMATABLE_PARAM_LABELS_RECEIVED':
-            return _object_spread_props$4(_object_spread$k({}, state), {
+            return _object_spread_props$4(_object_spread$l({}, state), {
                 automatableParamLabels: action.payload
             });
         case 'PARAMETER_TYPES_RECEIVED':
-            return _object_spread_props$4(_object_spread$k({}, state), {
+            return _object_spread_props$4(_object_spread$l({}, state), {
                 parameterTypes: action.payload
             });
         case 'ALL_PARAMETERS_RECEIVED':
-            return _object_spread_props$4(_object_spread$k({}, state), {
+            return _object_spread_props$4(_object_spread$l({}, state), {
                 allParameters: action.payload
             });
         case 'MOD_SLOTS_RECEIVED':
-            return _object_spread_props$4(_object_spread$k({}, state), {
+            return _object_spread_props$4(_object_spread$l({}, state), {
                 modSlotIds: action.payload.map(function(val) {
                     return val[0];
                 })
             });
         case 'MOD_SLOT_ROW_TARGETS_RECEIVED':
             var _action_payload;
-            return _object_spread_props$4(_object_spread$k({}, state), {
+            return _object_spread_props$4(_object_spread$l({}, state), {
                 modSlotTargets: action === null || action === void 0 ? void 0 : (_action_payload = action.payload) === null || _action_payload === void 0 ? void 0 : _action_payload.reduce(function(acc, val) {
-                    return _object_spread_props$4(_object_spread$k({}, acc), _define_property$k({}, val[0], val[1]));
+                    return _object_spread_props$4(_object_spread$l({}, acc), _define_property$m({}, val[0], val[1]));
                 }, {})
             });
         case 'MOD_SLOT_ROW_TARGET_UPDATED':
             var _action_payload1, _action_payload2;
-            return _object_spread_props$4(_object_spread$k({}, state), {
-                modSlotTargets: _object_spread_props$4(_object_spread$k({}, state === null || state === void 0 ? void 0 : state.modSlotTargets), _define_property$k({}, (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1.id, action === null || action === void 0 ? void 0 : (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2.value))
+            return _object_spread_props$4(_object_spread$l({}, state), {
+                modSlotTargets: _object_spread_props$4(_object_spread$l({}, state === null || state === void 0 ? void 0 : state.modSlotTargets), _define_property$m({}, (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1.id, action === null || action === void 0 ? void 0 : (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2.value))
             });
         case 'MOD_SLOT_PREVIEW_TARGET_INDEX_UPDATED':
             {
-                return _object_spread_props$4(_object_spread$k({}, state), {
-                    modSlotPreview: _object_spread_props$4(_object_spread$k({}, state.modSlotPreview), {
+                return _object_spread_props$4(_object_spread$l({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$l({}, state.modSlotPreview), {
                         targetIndex: action.payload
                     })
                 });
             }
         case 'MOD_SLOT_PREVIEW_SLOT_ID_UPDATED':
             {
-                return _object_spread_props$4(_object_spread$k({}, state), {
-                    modSlotPreview: _object_spread_props$4(_object_spread$k({}, state.modSlotPreview), {
+                return _object_spread_props$4(_object_spread$l({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$l({}, state.modSlotPreview), {
                         slotId: action === null || action === void 0 ? void 0 : action.payload
                     })
                 });
@@ -673,7 +657,7 @@ var reducer = function(state, action) {
         case 'SET_NEW_MOD_SLOT_PREVIEW':
             {
                 var _state_modSlotIds_find;
-                return _object_spread_props$4(_object_spread$k({}, state), {
+                return _object_spread_props$4(_object_spread$l({}, state), {
                     modSlotPreview: {
                         slotId: (_state_modSlotIds_find = state.modSlotIds.find(function(item) {
                             return state.modSlotTargets[item] <= 0;
@@ -685,7 +669,7 @@ var reducer = function(state, action) {
             }
         case 'CLEAR_MOD_SLOT_PREVIEW':
             {
-                return _object_spread_props$4(_object_spread$k({}, state), {
+                return _object_spread_props$4(_object_spread$l({}, state), {
                     modSlotPreview: {
                         slotId: '',
                         isEditable: false,
@@ -695,26 +679,26 @@ var reducer = function(state, action) {
             }
         case 'MOD_SLOT_PREVIEW_IS_EDITABLE_UPDATED':
             {
-                return _object_spread_props$4(_object_spread$k({}, state), {
-                    modSlotPreview: _object_spread_props$4(_object_spread$k({}, state.modSlotPreview), {
+                return _object_spread_props$4(_object_spread$l({}, state), {
+                    modSlotPreview: _object_spread_props$4(_object_spread$l({}, state.modSlotPreview), {
                         isEditable: action === null || action === void 0 ? void 0 : action.payload
                     })
                 });
             }
         case 'MOD_SLOT_PARAMS_LIST_RECEIVED':
             var modSlotNames = Object.keys(state.modSlotTargets);
-            return _object_spread_props$4(_object_spread$k({}, state), {
+            return _object_spread_props$4(_object_spread$l({}, state), {
                 modSlotParams: action === null || action === void 0 ? void 0 : action.payload.reduce(function(acc, item, i) {
                     acc[modSlotNames[i]] = item;
                     return acc;
                 }, {})
             });
         case 'DEFAULT_PARAM_VALUES_RECEIVED':
-            return _object_spread_props$4(_object_spread$k({}, state), {
+            return _object_spread_props$4(_object_spread$l({}, state), {
                 defaultParamValues: action === null || action === void 0 ? void 0 : action.payload
             });
         case 'MOD_SLOT_PARAM_LABELS_RECIEVED':
-            return _object_spread_props$4(_object_spread$k({}, state), {
+            return _object_spread_props$4(_object_spread$l({}, state), {
                 modSlotParamLabels: action === null || action === void 0 ? void 0 : action.payload
             });
         default:
@@ -733,7 +717,7 @@ function useGlobalContext(selector) {
 // Context provider
 function GlobalContextProvider(param) {
     var children = param.children;
-    var _useReducer = _sliced_to_array$i(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
+    var _useReducer = _sliced_to_array$j(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
     var highlightedItemChanged = useCallback(function(highlightedItem) {
         dispatch({
             type: 'HIGHLIGHTED_ITEM_CHANGED',
@@ -1001,15 +985,15 @@ function GlobalContextProvider(param) {
     }, children);
 }
 
-function _array_like_to_array$h(arr, len) {
+function _array_like_to_array$i(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$h(arr) {
+function _array_with_holes$i(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$j(obj, key, value) {
+function _define_property$l(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1022,7 +1006,7 @@ function _define_property$j(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$h(arr, i) {
+function _iterable_to_array_limit$i(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -1046,10 +1030,10 @@ function _iterable_to_array_limit$h(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$h() {
+function _non_iterable_rest$i() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$j(target) {
+function _object_spread$k(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1059,21 +1043,21 @@ function _object_spread$j(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$j(target, key, source[key]);
+            _define_property$l(target, key, source[key]);
         });
     }
     return target;
 }
-function _sliced_to_array$h(arr, i) {
-    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$h();
+function _sliced_to_array$i(arr, i) {
+    return _array_with_holes$i(arr) || _iterable_to_array_limit$i(arr, i) || _unsupported_iterable_to_array$i(arr, i) || _non_iterable_rest$i();
 }
-function _unsupported_iterable_to_array$h(o, minLen) {
+function _unsupported_iterable_to_array$i(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$i(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$i(o, minLen);
 }
 function Button(param) {
     var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, onClick = param.onClick, children = param.children, _param_padding = param.padding, padding = _param_padding === void 0 ? [
@@ -1081,7 +1065,7 @@ function Button(param) {
     ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
         Spacing.none
     ] : _param_margin, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
-    var _React_useState = _sliced_to_array$h(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
+    var _React_useState = _sliced_to_array$i(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
     var buttonState = Juce.getToggleState(id);
     var isLocalhost = window.location.hostname === 'localhost';
     var setModSlotRowTargetAsPreview = useGlobalContext().setModSlotRowTargetAsPreview;
@@ -1143,7 +1127,7 @@ function Button(param) {
         onMouseDown: handleMouseDown,
         disabled: disabled,
         onClick: onClick && onClick,
-        style: _object_spread$j({
+        style: _object_spread$k({
             paddingTop: "var(--p-".concat(padding[0], ")"),
             paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
             paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
@@ -1161,138 +1145,8 @@ Button.margin = Spacing;
 Button.type = ButtonType;
 Button.size = ButtonSize;
 
-var css_248z$9 = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border-radius: var(--radius-sm);\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: var(--spacing-xl);\n  background: var(--color-gray-800);\n  color: var(--color-text);\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n    background-color: var(--bg-highlighted);\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Dropdown-items {\n  border: 2px solid;\n}\n\n.Dropdown-item {\n  background-color: var(--bg-page);\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  min-width: 100px;\n  color: var(--color-text);\n  cursor: pointer;\n  text-align: center;\n  text-transform: uppercase;\n  font-weight: bold;\n}\n\n.Dropdown-item[data-selected] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n\n.Dropdown-item[data-active] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n";
-styleInject(css_248z$9);
-
-function _array_like_to_array$g(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes$g(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit$g(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest$g() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array$g(arr, i) {
-    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$g();
-}
-function _unsupported_iterable_to_array$g(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
-}
-var useDropdown = function(param) {
-    var id = param.id, // TODO: Is there a better way to handle mod matrix dropdowns?
-    rowId = param.rowId, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, filter = param.filter, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
-    var _properties_choices;
-    var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$g(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
-    var _useState1 = _sliced_to_array$g(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
-    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview;
-    var choices = items.length ? items : (properties === null || properties === void 0 ? void 0 : (_properties_choices = properties.choices) === null || _properties_choices === void 0 ? void 0 : _properties_choices.length) ? properties === null || properties === void 0 ? void 0 : properties.choices : [];
-    var filteredChoices = filter ? choices === null || choices === void 0 ? void 0 : choices.filter(function(item) {
-        var _item_;
-        return item === null || item === void 0 ? void 0 : (_item_ = item[1]) === null || _item_ === void 0 ? void 0 : _item_.toLowerCase().includes(filter === null || filter === void 0 ? void 0 : filter.toLowerCase());
-    }) : choices;
-    var prevIndex = useRef(null);
-    var handleChange = function(value) {
-        if (!isDisabled) {
-            var choiceIndex = choices.indexOf(value);
-            if (choiceIndex !== prevIndex.current) {
-                comboBoxState.setChoiceIndex(choiceIndex);
-                setIndex(choiceIndex);
-                // TODO: Is there a better way to do this?
-                if (rowId) {
-                    onChange && onChange(choiceIndex, rowId);
-                } else {
-                    onChange && onChange(choiceIndex, id);
-                }
-                // //@ts-expect-error
-                // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
-                if (displayValInHeader) {
-                    highlightedItemChanged && highlightedItemChanged({
-                        label: label,
-                        value: value
-                    });
-                }
-                prevIndex.current = choiceIndex;
-            }
-            return choices[choiceIndex];
-        }
-    };
-    useEffect(function() {
-        var comboBoxState = Juce.getComboBoxState(id);
-        setIndex(comboBoxState.getChoiceIndex());
-    }, [
-        id
-    ]);
-    useEffect(function() {
-        var valueListenerId = comboBoxState.valueChangedEvent.addListener(function() {
-            setIndex(comboBoxState.getChoiceIndex());
-        });
-        var propertiesListenerId = comboBoxState.propertiesChangedEvent.addListener(function() {
-            setProperties(comboBoxState.properties);
-        });
-        return function cleanup() {
-            comboBoxState.valueChangedEvent.removeListener(valueListenerId);
-            comboBoxState.propertiesChangedEvent.removeListener(propertiesListenerId);
-        };
-    }, [
-        window
-    ]);
-    var onMouseEnter = function() {
-        if (displayValInHeader && !isDisabled) {
-            highlightedItemChanged && (highlightedItemChanged === null || highlightedItemChanged === void 0 ? void 0 : highlightedItemChanged({
-                label: label,
-                value: choices === null || choices === void 0 ? void 0 : choices[index]
-            }));
-        }
-    };
-    var onClick = function() {
-        setModSlotRowTargetAsPreview({
-            paramId: id
-        });
-    };
-    return {
-        value: choices[index],
-        index: index,
-        setIndex: setIndex,
-        choices: choices,
-        filteredChoices: filteredChoices,
-        onMouseEnter: onMouseEnter,
-        onClick: onClick,
-        handleChange: handleChange
-    };
-};
+var css_248z$c = ".IconButton {\n  cursor: pointer;\n}\n.IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n";
+styleInject(css_248z$c);
 
 var JustifyContent = /*#__PURE__*/ function(JustifyContent) {
     JustifyContent["flexStart"] = "flex-start";
@@ -1322,7 +1176,7 @@ var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
     return LayoutTags;
 }({});
 
-function _define_property$i(obj, key, value) {
+function _define_property$k(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1335,7 +1189,7 @@ function _define_property$i(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$i(target) {
+function _object_spread$j(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1345,7 +1199,7 @@ function _object_spread$i(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$i(target, key, source[key]);
+            _define_property$k(target, key, source[key]);
         });
     }
     return target;
@@ -1402,7 +1256,7 @@ var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
     return BoxDisplay;
 }(BoxDisplay || {});
 function Box(_param) {
-    var className = _param.className, style = _param.style, children = _param.children, flex = _param.flex, key = _param.key, onClick = _param.onClick, _param_alignItems = _param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = _param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = _param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = _param.width, width = _param_width === void 0 ? Width.full : _param_width, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, _param_height = _param.height, height = _param_height === void 0 ? Height.auto : _param_height, _param_border = _param.border, border = _param_border === void 0 ? false : _param_border, _param_flexDirection = _param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _param_padding = _param.padding, padding = _param_padding === void 0 ? [
+    var className = _param.className, style = _param.style, children = _param.children, flex = _param.flex, key = _param.key, onClick = _param.onClick, _param_alignItems = _param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = _param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = _param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = _param.width, width = _param_width === void 0 ? Width.full : _param_width, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, height = _param.height, _param_border = _param.border, border = _param_border === void 0 ? false : _param_border, _param_flexDirection = _param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _param_fullHeight = _param.fullHeight, fullHeight = _param_fullHeight === void 0 ? false : _param_fullHeight, _param_padding = _param.padding, padding = _param_padding === void 0 ? [
         Spacing.none,
         Spacing.none,
         Spacing.none,
@@ -1422,19 +1276,20 @@ function Box(_param) {
         "height",
         "border",
         "flexDirection",
+        "fullHeight",
         "padding",
         "gap",
         "tag"
     ]);
     var Tag = tag;
     var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$3(_object_spread$i({
+    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$3(_object_spread$j({
         // id="globalValues"
         key: key,
         className: className,
         onClick: onClick
     }, rest), {
-        style: _object_spread$i({
+        style: _object_spread$j({
             flexWrap: flexWrap,
             display: display,
             width: width,
@@ -1445,7 +1300,7 @@ function Box(_param) {
             paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
             border: border ? '2px solid #999' : '',
             maxWidth: width,
-            height: height,
+            height: fullHeight ? '100%' : height,
             flexDirection: flexDirection === FlexDirection.row ? FlexDirection.row : FlexDirection.column,
             justifyContent: "".concat(justifyContent),
             alignItems: "".concat(alignItems),
@@ -1465,7 +1320,10 @@ Box.padding = Spacing;
 Box.flexWrap = FlexWrap;
 Box.tag = LayoutTags;
 
-function _define_property$h(obj, key, value) {
+var css_248z$b = ".Icon svg {\n  width: 100%;\n}\n";
+styleInject(css_248z$b);
+
+function _define_property$j(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1478,7 +1336,7 @@ function _define_property$h(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$h(target) {
+function _object_spread$i(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1488,34 +1346,782 @@ function _object_spread$h(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$h(target, key, source[key]);
+            _define_property$j(target, key, source[key]);
         });
     }
     return target;
 }
-function Label(param) {
-    var value = param.value, id = param.id, className = param.className, style = param.style, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none
-    ] : _param_padding, children = param.children, htmlFor = param.htmlFor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.medium : _param_fontSize;
-    var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React.createElement("label", {
-        id: id,
-        htmlFor: htmlFor,
-        style: _object_spread$h({
-            fontSize: "var(--text-".concat(fontSize),
+var Icons = /*#__PURE__*/ function(Icons) {
+    Icons["undo"] = "Undo";
+    Icons["redo"] = "Redo";
+    Icons["random"] = "Random";
+    Icons["favorite"] = "Favorite";
+    Icons["up"] = "Up";
+    Icons["down"] = "Down";
+    Icons["save"] = "Save";
+    Icons["add"] = "Add";
+    Icons["delete"] = "Delete";
+    Icons["negativeSaw"] = "NegativeSaw";
+    Icons["positiveSaw"] = "PositiveSaw";
+    Icons["sine"] = "Sine";
+    Icons["square"] = "Square";
+    Icons["triangle"] = "Triangle";
+    return Icons;
+}({});
+var Undo = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        viewBox: "0 0 25 25",
+        "stroke-width": "1.5",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color,
+        height: width,
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M4.5 8C8.5 8 11 8 15 8C15 8 15 8 15 8C15 8 20 8 20 12.7059C20 18 15 18 15 18C11.5714 18 9.71429 18 6.28571 18",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M7.5 11.5C6.13317 10.1332 5.36683 9.36683 4 8C5.36683 6.63317 6.13317 5.86683 7.5 4.5",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }));
+};
+var Redo = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        viewBox: "0 0 25 25",
+        "stroke-width": "1.5",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color,
+        height: width,
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M19.5 8C15.5 8 13 8 9 8C9 8 9 8 9 8C9 8 4 8 4 12.7059C4 18 9 18 9 18C12.4286 18 14.2857 18 17.7143 18",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M16.5 11.5C17.8668 10.1332 18.6332 9.36683 20 8C18.6332 6.63317 17.8668 5.86683 16.5 4.5",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }));
+};
+var Favorite = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        "stroke-width": "1.5",
+        viewBox: "-7 -7 40 40",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color,
+        height: width,
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M22 8.86222C22 10.4087 21.4062 11.8941 20.3458 12.9929C17.9049 15.523 15.5374 18.1613 13.0053 20.5997C12.4249 21.1505 11.5042 21.1304 10.9488 20.5547L3.65376 12.9929C1.44875 10.7072 1.44875 7.01723 3.65376 4.73157C5.88044 2.42345 9.50794 2.42345 11.7346 4.73157L11.9998 5.00642L12.2648 4.73173C13.3324 3.6245 14.7864 3 16.3053 3C17.8242 3 19.2781 3.62444 20.3458 4.73157C21.4063 5.83045 22 7.31577 22 8.86222Z",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }));
+};
+var Up = function(param) {
+    var color = param.color; param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        // width={width}
+        // height={width}
+        "stroke-width": "1.5",
+        viewBox: "5 8 14 9",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color,
+        preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M6 15L12 9L18 15",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }));
+};
+var Down = function(param) {
+    var color = param.color; param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        // width={width}
+        // height={width}
+        "stroke-width": "1.5",
+        viewBox: "5 8 14 9",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color,
+        preserveAspectRatio: "xMidYMid meet"
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M6 9L12 15L18 9",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }));
+};
+var Save = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        "stroke-width": "1.5",
+        viewBox: "-7 -7 40 40",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color,
+        height: width,
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M3 19V5C3 3.89543 3.89543 3 5 3H16.1716C16.702 3 17.2107 3.21071 17.5858 3.58579L20.4142 6.41421C20.7893 6.78929 21 7.29799 21 7.82843V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19Z",
+        stroke: color,
+        "stroke-width": "1.5"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M8.6 9H15.4C15.7314 9 16 8.73137 16 8.4V3.6C16 3.26863 15.7314 3 15.4 3H8.6C8.26863 3 8 3.26863 8 3.6V8.4C8 8.73137 8.26863 9 8.6 9Z",
+        stroke: color,
+        "stroke-width": "1.5"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M6 13.6V21H18V13.6C18 13.2686 17.7314 13 17.4 13H6.6C6.26863 13 6 13.2686 6 13.6Z",
+        stroke: color,
+        "stroke-width": "1.5"
+    }));
+};
+var Random = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        viewBox: "0 0 25 25",
+        "stroke-width": "1.5",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color,
+        height: width,
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M11.7 1.1732C11.8856 1.06603 12.1144 1.06603 12.3 1.17321L21.2263 6.3268C21.4119 6.43397 21.5263 6.63205 21.5263 6.84641V17.1536C21.5263 17.3679 21.4119 17.566 21.2263 17.6732L12.3 22.8268C12.1144 22.934 11.8856 22.934 11.7 22.8268L2.77372 17.6732C2.58808 17.566 2.47372 17.3679 2.47372 17.1536V6.84641C2.47372 6.63205 2.58808 6.43397 2.77372 6.32679L11.7 1.1732Z",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M17 15L7 15L12 7L17 15Z",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M2.5 6.5L12 7",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M2.5 6.5L7 15",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M21.5 6.5L17 15",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M21.5 6.5L12 6.99995L12 1",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M21.5 17.5L17 15",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M2.5 17.5L7 15",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M7 15L12 23L17 15",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linejoin": "round"
+    }));
+};
+var Add = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        "stroke-width": "1.5",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color,
+        height: width,
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M6 12H12M18 12H12M12 12V6M12 12V18",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }));
+};
+var Delete = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color,
+        "stroke-width": "1.5",
+        height: width,
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd",
+        d: "M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM9.70164 8.64124C9.40875 8.34835 8.93388 8.34835 8.64098 8.64124C8.34809 8.93414 8.34809 9.40901 8.64098 9.7019L10.9391 12L8.64098 14.2981C8.34809 14.591 8.34809 15.0659 8.64098 15.3588C8.93388 15.6517 9.40875 15.6517 9.70164 15.3588L11.9997 13.0607L14.2978 15.3588C14.5907 15.6517 15.0656 15.6517 15.3585 15.3588C15.6514 15.0659 15.6514 14.591 15.3585 14.2981L13.0604 12L15.3585 9.7019C15.6514 9.40901 15.6514 8.93414 15.3585 8.64124C15.0656 8.34835 14.5907 8.34835 14.2978 8.64124L11.9997 10.9393L9.70164 8.64124Z",
+        fill: color
+    }));
+};
+var NegativeSaw = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 67.27 33.41",
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("polyline", {
+        points: "2.5 2.5 2.5 30.91 64.77 2.5 64.77 30.91",
+        fill: "none",
+        stroke: color,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "4"
+    }));
+};
+var PositiveSaw = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 67.27 33.41",
+        width: width
+    }, /*#__PURE__*/ React__default.createElement("polyline", {
+        points: "64.77 2.5 64.77 30.91 2.5 2.5 2.5 30.91",
+        fill: "none",
+        stroke: color,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "4"
+    }));
+};
+var Sine = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        width: width,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 65.2 33.19"
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M4,17.08c3.67-6.45,7.25-13.08,14.58-13.08,14.31,0,14.31,25.19,28.62,25.19,6.94,0,10.52-5.93,13.99-12.03",
+        fill: "none",
+        stroke: color,
+        "stroke-linecap": "round",
+        "stroke-miterlimit": "10",
+        "stroke-width": "4"
+    }));
+};
+var Square = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        width: width,
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 68.77 33.8"
+    }, /*#__PURE__*/ React__default.createElement("polyline", {
+        points: "2.5 31.3 2.5 2.5 34.38 2.5 34.38 31.3 66.27 31.3 66.27 2.5",
+        fill: "none",
+        stroke: color,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "4"
+    }));
+};
+var Triangle = function(param) {
+    var color = param.color, width = param.width;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: width,
+        viewBox: "0 0 72.68 35.16"
+    }, /*#__PURE__*/ React__default.createElement("polyline", {
+        points: "3 32.16 25.59 3 47.69 31.54 69.68 3.15",
+        fill: "none",
+        stroke: color,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "4"
+    }));
+};
+var iconList = {
+    Undo: Undo,
+    Redo: Redo,
+    Random: Random,
+    Favorite: Favorite,
+    Up: Up,
+    Down: Down,
+    Save: Save,
+    Add: Add,
+    Delete: Delete,
+    NegativeSaw: NegativeSaw,
+    PositiveSaw: PositiveSaw,
+    Sine: Sine,
+    Square: Square,
+    Triangle: Triangle
+};
+// const getViewBoxWidth = (width: string) => {
+//   const numericWidth = width.match(/\d+/)?.[0];
+//   return numericWidth !== undefined ? parseInt(numericWidth) : 24;
+// };
+function Icon(param) {
+    var icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none
+    ] : _param_padding, _param_width = param.width, width = _param_width === void 0 ? '24px' : _param_width, height = param.height, className = param.className, style = param.style;
+    var _$Icon = iconList[icon];
+    var _width_match;
+    var numberWidth = parseInt(((_width_match = width.match(/\d/g)) !== null && _width_match !== void 0 ? _width_match : []).join(''), 10);
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        className: "Icon ".concat(className ? className : ''),
+        onClick: onClick,
+        padding: padding,
+        style: _object_spread$i({
+            width: width,
+            height: height !== null && height !== void 0 ? height : width
+        }, style)
+    }, /*#__PURE__*/ React__default.createElement(_$Icon, {
+        width: numberWidth,
+        color: disabled ? 'var(--color-gray-400)' : color
+    }));
+}
+Icon.icon = Icons;
+Icon.padding = Spacing;
+Icon.margin = Spacing;
+
+function _define_property$i(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$h(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$i(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function Label(param) {
+    var value = param.value, id = param.id, className = param.className, style = param.style, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none
+    ] : _param_padding, uppercase = param.uppercase, children = param.children, htmlFor = param.htmlFor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.medium : _param_fontSize;
+    var _padding_, _padding_1, _padding_2, _ref;
+    return /*#__PURE__*/ React.createElement("label", {
+        id: id,
+        htmlFor: htmlFor,
+        style: _object_spread$h({
+            fontSize: "var(--text-".concat(fontSize, ")"),
+            lineHeight: "var(--text-".concat(fontSize, ")"),
             paddingTop: "var(--p-".concat(padding[0], ")"),
             paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
             paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
             paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
             WebkitUserSelect: 'none',
             userSelect: 'none',
+            letterSpacing: '1px',
+            textTransform: uppercase ? 'uppercase' : 'none',
+            cursor: 'inherit',
+            color: color
+        }, style),
+        className: classnames('Label', 'select-none', className)
+    }, value ? value : children);
+}
+Label.padding = Spacing;
+Label.fontSize = FontSizes;
+
+function _define_property$h(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$g(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$h(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function IconButton(param) {
+    var id = param.id, icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, // backgroundColor = 'var(--bg-lv1)',
+    backgroundColor = param.backgroundColor, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Button.padding.none
+    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
+        Button.margin.none
+    ] : _param_margin, _param_width = param.width, width = _param_width === void 0 ? '24px' : _param_width, iconWidth = param.iconWidth, label = param.label, height = param.height, className = param.className, style = param.style;
+    var Icon = iconList[icon];
+    var _width_match;
+    var numberWidth = parseInt(((_width_match = width.match(/\d/g)) !== null && _width_match !== void 0 ? _width_match : []).join(''), 10);
+    var _iconWidth_match;
+    var iconNumberWidth = typeof iconWidth === 'string' && parseInt(((_iconWidth_match = iconWidth === null || iconWidth === void 0 ? void 0 : iconWidth.match(/\d/g)) !== null && _iconWidth_match !== void 0 ? _iconWidth_match : []).join(''), 10);
+    return /*#__PURE__*/ React__default.createElement(Button, {
+        id: id,
+        className: "IconButton ".concat(className ? className : ''),
+        onClick: onClick,
+        padding: padding,
+        margin: margin,
+        disabled: disabled,
+        style: _object_spread$g({
+            backgroundColor: backgroundColor,
+            width: width,
+            height: height !== null && height !== void 0 ? height : 'auto'
+        }, style)
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        gap: Box.gap.mediumSmall
+    }, /*#__PURE__*/ React__default.createElement(Icon, {
+        width: iconNumberWidth || numberWidth,
+        color: disabled ? 'var(--color-gray-400)' : color
+    }), label ? /*#__PURE__*/ React__default.createElement(Label, {
+        color: color,
+        fontSize: Label.fontSize.xSmall,
+        value: label
+    }) : null));
+}
+IconButton.icon = Icons;
+IconButton.padding = Spacing;
+IconButton.margin = Spacing;
+
+function _array_like_to_array$h(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$h(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$h(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    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$h() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array$h(arr, i) {
+    return _array_with_holes$h(arr) || _iterable_to_array_limit$h(arr, i) || _unsupported_iterable_to_array$h(arr, i) || _non_iterable_rest$h();
+}
+function _unsupported_iterable_to_array$h(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$h(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$h(o, minLen);
+}
+var useDropdown = function(param) {
+    var id = param.id, // TODO: Is there a better way to handle mod matrix dropdowns?
+    rowId = param.rowId, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, _param_isDisabled = param.isDisabled, isDisabled = _param_isDisabled === void 0 ? false : _param_isDisabled, filter = param.filter, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
+    var _properties_choices;
+    var comboBoxState = Juce.getComboBoxState(id);
+    var _useState = _sliced_to_array$h(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
+    var _useState1 = _sliced_to_array$h(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
+    var _useGlobalContext = useGlobalContext(), highlightedItemChanged = _useGlobalContext.highlightedItemChanged, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview;
+    var choices = items.length ? items : (properties === null || properties === void 0 ? void 0 : (_properties_choices = properties.choices) === null || _properties_choices === void 0 ? void 0 : _properties_choices.length) ? properties === null || properties === void 0 ? void 0 : properties.choices : [];
+    var filteredChoices = filter ? choices === null || choices === void 0 ? void 0 : choices.filter(function(item) {
+        var _item_;
+        return item === null || item === void 0 ? void 0 : (_item_ = item[1]) === null || _item_ === void 0 ? void 0 : _item_.toLowerCase().includes(filter === null || filter === void 0 ? void 0 : filter.toLowerCase());
+    }) : choices;
+    var prevIndex = useRef(null);
+    var handleChange = function(value) {
+        if (id && !isDisabled) {
+            var choiceIndex = typeof value === 'string' ? choices.indexOf(value) : value;
+            if (choiceIndex !== prevIndex.current) {
+                comboBoxState.setChoiceIndex(choiceIndex);
+                setIndex(choiceIndex);
+                // TODO: Is there a better way to do this?
+                if (rowId) {
+                    onChange && onChange(choiceIndex, rowId);
+                } else {
+                    onChange && onChange(choiceIndex, id);
+                }
+                // //@ts-expect-error
+                // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
+                if (displayValInHeader) {
+                    highlightedItemChanged && highlightedItemChanged({
+                        label: label,
+                        value: value
+                    });
+                }
+                prevIndex.current = choiceIndex;
+            }
+            return choices[choiceIndex];
+        }
+    };
+    var incrementValue = function() {
+        if (index < properties.choices.length - 1) {
+            handleChange(index + 1);
+        }
+    };
+    var decrementValue = function() {
+        if (index > 0) {
+            handleChange(index - 1);
+        }
+    };
+    useEffect(function() {
+        if (id) {
+            var comboBoxState = Juce.getComboBoxState(id);
+            setIndex(comboBoxState.getChoiceIndex());
+        }
+    }, [
+        id
+    ]);
+    useEffect(function() {
+        if (id) {
+            var valueListenerId = comboBoxState.valueChangedEvent.addListener(function() {
+                setIndex(comboBoxState.getChoiceIndex());
+            });
+            var propertiesListenerId = comboBoxState.propertiesChangedEvent.addListener(function() {
+                setProperties(comboBoxState.properties);
+            });
+            return function cleanup() {
+                comboBoxState.valueChangedEvent.removeListener(valueListenerId);
+                comboBoxState.propertiesChangedEvent.removeListener(propertiesListenerId);
+            };
+        } else {
+            return;
+        }
+    }, [
+        window
+    ]);
+    var onMouseEnter = function() {
+        if (id && displayValInHeader && !isDisabled) {
+            highlightedItemChanged && (highlightedItemChanged === null || highlightedItemChanged === void 0 ? void 0 : highlightedItemChanged({
+                label: label,
+                value: choices === null || choices === void 0 ? void 0 : choices[index]
+            }));
+        }
+    };
+    var onClick = function() {
+        setModSlotRowTargetAsPreview({
+            paramId: id
+        });
+    };
+    return {
+        value: choices[index],
+        index: index,
+        setIndex: setIndex,
+        choices: choices,
+        filteredChoices: filteredChoices,
+        onMouseEnter: onMouseEnter,
+        onClick: onClick,
+        handleChange: handleChange,
+        incrementValue: incrementValue,
+        decrementValue: decrementValue
+    };
+};
+
+function _array_like_to_array$g(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$g(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$g(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$g() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array$g(arr, i) {
+    return _array_with_holes$g(arr) || _iterable_to_array_limit$g(arr, i) || _unsupported_iterable_to_array$g(arr, i) || _non_iterable_rest$g();
+}
+function _unsupported_iterable_to_array$g(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$g(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$g(o, minLen);
+}
+function Tabs(param) {
+    var items = param.items, _param_id = param.id, id = _param_id === void 0 ? '' : _param_id, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none
+    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
+        Spacing.none
+    ] : _param_margin, _param_gap = param.gap, gap = _param_gap === void 0 ? Spacing.small : _param_gap, width = param.width, height = param.height, tabWidth = param.tabWidth, tabHeight = param.tabHeight, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? Orientation.horizontal : _param_orientation, _param_justifyContent = param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent$1.stretch : _param_justifyContent, _param_alignItems = param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems$1.stretch : _param_alignItems, _param_color = param.color, color = _param_color === void 0 ? 'var(--bg-lv11)' : _param_color, _param_selectedColor = param.selectedColor, selectedColor = _param_selectedColor === void 0 ? 'var(--color-brand)' : _param_selectedColor, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'transparent' : _param_backgroundColor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.small : _param_fontSize, selectedBackgroundColor = param.selectedBackgroundColor, icons = param.icons, onChange = param.onChange;
+    var _useState = _sliced_to_array$g(useState(0), 2), selectedIndex = _useState[0], setSelectedIndex = _useState[1];
+    var _useDropdown = useDropdown({
+        id: id,
+        onChange: onChange
+    }), index = _useDropdown.index, choices = _useDropdown.choices, handleChange = _useDropdown.handleChange;
+    var changeHandler = function(index) {
+        if (id) {
+            handleChange(index);
+        } else {
+            setSelectedIndex(index);
+            onChange && onChange(index);
+        }
+    };
+    var currentIndex = id ? index : selectedIndex;
+    // console.log(choices, 'CHOICES');
+    var displayedItems = items !== null && items !== void 0 ? items : choices;
+    var _margin_, _margin_1, _margin_2, _ref;
+    //around
+    //vertical, horizontal
+    // top, right, bottom, left
+    return /*#__PURE__*/ React__default.createElement(TabGroup, {
+        style: {
+            marginTop: "var(--mt-".concat(margin[0], ")"),
+            marginRight: "var(--mr-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
+            marginBottom: "var(--mb-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
+            marginLeft: "var(--ml-".concat((_ref = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref !== void 0 ? _ref : margin[0], ")"),
+            width: width,
+            height: height
+        },
+        manual: true,
+        selectedIndex: currentIndex,
+        onChange: function(index) {
+            return changeHandler(index);
+        }
+    }, /*#__PURE__*/ React__default.createElement(TabList, {
+        className: classnames('Tabs', className),
+        style: {
+            gap: "var(--gap-".concat(gap, ")"),
+            height: height ? height : 'auto',
+            justifyContent: justifyContent,
+            alignItems: alignItems,
+            flexDirection: orientation === Orientation.horizontal ? 'row' : 'column'
+        }
+    }, displayedItems && displayedItems.map(function(item, i) {
+        var _padding_, _padding_1, _padding_2, _ref;
+        return /*#__PURE__*/ React__default.createElement(Tab, {
+            key: item,
+            id: item,
+            style: {
+                cursor: 'pointer',
+                width: tabWidth,
+                height: tabHeight,
+                fontSize: 'var(--text-md)',
+                lineHeight: '1.25rem',
+                backgroundColor: i === currentIndex ? selectedBackgroundColor !== null && selectedBackgroundColor !== void 0 ? selectedBackgroundColor : backgroundColor : backgroundColor,
+                paddingTop: "var(--p-".concat(padding[0], ")"),
+                paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
+                paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
+                paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+                display: 'flex',
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center'
+            },
+            className: classnames('Tabs-item', 'bg-body', 'color-input-text')
+        }, icons && icons[i] ? /*#__PURE__*/ React__default.createElement(IconButton, {
+            icon: icons[i],
+            id: item,
+            iconWidth: "20px",
+            // width={tabWidth}
+            // height={tabHeight}
+            color: i === currentIndex ? selectedColor : color,
+            label: item
+        }) : /*#__PURE__*/ React__default.createElement(Label, {
+            value: item,
+            fontSize: fontSize,
             color: color
-        }, style),
-        className: classnames('Label', 'select-none', className)
-    }, value ? value : children);
+        }));
+    })));
 }
-Label.padding = Spacing;
-Label.fontSize = FontSizes;
+Tabs.padding = Spacing;
+Tabs.gap = Spacing;
+Tabs.margin = Spacing;
+Tabs.orientation = Orientation;
+Tabs.justifyContent = JustifyContent$1;
+Tabs.alignItems = AlignItems$1;
+Tabs.fontSize = FontSizes;
+
+var css_248z$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";
+styleInject(css_248z$a);
 
 function _define_property$g(obj, key, value) {
     if (key in obj) {
@@ -1530,7 +2136,7 @@ function _define_property$g(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$g(target) {
+function _object_spread$f(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1546,25 +2152,72 @@ function _object_spread$g(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 ? '6rem' : _param_width, id = param.id, style = param.style;
     var _useDropdown = useDropdown({
         id: id,
         label: label,
         onChange: onChange
-    }), value = _useDropdown.value, choices = _useDropdown.choices, onMouseEnter = _useDropdown.onMouseEnter, handleChange = _useDropdown.handleChange, onClick = _useDropdown.onClick;
+    }), value = _useDropdown.value, choices = _useDropdown.choices, onMouseEnter = _useDropdown.onMouseEnter, handleChange = _useDropdown.handleChange, onClick = _useDropdown.onClick, incrementValue = _useDropdown.incrementValue, decrementValue = _useDropdown.decrementValue;
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
         onMouseEnter: onMouseEnter,
         width: width || 'auto',
         flex: "0 1 auto"
-    }, /*#__PURE__*/ React__default.createElement(Listbox, {
+    }, /*#__PURE__*/ React__default.createElement(Label, {
+        padding: [
+            Label.padding.none,
+            Label.padding.none,
+            Label.padding.small,
+            Label.padding.none
+        ],
+        fontSize: Label.fontSize.xSmall,
+        value: label,
+        style: {
+            color: "".concat(labelColor ? labelColor : 'initial')
+        }
+    }), /*#__PURE__*/ React__default.createElement(Listbox, {
         value: value,
         onChange: handleChange
-    }, /*#__PURE__*/ React__default.createElement(ListboxButton, {
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            position: 'relative',
+            width: width,
+            height: '26px'
+        }
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        width: "auto",
+        style: {
+            position: 'absolute',
+            right: '8px',
+            top: '0',
+            bottom: '0',
+            zIndex: '2'
+        }
+    }, /*#__PURE__*/ React__default.createElement(IconButton, {
+        id: "Dropdown-up-arrow",
+        className: "Dropdown-arrow",
+        backgroundColor: "transparent",
+        width: "8px",
+        icon: IconButton.icon.up,
+        onClick: decrementValue
+    }), /*#__PURE__*/ React__default.createElement(IconButton, {
+        className: "Dropdown-arrow",
+        id: "Dropdown-down-arrow",
+        backgroundColor: "transparent",
+        width: "8px",
+        icon: IconButton.icon.down,
+        onClick: incrementValue
+    })), /*#__PURE__*/ React__default.createElement(ListboxButton, {
         className: classnames('Combobox Dropdown-button', className),
-        style: _object_spread$g({
+        style: _object_spread$f({
             color: "".concat(color ? color : 'initial'),
-            width: "".concat(width ? width : '100%')
+            width: "".concat(width ? width : '100%'),
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            right: 0,
+            left: 0
         }, style),
         id: id,
         onClick: onClick,
@@ -1572,39 +2225,26 @@ function Dropdown(param) {
         onChange: function(value) {
             return console.log(value);
         }
-    }, value), /*#__PURE__*/ React__default.createElement(ListboxOptions, {
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        gap: Box.gap.none,
+        justifyContent: Box.justifyContent.spaceBetween
+    }, /*#__PURE__*/ React__default.createElement(Label, {
+        fontSize: Label.fontSize.small
+    }, value)))), /*#__PURE__*/ React__default.createElement(ListboxOptions, {
         anchor: "bottom",
         portal: false,
-        className: "Dropdown-items z-10",
-        style: {
-            color: "".concat(color ? color : 'initial')
-        }
+        className: "Dropdown-items z-10"
     }, choices === null || choices === void 0 ? void 0 : choices.map(function(item, i) {
         return /*#__PURE__*/ React__default.createElement(ListboxOption, {
             className: classnames('Dropdown-item'),
             key: item,
-            value: item,
-            style: {
-                color: "".concat(color ? color : 'initial')
-            }
+            value: item
         }, item);
-    }))), /*#__PURE__*/ React__default.createElement(Label, {
-        padding: [
-            Label.padding.mediumSmall,
-            Label.padding.mediumSmall,
-            Label.padding.none,
-            Label.padding.mediumSmall
-        ],
-        fontSize: Label.fontSize.xSmall,
-        value: label,
-        style: {
-            color: "".concat(labelColor ? labelColor : 'initial')
-        }
-    }));
+    }))));
 }
 
-var css_248z$8 = ".TextInput {\n  pointer-events: auto;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n\n.TextInput:disabled {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.isActive .TextInput {\n  -webkit-user-select: auto;\n  -moz-user-select: auto;\n  -ms-user-select: auto;\n  user-select: auto;\n}\n";
-styleInject(css_248z$8);
+var css_248z$9 = ".TextInput {\n  pointer-events: auto;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.TextInput::-moz-selection {\n  background: transparent;\n}\n.TextInput::selection {\n  background: transparent;\n}\n\n.TextInput:disabled {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.isActive .TextInput {\n  -webkit-user-select: auto;\n  -moz-user-select: auto;\n  -ms-user-select: auto;\n  user-select: auto;\n}\n";
+styleInject(css_248z$9);
 
 function _array_like_to_array$f(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -1654,7 +2294,7 @@ function _iterable_to_array_limit$f(arr, i) {
 function _non_iterable_rest$f() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$f(target) {
+function _object_spread$e(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1688,7 +2328,7 @@ var InputTypes = /*#__PURE__*/ function(InputTypes) {
     return InputTypes;
 }({});
 function Input(param) {
-    var onComplete = param.onComplete, value = param.value; param.min; param.max; var _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.xSmall : _param_fontSize, style = param.style, className = param.className, isDisabled = param.isDisabled, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? 'var(--color-text)' : _param_textColor;
+    var onComplete = param.onComplete, value = param.value; param.min; param.max; var _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.xSmall : _param_fontSize, style = param.style, className = param.className, isDisabled = param.isDisabled, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? 'var(--color-text)' : _param_textColor, _param_textAlign = param.textAlign, textAlign = _param_textAlign === void 0 ? TextAlign.center : _param_textAlign;
     var _inputRef_current;
     var _useState = _sliced_to_array$f(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
     // const [hasError, setHasError] = useState<boolean>(false);
@@ -1810,8 +2450,9 @@ function Input(param) {
         id: "".concat(id, "-input"),
         ref: inputRef,
         className: classnames('TextInput', isHighlighted ? 'is-highlighted' : '', className),
-        style: _object_spread$f({
+        style: _object_spread$e({
             fontSize: "var(--text-".concat(fontSize),
+            textAlign: textAlign,
             color: textColor
         }, style),
         value: internalValue,
@@ -1829,13 +2470,50 @@ function Input(param) {
     });
 }
 Input.type = InputTypes;
+Input.textAlign = TextAlign;
 
+function _define_property$e(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 var SliderType = /*#__PURE__*/ function(SliderType) {
     SliderType["bar"] = "bar";
     SliderType["rotary"] = "rotary";
     SliderType["custom"] = "custom";
     return SliderType;
 }({});
+var RotarySliderMarkerShapes = /*#__PURE__*/ function(RotarySliderMarkerShapes) {
+    RotarySliderMarkerShapes["circle"] = "circle";
+    RotarySliderMarkerShapes["rectangle"] = "rectangle";
+    return RotarySliderMarkerShapes;
+}({});
+var RotarySliderSizes = /*#__PURE__*/ function(RotarySliderSizes) {
+    RotarySliderSizes["small"] = "small";
+    RotarySliderSizes["large"] = "large";
+    return RotarySliderSizes;
+}({});
+var _obj;
+var rotarySliderSizeMap = (_obj = {}, _define_property$e(_obj, "small", {
+    width: 40,
+    height: 40
+}), _define_property$e(_obj, "large", {
+    width: 65,
+    height: 65
+}), _obj);
+var GradientStyles = /*#__PURE__*/ function(GradientStyles) {
+    GradientStyles["unicolor"] = "unicolor";
+    GradientStyles["multicolor"] = "multicolor";
+    return GradientStyles;
+}({});
 
 function _array_like_to_array$e(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -2062,13 +2740,6 @@ var useSlider = function(param) {
                     // console.log(movement, hasMoved, 'movementinelesif');
                     newValue = 1 - y / rect.width;
                 } else if (hasMoved || ignoreMoveStatus) {
-                    // console.log(
-                    //   hasMoved,
-                    //   orientation,
-                    //   dragOrientation,
-                    //   movement,
-                    //   '213312312',
-                    // );
                     newValue = x / rect.width;
                 }
                 newValue && setNormalisedState(clamp(newValue));
@@ -2150,11 +2821,11 @@ var useSlider = function(param) {
     };
 };
 
-var css_248z$7 = ".RotarySlider {\n  /* position: relative; */\n  /* border-radius: 50%; */\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  aspect-ratio: 1 / 1;\n  border: 1px solid transparent;\n}\n\n.RotarySlider-Inner {\n  height: 100%;\n  width: 100%;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--bg-popover);\n  border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: var(--spacing-xs);\n  height: 50%;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 5px 8px 5px;\n  transform: rotate(180deg);\n  padding-bottom: var(--spacing-sm);\n}\n\n.ProgressCircle-wrapper {\n  position: relative;\n}\n.ProgressCircle {\n  fill: none;\n  pointer-events: none;\n}\n\n.ProgressCircle-value {\n  text-align: center;\n  margin-top: -3px;\n  height: 0.8rem;\n  line-height: 0.8rem;\n}\n\n.ProgressCircle-bg {\n  stroke-width: 3px;\n  transform-origin: center;\n  transform: rotate(135deg);\n  stroke-linecap: round;\n  font-size: var(--text-sm);\n  pointer-events: none;\n}\n.ProgressCircle-fg {\n  stroke-width: 3px;\n  /* stroke-dasharray: 75; */\n  /* stroke-dashoffset: calc(880 - (660 * 0) / 100); */\n  transform-origin: center;\n  stroke-linecap: round;\n  pointer-events: none;\n}\n\n.corner-border {\n  --b: 1px; /* thickness of the border */\n  --c: var(--color-gray-500); /* color of the border */\n  --w: 5px; /* width of border */\n\n  border: var(--b) solid #0000; /* space for the border */\n  --_g: #0000 90deg, var(--c) 0;\n  --_p: var(--w) var(--w) border-box no-repeat;\n  background:\n    conic-gradient(from 90deg at top var(--b) left var(--b), var(--_g)) 0 0 /\n      var(--_p),\n    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) 100% 0 /\n      var(--_p),\n    conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--_g)) 0 100% /\n      var(--_p),\n    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g))\n      100% 100% / var(--_p);\n}\n";
-styleInject(css_248z$7);
+var css_248z$8 = ".RotarySlider {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n  height: 100%;\n  width: 100%;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  left: 0;\n}\n\n.RotarySlider-Indicator-marker {\n  position: absolute;\n  top: 3px;\n  right: 0;\n  left: 50%;\n  width: 3px;\n  height: 50%;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n  width: 3px;\n  height: 6px;\n}\n\n.RotarySlider-CenterCircle {\n  position: relative;\n  border-radius: 100%;\n  border: 2px solid var(--color-gray-300);\n  /* background: var(--color-gray-800); */\n  background: radial-gradient(\n    circle at center,\n    var(--bg-lv4) 50%,\n    var(--bg-lv3) 80%\n  );\n}\n\n.RotarySlider-CenterCircle:after {\n  content: '';\n  width: 4px;\n  height: 4px;\n  background: var(--color-gray-300);\n  border-radius: 100%;\n  position: absolute;\n  left: 8px;\n  top: 3px;\n}\n\n.RotarySlider-positioning-wrapper {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n}\n.ProgressCircle {\n  fill: none;\n  pointer-events: none;\n}\n\n.ProgressCircle-value {\n  text-align: center;\n  margin-top: -4px;\n  height: 0.8rem;\n  line-height: 0.8rem;\n}\n\n.ProgressCircle-bg {\n  stroke-width: 3px;\n  transform-origin: center;\n  /* transform: rotate(135deg); */\n  font-size: var(--text-sm);\n  pointer-events: none;\n}\n.ProgressCircle-fg {\n  stroke-width: 3px;\n  /* stroke-dasharray: 75; */\n  /* stroke-dashoffset: calc(880 - (660 * 0) / 100); */\n  transform-origin: center;\n  pointer-events: none;\n}\n\n.corner-border {\n  --b: 1px; /* thickness of the border */\n  --c: var(--color-gray-500); /* color of the border */\n  --w: 5px; /* width of border */\n\n  border: var(--b) solid #0000; /* space for the border */\n  --_g: #0000 90deg, var(--c) 0;\n  --_p: var(--w) var(--w) border-box no-repeat;\n  background:\n    conic-gradient(from 90deg at top var(--b) left var(--b), var(--_g)) 0 0 /\n      var(--_p),\n    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g)) 100% 0 /\n      var(--_p),\n    conic-gradient(from 0deg at bottom var(--b) left var(--b), var(--_g)) 0 100% /\n      var(--_p),\n    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--_g))\n      100% 100% / var(--_p);\n}\n";
+styleInject(css_248z$8);
 
-var css_248z$6 = "";
-styleInject(css_248z$6);
+var css_248z$7 = "";
+styleInject(css_248z$7);
 
 function _array_like_to_array$d(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -2204,7 +2875,7 @@ function _unsupported_iterable_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;
-    // EXAMPLE CONTROL GROUP STRUCTURE
+    // EXPECTED CONTROL GROUP STRUCTURE
     // <ControlGroup id={id-control-group} is-active>
     //    <Slider id={id}></Slider>
     //    <Input id={id-input}></Input>
@@ -2281,7 +2952,234 @@ function ControlGroup(param) {
     }, children);
 }
 
-function _define_property$e(obj, key, value) {
+var ProgressCircle = function(param) {
+    var width = param.width, height = param.height, _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, _param_strokeWidth = param.strokeWidth, strokeWidth = _param_strokeWidth === void 0 ? 5 : _param_strokeWidth; // trackOffset = 0,
+    param.indicatorLineColor; var indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor, radius = param.radius, circ = param.circ, activeZone = param.activeZone, normalisedValue = param.normalisedValue;
+    var cx = '50%';
+    var cy = '50%';
+    var unipolarOffset = circ - activeZone * (normalisedValue * 100) / 100;
+    var bipolarOffset = circ - activeZone * (normalisedValue * 100 - 50) / 100;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        className: "ProgressCircle",
+        width: width,
+        height: height
+    }, /*#__PURE__*/ React__default.createElement("circle", {
+        id: "circle2",
+        className: "ProgressCircle-bg",
+        cx: cx,
+        cy: cy,
+        r: radius,
+        style: {
+            stroke: trackColor ? trackColor : 'var(--bg-lv2)',
+            strokeWidth: strokeWidth,
+            strokeDasharray: circ,
+            transform: 'rotate(135deg)',
+            strokeDashoffset: circ - activeZone
+        }
+    }), /*#__PURE__*/ React__default.createElement("circle", {
+        id: "circle2",
+        className: "ProgressCircle-fg",
+        cx: cx,
+        cy: cy,
+        r: radius,
+        style: {
+            stroke: indicatorLineGradient === GradientStyles.unicolor ? 'url(#unicolorGradient)' : 'url(#multicolorGradient)',
+            strokeWidth: strokeWidth,
+            strokeDasharray: circ,
+            //   transform: `rotate(${polarity === Polarity.unipolar ? '135deg' : '270deg'})`,
+            transform: polarity === Polarity.unipolar ? 'rotate(135deg)' : 'rotate(270deg)',
+            strokeDashoffset: polarity === Polarity.unipolar ? unipolarOffset : bipolarOffset
+        }
+    }), /*#__PURE__*/ React__default.createElement("linearGradient", {
+        id: "unicolorGradient",
+        x1: "0%",
+        y1: "0%",
+        x2: "100%",
+        y2: "0%"
+    }, /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "0%",
+        "stop-color": "var(--color-brand-700)"
+    }), /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "80%",
+        "stop-color": "var(--color-brand)"
+    })), /*#__PURE__*/ React__default.createElement("linearGradient", {
+        id: "multicolorGradient",
+        x1: "0%",
+        y1: "0%",
+        x2: "100%",
+        y2: "0%"
+    }, /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "0%",
+        "stop-color": "var(--color-brand-700)"
+    }), /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "80%",
+        "stop-color": "var(--color-brand-secondary)"
+    })));
+};
+var InnerCircle = function(param) {
+    var _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, _param_markerShape = param.markerShape, markerShape = _param_markerShape === void 0 ? RotarySliderMarkerShapes.circle : _param_markerShape, normalisedValue = param.normalisedValue, knobFillColor = param.knobFillColor, _param_knobStrokeColor = param.knobStrokeColor, knobStrokeColor = _param_knobStrokeColor === void 0 ? 'var(--bg-lv10)' : _param_knobStrokeColor;
+    var width = rotarySliderSizeMap[size].width;
+    var height = rotarySliderSizeMap[size].height;
+    var cx = '50%';
+    var cy = '50%';
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        className: "InnerCircle",
+        width: width,
+        height: height,
+        style: {
+            transform: markerShape === RotarySliderMarkerShapes.circle ? "rotate(".concat(-90 + normalisedValue * 270, "deg)") : "rotate(".concat(-225 + normalisedValue * 270, "deg)")
+        }
+    }, /*#__PURE__*/ React__default.createElement("circle", {
+        id: "InnerCircle",
+        className: "InnerCircle",
+        cx: cx,
+        cy: cy,
+        r: size === RotarySliderSizes.small ? 12 : 24,
+        fill: knobFillColor || "url(#radialGradient)",
+        filter: "url(#boxShadow)",
+        style: {
+            stroke: knobStrokeColor,
+            strokeWidth: 2
+        }
+    }), markerShape === RotarySliderMarkerShapes.circle ? /*#__PURE__*/ React__default.createElement("circle", {
+        id: "InnerCircle-marker",
+        className: "InnerCircle-marker",
+        cx: size === RotarySliderSizes.small ? 16 : 20,
+        cy: size === RotarySliderSizes.small ? 16 : 20,
+        r: 2,
+        style: {
+            fill: knobStrokeColor
+        }
+    }) : /*#__PURE__*/ React__default.createElement("rect", {
+        id: "InnerCircle-marker",
+        className: "InnerCircle-marker",
+        x: size === RotarySliderSizes.small ? 19 : 10,
+        y: size === RotarySliderSizes.small ? -31 : 10,
+        width: 2,
+        height: 8,
+        style: {
+            transform: 'rotate(90deg)',
+            fill: knobStrokeColor
+        }
+    }), /*#__PURE__*/ React__default.createElement("defs", null, /*#__PURE__*/ React__default.createElement("filter", {
+        id: "boxShadow",
+        x: "-50%",
+        y: "-50%",
+        width: "200%",
+        height: "200%"
+    }, /*#__PURE__*/ React__default.createElement("feGaussianBlur", {
+        in: "SourceAlpha",
+        stdDeviation: "3",
+        result: "blur"
+    }), /*#__PURE__*/ React__default.createElement("feComposite", {
+        in: "SourceAlpha",
+        operator: "arithmetic",
+        k2: "-1",
+        k3: "1",
+        result: "shadowAlpha"
+    }), /*#__PURE__*/ React__default.createElement("feFlood", {
+        "flood-color": "rgba(0,0,0,0.5)",
+        result: "floodColor"
+    }), /*#__PURE__*/ React__default.createElement("feComposite", {
+        in: "floodColor",
+        in2: "shadowAlpha",
+        operator: "in",
+        result: "boxShadow"
+    }), /*#__PURE__*/ React__default.createElement("feMerge", null, /*#__PURE__*/ React__default.createElement("feMergeNode", {
+        in: "SourceGraphic"
+    }), /*#__PURE__*/ React__default.createElement("feMergeNode", {
+        in: "boxShadow"
+    }))), /*#__PURE__*/ React__default.createElement("radialGradient", {
+        id: "radialGradient",
+        cx: "50%",
+        cy: "50%",
+        r: "50%",
+        fx: "50%",
+        fy: "50%"
+    }, /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "75%",
+        style: {
+            stopColor: 'var(--bg-lv3)',
+            stopOpacity: '0'
+        }
+    }), /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "90%",
+        style: {
+            stopColor: 'var(--bg-lv3)',
+            stopOpacity: '1'
+        }
+    }))));
+};
+var BarSliderMarker = function(param) {
+    var _param_markerFillColor = param.markerFillColor, markerFillColor = _param_markerFillColor === void 0 ? 'var(--bg-lv2)' : _param_markerFillColor, _param_markerStrokeColor = param.markerStrokeColor, markerStrokeColor = _param_markerStrokeColor === void 0 ? 'var(--bg-lv12)' : _param_markerStrokeColor, _param_strokeWidth = param.strokeWidth, strokeWidth = _param_strokeWidth === void 0 ? 3 : _param_strokeWidth;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        className: "BarSliderMarker",
+        width: "18px",
+        height: "18px"
+    }, /*#__PURE__*/ React__default.createElement("circle", {
+        id: "BarSliderMarker",
+        className: "BarSliderMarker",
+        r: "6px",
+        cx: '50%',
+        cy: '50%',
+        fill: "url(#radialGradient)",
+        filter: "url(#boxShadow)",
+        style: {
+            stroke: markerStrokeColor,
+            strokeWidth: strokeWidth,
+            fill: markerFillColor
+        }
+    }), /*#__PURE__*/ React__default.createElement("defs", null, /*#__PURE__*/ React__default.createElement("filter", {
+        id: "boxShadow",
+        x: "-50%",
+        y: "-50%",
+        width: "200%",
+        height: "200%"
+    }, /*#__PURE__*/ React__default.createElement("feGaussianBlur", {
+        in: "SourceAlpha",
+        stdDeviation: "3",
+        result: "blur"
+    }), /*#__PURE__*/ React__default.createElement("feComposite", {
+        in: "SourceAlpha",
+        operator: "arithmetic",
+        k2: "-1",
+        k3: "1",
+        result: "shadowAlpha"
+    }), /*#__PURE__*/ React__default.createElement("feFlood", {
+        "flood-color": "rgba(0,0,0,0.5)",
+        result: "floodColor"
+    }), /*#__PURE__*/ React__default.createElement("feComposite", {
+        in: "floodColor",
+        in2: "shadowAlpha",
+        operator: "in",
+        result: "boxShadow"
+    }), /*#__PURE__*/ React__default.createElement("feMerge", null, /*#__PURE__*/ React__default.createElement("feMergeNode", {
+        in: "SourceGraphic"
+    }), /*#__PURE__*/ React__default.createElement("feMergeNode", {
+        in: "boxShadow"
+    }))), /*#__PURE__*/ React__default.createElement("radialGradient", {
+        id: "radialGradient",
+        cx: "50%",
+        cy: "50%",
+        r: "50%",
+        fx: "50%",
+        fy: "50%"
+    }, /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "75%",
+        style: {
+            stopColor: 'var(--bg-lv3)',
+            stopOpacity: '0'
+        }
+    }), /*#__PURE__*/ React__default.createElement("stop", {
+        offset: "90%",
+        style: {
+            stopColor: 'var(--bg-lv3)',
+            stopOpacity: '1'
+        }
+    }))));
+};
+
+function _define_property$d(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -2294,7 +3192,7 @@ function _define_property$e(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$e(target) {
+function _object_spread$d(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2304,7 +3202,7 @@ function _object_spread$e(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$e(target, key, source[key]);
+            _define_property$d(target, key, source[key]);
         });
     }
     return target;
@@ -2328,67 +3226,79 @@ function _object_spread_props$2(target, source) {
     }
     return target;
 }
-var ProgressCircle = function(param) {
-    var color = param.color, bgColor = param.bgColor, _param_width = param.width, width = _param_width === void 0 ? 40 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 40 : _param_height, _param_strokeWidth = param.strokeWidth, strokeWidth = _param_strokeWidth === void 0 ? 3 : _param_strokeWidth, _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, value = param.value;
-    var cx = width / 2;
-    var cy = height / 2;
-    var radius = (width - strokeWidth * 2) / 2;
+function RotaryCircle(param) {
+    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, className = param.className, id = param.id, _param_trackWidth = param.trackWidth, trackWidth = _param_trackWidth === void 0 ? 5 : _param_trackWidth; param.trackOffset; var sliderValue = param.sliderValue, bindDrag = param.bindDrag, onDoubleClick = param.onDoubleClick, _param_size = param.size, size = _param_size === void 0 ? RotarySliderSizes.small : _param_size, indicatorLineColor = param.indicatorLineColor, indicatorLineGradient = param.indicatorLineGradient, trackColor = param.trackColor; param.trackStrokeColor; var knobStrokeColor = param.knobStrokeColor, knobFillColor = param.knobFillColor, markerShape = param.markerShape, style = param.style;
+    var width = rotarySliderSizeMap[size].width;
+    var height = rotarySliderSizeMap[size].height;
+    var radius = (width - trackWidth * 2) / 2;
     var circ = 2 * 3.14 * radius;
     var activeZone = circ - circ * 0.25;
-    var unipolarOffset = circ - activeZone * (value * 100) / 100;
-    var bipolarOffset = circ - activeZone * (value * 100 - 50) / 100;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        className: "ProgressCircle",
-        width: width,
-        height: height
-    }, /*#__PURE__*/ React__default.createElement("circle", {
-        className: "ProgressCircle-bg",
-        cx: cx,
-        cy: cy,
-        r: radius,
+    return /*#__PURE__*/ React__default.createElement(Box, _object_spread_props$2(_object_spread$d({
+        id: id,
+        tabIndex: 0,
+        className: classnames('Slider', 'RotarySlider', polarity === Polarity.unipolar ? 'Slider-polarity-unipolar' : 'Slider-polarity-bipolar', className)
+    }, bindDrag()), {
+        onDoubleClick: function() {
+            onDoubleClick && onDoubleClick();
+        },
+        style: _object_spread$d({
+            touchAction: 'none',
+            height: "".concat(height !== null && height !== void 0 ? height : width, "px"),
+            width: "".concat(width, "px")
+        }, style)
+    }), sliderValue !== null ? /*#__PURE__*/ React__default.createElement("div", {
         style: {
-            stroke: bgColor,
-            strokeWidth: strokeWidth,
-            strokeDasharray: "".concat(activeZone)
+            position: 'relative',
+            width: width,
+            height: height
         }
-    }), polarity === Polarity.bipolar ? /*#__PURE__*/ React__default.createElement("circle", {
-        id: "circle2",
-        className: "ProgressCircle-fg",
-        cx: cx,
-        cy: cy,
-        r: radius,
+    }, /*#__PURE__*/ React__default.createElement("div", {
+        className: "RotarySlider-positioning-wrapper",
         style: {
-            stroke: color,
-            strokeWidth: strokeWidth,
-            strokeLinecap: 'round',
-            strokeDasharray: circ,
-            transform: "rotate(270deg)",
-            strokeDashoffset: 107.5
+            width: '100%',
+            height: '100%'
         }
-    }) : null, /*#__PURE__*/ React__default.createElement("circle", {
-        id: "circle2",
-        className: "ProgressCircle-fg",
-        cx: cx,
-        cy: cy,
-        r: radius,
+    }, /*#__PURE__*/ React__default.createElement(ProgressCircle, {
+        width: width,
+        height: height,
+        polarity: polarity,
+        radius: radius,
+        circ: circ,
+        strokeWidth: trackWidth,
+        activeZone: activeZone,
+        normalisedValue: sliderValue,
+        indicatorLineColor: indicatorLineColor,
+        indicatorLineGradient: indicatorLineGradient,
+        trackColor: trackColor,
+        gradient: true
+    })), /*#__PURE__*/ React__default.createElement("div", {
+        className: 'RotarySlider-positioning-wrapper',
         style: {
-            stroke: color,
-            strokeWidth: strokeWidth,
-            strokeLinecap: 'round',
-            strokeDasharray: circ,
-            transform: "rotate(".concat(polarity === Polarity.unipolar ? '135deg' : '270deg', ")"),
-            strokeDashoffset: polarity === Polarity.unipolar ? unipolarOffset : bipolarOffset
-        }
-    }));
-};
+            width: '100%',
+            height: '100%'
+        }
+    }, /*#__PURE__*/ React__default.createElement(InnerCircle, {
+        normalisedValue: sliderValue,
+        size: size,
+        markerShape: markerShape,
+        knobStrokeColor: knobStrokeColor,
+        knobFillColor: knobFillColor
+    }))) : '');
+}
+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; param.rotationBehavior; var _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_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
+    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, label = param.label, className = param.className, id = param.id, onChange = param.onChange, 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.labelColor; var _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-500)' : _param_color, _param_bgColor = param.bgColor, bgColor = _param_bgColor === void 0 ? 'var(--color-gray-200)' : _param_bgColor, _param_width = param.width, width = _param_width === void 0 ? 40 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 38 : _param_height, style = param.style;
+    } : _param_mockProperties; param.style;
+    var _rotarySliderSizeMap_size;
     var _useSlider = useSlider({
         id: id,
         label: label,
@@ -2396,9 +3306,7 @@ function RotarySlider(param) {
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         onChange: onChange,
         isRandomizable: isRandomizable
-    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, // onMouseEnter,
-    setToDefaultState = _useSlider.setToDefaultState, setNormalisedState = _useSlider.setNormalisedState, // isActive,
-    properties = _useSlider.properties;
+    }), 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, {
@@ -2406,46 +3314,43 @@ function RotarySlider(param) {
         flexDirection: Box.flexDirection.column,
         gap: Box.gap.none,
         flex: "0 1 auto"
-    }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
-        style: {
-            borderColor: "".concat(color, " transparent ").concat(color, " transparent")
-        },
-        className: classnames('RotarySlider-center-marker')
-    }), /*#__PURE__*/ React__default.createElement(Box, _object_spread_props$2(_object_spread$e({
-        id: id,
-        tabIndex: 0,
-        className: classnames('Slider', 'RotarySlider', // isActive ? 'corner-border' : '',
-        polarity === Polarity.unipolar ? 'Slider-polarity-unipolar' : 'Slider-polarity-bipolar', className)
-    }, bindDrag()), {
-        // onMouseEnter={onMouseEnter}
-        onDoubleClick: function() {
-            setToDefaultState();
-        },
-        style: _object_spread$e({
-            touchAction: 'none',
-            height: "".concat(height, "px"),
-            width: "".concat(width + 2, "px")
-        }, style)
-    }), normalisedValue !== null ? /*#__PURE__*/ React__default.createElement("div", {
-        className: "ProgressCircle-wrapper"
-    }, /*#__PURE__*/ React__default.createElement(ProgressCircle, {
-        value: normalisedValue,
+    }, 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,
-        color: bgColor,
-        bgColor: color,
-        width: width,
-        height: height
-    })) : ''), /*#__PURE__*/ React__default.createElement(Input, {
+        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(width, "px"),
-            marginBottom: 'var(--spacing-sm)'
+            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({
@@ -2456,17 +3361,16 @@ function RotarySlider(param) {
             });
             normalisedVal !== undefined && setNormalisedState(normalisedVal);
         }
-    }), /*#__PURE__*/ React__default.createElement(Label, {
-        padding: [
-            Label.padding.none
-        ],
-        fontSize: Label.fontSize.xSmall,
-        value: label
     })));
 }
-RotarySlider.sliderPolarity = Polarity;
+RotarySlider.polarity = Polarity;
+RotarySlider.size = RotarySliderSizes;
+RotarySlider.markerShape = RotarySliderMarkerShapes;
 
-function _define_property$d(obj, key, value) {
+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, {
             value: value,
@@ -2479,7 +3383,7 @@ function _define_property$d(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$d(target) {
+function _object_spread$c(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -2489,7 +3393,7 @@ function _object_spread$d(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$d(target, key, source[key]);
+            _define_property$c(target, key, source[key]);
         });
     }
     return target;
@@ -2513,8 +3417,15 @@ function _object_spread_props$1(target, source) {
     }
     return target;
 }
-function Slider(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.unipolar : _param_polarity, _param_sliderOrientation = param.sliderOrientation, sliderOrientation = _param_sliderOrientation === void 0 ? Orientation.vertical : _param_sliderOrientation, _param_isRandomizable = param.isRandomizable, isRandomizable = _param_isRandomizable === void 0 ? false : _param_isRandomizable, _param_isStandalone = param.isStandalone, isStandalone = _param_isStandalone === void 0 ? true : _param_isStandalone, className = param.className, id = param.id, onChange = param.onChange, style = param.style, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-500)' : _param_color, _param_trackColor = param.trackColor, trackColor = _param_trackColor === void 0 ? 'var(--bg-input)' : _param_trackColor, label = param.label, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
+// 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,
@@ -2522,6 +3433,16 @@ function Slider(param) {
         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,
@@ -2529,115 +3450,100 @@ function Slider(param) {
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         onChange: onChange,
         isRandomizable: isRandomizable,
+        orientation: orientation,
+        dragOrientation: dragOrientation,
         sliderElementRef: sliderElementRef
-    }), // bindBarSliderDrag,
-    bindSequenceBarSliderDrag = _useSlider.bindSequenceBarSliderDrag, bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue;
-    var drag = isStandalone ? bindDrag : bindSequenceBarSliderDrag;
+    }), 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(className),
-        flex: '1',
+        className: classnames('BarSlider', isNarrowTrack && 'BarSlider--narrowTrack', isWideTrack && 'BarSlider--wideTrack', isVertical && 'BarSlider--isVertical', isHorizontal && 'BarSlider--isHorizontal', className),
         id: id,
-        ref: sliderElementRef
-    }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
+        ref: sliderElementRef,
+        gap: Box.gap.small,
+        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("div", _object_spread_props$1(_object_spread$d({
-        className: classnames('Slider', 'Slider-bar')
+    }), /*#__PURE__*/ React__default.createElement(Box, {
+        padding: isNarrowTrack ? (showValue !== null && showValue !== void 0 ? showValue : defaultShowValueState) ? [
+            Box.padding.mediumSmall,
+            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}
         id: id,
-        style: _object_spread$d({
-            touchAction: 'none',
-            backgroundColor: trackColor,
-            position: 'relative',
-            minWidth: sliderOrientation === Orientation.horizontal ? '100px' : '20px',
-            minHeight: sliderOrientation === Orientation.horizontal ? '20px' : '75px'
+        style: _object_spread$c({
+            background: trackColor,
+            stroke: trackStrokeColor ? "1px solid ".concat(trackStrokeColor) : 'none'
         }, style)
-    }), normalisedValue ? /*#__PURE__*/ React__default.createElement("div", {
+    }), 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-input')}
-        style: _object_spread$d({
-            position: 'absolute',
-            backgroundColor: color,
-            pointerEvents: 'none'
+        // 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: sliderOrientation,
+            orientation: orientation,
             polarity: polarity,
             normalisedValue: normalisedValue
         }))
-    }) : ''), label ? /*#__PURE__*/ React__default.createElement(Label, {
-        padding: [
-            Label.padding.mediumSmall
-        ],
-        fontSize: Label.fontSize.small,
-        value: label,
-        color: color
-    }) : null);
-}
-Slider.sliderType = SliderType;
-Slider.sliderPolarity = Polarity;
-Slider.sliderOrientation = Orientation;
-
-var HeadingTags = /*#__PURE__*/ function(HeadingTags) {
-    HeadingTags["h1"] = "h1";
-    HeadingTags["h2"] = "h2";
-    HeadingTags["h3"] = "h3";
-    HeadingTags["h4"] = "h4";
-    return HeadingTags;
-}({});
-
-function _define_property$c(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$c(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;
-            }));
+    })) : '', isNarrowTrack ? /*#__PURE__*/ React__default.createElement("div", {
+        className: "BarSlider-MarkerWrapper",
+        style: {
+            bottom: '2px'
         }
-        ownKeys.forEach(function(key) {
-            _define_property$c(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function Heading(param) {
-    var value = param.value, id = param.id, className = param.className, style = param.style, _param_tag = param.tag, tag = _param_tag === void 0 ? HeadingTags.h1 : _param_tag, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none
-    ] : _param_padding, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.large : _param_fontSize, children = param.children;
-    var Tag = tag;
-    var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React.createElement(Tag, {
+    }, /*#__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,
-        style: _object_spread$c({
-            fontSize: "var(--text-".concat(fontSize),
-            paddingTop: "var(--p-".concat(padding[0], ")"),
-            paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
-            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
-            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
-            WebkitUserSelect: 'none',
-            userSelect: 'none'
-        }, style),
-        className: classnames('Heading', 'font-bold', 'select-none', "text-".concat(fontSize), className)
-    }, value ? value : children);
+        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);
 }
-Heading.fontSize = FontSizes;
-Heading.tag = HeadingTags;
-Heading.padding = Spacing;
+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;
@@ -2685,45 +3591,202 @@ 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);
 }
-// 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
-// ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
-var useIndicator = function(param) {
-    var id = param.id;
-    var isLocalhost = window.location.hostname === 'localhost';
-    var _useState = _sliced_to_array$c(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
-    // Set the initial state
-    useEffect(function() {
-        if (!isLocalhost) {
-            var _Juce_getToggleState;
-            var toggleState = (_Juce_getToggleState = Juce.getToggleState(id)) === null || _Juce_getToggleState === void 0 ? void 0 : _Juce_getToggleState.value;
-            setIsActive(toggleState);
-        }
-    }, []);
-    // Update the local state when the ID changes
+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() {
-        var _Juce_getToggleState;
-        var toggleState = (_Juce_getToggleState = Juce.getToggleState(id)) === null || _Juce_getToggleState === void 0 ? void 0 : _Juce_getToggleState.value;
-        setIsActive(toggleState);
+        setIndex(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex());
     }, [
         id
     ]);
-    // Sets up listeners to handle changes on the backend
     useEffect(function() {
-        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() {
-            setIsActive(toggleState === null || toggleState === void 0 ? void 0 : toggleState.value);
+        setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
+    });
+    useEffect(function() {
+        if (modSlotPreview.slotId === id) {
+            setIndex(modSlotPreview.targetIndex);
+        }
+    }, [
+        modSlotTargets,
+        modSlotPreview
+    ]);
+    useEffect(function() {
+        var _comboBoxState_valueChangedEvent, _comboBoxState_propertiesChangedEvent;
+        var valueListenerId = comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_valueChangedEvent = comboBoxState.valueChangedEvent) === null || _comboBoxState_valueChangedEvent === void 0 ? void 0 : _comboBoxState_valueChangedEvent.addListener(function() {
+            if ((comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex()) !== prevIndex) {
+                setIndex(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex());
+            }
+        });
+        var propertiesListenerId = comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_propertiesChangedEvent = comboBoxState.propertiesChangedEvent) === null || _comboBoxState_propertiesChangedEvent === void 0 ? void 0 : _comboBoxState_propertiesChangedEvent.addListener(function() {
+            setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
         });
         return function cleanup() {
-            var _toggleState_valueChangedEvent;
-            toggleState === null || toggleState === void 0 ? void 0 : (_toggleState_valueChangedEvent = toggleState.valueChangedEvent) === null || _toggleState_valueChangedEvent === void 0 ? void 0 : _toggleState_valueChangedEvent.removeListener(valueListenerId);
+            var _comboBoxState_valueChangedEvent, _comboBoxState_propertiesChangedEvent;
+            comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_valueChangedEvent = comboBoxState.valueChangedEvent) === null || _comboBoxState_valueChangedEvent === void 0 ? void 0 : _comboBoxState_valueChangedEvent.removeListener(valueListenerId);
+            comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_propertiesChangedEvent = comboBoxState.propertiesChangedEvent) === null || _comboBoxState_propertiesChangedEvent === void 0 ? void 0 : _comboBoxState_propertiesChangedEvent.removeListener(propertiesListenerId);
         };
+    }, [
+        window
+    ]);
+    var selectedChoices = (_Object_values = Object.values(modSlotTargets)) === null || _Object_values === void 0 ? void 0 : _Object_values.filter(function(item) {
+        return item > 0;
+    });
+    var selectedLabels = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.filter(function(item, i) {
+        return selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices.includes(i);
+    });
+    var displayedLabels = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.filter(function(item) {
+        return !(selectedLabels === null || selectedLabels === void 0 ? void 0 : selectedLabels.includes(item)) || item === automatableParamLabels[index];
+    });
+    var filteredChoices = filter && (filter === null || filter === void 0 ? void 0 : filter.length) > 1 ? displayedLabels === null || displayedLabels === void 0 ? void 0 : displayedLabels.filter(function(item) {
+        var _item_toLowerCase;
+        return item === null || item === void 0 ? void 0 : (_item_toLowerCase = item.toLowerCase()) === null || _item_toLowerCase === void 0 ? void 0 : _item_toLowerCase.includes(filter === null || filter === void 0 ? void 0 : filter.toLowerCase());
+    }) : displayedLabels;
+    // const prevIndex = useRef<string | null>(null);
+    // const handleChange = (newValue: number) => {
+    //   if (newValue !== prevIndex.current) {
+    //     // const juceIndex = automatableParamLabels?.indexOf(newValue);
+    //     // comboBoxState?.setChoiceIndex(newValue);s
+    //     setIndex(newValue);
+    //     // onChange && onChange(newValue);
+    //     // //@ts-expect-error
+    //     // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
+    //     if (displayValInHeader) {
+    //       highlightedItemChanged({
+    //         label,
+    //         value: automatableParamLabels?.[newValue],
+    //       });
+    //     }
+    //     prevIndex.current = newValue;
+    //   }
+    // };
+    var incrementIndex = throttle(function() {
+        nextIndex.current = index + 1;
+    }, 100);
+    var decrementIndex = throttle(function() {
+        nextIndex.current = index - 1;
+    }, 100);
+    // Used in RotaryCombobox
+    var bindDrag = useGesture({
+        onDrag: function(param) {
+            var direction = param.direction;
+            //TODO: Move this out of useSlider
+            if (id !== modSlotPreview.rowId) {
+                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 {
-        isActive: isActive
+        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, {
@@ -2752,324 +3815,338 @@ function _object_spread$b(target) {
     }
     return target;
 }
-function IndicatorLight(param) {
-    var className = param.className, label = param.label, color = param.color, style = param.style, id = param.id;
-    var isActive = useIndicator({
-        id: id
-    }).isActive;
-    return /*#__PURE__*/ React__default.createElement(Box, {
-        flexDirection: Box.flexDirection.column,
-        gap: Box.gap.small,
-        alignItems: Box.alignItems.center
-    }, /*#__PURE__*/ React__default.createElement("div", {
+// 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: classnames('IndicatorLight', 'bg-input', className),
+        className: className,
         style: _object_spread$b({
-            width: '12px',
-            height: '12px',
-            background: isActive ? color : ''
+            position: 'relative',
+            height: height,
+            width: width,
+            margin: margin
         }, style)
-    }), label ? /*#__PURE__*/ React__default.createElement(Label, {
-        value: label
-    }) : null);
+    }, children, /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            position: 'absolute',
+            top: top,
+            right: right,
+            bottom: bottom,
+            left: left
+        }
+    }, positionedElement ? positionedElement : null));
 }
 
-var css_248z$5 = ".IconButton:hover:not(:disabled) {\n  filter: brightness(80%);\n}\n\n.IconButton svg {\n  height: 100%;\n  width: 100%;\n}\n";
-styleInject(css_248z$5);
-
-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;
-            }));
+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;
         }
-        ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
-        });
     }
-    return target;
+    return _arr;
 }
-var Icons = /*#__PURE__*/ function(Icons) {
-    Icons["undo"] = "Undo";
-    Icons["redo"] = "Redo";
-    Icons["random"] = "Random";
-    Icons["favorite"] = "Favorite";
-    Icons["up"] = "Up";
-    Icons["down"] = "Down";
-    Icons["save"] = "Save";
-    Icons["add"] = "Add";
-    Icons["delete"] = "Delete";
-    return Icons;
-}({});
-var Undo = function(param) {
-    var color = param.color, height = param.height;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        viewBox: "0 0 25 25",
-        "stroke-width": "1.5",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        color: color,
-        height: height,
-        width: height
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        d: "M4.5 8C8.5 8 11 8 15 8C15 8 15 8 15 8C15 8 20 8 20 12.7059C20 18 15 18 15 18C11.5714 18 9.71429 18 6.28571 18",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M7.5 11.5C6.13317 10.1332 5.36683 9.36683 4 8C5.36683 6.63317 6.13317 5.86683 7.5 4.5",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-    }));
-};
-var Redo = function(param) {
-    var color = param.color, height = param.height;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        viewBox: "0 0 25 25",
-        "stroke-width": "1.5",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        color: color,
-        height: height,
-        width: height
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        d: "M19.5 8C15.5 8 13 8 9 8C9 8 9 8 9 8C9 8 4 8 4 12.7059C4 18 9 18 9 18C12.4286 18 14.2857 18 17.7143 18",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M16.5 11.5C17.8668 10.1332 18.6332 9.36683 20 8C18.6332 6.63317 17.8668 5.86683 16.5 4.5",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-    }));
-};
-var Favorite = function(param) {
-    var color = param.color, height = param.height;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        "stroke-width": "1.5",
-        viewBox: "-7 -7 40 40",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        color: color,
-        height: height,
-        width: height
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        d: "M22 8.86222C22 10.4087 21.4062 11.8941 20.3458 12.9929C17.9049 15.523 15.5374 18.1613 13.0053 20.5997C12.4249 21.1505 11.5042 21.1304 10.9488 20.5547L3.65376 12.9929C1.44875 10.7072 1.44875 7.01723 3.65376 4.73157C5.88044 2.42345 9.50794 2.42345 11.7346 4.73157L11.9998 5.00642L12.2648 4.73173C13.3324 3.6245 14.7864 3 16.3053 3C17.8242 3 19.2781 3.62444 20.3458 4.73157C21.4063 5.83045 22 7.31577 22 8.86222Z",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linejoin": "round"
-    }));
-};
-var Up = function(param) {
-    var color = param.color, height = param.height;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        viewBox: "0 0 25 25",
-        "stroke-width": "1.5",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        color: color,
-        height: height,
-        width: height
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
-        d: "M5.30711 15.287C5.4232 15.5673 5.69668 15.75 6.00002 15.75H18C18.3034 15.75 18.5768 15.5673 18.6929 15.287C18.809 15.0068 18.7449 14.6842 18.5304 14.4697L12.5304 8.46967C12.2375 8.17678 11.7626 8.17678 11.4697 8.46967L5.46969 14.4697C5.25519 14.6842 5.19103 15.0068 5.30711 15.287Z",
-        fill: color
-    }));
-};
-var Down = function(param) {
-    var color = param.color, height = param.height;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        viewBox: "0 0 25 25",
-        "stroke-width": "1.5",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        color: color,
-        height: height,
-        width: height
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
-        d: "M5.30711 8.71299C5.4232 8.43273 5.69668 8.25 6.00002 8.25H18C18.3034 8.25 18.5768 8.43273 18.6929 8.71299C18.809 8.99324 18.7449 9.31583 18.5304 9.53033L12.5304 15.5303C12.2375 15.8232 11.7626 15.8232 11.4697 15.5303L5.46969 9.53033C5.25519 9.31583 5.19103 8.99324 5.30711 8.71299Z",
-        fill: color
-    }));
-};
-var Save = function(param) {
-    var color = param.color, height = param.height;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        "stroke-width": "1.5",
-        viewBox: "-7 -7 40 40",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        color: color,
-        height: height,
-        width: height
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        d: "M3 19V5C3 3.89543 3.89543 3 5 3H16.1716C16.702 3 17.2107 3.21071 17.5858 3.58579L20.4142 6.41421C20.7893 6.78929 21 7.29799 21 7.82843V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19Z",
-        stroke: color,
-        "stroke-width": "1.5"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M8.6 9H15.4C15.7314 9 16 8.73137 16 8.4V3.6C16 3.26863 15.7314 3 15.4 3H8.6C8.26863 3 8 3.26863 8 3.6V8.4C8 8.73137 8.26863 9 8.6 9Z",
-        stroke: color,
-        "stroke-width": "1.5"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M6 13.6V21H18V13.6C18 13.2686 17.7314 13 17.4 13H6.6C6.26863 13 6 13.2686 6 13.6Z",
-        stroke: color,
-        "stroke-width": "1.5"
-    }));
-};
-var Random = function(param) {
-    var color = param.color, height = param.height;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        viewBox: "0 0 25 25",
-        "stroke-width": "1.5",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        color: color,
-        height: height,
-        width: height
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        d: "M11.7 1.1732C11.8856 1.06603 12.1144 1.06603 12.3 1.17321L21.2263 6.3268C21.4119 6.43397 21.5263 6.63205 21.5263 6.84641V17.1536C21.5263 17.3679 21.4119 17.566 21.2263 17.6732L12.3 22.8268C12.1144 22.934 11.8856 22.934 11.7 22.8268L2.77372 17.6732C2.58808 17.566 2.47372 17.3679 2.47372 17.1536V6.84641C2.47372 6.63205 2.58808 6.43397 2.77372 6.32679L11.7 1.1732Z",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M17 15L7 15L12 7L17 15Z",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M2.5 6.5L12 7",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linejoin": "round"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M2.5 6.5L7 15",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linejoin": "round"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M21.5 6.5L17 15",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linejoin": "round"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M21.5 6.5L12 6.99995L12 1",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linejoin": "round"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M21.5 17.5L17 15",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linejoin": "round"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M2.5 17.5L7 15",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linejoin": "round"
-    }), /*#__PURE__*/ React__default.createElement("path", {
-        d: "M7 15L12 23L17 15",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linejoin": "round"
-    }));
-};
-var Add = function(param) {
-    var color = param.color, height = param.height;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        "stroke-width": "1.5",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        color: color,
-        height: height,
-        width: height
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        d: "M6 12H12M18 12H12M12 12V6M12 12V18",
-        stroke: color,
-        "stroke-width": "1.5",
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-    }));
-};
-var Delete = function(param) {
-    var color = param.color, height = param.height;
-    return /*#__PURE__*/ React__default.createElement("svg", {
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        color: color,
-        "stroke-width": "1.5",
-        height: height,
-        width: height
-    }, /*#__PURE__*/ React__default.createElement("path", {
-        "fill-rule": "evenodd",
-        "clip-rule": "evenodd",
-        d: "M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM9.70164 8.64124C9.40875 8.34835 8.93388 8.34835 8.64098 8.64124C8.34809 8.93414 8.34809 9.40901 8.64098 9.7019L10.9391 12L8.64098 14.2981C8.34809 14.591 8.34809 15.0659 8.64098 15.3588C8.93388 15.6517 9.40875 15.6517 9.70164 15.3588L11.9997 13.0607L14.2978 15.3588C14.5907 15.6517 15.0656 15.6517 15.3585 15.3588C15.6514 15.0659 15.6514 14.591 15.3585 14.2981L13.0604 12L15.3585 9.7019C15.6514 9.40901 15.6514 8.93414 15.3585 8.64124C15.0656 8.34835 14.5907 8.34835 14.2978 8.64124L11.9997 10.9393L9.70164 8.64124Z",
-        fill: color
-    }));
-};
-var iconList = {
-    Undo: Undo,
-    Redo: Redo,
-    Random: Random,
-    Favorite: Favorite,
-    Up: Up,
-    Down: Down,
-    Save: Save,
-    Add: Add,
-    Delete: Delete
+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);
+        }
+    };
+    // 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
+    };
 };
-// const getViewBoxWidth = (width: string) => {
-//   const numericWidth = width.match(/\d+/)?.[0];
-//   return numericWidth !== undefined ? parseInt(numericWidth) : 24;
-// };
-function Icon(param) {
-    var icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none
-    ] : _param_padding, _param_width = param.width, width = _param_width === void 0 ? '24px' : _param_width, _param_height = param.height, height = _param_height === void 0 ? '24px' : _param_height, className = param.className, style = param.style;
-    var _$Icon = iconList[icon];
+
+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({
+        id: id,
+        dataSource: dataSource
+    }).brightness;
     return /*#__PURE__*/ React__default.createElement(Box, {
-        className: "Icon ".concat(className ? className : ''),
-        onClick: onClick,
-        padding: padding,
+        flexDirection: Box.flexDirection.column,
+        gap: Box.gap.small,
+        alignItems: Box.alignItems.center,
+        width: "auto"
+    }, /*#__PURE__*/ React__default.createElement("div", {
         style: _object_spread$a({
-            width: width,
-            height: height
+            position: 'relative',
+            width: '12px',
+            height: '12px',
+            borderRadius: shape === "round" ? '100%' : 'initial',
+            overflow: 'hidden'
         }, style)
-    }, /*#__PURE__*/ React__default.createElement(_$Icon, {
-        height: width,
-        color: disabled ? 'var(--color-gray-400)' : color
-    }));
+    }, /*#__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);
 }
-Icon.icon = Icons;
-Icon.padding = Spacing;
-Icon.margin = Spacing;
+IndicatorLight.dataSource = DataSource;
+
+// Rotary Slider UI component.
+// Connects to Juce's Slider element
+var SliderVariants = /*#__PURE__*/ function(SliderVariants) {
+    SliderVariants["bar"] = "bar";
+    SliderVariants["rotary"] = "rotary";
+    SliderVariants["rotaryCombobox"] = "rotaryCombobox";
+    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,
+    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, {
+        polarity: polarity,
+        label: label,
+        labelColor: labelColor,
+        trackWidth: trackWidth,
+        indicatorLineColor: indicatorLineColor,
+        indicatorLineGradient: indicatorLineGradient,
+        // trackOffset={trackOffset}
+        markerShape: markerShape,
+        trackColor: trackColor,
+        trackStrokeColor: trackStrokeColor,
+        knobStrokeColor: knobStrokeColor,
+        knobFillColor: knobFillColor,
+        className: className,
+        id: id,
+        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, {
+        polarity: polarity,
+        label: label,
+        labelColor: labelColor,
+        trackWidth: trackWidth,
+        indicatorLineColor: indicatorLineColor,
+        indicatorLineGradient: indicatorLineGradient,
+        // trackOffset={trackOffset}
+        markerShape: markerShape,
+        trackColor: trackColor,
+        trackStrokeColor: trackStrokeColor,
+        knobStrokeColor: knobStrokeColor,
+        knobFillColor: knobFillColor,
+        className: className,
+        id: id,
+        onChange: onChange,
+        size: size,
+        mockInitialNormalisedValue: mockInitialNormalisedValue,
+        isRandomizable: isRandomizable,
+        rotationBehavior: rotationBehavior
+    })) : null, variant === "bar" ? /*#__PURE__*/ React__default.createElement(Slider$1, {
+        polarity: polarity,
+        label: label,
+        indicatorLineColor: indicatorLineColor,
+        indicatorLineGradient: indicatorLineGradient,
+        trackColor: trackColor,
+        trackStrokeColor: trackStrokeColor,
+        markerFillColor: markerFillColor,
+        markerStrokeColor: markerStrokeColor,
+        className: className,
+        barSliderVariant: barSliderVariant,
+        showValue: showValue,
+        id: id,
+        onChange: onChange,
+        mockInitialNormalisedValue: mockInitialNormalisedValue,
+        isRandomizable: isRandomizable,
+        orientation: orientation,
+        dragOrientation: dragOrientation,
+        isStandalone: isStandalone,
+        isHighlighted: isHighlighted,
+        includeValueInHeight: includeValueInHeight
+    }) : null);
+}
+Slider.polarity = Polarity;
+Slider.size = RotarySliderSizes;
+Slider.variant = SliderVariants;
+Slider.barSliderVariant = BarSliderVariants;
+Slider.orientation = Orientation;
+Slider.markerShape = RotarySliderMarkerShapes;
+Slider.gradientStyles = GradientStyles;
+
+var HeadingTags = /*#__PURE__*/ function(HeadingTags) {
+    HeadingTags["h1"] = "h1";
+    HeadingTags["h2"] = "h2";
+    HeadingTags["h3"] = "h3";
+    HeadingTags["h4"] = "h4";
+    return HeadingTags;
+}({});
 
 function _define_property$9(obj, key, value) {
     if (key in obj) {
@@ -3099,33 +4176,32 @@ function _object_spread$9(target) {
     }
     return target;
 }
-function IconButton(param) {
-    var id = param.id, icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'var(--bg-page)' : _param_backgroundColor, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Button.padding.none
-    ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
-        Button.margin.none
-    ] : _param_margin, _param_width = param.width, width = _param_width === void 0 ? '24px' : _param_width, _param_height = param.height, height = _param_height === void 0 ? '24px' : _param_height, className = param.className, style = param.style;
-    var Icon = iconList[icon];
-    return /*#__PURE__*/ React__default.createElement(Button, {
+function Heading(param) {
+    var value = param.value, id = param.id, className = param.className, style = param.style, _param_removeLineHeight = param.removeLineHeight, removeLineHeight = _param_removeLineHeight === void 0 ? false : _param_removeLineHeight, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_tag = param.tag, tag = _param_tag === void 0 ? HeadingTags.h1 : _param_tag, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none
+    ] : _param_padding, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.large : _param_fontSize, children = param.children;
+    var Tag = tag;
+    var _padding_, _padding_1, _padding_2, _ref;
+    return /*#__PURE__*/ React.createElement(Tag, {
         id: id,
-        className: "IconButton ".concat(className ? className : ''),
-        onClick: onClick,
-        padding: padding,
-        margin: margin,
-        disabled: disabled,
         style: _object_spread$9({
-            backgroundColor: backgroundColor,
-            width: width,
-            height: height
-        }, style)
-    }, /*#__PURE__*/ React__default.createElement(Icon, {
-        height: height,
-        color: disabled ? 'var(--color-gray-400)' : color
-    }));
+            fontSize: "var(--text-".concat(fontSize),
+            paddingTop: "var(--p-".concat(padding[0], ")"),
+            paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
+            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
+            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+            WebkitUserSelect: 'none',
+            userSelect: 'none',
+            letterSpacing: '1px',
+            lineHeight: removeLineHeight ? '.75em' : 'auto',
+            color: color
+        }, style),
+        className: classnames('Heading', 'font-bold', 'select-none', "text-".concat(fontSize), className)
+    }, value ? value : children);
 }
-IconButton.icon = Icons;
-IconButton.padding = Spacing;
-IconButton.margin = Spacing;
+Heading.fontSize = FontSizes;
+Heading.tag = HeadingTags;
+Heading.padding = Spacing;
 
 function _define_property$8(obj, key, value) {
     if (key in obj) {
@@ -3178,10 +4254,11 @@ function KeyValueDisplayScreen(param) {
             Box.padding.xSmall,
             Box.padding.medium
         ],
+        height: "30px",
         className: classnames('KeyValueDisplayScreen', 'uppercase', 'bg-popover', 'rounded-sm'),
         style: {
             maxWidth: '250px',
-            backgroundColor: "var(--bg-page)",
+            backgroundColor: "var(--bg-lv1)",
             color: "var(--color-text)"
         }
     }, /*#__PURE__*/ React__default.createElement(Label, {
@@ -3274,15 +4351,15 @@ function LinePlot(param) {
     })) : null);
 }
 
-var css_248z$4 = ".Oscilloscope {\n    background: #0EAC8B;\n    box-shadow: inset 0 0 20px #086350;\n    height: 200px;\n  };";
-styleInject(css_248z$4);
+var css_248z$5 = ".Oscilloscope {\n    background: #0EAC8B;\n    box-shadow: inset 0 0 20px #086350;\n    height: 200px;\n  };";
+styleInject(css_248z$5);
 
-function _array_like_to_array$b(arr, len) {
+function _array_like_to_array$a(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$b(arr) {
+function _array_with_holes$a(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _define_property$7(obj, key, value) {
@@ -3298,7 +4375,7 @@ function _define_property$7(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$b(arr, i) {
+function _iterable_to_array_limit$a(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3322,7 +4399,7 @@ function _iterable_to_array_limit$b(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$b() {
+function _non_iterable_rest$a() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$7(target) {
@@ -3340,20 +4417,20 @@ function _object_spread$7(target) {
     }
     return target;
 }
-function _sliced_to_array$b(arr, i) {
-    return _array_with_holes$b(arr) || _iterable_to_array_limit$b(arr, i) || _unsupported_iterable_to_array$b(arr, i) || _non_iterable_rest$b();
+function _sliced_to_array$a(arr, i) {
+    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$a();
 }
-function _unsupported_iterable_to_array$b(o, minLen) {
+function _unsupported_iterable_to_array$a(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$b(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$b(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
 }
 function Oscilloscope(param) {
     var width = param.width, height = param.height, className = param.className, style = param.style, id = param.id;
-    var _useState = _sliced_to_array$b(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
+    var _useState = _sliced_to_array$a(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
     var cycleLength = useRef(0);
     useEffect(function() {
         //@ts-expect-error
@@ -3391,18 +4468,18 @@ function Oscilloscope(param) {
     }));
 }
 
-var css_248z$3 = "@import '../../styles.css';\n.ModuleHeader {\n  background-color: var(--bg-section);\n  font-weight: normal;\n  font-family: var(--font-leagueSpartan);\n  max-height: 64px;\n}\n\n/* TODO: Use Tailwind classes */\n#advancedLayoutButton {\n  background-color: var(--bg-page);\n  color: var(--color-text);\n  /* border: 2px solid var(--color-brand); */\n  border-radius: 3px;\n  height: 30px;\n  font-size: var(--text-md);\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n    color: var(--color-brand);\n  }\n}\n\n#advancedLayoutButton.selected {\n  color: var(--color-brand);\n}\n\n.advancedLayoutButtonLabel {\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n  /* display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25; */\n}\n";
-styleInject(css_248z$3);
+var css_248z$4 = "@import '../../styles.css';\n.ModuleHeader {\n  background-color: var(--bg-lv3);\n  font-weight: normal;\n  font-family: var(--font-leagueSpartan);\n  max-height: 64px;\n}\n\n/* TODO: Use Tailwind classes */\n#advancedLayoutButton {\n  background-color: var(--bg-lv1);\n  color: var(--color-text);\n  /* border: 2px solid var(--color-brand); */\n  border-radius: 3px;\n  height: 30px;\n  font-size: var(--text-md);\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n    color: var(--color-brand);\n  }\n}\n\n#advancedLayoutButton.selected {\n  color: var(--color-brand);\n}\n\n.advancedLayoutButtonLabel {\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n  /* display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25; */\n}\n";
+styleInject(css_248z$4);
 
-var css_248z$2 = ".PresetManagerContainer {\n  width: 100%;\n  height: 100%;\n  background-color: var(--bg-page);\n  color: var(--color-text);\n}\n\n.PresetManagerButton {\n  width: 100%;\n  height: 100%;\n  max-width: 300px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n  cursor: pointer;\n  text-align: center;\n  font-family: var(--font-leagueSpartan);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 225px;\n  display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25;\n  /* position: relative; */\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n  }\n  /* &.isDirty {\n    &::after {\n      content: '*';\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n    }\n  } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n  content: '*';\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  right: -0.75rem;\n  top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n  position: relative;\n  width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n  background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n  position: absolute;\n  font-family: var(--font-leagueSpartan);\n  right: 0px;\n  left: 0px;\n  width: 100%;\n  max-width: 400px !important;\n  color: var(--color-text);\n  background: var(--bg-popover);\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n  outline: none;\n}\n\n/* .PresetManagerCategoryItem {\n  font-family: var(--font-leagueSpartan);\n  cursor: pointer;\n  background: var(--color-gray-800);\n  text-transform: uppercase;\n  &:hover,\n  &.isSelected {\n    background: var(--bg-selected);\n  }\n} */\n\n.PresetManagerListItem {\n  cursor: pointer;\n  background: var(--color-gray-800);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.PresetManagerListItem:hover,\n.PresetManagerListItem.isSelected {\n  background: var(--bg-selected);\n}\n\n.PresetManagerListItemText {\n  display: inline-block;\n  vertical-align: middle;\n  height: 1.5rem;\n  line-height: 1.75;\n}\n";
-styleInject(css_248z$2);
+var css_248z$3 = ".PresetManagerContainer {\n  width: 100%;\n  height: 100%;\n  background-color: var(--bg-lv1);\n  color: var(--color-text);\n}\n\n.PresetManagerButton {\n  width: 100%;\n  height: 100%;\n  max-width: 300px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n  cursor: pointer;\n  text-align: center;\n  font-family: var(--font-leagueSpartan);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 225px;\n  display: inline-block;\n  vertical-align: middle;\n  height: 1rem;\n  line-height: 1.25;\n  /* position: relative; */\n  &:hover,\n  &:active {\n    background: var(--color-gray-900);\n  }\n  /* &.isDirty {\n    &::after {\n      content: '*';\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n    }\n  } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n  content: '*';\n  position: absolute;\n  height: 1rem;\n  width: 1rem;\n  right: -0.75rem;\n  top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n  position: relative;\n  width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n  background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n  position: absolute;\n  font-family: var(--font-leagueSpartan);\n  right: 0px;\n  left: 0px;\n  width: 100%;\n  max-width: 400px !important;\n  color: var(--color-text);\n  background: var(--bg-lv5);\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n  outline: none;\n}\n\n.PresetManagerListItem {\n  cursor: pointer;\n  background: var(--color-gray-800);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.PresetManagerListItem:hover,\n.PresetManagerListItem.isSelected {\n  background: var(--bg-selected);\n}\n\n.PresetManagerListItemText {\n  display: inline-block;\n  vertical-align: middle;\n  height: 1.5rem;\n  line-height: 1.75;\n}\n";
+styleInject(css_248z$3);
 
-function _array_like_to_array$a(arr, len) {
+function _array_like_to_array$9(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$a(arr) {
+function _array_with_holes$9(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$3(gen, resolve, reject, _next, _throw, key, arg) {
@@ -3434,7 +4511,7 @@ function _async_to_generator$3(fn) {
         });
     };
 }
-function _iterable_to_array_limit$a(arr, i) {
+function _iterable_to_array_limit$9(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3458,23 +4535,23 @@ function _iterable_to_array_limit$a(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$a() {
+function _non_iterable_rest$9() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_destructuring_empty(o) {
     if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
     return o;
 }
-function _sliced_to_array$a(arr, i) {
-    return _array_with_holes$a(arr) || _iterable_to_array_limit$a(arr, i) || _unsupported_iterable_to_array$a(arr, i) || _non_iterable_rest$a();
+function _sliced_to_array$9(arr, i) {
+    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
 }
-function _unsupported_iterable_to_array$a(o, minLen) {
+function _unsupported_iterable_to_array$9(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$a(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$a(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
 }
 function _ts_generator$3(thisArg, body) {
     var f, y, t, _ = {
@@ -3569,16 +4646,16 @@ function _ts_generator$3(thisArg, body) {
 }
 function PresetManager(param) {
     _object_destructuring_empty(param);
-    var _useState = _sliced_to_array$a(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
-    var _useState1 = _sliced_to_array$a(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
+    var _useState = _sliced_to_array$9(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
+    var _useState1 = _sliced_to_array$9(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
     var savePresetFunc = Juce.getNativeFunction('savePreset');
     var loadPresetFunc = Juce.getNativeFunction('loadPreset');
     var getAllPresetsFunc = Juce.getNativeFunction('getAllPresets');
     var getCurrentPresetFunc = Juce.getNativeFunction('getCurrentPreset');
     var isDirtyFunc = Juce.getNativeFunction('canUndo');
-    var _useState2 = _sliced_to_array$a(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
+    var _useState2 = _sliced_to_array$9(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
     var isLocalhost = window.location.hostname === 'localhost';
-    var _useState3 = _sliced_to_array$a(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
+    var _useState3 = _sliced_to_array$9(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
     useEffect(function() {
         if (!isLocalhost) {
             var isDirtyListenerId = //@ts-expect-error
@@ -3766,10 +4843,10 @@ function PresetManager(param) {
             Box.padding.medium
         ],
         height: "30px",
-        className: "uppercase bg-popover rounded-sm PresetManagerContainer",
+        className: "uppercase bg-panel rounded-sm PresetManagerContainer",
         style: {
             maxWidth: '325px',
-            backgroundColor: "var(--bg-page)",
+            backgroundColor: "var(--bg-lv1)",
             color: "var(--color-text)"
         }
     }, /*#__PURE__*/ React__default.createElement(Listbox, null, /*#__PURE__*/ React__default.createElement(Listbox.Button, {
@@ -3804,10 +4881,11 @@ function PresetManager(param) {
         fontSize: Label.fontSize.large,
         className: 'PresetManagerButtonLabel'
     }, selectedPreset)))), /*#__PURE__*/ React__default.createElement(Box, {
-        flex: "0"
+        flex: "0",
+        gap: Box.gap.mediumSmall
     }, /*#__PURE__*/ React__default.createElement(IconButton, {
         id: "previousPreset",
-        width: "20px",
+        width: "12px",
         icon: IconButton.icon.up,
         onClick: function(e) {
             e.preventDefault();
@@ -3815,7 +4893,7 @@ function PresetManager(param) {
         }
     }), /*#__PURE__*/ React__default.createElement(IconButton, {
         id: "nextPreset",
-        width: "20px",
+        width: "12px",
         icon: IconButton.icon.down,
         onClick: function(e) {
             e.preventDefault();
@@ -3855,12 +4933,12 @@ function PresetManager(param) {
     }))))));
 }
 
-function _array_like_to_array$9(arr, len) {
+function _array_like_to_array$8(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$9(arr) {
+function _array_with_holes$8(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
@@ -3905,7 +4983,7 @@ function _define_property$6(obj, key, value) {
     }
     return obj;
 }
-function _iterable_to_array_limit$9(arr, i) {
+function _iterable_to_array_limit$8(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -3929,7 +5007,7 @@ function _iterable_to_array_limit$9(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$9() {
+function _non_iterable_rest$8() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _object_spread$6(target) {
@@ -3947,16 +5025,16 @@ function _object_spread$6(target) {
     }
     return target;
 }
-function _sliced_to_array$9(arr, i) {
-    return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
+function _sliced_to_array$8(arr, i) {
+    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
 }
-function _unsupported_iterable_to_array$9(o, minLen) {
+function _unsupported_iterable_to_array$8(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$9(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
 }
 function _ts_generator$2(thisArg, body) {
     var f, y, t, _ = {
@@ -4139,8 +5217,8 @@ function ModuleHeader(param) {
     }, [
         window
     ]);
-    var _useState = _sliced_to_array$9(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
-    var _useState1 = _sliced_to_array$9(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
+    var _useState = _sliced_to_array$8(useState(false), 2), canUndo = _useState[0], setCanUndo = _useState[1];
+    var _useState1 = _sliced_to_array$8(useState(false), 2), canRedo = _useState1[0], setCanRedo = _useState1[1];
     var handleUndo = function() {
         undo();
     };
@@ -4306,6 +5384,7 @@ function ModuleHeader(param) {
             Box.padding.large
         ],
         className: classnames('ModuleHeader', className),
+        height: "72px",
         style: _object_spread$6({}, style)
     }, /*#__PURE__*/ React__default.createElement(Box, {
         style: {
@@ -4335,6 +5414,8 @@ function ModuleHeader(param) {
         width: "30px",
         height: "30px",
         icon: IconButton.icon.undo,
+        iconWidth: "20px",
+        backgroundColor: 'var(--bg-lv1)',
         padding: [
             IconButton.padding.none,
             IconButton.padding.small
@@ -4347,11 +5428,13 @@ function ModuleHeader(param) {
         id: "redo",
         width: "30px",
         height: "30px",
+        iconWidth: "20px",
         padding: [
             IconButton.padding.none,
             IconButton.padding.small
         ],
         disabled: !canRedo,
+        backgroundColor: 'var(--bg-lv1)',
         onClick: function() {
             handleRedo();
         },
@@ -4372,8 +5455,8 @@ function ModuleHeader(param) {
     }, "Advanced")))));
 }
 
-var css_248z$1 = ".ModMatrix {\n  color: var(--color-text);\n  font-size: var(--text-ms);\n}\n\n.ModMatrixCell {\n  background: #252429;\n  position: relative;\n}\n\n.ModMatrixCell.isDisabled {\n  /* background: var(--bg-muted);\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";
-styleInject(css_248z$1);
+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";
+styleInject(css_248z$2);
 
 var targetColors = [
     'var(--color-brand)',
@@ -4388,145 +5471,6 @@ var targetColors = [
 var ComboboxCellWidth = '217px';
 var DeleteButtonCellWidth = '50px';
 
-function _array_like_to_array$8(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes$8(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit$8(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest$8() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array$8(arr, i) {
-    return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
-}
-function _unsupported_iterable_to_array$8(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$8(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
-}
-var useCombobox = function(param) {
-    var id = param.id, filter = param.filter;
-    var _Object_values;
-    var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$8(useState(0), 2), value = _useState[0], setValue = _useState[1];
-    var _useState1 = _sliced_to_array$8(useState(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
-    var prevValue = useRef(null);
-    var _useGlobalContext = useGlobalContext(); _useGlobalContext.highlightedItemChanged; var 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() {
-        setValue(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex());
-    }, [
-        id
-    ]);
-    useEffect(function() {
-        setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
-    });
-    useEffect(function() {
-        if (modSlotPreview.slotId === id) {
-            setValue(modSlotPreview.targetIndex);
-        }
-    }, [
-        modSlotTargets,
-        modSlotPreview
-    ]);
-    useEffect(function() {
-        var _comboBoxState_valueChangedEvent, _comboBoxState_propertiesChangedEvent;
-        var valueListenerId = comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_valueChangedEvent = comboBoxState.valueChangedEvent) === null || _comboBoxState_valueChangedEvent === void 0 ? void 0 : _comboBoxState_valueChangedEvent.addListener(function() {
-            if ((comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex()) !== prevValue) {
-                setValue(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.getChoiceIndex());
-            }
-        });
-        var propertiesListenerId = comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_propertiesChangedEvent = comboBoxState.propertiesChangedEvent) === null || _comboBoxState_propertiesChangedEvent === void 0 ? void 0 : _comboBoxState_propertiesChangedEvent.addListener(function() {
-            setProperties(comboBoxState === null || comboBoxState === void 0 ? void 0 : comboBoxState.properties);
-        });
-        return function cleanup() {
-            var _comboBoxState_valueChangedEvent, _comboBoxState_propertiesChangedEvent;
-            comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_valueChangedEvent = comboBoxState.valueChangedEvent) === null || _comboBoxState_valueChangedEvent === void 0 ? void 0 : _comboBoxState_valueChangedEvent.removeListener(valueListenerId);
-            comboBoxState === null || comboBoxState === void 0 ? void 0 : (_comboBoxState_propertiesChangedEvent = comboBoxState.propertiesChangedEvent) === null || _comboBoxState_propertiesChangedEvent === void 0 ? void 0 : _comboBoxState_propertiesChangedEvent.removeListener(propertiesListenerId);
-        };
-    }, [
-        window
-    ]);
-    var selectedChoices = (_Object_values = Object.values(modSlotTargets)) === null || _Object_values === void 0 ? void 0 : _Object_values.filter(function(item) {
-        return item > 0;
-    });
-    var selectedLabels = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.filter(function(item, i) {
-        return selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices.includes(i);
-    });
-    var displayedLabels = automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels.filter(function(item) {
-        return !(selectedLabels === null || selectedLabels === void 0 ? void 0 : selectedLabels.includes(item)) || item === automatableParamLabels[value];
-    });
-    var filteredChoices = filter && (filter === null || filter === void 0 ? void 0 : filter.length) > 1 ? displayedLabels === null || displayedLabels === void 0 ? void 0 : displayedLabels.filter(function(item) {
-        var _item_toLowerCase;
-        return item === null || item === void 0 ? void 0 : (_item_toLowerCase = item.toLowerCase()) === null || _item_toLowerCase === void 0 ? void 0 : _item_toLowerCase.includes(filter === null || filter === void 0 ? void 0 : filter.toLowerCase());
-    }) : displayedLabels;
-    // const prevValue = useRef<string | null>(null);
-    // const handleChange = (newValue: number) => {
-    //   if (newValue !== prevValue.current) {
-    //     // const juceIndex = automatableParamLabels?.indexOf(newValue);
-    //     // comboBoxState?.setChoiceIndex(newValue);s
-    //     setValue(newValue);
-    //     // onChange && onChange(newValue);
-    //     // //@ts-expect-error
-    //     // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
-    //     if (displayValInHeader) {
-    //       highlightedItemChanged({
-    //         label,
-    //         value: automatableParamLabels?.[newValue],
-    //       });
-    //     }
-    //     prevValue.current = newValue;
-    //   }
-    // };
-    var onMouseEnter = function() {
-    };
-    var onClick = function() {
-        setModSlotRowTargetAsPreview({
-            paramId: id
-        });
-    };
-    return {
-        value: value,
-        valueString: automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[value],
-        setValue: setValue,
-        choices: properties === null || properties === void 0 ? void 0 : properties.choices,
-        filteredChoices: filteredChoices,
-        onMouseEnter: onMouseEnter,
-        onClick: onClick
-    };
-};
-
 function _array_like_to_array$7(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -4607,7 +5551,9 @@ function ModMatrixComboboxCell(param) {
     var _useGlobalContext = useGlobalContext(), updateModSlotRowTarget = _useGlobalContext.updateModSlotRowTarget, setModSlotRowTargetAsPreview = _useGlobalContext.setModSlotRowTargetAsPreview, clearModSlotPreview = _useGlobalContext.clearModSlotPreview, setNewModSlotPreview = _useGlobalContext.setNewModSlotPreview, _useGlobalContext_globalState = _useGlobalContext.globalState, modSlotPreview = _useGlobalContext_globalState.modSlotPreview, automatableParamLabels = _useGlobalContext_globalState.automatableParamLabels;
     var _useCombobox = useCombobox({
         id: rowId,
-        filter: filterString}), value = _useCombobox.value, filteredChoices = _useCombobox.filteredChoices;
+        filter: filterString,
+        displayValInHeader: false
+    }), index = _useCombobox.index, filteredChoices = _useCombobox.filteredChoices;
     var previewValue = modSlotPreview.slotId === rowId ? modSlotPreview.targetIndex : null;
     var onChange = function(newValue) {
         // TODO: 'juceIndex' is needed here because the 'value' from the combobox is the string label.
@@ -4643,11 +5589,11 @@ function ModMatrixComboboxCell(param) {
         alignItems: Box.alignItems.flexStart,
         height: '2.5rem'
     }, /*#__PURE__*/ React__default.createElement(Combobox, {
-        value: value || previewValue,
+        value: index || previewValue,
         onChange: onChange
     }, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(ComboboxInput, {
         displayValue: function(item) {
-            return value ? automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[value] : '';
+            return index ? automatableParamLabels === null || automatableParamLabels === void 0 ? void 0 : automatableParamLabels[index] : '';
         },
         placeholder: "Select a target...",
         onChange: function(e) {
@@ -4665,8 +5611,8 @@ function ModMatrixComboboxCell(param) {
             return e.preventDefault();
         },
         color: 'var(--color-text)',
-        width: "20px",
-        height: "20px"
+        width: "10px",
+        height: "10px"
     }))), /*#__PURE__*/ React__default.createElement(ComboboxOptions, {
         className: "ModMatrixComboboxItems",
         //   anchor="bottom"
@@ -5372,7 +6318,7 @@ function ModMatrix(param) {
         ],
         className: "ModMatrix ".concat(className ? className : ''),
         style: _object_spread$1({
-            backgroundColor: 'var(--bg-section)'
+            backgroundColor: 'var(--bg-lvl2)'
         }, style),
         flexDirection: Box.flexDirection.column
     }, /*#__PURE__*/ React__default.createElement(Box, {
@@ -5411,8 +6357,8 @@ var WaveTypes = /*#__PURE__*/ function(WaveTypes) {
     WaveTypes["Triangle"] = "Triangle";
     WaveTypes["Ramp"] = "Ramp";
     WaveTypes["Saw"] = "Saw";
-    WaveTypes["ExpUp"] = "Exp Up";
-    WaveTypes["ExpDown"] = "Exp Down";
+    // ExpUp = 'Exp Up',
+    // ExpDown = 'Exp Down',
     WaveTypes["Square"] = "Square";
     return WaveTypes;
 }({});
@@ -5464,17 +6410,19 @@ var getPointArray = function(param) {
                         y: adjustedVal * ampValue * (1 - randomNumber)
                     });
                     break;
-                case WaveTypes.ExpUp:
-                    cycle.push({
-                        y: (Math.exp(adjustedVal * ampValue) - 1) / 1.7 * (1 - randomNumber)
-                    });
-                    break;
-                case WaveTypes.ExpDown:
-                    cycle.push({
-                        //prettier-ignore
-                        y: (Math.exp(adjustedVal > 0 ? (1 - adjustedVal) * ampValue : 0) - 1) / 1.7 * (1 - randomNumber)
-                    });
-                    break;
+                // case WaveTypes.ExpUp:
+                //   cycle.push({
+                //     y:
+                //       ((Math.exp(adjustedVal * ampValue) - 1) / 1.7) *
+                //       (1 - randomNumber),
+                //   });
+                //   break;
+                // case WaveTypes.ExpDown:
+                //   cycle.push({
+                //     //prettier-ignore
+                //     y: (Math.exp(adjustedVal > 0 ? (1 - adjustedVal) * ampValue : 0) - 1) / 1.7 * (1 - randomNumber),
+                //   });
+                //   break;
                 case WaveTypes.Saw:
                     cycle.push({
                         y: (adjustedVal > 0 ? 1 - adjustedVal : 0) * (1 - randomNumber) * ampValue
@@ -5536,6 +6484,9 @@ var getPointArray = function(param) {
     return output;
 };
 
+var css_248z$1 = "/* *[id^='outerglow'] {\n  opacity: 0.5;\n} */\n.area {\n  fill: url(#area-gradient);\n  /* stroke-width: 0px;w */\n}\n";
+styleInject(css_248z$1);
+
 function _array_like_to_array$4(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -5583,7 +6534,7 @@ function _unsupported_iterable_to_array$4(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
 }
 function LFOVisualizer(param) {
-    var id = param.id, _param_width = param.width, width = _param_width === void 0 ? 400 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 150 : _param_height;
+    var id = param.id, _param_width = param.width, width = _param_width === void 0 ? 375 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 160 : _param_height;
     var svgRef = useRef(null);
     var isLocalhost = window.location.hostname === 'localhost';
     var _useState = _sliced_to_array$4(useState(0), 2), waveValue = _useState[0], setWaveValue = _useState[1];
@@ -5701,7 +6652,7 @@ function LFOVisualizer(param) {
             // Set up initial graph view
             var svg = d3.select(svgRef.current).attr('width', width * 2).attr('height', height);
             // create center line for graph
-            svg.append('line').attr('x1', "".concat(svgInnerMargin)).attr('y1', "".concat(height / 2)).attr('x2', "".concat(width * 2 - svgInnerMargin)).attr('y2', "".concat(height / 2)).attr('fill', 'none').attr('stroke', 'var(--color-gray-600)').attr('stroke-width', 2);
+            svg.append('line').attr('x1', "".concat(svgInnerMargin)).attr('y1', "".concat(height / 2)).attr('x2', "".concat(width * 2 - svgInnerMargin)).attr('y2', "".concat(height / 2)).attr('fill', 'none').attr('stroke', 'var(--color-gray-600)').attr('stroke-width', 1);
             return function() {
                 // Remove listeners on unmount
                 waveState === null || waveState === void 0 ? void 0 : waveState.valueChangedEvent.removeListener(waveListenerId);
@@ -5731,7 +6682,9 @@ function LFOVisualizer(param) {
             pulseWidth: widthValue,
             maxLength: maxLength
         });
-        setPoints(pointArray);
+        setPoints(pointArray.filter(function(item) {
+            return item.y !== undefined;
+        }));
     }, [
         waveValue,
         syncTypeValue,
@@ -5769,14 +6722,51 @@ function LFOVisualizer(param) {
         }).curve(d3.curveBasis);
         d3.select(svgRef.current).selectAll('path').attr('width', width * 2 - svgInnerMargin).attr('height', height).data([
             points
-        ]).attr('fill', 'none').attr('stroke', 'var(--color-brand)').attr('stroke-width', 2).join('path').attr('d', line);
+        ]).attr('fill', 'var(--color-brand)').attr('stroke', 'var(--color-brand)').attr('stroke-width', 3).attr('shape-rendering', 'geometricPrecision').attr('color-rendering', 'optimizeQuality').attr('filter', 'url(#dropshadow)').join('path').attr('d', line).attr('d', d3.area()// .x((d) => xScale(0))
+        // .x0(xScale(0))
+        .x(function(d) {
+            //@ts-expect-error
+            return xScale(d.x);
+        }).y0(yScale(-1))//@ts-expect-error
+        .y1(function(d) {
+            return yScale(d.y);
+        })).attr('class', 'area');
     }, [
         points,
         maxLength
     ]);
+    d3.select(svgRef.current).append('linearGradient').attr('id', 'area-gradient')//.attr("gradientUnits", "userSpaceOnUse")
+    .attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2', 1).selectAll('stop').data([
+        {
+            offset: '0%',
+            color: 'var(--color-brand)',
+            opacity: 0.2
+        },
+        {
+            offset: '20%',
+            color: 'var(--color-brand)',
+            opacity: 0.15
+        },
+        {
+            offset: '30%',
+            color: 'var(--color-brand)',
+            opacity: 0.1
+        },
+        {
+            offset: '55%',
+            color: 'var(--color-brand)',
+            opacity: 0
+        }
+    ]).enter().append('stop').attr('offset', function(d) {
+        return d.offset;
+    }).attr('stop-color', function(d) {
+        return d.color;
+    }).attr('stop-opacity', function(d) {
+        return d.opacity;
+    });
     return /*#__PURE__*/ React__default.createElement(Box, {
         style: {
-            backgroundColor: 'var(--bg-page)'
+            backgroundColor: 'var(--bg-lv2)'
         },
         padding: [
             Box.padding.medium
@@ -5796,7 +6786,19 @@ function LFOVisualizer(param) {
             transform: "translate(".concat((syncTypeValue === 0 || syncTypeValue === 1 ? phaseValue * 100 - 50 : syncOffsetValue * 100 - 50) / 2, "%)"),
             margin: "0 -".concat(width / 2)
         }
-    })));
+    }, ' ', /*#__PURE__*/ React__default.createElement("defs", null, /*#__PURE__*/ React__default.createElement("filter", {
+        id: "dropshadow",
+        x: "-20%",
+        y: "-20%",
+        width: "140%",
+        height: "140%"
+    }, /*#__PURE__*/ React__default.createElement("feDropShadow", {
+        dx: "0",
+        dy: "0",
+        stdDeviation: ".5",
+        "flood-color": "var(--color-brand)",
+        "flood-opacity": "0.5"
+    }))))));
 }
 
 function _array_like_to_array$3(arr, len) {
@@ -5845,7 +6847,7 @@ function _unsupported_iterable_to_array$3(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$3(o, minLen);
 }
-function LFO(param) {
+function LFOBox(param) {
     var id = param.id;
     var _useState = _sliced_to_array$3(useState(0), 2), syncType = _useState[0], setSyncType = _useState[1];
     useEffect(function() {
@@ -5859,68 +6861,153 @@ function LFO(param) {
         setSyncType(value);
     };
     return /*#__PURE__*/ React__default.createElement(Box, {
-        className: "LFOTab",
-        flexDirection: Box.flexDirection.column
-    }, /*#__PURE__*/ React__default.createElement(LFOVisualizer, {
-        id: id
-    }), /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Dropdown, {
+        className: "LFOBox",
+        gap: Box.gap.medium,
+        style: {
+            background: 'var(--bg-lv4)',
+            borderRadius: '6px'
+        },
+        padding: [
+            Box.padding.large
+        ],
+        fullHeight: true
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        justifyContent: Box.justifyContent.flexStart,
+        alignItems: Box.alignItems.flexStart,
+        // padding={[Box.padding.medium]}
+        fullHeight: true
+    }, /*#__PURE__*/ React__default.createElement(Heading, {
+        padding: [
+            Heading.padding.none,
+            Heading.padding.none,
+            Heading.padding.large,
+            Heading.padding.none
+        ],
+        removeLineHeight: true,
+        color: "var(--color-brand)"
+    }, "LFO ".concat(id)), /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        flex: "1",
+        gap: Box.gap.mediumLarge,
+        justifyContent: Box.justifyContent.flexStart
+    }, /*#__PURE__*/ React__default.createElement(Box, null, syncType === 0 ? /*#__PURE__*/ React__default.createElement(Slider, {
+        size: Slider.size.large,
+        id: "LFO".concat(id, "_Hz"),
+        label: "LFO".concat(id, " Hz"),
+        indicatorId: "LFO".concat(id, "_Out")
+    }) : null, syncType === 1 ? /*#__PURE__*/ React__default.createElement(Slider, {
+        size: Slider.size.large,
+        id: "LFO".concat(id, "_Hz_Hi"),
+        label: "LFO".concat(id, " Hz Hi"),
+        indicatorId: "LFO".concat(id, "_Out")
+    }) : null, syncType === 2 ? /*#__PURE__*/ React__default.createElement(Slider, {
+        id: "LFO".concat(id, "_SyncRate"),
+        label: "LFO".concat(id, " Sync Rate"),
+        size: Slider.size.large,
+        variant: Slider.variant.rotaryCombobox,
+        indicatorId: "LFO".concat(id, "_Out")
+    }) : null), syncType !== 0 && syncType !== 1 ? /*#__PURE__*/ React__default.createElement(Slider, {
+        variant: Slider.variant.bar,
+        polarity: Slider.polarity.bipolar,
+        orientation: Slider.orientation.horizontal,
+        dragOrientation: Slider.orientation.horizontal,
+        id: "LFO".concat(id, "_Sync_Offset"),
+        label: "LFO".concat(id, " Sync Offset")
+    }) : null, /*#__PURE__*/ React__default.createElement(Dropdown, {
         labelColor: "var(--color-text)",
         color: "var(--color-brand)",
         id: "LFO".concat(id, "_SyncType"),
         label: "LFO".concat(id, " Sync Type"),
         onChange: handleSyncTypeChange,
         width: "6rem"
-    }), /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, syncType === 0 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
-        id: "LFO".concat(id, "_Hz"),
-        label: "LFO".concat(id, " Hz")
-    }) : null, syncType === 1 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
-        id: "LFO".concat(id, "_Hz_Hi"),
-        label: "LFO".concat(id, " Hz Hi")
-    }) : null, syncType === 2 ? /*#__PURE__*/ React__default.createElement(Dropdown, {
-        labelColor: "var(--color-text)",
-        color: "var(--color-brand)",
-        id: "LFO".concat(id, "_SyncRate"),
-        label: "LFO".concat(id, " Sync Rate"),
-        width: "8rem"
-    }) : null, syncType === 3 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
+    }))), /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        // padding={[Box.padding.small]}
+        fullHeight: true,
+        justifyContent: Box.justifyContent.spaceBetween,
+        // gap={Box.gap.large}
+        flex: "1"
+    }, /*#__PURE__*/ React__default.createElement(LFOVisualizer, {
+        id: id
+    }), /*#__PURE__*/ React__default.createElement(Box, {
+        gap: Box.gap.xLarge
+    }, /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, syncType === 3 ? /*#__PURE__*/ React__default.createElement(Slider, {
         id: "LFO".concat(id, "_Thirds"),
         label: "LFO".concat(id, " 1/3rds")
-    }) : null, syncType === 4 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
+    }) : null, syncType === 4 ? /*#__PURE__*/ React__default.createElement(Slider, {
         id: "LFO".concat(id, "_Sixteenths"),
         label: "LFO".concat(id, " 1/16ths")
-    }) : null), syncType === 0 || syncType === 1 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
-        polarity: RotarySlider.sliderPolarity.bipolar,
+    }) : null), /*#__PURE__*/ React__default.createElement(Slider, {
+        polarity: Slider.polarity.bipolar,
         id: "LFO".concat(id, "_Phase"),
-        label: "LFO".concat(id, " Phase")
-    }) : null, syncType !== 0 && syncType !== 1 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
-        polarity: RotarySlider.sliderPolarity.bipolar,
-        id: "LFO".concat(id, "_Sync_Offset"),
-        label: "LFO".concat(id, " Sync Offset")
-    }) : null, /*#__PURE__*/ React__default.createElement(Dropdown, {
-        labelColor: "var(--color-text)",
-        color: "var(--color-brand)",
-        id: "LFO".concat(id, "_Wave"),
-        label: "LFO".concat(id, " Wave"),
-        width: "6rem"
-    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        label: "LFO".concat(id, " Phase"),
+        // indicatorLineColor="var(--color-brand)"
+        indicatorLineGradient: Slider.gradientStyles.unicolor,
+        knobStrokeColor: "var(--color-brand)",
+        trackColor: "var(--color-brand-900)",
+        trackWidth: 3,
+        markerShape: Slider.markerShape.rectangle
+    }), /*#__PURE__*/ React__default.createElement(Slider, {
         id: "LFO".concat(id, "_Width"),
-        label: "LFO".concat(id, " Width")
-    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        label: "LFO".concat(id, " Width"),
+        indicatorLineColor: "var(--color-brand)",
+        knobStrokeColor: "var(--color-brand)",
+        trackColor: "var(--color-brand-900)",
+        trackWidth: 3,
+        indicatorLineGradient: Slider.gradientStyles.unicolor,
+        markerShape: Slider.markerShape.rectangle
+    }), /*#__PURE__*/ React__default.createElement(Slider, {
         id: "LFO".concat(id, "_Amp"),
-        label: "LFO".concat(id, " Amp")
-    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        label: "LFO".concat(id, " Amp"),
+        indicatorLineColor: "var(--color-brand)",
+        knobStrokeColor: "var(--color-brand)",
+        trackColor: "var(--color-brand-900)",
+        trackWidth: 3,
+        indicatorLineGradient: Slider.gradientStyles.unicolor,
+        markerShape: Slider.markerShape.rectangle
+    }), /*#__PURE__*/ React__default.createElement(Slider, {
         id: "LFO".concat(id, "_Rand"),
-        label: "LFO".concat(id, " Rand")
+        label: "LFO".concat(id, " Rand"),
+        indicatorLineColor: "var(--color-brand)",
+        knobStrokeColor: "var(--color-brand)",
+        trackColor: "var(--color-brand-900)",
+        trackWidth: 3,
+        indicatorLineGradient: Slider.gradientStyles.unicolor,
+        markerShape: Slider.markerShape.rectangle
+    }))), /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        justifyContent: Box.justifyContent.flexStart,
+        height: "100%"
+    }, /*#__PURE__*/ React__default.createElement(Tabs, {
+        id: "LFO".concat(id, "_Wave"),
+        height: "100%",
+        icons: [
+            Icons.sine,
+            Icons.triangle,
+            Icons.negativeSaw,
+            Icons.positiveSaw,
+            Icons.square
+        ],
+        orientation: Tabs.orientation.vertical,
+        backgroundColor: "var(--bg-lv3)",
+        selectedBackgroundColor: "var(--bg-lv2)",
+        // width="100%"
+        // padding={[Tabs.padding.mediumSmall]}
+        tabWidth: "60px",
+        tabHeight: "auto",
+        color: "var(--bg-lv11)"
     })));
 }
 
 function LFOTab() {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "LFOTab",
-        gap: Box.gap.medium
-    }, /*#__PURE__*/ React__default.createElement(LFO, {
+        gap: Box.gap.medium,
+        height: "100%"
+    }, /*#__PURE__*/ React__default.createElement(LFOBox, {
         id: 1
-    }), /*#__PURE__*/ React__default.createElement(LFO, {
+    }), /*#__PURE__*/ React__default.createElement(LFOBox, {
         id: 2
     }));
 }
@@ -6040,15 +7127,17 @@ function StepSequencer(param) {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "StepSequencer",
         justifyContent: Box.justifyContent.flexStart,
-        width: "auto"
+        height: "100%"
     }, steps.map(function(_, i) {
         var sliderNumber = i + 1;
         return /*#__PURE__*/ React__default.createElement(Slider, {
+            variant: Slider.variant.bar,
+            indicatorLineGradient: Slider.gradientStyles.multicolor,
+            barSliderVariant: Slider.barSliderVariant.wideTrack,
             isStandalone: false,
-            sliderOrientation: Slider.sliderOrientation.vertical,
+            orientation: Slider.orientation.vertical,
             id: "seq".concat(seqId, "_step").concat(sliderNumber),
-            color: currentSeqStep === sliderNumber ? "var(--color-brand-300)" : "var(--color-brand)",
-            trackColor: currentSeqStep === sliderNumber ? "var(--color-brand-600)" : "var(--color-brand-900)"
+            isHighlighted: currentSeqStep === sliderNumber
         });
     }));
 }
@@ -6114,45 +7203,93 @@ function SeqTab$1(param) {
     };
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
-        gap: Box.gap.medium
-    }, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(StepSequencer, {
+        gap: Box.gap.medium,
+        style: {
+            background: 'var(--bg-lv4)',
+            borderRadius: '6px'
+        },
+        padding: [
+            Box.padding.mediumLarge
+        ],
+        height: "100%"
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        gap: Box.gap.medium,
+        justifyContent: Box.justifyContent.flexStart
+    }, /*#__PURE__*/ React__default.createElement(Heading, {
+        padding: [
+            Heading.padding.none,
+            Heading.padding.medium
+        ],
+        color: "var(--color-brand)"
+    }, "Seq ".concat(seqId)), /*#__PURE__*/ React__default.createElement(IndicatorLight, {
+        id: "SEQ".concat(seqId, "_Out"),
+        dataSource: IndicatorLight.dataSource.event
+    })), /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
+        gap: Box.gap.medium,
+        height: "100%"
+    }, /*#__PURE__*/ React__default.createElement(Box, {
+        flex: "1 0 auto"
+    }, /*#__PURE__*/ React__default.createElement(StepSequencer, {
         seqId: seqId
     })), /*#__PURE__*/ React__default.createElement(Box, {
-        alignItems: Box.alignItems.flexEnd,
-        justifyContent: Box.justifyContent.center
+        gap: Box.gap.medium,
+        padding: [
+            Box.padding.none,
+            Box.padding.none,
+            Box.padding.medium,
+            Box.padding.none
+        ]
     }, /*#__PURE__*/ React__default.createElement(Dropdown, {
         labelColor: "var(--color-text)",
         color: "var(--color-brand)",
         id: "seq".concat(seqId, "_syncType"),
         label: "seq".concat(seqId, "_syncType"),
         onChange: handleSyncTypeChange
-    }), /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, syncType === 0 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
+    }), /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, syncType === 0 ? /*#__PURE__*/ React__default.createElement(Slider, {
         id: "seq".concat(seqId, "_hertz"),
+        variant: Slider.variant.bar,
+        includeValueInHeight: false,
+        orientation: Slider.orientation.horizontal,
+        indicatorLineGradient: Slider.gradientStyles.unicolor,
+        // barSliderVariant={Slider.barSliderVariant.valueInside}
         label: "Seq".concat(seqId, " Hz")
-    }) : null, syncType === 1 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
+    }) : null, syncType === 1 ? /*#__PURE__*/ React__default.createElement(Slider, {
         id: "seq".concat(seqId, "_hertzHi"),
+        includeValueInHeight: false,
+        variant: Slider.variant.bar,
+        orientation: Slider.orientation.horizontal,
+        indicatorLineGradient: Slider.gradientStyles.unicolor,
+        // barSliderVariant={Slider.barSliderVariant.valueInside}
         label: "Seq".concat(seqId, " Hz Hi")
     }) : null, syncType === 2 ? /*#__PURE__*/ React__default.createElement(Dropdown, {
         labelColor: "var(--color-text)",
         color: "var(--color-brand)",
         id: "seq".concat(seqId, "_syncRate"),
         label: "Seq".concat(seqId, " Sync Rate")
-    }) : null, syncType === 3 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
+    }) : null, syncType === 3 ? /*#__PURE__*/ React__default.createElement(Slider, {
         id: "seq".concat(seqId, "_thirds"),
+        indicatorLineGradient: Slider.gradientStyles.unicolor,
         label: "Seq".concat(seqId, " Thirds")
-    }) : null, syncType === 4 ? /*#__PURE__*/ React__default.createElement(RotarySlider, {
+    }) : null, syncType === 4 ? /*#__PURE__*/ React__default.createElement(Slider, {
+        indicatorLineGradient: Slider.gradientStyles.unicolor,
         id: "seq".concat(seqId, "_sixteenths"),
         label: "Seq".concat(seqId, " Sixteenths")
-    }) : null), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+    }) : null), /*#__PURE__*/ React__default.createElement(Slider, {
         id: "seq".concat(seqId, "_amp"),
-        label: "Seq".concat(seqId, " Amp")
-    })));
+        label: "Seq".concat(seqId, " Amp"),
+        variant: Slider.variant.bar,
+        includeValueInHeight: false,
+        orientation: Slider.orientation.horizontal,
+        indicatorLineGradient: Slider.gradientStyles.unicolor
+    }))));
 }
 
 function SeqTab() {
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "SeqTab",
-        gap: Box.gap.medium
+        gap: Box.gap.medium,
+        fullHeight: true
     }, /*#__PURE__*/ React__default.createElement(SeqTab$1, {
         seqId: 1
     }), /*#__PURE__*/ React__default.createElement(SeqTab$1, {
@@ -6160,7 +7297,7 @@ function SeqTab() {
     }));
 }
 
-var css_248z = "/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n/* TODO how do we want to style the scrollbars? */\n.ModuleFooter {\n  overflow-y: scroll;\n  max-height: 340px;\n}\n\n.ModuleFooter .Tabs-item {\n  background: transparent;\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  background: var(--color-gray-600);\n  flex: 1 0 auto;\n}\n\n.ModuleFooter .Tabs-item:hover,\n.ModuleFooter .tabs-item:focus,\n.ModuleFooter .tabs-item:focus-visible {\n  background: var(--color-gray-700);\n}\n\n.ModuleFooter .Tabs-item[data-headlessui-state='selected'],\n.ModuleFooter .Tabs-item[data-headlessui-state='selected focus'] {\n  background: var(--color-gray-700);\n}\n";
+var css_248z = ".ModuleFooter-tabs {\n  overflow-y: auto;\n  overflow-x: hidden;\n  max-height: 340px;\n}\n";
 styleInject(css_248z);
 
 function _array_like_to_array(arr, len) {
@@ -6382,9 +7519,6 @@ function ModuleFooter(param) {
     var _useState = _sliced_to_array(useState(0), 2), selectedTab = _useState[0], setSelectedTab = _useState[1];
     var setSelectedFooterTabFunc = Juce.getNativeFunction('setSelectedFooterTab');
     var getSelectedFooterTabFunc = Juce.getNativeFunction('getSelectedFooterTab');
-    var isTabSelected = function(tabName) {
-        return Object.keys(FooterTabs)[selectedTab] === tabName;
-    };
     useEffect(function() {
         var getTabFromBackend = function() {
             return _async_to_generator(function() {
@@ -6447,27 +7581,29 @@ function ModuleFooter(param) {
         updateBackend();
     };
     return /*#__PURE__*/ React__default.createElement(Box, {
-        gap: Box.gap.medium,
+        gap: Box.gap.small,
         tag: Box.tag.footer,
-        height: "100%",
         alignItems: Box.alignItems.flexStart,
         className: "ModuleFooter ".concat(className ? className : ''),
         style: _object_spread({
-            backgroundColor: 'var(--bg-section)'
-        }, style)
+            backgroundColor: 'var(--bg-lv3)'
+        }, style),
+        flex: "1 1 auto"
     }, /*#__PURE__*/ React__default.createElement(Box, {
-        flexDirection: Box.flexDirection.column
+        flexDirection: Box.flexDirection.column,
+        height: "100%",
+        justifyContent: Box.justifyContent.flexStart
     }, /*#__PURE__*/ React__default.createElement(Box, {
-        style: {
-            backgroundColor: 'var(--color-gray-500)'
-        },
+        // style={{ backgroundColor: 'var(--bg-lv4)' }}
         padding: [
-            Box.padding.small,
-            Box.padding.small,
+            Box.padding.xSmall,
+            Box.padding.medium,
             Box.padding.none,
-            Box.padding.small
-        ]
+            Box.padding.medium
+        ],
+        justifyContent: Box.justifyContent.spaceBetween
     }, /*#__PURE__*/ React__default.createElement(Tabs, {
+        className: "ModuleFooter-tabs",
         items: [
             'Mod Matrix',
             'Input mod',
@@ -6476,19 +7612,21 @@ function ModuleFooter(param) {
             'Settings'
         ],
         onChange: handleTabChange,
-        selectedIndex: selectedTab,
-        gap: "2px",
         padding: [
             Tabs.padding.medium,
             Tabs.padding.large
         ],
+        backgroundColor: "var(--bg-lv4)",
+        selectedBackgroundColor: "var(--bg-lv3)",
         width: "100%"
     })), /*#__PURE__*/ React__default.createElement(Box, {
         padding: [
-            Box.padding.large
-        ]
-    }, isTabSelected("ModMatrix") ? /*#__PURE__*/ React__default.createElement(ModMatrixTab, null) : '', isTabSelected("InputMod") ? /*#__PURE__*/ React__default.createElement(InputModTab, null) : '', isTabSelected("LFOs") ? /*#__PURE__*/ React__default.createElement(LFOTab, null) : '', isTabSelected("Sequencer") ? /*#__PURE__*/ React__default.createElement(SequencerTab, null) : '', isTabSelected("Settings") ? /*#__PURE__*/ React__default.createElement(SettingsTab, null) : '')));
+            Box.padding.medium
+        ],
+        alignItems: Box.alignItems.flexStart,
+        flex: "1 1 auto"
+    }, 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) : '')));
 }
 
-export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, GlobalContextProvider, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, Spacing, Tabs, clamp, decimalToPercent, defaultGlobalStateValue as defaultValue, normalisedToScaled, percentToDecimal, randomizeValue, scaledToNormalised as scaledTonormalised, useGlobalContext, useObservable, useSlider };
+export { Slider$1 as BarSlider, Box, Button, Dropdown, FontSizes, GlobalContextProvider, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, Slider, Spacing, Tabs, clamp, decimalToPercent, defaultGlobalStateValue as defaultValue, normalisedToScaled, percentToDecimal, randomizeValue, scaledToNormalised as scaledTonormalised, useGlobalContext, useObservable, useSlider };
 //# sourceMappingURL=index.js.map