@antimatter-audio/antimatter-ui 10.0.0 → 10.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/advanced/IconButton/IconButton.d.ts +55 -0
  2. package/dist/advanced/IconButton/IconButton.d.ts.map +1 -0
  3. package/dist/advanced/ModuleFooter/ModuleFooter.d.ts +7 -0
  4. package/dist/advanced/ModuleFooter/ModuleFooter.d.ts.map +1 -0
  5. package/dist/advanced/ModuleHeader/ModuleHeader.d.ts.map +1 -1
  6. package/dist/advanced/PresetManager/PresetManager.d.ts +5 -0
  7. package/dist/advanced/PresetManager/PresetManager.d.ts.map +1 -0
  8. package/dist/core/Box/Box.d.ts +52 -0
  9. package/dist/core/Box/Box.d.ts.map +1 -0
  10. package/dist/core/Box/types.d.ts +29 -0
  11. package/dist/core/Box/types.d.ts.map +1 -0
  12. package/dist/core/Button/Button.d.ts +3 -1
  13. package/dist/core/Button/Button.d.ts.map +1 -1
  14. package/dist/core/Indicators/IndicatorLight.d.ts +12 -0
  15. package/dist/core/Indicators/IndicatorLight.d.ts.map +1 -0
  16. package/dist/core/Matrix/Matrix.d.ts +13 -0
  17. package/dist/core/Matrix/Matrix.d.ts.map +1 -0
  18. package/dist/index.js +739 -182
  19. package/dist/index.js.map +1 -1
  20. package/dist/src/advanced/IconButton/IconButton.d.ts +31 -7
  21. package/dist/src/advanced/IconButton/IconButton.d.ts.map +1 -1
  22. package/dist/src/advanced/ModuleHeader/ModuleHeader.d.ts.map +1 -1
  23. package/dist/src/advanced/PresetManager/PresetManager.d.ts +5 -0
  24. package/dist/src/advanced/PresetManager/PresetManager.d.ts.map +1 -0
  25. package/dist/src/core/Box/Box.d.ts +2 -1
  26. package/dist/src/core/Box/Box.d.ts.map +1 -1
  27. package/dist/src/core/Box/types.d.ts +3 -1
  28. package/dist/src/core/Box/types.d.ts.map +1 -1
  29. package/dist/src/core/Button/Button.d.ts +3 -1
  30. package/dist/src/core/Button/Button.d.ts.map +1 -1
  31. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -34,8 +34,8 @@ function styleInject(css, ref) {
34
34
  }
35
35
  }
36
36
 
37
- var css_248z$8 = "@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\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: #1e1d21;\n --bg-highlighted: #838091;\n --bg-muted: #595763;\n --bg-selected: #999999;\n --bg-input: #1e1d21;\n --font-leagueSpartan: 'LeagueSpartan';\n --text-xs: 0.625rem;\n --text-sm: 0.75rem;\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 src: url('./common/assets/fonts/LeagueSpartan-Regular.ttf');\n}\n\n@font-face {\n font-family: LeagueSpartan;\n src: url('./common/assets/fonts/LeagueSpartan-Thin.ttf');\n font-weight: lighter;\n}\n";
38
- styleInject(css_248z$8);
37
+ var css_248z$9 = "@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-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";
38
+ styleInject(css_248z$9);
39
39
 
40
40
  var Spacing = /*#__PURE__*/ function(Spacing) {
41
41
  Spacing["none"] = "none";
@@ -84,18 +84,18 @@ var FontSizes = /*#__PURE__*/ function(FontSizes) {
84
84
  return FontSizes;
85
85
  }({});
86
86
 
87
- var css_248z$7 = ".Tabs {\n display: flex;\n font-size: 1rem;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.Tabs-item {\n &:disabled {\n cursor: not-allowed;\n }\n}\n\n.Tabs-item::-moz-selection {\n background: transparent;\n}\n.Tabs-item::selection {\n background: transparent;\n}\n";
88
- styleInject(css_248z$7);
87
+ var css_248z$8 = ".Tabs {\n display: flex;\n font-size: 1rem;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n}\n\n.Tabs-item {\n &:disabled {\n cursor: not-allowed;\n }\n}\n\n.Tabs-item::-moz-selection {\n background: transparent;\n}\n.Tabs-item::selection {\n background: transparent;\n}\n";
88
+ styleInject(css_248z$8);
89
89
 
90
- function _array_like_to_array$8(arr, len) {
90
+ function _array_like_to_array$9(arr, len) {
91
91
  if (len == null || len > arr.length) len = arr.length;
92
92
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
93
93
  return arr2;
94
94
  }
95
- function _array_with_holes$8(arr) {
95
+ function _array_with_holes$9(arr) {
96
96
  if (Array.isArray(arr)) return arr;
97
97
  }
98
- function _iterable_to_array_limit$8(arr, i) {
98
+ function _iterable_to_array_limit$9(arr, i) {
99
99
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
100
100
  if (_i == null) return;
101
101
  var _arr = [];
@@ -119,19 +119,19 @@ function _iterable_to_array_limit$8(arr, i) {
119
119
  }
120
120
  return _arr;
121
121
  }
122
- function _non_iterable_rest$8() {
122
+ function _non_iterable_rest$9() {
123
123
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
124
124
  }
125
- function _sliced_to_array$8(arr, i) {
126
- return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
125
+ function _sliced_to_array$9(arr, i) {
126
+ return _array_with_holes$9(arr) || _iterable_to_array_limit$9(arr, i) || _unsupported_iterable_to_array$9(arr, i) || _non_iterable_rest$9();
127
127
  }
128
- function _unsupported_iterable_to_array$8(o, minLen) {
128
+ function _unsupported_iterable_to_array$9(o, minLen) {
129
129
  if (!o) return;
130
- if (typeof o === "string") return _array_like_to_array$8(o, minLen);
130
+ if (typeof o === "string") return _array_like_to_array$9(o, minLen);
131
131
  var n = Object.prototype.toString.call(o).slice(8, -1);
132
132
  if (n === "Object" && o.constructor) n = o.constructor.name;
133
133
  if (n === "Map" || n === "Set") return Array.from(n);
134
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
134
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$9(o, minLen);
135
135
  }
136
136
  function Tabs(param) {
137
137
  var items = param.items, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
@@ -139,7 +139,7 @@ function Tabs(param) {
139
139
  ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
140
140
  Spacing.none
141
141
  ] : _param_margin, onChange = param.onChange, selectedIndex = param.selectedIndex;
142
- var _useState = _sliced_to_array$8(useState(0), 2), selectedItem = _useState[0], setSelectedItem = _useState[1];
142
+ var _useState = _sliced_to_array$9(useState(0), 2), selectedItem = _useState[0], setSelectedItem = _useState[1];
143
143
  var handleChange = function(index) {
144
144
  setSelectedItem(index);
145
145
  onChange(index);
@@ -182,8 +182,8 @@ function Tabs(param) {
182
182
  Tabs.padding = Spacing;
183
183
  Tabs.margin = Spacing;
184
184
 
185
- var css_248z$6 = ".Button {\n font-size: var(--text-xs);\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: var(--spacing-ms);\n padding-left: var(--spacing-ms);\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-align: enter;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n &.xSmall {\n width: var(--spacing-ml);\n height: var(--spacing-ml);\n }\n &.small {\n font-size: var(--text-xs);\n min-width: 1rem;\n min-height: var(--spacing-sm);\n }\n &.large {\n border-radius: var(--radius-sm);\n min-width: 1rem;\n min-height: var(--spacing-xl);\n }\n}\n";
186
- styleInject(css_248z$6);
185
+ var css_248z$7 = ".Button {\n font-size: var(--text-xs);\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: var(--spacing-ms);\n padding-left: var(--spacing-ms);\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-align: enter;\n border: 0;\n appearance: none;\n user-select: none;\n -webkit-user-select: none;\n &.xSmall {\n width: var(--spacing-ml);\n height: var(--spacing-ml);\n }\n &.small {\n font-size: var(--text-xs);\n min-width: 1rem;\n min-height: var(--spacing-sm);\n }\n &.large {\n border-radius: var(--radius-sm);\n min-width: 1rem;\n min-height: var(--spacing-xl);\n }\n}\n";
186
+ styleInject(css_248z$7);
187
187
 
188
188
  var ButtonSize = /*#__PURE__*/ function(ButtonSize) {
189
189
  ButtonSize["xSmall"] = "xSmall";
@@ -197,12 +197,12 @@ var ButtonType = /*#__PURE__*/ function(ButtonType) {
197
197
  return ButtonType;
198
198
  }({});
199
199
 
200
- function _array_like_to_array$7(arr, len) {
200
+ function _array_like_to_array$8(arr, len) {
201
201
  if (len == null || len > arr.length) len = arr.length;
202
202
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
203
203
  return arr2;
204
204
  }
205
- function _array_with_holes$7(arr) {
205
+ function _array_with_holes$8(arr) {
206
206
  if (Array.isArray(arr)) return arr;
207
207
  }
208
208
  function _define_property$d(obj, key, value) {
@@ -218,7 +218,7 @@ function _define_property$d(obj, key, value) {
218
218
  }
219
219
  return obj;
220
220
  }
221
- function _iterable_to_array_limit$7(arr, i) {
221
+ function _iterable_to_array_limit$8(arr, i) {
222
222
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
223
223
  if (_i == null) return;
224
224
  var _arr = [];
@@ -242,7 +242,7 @@ function _iterable_to_array_limit$7(arr, i) {
242
242
  }
243
243
  return _arr;
244
244
  }
245
- function _non_iterable_rest$7() {
245
+ function _non_iterable_rest$8() {
246
246
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
247
247
  }
248
248
  function _object_spread$d(target) {
@@ -260,22 +260,24 @@ function _object_spread$d(target) {
260
260
  }
261
261
  return target;
262
262
  }
263
- function _sliced_to_array$7(arr, i) {
264
- return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
263
+ function _sliced_to_array$8(arr, i) {
264
+ return _array_with_holes$8(arr) || _iterable_to_array_limit$8(arr, i) || _unsupported_iterable_to_array$8(arr, i) || _non_iterable_rest$8();
265
265
  }
266
- function _unsupported_iterable_to_array$7(o, minLen) {
266
+ function _unsupported_iterable_to_array$8(o, minLen) {
267
267
  if (!o) return;
268
- if (typeof o === "string") return _array_like_to_array$7(o, minLen);
268
+ if (typeof o === "string") return _array_like_to_array$8(o, minLen);
269
269
  var n = Object.prototype.toString.call(o).slice(8, -1);
270
270
  if (n === "Object" && o.constructor) n = o.constructor.name;
271
271
  if (n === "Map" || n === "Set") return Array.from(n);
272
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
272
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$8(o, minLen);
273
273
  }
274
274
  function Button(param) {
275
275
  var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, onClick = param.onClick, children = param.children, _param_padding = param.padding, padding = _param_padding === void 0 ? [
276
276
  Spacing.small
277
- ] : _param_padding, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
278
- var _React_useState = _sliced_to_array$7(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
277
+ ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
278
+ Spacing.none
279
+ ] : _param_margin, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
280
+ var _React_useState = _sliced_to_array$8(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
279
281
  var buttonState = Juce.getToggleState(id);
280
282
  var isLocalhost = window.location.hostname === 'localhost';
281
283
  // Update the local state when the ID changes
@@ -326,7 +328,7 @@ function Button(param) {
326
328
  }, [
327
329
  isSelected
328
330
  ]);
329
- var _padding_, _padding_1, _padding_2, _ref;
331
+ var _padding_, _padding_1, _padding_2, _ref, _margin_, _margin_1, _margin_2, _ref1;
330
332
  return /*#__PURE__*/ React__default.createElement("button", {
331
333
  id: id,
332
334
  onMouseDown: handleMouseDown,
@@ -336,17 +338,22 @@ function Button(param) {
336
338
  paddingTop: "var(--p-".concat(padding[0], ")"),
337
339
  paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
338
340
  paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
339
- 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], ")")
341
+ 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], ")"),
342
+ marginTop: "var(--p-".concat(margin[0], ")"),
343
+ marginRight: "var(--p-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
344
+ marginBottom: "var(--p-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
345
+ marginLeft: "var(--p-".concat((_ref1 = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref1 !== void 0 ? _ref1 : margin[0], ")")
340
346
  }, style),
341
347
  className: classnames('Button', isSelected && 'selected', "".concat(size), className)
342
348
  }, size !== ButtonSize.xSmall && (text ? text : children));
343
349
  }
344
350
  Button.padding = Spacing;
351
+ Button.margin = Spacing;
345
352
  Button.type = ButtonType;
346
353
  Button.size = ButtonSize;
347
354
 
348
- var css_248z$5 = ".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";
349
- styleInject(css_248z$5);
355
+ var css_248z$6 = ".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";
356
+ styleInject(css_248z$6);
350
357
 
351
358
  function useObservable(param) {
352
359
  var onFire = param.onFire;
@@ -388,12 +395,12 @@ function useObservable(param) {
388
395
  };
389
396
  }
390
397
 
391
- function _array_like_to_array$6(arr, len) {
398
+ function _array_like_to_array$7(arr, len) {
392
399
  if (len == null || len > arr.length) len = arr.length;
393
400
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
394
401
  return arr2;
395
402
  }
396
- function _array_with_holes$6(arr) {
403
+ function _array_with_holes$7(arr) {
397
404
  if (Array.isArray(arr)) return arr;
398
405
  }
399
406
  function _define_property$c(obj, key, value) {
@@ -409,7 +416,7 @@ function _define_property$c(obj, key, value) {
409
416
  }
410
417
  return obj;
411
418
  }
412
- function _iterable_to_array_limit$6(arr, i) {
419
+ function _iterable_to_array_limit$7(arr, i) {
413
420
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
414
421
  if (_i == null) return;
415
422
  var _arr = [];
@@ -433,7 +440,7 @@ function _iterable_to_array_limit$6(arr, i) {
433
440
  }
434
441
  return _arr;
435
442
  }
436
- function _non_iterable_rest$6() {
443
+ function _non_iterable_rest$7() {
437
444
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
438
445
  }
439
446
  function _object_spread$c(target) {
@@ -470,16 +477,16 @@ function _object_spread_props$2(target, source) {
470
477
  }
471
478
  return target;
472
479
  }
473
- function _sliced_to_array$6(arr, i) {
474
- return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
480
+ function _sliced_to_array$7(arr, i) {
481
+ return _array_with_holes$7(arr) || _iterable_to_array_limit$7(arr, i) || _unsupported_iterable_to_array$7(arr, i) || _non_iterable_rest$7();
475
482
  }
476
- function _unsupported_iterable_to_array$6(o, minLen) {
483
+ function _unsupported_iterable_to_array$7(o, minLen) {
477
484
  if (!o) return;
478
- if (typeof o === "string") return _array_like_to_array$6(o, minLen);
485
+ if (typeof o === "string") return _array_like_to_array$7(o, minLen);
479
486
  var n = Object.prototype.toString.call(o).slice(8, -1);
480
487
  if (n === "Object" && o.constructor) n = o.constructor.name;
481
488
  if (n === "Map" || n === "Set") return Array.from(n);
482
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
489
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$7(o, minLen);
483
490
  }
484
491
  // Initial state
485
492
  var defaultGlobalStateValue = {
@@ -511,7 +518,7 @@ function useGlobalContext(selector) {
511
518
  // Context provider
512
519
  function GlobalContextProvider(param) {
513
520
  var children = param.children;
514
- var _useReducer = _sliced_to_array$6(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
521
+ var _useReducer = _sliced_to_array$7(useReducer(reducer, defaultGlobalStateValue), 2), state = _useReducer[0], dispatch = _useReducer[1];
515
522
  var setHighlightedItem = useCallback(function(highlightedItem) {
516
523
  dispatch({
517
524
  type: 'SET_HIGHLIGHTED_ITEM',
@@ -535,15 +542,15 @@ function GlobalContextProvider(param) {
535
542
  }, children);
536
543
  }
537
544
 
538
- function _array_like_to_array$5(arr, len) {
545
+ function _array_like_to_array$6(arr, len) {
539
546
  if (len == null || len > arr.length) len = arr.length;
540
547
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
541
548
  return arr2;
542
549
  }
543
- function _array_with_holes$5(arr) {
550
+ function _array_with_holes$6(arr) {
544
551
  if (Array.isArray(arr)) return arr;
545
552
  }
546
- function _iterable_to_array_limit$5(arr, i) {
553
+ function _iterable_to_array_limit$6(arr, i) {
547
554
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
548
555
  if (_i == null) return;
549
556
  var _arr = [];
@@ -567,25 +574,25 @@ function _iterable_to_array_limit$5(arr, i) {
567
574
  }
568
575
  return _arr;
569
576
  }
570
- function _non_iterable_rest$5() {
577
+ function _non_iterable_rest$6() {
571
578
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
572
579
  }
573
- function _sliced_to_array$5(arr, i) {
574
- return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
580
+ function _sliced_to_array$6(arr, i) {
581
+ return _array_with_holes$6(arr) || _iterable_to_array_limit$6(arr, i) || _unsupported_iterable_to_array$6(arr, i) || _non_iterable_rest$6();
575
582
  }
576
- function _unsupported_iterable_to_array$5(o, minLen) {
583
+ function _unsupported_iterable_to_array$6(o, minLen) {
577
584
  if (!o) return;
578
- if (typeof o === "string") return _array_like_to_array$5(o, minLen);
585
+ if (typeof o === "string") return _array_like_to_array$6(o, minLen);
579
586
  var n = Object.prototype.toString.call(o).slice(8, -1);
580
587
  if (n === "Object" && o.constructor) n = o.constructor.name;
581
588
  if (n === "Map" || n === "Set") return Array.from(n);
582
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
589
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$6(o, minLen);
583
590
  }
584
591
  var useCombobox = function(param) {
585
592
  var id = param.id, label = param.label, _param_items = param.items, items = _param_items === void 0 ? [] : _param_items, onChange = param.onChange, _param_displayValInHeader = param.displayValInHeader, displayValInHeader = _param_displayValInHeader === void 0 ? true : _param_displayValInHeader;
586
593
  var comboBoxState = Juce.getComboBoxState(id);
587
- var _useState = _sliced_to_array$5(useState(comboBoxState.getChoiceIndex()), 2), value = _useState[0], setValue = _useState[1];
588
- var _useState1 = _sliced_to_array$5(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
594
+ var _useState = _sliced_to_array$6(useState(comboBoxState.getChoiceIndex()), 2), value = _useState[0], setValue = _useState[1];
595
+ var _useState1 = _sliced_to_array$6(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
589
596
  var setHighlightedItem = useGlobalContext().setHighlightedItem;
590
597
  var choices = properties.choices.length ? properties.choices : items;
591
598
  var prevIndex = useRef(null);
@@ -709,15 +716,15 @@ var randomizeValue = function(min, max) {
709
716
  return Math.random() * (max - min) + min;
710
717
  };
711
718
 
712
- var css_248z$4 = ".TextInput {\n user-select: none;\n -webkit-user-select: none;\n}\n\n.TextInput::-moz-selection {\n background: transparent;\n}\n.TextInput::selection {\n background: transparent;\n}\n";
713
- styleInject(css_248z$4);
719
+ var css_248z$5 = ".TextInput {\n user-select: none;\n -webkit-user-select: none;\n}\n\n.TextInput::-moz-selection {\n background: transparent;\n}\n.TextInput::selection {\n background: transparent;\n}\n";
720
+ styleInject(css_248z$5);
714
721
 
715
- function _array_like_to_array$4(arr, len) {
722
+ function _array_like_to_array$5(arr, len) {
716
723
  if (len == null || len > arr.length) len = arr.length;
717
724
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
718
725
  return arr2;
719
726
  }
720
- function _array_with_holes$4(arr) {
727
+ function _array_with_holes$5(arr) {
721
728
  if (Array.isArray(arr)) return arr;
722
729
  }
723
730
  function _define_property$b(obj, key, value) {
@@ -733,7 +740,7 @@ function _define_property$b(obj, key, value) {
733
740
  }
734
741
  return obj;
735
742
  }
736
- function _iterable_to_array_limit$4(arr, i) {
743
+ function _iterable_to_array_limit$5(arr, i) {
737
744
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
738
745
  if (_i == null) return;
739
746
  var _arr = [];
@@ -757,7 +764,7 @@ function _iterable_to_array_limit$4(arr, i) {
757
764
  }
758
765
  return _arr;
759
766
  }
760
- function _non_iterable_rest$4() {
767
+ function _non_iterable_rest$5() {
761
768
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
762
769
  }
763
770
  function _object_spread$b(target) {
@@ -775,16 +782,16 @@ function _object_spread$b(target) {
775
782
  }
776
783
  return target;
777
784
  }
778
- function _sliced_to_array$4(arr, i) {
779
- return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
785
+ function _sliced_to_array$5(arr, i) {
786
+ return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
780
787
  }
781
- function _unsupported_iterable_to_array$4(o, minLen) {
788
+ function _unsupported_iterable_to_array$5(o, minLen) {
782
789
  if (!o) return;
783
- if (typeof o === "string") return _array_like_to_array$4(o, minLen);
790
+ if (typeof o === "string") return _array_like_to_array$5(o, minLen);
784
791
  var n = Object.prototype.toString.call(o).slice(8, -1);
785
792
  if (n === "Object" && o.constructor) n = o.constructor.name;
786
793
  if (n === "Map" || n === "Set") return Array.from(n);
787
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
794
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
788
795
  }
789
796
  // import { decimalToPercent, percentToDecimal } from '../../common/utils';
790
797
  // import debounce from 'lodash.debounce';
@@ -796,9 +803,9 @@ var InputTypes = /*#__PURE__*/ function(InputTypes) {
796
803
  function Input(param) {
797
804
  var onComplete = param.onComplete, value = param.value, min = param.min, max = param.max, _param_type = param.type, type = _param_type === void 0 ? "text" : _param_type, _param_minLength = param.minLength, minLength = _param_minLength === void 0 ? 1 : _param_minLength, _param_maxLength = param.maxLength, maxLength = _param_maxLength === void 0 ? 20 : _param_maxLength, fontSize = param.fontSize, style = param.style, className = param.className, id = param.id, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? '#999' : _param_textColor;
798
805
  var _inputRef_current;
799
- var _useState = _sliced_to_array$4(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
800
- var _useState1 = _sliced_to_array$4(useState(false), 2), hasError = _useState1[0], setHasError = _useState1[1];
801
- var _useState2 = _sliced_to_array$4(useState(false), 2), hasIncompleteValue = _useState2[0], setHasIncompleteValue = _useState2[1];
806
+ var _useState = _sliced_to_array$5(useState(value), 2), internalValue = _useState[0], setInternalValue = _useState[1];
807
+ var _useState1 = _sliced_to_array$5(useState(false), 2), hasError = _useState1[0], setHasError = _useState1[1];
808
+ var _useState2 = _sliced_to_array$5(useState(false), 2), hasIncompleteValue = _useState2[0], setHasIncompleteValue = _useState2[1];
802
809
  var valueRef = useRef(null);
803
810
  var timer, timeoutVal = 2000;
804
811
  // (inputValue === '' || /^-?\d+$/.test(inputValue)
@@ -1032,15 +1039,15 @@ var getPosition = function(param) {
1032
1039
  }
1033
1040
  };
1034
1041
 
1035
- function _array_like_to_array$3(arr, len) {
1042
+ function _array_like_to_array$4(arr, len) {
1036
1043
  if (len == null || len > arr.length) len = arr.length;
1037
1044
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
1038
1045
  return arr2;
1039
1046
  }
1040
- function _array_with_holes$3(arr) {
1047
+ function _array_with_holes$4(arr) {
1041
1048
  if (Array.isArray(arr)) return arr;
1042
1049
  }
1043
- function _iterable_to_array_limit$3(arr, i) {
1050
+ function _iterable_to_array_limit$4(arr, i) {
1044
1051
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
1045
1052
  if (_i == null) return;
1046
1053
  var _arr = [];
@@ -1064,19 +1071,19 @@ function _iterable_to_array_limit$3(arr, i) {
1064
1071
  }
1065
1072
  return _arr;
1066
1073
  }
1067
- function _non_iterable_rest$3() {
1074
+ function _non_iterable_rest$4() {
1068
1075
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
1069
1076
  }
1070
- function _sliced_to_array$3(arr, i) {
1071
- return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
1077
+ function _sliced_to_array$4(arr, i) {
1078
+ return _array_with_holes$4(arr) || _iterable_to_array_limit$4(arr, i) || _unsupported_iterable_to_array$4(arr, i) || _non_iterable_rest$4();
1072
1079
  }
1073
- function _unsupported_iterable_to_array$3(o, minLen) {
1080
+ function _unsupported_iterable_to_array$4(o, minLen) {
1074
1081
  if (!o) return;
1075
- if (typeof o === "string") return _array_like_to_array$3(o, minLen);
1082
+ if (typeof o === "string") return _array_like_to_array$4(o, minLen);
1076
1083
  var n = Object.prototype.toString.call(o).slice(8, -1);
1077
1084
  if (n === "Object" && o.constructor) n = o.constructor.name;
1078
1085
  if (n === "Map" || n === "Set") return Array.from(n);
1079
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
1086
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
1080
1087
  }
1081
1088
  // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
1082
1089
  // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
@@ -1099,9 +1106,9 @@ var useSlider = function(param) {
1099
1106
  * AudioProcessorParameter::getValue() (C++).
1100
1107
  */ // See https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L230C1-L238C6
1101
1108
  // NOTE: We can think of this as a percentage value, in 0 to 1 format
1102
- var _useState = _sliced_to_array$3(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
1103
- var _useState1 = _sliced_to_array$3(useState(0), 2), normalisedValue = _useState1[0], setNormalisedValue = _useState1[1];
1104
- var _useState2 = _sliced_to_array$3(useState(), 2), properties = _useState2[0], setProperties = _useState2[1];
1109
+ var _useState = _sliced_to_array$4(useState(0), 2), scaledValue = _useState[0], setScaledValue = _useState[1];
1110
+ var _useState1 = _sliced_to_array$4(useState(0), 2), normalisedValue = _useState1[0], setNormalisedValue = _useState1[1];
1111
+ var _useState2 = _sliced_to_array$4(useState(), 2), properties = _useState2[0], setProperties = _useState2[1];
1105
1112
  var scaledValueRef = useRef(null);
1106
1113
  var normalisedValueRef = useRef(null);
1107
1114
  // const randomValueSetCounter = useRef<number>(null);
@@ -1291,6 +1298,8 @@ var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
1291
1298
  LayoutTags["section"] = "section";
1292
1299
  LayoutTags["div"] = "div";
1293
1300
  LayoutTags["footer"] = "footer";
1301
+ LayoutTags["ul"] = "ul";
1302
+ LayoutTags["li"] = "li";
1294
1303
  return LayoutTags;
1295
1304
  }({});
1296
1305
 
@@ -1328,7 +1337,7 @@ var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
1328
1337
  return BoxDisplay;
1329
1338
  }(BoxDisplay || {});
1330
1339
  function Box(param) {
1331
- var className = param.className, style = param.style, children = param.children, flex = param.flex, key = param.key, _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 ? [
1340
+ 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 ? [
1332
1341
  Spacing.none,
1333
1342
  Spacing.none,
1334
1343
  Spacing.none,
@@ -1340,6 +1349,7 @@ function Box(param) {
1340
1349
  // id="globalValues"
1341
1350
  key: key,
1342
1351
  className: className,
1352
+ onClick: onClick,
1343
1353
  style: _object_spread$a({
1344
1354
  flexWrap: flexWrap,
1345
1355
  display: display,
@@ -1422,8 +1432,8 @@ function Label(param) {
1422
1432
  Label.padding = Spacing;
1423
1433
  Label.fontSize = FontSizes;
1424
1434
 
1425
- var css_248z$3 = ".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";
1426
- styleInject(css_248z$3);
1435
+ var css_248z$4 = ".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";
1436
+ styleInject(css_248z$4);
1427
1437
 
1428
1438
  function _define_property$8(obj, key, value) {
1429
1439
  if (key in obj) {
@@ -1754,15 +1764,15 @@ var Matrix = function(param) {
1754
1764
  }));
1755
1765
  };
1756
1766
 
1757
- function _array_like_to_array$2(arr, len) {
1767
+ function _array_like_to_array$3(arr, len) {
1758
1768
  if (len == null || len > arr.length) len = arr.length;
1759
1769
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
1760
1770
  return arr2;
1761
1771
  }
1762
- function _array_with_holes$2(arr) {
1772
+ function _array_with_holes$3(arr) {
1763
1773
  if (Array.isArray(arr)) return arr;
1764
1774
  }
1765
- function _iterable_to_array_limit$2(arr, i) {
1775
+ function _iterable_to_array_limit$3(arr, i) {
1766
1776
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
1767
1777
  if (_i == null) return;
1768
1778
  var _arr = [];
@@ -1786,26 +1796,26 @@ function _iterable_to_array_limit$2(arr, i) {
1786
1796
  }
1787
1797
  return _arr;
1788
1798
  }
1789
- function _non_iterable_rest$2() {
1799
+ function _non_iterable_rest$3() {
1790
1800
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
1791
1801
  }
1792
- function _sliced_to_array$2(arr, i) {
1793
- return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
1802
+ function _sliced_to_array$3(arr, i) {
1803
+ return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
1794
1804
  }
1795
- function _unsupported_iterable_to_array$2(o, minLen) {
1805
+ function _unsupported_iterable_to_array$3(o, minLen) {
1796
1806
  if (!o) return;
1797
- if (typeof o === "string") return _array_like_to_array$2(o, minLen);
1807
+ if (typeof o === "string") return _array_like_to_array$3(o, minLen);
1798
1808
  var n = Object.prototype.toString.call(o).slice(8, -1);
1799
1809
  if (n === "Object" && o.constructor) n = o.constructor.name;
1800
1810
  if (n === "Map" || n === "Set") return Array.from(n);
1801
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
1811
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
1802
1812
  }
1803
1813
  // 20.0f, 15000.0f, 0.1f, 0.7f),800.0f
1804
1814
  // ValueType rangeStart, ValueType rangeEnd, ValueType intervalValue, ValueType skewFactor, bool useSymmetricSkew=false)
1805
1815
  var useIndicator = function(param) {
1806
1816
  var id = param.id;
1807
1817
  var isLocalhost = window.location.hostname === 'localhost';
1808
- var _useState = _sliced_to_array$2(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
1818
+ var _useState = _sliced_to_array$3(useState(0), 2), isActive = _useState[0], setIsActive = _useState[1];
1809
1819
  // Set the initial state
1810
1820
  useEffect(function() {
1811
1821
  if (!isLocalhost) {
@@ -1889,8 +1899,8 @@ function IndicatorLight(param) {
1889
1899
  }) : null);
1890
1900
  }
1891
1901
 
1892
- var css_248z$2 = ".IconButton {\n height: 28px;\n}\n\n.IconButton:hover:not(:disabled) {\n filter: brightness(80%);\n}\n";
1893
- styleInject(css_248z$2);
1902
+ var css_248z$3 = ".IconButton:hover:not(:disabled) {\n filter: brightness(80%);\n}\n\nsvg {\n height: 100%;\n width: 100%;\n}\n";
1903
+ styleInject(css_248z$3);
1894
1904
 
1895
1905
  function _define_property$4(obj, key, value) {
1896
1906
  if (key in obj) {
@@ -1921,17 +1931,19 @@ function _object_spread$4(target) {
1921
1931
  return target;
1922
1932
  }
1923
1933
  var ButtonIcon = /*#__PURE__*/ function(ButtonIcon) {
1924
- ButtonIcon["undo"] = "UndoIcon";
1925
- ButtonIcon["redo"] = "RedoIcon";
1926
- ButtonIcon["random"] = "RandomIcon";
1934
+ ButtonIcon["undo"] = "Undo";
1935
+ ButtonIcon["redo"] = "Redo";
1936
+ ButtonIcon["random"] = "Random";
1937
+ ButtonIcon["favorite"] = "Favorite";
1938
+ ButtonIcon["up"] = "Up";
1939
+ ButtonIcon["down"] = "Down";
1940
+ ButtonIcon["save"] = "Save";
1927
1941
  return ButtonIcon;
1928
1942
  }(ButtonIcon || {});
1929
- var UndoIcon = function(param) {
1943
+ var Undo = function(param) {
1930
1944
  var color = param.color;
1931
1945
  return /*#__PURE__*/ React__default.createElement("svg", {
1932
- width: "24px",
1933
- height: "24px",
1934
- viewBox: "0 0 24 24",
1946
+ viewBox: "0 0 25 25",
1935
1947
  "stroke-width": "1.5",
1936
1948
  fill: "none",
1937
1949
  xmlns: "http://www.w3.org/2000/svg",
@@ -1950,12 +1962,10 @@ var UndoIcon = function(param) {
1950
1962
  "stroke-linejoin": "round"
1951
1963
  }));
1952
1964
  };
1953
- var RedoIcon = function(param) {
1965
+ var Redo = function(param) {
1954
1966
  var color = param.color;
1955
1967
  return /*#__PURE__*/ React__default.createElement("svg", {
1956
- width: "24px",
1957
- height: "24px",
1958
- viewBox: "0 0 24 24",
1968
+ viewBox: "0 0 25 25",
1959
1969
  "stroke-width": "1.5",
1960
1970
  fill: "none",
1961
1971
  xmlns: "http://www.w3.org/2000/svg",
@@ -1974,12 +1984,77 @@ var RedoIcon = function(param) {
1974
1984
  "stroke-linejoin": "round"
1975
1985
  }));
1976
1986
  };
1977
- var RandomIcon = function(param) {
1987
+ var Favorite = function(param) {
1988
+ var color = param.color;
1989
+ return /*#__PURE__*/ React__default.createElement("svg", {
1990
+ "stroke-width": "1.5",
1991
+ viewBox: "-7 -7 40 40",
1992
+ fill: "none",
1993
+ xmlns: "http://www.w3.org/2000/svg",
1994
+ color: color
1995
+ }, /*#__PURE__*/ React__default.createElement("path", {
1996
+ d: "M22 8.86222C22 10.4087 21.4062 11.8941 20.3458 12.9929C17.9049 15.523 15.5374 18.1613 13.0053 20.5997C12.4249 21.1505 11.5042 21.1304 10.9488 20.5547L3.65376 12.9929C1.44875 10.7072 1.44875 7.01723 3.65376 4.73157C5.88044 2.42345 9.50794 2.42345 11.7346 4.73157L11.9998 5.00642L12.2648 4.73173C13.3324 3.6245 14.7864 3 16.3053 3C17.8242 3 19.2781 3.62444 20.3458 4.73157C21.4063 5.83045 22 7.31577 22 8.86222Z",
1997
+ stroke: color,
1998
+ "stroke-width": "1.5",
1999
+ "stroke-linejoin": "round"
2000
+ }));
2001
+ };
2002
+ var Up = function(param) {
2003
+ var color = param.color;
2004
+ return /*#__PURE__*/ React__default.createElement("svg", {
2005
+ viewBox: "0 0 25 25",
2006
+ "stroke-width": "1.5",
2007
+ fill: "none",
2008
+ xmlns: "http://www.w3.org/2000/svg",
2009
+ color: color
2010
+ }, /*#__PURE__*/ React__default.createElement("path", {
2011
+ "fill-rule": "evenodd",
2012
+ "clip-rule": "evenodd",
2013
+ d: "M5.30711 15.287C5.4232 15.5673 5.69668 15.75 6.00002 15.75H18C18.3034 15.75 18.5768 15.5673 18.6929 15.287C18.809 15.0068 18.7449 14.6842 18.5304 14.4697L12.5304 8.46967C12.2375 8.17678 11.7626 8.17678 11.4697 8.46967L5.46969 14.4697C5.25519 14.6842 5.19103 15.0068 5.30711 15.287Z",
2014
+ fill: color
2015
+ }));
2016
+ };
2017
+ var Down = function(param) {
2018
+ var color = param.color;
2019
+ return /*#__PURE__*/ React__default.createElement("svg", {
2020
+ viewBox: "0 0 25 25",
2021
+ "stroke-width": "1.5",
2022
+ fill: "none",
2023
+ xmlns: "http://www.w3.org/2000/svg",
2024
+ color: color
2025
+ }, /*#__PURE__*/ React__default.createElement("path", {
2026
+ "fill-rule": "evenodd",
2027
+ "clip-rule": "evenodd",
2028
+ d: "M5.30711 8.71299C5.4232 8.43273 5.69668 8.25 6.00002 8.25H18C18.3034 8.25 18.5768 8.43273 18.6929 8.71299C18.809 8.99324 18.7449 9.31583 18.5304 9.53033L12.5304 15.5303C12.2375 15.8232 11.7626 15.8232 11.4697 15.5303L5.46969 9.53033C5.25519 9.31583 5.19103 8.99324 5.30711 8.71299Z",
2029
+ fill: color
2030
+ }));
2031
+ };
2032
+ var Save = function(param) {
2033
+ var color = param.color;
2034
+ return /*#__PURE__*/ React__default.createElement("svg", {
2035
+ "stroke-width": "1.5",
2036
+ viewBox: "-7 -7 40 40",
2037
+ fill: "none",
2038
+ xmlns: "http://www.w3.org/2000/svg",
2039
+ color: color
2040
+ }, /*#__PURE__*/ React__default.createElement("path", {
2041
+ d: "M3 19V5C3 3.89543 3.89543 3 5 3H16.1716C16.702 3 17.2107 3.21071 17.5858 3.58579L20.4142 6.41421C20.7893 6.78929 21 7.29799 21 7.82843V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19Z",
2042
+ stroke: color,
2043
+ "stroke-width": "1.5"
2044
+ }), /*#__PURE__*/ React__default.createElement("path", {
2045
+ d: "M8.6 9H15.4C15.7314 9 16 8.73137 16 8.4V3.6C16 3.26863 15.7314 3 15.4 3H8.6C8.26863 3 8 3.26863 8 3.6V8.4C8 8.73137 8.26863 9 8.6 9Z",
2046
+ stroke: color,
2047
+ "stroke-width": "1.5"
2048
+ }), /*#__PURE__*/ React__default.createElement("path", {
2049
+ d: "M6 13.6V21H18V13.6C18 13.2686 17.7314 13 17.4 13H6.6C6.26863 13 6 13.2686 6 13.6Z",
2050
+ stroke: color,
2051
+ "stroke-width": "1.5"
2052
+ }));
2053
+ };
2054
+ var Random = function(param) {
1978
2055
  var color = param.color;
1979
2056
  return /*#__PURE__*/ React__default.createElement("svg", {
1980
- width: "24px",
1981
- height: "24px",
1982
- viewBox: "0 0 24 24",
2057
+ viewBox: "0 0 25 25",
1983
2058
  "stroke-width": "1.5",
1984
2059
  fill: "none",
1985
2060
  xmlns: "http://www.w3.org/2000/svg",
@@ -2034,29 +2109,45 @@ var RandomIcon = function(param) {
2034
2109
  }));
2035
2110
  };
2036
2111
  var icons = {
2037
- UndoIcon: UndoIcon,
2038
- RedoIcon: RedoIcon,
2039
- RandomIcon: RandomIcon
2112
+ Undo: Undo,
2113
+ Redo: Redo,
2114
+ Random: Random,
2115
+ Favorite: Favorite,
2116
+ Up: Up,
2117
+ Down: Down,
2118
+ Save: Save
2040
2119
  };
2120
+ // const getViewBoxWidth = (width: string) => {
2121
+ // const numericWidth = width.match(/\d+/)?.[0];
2122
+ // return numericWidth !== undefined ? parseInt(numericWidth) : 24;
2123
+ // };
2041
2124
  function IconButton(param) {
2042
- var id = param.id, icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'var(--bg-page)' : _param_backgroundColor, className = param.className, style = param.style;
2125
+ var id = param.id, icon = param.icon, onClick = param.onClick, _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-text)' : _param_color, _param_backgroundColor = param.backgroundColor, backgroundColor = _param_backgroundColor === void 0 ? 'var(--bg-page)' : _param_backgroundColor, _param_padding = param.padding, padding = _param_padding === void 0 ? [
2126
+ Button.padding.none
2127
+ ] : _param_padding, _param_margin = param.margin, margin = _param_margin === void 0 ? [
2128
+ Button.margin.none
2129
+ ] : _param_margin, _param_width = param.width, width = _param_width === void 0 ? '24px' : _param_width, _param_height = param.height, height = _param_height === void 0 ? '24px' : _param_height, className = param.className, style = param.style;
2043
2130
  var Icon = icons[icon];
2044
2131
  return /*#__PURE__*/ React__default.createElement(Button, {
2045
2132
  id: id,
2046
2133
  className: "IconButton ".concat(className),
2047
2134
  onClick: onClick,
2048
- padding: [
2049
- Button.padding.medium
2050
- ],
2135
+ padding: padding,
2136
+ margin: margin,
2051
2137
  disabled: disabled,
2052
2138
  style: _object_spread$4({
2053
- backgroundColor: backgroundColor
2139
+ backgroundColor: backgroundColor,
2140
+ width: width,
2141
+ height: height
2054
2142
  }, style)
2055
2143
  }, /*#__PURE__*/ React__default.createElement(Icon, {
2144
+ width: width,
2056
2145
  color: disabled ? 'var(--color-gray-400)' : color
2057
2146
  }));
2058
2147
  }
2059
2148
  IconButton.icon = ButtonIcon;
2149
+ IconButton.padding = Spacing;
2150
+ IconButton.margin = Spacing;
2060
2151
 
2061
2152
  function _define_property$3(obj, key, value) {
2062
2153
  if (key in obj) {
@@ -2101,9 +2192,9 @@ function KeyValueDisplayScreen(param) {
2101
2192
  }, data ? /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Box, {
2102
2193
  justifyContent: Box.justifyContent.flexStart,
2103
2194
  padding: [
2104
- Box.padding.xSmall,
2195
+ Box.padding.small,
2105
2196
  Box.padding.medium,
2106
- Box.padding.none,
2197
+ Box.padding.xSmall,
2107
2198
  Box.padding.medium
2108
2199
  ],
2109
2200
  className: classnames('KeyValueDisplayScreen', 'uppercase', 'bg-popover', 'rounded-sm'),
@@ -2113,20 +2204,14 @@ function KeyValueDisplayScreen(param) {
2113
2204
  color: "var(--color-text)"
2114
2205
  }
2115
2206
  }, /*#__PURE__*/ React__default.createElement(Label, {
2116
- className: 'KeyValueDisplayScreen-Item',
2117
- padding: [
2118
- Label.padding.xSmall,
2119
- Label.padding.mediumLarge,
2120
- Label.padding.none,
2121
- Label.padding.medium
2122
- ]
2207
+ className: 'KeyValueDisplayScreen-Item'
2123
2208
  }, "".concat(data === null || data === void 0 ? void 0 : data.key, ":")), /*#__PURE__*/ React__default.createElement(Label, {
2124
- padding: [
2125
- Label.padding.xSmall,
2126
- Label.padding.mediumLarge,
2127
- Label.padding.none,
2128
- Label.padding.none
2129
- ],
2209
+ // padding={[
2210
+ // Label.padding.xSmall,
2211
+ // Label.padding.mediumLarge,
2212
+ // Label.padding.none,
2213
+ // Label.padding.none,
2214
+ // ]}
2130
2215
  className: 'KeyValueDisplayScreen-Item'
2131
2216
  }, data === null || data === void 0 ? void 0 : data.value))) : /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Label, null, "Antimatter Audio")), /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Label, null))));
2132
2217
  }
@@ -2198,15 +2283,15 @@ function LinePlot(param) {
2198
2283
  })));
2199
2284
  }
2200
2285
 
2201
- var css_248z$1 = ".Oscilloscope {\n background: #0EAC8B;\n box-shadow: inset 0 0 20px #086350;\n height: 200px;\n };";
2202
- styleInject(css_248z$1);
2286
+ var css_248z$2 = ".Oscilloscope {\n background: #0EAC8B;\n box-shadow: inset 0 0 20px #086350;\n height: 200px;\n };";
2287
+ styleInject(css_248z$2);
2203
2288
 
2204
- function _array_like_to_array$1(arr, len) {
2289
+ function _array_like_to_array$2(arr, len) {
2205
2290
  if (len == null || len > arr.length) len = arr.length;
2206
2291
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
2207
2292
  return arr2;
2208
2293
  }
2209
- function _array_with_holes$1(arr) {
2294
+ function _array_with_holes$2(arr) {
2210
2295
  if (Array.isArray(arr)) return arr;
2211
2296
  }
2212
2297
  function _define_property$2(obj, key, value) {
@@ -2222,7 +2307,7 @@ function _define_property$2(obj, key, value) {
2222
2307
  }
2223
2308
  return obj;
2224
2309
  }
2225
- function _iterable_to_array_limit$1(arr, i) {
2310
+ function _iterable_to_array_limit$2(arr, i) {
2226
2311
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
2227
2312
  if (_i == null) return;
2228
2313
  var _arr = [];
@@ -2246,7 +2331,7 @@ function _iterable_to_array_limit$1(arr, i) {
2246
2331
  }
2247
2332
  return _arr;
2248
2333
  }
2249
- function _non_iterable_rest$1() {
2334
+ function _non_iterable_rest$2() {
2250
2335
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
2251
2336
  }
2252
2337
  function _object_spread$2(target) {
@@ -2264,20 +2349,20 @@ function _object_spread$2(target) {
2264
2349
  }
2265
2350
  return target;
2266
2351
  }
2267
- function _sliced_to_array$1(arr, i) {
2268
- return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
2352
+ function _sliced_to_array$2(arr, i) {
2353
+ return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
2269
2354
  }
2270
- function _unsupported_iterable_to_array$1(o, minLen) {
2355
+ function _unsupported_iterable_to_array$2(o, minLen) {
2271
2356
  if (!o) return;
2272
- if (typeof o === "string") return _array_like_to_array$1(o, minLen);
2357
+ if (typeof o === "string") return _array_like_to_array$2(o, minLen);
2273
2358
  var n = Object.prototype.toString.call(o).slice(8, -1);
2274
2359
  if (n === "Object" && o.constructor) n = o.constructor.name;
2275
2360
  if (n === "Map" || n === "Set") return Array.from(n);
2276
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
2361
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
2277
2362
  }
2278
2363
  function Oscilloscope(param) {
2279
2364
  var width = param.width, height = param.height, className = param.className, style = param.style, id = param.id;
2280
- var _useState = _sliced_to_array$1(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
2365
+ var _useState = _sliced_to_array$2(useState([]), 2), viewData = _useState[0], setViewData = _useState[1];
2281
2366
  useEffect(function() {
2282
2367
  //@ts-expect-error
2283
2368
  var removalToken = window.__JUCE__.backend.addEventListener('oscData', function() {
@@ -2306,18 +2391,21 @@ function Oscilloscope(param) {
2306
2391
  }));
2307
2392
  }
2308
2393
 
2309
- var css_248z = "@import '../../styles.css';\n.ModuleHeader {\n background-color: var(--bg-section);\n font-weight: normal;\n}\n\n.ModuleHeader-Name {\n font-size: var(--text-lg);\n letter-spacing: 4px;\n text-transform: uppercase;\n font-weight: lighter;\n height: 1.75rem;\n color: var(--color-brand);\n}\n\n.ModuleHeader-Subheading {\n font-size: var(--text-xs);\n font-weight: lighter;\n letter-spacing: 2.25px;\n text-transform: uppercase;\n color: var(--color-brand);\n}\n";
2394
+ var css_248z$1 = "@import '../../styles.css';\n.ModuleHeader {\n background-color: var(--bg-section);\n font-weight: normal;\n}\n\n.ModuleHeader-Name {\n font-size: var(--text-lg);\n letter-spacing: 4px;\n text-transform: uppercase;\n font-weight: lighter;\n height: 1.75rem;\n color: var(--color-brand);\n}\n\n.ModuleHeader-Subheading {\n font-size: var(--text-xs);\n font-weight: lighter;\n letter-spacing: 2.25px;\n text-transform: uppercase;\n color: var(--color-brand);\n}\n";
2395
+ styleInject(css_248z$1);
2396
+
2397
+ var css_248z = ".PresetManagerContainer {\n width: 100%;\n height: 100%;\n background-color: var(--bg-page);\n color: var(--color-text);\n}\n\n.PresetManagerButton {\n width: 100%;\n height: 100%;\n max-width: 300px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n cursor: pointer;\n font-family: var(--font-leagueSpartan);\n}\n.PresetManagerButtonLabel {\n cursor: pointer;\n text-align: center;\n font-family: var(--font-leagueSpartan);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 225px;\n display: inline-block;\n vertical-align: middle;\n height: 1rem;\n line-height: 1.25;\n /* position: relative; */\n &:hover,\n &:active {\n background: var(--color-gray-900);\n }\n /* &.isDirty {\n &::after {\n content: '*';\n position: absolute;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n }\n } */\n}\n\n.PresetManagerButtonLabelContainer.isDirty::after {\n content: '*';\n position: absolute;\n height: 1rem;\n width: 1rem;\n right: -0.75rem;\n top: 0;\n}\n\n.PresetManagerButtonLabelOuterContainer {\n position: relative;\n width: auto;\n}\n\n[data-headlessui-state='open active'] .PresetManagerButtonLabel {\n background: var(--color-gray-900);\n}\n.PresetManagerPanel {\n position: absolute;\n font-family: var(--font-leagueSpartan);\n right: 0px;\n left: 0px;\n width: 100%;\n max-width: 400px !important;\n color: var(--color-text);\n background: var(--bg-popover);\n}\n\n.PresetManagerPanel:focus,\n.PresetManagerPanel:focus-visible {\n outline: none;\n}\n\n/* .PresetManagerCategoryItem {\n font-family: var(--font-leagueSpartan);\n cursor: pointer;\n background: var(--color-gray-800);\n text-transform: uppercase;\n &:hover,\n &.isSelected {\n background: var(--bg-selected);\n }\n} */\n\n.PresetManagerListItem {\n cursor: pointer;\n background: var(--color-gray-800);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 100%;\n}\n\n.PresetManagerListItem:hover,\n.PresetManagerListItem.isSelected {\n background: var(--bg-selected);\n}\n\n.PresetManagerListItemText {\n display: inline-block;\n vertical-align: middle;\n height: 1.5rem;\n line-height: 1.75;\n}\n";
2310
2398
  styleInject(css_248z);
2311
2399
 
2312
- function _array_like_to_array(arr, len) {
2400
+ function _array_like_to_array$1(arr, len) {
2313
2401
  if (len == null || len > arr.length) len = arr.length;
2314
2402
  for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
2315
2403
  return arr2;
2316
2404
  }
2317
- function _array_with_holes(arr) {
2405
+ function _array_with_holes$1(arr) {
2318
2406
  if (Array.isArray(arr)) return arr;
2319
2407
  }
2320
- function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
2408
+ function asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, key, arg) {
2321
2409
  try {
2322
2410
  var info = gen[key](arg);
2323
2411
  var value = info.value;
@@ -2331,35 +2419,22 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
2331
2419
  Promise.resolve(value).then(_next, _throw);
2332
2420
  }
2333
2421
  }
2334
- function _async_to_generator(fn) {
2422
+ function _async_to_generator$1(fn) {
2335
2423
  return function() {
2336
2424
  var self = this, args = arguments;
2337
2425
  return new Promise(function(resolve, reject) {
2338
2426
  var gen = fn.apply(self, args);
2339
2427
  function _next(value) {
2340
- asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
2428
+ asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "next", value);
2341
2429
  }
2342
2430
  function _throw(err) {
2343
- asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
2431
+ asyncGeneratorStep$1(gen, resolve, reject, _next, _throw, "throw", err);
2344
2432
  }
2345
2433
  _next(undefined);
2346
2434
  });
2347
2435
  };
2348
2436
  }
2349
- function _define_property$1(obj, key, value) {
2350
- if (key in obj) {
2351
- Object.defineProperty(obj, key, {
2352
- value: value,
2353
- enumerable: true,
2354
- configurable: true,
2355
- writable: true
2356
- });
2357
- } else {
2358
- obj[key] = value;
2359
- }
2360
- return obj;
2361
- }
2362
- function _iterable_to_array_limit(arr, i) {
2437
+ function _iterable_to_array_limit$1(arr, i) {
2363
2438
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
2364
2439
  if (_i == null) return;
2365
2440
  var _arr = [];
@@ -2383,26 +2458,493 @@ function _iterable_to_array_limit(arr, i) {
2383
2458
  }
2384
2459
  return _arr;
2385
2460
  }
2386
- function _non_iterable_rest() {
2461
+ function _non_iterable_rest$1() {
2387
2462
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
2388
2463
  }
2389
- function _object_spread$1(target) {
2390
- for(var i = 1; i < arguments.length; i++){
2391
- var source = arguments[i] != null ? arguments[i] : {};
2392
- var ownKeys = Object.keys(source);
2393
- if (typeof Object.getOwnPropertySymbols === "function") {
2394
- ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
2395
- return Object.getOwnPropertyDescriptor(source, sym).enumerable;
2396
- }));
2397
- }
2398
- ownKeys.forEach(function(key) {
2399
- _define_property$1(target, key, source[key]);
2400
- });
2401
- }
2402
- return target;
2403
- }
2404
- function _sliced_to_array(arr, i) {
2405
- return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
2464
+ function _object_destructuring_empty(o) {
2465
+ if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
2466
+ return o;
2467
+ }
2468
+ function _sliced_to_array$1(arr, i) {
2469
+ return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
2470
+ }
2471
+ function _unsupported_iterable_to_array$1(o, minLen) {
2472
+ if (!o) return;
2473
+ if (typeof o === "string") return _array_like_to_array$1(o, minLen);
2474
+ var n = Object.prototype.toString.call(o).slice(8, -1);
2475
+ if (n === "Object" && o.constructor) n = o.constructor.name;
2476
+ if (n === "Map" || n === "Set") return Array.from(n);
2477
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
2478
+ }
2479
+ function _ts_generator$1(thisArg, body) {
2480
+ var f, y, t, g, _ = {
2481
+ label: 0,
2482
+ sent: function() {
2483
+ if (t[0] & 1) throw t[1];
2484
+ return t[1];
2485
+ },
2486
+ trys: [],
2487
+ ops: []
2488
+ };
2489
+ return g = {
2490
+ next: verb(0),
2491
+ "throw": verb(1),
2492
+ "return": verb(2)
2493
+ }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
2494
+ return this;
2495
+ }), g;
2496
+ function verb(n) {
2497
+ return function(v) {
2498
+ return step([
2499
+ n,
2500
+ v
2501
+ ]);
2502
+ };
2503
+ }
2504
+ function step(op) {
2505
+ if (f) throw new TypeError("Generator is already executing.");
2506
+ while(_)try {
2507
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
2508
+ if (y = 0, t) op = [
2509
+ op[0] & 2,
2510
+ t.value
2511
+ ];
2512
+ switch(op[0]){
2513
+ case 0:
2514
+ case 1:
2515
+ t = op;
2516
+ break;
2517
+ case 4:
2518
+ _.label++;
2519
+ return {
2520
+ value: op[1],
2521
+ done: false
2522
+ };
2523
+ case 5:
2524
+ _.label++;
2525
+ y = op[1];
2526
+ op = [
2527
+ 0
2528
+ ];
2529
+ continue;
2530
+ case 7:
2531
+ op = _.ops.pop();
2532
+ _.trys.pop();
2533
+ continue;
2534
+ default:
2535
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
2536
+ _ = 0;
2537
+ continue;
2538
+ }
2539
+ if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
2540
+ _.label = op[1];
2541
+ break;
2542
+ }
2543
+ if (op[0] === 6 && _.label < t[1]) {
2544
+ _.label = t[1];
2545
+ t = op;
2546
+ break;
2547
+ }
2548
+ if (t && _.label < t[2]) {
2549
+ _.label = t[2];
2550
+ _.ops.push(op);
2551
+ break;
2552
+ }
2553
+ if (t[2]) _.ops.pop();
2554
+ _.trys.pop();
2555
+ continue;
2556
+ }
2557
+ op = body.call(thisArg, _);
2558
+ } catch (e) {
2559
+ op = [
2560
+ 6,
2561
+ e
2562
+ ];
2563
+ y = 0;
2564
+ } finally{
2565
+ f = t = 0;
2566
+ }
2567
+ if (op[0] & 5) throw op[1];
2568
+ return {
2569
+ value: op[0] ? op[1] : void 0,
2570
+ done: true
2571
+ };
2572
+ }
2573
+ }
2574
+ function PresetManager(param) {
2575
+ _object_destructuring_empty(param);
2576
+ var _useState = _sliced_to_array$1(useState([]), 2), presetList = _useState[0], setPresetList = _useState[1];
2577
+ var _useState1 = _sliced_to_array$1(useState(false), 2); _useState1[0]; var setIsSaving = _useState1[1];
2578
+ var savePresetFunc = Juce.getNativeFunction('savePreset');
2579
+ var loadPresetFunc = Juce.getNativeFunction('loadPreset');
2580
+ var getAllPresetsFunc = Juce.getNativeFunction('getAllPresets');
2581
+ var isDirtyFunc = Juce.getNativeFunction('canUndo');
2582
+ var _useState2 = _sliced_to_array$1(useState(), 2), selectedPreset = _useState2[0], setSelectedPreset = _useState2[1];
2583
+ var isLocalhost = window.location.hostname === 'localhost';
2584
+ var _useState3 = _sliced_to_array$1(useState(false), 2), isDirty = _useState3[0], setIsDirty = _useState3[1];
2585
+ useEffect(function() {
2586
+ if (!isLocalhost) {
2587
+ var isDirtyListenerId = //@ts-expect-error
2588
+ window.__JUCE__.backend.addEventListener('updateUndoButton', function(event) {
2589
+ setIsDirty(event);
2590
+ });
2591
+ return function cleanup() {
2592
+ //@ts-expect-error
2593
+ window.__JUCE__.backend.removeEventListener(isDirtyListenerId);
2594
+ };
2595
+ } else {
2596
+ return;
2597
+ }
2598
+ }, [
2599
+ window
2600
+ ]);
2601
+ useEffect(function() {
2602
+ var getUndoRedoState = /*#__PURE__*/ function() {
2603
+ var _ref = _async_to_generator$1(function() {
2604
+ var isDirtyState, error;
2605
+ return _ts_generator$1(this, function(_state) {
2606
+ switch(_state.label){
2607
+ case 0:
2608
+ _state.trys.push([
2609
+ 0,
2610
+ 2,
2611
+ ,
2612
+ 3
2613
+ ]);
2614
+ return [
2615
+ 4,
2616
+ isDirtyFunc()
2617
+ ];
2618
+ case 1:
2619
+ isDirtyState = _state.sent();
2620
+ setIsDirty(isDirtyState);
2621
+ return [
2622
+ 3,
2623
+ 3
2624
+ ];
2625
+ case 2:
2626
+ error = _state.sent();
2627
+ console.log(error);
2628
+ return [
2629
+ 3,
2630
+ 3
2631
+ ];
2632
+ case 3:
2633
+ return [
2634
+ 2
2635
+ ];
2636
+ }
2637
+ });
2638
+ });
2639
+ return function getUndoRedoState() {
2640
+ return _ref.apply(this, arguments);
2641
+ };
2642
+ }();
2643
+ getUndoRedoState();
2644
+ });
2645
+ var loadAllPresets = /*#__PURE__*/ function() {
2646
+ var _ref = _async_to_generator$1(function(selectedPreset) {
2647
+ var allPresets, error;
2648
+ return _ts_generator$1(this, function(_state) {
2649
+ switch(_state.label){
2650
+ case 0:
2651
+ _state.trys.push([
2652
+ 0,
2653
+ 2,
2654
+ ,
2655
+ 3
2656
+ ]);
2657
+ return [
2658
+ 4,
2659
+ getAllPresetsFunc()
2660
+ ];
2661
+ case 1:
2662
+ allPresets = _state.sent();
2663
+ setPresetList(allPresets);
2664
+ loadPresetFunc(selectedPreset !== null && selectedPreset !== void 0 ? selectedPreset : allPresets[0]);
2665
+ setSelectedPreset(selectedPreset !== null && selectedPreset !== void 0 ? selectedPreset : allPresets[0]);
2666
+ return [
2667
+ 3,
2668
+ 3
2669
+ ];
2670
+ case 2:
2671
+ error = _state.sent();
2672
+ console.log(error);
2673
+ return [
2674
+ 3,
2675
+ 3
2676
+ ];
2677
+ case 3:
2678
+ return [
2679
+ 2
2680
+ ];
2681
+ }
2682
+ });
2683
+ });
2684
+ return function loadAllPresets(selectedPreset) {
2685
+ return _ref.apply(this, arguments);
2686
+ };
2687
+ }();
2688
+ var loadPreset = function(value) {
2689
+ setSelectedPreset(value);
2690
+ loadPresetFunc(value);
2691
+ };
2692
+ var loadNextPreset = function(currentValue) {
2693
+ var nextIndex = presetList.indexOf(currentValue) + 1;
2694
+ if (nextIndex < presetList.length) {
2695
+ loadPreset(presetList[nextIndex]);
2696
+ } else {
2697
+ loadPreset(presetList[0]);
2698
+ }
2699
+ };
2700
+ var loadPreviousPreset = function(currentValue) {
2701
+ var prevIndex = presetList.indexOf(currentValue) - 1;
2702
+ if (prevIndex >= 0) {
2703
+ loadPreset(presetList[prevIndex]);
2704
+ } else {
2705
+ loadPreset(presetList[presetList.length - 1]);
2706
+ }
2707
+ };
2708
+ var savePreset = function(name) {
2709
+ var callSavePreset = /*#__PURE__*/ function() {
2710
+ var _ref = _async_to_generator$1(function(name) {
2711
+ var preset, error;
2712
+ return _ts_generator$1(this, function(_state) {
2713
+ switch(_state.label){
2714
+ case 0:
2715
+ setIsSaving(true);
2716
+ _state.label = 1;
2717
+ case 1:
2718
+ _state.trys.push([
2719
+ 1,
2720
+ 3,
2721
+ ,
2722
+ 4
2723
+ ]);
2724
+ return [
2725
+ 4,
2726
+ savePresetFunc(name)
2727
+ ];
2728
+ case 2:
2729
+ preset = _state.sent();
2730
+ setIsSaving(false);
2731
+ loadAllPresets(preset);
2732
+ return [
2733
+ 3,
2734
+ 4
2735
+ ];
2736
+ case 3:
2737
+ error = _state.sent();
2738
+ console.log(error);
2739
+ return [
2740
+ 3,
2741
+ 4
2742
+ ];
2743
+ case 4:
2744
+ return [
2745
+ 2
2746
+ ];
2747
+ }
2748
+ });
2749
+ });
2750
+ return function callSavePreset(name) {
2751
+ return _ref.apply(this, arguments);
2752
+ };
2753
+ }();
2754
+ callSavePreset(name);
2755
+ };
2756
+ useEffect(function() {
2757
+ loadAllPresets(presetList && presetList[0]);
2758
+ }, []);
2759
+ return /*#__PURE__*/ React__default.createElement(Box, {
2760
+ justifyContent: Box.justifyContent.flexStart,
2761
+ padding: [
2762
+ Box.padding.none,
2763
+ Box.padding.medium
2764
+ ],
2765
+ height: "30px",
2766
+ className: "uppercase bg-popover rounded-sm PresetManagerContainer",
2767
+ style: {
2768
+ maxWidth: '325px',
2769
+ backgroundColor: "var(--bg-page)",
2770
+ color: "var(--color-text)"
2771
+ }
2772
+ }, /*#__PURE__*/ React__default.createElement(Listbox, null, /*#__PURE__*/ React__default.createElement(Listbox.Button, {
2773
+ className: "PresetManagerButton"
2774
+ }, /*#__PURE__*/ React__default.createElement(Box, {
2775
+ flex: "0 0 24px",
2776
+ width: "24px"
2777
+ }, /*#__PURE__*/ React__default.createElement(IconButton, {
2778
+ id: "savePreset",
2779
+ onClick: function(e) {
2780
+ e.preventDefault();
2781
+ selectedPreset && savePreset(selectedPreset);
2782
+ },
2783
+ icon: IconButton.icon.save
2784
+ })), /*#__PURE__*/ React__default.createElement(Box, {
2785
+ flex: "10",
2786
+ height: "100%",
2787
+ padding: [
2788
+ Box.padding.none,
2789
+ Box.padding.medium,
2790
+ Box.padding.none,
2791
+ Box.padding.small
2792
+ ]
2793
+ }, /*#__PURE__*/ React__default.createElement(Box, {
2794
+ className: "PresetManagerButtonLabelOuterContainer",
2795
+ style: {
2796
+ width: 'auto'
2797
+ }
2798
+ }, /*#__PURE__*/ React__default.createElement(Box, {
2799
+ className: "PresetManagerButtonLabelContainer ".concat(isDirty ? 'isDirty' : '')
2800
+ }, /*#__PURE__*/ React__default.createElement(Label, {
2801
+ className: 'PresetManagerButtonLabel'
2802
+ }, selectedPreset !== null && selectedPreset !== void 0 ? selectedPreset : 'New preset')))), /*#__PURE__*/ React__default.createElement(Box, {
2803
+ flex: "0"
2804
+ }, /*#__PURE__*/ React__default.createElement(IconButton, {
2805
+ id: "previousPreset",
2806
+ width: "20px",
2807
+ icon: IconButton.icon.up,
2808
+ onClick: function(e) {
2809
+ e.preventDefault();
2810
+ selectedPreset && loadPreviousPreset(selectedPreset);
2811
+ }
2812
+ }), /*#__PURE__*/ React__default.createElement(IconButton, {
2813
+ id: "nextPreset",
2814
+ width: "20px",
2815
+ icon: IconButton.icon.down,
2816
+ onClick: function(e) {
2817
+ e.preventDefault();
2818
+ selectedPreset && loadNextPreset(selectedPreset);
2819
+ }
2820
+ }))), /*#__PURE__*/ React__default.createElement(Listbox.Options, {
2821
+ anchor: "bottom start",
2822
+ className: 'PresetManagerPanel'
2823
+ }, /*#__PURE__*/ React__default.createElement(Box, {
2824
+ height: "100%",
2825
+ justifyContent: Box.justifyContent.flexStart,
2826
+ alignItems: Box.alignItems.flexStart
2827
+ }, /*#__PURE__*/ React__default.createElement(Box, {
2828
+ tag: Box.tag.ul,
2829
+ height: "100%",
2830
+ alignItems: Box.alignItems.flexStart,
2831
+ justifyContent: Box.justifyContent.flexStart,
2832
+ flexDirection: Box.flexDirection.column
2833
+ }, presetList.map(function(item) {
2834
+ return /*#__PURE__*/ React__default.createElement(Listbox.Option, {
2835
+ value: item,
2836
+ onClick: function() {
2837
+ loadPreset(item);
2838
+ },
2839
+ className: "PresetManagerListItem ".concat(item === selectedPreset ? 'isSelected' : '')
2840
+ }, /*#__PURE__*/ React__default.createElement(Box, {
2841
+ alignItems: Box.alignItems.flexStart,
2842
+ justifyContent: Box.justifyContent.flexStart,
2843
+ flexDirection: Box.flexDirection.column,
2844
+ padding: [
2845
+ Box.padding.mediumSmall,
2846
+ Box.padding.large
2847
+ ]
2848
+ }, /*#__PURE__*/ React__default.createElement("span", {
2849
+ className: "PresetManagerListItemText"
2850
+ }, item)));
2851
+ }))))));
2852
+ }
2853
+
2854
+ function _array_like_to_array(arr, len) {
2855
+ if (len == null || len > arr.length) len = arr.length;
2856
+ for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
2857
+ return arr2;
2858
+ }
2859
+ function _array_with_holes(arr) {
2860
+ if (Array.isArray(arr)) return arr;
2861
+ }
2862
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
2863
+ try {
2864
+ var info = gen[key](arg);
2865
+ var value = info.value;
2866
+ } catch (error) {
2867
+ reject(error);
2868
+ return;
2869
+ }
2870
+ if (info.done) {
2871
+ resolve(value);
2872
+ } else {
2873
+ Promise.resolve(value).then(_next, _throw);
2874
+ }
2875
+ }
2876
+ function _async_to_generator(fn) {
2877
+ return function() {
2878
+ var self = this, args = arguments;
2879
+ return new Promise(function(resolve, reject) {
2880
+ var gen = fn.apply(self, args);
2881
+ function _next(value) {
2882
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
2883
+ }
2884
+ function _throw(err) {
2885
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
2886
+ }
2887
+ _next(undefined);
2888
+ });
2889
+ };
2890
+ }
2891
+ function _define_property$1(obj, key, value) {
2892
+ if (key in obj) {
2893
+ Object.defineProperty(obj, key, {
2894
+ value: value,
2895
+ enumerable: true,
2896
+ configurable: true,
2897
+ writable: true
2898
+ });
2899
+ } else {
2900
+ obj[key] = value;
2901
+ }
2902
+ return obj;
2903
+ }
2904
+ function _iterable_to_array_limit(arr, i) {
2905
+ var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
2906
+ if (_i == null) return;
2907
+ var _arr = [];
2908
+ var _n = true;
2909
+ var _d = false;
2910
+ var _s, _e;
2911
+ try {
2912
+ for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
2913
+ _arr.push(_s.value);
2914
+ if (i && _arr.length === i) break;
2915
+ }
2916
+ } catch (err) {
2917
+ _d = true;
2918
+ _e = err;
2919
+ } finally{
2920
+ try {
2921
+ if (!_n && _i["return"] != null) _i["return"]();
2922
+ } finally{
2923
+ if (_d) throw _e;
2924
+ }
2925
+ }
2926
+ return _arr;
2927
+ }
2928
+ function _non_iterable_rest() {
2929
+ throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
2930
+ }
2931
+ function _object_spread$1(target) {
2932
+ for(var i = 1; i < arguments.length; i++){
2933
+ var source = arguments[i] != null ? arguments[i] : {};
2934
+ var ownKeys = Object.keys(source);
2935
+ if (typeof Object.getOwnPropertySymbols === "function") {
2936
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
2937
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
2938
+ }));
2939
+ }
2940
+ ownKeys.forEach(function(key) {
2941
+ _define_property$1(target, key, source[key]);
2942
+ });
2943
+ }
2944
+ return target;
2945
+ }
2946
+ function _sliced_to_array(arr, i) {
2947
+ return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
2406
2948
  }
2407
2949
  function _unsupported_iterable_to_array(o, minLen) {
2408
2950
  if (!o) return;
@@ -2631,16 +3173,31 @@ function ModuleHeader(param) {
2631
3173
  value: globalState === null || globalState === void 0 ? void 0 : (_globalState_highlightedItem1 = globalState.highlightedItem) === null || _globalState_highlightedItem1 === void 0 ? void 0 : _globalState_highlightedItem1.value
2632
3174
  }
2633
3175
  })), /*#__PURE__*/ React__default.createElement(Box, {
3176
+ alignItems: Box.alignItems.flexStart,
3177
+ flex: "0 0 325px"
3178
+ }, /*#__PURE__*/ React__default.createElement(PresetManager, null)), /*#__PURE__*/ React__default.createElement(Box, {
2634
3179
  flex: "0"
2635
3180
  }, /*#__PURE__*/ React__default.createElement(IconButton, {
2636
3181
  id: "undo",
3182
+ width: "30px",
3183
+ height: "30px",
2637
3184
  icon: IconButton.icon.undo,
3185
+ padding: [
3186
+ IconButton.padding.none,
3187
+ IconButton.padding.small
3188
+ ],
2638
3189
  disabled: !canUndo,
2639
3190
  onClick: function() {
2640
3191
  handleUndo();
2641
3192
  }
2642
3193
  }), /*#__PURE__*/ React__default.createElement(IconButton, {
2643
3194
  id: "redo",
3195
+ width: "30px",
3196
+ height: "30px",
3197
+ padding: [
3198
+ IconButton.padding.none,
3199
+ IconButton.padding.small
3200
+ ],
2644
3201
  disabled: !canRedo,
2645
3202
  onClick: function() {
2646
3203
  handleRedo();