@antimatter-audio/antimatter-ui 10.3.0 → 10.5.0

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-brand-600: #932eb8;\n  --color-brand-400: #d199e6;\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,275 @@ 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_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),
+            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',
+            color: color
+        }, 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 +1034,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.xSmall,
+        value: label,
+        style: {
+            color: "".concat(labelColor ? labelColor : 'initial')
+        }
+    }));
 }
 
 var validate = function(param) {
@@ -871,7 +1142,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 +1182,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 +1192,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 +1324,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,
@@ -1085,12 +1356,6 @@ var SliderType = /*#__PURE__*/ function(SliderType) {
     SliderType["custom"] = "custom";
     return SliderType;
 }({});
-var SliderRotationBehavior = /*#__PURE__*/ function(SliderRotationBehavior) {
-    SliderRotationBehavior["rotateIndicator"] = "rotateIndicator";
-    SliderRotationBehavior["rotateKnob"] = "rotateKnob";
-    SliderRotationBehavior["noRotation"] = "noRotation";
-    return SliderRotationBehavior;
-}({});
 
 var clamp = function(val) {
     var min = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0, max = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
@@ -1291,12 +1556,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 +1628,7 @@ var useSlider = function(param) {
                 } else {
                     newValue = x / rect.width;
                 }
-                setNormalisedState(newValue);
+                setNormalisedState(clamp(newValue));
             }
             if (last) {
                 //@ts-expect-error
@@ -1386,229 +1663,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  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\n.ProgressCircle-wrapper {\n  position: relative;\n}\n.ProgressCircle {\n  fill: none;\n}\n\n.ProgressCircle-value {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  text-align: center;\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}\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}\n";
 styleInject(css_248z$6);
 
 function _define_property$e(obj, key, value) {
@@ -1658,14 +1713,67 @@ function _object_spread_props$1(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.linear : _param_polarity, value = param.value;
+    var cx = width / 2;
+    var cy = height / 2;
+    var radius = (width - strokeWidth * 2) / 2;
+    var circ = 2 * 3.14 * radius;
+    var activeZone = circ - circ * 0.25;
+    var linearOffset = 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,
+        style: {
+            stroke: bgColor,
+            strokeWidth: strokeWidth,
+            strokeDasharray: "".concat(activeZone)
+        }
+    }), polarity === Polarity.bipolar ? /*#__PURE__*/ React__default.createElement("circle", {
+        id: "circle2",
+        className: "ProgressCircle-fg",
+        cx: cx,
+        cy: cy,
+        r: radius,
+        style: {
+            stroke: color,
+            strokeWidth: strokeWidth,
+            strokeLinecap: 'round',
+            strokeDasharray: circ,
+            transform: "rotate(270deg)",
+            strokeDashoffset: 107.5
+        }
+    }) : null, /*#__PURE__*/ React__default.createElement("circle", {
+        id: "circle2",
+        className: "ProgressCircle-fg",
+        cx: cx,
+        cy: cy,
+        r: radius,
+        style: {
+            stroke: color,
+            strokeWidth: strokeWidth,
+            strokeLinecap: 'round',
+            strokeDasharray: circ,
+            transform: "rotate(".concat(polarity === Polarity.linear ? '135deg' : '270deg', ")"),
+            strokeDashoffset: polarity === Polarity.linear ? linearOffset : bipolarOffset
+        }
+    }));
+};
 function RotarySlider(param) {
-    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.linear : _param_polarity, label = param.label, className = param.className, id = param.id, onChange = param.onChange, _param_rotationBehavior = param.rotationBehavior, rotationBehavior = _param_rotationBehavior === void 0 ? SliderRotationBehavior.rotateIndicator : _param_rotationBehavior, _param_mockInitialNormalisedValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
+    var _param_polarity = param.polarity, polarity = _param_polarity === void 0 ? Polarity.linear : _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 ? {
         start: 20.0,
         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; 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 ? 40 : _param_height, style = param.style;
     var _useSlider = useSlider({
         id: id,
         label: label,
@@ -1673,33 +1781,43 @@ function RotarySlider(param) {
         mockInitialNormalisedValue: mockInitialNormalisedValue,
         onChange: onChange,
         isRandomizable: isRandomizable
-    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, onMouseEnter = _useSlider.onMouseEnter;
+    }), bindDrag = _useSlider.bindDrag, normalisedValue = _useSlider.normalisedValue, scaledValue = _useSlider.scaledValue, onMouseEnter = _useSlider.onMouseEnter;
+    console.log(id, 'IDIDDIDI');
     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)
     }, bindDrag()), {
         onMouseEnter: onMouseEnter,
         style: _object_spread$e({
-            touchAction: 'none'
+            touchAction: 'none',
+            height: "".concat(height, "px"),
+            width: "".concat(width, "px")
         }, style)
     }), normalisedValue !== null ? /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('RotarySlider-Inner'),
+        className: "ProgressCircle-wrapper"
+    }, /*#__PURE__*/ React__default.createElement(ProgressCircle, {
+        value: normalisedValue,
+        polarity: polarity,
+        color: bgColor,
+        bgColor: color
+    }), /*#__PURE__*/ React__default.createElement(Label, {
+        className: "ProgressCircle-value",
+        color: "var(--color-gray-200)",
+        fontSize: Label.fontSize.xSmall,
         style: {
-            rotate: rotationBehavior === SliderRotationBehavior.rotateIndicator ? "".concat(polarity === Polarity.linear ? normalisedValue : normalisedValue + 0.5, "turn") : ''
+            fontWeight: 'bold'
         }
-    }, /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('RotarySlider-Indicator'),
-        style: _object_spread$e({
-            backgroundColor: color
-        }, style)
-    })) : ''), /*#__PURE__*/ React__default.createElement(Label, {
+    }, scaledValue)) : ''), /*#__PURE__*/ React__default.createElement(Label, {
         padding: [
             Label.padding.mediumSmall
         ],
-        fontSize: Label.fontSize.small,
+        fontSize: Label.fontSize.xSmall,
         value: label
     }));
 }
@@ -1801,7 +1919,8 @@ function Slider(param) {
             Label.padding.mediumSmall
         ],
         fontSize: Label.fontSize.small,
-        value: label
+        value: label,
+        color: color
     }));
 }
 Slider.sliderType = SliderType;
@@ -3877,7 +3996,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 +4008,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 +4020,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 +4528,56 @@ 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, {
+        id: "LFO1_Hz",
+        label: "LFO1 Hz"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        id: "LFO1_Hz_Hi",
+        label: "LFO1 Hz Hi"
+    }), /*#__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, {
+        id: "LFO1_Sixteenths",
+        label: "LFO1 Sixteenths"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        id: "LFO1_Thirds",
+        label: "LFO1 Thirds"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        polarity: RotarySlider.sliderPolarity.bipolar,
+        id: "LFO1_Sync_Offset",
+        label: "LFO1 Sync Offset"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        polarity: RotarySlider.sliderPolarity.bipolar,
+        id: "LFO1_Phase",
+        label: "LFO1 Phase"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        id: "LFO1_Width",
+        label: "LFO1 Width"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        id: "LFO1_Amp",
+        label: "LFO1 Amp"
+    }), /*#__PURE__*/ React__default.createElement(RotarySlider, {
+        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 +4789,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 +4905,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 };