@antimatter-audio/antimatter-ui 9.2.1 → 9.4.0

package/dist/index.js

@@ -2,99 +2,90 @@ import * as React from 'react';
 import React__default, { useState, useEffect, useRef, useCallback } from 'react';
 import classnames from 'classnames';
 import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
-import './assets/src/common/styles/base.css.ts.vanilla-aBQSVOsn.css';
-import './assets/src/core/Tabs/Tabs.css.ts.vanilla-DQ1nIUyD.css';
 import * as Juce from 'juce-framework-frontend';
-import './assets/src/core/Button/Button.css.ts.vanilla-ZHEMMDf9.css';
-import './assets/src/core/Dropdown/Dropdown.css.ts.vanilla-BLtRNWLI.css';
-import './assets/src/core/Input/Input.css.ts.vanilla-BKrnSGGE.css';
 import { useDrag } from '@use-gesture/react';
-import './assets/src/core/Slider/RotarySlider.css.ts.vanilla-BQXYfvmS.css';
-import './assets/src/core/Slider/BarSlider.css.ts.vanilla-B-s_nUZW.css';
-import './assets/src/core/Label/Label.css.ts.vanilla-RfDqihtI.css';
-import './assets/src/core/Box/Box.css.ts.vanilla-DbG2dKSH.css';
-import './assets/src/core/Heading/Heading.css.ts.vanilla-B0VK4P4u.css';
 import { v4 } from 'uuid';
-import './assets/src/core/Matrix/Matrix.css.ts.vanilla-CM51RBF2.css';
-import './assets/src/core/Indicators/IndicatorLight.css.ts.vanilla-CZ8i-Pqo.css';
-import './assets/src/advanced/KeyValueDisplayScreen/KeyValueDisplayScreen.css.ts.vanilla-BpE9IWhL.css';
 import * as d3 from 'd3';
-import './assets/src/advanced/Oscilloscope/Oscilloscope.css.ts.vanilla-CwarcIIM.css';
-import './assets/src/advanced/ModuleHeader/ModuleHeader.css.ts.vanilla-ClQKi6dk.css';
-import './assets/src/advanced/ModuleFooter/ModuleFooter.css.ts.vanilla-BDcX51S7.css';
 
-var Spacing;
-(function(Spacing) {
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+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";
+styleInject(css_248z$8);
+
+var Spacing = /*#__PURE__*/ function(Spacing) {
     Spacing["none"] = "none";
-    Spacing["xSmall"] = "xSmall";
-    Spacing["small"] = "small";
-    Spacing["mediumSmall"] = "mediumSmall";
-    Spacing["medium"] = "medium";
-    Spacing["mediumLarge"] = "mediumLarge";
-    Spacing["large"] = "large";
-    Spacing["xLarge"] = "xLarge";
-})(Spacing || (Spacing = {}));
-var FlexDirection$1;
-(function(FlexDirection) {
+    Spacing["xSmall"] = "xs";
+    Spacing["small"] = "sm";
+    Spacing["mediumSmall"] = "ms";
+    Spacing["medium"] = "md";
+    Spacing["mediumLarge"] = "ml";
+    Spacing["large"] = "lg";
+    Spacing["xLarge"] = "xl";
+    return Spacing;
+}({});
+var FlexDirection = /*#__PURE__*/ function(FlexDirection) {
     FlexDirection["row"] = "row";
     FlexDirection["column"] = "column";
-})(FlexDirection$1 || (FlexDirection$1 = {}));
-var FlexAlign;
-(function(FlexAlign) {
-    FlexAlign["flexStart"] = "flex-start";
-    FlexAlign["flexEnd"] = "flex-end";
-    FlexAlign["center"] = "center";
-})(FlexAlign || (FlexAlign = {}));
-var FlexWrap;
-(function(FlexWrap) {
+    return FlexDirection;
+}({});
+var FlexWrap = /*#__PURE__*/ function(FlexWrap) {
     FlexWrap["wrap"] = "wrap";
     FlexWrap["noWrap"] = "nowrap";
-})(FlexWrap || (FlexWrap = {}));
-var JustifyContent$1;
-(function(JustifyContent) {
-    JustifyContent["flexStart"] = "flex-start";
-    JustifyContent["flexEnd"] = "flex-end";
-    JustifyContent["center"] = "center";
-    JustifyContent["spaceBetween"] = "space-between";
-    JustifyContent["spaceAround"] = "space-around";
-    JustifyContent["spaceEvenly"] = "space-evenly";
-})(JustifyContent$1 || (JustifyContent$1 = {}));
-var Height;
-(function(Height) {
+    return FlexWrap;
+}({});
+var Height = /*#__PURE__*/ function(Height) {
     Height["full"] = "100%";
     Height["auto"] = "auto";
-})(Height || (Height = {}));
-var Width;
-(function(Width) {
+    return Height;
+}({});
+var Width = /*#__PURE__*/ function(Width) {
     Width["full"] = "100%";
     Width["auto"] = "auto";
-})(Width || (Width = {}));
-var InputErrorStates;
-(function(InputErrorStates) {
+    return Width;
+}({});
+var InputErrorStates = /*#__PURE__*/ function(InputErrorStates) {
     InputErrorStates["exceedsMaxLength"] = "exceedsMaxLength";
     InputErrorStates["valueOutOfRange"] = "valueOutOfRange";
     InputErrorStates["invalidCharacter"] = "invalidCharacter";
-})(InputErrorStates || (InputErrorStates = {}));
-var FontSizes;
-(function(FontSizes) {
-    FontSizes["xSmall"] = "xSmall";
-    FontSizes["small"] = "small";
-    FontSizes["medium"] = "medium";
-    FontSizes["large"] = "large";
-    FontSizes["xLarge"] = "xLarge";
+    return InputErrorStates;
+}({});
+var FontSizes = /*#__PURE__*/ function(FontSizes) {
+    FontSizes["xSmall"] = "xs";
+    FontSizes["small"] = "sm";
+    FontSizes["medium"] = "md";
+    FontSizes["large"] = "lg";
+    FontSizes["xLarge"] = "xl";
     FontSizes["title"] = "title";
-})(FontSizes || (FontSizes = {}));
+    return FontSizes;
+}({});
 
-var TabsItemStyle = 'Tabs_TabsItemStyle__1mqnhd41';
-var TabsStyle = 'Tabs_TabsStyle__1mqnhd40';
-var marginBottom = {none:'Tabs_marginBottom_none__1mqnhd41e Tabs_TabsStyle__1mqnhd40',xSmall:'Tabs_marginBottom_xSmall__1mqnhd41f Tabs_TabsStyle__1mqnhd40',small:'Tabs_marginBottom_small__1mqnhd41g Tabs_TabsStyle__1mqnhd40',mediumSmall:'Tabs_marginBottom_mediumSmall__1mqnhd41h Tabs_TabsStyle__1mqnhd40',medium:'Tabs_marginBottom_medium__1mqnhd41i Tabs_TabsStyle__1mqnhd40',mediumLarge:'Tabs_marginBottom_mediumLarge__1mqnhd41j Tabs_TabsStyle__1mqnhd40',large:'Tabs_marginBottom_large__1mqnhd41k Tabs_TabsStyle__1mqnhd40',xLarge:'Tabs_marginBottom_xLarge__1mqnhd41l Tabs_TabsStyle__1mqnhd40'};
-var marginLeft = {none:'Tabs_marginLeft_none__1mqnhd41m Tabs_TabsStyle__1mqnhd40',xSmall:'Tabs_marginLeft_xSmall__1mqnhd41n Tabs_TabsStyle__1mqnhd40',small:'Tabs_marginLeft_small__1mqnhd41o Tabs_TabsStyle__1mqnhd40',mediumSmall:'Tabs_marginLeft_mediumSmall__1mqnhd41p Tabs_TabsStyle__1mqnhd40',medium:'Tabs_marginLeft_medium__1mqnhd41q Tabs_TabsStyle__1mqnhd40',mediumLarge:'Tabs_marginLeft_mediumLarge__1mqnhd41r Tabs_TabsStyle__1mqnhd40',large:'Tabs_marginLeft_large__1mqnhd41s Tabs_TabsStyle__1mqnhd40',xLarge:'Tabs_marginLeft_xLarge__1mqnhd41t Tabs_TabsStyle__1mqnhd40'};
-var marginRight = {none:'Tabs_marginRight_none__1mqnhd416 Tabs_TabsStyle__1mqnhd40',xSmall:'Tabs_marginRight_xSmall__1mqnhd417 Tabs_TabsStyle__1mqnhd40',small:'Tabs_marginRight_small__1mqnhd418 Tabs_TabsStyle__1mqnhd40',mediumSmall:'Tabs_marginRight_mediumSmall__1mqnhd419 Tabs_TabsStyle__1mqnhd40',medium:'Tabs_marginRight_medium__1mqnhd41a Tabs_TabsStyle__1mqnhd40',mediumLarge:'Tabs_marginRight_mediumLarge__1mqnhd41b Tabs_TabsStyle__1mqnhd40',large:'Tabs_marginRight_large__1mqnhd41c Tabs_TabsStyle__1mqnhd40',xLarge:'Tabs_marginRight_xLarge__1mqnhd41d Tabs_TabsStyle__1mqnhd40'};
-var marginTop = {none:'Tabs_marginTop_none__1mqnhd4y Tabs_TabsStyle__1mqnhd40',xSmall:'Tabs_marginTop_xSmall__1mqnhd4z Tabs_TabsStyle__1mqnhd40',small:'Tabs_marginTop_small__1mqnhd410 Tabs_TabsStyle__1mqnhd40',mediumSmall:'Tabs_marginTop_mediumSmall__1mqnhd411 Tabs_TabsStyle__1mqnhd40',medium:'Tabs_marginTop_medium__1mqnhd412 Tabs_TabsStyle__1mqnhd40',mediumLarge:'Tabs_marginTop_mediumLarge__1mqnhd413 Tabs_TabsStyle__1mqnhd40',large:'Tabs_marginTop_large__1mqnhd414 Tabs_TabsStyle__1mqnhd40',xLarge:'Tabs_marginTop_xLarge__1mqnhd415 Tabs_TabsStyle__1mqnhd40'};
-var paddingBottom$3 = {none:'Tabs_paddingBottom_none__1mqnhd4i Tabs_TabsStyle__1mqnhd40',xSmall:'Tabs_paddingBottom_xSmall__1mqnhd4j Tabs_TabsStyle__1mqnhd40',small:'Tabs_paddingBottom_small__1mqnhd4k Tabs_TabsStyle__1mqnhd40',mediumSmall:'Tabs_paddingBottom_mediumSmall__1mqnhd4l Tabs_TabsStyle__1mqnhd40',medium:'Tabs_paddingBottom_medium__1mqnhd4m Tabs_TabsStyle__1mqnhd40',mediumLarge:'Tabs_paddingBottom_mediumLarge__1mqnhd4n Tabs_TabsStyle__1mqnhd40',large:'Tabs_paddingBottom_large__1mqnhd4o Tabs_TabsStyle__1mqnhd40',xLarge:'Tabs_paddingBottom_xLarge__1mqnhd4p Tabs_TabsStyle__1mqnhd40'};
-var paddingLeft$3 = {none:'Tabs_paddingLeft_none__1mqnhd4q Tabs_TabsStyle__1mqnhd40',xSmall:'Tabs_paddingLeft_xSmall__1mqnhd4r Tabs_TabsStyle__1mqnhd40',small:'Tabs_paddingLeft_small__1mqnhd4s Tabs_TabsStyle__1mqnhd40',mediumSmall:'Tabs_paddingLeft_mediumSmall__1mqnhd4t Tabs_TabsStyle__1mqnhd40',medium:'Tabs_paddingLeft_medium__1mqnhd4u Tabs_TabsStyle__1mqnhd40',mediumLarge:'Tabs_paddingLeft_mediumLarge__1mqnhd4v Tabs_TabsStyle__1mqnhd40',large:'Tabs_paddingLeft_large__1mqnhd4w Tabs_TabsStyle__1mqnhd40',xLarge:'Tabs_paddingLeft_xLarge__1mqnhd4x Tabs_TabsStyle__1mqnhd40'};
-var paddingRight$3 = {none:'Tabs_paddingRight_none__1mqnhd4a Tabs_TabsStyle__1mqnhd40',xSmall:'Tabs_paddingRight_xSmall__1mqnhd4b Tabs_TabsStyle__1mqnhd40',small:'Tabs_paddingRight_small__1mqnhd4c Tabs_TabsStyle__1mqnhd40',mediumSmall:'Tabs_paddingRight_mediumSmall__1mqnhd4d Tabs_TabsStyle__1mqnhd40',medium:'Tabs_paddingRight_medium__1mqnhd4e Tabs_TabsStyle__1mqnhd40',mediumLarge:'Tabs_paddingRight_mediumLarge__1mqnhd4f Tabs_TabsStyle__1mqnhd40',large:'Tabs_paddingRight_large__1mqnhd4g Tabs_TabsStyle__1mqnhd40',xLarge:'Tabs_paddingRight_xLarge__1mqnhd4h Tabs_TabsStyle__1mqnhd40'};
-var paddingTop$3 = {none:'Tabs_paddingTop_none__1mqnhd42 Tabs_TabsStyle__1mqnhd40',xSmall:'Tabs_paddingTop_xSmall__1mqnhd43 Tabs_TabsStyle__1mqnhd40',small:'Tabs_paddingTop_small__1mqnhd44 Tabs_TabsStyle__1mqnhd40',mediumSmall:'Tabs_paddingTop_mediumSmall__1mqnhd45 Tabs_TabsStyle__1mqnhd40',medium:'Tabs_paddingTop_medium__1mqnhd46 Tabs_TabsStyle__1mqnhd40',mediumLarge:'Tabs_paddingTop_mediumLarge__1mqnhd47 Tabs_TabsStyle__1mqnhd40',large:'Tabs_paddingTop_large__1mqnhd48 Tabs_TabsStyle__1mqnhd40',xLarge:'Tabs_paddingTop_xLarge__1mqnhd49 Tabs_TabsStyle__1mqnhd40'};
+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  font-size: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 1px;\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  appearance: none;\n  &:hover,\n  &:focus-visible {\n    outline: none;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n}\n\n.Tabs-Item::-moz-selection {\n  background: transparent;\n}\n.Tabs-Item::selection {\n  background: transparent;\n}\n";
+styleInject(css_248z$7);
 
 function _array_like_to_array$6(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -158,38 +149,52 @@ function Tabs(param) {
     //vertical, horizontal
     // top, right, bottom, left
     return /*#__PURE__*/ React__default.createElement(TabGroup, {
-        className: classnames(marginTop[margin[0]], marginRight[(_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0]], marginBottom[(_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0]], marginLeft[(_ref = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref !== void 0 ? _ref : margin[0]]),
+        style: {
+            marginTop: "var(--mt-".concat(margin[0], ")"),
+            marginRight: "var(--mr-".concat((_margin_ = margin[1]) !== null && _margin_ !== void 0 ? _margin_ : margin[0], ")"),
+            marginBottom: "var(--mb-".concat((_margin_1 = margin[2]) !== null && _margin_1 !== void 0 ? _margin_1 : margin[0], ")"),
+            marginLeft: "var(--ml-".concat((_ref = (_margin_2 = margin[3]) !== null && _margin_2 !== void 0 ? _margin_2 : margin[1]) !== null && _ref !== void 0 ? _ref : margin[0], ")")
+        },
         onChange: function(index) {
             return handleChange(index);
         }
     }, /*#__PURE__*/ React__default.createElement(TabList, {
-        className: classnames('Tabs', TabsStyle, className)
-    }, items && items.map(function(item, index)  {
+        className: classnames('Tabs', className)
+    }, items && items.map(function(item, index) {
         var _padding_, _padding_1, _padding_2, _ref;
-        return React__default.createElement(Tab, {
+        return /*#__PURE__*/ React__default.createElement(Tab, {
             key: item,
             id: item,
-            className: classnames('Tabs-item', 'bg-input', 'color-input-text', index === selectedItem && 'bg-input-selected', TabsItemStyle, paddingTop$3[padding[0]], paddingRight$3[(_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0]], paddingBottom$3[(_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0]], paddingLeft$3[(_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0]])
+            style: {
+                cursor: 'pointer',
+                fontSize: 'var(--text-md)',
+                lineHeight: '1.25rem',
+                paddingTop: "var(--p-".concat(padding[0], ")"),
+                paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
+                paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
+                paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")")
+            },
+            className: classnames('Tabs-item', 'bg-input', 'color-input-text', index === selectedItem && 'bg-input-selected')
         }, item);
     })));
 }
 Tabs.padding = Spacing;
 Tabs.margin = Spacing;
 
-var ButtonSize;
-(function(ButtonSize) {
+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";
+styleInject(css_248z$6);
+
+var ButtonSize = /*#__PURE__*/ function(ButtonSize) {
     ButtonSize["xSmall"] = "xSmall";
     ButtonSize["small"] = "small";
     ButtonSize["large"] = "large";
-})(ButtonSize || (ButtonSize = {}));
-var ButtonType;
-(function(ButtonType) {
+    return ButtonSize;
+}({});
+var ButtonType = /*#__PURE__*/ function(ButtonType) {
     ButtonType["momentary"] = "momentary";
     ButtonType["latch"] = "latch";
-})(ButtonType || (ButtonType = {}));
-
-var ButtonStyle = 'Button_ButtonStyle__1m3jauc0';
-var variants$2 = {xSmall:'Button_variants_xSmall__1m3jauc1 Button_ButtonStyle__1m3jauc0',small:'Button_variants_small__1m3jauc2 Button_ButtonStyle__1m3jauc0',large:'Button_variants_large__1m3jauc3 Button_ButtonStyle__1m3jauc0'};
+    return ButtonType;
+}({});
 
 function _array_like_to_array$5(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -266,7 +271,9 @@ function _unsupported_iterable_to_array$5(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
 function Button(param) {
-    var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, children = param.children, _param_type = param.type, type = _param_type === void 0 ? ButtonType.latch : _param_type, _param_size = param.size, size = _param_size === void 0 ? ButtonSize.large : _param_size;
+    var 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 ? [
+        Spacing.small
+    ] : _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;
     var _React_useState = _sliced_to_array$5(React__default.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
     var buttonState = Juce.getToggleState(id);
     var isLocalhost = window.location.hostname === 'localhost';
@@ -278,7 +285,7 @@ function Button(param) {
     ]);
     // Sets up listeners to handle changes on the backend
     useEffect(function() {
-        if (!isLocalhost) {
+        if (!isLocalhost && !onClick) {
             var valueListenerId = buttonState === null || buttonState === void 0 ? void 0 : buttonState.valueChangedEvent.addListener(function() {
                 setIsSelected(buttonState === null || buttonState === void 0 ? void 0 : buttonState.value);
             });
@@ -290,21 +297,25 @@ function Button(param) {
         }
     });
     var handleMouseDown = function(e) {
-        e.preventDefault();
-        if (type === ButtonType.momentary) {
-            setIsSelected(true);
-            buttonState.setValue(true);
-        } else {
-            setIsSelected(!isSelected);
-            buttonState.setValue(!isSelected);
+        if (!onClick) {
+            e.preventDefault();
+            if (type === ButtonType.momentary) {
+                setIsSelected(true);
+                buttonState.setValue(true);
+            } else {
+                setIsSelected(!isSelected);
+                buttonState.setValue(!isSelected);
+            }
         }
     };
     var handleMouseUp = function() {
-        setIsSelected(false);
-        buttonState.setValue(false);
+        if (!onClick) {
+            setIsSelected(false);
+            buttonState.setValue(false);
+        }
     };
     React__default.useEffect(function() {
-        if (type === ButtonType.momentary) {
+        if (type === ButtonType.momentary && !onClick) {
             window.addEventListener('mouseup', handleMouseUp);
             return function() {
                 window.removeEventListener('mouseup', handleMouseUp);
@@ -314,20 +325,27 @@ function Button(param) {
     }, [
         isSelected
     ]);
+    var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React__default.createElement("button", {
         id: id,
         onMouseDown: handleMouseDown,
         disabled: disabled,
-        style: _object_spread$b({}, style),
-        className: classnames('Button', ButtonStyle, variants$2[size], isSelected && 'selected', className)
+        onClick: onClick && onClick,
+        style: _object_spread$b({
+            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], ")")
+        }, style),
+        className: classnames('Button', isSelected && 'selected', "".concat(size), className)
     }, size !== ButtonSize.xSmall && (text ? text : children));
 }
+Button.padding = Spacing;
 Button.type = ButtonType;
 Button.size = ButtonSize;
 
-var DropdownButtonStyle = 'Dropdown_DropdownButtonStyle__1wi5mwi0';
-var DropdownMenuItemStyle = 'Dropdown_DropdownMenuItemStyle__1wi5mwi2';
-var DropdownMenuStyle = 'Dropdown_DropdownMenuStyle__1wi5mwi1';
+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";
+styleInject(css_248z$5);
 
 function _array_like_to_array$4(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -376,7 +394,11 @@ function _unsupported_iterable_to_array$4(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4(o, minLen);
 }
 function Dropdown(param) {
-    var items = param.items, className = param.className, id = param.id, style = param.style;
+    var _param_items = param.items, items = _param_items === void 0 ? [
+        'Mock Item 1',
+        'Mock Item 2',
+        'Mock Item 3'
+    ] : _param_items, className = param.className, id = param.id, style = param.style;
     var comboBoxState = Juce.getComboBoxState(id);
     var _useState = _sliced_to_array$4(useState(comboBoxState.getChoiceIndex()), 2), value = _useState[0], setValue = _useState[1];
     var _useState1 = _sliced_to_array$4(useState(comboBoxState.properties), 2), properties = _useState1[0], setProperties = _useState1[1];
@@ -402,28 +424,27 @@ function Dropdown(param) {
             comboBoxState.propertiesChangedEvent.removeListener(propertiesListenerId);
         };
     });
-    var _properties_choices, _properties_choices1;
+    var displayedItems = properties.choices.length ? properties.choices : items;
     return /*#__PURE__*/ React__default.createElement(Listbox, {
         value: value,
         onChange: handleChange
     }, /*#__PURE__*/ React__default.createElement(ListboxButton, {
-        className: classnames('Dropdown-button', DropdownButtonStyle, className),
+        className: classnames('Dropdown-button', className),
         style: style,
         "aria-label": "Assignee",
         onChange: function(value) {
             return console.log(value);
         }
-    }, ((_properties_choices = properties.choices) !== null && _properties_choices !== void 0 ? _properties_choices : items)[value]), /*#__PURE__*/ React__default.createElement(ListboxOptions, {
+    }, displayedItems[value]), /*#__PURE__*/ React__default.createElement(ListboxOptions, {
         anchor: "bottom",
         portal: false,
-        className: classnames(DropdownMenuStyle)
-    }, ((_properties_choices1 = properties.choices) !== null && _properties_choices1 !== void 0 ? _properties_choices1 : items).map(function(item, i)  {
-        var _properties_choices;
-        return React__default.createElement(ListboxOption, {
-            className: classnames(DropdownMenuItemStyle),
+        className: "Dropdown-items z-10"
+    }, displayedItems.map(function(item, i) {
+        return /*#__PURE__*/ React__default.createElement(ListboxOption, {
+            className: classnames('Dropdown-item'),
             key: item,
             value: i
-        }, ((_properties_choices = properties.choices) !== null && _properties_choices !== void 0 ? _properties_choices : items)[i]);
+        }, displayedItems[i]);
     })));
 }
 
@@ -456,7 +477,8 @@ var validate = function(param) {
     };
 };
 
-var InputStyle = 'Input_InputStyle__ehldxd0';
+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";
+styleInject(css_248z$4);
 
 function _array_like_to_array$3(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -532,11 +554,13 @@ function _unsupported_iterable_to_array$3(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
 }
-var InputTypes;
-(function(InputTypes) {
+// import { decimalToPercent, percentToDecimal } from '../../common/utils';
+// import debounce from 'lodash.debounce';
+var InputTypes = /*#__PURE__*/ function(InputTypes) {
     InputTypes["text"] = "text";
     InputTypes["number"] = "number";
-})(InputTypes || (InputTypes = {}));
+    return InputTypes;
+}({});
 function Input(param) {
     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;
     var _inputRef_current;
@@ -647,7 +671,7 @@ function Input(param) {
     return /*#__PURE__*/ React__default.createElement("input", {
         id: id,
         ref: inputRef,
-        className: classnames('TextInput', InputStyle, hasIncompleteValue || hasError ? 'is-blinking' : '', className),
+        className: classnames('TextInput', hasIncompleteValue || hasError ? 'is-blinking' : '', className),
         style: _object_spread$a({
             // TODO
             // color: hasError ? 'red' : hasIncompleteValue ? '#999' : textColor
@@ -674,28 +698,28 @@ function Input(param) {
 }
 Input.type = InputTypes;
 
-var SliderPolarity;
-(function(SliderPolarity) {
+var SliderPolarity = /*#__PURE__*/ function(SliderPolarity) {
     SliderPolarity["linear"] = "linear";
     SliderPolarity["bipolar"] = "bipolar";
-})(SliderPolarity || (SliderPolarity = {}));
-var SliderType;
-(function(SliderType) {
+    return SliderPolarity;
+}({});
+var SliderType = /*#__PURE__*/ function(SliderType) {
     SliderType["bar"] = "bar";
     SliderType["rotary"] = "rotary";
     SliderType["custom"] = "custom";
-})(SliderType || (SliderType = {}));
-var SliderRotationBehavior;
-(function(SliderRotationBehavior) {
+    return SliderType;
+}({});
+var SliderRotationBehavior = /*#__PURE__*/ function(SliderRotationBehavior) {
     SliderRotationBehavior["rotateIndicator"] = "rotateIndicator";
     SliderRotationBehavior["rotateKnob"] = "rotateKnob";
     SliderRotationBehavior["noRotation"] = "noRotation";
-})(SliderRotationBehavior || (SliderRotationBehavior = {}));
-var SliderOrientation;
-(function(SliderOrientation) {
+    return SliderRotationBehavior;
+}({});
+var SliderOrientation = /*#__PURE__*/ function(SliderOrientation) {
     SliderOrientation["horizontal"] = "horizontal";
     SliderOrientation["vertical"] = "vertical";
-})(SliderOrientation || (SliderOrientation = {}));
+    return SliderOrientation;
+}({});
 
 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;
@@ -955,10 +979,8 @@ var useSlider = function(param) {
     };
 };
 
-var RotarySliderCenterMarkerStyle = 'RotarySlider_RotarySliderCenterMarkerStyle__srrsmo3';
-var RotarySliderIndicatorStyle = 'RotarySlider_RotarySliderIndicatorStyle__srrsmo2';
-var RotarySliderInnerStyle = 'RotarySlider_RotarySliderInnerStyle__srrsmo1';
-var RotarySliderStyle = 'RotarySlider_RotarySliderStyle__srrsmo0';
+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";
+styleInject(css_248z$3);
 
 function _define_property$9(obj, key, value) {
     if (key in obj) {
@@ -1014,7 +1036,7 @@ function RotarySlider(param) {
         end: 15000.0,
         interval: 0.1,
         skew: 0.7
-    } : _param_mockProperties, style = param.style;
+    } : _param_mockProperties, _param_color = param.color, color = _param_color === void 0 ? 'var(--color-gray-400)' : _param_color, style = param.style;
     var _useSlider = useSlider({
         id: id,
         mockProperties: mockProperties,
@@ -1029,9 +1051,9 @@ function RotarySlider(param) {
             justifyContent: 'center'
         }
     }, polarity === SliderPolarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames(RotarySliderCenterMarkerStyle)
+        className: classnames('RotarySlider-center-marker')
     }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$9({
-        className: classnames(RotarySliderStyle, 'Slider-rotary', polarity === SliderPolarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
+        className: classnames('RotarySlider', polarity === SliderPolarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
     }, bindDrag()), {
         onMouseEnter: function() {
             return onMouseEnter && onMouseEnter(id, scaledValue);
@@ -1040,7 +1062,7 @@ function RotarySlider(param) {
             touchAction: 'none'
         }, style)
     }), normalisedValue !== null ? /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames(RotarySliderInnerStyle),
+        className: classnames('RotarySlider-Inner'),
         style: _object_spread$9({
             rotate: rotationBehavior === SliderRotationBehavior.rotateIndicator ? "".concat(polarity === SliderPolarity.linear ? normalisedValue : normalisedValue + 0.5, "turn") : ''
         }, getTransformString({
@@ -1053,23 +1075,14 @@ function RotarySlider(param) {
             polarity: polarity
         }))
     }, /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames(RotarySliderIndicatorStyle),
-        style: _object_spread$9({}, style)
+        className: classnames('RotarySlider-Indicator'),
+        style: _object_spread$9({
+            backgroundColor: color
+        }, style)
     })) : ''));
 }
 RotarySlider.sliderPolarity = SliderPolarity;
 
-var BarSliderInnerStyle = 'BarSlider_BarSliderInnerStyle__kmoaop1';
-var BarSliderStyle = 'BarSlider_BarSliderStyle__kmoaop0';
-var variants$1 = {horizontal:'BarSlider_variants_horizontal__kmoaop3 BarSlider_BarSliderStyle__kmoaop0',vertical:'BarSlider_variants_vertical__kmoaop4 BarSlider_BarSliderStyle__kmoaop0'};
-
-var LabelStyle = 'Label_LabelStyle__gunjni0';
-var fontSizeVariant$1 = {xSmall:'Label_fontSizeVariant_xSmall__gunjni1 Label_LabelStyle__gunjni0',small:'Label_fontSizeVariant_small__gunjni2 Label_LabelStyle__gunjni0',medium:'Label_fontSizeVariant_medium__gunjni3 Label_LabelStyle__gunjni0',large:'Label_fontSizeVariant_large__gunjni4 Label_LabelStyle__gunjni0',xLarge:'Label_fontSizeVariant_xLarge__gunjni5 Label_LabelStyle__gunjni0',title:'Label_fontSizeVariant_title__gunjni6 Label_LabelStyle__gunjni0'};
-var paddingBottom$2 = {none:'Label_paddingBottom_none__gunjnin Label_LabelStyle__gunjni0',xSmall:'Label_paddingBottom_xSmall__gunjnio Label_LabelStyle__gunjni0',small:'Label_paddingBottom_small__gunjnip Label_LabelStyle__gunjni0',mediumSmall:'Label_paddingBottom_mediumSmall__gunjniq Label_LabelStyle__gunjni0',medium:'Label_paddingBottom_medium__gunjnir Label_LabelStyle__gunjni0',mediumLarge:'Label_paddingBottom_mediumLarge__gunjnis Label_LabelStyle__gunjni0',large:'Label_paddingBottom_large__gunjnit Label_LabelStyle__gunjni0',xLarge:'Label_paddingBottom_xLarge__gunjniu Label_LabelStyle__gunjni0'};
-var paddingLeft$2 = {none:'Label_paddingLeft_none__gunjniv Label_LabelStyle__gunjni0',xSmall:'Label_paddingLeft_xSmall__gunjniw Label_LabelStyle__gunjni0',small:'Label_paddingLeft_small__gunjnix Label_LabelStyle__gunjni0',mediumSmall:'Label_paddingLeft_mediumSmall__gunjniy Label_LabelStyle__gunjni0',medium:'Label_paddingLeft_medium__gunjniz Label_LabelStyle__gunjni0',mediumLarge:'Label_paddingLeft_mediumLarge__gunjni10 Label_LabelStyle__gunjni0',large:'Label_paddingLeft_large__gunjni11 Label_LabelStyle__gunjni0',xLarge:'Label_paddingLeft_xLarge__gunjni12 Label_LabelStyle__gunjni0'};
-var paddingRight$2 = {none:'Label_paddingRight_none__gunjnif Label_LabelStyle__gunjni0',xSmall:'Label_paddingRight_xSmall__gunjnig Label_LabelStyle__gunjni0',small:'Label_paddingRight_small__gunjnih Label_LabelStyle__gunjni0',mediumSmall:'Label_paddingRight_mediumSmall__gunjnii Label_LabelStyle__gunjni0',medium:'Label_paddingRight_medium__gunjnij Label_LabelStyle__gunjni0',mediumLarge:'Label_paddingRight_mediumLarge__gunjnik Label_LabelStyle__gunjni0',large:'Label_paddingRight_large__gunjnil Label_LabelStyle__gunjni0',xLarge:'Label_paddingRight_xLarge__gunjnim Label_LabelStyle__gunjni0'};
-var paddingTop$2 = {none:'Label_paddingTop_none__gunjni7 Label_LabelStyle__gunjni0',xSmall:'Label_paddingTop_xSmall__gunjni8 Label_LabelStyle__gunjni0',small:'Label_paddingTop_small__gunjni9 Label_LabelStyle__gunjni0',mediumSmall:'Label_paddingTop_mediumSmall__gunjnia Label_LabelStyle__gunjni0',medium:'Label_paddingTop_medium__gunjnib Label_LabelStyle__gunjni0',mediumLarge:'Label_paddingTop_mediumLarge__gunjnic Label_LabelStyle__gunjni0',large:'Label_paddingTop_large__gunjnid Label_LabelStyle__gunjni0',xLarge:'Label_paddingTop_xLarge__gunjnie Label_LabelStyle__gunjni0'};
-
 function _define_property$8(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -1107,51 +1120,45 @@ function Label(param) {
         id: id,
         htmlFor: htmlFor,
         style: _object_spread$8({
-            fontSize: fontSize
+            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', LabelStyle, fontSizeVariant$1[fontSize], paddingTop$2[padding[0]], paddingRight$2[(_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0]], paddingBottom$2[(_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0]], paddingLeft$2[(_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0]], className)
+        className: classnames('Label', 'select-none', className)
     }, value ? value : children);
 }
 Label.padding = Spacing;
 Label.fontSize = FontSizes;
 
-var LayoutStyle = 'Box_LayoutStyle__wglvzp0';
-var gapVariant = {none:'Box_gapVariant_none__wglvzp1 Box_LayoutStyle__wglvzp0',xSmall:'Box_gapVariant_xSmall__wglvzp2 Box_LayoutStyle__wglvzp0',small:'Box_gapVariant_small__wglvzp3 Box_LayoutStyle__wglvzp0',mediumSmall:'Box_gapVariant_mediumSmall__wglvzp4 Box_LayoutStyle__wglvzp0',medium:'Box_gapVariant_medium__wglvzp5 Box_LayoutStyle__wglvzp0',mediumLarge:'Box_gapVariant_mediumLarge__wglvzp6 Box_LayoutStyle__wglvzp0',large:'Box_gapVariant_large__wglvzp7 Box_LayoutStyle__wglvzp0',xLarge:'Box_gapVariant_xLarge__wglvzp8 Box_LayoutStyle__wglvzp0'};
-var paddingBottom$1 = {none:'Box_paddingBottom_none__wglvzpp Box_LayoutStyle__wglvzp0',xSmall:'Box_paddingBottom_xSmall__wglvzpq Box_LayoutStyle__wglvzp0',small:'Box_paddingBottom_small__wglvzpr Box_LayoutStyle__wglvzp0',mediumSmall:'Box_paddingBottom_mediumSmall__wglvzps Box_LayoutStyle__wglvzp0',medium:'Box_paddingBottom_medium__wglvzpt Box_LayoutStyle__wglvzp0',mediumLarge:'Box_paddingBottom_mediumLarge__wglvzpu Box_LayoutStyle__wglvzp0',large:'Box_paddingBottom_large__wglvzpv Box_LayoutStyle__wglvzp0',xLarge:'Box_paddingBottom_xLarge__wglvzpw Box_LayoutStyle__wglvzp0'};
-var paddingLeft$1 = {none:'Box_paddingLeft_none__wglvzpx Box_LayoutStyle__wglvzp0',xSmall:'Box_paddingLeft_xSmall__wglvzpy Box_LayoutStyle__wglvzp0',small:'Box_paddingLeft_small__wglvzpz Box_LayoutStyle__wglvzp0',mediumSmall:'Box_paddingLeft_mediumSmall__wglvzp10 Box_LayoutStyle__wglvzp0',medium:'Box_paddingLeft_medium__wglvzp11 Box_LayoutStyle__wglvzp0',mediumLarge:'Box_paddingLeft_mediumLarge__wglvzp12 Box_LayoutStyle__wglvzp0',large:'Box_paddingLeft_large__wglvzp13 Box_LayoutStyle__wglvzp0',xLarge:'Box_paddingLeft_xLarge__wglvzp14 Box_LayoutStyle__wglvzp0'};
-var paddingRight$1 = {none:'Box_paddingRight_none__wglvzph Box_LayoutStyle__wglvzp0',xSmall:'Box_paddingRight_xSmall__wglvzpi Box_LayoutStyle__wglvzp0',small:'Box_paddingRight_small__wglvzpj Box_LayoutStyle__wglvzp0',mediumSmall:'Box_paddingRight_mediumSmall__wglvzpk Box_LayoutStyle__wglvzp0',medium:'Box_paddingRight_medium__wglvzpl Box_LayoutStyle__wglvzp0',mediumLarge:'Box_paddingRight_mediumLarge__wglvzpm Box_LayoutStyle__wglvzp0',large:'Box_paddingRight_large__wglvzpn Box_LayoutStyle__wglvzp0',xLarge:'Box_paddingRight_xLarge__wglvzpo Box_LayoutStyle__wglvzp0'};
-var paddingTop$1 = {none:'Box_paddingTop_none__wglvzp9 Box_LayoutStyle__wglvzp0',xSmall:'Box_paddingTop_xSmall__wglvzpa Box_LayoutStyle__wglvzp0',small:'Box_paddingTop_small__wglvzpb Box_LayoutStyle__wglvzp0',mediumSmall:'Box_paddingTop_mediumSmall__wglvzpc Box_LayoutStyle__wglvzp0',medium:'Box_paddingTop_medium__wglvzpd Box_LayoutStyle__wglvzp0',mediumLarge:'Box_paddingTop_mediumLarge__wglvzpe Box_LayoutStyle__wglvzp0',large:'Box_paddingTop_large__wglvzpf Box_LayoutStyle__wglvzp0',xLarge:'Box_paddingTop_xLarge__wglvzpg Box_LayoutStyle__wglvzp0'};
-
-var FlexDirection;
-(function(FlexDirection) {
-    FlexDirection["row"] = "row";
-    FlexDirection["column"] = "column";
-})(FlexDirection || (FlexDirection = {}));
-var JustifyContent;
-(function(JustifyContent) {
+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";
-})(JustifyContent || (JustifyContent = {}));
-var AlignItems;
-(function(AlignItems) {
+    return JustifyContent;
+}({});
+var AlignItems = /*#__PURE__*/ function(AlignItems) {
     AlignItems["flexStart"] = "flex-start";
     AlignItems["flexEnd"] = "flex-end";
     AlignItems["center"] = "center";
     AlignItems["stretch"] = "stretch";
     AlignItems["baseline"] = "baseline";
-})(AlignItems || (AlignItems = {}));
-var LayoutTags;
-(function(LayoutTags) {
+    return AlignItems;
+}({});
+var LayoutTags = /*#__PURE__*/ function(LayoutTags) {
     LayoutTags["header"] = "header";
     LayoutTags["main"] = "main";
     LayoutTags["section"] = "section";
     LayoutTags["div"] = "div";
     LayoutTags["footer"] = "footer";
-})(LayoutTags || (LayoutTags = {}));
+    return LayoutTags;
+}({});
 
 function _define_property$7(obj, key, value) {
     if (key in obj) {
@@ -1181,13 +1188,13 @@ function _object_spread$7(target) {
     }
     return target;
 }
-var BoxDisplay;
-(function(BoxDisplay) {
+var BoxDisplay = /*#__PURE__*/ function(BoxDisplay) {
     BoxDisplay["flex"] = "flex";
-    BoxDisplay["block"] = "bloxk";
-})(BoxDisplay || (BoxDisplay = {}));
+    BoxDisplay["block"] = "block";
+    return BoxDisplay;
+}(BoxDisplay || {});
 function Box(param) {
-    var className = param.className, style = param.style, children = param.children, flex = param.flex, _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$1.row : _param_flexDirection, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+    var className = param.className, style = param.style, children = param.children, flex = param.flex, _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,
@@ -1196,15 +1203,21 @@ function Box(param) {
     var Tag = tag;
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React__default.createElement(Tag, {
-        className: classnames('Layout', LayoutStyle, gapVariant[gap], paddingTop$1[padding[0]], paddingRight$1[(_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0]], paddingBottom$1[(_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0]], paddingLeft$1[(_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0]], className),
         // id="globalValues"
+        className: className,
         style: _object_spread$7({
             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$1.row ? FlexDirection$1.row : FlexDirection$1.column,
+            flexDirection: flexDirection === FlexDirection.row ? FlexDirection.row : FlexDirection.column,
             justifyContent: "".concat(justifyContent),
             alignItems: "".concat(alignItems),
             flex: flex ? flex : ''
@@ -1216,7 +1229,7 @@ Box.display = BoxDisplay;
 Box.alignItems = AlignItems;
 Box.justifyContent = JustifyContent;
 Box.gap = Spacing;
-Box.flexDirection = FlexDirection$1;
+Box.flexDirection = FlexDirection;
 Box.width = Width;
 Box.height = Height;
 Box.padding = Spacing;
@@ -1292,17 +1305,24 @@ function Slider(param) {
     }, polarity === SliderPolarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         className: 'Slider-center-marker'
     }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props(_object_spread$6({
-        className: classnames('Slider-bar', BarSliderStyle, sliderOrientation === SliderOrientation.horizontal ? variants$1.horizontal : variants$1.vertical)
+        className: classnames('Slider-bar', 'relative')
     }, bindBarSliderDrag()), {
         onMouseEnter: function() {
             return onMouseEnter && label && onMouseEnter(label, scaledValue);
         },
         style: _object_spread$6({
-            touchAction: 'none'
+            touchAction: 'none',
+            backgroundColor: 'var(--bg-input)',
+            minWidth: sliderOrientation === SliderOrientation.horizontal ? '100px' : '20px',
+            minHeight: sliderOrientation === SliderOrientation.horizontal ? '20px' : '75px'
         }, style)
     }), normalisedValue ? /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames(BarSliderInnerStyle),
+        // TODO: Why aren't the Tailwind classes working?
+        // className={classnames('h-full', 'w-full', 'absolute', 'bg-input')}
         style: _object_spread$6(_object_spread_props(_object_spread$6({
+            height: '100%',
+            width: '100%',
+            position: 'absolute',
             backgroundColor: color
         }, getPosition({
             sliderType: SliderType.bar,
@@ -1347,20 +1367,13 @@ function SliderValue(param) {
     }));
 }
 
-var HeadingStyle = 'Heading_HeadingStyle__36kgqp0';
-var fontSizeVariant = {xSmall:'Heading_fontSizeVariant_xSmall__36kgqp1 Heading_HeadingStyle__36kgqp0',small:'Heading_fontSizeVariant_small__36kgqp2 Heading_HeadingStyle__36kgqp0',medium:'Heading_fontSizeVariant_medium__36kgqp3 Heading_HeadingStyle__36kgqp0',large:'Heading_fontSizeVariant_large__36kgqp4 Heading_HeadingStyle__36kgqp0',xLarge:'Heading_fontSizeVariant_xLarge__36kgqp5 Heading_HeadingStyle__36kgqp0',title:'Heading_fontSizeVariant_title__36kgqp6 Heading_HeadingStyle__36kgqp0'};
-var paddingBottom = {none:'Heading_paddingBottom_none__36kgqpn Heading_HeadingStyle__36kgqp0',xSmall:'Heading_paddingBottom_xSmall__36kgqpo Heading_HeadingStyle__36kgqp0',small:'Heading_paddingBottom_small__36kgqpp Heading_HeadingStyle__36kgqp0',mediumSmall:'Heading_paddingBottom_mediumSmall__36kgqpq Heading_HeadingStyle__36kgqp0',medium:'Heading_paddingBottom_medium__36kgqpr Heading_HeadingStyle__36kgqp0',mediumLarge:'Heading_paddingBottom_mediumLarge__36kgqps Heading_HeadingStyle__36kgqp0',large:'Heading_paddingBottom_large__36kgqpt Heading_HeadingStyle__36kgqp0',xLarge:'Heading_paddingBottom_xLarge__36kgqpu Heading_HeadingStyle__36kgqp0'};
-var paddingLeft = {none:'Heading_paddingLeft_none__36kgqpv Heading_HeadingStyle__36kgqp0',xSmall:'Heading_paddingLeft_xSmall__36kgqpw Heading_HeadingStyle__36kgqp0',small:'Heading_paddingLeft_small__36kgqpx Heading_HeadingStyle__36kgqp0',mediumSmall:'Heading_paddingLeft_mediumSmall__36kgqpy Heading_HeadingStyle__36kgqp0',medium:'Heading_paddingLeft_medium__36kgqpz Heading_HeadingStyle__36kgqp0',mediumLarge:'Heading_paddingLeft_mediumLarge__36kgqp10 Heading_HeadingStyle__36kgqp0',large:'Heading_paddingLeft_large__36kgqp11 Heading_HeadingStyle__36kgqp0',xLarge:'Heading_paddingLeft_xLarge__36kgqp12 Heading_HeadingStyle__36kgqp0'};
-var paddingRight = {none:'Heading_paddingRight_none__36kgqpf Heading_HeadingStyle__36kgqp0',xSmall:'Heading_paddingRight_xSmall__36kgqpg Heading_HeadingStyle__36kgqp0',small:'Heading_paddingRight_small__36kgqph Heading_HeadingStyle__36kgqp0',mediumSmall:'Heading_paddingRight_mediumSmall__36kgqpi Heading_HeadingStyle__36kgqp0',medium:'Heading_paddingRight_medium__36kgqpj Heading_HeadingStyle__36kgqp0',mediumLarge:'Heading_paddingRight_mediumLarge__36kgqpk Heading_HeadingStyle__36kgqp0',large:'Heading_paddingRight_large__36kgqpl Heading_HeadingStyle__36kgqp0',xLarge:'Heading_paddingRight_xLarge__36kgqpm Heading_HeadingStyle__36kgqp0'};
-var paddingTop = {none:'Heading_paddingTop_none__36kgqp7 Heading_HeadingStyle__36kgqp0',xSmall:'Heading_paddingTop_xSmall__36kgqp8 Heading_HeadingStyle__36kgqp0',small:'Heading_paddingTop_small__36kgqp9 Heading_HeadingStyle__36kgqp0',mediumSmall:'Heading_paddingTop_mediumSmall__36kgqpa Heading_HeadingStyle__36kgqp0',medium:'Heading_paddingTop_medium__36kgqpb Heading_HeadingStyle__36kgqp0',mediumLarge:'Heading_paddingTop_mediumLarge__36kgqpc Heading_HeadingStyle__36kgqp0',large:'Heading_paddingTop_large__36kgqpd Heading_HeadingStyle__36kgqp0',xLarge:'Heading_paddingTop_xLarge__36kgqpe Heading_HeadingStyle__36kgqp0'};
-
-var HeadingTags;
-(function(HeadingTags) {
+var HeadingTags = /*#__PURE__*/ function(HeadingTags) {
     HeadingTags["h1"] = "h1";
     HeadingTags["h2"] = "h2";
     HeadingTags["h3"] = "h3";
     HeadingTags["h4"] = "h4";
-})(HeadingTags || (HeadingTags = {}));
+    return HeadingTags;
+}({});
 
 function _define_property$5(obj, key, value) {
     if (key in obj) {
@@ -1398,24 +1411,29 @@ function Heading(param) {
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React.createElement(Tag, {
         id: id,
-        style: _object_spread$5({}, style),
-        className: classnames('Heading', HeadingStyle, fontSizeVariant[fontSize], paddingTop[padding[0]], paddingRight[(_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0]], paddingBottom[(_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0]], paddingLeft[(_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0]], className)
+        style: _object_spread$5({
+            fontSize: "var(--text-".concat(fontSize),
+            paddingTop: "var(--p-".concat(padding[0], ")"),
+            paddingRight: "var(--p-".concat((_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0], ")"),
+            paddingBottom: "var(--p-".concat((_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0], ")"),
+            paddingLeft: "var(--p-".concat((_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0], ")"),
+            WebkitUserSelect: 'none',
+            userSelect: 'none'
+        }, style),
+        className: classnames('Heading', 'font-bold', 'select-none', "text-".concat(fontSize), className)
     }, value ? value : children);
 }
 Heading.fontSize = FontSizes;
 Heading.tag = HeadingTags;
 Heading.padding = Spacing;
 
-var MatrixCellStyle = 'Matrix_MatrixCellStyle__1k8zbl81';
-var MatrixHeaderCellStyle = 'Matrix_MatrixHeaderCellStyle__1k8zbl80';
-
 var Matrix = function(param) {
     var rows = param.rows, columns = param.columns;
     return /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
         gap: Box.gap.xSmall
     }, /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Box, {
-        className: classnames(MatrixHeaderCellStyle),
+        className: classnames('m-xs', 'flex-1'),
         padding: [
             Spacing.medium
         ]
@@ -1423,7 +1441,7 @@ var Matrix = function(param) {
         var colKey = v4();
         return /*#__PURE__*/ React__default.createElement(Box, {
             key: colKey,
-            className: classnames(MatrixHeaderCellStyle),
+            className: classnames('m-xs', 'flex-1'),
             padding: [
                 Spacing.medium
             ]
@@ -1436,7 +1454,7 @@ var Matrix = function(param) {
             var colKey = v4();
             return /*#__PURE__*/ React__default.createElement(Box, {
                 key: colKey,
-                className: classnames(i === 0 ? MatrixHeaderCellStyle : MatrixCellStyle),
+                className: classnames(i === 0 ? 'bg-section' : ''),
                 padding: [
                     Spacing.medium
                 ]
@@ -1445,9 +1463,6 @@ var Matrix = function(param) {
     }));
 };
 
-var IndicatorLightStyle = 'IndicatorLight_IndicatorLightStyle__16whmu90';
-var variants = {small:'IndicatorLight_variants_small__16whmu91 IndicatorLight_IndicatorLightStyle__16whmu90',large:'IndicatorLight_variants_large__16whmu92 IndicatorLight_IndicatorLightStyle__16whmu90',isActive:'IndicatorLight_variants_isActive__16whmu93 IndicatorLight_IndicatorLightStyle__16whmu90'};
-
 function _array_like_to_array$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -1561,13 +1576,8 @@ function _object_spread$4(target) {
     }
     return target;
 }
-var IndicatorLightType;
-(function(IndicatorLightType) {
-    IndicatorLightType["small"] = "small";
-    IndicatorLightType["large"] = "large";
-})(IndicatorLightType || (IndicatorLightType = {}));
 function IndicatorLight(param) {
-    var className = param.className, label = param.label, color = param.color, _param_type = param.type, type = _param_type === void 0 ? "small" : _param_type, style = param.style, id = param.id;
+    var className = param.className, label = param.label, color = param.color, style = param.style, id = param.id;
     var isActive = useIndicator({
         id: id
     }).isActive;
@@ -1577,18 +1587,93 @@ function IndicatorLight(param) {
         alignItems: Box.alignItems.center
     }, /*#__PURE__*/ React__default.createElement("div", {
         id: id,
-        className: classnames('IndicatorLight', IndicatorLightStyle, isActive ? variants.isActive : '', variants[type], className),
+        className: classnames('IndicatorLight', 'bg-input', className),
         style: _object_spread$4({
+            width: '12px',
+            height: '12px',
             background: isActive ? color : ''
         }, style)
     }), label ? /*#__PURE__*/ React__default.createElement(Label, {
         value: label
     }) : null);
 }
-IndicatorLight.type = IndicatorLightType;
 
-var KeyValueDisplayScreenStyle = 'KeyValueDisplayScreen_KeyValueDisplayScreenStyle__jvz12j0';
-var valueStyle = 'KeyValueDisplayScreen_valueStyle__jvz12j1';
+var css_248z$2 = ".IconButton {\n  height: 28px;\n  background: var(--bg-page);\n  &:hover {\n    filter: brightness(80%);\n  }\n}\n";
+styleInject(css_248z$2);
+
+var ButtonIcon = /*#__PURE__*/ function(ButtonIcon) {
+    ButtonIcon["undo"] = "UndoIcon";
+    ButtonIcon["redo"] = "RedoIcon";
+    return ButtonIcon;
+}(ButtonIcon || {});
+var UndoIcon = function(param) {
+    var color = param.color;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        width: "24px",
+        height: "24px",
+        viewBox: "0 0 24 24",
+        "stroke-width": "1.5",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M4.5 8C8.5 8 11 8 15 8C15 8 15 8 15 8C15 8 20 8 20 12.7059C20 18 15 18 15 18C11.5714 18 9.71429 18 6.28571 18",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M7.5 11.5C6.13317 10.1332 5.36683 9.36683 4 8C5.36683 6.63317 6.13317 5.86683 7.5 4.5",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }));
+};
+var RedoIcon = function(param) {
+    var color = param.color;
+    return /*#__PURE__*/ React__default.createElement("svg", {
+        width: "24px",
+        height: "24px",
+        viewBox: "0 0 24 24",
+        "stroke-width": "1.5",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        color: color
+    }, /*#__PURE__*/ React__default.createElement("path", {
+        d: "M19.5 8C15.5 8 13 8 9 8C9 8 9 8 9 8C9 8 4 8 4 12.7059C4 18 9 18 9 18C12.4286 18 14.2857 18 17.7143 18",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }), /*#__PURE__*/ React__default.createElement("path", {
+        d: "M16.5 11.5C17.8668 10.1332 18.6332 9.36683 20 8C18.6332 6.63317 17.8668 5.86683 16.5 4.5",
+        stroke: color,
+        "stroke-width": "1.5",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+    }));
+};
+var icons = {
+    UndoIcon: UndoIcon,
+    RedoIcon: RedoIcon
+};
+function IconButton(param) {
+    var id = param.id, icon = param.icon, onClick = param.onClick; param.className; var style = param.style;
+    var Icon = icons[icon];
+    return /*#__PURE__*/ React__default.createElement(Button, {
+        id: id,
+        className: 'IconButton className',
+        onClick: onClick,
+        padding: [
+            Button.padding.medium
+        ],
+        style: style
+    }, /*#__PURE__*/ React__default.createElement(Icon, {
+        color: "var(--color-text)"
+    }));
+}
+IconButton.icon = ButtonIcon;
 
 function _define_property$3(obj, key, value) {
     if (key in obj) {
@@ -1633,20 +1718,33 @@ function KeyValueDisplayScreen(param) {
     }, data ? /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, /*#__PURE__*/ React__default.createElement(Box, {
         justifyContent: Box.justifyContent.flexStart,
         padding: [
-            Box.padding.mediumSmall,
+            Box.padding.xSmall,
+            Box.padding.medium,
+            Box.padding.none,
             Box.padding.medium
         ],
-        className: KeyValueDisplayScreenStyle
+        className: classnames('KeyValueDisplayScreen', 'uppercase', 'bg-popover', 'rounded-sm'),
+        style: {
+            maxWidth: '250px',
+            backgroundColor: "var(--bg-page)",
+            color: "var(--color-text)"
+        }
     }, /*#__PURE__*/ React__default.createElement(Label, {
-        className: valueStyle,
+        className: 'KeyValueDisplayScreen-Item',
         padding: [
-            Label.padding.none,
+            Label.padding.xSmall,
             Label.padding.mediumLarge,
             Label.padding.none,
-            Label.padding.none
+            Label.padding.medium
         ]
     }, data === null || data === void 0 ? void 0 : data.key), /*#__PURE__*/ React__default.createElement(Label, {
-        className: valueStyle
+        padding: [
+            Label.padding.xSmall,
+            Label.padding.mediumLarge,
+            Label.padding.none,
+            Label.padding.none
+        ],
+        className: 'KeyValueDisplayScreen-Item'
     }, 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, "Sparkler v1.8.2")), /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(Label, null, "Antimatter audio"))));
 }
 
@@ -1717,7 +1815,8 @@ function LinePlot(param) {
     })));
 }
 
-var OscilloscopeStyle = 'Oscilloscope_OscilloscopeStyle__tma0ux0';
+var css_248z$1 = ".Oscilloscope {\n    background: #0EAC8B;\n    box-shadow: inset 0 0 20px #086350;\n    height: 200px;\n  };";
+styleInject(css_248z$1);
 
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -1816,7 +1915,7 @@ function Oscilloscope(param) {
         style: _object_spread$2({
             height: height
         }, style),
-        className: classnames(OscilloscopeStyle, className)
+        className: classnames('Oscilloscope', className)
     }, /*#__PURE__*/ React__default.createElement(LinePlot, {
         width: width,
         height: height,
@@ -1824,9 +1923,8 @@ function Oscilloscope(param) {
     }));
 }
 
-var ModuleHeaderStyle = 'ModuleHeader_ModuleHeaderStyle__1o3vm7i0';
-var ModuleNameStyle = 'ModuleHeader_ModuleNameStyle__1o3vm7i1';
-var ModuleSubheaderStyle = 'ModuleHeader_ModuleSubheaderStyle__1o3vm7i2';
+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";
+styleInject(css_248z);
 
 function _define_property$1(obj, key, value) {
     if (key in obj) {
@@ -1858,6 +1956,8 @@ function _object_spread$1(target) {
 }
 function ModuleHeader(param) {
     var title = param.title, subtitle = param.subtitle, activeItem = param.activeItem, className = param.className, style = param.style;
+    var undo = Juce.getNativeFunction('undo');
+    var redo = Juce.getNativeFunction('redo');
     return /*#__PURE__*/ React__default.createElement(Box, {
         gap: Box.gap.medium,
         tag: Box.tag.header,
@@ -1865,37 +1965,53 @@ function ModuleHeader(param) {
             Box.padding.medium,
             Box.padding.large
         ],
-        className: classnames(ModuleHeaderStyle, className),
+        className: classnames('ModuleHeader', className),
         style: _object_spread$1({}, style)
     }, /*#__PURE__*/ React__default.createElement(Box, {
         style: {
             width: '1000px'
         },
-        justifyContent: Box.justifyContent.flexStart,
-        gap: Box.gap.xLarge
+        justifyContent: Box.justifyContent.flexStart
     }, /*#__PURE__*/ React__default.createElement(Box, {
         flexDirection: Box.flexDirection.column,
-        flex: "0 1 200px",
+        flex: "0 0 170px",
         alignItems: Box.alignItems.flexStart
     }, /*#__PURE__*/ React__default.createElement(Heading, {
         fontSize: Heading.fontSize.title,
-        className: ModuleNameStyle
+        className: 'ModuleHeader-Name'
     }, title), /*#__PURE__*/ React__default.createElement(Heading, {
         fontSize: Heading.fontSize.small,
-        className: ModuleSubheaderStyle,
+        className: 'ModuleHeader-Subheading',
         tag: Heading.tag.h2
     }, subtitle)), /*#__PURE__*/ React__default.createElement(Box, {
-        alignItems: Box.alignItems.flexStart
+        alignItems: Box.alignItems.flexStart,
+        flex: "0 0 250px"
     }, /*#__PURE__*/ React__default.createElement(KeyValueDisplayScreen, {
         data: {
             key: activeItem === null || activeItem === void 0 ? void 0 : activeItem.key,
             value: activeItem === null || activeItem === void 0 ? void 0 : activeItem.value
         }
+    })), /*#__PURE__*/ React__default.createElement(Box, {
+        flex: "0"
+    }, /*#__PURE__*/ React__default.createElement(IconButton, {
+        id: "undo",
+        icon: IconButton.icon.undo,
+        onClick: function() {
+            return undo().then(function() {
+                console.log('undo');
+            });
+        }
+    }), /*#__PURE__*/ React__default.createElement(IconButton, {
+        id: "redo",
+        onClick: function() {
+            return redo().then(function() {
+                console.log('redo');
+            });
+        },
+        icon: IconButton.icon.redo
     }))));
 }
 
-var ModuleFooterStyle = 'ModuleFooter_ModuleFooterStyle__1rcr3500';
-
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -1933,17 +2049,12 @@ function ModuleFooter(param) {
             Box.padding.medium,
             Box.padding.large
         ],
-        className: classnames(ModuleFooterStyle, className),
-        style: _object_spread({}, style)
+        className: classnames(className),
+        style: _object_spread({
+            backgroundColor: 'var(--bg-section)'
+        }, style)
     });
 }
 
-function ThemeProvider(param) {
-    var theme = param.theme, className = param.className, children = param.children;
-    return /*#__PURE__*/ React__default.createElement("div", {
-        className: classnames('root', theme ? theme : '', className)
-    }, children);
-}
-
-export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, Heading, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, ThemeProvider, clamp, decimalToPercent, getPosition, getTransformString, normalisedToScaled, percentToDecimal, scaledToNormalised as scaledTonormalised, useSlider };
+export { Slider as BarSlider, Box, Button, Dropdown, FontSizes, Heading, IconButton, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleFooter, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Spacing, Tabs, clamp, decimalToPercent, getPosition, getTransformString, normalisedToScaled, percentToDecimal, scaledToNormalised as scaledTonormalised, useSlider };
 //# sourceMappingURL=index.js.map