@antimatter-audio/antimatter-ui 10.3.0 → 10.4.0

package/dist/advanced/ModMatrix/ModMatrixCell.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-declare function ModMatrixCell({ target, modifier, value, color, style, }: {
-    value?: string | number;
-    target: any;
+declare function ModMatrixCell({ modifier, color, style, }: {
     modifier?: any;
     color?: string;
     style?: any;

package/dist/advanced/ModMatrix/ModMatrixCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModMatrixCell.d.ts","sourceRoot":"","sources":["../../../src/advanced/ModMatrix/ModMatrixCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,iBAAS,aAAa,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,qBAsCA;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ModMatrixCell.d.ts","sourceRoot":"","sources":["../../../src/advanced/ModMatrix/ModMatrixCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE;IACD,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC;CACb,qBAsCA;AAED,eAAe,aAAa,CAAC"}

package/dist/advanced/ModuleFooter/LFOTab.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare function LFOTab(): React.JSX.Element;
+export default LFOTab;
+//# sourceMappingURL=LFOTab.d.ts.map

package/dist/advanced/ModuleFooter/LFOTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LFOTab.d.ts","sourceRoot":"","sources":["../../../src/advanced/ModuleFooter/LFOTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,iBAAS,MAAM,sBA+Ed;AAED,eAAe,MAAM,CAAC"}

package/dist/index.js

@@ -33,7 +33,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$b = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n  --color-brand: #bb68d9;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-page: #1e1d21;\n  --bg-section: #1e1d21;\n  --bg-popover: #09090a;\n  --bg-highlighted: #838091;\n  --bg-muted: #595763;\n  --bg-selected: #2e2c33;\n  --bg-input: #1e1d21;\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  border: none;\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: not-allowed;\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
+var css_248z$b = "@import 'tailwindcss';\n@import 'tailwindcss/base';\n@import 'tailwindcss/utilities';\n\n@theme static {\n  --color-brand: #bb68d9;\n  --color-alert: #8a0101;\n  --color-text: #bab6cf;\n  --color-gray-100: #c7c3de;\n  --color-gray-200: #9a96ab;\n  --color-gray-300: #838091;\n  --color-gray-400: #595763;\n  --color-gray-500: #4c4a54;\n  --color-gray-600: #2e2c33;\n  --color-gray-700: #1e1d21;\n  --color-gray-800: #101012;\n  --color-gray-900: #09090a;\n\n  --color-VFDBlue-100: #0d3814;\n  --color-VFDBlue-200: #234e4a;\n  --color-VFDBlue-300: #128073;\n  --color-VFDBlue-400: #138c6e;\n  --color-VFDBlue-500: #1abe95;\n  --color-VFDBlue-600: #23d8a4;\n  --color-VFDBlue-700: #4aeea4;\n  --color-VFDBlue-1000: #35edb4;\n  --spacing-none: 0px;\n  --spacing-xs: 2px;\n  --spacing-sm: 4px;\n  --spacing-ms: 6px;\n  --spacing-md: 8px;\n  --spacing-ml: 12px;\n  --spacing-lg: 16px;\n  --spacing-xl: 20px;\n  --m-none: 0px;\n  --m-xs: 2px;\n  --m-sm: 4px;\n  --m-ms: 6px;\n  --m-md: 8px;\n  --m-ml: 12px;\n  --m-lg: 16px;\n  --m-xl: 20px;\n  --mt-none: 0px;\n  --mt-xs: 2px;\n  --mt-sm: 4px;\n  --mt-ms: 6px;\n  --mt-md: 8px;\n  --mt-ml: 12px;\n  --mt-lg: 16px;\n  --mt-xl: 20px;\n  --mr-none: 0px;\n  --mr-xs: 2px;\n  --mr-sm: 4px;\n  --mr-ms: 6px;\n  --mr-md: 8px;\n  --mr-ml: 12px;\n  --mr-lg: 16px;\n  --mr-xl: 20px;\n  --mb-none: 0px;\n  --mb-xs: 2px;\n  --mb-sm: 4px;\n  --mb-ms: 6px;\n  --mb-md: 8px;\n  --mb-ml: 12px;\n  --mb-lg: 16px;\n  --mb-xl: 20px;\n  --ml-none: 0px;\n  --ml-xs: 2px;\n  --ml-sm: 4px;\n  --ml-ms: 6px;\n  --ml-md: 8px;\n  --ml-ml: 12px;\n  --ml-lg: 16px;\n  --ml-xl: 20px;\n  --p-none: 0px;\n  --p-xs: 2px;\n  --p-sm: 4px;\n  --p-ms: 6px;\n  --p-md: 8px;\n  --p-ml: 12px;\n  --p-lg: 16px;\n  --p-xl: 20px;\n  --pt-none: 0px;\n  --pt-xs: 2px;\n  --pt-sm: 4px;\n  --pt-ms: 6px;\n  --pt-md: 8px;\n  --pt-ml: 12px;\n  --pt-lg: 16px;\n  --pt-xl: 20px;\n  --pr-none: 0px;\n  --pr-xs: 2px;\n  --pr-sm: 4px;\n  --pr-ms: 6px;\n  --pr-md: 8px;\n  --pr-ml: 12px;\n  --pr-lg: 16px;\n  --pr-xl: 20px;\n  --pb-none: 0px;\n  --pb-xs: 2px;\n  --pb-sm: 4px;\n  --pb-ms: 6px;\n  --pb-md: 8px;\n  --pb-ml: 12px;\n  --pb-lg: 16px;\n  --pb-xl: 20px;\n  --pl-none: 0px;\n  --pl-xs: 2px;\n  --pl-sm: 4px;\n  --pl-ms: 6px;\n  --pl-md: 8px;\n  --pl-ml: 12px;\n  --pl-lg: 16px;\n  --pl-xl: 20px;\n  --bg-page: #1e1d21;\n  --bg-section: #1e1d21;\n  --bg-popover: #09090a;\n  --bg-highlighted: #838091;\n  --bg-muted: #595763;\n  --bg-selected: #2e2c33;\n  --bg-input: #1e1d21;\n  --font-leagueSpartan: 'LeagueSpartan';\n  --text-xs: 0.625rem;\n  --text-sm: 0.75rem;\n  --text-ms: 0.813rem;\n  --text-md: 0.875rem;\n  --text-lg: 1rem;\n  --text-xl: 1.25rem;\n  --text-title: 1.75rem;\n  --gap-none: 0px;\n  --gap-xs: 2px;\n  --gap-sm: 4px;\n  --gap-ms: 6px;\n  --gap-md: 8px;\n  --gap-ml: 12px;\n  --gap-lg: 16px;\n  --gap-xl: 20px;\n}\n\ninput,\ninput:hover,\ninput:focus,\ninput:focus-visible {\n  background: transparent;\n  border: none;\n  outline: none;\n  appearance: textfield;\n}\n\nbutton,\nbutton:hover,\nbutton:focus,\nbutton:focus-visible {\n  outline: none;\n}\n\nbutton:disabled,\ninput:disabled {\n  cursor: not-allowed;\n}\n\ndiv:focus,\ndiv:focus-visible {\n  outline: none;\n  appearance: textfield;\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n  font-family: LeagueSpartan;\n  /* ascent-override: 70%; */\n  src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n  font-weight: lighter;\n}\n";
 styleInject(css_248z$b);
 
 var Spacing = /*#__PURE__*/ function(Spacing) {
@@ -218,7 +218,7 @@ function _array_like_to_array$c(arr, len) {
 function _array_with_holes$c(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$j(obj, key, value) {
+function _define_property$k(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -258,7 +258,7 @@ function _iterable_to_array_limit$c(arr, i) {
 function _non_iterable_rest$c() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$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);
@@ -268,7 +268,7 @@ function _object_spread$j(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$j(target, key, source[key]);
+            _define_property$k(target, key, source[key]);
         });
     }
     return target;
@@ -347,7 +347,7 @@ function Button(param) {
         onMouseDown: handleMouseDown,
         disabled: disabled,
         onClick: onClick && onClick,
-        style: _object_spread$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], ")"),
@@ -365,7 +365,7 @@ Button.margin = Spacing;
 Button.type = ButtonType;
 Button.size = ButtonSize;
 
-var css_248z$8 = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border: 0;\n  border-radius: var(--radius-sm);\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: var(--spacing-xl);\n  background: var(--bg-input);\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n    background-color: var(--bg-highlighted);\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Dropdown-item {\n  background-color: var(--bg-popover);\n  padding: var(--spacing-l);\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  &:hover {\n    background-color: var(--bg-highlighted);\n  }\n  &[data-selected] {\n    background-color: var(--bg-selected);\n  }\n}\n";
+var css_248z$8 = ".Dropdown-button {\n  font-size: var(--text-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  border-radius: var(--radius-sm);\n  appearance: none;\n  user-select: none;\n  -webkit-user-select: none;\n  height: var(--spacing-xl);\n  background: var(--color-gray-800);\n  color: var(--color-text);\n  &:hover,\n  &:focus,\n  &:active {\n    outline: none;\n    background-color: var(--bg-highlighted);\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Dropdown-items {\n  border: 2px solid;\n}\n\n.Dropdown-item {\n  background-color: var(--bg-page);\n  font-size: var(--text-sm);\n  padding: var(--spacing-md) var(--spacing-xl);\n  min-width: 100px;\n  color: var(--color-text);\n  cursor: pointer;\n  text-align: center;\n  text-transform: uppercase;\n  font-weight: bold;\n}\n\n.Dropdown-item[data-selected] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n\n.Dropdown-item[data-active] {\n  background-color: var(--bg-popover);\n  color: var(--color-text);\n}\n";
 styleInject(css_248z$8);
 
 function useObservable(param) {
@@ -416,7 +416,7 @@ function _array_like_to_array$b(arr, len) {
 function _array_with_holes$b(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$i(obj, key, value) {
+function _define_property$j(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -456,7 +456,7 @@ function _iterable_to_array_limit$b(arr, i) {
 function _non_iterable_rest$b() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$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);
@@ -466,7 +466,7 @@ function _object_spread$i(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$i(target, key, source[key]);
+            _define_property$j(target, key, source[key]);
         });
     }
     return target;
@@ -518,39 +518,39 @@ var defaultGlobalStateValue = {
 var reducer = function(state, action) {
     switch(action.type){
         case 'HIGHLIGHTED_ITEM_CHANGED':
-            return _object_spread_props$3(_object_spread$i({}, state), {
+            return _object_spread_props$3(_object_spread$j({}, state), {
                 highlightedItem: action.payload
             });
         case 'ADVANCED_VIEW_TOGGLED':
-            return _object_spread_props$3(_object_spread$i({}, state), {
+            return _object_spread_props$3(_object_spread$j({}, state), {
                 advancedView: action.payload
             });
         case 'AUTOMATABLE_PARAMS_LIST_RECEIVED':
-            return _object_spread_props$3(_object_spread$i({}, state), {
+            return _object_spread_props$3(_object_spread$j({}, state), {
                 automatableParamsList: action.payload
             });
         case 'AUTOMATABLE_PARAM_LABELS_RECEIVED':
-            return _object_spread_props$3(_object_spread$i({}, state), {
+            return _object_spread_props$3(_object_spread$j({}, state), {
                 automatableParamLabels: action.payload
             });
         case 'MOD_SLOTS_RECEIVED':
             var _action_payload;
-            return _object_spread_props$3(_object_spread$i({}, state), {
+            return _object_spread_props$3(_object_spread$j({}, state), {
                 modSlots: action === null || action === void 0 ? void 0 : (_action_payload = action.payload) === null || _action_payload === void 0 ? void 0 : _action_payload.reduce(function(acc, val) {
-                    return _object_spread_props$3(_object_spread$i({}, acc), _define_property$i({}, val[0], val[1]));
+                    return _object_spread_props$3(_object_spread$j({}, acc), _define_property$j({}, val[0], val[1]));
                 }, {})
             });
         case 'MOD_SLOT_UPDATED':
             var _action_payload1, _action_payload2;
-            return _object_spread_props$3(_object_spread$i({}, state), {
-                modSlots: _object_spread_props$3(_object_spread$i({}, state === null || state === void 0 ? void 0 : state.modSlots), _define_property$i({}, (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1[0], action === null || action === void 0 ? void 0 : (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2[1]))
+            return _object_spread_props$3(_object_spread$j({}, state), {
+                modSlots: _object_spread_props$3(_object_spread$j({}, state === null || state === void 0 ? void 0 : state.modSlots), _define_property$j({}, (_action_payload1 = action.payload) === null || _action_payload1 === void 0 ? void 0 : _action_payload1[0], action === null || action === void 0 ? void 0 : (_action_payload2 = action.payload) === null || _action_payload2 === void 0 ? void 0 : _action_payload2[1]))
             });
         case 'MOD_SLOT_PARAMS_LIST_RECEIVED':
-            return _object_spread_props$3(_object_spread$i({}, state), {
+            return _object_spread_props$3(_object_spread$j({}, state), {
                 modSlotParams: action === null || action === void 0 ? void 0 : action.payload
             });
         case 'MOD_SLOT_PARAM_LABELS_RECIEVED':
-            return _object_spread_props$3(_object_spread$i({}, state), {
+            return _object_spread_props$3(_object_spread$j({}, state), {
                 modSlotParamLabels: action === null || action === void 0 ? void 0 : action.payload
             });
         default:
@@ -692,7 +692,7 @@ var useDropdown = function(param) {
     var id = param.id, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, filter = param.filter, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
     var _properties_choices;
     var comboBoxState = Juce.getComboBoxState(id);
-    var _useState = _sliced_to_array$a(useState(comboBoxState.getChoiceIndex()), 2), value = _useState[0], setValue = _useState[1];
+    var _useState = _sliced_to_array$a(useState(comboBoxState.getChoiceIndex()), 2), index = _useState[0], setIndex = _useState[1];
     var _useState1 = _sliced_to_array$a(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
     var setHighlightedItem = useGlobalContext().setHighlightedItem;
     var choices = items.length ? items : (properties === null || properties === void 0 ? void 0 : (_properties_choices = properties.choices) === null || _properties_choices === void 0 ? void 0 : _properties_choices.length) ? properties === null || properties === void 0 ? void 0 : properties.choices : [];
@@ -702,30 +702,32 @@ var useDropdown = function(param) {
     }) : choices;
     var prevIndex = useRef(null);
     var handleChange = function(value) {
-        if (value !== prevIndex.current) {
-            comboBoxState.setChoiceIndex(value);
-            setValue(value);
-            onChange && onChange(value);
+        var choiceIndex = choices.indexOf(value);
+        if (choiceIndex !== prevIndex.current) {
+            comboBoxState.setChoiceIndex(choiceIndex);
+            setIndex(choiceIndex);
+            onChange && onChange(choiceIndex);
             // //@ts-expect-error
             // window.__JUCE__.backend.emitEvent('undoableActionOccurred', {});
             if (displayValInHeader) {
-                setHighlightedItem({
+                setHighlightedItem && setHighlightedItem({
                     label: label,
-                    value: choices === null || choices === void 0 ? void 0 : choices[value]
+                    value: value
                 });
             }
-            prevIndex.current = value;
+            prevIndex.current = choiceIndex;
         }
+        return choices[choiceIndex];
     };
     useEffect(function() {
         var comboBoxState = Juce.getComboBoxState(id);
-        setValue(comboBoxState.getChoiceIndex());
+        setIndex(comboBoxState.getChoiceIndex());
     }, [
         id
     ]);
     useEffect(function() {
         var valueListenerId = comboBoxState.valueChangedEvent.addListener(function() {
-            setValue(comboBoxState.getChoiceIndex());
+            setIndex(comboBoxState.getChoiceIndex());
         });
         var propertiesListenerId = comboBoxState.propertiesChangedEvent.addListener(function() {
             setProperties(comboBoxState.properties);
@@ -739,16 +741,16 @@ var useDropdown = function(param) {
     ]);
     var onMouseEnter = function() {
         if (displayValInHeader) {
-            setHighlightedItem({
+            setHighlightedItem && (setHighlightedItem === null || setHighlightedItem === void 0 ? void 0 : setHighlightedItem({
                 label: label,
-                value: choices === null || choices === void 0 ? void 0 : choices[value]
-            });
+                value: choices === null || choices === void 0 ? void 0 : choices[index]
+            }));
         }
     };
     return {
-        value: value,
-        valueString: choices === null || choices === void 0 ? void 0 : choices[value],
-        setValue: setValue,
+        value: choices[index],
+        index: index,
+        setIndex: setIndex,
         choices: choices,
         filteredChoices: filteredChoices,
         onMouseEnter: onMouseEnter,
@@ -756,21 +758,274 @@ var useDropdown = function(param) {
     };
 };
 
+var JustifyContent = /*#__PURE__*/ function(JustifyContent) {
+    JustifyContent["flexStart"] = "flex-start";
+    JustifyContent["flexEnd"] = "flex-end";
+    JustifyContent["center"] = "center";
+    JustifyContent["spaceBetween"] = "space-between";
+    JustifyContent["spaceAround"] = "space-around";
+    JustifyContent["spaceEvenly"] = "space-evenly";
+    return JustifyContent;
+}({});
+var AlignItems = /*#__PURE__*/ function(AlignItems) {
+    AlignItems["flexStart"] = "flex-start";
+    AlignItems["flexEnd"] = "flex-end";
+    AlignItems["center"] = "center";
+    AlignItems["stretch"] = "stretch";
+    AlignItems["baseline"] = "baseline";
+    return AlignItems;
+}({});
+var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
+    LayoutTags["header"] = "header";
+    LayoutTags["main"] = "main";
+    LayoutTags["section"] = "section";
+    LayoutTags["div"] = "div";
+    LayoutTags["footer"] = "footer";
+    LayoutTags["ul"] = "ul";
+    LayoutTags["li"] = "li";
+    return LayoutTags;
+}({});
+
+function _define_property$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$i(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 ownKeys$2(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props$2(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$2(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
+    BoxDisplay["flex"] = "flex";
+    BoxDisplay["block"] = "block";
+    return BoxDisplay;
+}(BoxDisplay || {});
+function Box(_param) {
+    var className = _param.className, style = _param.style, children = _param.children, flex = _param.flex, key = _param.key, onClick = _param.onClick, _param_alignItems = _param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = _param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = _param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = _param.width, width = _param_width === void 0 ? Width.auto : _param_width, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, _param_height = _param.height, height = _param_height === void 0 ? Height.auto : _param_height, _param_border = _param.border, border = _param_border === void 0 ? false : _param_border, _param_flexDirection = _param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _param_padding = _param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none,
+        Spacing.none,
+        Spacing.none,
+        Spacing.none
+    ] : _param_padding, _param_gap = _param.gap, gap = _param_gap === void 0 ? Spacing.xSmall : _param_gap, _param_tag = _param.tag, tag = _param_tag === void 0 ? LayoutTags.div : _param_tag, rest = _object_without_properties(_param, [
+        "className",
+        "style",
+        "children",
+        "flex",
+        "key",
+        "onClick",
+        "alignItems",
+        "justifyContent",
+        "display",
+        "width",
+        "flexWrap",
+        "height",
+        "border",
+        "flexDirection",
+        "padding",
+        "gap",
+        "tag"
+    ]);
+    var Tag = tag;
+    var _padding_, _padding_1, _padding_2, _ref;
+    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$2(_object_spread$i({
+        // id="globalValues"
+        key: key,
+        className: className,
+        onClick: onClick
+    }, rest), {
+        style: _object_spread$i({
+            flexWrap: flexWrap,
+            display: display,
+            gap: "var(--gap-".concat(gap, ")"),
+            width: '100%',
+            paddingTop: "var(--p-".concat(padding[0], ")"),
+            paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
+            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
+            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+            border: border ? '2px solid #999' : '',
+            maxWidth: width,
+            height: height,
+            flexDirection: flexDirection === FlexDirection.row ? FlexDirection.row : FlexDirection.column,
+            justifyContent: "".concat(justifyContent),
+            alignItems: "".concat(alignItems),
+            flex: flex ? flex : ''
+        }, style)
+    }), children);
+}
+// Object.assign(Layout, width, height, ALIGN, JUSTIFY, DIRECTION, SPACING);
+Box.display = BoxDisplay;
+Box.alignItems = AlignItems;
+Box.justifyContent = JustifyContent;
+Box.gap = Spacing;
+Box.flexDirection = FlexDirection;
+Box.width = Width;
+Box.height = Height;
+Box.padding = Spacing;
+Box.flexWrap = FlexWrap;
+Box.tag = LayoutTags;
+
+function _define_property$h(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$h(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$h(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function Label(param) {
+    var value = param.value, id = param.id, className = param.className, style = param.style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        Spacing.none
+    ] : _param_padding, children = param.children, htmlFor = param.htmlFor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.medium : _param_fontSize;
+    var _padding_, _padding_1, _padding_2, _ref;
+    return /*#__PURE__*/ React.createElement("label", {
+        id: id,
+        htmlFor: htmlFor,
+        style: _object_spread$h({
+            fontSize: "var(--text-".concat(fontSize),
+            paddingTop: "var(--p-".concat(padding[0], ")"),
+            paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
+            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
+            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+            WebkitUserSelect: 'none',
+            userSelect: 'none'
+        }, style),
+        className: classnames('Label', 'select-none', className)
+    }, value ? value : children);
+}
+Label.padding = Spacing;
+Label.fontSize = FontSizes;
+
+function _define_property$g(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread$g(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property$g(target, key, source[key]);
+        });
+    }
+    return target;
+}
 function Dropdown(param) {
-    var label = param.label, className = param.className, onChange = param.onChange, 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, id = param.id, style = param.style;
     var _useDropdown = useDropdown({
         id: id,
         label: label,
         onChange: onChange
     }), value = _useDropdown.value, choices = _useDropdown.choices, onMouseEnter = _useDropdown.onMouseEnter, handleChange = _useDropdown.handleChange;
-    return /*#__PURE__*/ React__default.createElement("div", {
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        flexDirection: Box.flexDirection.column,
         onMouseEnter: onMouseEnter
     }, /*#__PURE__*/ React__default.createElement(Listbox, {
         value: value,
         onChange: handleChange
     }, /*#__PURE__*/ React__default.createElement(ListboxButton, {
         className: classnames('Dropdown-button', className),
-        style: style,
+        style: _object_spread$g({
+            color: "".concat(color ? color : 'initial')
+        }, style),
         "aria-label": "Assignee",
         onChange: function(value) {
             return console.log(value);
@@ -778,14 +1033,29 @@ function Dropdown(param) {
     }, value), /*#__PURE__*/ React__default.createElement(ListboxOptions, {
         anchor: "bottom",
         portal: false,
-        className: "Dropdown-items z-10"
+        className: "Dropdown-items z-10",
+        style: {
+            color: "".concat(color ? color : 'initial')
+        }
     }, choices === null || choices === void 0 ? void 0 : choices.map(function(item, i) {
         return /*#__PURE__*/ React__default.createElement(ListboxOption, {
             className: classnames('Dropdown-item'),
             key: item,
-            value: i
+            value: item,
+            style: {
+                color: "".concat(color ? color : 'initial')
+            }
         }, item);
-    }))));
+    }))), /*#__PURE__*/ React__default.createElement(Label, {
+        padding: [
+            Label.padding.mediumSmall
+        ],
+        fontSize: Label.fontSize.small,
+        value: label,
+        style: {
+            color: "".concat(labelColor ? labelColor : 'initial')
+        }
+    }));
 }
 
 var validate = function(param) {
@@ -871,7 +1141,7 @@ function _array_like_to_array$9(arr, len) {
 function _array_with_holes$9(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$h(obj, key, value) {
+function _define_property$f(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -911,7 +1181,7 @@ function _iterable_to_array_limit$9(arr, i) {
 function _non_iterable_rest$9() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$h(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);
@@ -921,7 +1191,7 @@ function _object_spread$h(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$h(target, key, source[key]);
+            _define_property$f(target, key, source[key]);
         });
     }
     return target;
@@ -1053,7 +1323,7 @@ function Input(param) {
         id: id,
         ref: inputRef,
         className: classnames('TextInput', hasIncompleteValue || hasError ? 'is-blinking' : '', className),
-        style: _object_spread$h({
+        style: _object_spread$f({
             // TODO
             // color: hasError ? 'red' : hasIncompleteValue ? '#999' : textColor
             color: hasError ? 'red' : textColor,
@@ -1291,12 +1561,24 @@ var useSlider = function(param) {
         }
         if (down) {
             var deltaVal = delta[1] * -1;
+            var getNormalisedInterval = function() {
+                if (properties === null || properties === void 0 ? void 0 : properties.interval) {
+                    if ((properties === null || properties === void 0 ? void 0 : properties.interval) >= 1) {
+                        return (properties === null || properties === void 0 ? void 0 : properties.interval) * 0.01;
+                    } else {
+                        return properties === null || properties === void 0 ? void 0 : properties.interval;
+                    }
+                } else {
+                    return 0.01;
+                }
+            };
+            var normalisedInterval = getNormalisedInterval();
             var _normalisedValueRef_current;
             var newValue = ((_normalisedValueRef_current = normalisedValueRef.current) !== null && _normalisedValueRef_current !== void 0 ? _normalisedValueRef_current : 0) + deltaVal * // (properties?.interval && properties?.interval.toString().length > 4
             //   ? 4
             //   : 0.4) *
-            ((properties === null || properties === void 0 ? void 0 : properties.interval) || 0.01);
-            setNormalisedState(newValue);
+            normalisedInterval;
+            setNormalisedState(clamp(newValue));
         }
         if (last) {
             //@ts-expect-error
@@ -1351,7 +1633,7 @@ var useSlider = function(param) {
                 } else {
                     newValue = x / rect.width;
                 }
-                setNormalisedState(newValue);
+                setNormalisedState(clamp(newValue));
             }
             if (last) {
                 //@ts-expect-error
@@ -1386,229 +1668,7 @@ var useSlider = function(param) {
     };
 };
 
-var JustifyContent = /*#__PURE__*/ function(JustifyContent) {
-    JustifyContent["flexStart"] = "flex-start";
-    JustifyContent["flexEnd"] = "flex-end";
-    JustifyContent["center"] = "center";
-    JustifyContent["spaceBetween"] = "space-between";
-    JustifyContent["spaceAround"] = "space-around";
-    JustifyContent["spaceEvenly"] = "space-evenly";
-    return JustifyContent;
-}({});
-var AlignItems = /*#__PURE__*/ function(AlignItems) {
-    AlignItems["flexStart"] = "flex-start";
-    AlignItems["flexEnd"] = "flex-end";
-    AlignItems["center"] = "center";
-    AlignItems["stretch"] = "stretch";
-    AlignItems["baseline"] = "baseline";
-    return AlignItems;
-}({});
-var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
-    LayoutTags["header"] = "header";
-    LayoutTags["main"] = "main";
-    LayoutTags["section"] = "section";
-    LayoutTags["div"] = "div";
-    LayoutTags["footer"] = "footer";
-    LayoutTags["ul"] = "ul";
-    LayoutTags["li"] = "li";
-    return LayoutTags;
-}({});
-
-function _define_property$g(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread$g(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property$g(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys$2(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props$2(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$2(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-function _object_without_properties(source, excluded) {
-    if (source == null) return {};
-    var target = _object_without_properties_loose(source, excluded);
-    var key, i;
-    if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
-var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
-    BoxDisplay["flex"] = "flex";
-    BoxDisplay["block"] = "block";
-    return BoxDisplay;
-}(BoxDisplay || {});
-function Box(_param) {
-    var className = _param.className, style = _param.style, children = _param.children, flex = _param.flex, key = _param.key, onClick = _param.onClick, _param_alignItems = _param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_justifyContent = _param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_display = _param.display, display = _param_display === void 0 ? "flex" : _param_display, _param_width = _param.width, width = _param_width === void 0 ? Width.auto : _param_width, _param_flexWrap = _param.flexWrap, flexWrap = _param_flexWrap === void 0 ? FlexWrap.noWrap : _param_flexWrap, _param_height = _param.height, height = _param_height === void 0 ? Height.auto : _param_height, _param_border = _param.border, border = _param_border === void 0 ? false : _param_border, _param_flexDirection = _param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, _param_padding = _param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none,
-        Spacing.none,
-        Spacing.none,
-        Spacing.none
-    ] : _param_padding, _param_gap = _param.gap, gap = _param_gap === void 0 ? Spacing.xSmall : _param_gap, _param_tag = _param.tag, tag = _param_tag === void 0 ? LayoutTags.div : _param_tag, rest = _object_without_properties(_param, [
-        "className",
-        "style",
-        "children",
-        "flex",
-        "key",
-        "onClick",
-        "alignItems",
-        "justifyContent",
-        "display",
-        "width",
-        "flexWrap",
-        "height",
-        "border",
-        "flexDirection",
-        "padding",
-        "gap",
-        "tag"
-    ]);
-    var Tag = tag;
-    var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React__default.createElement(Tag, _object_spread_props$2(_object_spread$g({
-        // id="globalValues"
-        key: key,
-        className: className,
-        onClick: onClick
-    }, rest), {
-        style: _object_spread$g({
-            flexWrap: flexWrap,
-            display: display,
-            gap: "var(--gap-".concat(gap, ")"),
-            width: '100%',
-            paddingTop: "var(--p-".concat(padding[0], ")"),
-            paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
-            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
-            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
-            border: border ? '2px solid #999' : '',
-            maxWidth: width,
-            height: height,
-            flexDirection: flexDirection === FlexDirection.row ? FlexDirection.row : FlexDirection.column,
-            justifyContent: "".concat(justifyContent),
-            alignItems: "".concat(alignItems),
-            flex: flex ? flex : ''
-        }, style)
-    }), children);
-}
-// Object.assign(Layout, width, height, ALIGN, JUSTIFY, DIRECTION, SPACING);
-Box.display = BoxDisplay;
-Box.alignItems = AlignItems;
-Box.justifyContent = JustifyContent;
-Box.gap = Spacing;
-Box.flexDirection = FlexDirection;
-Box.width = Width;
-Box.height = Height;
-Box.padding = Spacing;
-Box.flexWrap = FlexWrap;
-Box.tag = LayoutTags;
-
-function _define_property$f(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread$f(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property$f(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function Label(param) {
-    var value = param.value, id = param.id, className = param.className, style = param.style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        Spacing.none
-    ] : _param_padding, children = param.children, htmlFor = param.htmlFor, _param_fontSize = param.fontSize, fontSize = _param_fontSize === void 0 ? FontSizes.medium : _param_fontSize;
-    var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React.createElement("label", {
-        id: id,
-        htmlFor: htmlFor,
-        style: _object_spread$f({
-            fontSize: "var(--text-".concat(fontSize),
-            paddingTop: "var(--p-".concat(padding[0], ")"),
-            paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
-            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
-            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
-            WebkitUserSelect: 'none',
-            userSelect: 'none'
-        }, style),
-        className: classnames('Label', 'select-none', className)
-    }, value ? value : children);
-}
-Label.padding = Spacing;
-Label.fontSize = FontSizes;
-
-var css_248z$6 = ".RotarySlider {\n  position: relative;\n  height: 50px;\n  width: 50px;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n  height: 100%;\n  width: 100%;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--bg-popover);\n  border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: var(--spacing-xs);\n  height: 50%;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n  border-color: var(--bg-popover) transparent var(--bg-popover) transparent;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 7px 10px 7px;\n  transform: rotate(180deg);\n  padding-bottom: var(--spacing-sm);\n}\n";
+var css_248z$6 = ".RotarySlider {\n  position: relative;\n  height: 50px;\n  width: 50px;\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n}\n\n.RotarySlider-Inner {\n  height: 100%;\n  width: 100%;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--bg-popover);\n  border-radius: 50%;\n}\n\n.RotarySlider-Indicator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: var(--spacing-xs);\n  height: 50%;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}\n\n.RotarySlider-center-marker {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 0 5px 8px 5px;\n  transform: rotate(180deg);\n  padding-bottom: var(--spacing-sm);\n}\n";
 styleInject(css_248z$6);
 
 function _define_property$e(obj, key, value) {
@@ -1665,7 +1725,7 @@ function RotarySlider(param) {
         end: 15000.0,
         interval: 0.1,
         skew: 0.7
-    } : _param_mockProperties, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-400)' : _param_color, style = param.style;
+    } : _param_mockProperties, labelColor = param.labelColor, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-400)' : _param_color, style = param.style;
     var _useSlider = useSlider({
         id: id,
         label: label,
@@ -1677,6 +1737,9 @@ function RotarySlider(param) {
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column
     }, polarity === Polarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            borderColor: "".concat(color, " transparent ").concat(color, " transparent")
+        },
         className: classnames('RotarySlider-center-marker')
     }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$e({
         className: classnames('RotarySlider', polarity === Polarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
@@ -1700,7 +1763,10 @@ function RotarySlider(param) {
             Label.padding.mediumSmall
         ],
         fontSize: Label.fontSize.small,
-        value: label
+        value: label,
+        style: {
+            color: "".concat(labelColor ? labelColor : 'initial')
+        }
     }));
 }
 RotarySlider.sliderPolarity = Polarity;
@@ -3877,7 +3943,7 @@ function ModMatrixToggleCell(param) {
     var modifier = param.modifier, color = param.color, style = param.style;
     var _useDropdown = useDropdown({
         id: modifier
-    }), value = _useDropdown.value, handleChange = _useDropdown.handleChange;
+    }), index = _useDropdown.index, choices = _useDropdown.choices, handleChange = _useDropdown.handleChange;
     return /*#__PURE__*/ React__default.createElement(Box, {
         className: "ModMatrixCell ModMatrixToggleCell",
         justifyContent: Box.justifyContent.flexEnd,
@@ -3889,8 +3955,8 @@ function ModMatrixToggleCell(param) {
         }, style),
         height: '2.5rem',
         onClick: function() {
-            var newValue = Math.abs(value - 1);
-            handleChange(newValue);
+            var newIndex = Math.abs(index - 1);
+            handleChange(choices[newIndex]);
         }
     }, /*#__PURE__*/ React__default.createElement(Box, {
         flex: "1",
@@ -3901,7 +3967,7 @@ function ModMatrixToggleCell(param) {
         style: {
             pointerEvents: 'none'
         }
-    }, Object.keys(Polarity)[value] || '0')));
+    }, Object.keys(Polarity)[index] || '0')));
 }
 
 function _define_property$2(obj, key, value) {
@@ -4409,6 +4475,74 @@ function ModMatrix(param) {
     })));
 }
 
+function LFOTab() {
+    return /*#__PURE__*/ React__default.createElement(Box, {
+        className: "LFOTab"
+    }, /*#__PURE__*/ React__default.createElement(Dropdown, {
+        labelColor: "var(--color-text)",
+        color: "var(--color-brand)",
+        id: "LFO1_Wave",
+        label: "LFO1 Wave"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        labelColor: "var(--color-text)",
+        id: "LFO1_Hz",
+        label: "LFO1 Hz",
+        color: "var(--color-brand)"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        labelColor: "var(--color-text)",
+        id: "LFO1_Hz_Hi",
+        label: "LFO1 Hz Hi",
+        color: "var(--color-brand)"
+    }), /*#__PURE__*/ React__default.createElement(Dropdown, {
+        labelColor: "var(--color-text)",
+        color: "var(--color-brand)",
+        id: "LFO1_SyncRate",
+        label: "LFO1 Sync Rate"
+    }), /*#__PURE__*/ React__default.createElement(Dropdown, {
+        labelColor: "var(--color-text)",
+        color: "var(--color-brand)",
+        id: "LFO1_SyncType",
+        label: "LFO1 Sync Type"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        id: "LFO1_Sixteenths",
+        label: "LFO1 Sixteenths"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        id: "LFO1_Thirds",
+        label: "LFO1 Thirds"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        polarity: RotarySlider.sliderPolarity.bipolar,
+        id: "LFO1_Sync_Offset",
+        label: "LFO1 Sync Offset"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        polarity: RotarySlider.sliderPolarity.bipolar,
+        id: "LFO1_Phase",
+        label: "LFO1 Phase"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        id: "LFO1_Width",
+        label: "LFO1 Width"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        id: "LFO1_Amp",
+        label: "LFO1 Amp"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        color: "var(--color-brand)",
+        labelColor: "var(--color-text)",
+        id: "LFO1_Rand",
+        label: "LFO1 Rand"
+    }));
+}
+
 var css_248z = "/* Tab styles */\n/* TODO: Refactor to use utility classes? */\n/* TODO: Clean up */\n\n.ModuleFooter {\n  overflow-y: scroll;\n}\n\n.ModuleFooter .Tabs-item {\n  background: transparent;\n  color: var(--color-text);\n  font-family: var(--font-leagueSpartan);\n  background: var(--color-gray-600);\n  flex: 1 0 auto;\n}\n\n.ModuleFooter .Tabs-item:hover,\n.ModuleFooter .tabs-item:focus,\n.ModuleFooter .tabs-item:focus-visible {\n  background: var(--color-gray-700);\n}\n\n.ModuleFooter .Tabs-item[data-headlessui-state='selected'] {\n  background: var(--color-gray-700);\n}\n";
 styleInject(css_248z);
 
@@ -4620,9 +4754,6 @@ var ModMatrixTab = function() {
 var InputModTab = function() {
     return /*#__PURE__*/ React__default.createElement(Box, null, "InputModTab");
 };
-var LFOsTab = function() {
-    return /*#__PURE__*/ React__default.createElement(Box, null, "LFOsTab");
-};
 var SequencerTab = function() {
     return /*#__PURE__*/ React__default.createElement(Box, null, "SequencerTab");
 };
@@ -4739,7 +4870,7 @@ function ModuleFooter(param) {
         padding: [
             Box.padding.large
         ]
-    }, isTabSelected("ModMatrix") ? /*#__PURE__*/ React__default.createElement(ModMatrixTab, null) : '', isTabSelected("InputMod") ? /*#__PURE__*/ React__default.createElement(InputModTab, null) : '', isTabSelected("LFOs") ? /*#__PURE__*/ React__default.createElement(LFOsTab, null) : '', isTabSelected("Sequencer") ? /*#__PURE__*/ React__default.createElement(SequencerTab, null) : '', isTabSelected("Settings") ? /*#__PURE__*/ React__default.createElement(SettingsTab, null) : '')));
+    }, isTabSelected("ModMatrix") ? /*#__PURE__*/ React__default.createElement(ModMatrixTab, null) : '', isTabSelected("InputMod") ? /*#__PURE__*/ React__default.createElement(InputModTab, null) : '', isTabSelected("LFOs") ? /*#__PURE__*/ React__default.createElement(LFOTab, null) : '', isTabSelected("Sequencer") ? /*#__PURE__*/ React__default.createElement(SequencerTab, null) : '', isTabSelected("Settings") ? /*#__PURE__*/ React__default.createElement(SettingsTab, null) : '')));
 }
 
 export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, GlobalContextProvider, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, clamp, decimalToPercent, defaultGlobalStateValue as defaultValue, normalisedToScaled, percentToDecimal, randomizeValue, scaledToNormalised as scaledTonormalised, useGlobalContext, useObservable, useSlider };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO;;AAExD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B;AACA,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B;;AAEA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO;;AAExD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B;AACA,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B;;AAEA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/src/advanced/ModuleFooter/LFOTab.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare function LFOTab(): React.JSX.Element;
+export default LFOTab;
+//# sourceMappingURL=LFOTab.d.ts.map

package/dist/src/advanced/ModuleFooter/LFOTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LFOTab.d.ts","sourceRoot":"","sources":["../../../../src/advanced/ModuleFooter/LFOTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,iBAAS,MAAM,sBA+Ed;AAED,eAAe,MAAM,CAAC"}

package/dist/src/advanced/ModuleFooter/ModuleFooter.d.ts

@@ -9,7 +9,6 @@ export declare enum FooterTabs {
 }
 export declare const ModMatrixTab: () => React.JSX.Element;
 export declare const InputModTab: () => React.JSX.Element;
-export declare const LFOsTab: () => React.JSX.Element;
 export declare const SequencerTab: () => React.JSX.Element;
 export declare const SettingsTab: () => React.JSX.Element;
 declare function ModuleFooter({ className, style, }: {

package/dist/src/advanced/ModuleFooter/ModuleFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleFooter.d.ts","sourceRoot":"","sources":["../../../../src/advanced/ModuleFooter/ModuleFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAMnD,OAAO,oBAAoB,CAAC;AAE5B,oBAAY,UAAU;IACpB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,eAAO,MAAM,YAAY,yBAExB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAEvB,CAAC;AAEF,eAAO,MAAM,OAAO,yBAEnB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAExB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAEvB,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,qBA0FA;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ModuleFooter.d.ts","sourceRoot":"","sources":["../../../../src/advanced/ModuleFooter/ModuleFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAOnD,OAAO,oBAAoB,CAAC;AAE5B,oBAAY,UAAU;IACpB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,eAAO,MAAM,YAAY,yBAExB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAEvB,CAAC;AAEF,eAAO,MAAM,YAAY,yBAExB,CAAC;AAEF,eAAO,MAAM,WAAW,yBAEvB,CAAC;AAEF,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,qBA0FA;AAED,eAAe,YAAY,CAAC"}

package/dist/src/core/Box/Box.d.ts

@@ -16,6 +16,7 @@ export interface CommonProps {
     padding?: Array<Spacing>;
     tag?: LayoutTags;
     key?: string | number;
+    [x: string]: any;
 }
 export type ConditionalProps = {
     display?: BoxDisplay.flex;

package/dist/src/core/Box/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/core/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EACL,aAAa,EACb,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,EACT,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjE,aAAK,UAAU;IACb,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACzB,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,gBAAgB,GACxB;IACE,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GACD;IACE,OAAO,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC;IAC3B,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CAAC;AAEN,KAAK,QAAQ,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAE/C,iBAAS,GAAG,CAAC,EACX,SAAS,EACT,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,OAAO,EACP,UAA8B,EAC9B,cAAsC,EACtC,OAAyB,EACzB,KAAkB,EAClB,QAA0B,EAC1B,MAAoB,EACpB,MAAc,EACd,aAAiC,EACjC,OAAkE,EAClE,GAAoB,EACpB,GAAoB,EACpB,GAAG,IAAI,EACR,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,qBAkCnC;kBArDQ,GAAG;;;;;;;;;;;;AAoEZ,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../src/core/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EACL,aAAa,EACb,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAQ,EACT,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjE,aAAK,UAAU;IACb,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACzB,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AAED,MAAM,MAAM,gBAAgB,GACxB;IACE,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GACD;IACE,OAAO,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC;IAC3B,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CAAC;AAEN,KAAK,QAAQ,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAE/C,iBAAS,GAAG,CAAC,EACX,SAAS,EACT,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,OAAO,EACP,UAA8B,EAC9B,cAAsC,EACtC,OAAyB,EACzB,KAAkB,EAClB,QAA0B,EAC1B,MAAoB,EACpB,MAAc,EACd,aAAiC,EACjC,OAAkE,EAClE,GAAoB,EACpB,GAAoB,EACpB,GAAG,IAAI,EACR,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,qBAkCnC;kBArDQ,GAAG;;;;;;;;;;;;AAoEZ,eAAe,GAAG,CAAC"}

package/dist/src/core/Dropdown/Dropdown.d.ts

@@ -4,11 +4,13 @@ export interface DropdownProps {
     id: string;
     items?: Array<string>;
     label: string;
+    color?: string;
+    labelColor?: string;
     className?: string;
     style?: React.CSSProperties;
     onMouseOver?: (label: string, value: number) => void;
-    onChange?: (event: any) => any;
+    onChange?: (event: string) => any;
 }
-declare function Dropdown({ label, className, onChange, id, style }: DropdownProps): React.JSX.Element;
+declare function Dropdown({ label, color, labelColor, className, onChange, id, style, }: DropdownProps): React.JSX.Element;
 export default Dropdown;
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/src/core/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/core/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAa;IAG5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;CAChC;AAED,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,aAAa,qBAoCzE;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/core/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,gBAAgB,CAAC;AAIxB,MAAM,WAAW,aAAa;IAG5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;CACnC;AAED,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,KAA2B,EAC3B,UAAgC,EAChC,SAAS,EACT,QAAQ,EACR,EAAE,EACF,KAAK,GACN,EAAE,aAAa,qBAqDf;AAED,eAAe,QAAQ,CAAC"}

package/dist/src/core/Slider/RotarySlider.d.ts

@@ -13,6 +13,7 @@ export interface RotarySliderProps {
     color?: string;
     style?: object;
     label: string;
+    labelColor?: string;
     /**
      * Returns the scaled value of the parameter. This corresponds to the return value of
      * NormalisableRange::convertFrom0to1() (C++). This value will differ from a linear
@@ -21,7 +22,7 @@ export interface RotarySliderProps {
     mockInitialNormalisedValue?: number;
     mockProperties?: JuceSliderProperties;
 }
-declare function RotarySlider({ polarity, label, className, id, onChange, rotationBehavior, mockInitialNormalisedValue, isRandomizable, mockProperties, color, style, }: React.PropsWithChildren<RotarySliderProps>): React.JSX.Element;
+declare function RotarySlider({ polarity, label, className, id, onChange, rotationBehavior, mockInitialNormalisedValue, isRandomizable, mockProperties, labelColor, color, style, }: React.PropsWithChildren<RotarySliderProps>): React.JSX.Element;
 declare namespace RotarySlider {
     var sliderPolarity: typeof Polarity;
 }

package/dist/src/core/Slider/RotarySlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RotarySlider.d.ts","sourceRoot":"","sources":["../../../../src/core/Slider/RotarySlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAI9C,OAAO,oBAAoB,CAAC;AAK5B,MAAM,WAAW,iBAAiB;IAGhC,EAAE,EAAE,GAAG,CAAC;IAER,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAIpB,gBAAgB,CAAC,EAAE,sBAAsB,CAAC;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAEnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IAKH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAoCpC,cAAc,CAAC,EAAE,oBAAoB,CAAC;CACvC;AAED,iBAAS,YAAY,CAAC,EACpB,QAA0B,EAC1B,KAAK,EACL,SAAS,EACT,EAAE,EACF,QAAQ,EACR,gBAAyD,EAEzD,0BAA8B,EAC9B,cAAsB,EACtB,cAKC,EACD,KAA+B,EAC/B,KAAK,GACN,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,qBAwD5C;kBA1EQ,YAAY;;;AA6ErB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"RotarySlider.d.ts","sourceRoot":"","sources":["../../../../src/core/Slider/RotarySlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAI9C,OAAO,oBAAoB,CAAC;AAK5B,MAAM,WAAW,iBAAiB;IAGhC,EAAE,EAAE,GAAG,CAAC;IAER,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAIpB,gBAAgB,CAAC,EAAE,sBAAsB,CAAC;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;IAEnC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IAKH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAoCpC,cAAc,CAAC,EAAE,oBAAoB,CAAC;CACvC;AAED,iBAAS,YAAY,CAAC,EACpB,QAA0B,EAC1B,KAAK,EACL,SAAS,EACT,EAAE,EACF,QAAQ,EACR,gBAAyD,EAEzD,0BAA8B,EAC9B,cAAsB,EACtB,cAKC,EACD,UAAU,EACV,KAA+B,EAC/B,KAAK,GACN,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,qBAgE5C;kBAnFQ,YAAY;;;AAsFrB,eAAe,YAAY,CAAC"}

package/dist/src/hooks/useDropdown.d.ts

@@ -3,16 +3,16 @@ declare const useDropdown: ({ id, label, items, filter, onChange, displayValInHe
     label?: string;
     filter?: string;
     items?: Array<string>;
-    onChange?: ((value: number) => unknown | void) | React.Dispatch<React.SetStateAction<any>>;
+    onChange?: ((value: string) => unknown | void) | React.Dispatch<React.SetStateAction<any>>;
     displayValInHeader?: boolean;
 }) => {
-    value: number;
-    valueString: string;
-    setValue: (value: number) => void;
+    value: string;
+    index: number;
+    setIndex: (index: number) => void;
     choices: Array<string>;
     filteredChoices: Array<string>;
     onMouseEnter: () => void;
-    handleChange: (value: number) => void;
+    handleChange: (value: string) => void;
 };
 export default useDropdown;
 //# sourceMappingURL=useDropdown.d.ts.map

package/dist/src/hooks/useDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdown.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDropdown.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,WAAW,GAAI,6DAOlB;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,QAAQ,CAAC,EACL,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC,GACnC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;IAC9C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,KAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAsEvC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"useDropdown.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDropdown.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,WAAW,GAAI,6DAOlB;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACtB,QAAQ,CAAC,EACL,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC,GACnC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;IAC9C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,KAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAyEvC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/src/hooks/useSlider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSlider.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSlider.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAc,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,QAAA,MAAM,SAAS,GAAI,0GAahB;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC;CACnC;mCAyGuC,MAAM;+BASV,MAAM;;;;;;;CAgJzC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"useSlider.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSlider.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,oBAAoB,EAAc,MAAM,sBAAsB,CAAC;AAExE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,QAAA,MAAM,SAAS,GAAI,0GAahB;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC;CACnC;mCAyGuC,MAAM;+BASV,MAAM;;;;;;;CA0JzC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antimatter-audio/antimatter-ui",
-  "version": "10.3.0",
+  "version": "10.4.0",
   "description": "React UI component library for Antimatter Audio.",
   "repository": {
     "type": "git",