@antimatter-audio/antimatter-ui 1.2.0 → 1.3.0

package/dist/index.d.ts

@@ -38,6 +38,14 @@ declare enum SPACING {
     LARGE = "large",
     X_LARGE = "xlarge"
 }
+declare enum POSITION {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+declare enum DIRECTION {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
 
 interface GridColProps {
     span?: number;
@@ -79,6 +87,9 @@ declare const Dropdown: React__default.FC<DropdownProps>;
 
 interface KnobProps {
     id: any;
+    label?: string;
+    labelPosition?: POSITION;
+    showValue?: boolean;
     className?: string;
     style?: object;
 }
@@ -86,9 +97,13 @@ declare const Knob: React__default.FC<React__default.PropsWithChildren<KnobProps
 
 interface SliderProps {
     id: any;
+    label?: string;
+    labelPosition?: POSITION;
+    orientation?: DIRECTION;
+    showValue?: boolean;
     className?: string;
 }
-declare const Slider: React.FC<React.PropsWithChildren<SliderProps>>;
+declare const Slider: React__default.FC<React__default.PropsWithChildren<SliderProps>>;
 
 declare enum TEXT_HEADER_LEVELS {
     H1 = "h1",
@@ -114,10 +129,6 @@ interface TextLabelProps {
 }
 declare const TextLabel: React.FC<React.PropsWithChildren<TextLabelProps>>;
 
-declare enum DIRECTION {
-    VETICAL = "vertical",
-    HORIZONTAL = "horizontal"
-}
 interface LayoutProps {
     className?: string;
     style?: React__default.CSSProperties;
@@ -126,8 +137,10 @@ interface LayoutProps {
     gap?: SPACING;
     direction?: DIRECTION;
     width?: string;
+    height?: string;
+    border?: boolean;
     padding?: Array<SPACING>;
 }
 declare const Layout: React__default.FC<React__default.PropsWithChildren<LayoutProps>>;
 
-export { Button, Col, DIRECTION, Dropdown, FLEX_DIRECTION, SPACING as GRID_SPACING, Knob, Layout, Row, SPACING, Slider, TEXT_HEADER_LEVELS, Tabs, TextHeader, TextLabel };
+export { Button, Col, DIRECTION, Dropdown, FLEX_DIRECTION, SPACING as GRID_SPACING, Knob, Layout, POSITION, Row, SPACING, Slider, TEXT_HEADER_LEVELS, Tabs, TextHeader, TextLabel };

package/dist/index.js

@@ -50,6 +50,16 @@ var SPACING;
     SPACING["LARGE"] = "large";
     SPACING["X_LARGE"] = "xlarge";
 })(SPACING || (SPACING = {}));
+var POSITION;
+(function(POSITION) {
+    POSITION["TOP"] = "top";
+    POSITION["BOTTOM"] = "bottom";
+})(POSITION || (POSITION = {}));
+var DIRECTION;
+(function(DIRECTION) {
+    DIRECTION["VERTICAL"] = "vertical";
+    DIRECTION["HORIZONTAL"] = "horizontal";
+})(DIRECTION || (DIRECTION = {}));
 
 var Tabs = function(param) {
     var items = param.items, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
@@ -94,15 +104,15 @@ var BUTTON_SIZE_CLASSES = {
     LARGE: 'button-large'
 };
 
-function _array_like_to_array$2(arr, len) {
+function _array_like_to_array$3(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$2(arr) {
+function _array_with_holes$3(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$2(arr, i) {
+function _iterable_to_array_limit$3(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -126,23 +136,23 @@ function _iterable_to_array_limit$2(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$2() {
+function _non_iterable_rest$3() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$2(arr, i) {
-    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
+function _sliced_to_array$3(arr, i) {
+    return _array_with_holes$3(arr) || _iterable_to_array_limit$3(arr, i) || _unsupported_iterable_to_array$3(arr, i) || _non_iterable_rest$3();
 }
-function _unsupported_iterable_to_array$2(o, minLen) {
+function _unsupported_iterable_to_array$3(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$3(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
 }
 var Button = function(param) {
     var disabled = param.disabled, onClick = param.onClick, text = param.text, id = param.id, className = param.className, style = param.style, children = param.children, _param_size = param.size, size = _param_size === void 0 ? BUTTON_SIZE_CLASSES[BUTTON_SIZE.SMALL] : _param_size;
-    var _React_useState = _sliced_to_array$2(React.useState(false), 2), selected = _React_useState[0], setSelected = _React_useState[1];
+    var _React_useState = _sliced_to_array$3(React.useState(false), 2), selected = _React_useState[0], setSelected = _React_useState[1];
     var buttonState = Juce.getToggleState(id);
     var handleClick = onClick ? onClick : function() {
         setSelected(!selected);
@@ -308,15 +318,15 @@ styleInject(css_248z$6);
 var css_248z$5 = ".Dropdown-button {\n  font-size: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-right: 8px;\n  padding-left: 8px;\n  cursor: pointer;\n  vertical-align: middle;\n  white-space: nowrap;\n  text-decoration: none;\n  text-transform: uppercase;\n  text-align: center;\n  color: #fff;\n  background-color: #737373;\n  border: 0;\n  border-radius: 3px;\n  appearance: none;\n  user-select: none;\n  height: 24px;\n}\n\n.Dropdown-button:hover,\n.Dropdown-button:focus,\n.Dropdown-button:active {\n  outline: 0;\n}\n\n.Dropdown-button:hover {\n  color: #eee;\n  background-color: #606060;\n}\n\n.Dropdown-button:disabled,\n.Dropdown-button.disabled {\n  cursor: not-allowed;\n  color: #404040;\n  background: #858585;\n}\n.Dropdown-button:disabled:hover,\n.Dropdown-button.disabled:hover {\n  color: #404040;\n  background: #858585;\n}\n\n.Dropdown-menu {\n  background-color: #979797;\n  z-index: 10;\n}\n\n.Dropdown-menu-item {\n  font-family: \"Arial\", sans-serif;\n  color: #fff;\n  padding: 12px;\n  background-color: #979797;\n  cursor: pointer;\n}\n\n.Dropdown-menu-item:hover {\n  background-color: #606060;\n}";
 styleInject(css_248z$5);
 
-function _array_like_to_array$1(arr, len) {
+function _array_like_to_array$2(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$1(arr) {
+function _array_with_holes$2(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$1(arr, i) {
+function _iterable_to_array_limit$2(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -340,23 +350,23 @@ function _iterable_to_array_limit$1(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$1() {
+function _non_iterable_rest$2() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$1(arr, i) {
-    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
+function _sliced_to_array$2(arr, i) {
+    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
 }
-function _unsupported_iterable_to_array$1(o, minLen) {
+function _unsupported_iterable_to_array$2(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$1(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
 }
 var Dropdown = function(param) {
     var items = param.items, className = param.className, id = param.id;
-    var _useState = _sliced_to_array$1(useState(0), 2), selectedIndex = _useState[0], setSelectedIndex = _useState[1];
+    var _useState = _sliced_to_array$2(useState(0), 2), selectedIndex = _useState[0], setSelectedIndex = _useState[1];
     var dropdownState = Juce.getComboBoxState(id);
     var handleChange = function(val) {
         setSelectedIndex(val);
@@ -386,15 +396,37 @@ var Dropdown = function(param) {
 var css_248z$4 = ".Knob {\n  height: 50px;\n  background-color: #737373;\n  width: 50px;\n  border-radius: 100%;\n  position: relative;\n  aspect-ratio: 1/1;\n}\n\n.Knob-inner {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  height: 100%;\n  width: 100%;\n}\n\n.Knob-marker {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 50%;\n  width: 2px;\n  height: 50%;\n  border-radius: 125rem;\n  background-color: #fff;\n  transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}";
 styleInject(css_248z$4);
 
-function _array_like_to_array(arr, len) {
+var css_248z$3 = ".TextLabel {\n  font-family: \"Arial\", sans-serif;\n  font-size: 14px;\n  text-align: center;\n}";
+styleInject(css_248z$3);
+
+var TextLabel = function(param) {
+    var text = param.text, id = param.id, className = param.className, style = param.style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+        SPACING.NONE
+    ] : _param_padding, children = param.children;
+    return /*#__PURE__*/ React.createElement("span", {
+        id: id,
+        style: style,
+        className: classnames('TextLabel', className, padding.length === 1 && 'padding-around-' + padding, padding.length === 2 && 'padding-vertical-' + padding[0], padding.length === 2 && 'padding-horizontal-' + padding[1], padding.length === 4 && 'padding-top-' + [
+            padding[0]
+        ], padding.length === 4 && 'padding-right-' + [
+            padding[1]
+        ], padding.length === 4 && 'padding-bottom-' + [
+            padding[2]
+        ], padding.length === 4 && 'padding-left-' + [
+            padding[3]
+        ])
+    }, text ? text : children);
+};
+
+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];
     return arr2;
 }
-function _array_with_holes(arr) {
+function _array_with_holes$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit(arr, i) {
+function _iterable_to_array_limit$1(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -418,31 +450,46 @@ function _iterable_to_array_limit(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest() {
+function _non_iterable_rest$1() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+function _sliced_to_array$1(arr, i) {
+    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
 }
-function _unsupported_iterable_to_array(o, minLen) {
+function _unsupported_iterable_to_array$1(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$1(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
 }
 var Knob = function(param) {
-    var id = param.id, className = param.className;
-    var _useState = _sliced_to_array(useState(0), 2), value = _useState[0], setValue = _useState[1];
-    // console.log(value, 'VALUE')
+    var label = param.label, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? POSITION.TOP : _param_labelPosition, _param_showValue = param.showValue, showValue = _param_showValue === void 0 ? true : _param_showValue, id = param.id, className = param.className;
+    var _useState = _sliced_to_array$1(useState(0), 2), value = _useState[0], setValue = _useState[1];
     useEffect(function() {
         var knobState = Juce.getSliderState(id);
         knobState.setNormalisedValue(Math.round(value) / 100);
     }, [
         value
     ]);
-    return /*#__PURE__*/ React__default.createElement(KnobHeadless, {
+    return /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }
+    }, label && /*#__PURE__*/ React__default.createElement(TextLabel, {
+        style: {
+            order: labelPosition === POSITION.BOTTOM ? 3 : 0
+        },
+        padding: [
+            SPACING.SMALL,
+            SPACING.NONE
+        ],
+        text: label
+    }), /*#__PURE__*/ React__default.createElement(KnobHeadless, {
         className: classnames('Knob', className),
         id: id !== null && id !== void 0 ? id : 'Knob',
         "aria-labelledby": "Knob",
@@ -455,7 +502,9 @@ var Knob = function(param) {
         },
         dragSensitivity: 0.009,
         orientation: 'vertical',
-        onValueRawChange: setValue
+        onValueRawChange: function(val) {
+            return setValue(Math.round(val));
+        }
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: "Knob-inner",
         style: {
@@ -463,26 +512,109 @@ var Knob = function(param) {
         }
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: "Knob-marker"
-    })));
+    }))), showValue && /*#__PURE__*/ React__default.createElement(TextLabel, {
+        text: "".concat(value),
+        padding: [
+            SPACING.SMALL,
+            SPACING.NONE
+        ]
+    }));
 };
 
-var css_248z$3 = ".Slider {\n  min-width: 100px;\n  width: 100%;\n}\n\n.track {\n  height: 12px;\n  background-color: #737373;\n}\n\n.thumb {\n  height: 12px;\n  width: 12px;\n  background-color: #404040;\n}";
-styleInject(css_248z$3);
+var css_248z$2 = ".Slider {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.track {\n  background-color: #737373;\n}\n.horizontal .track {\n  height: 12px;\n}\n.vertical .track {\n  width: 12px;\n}\n\n.thumb {\n  height: 12px;\n  width: 12px;\n  background-color: #404040;\n}";
+styleInject(css_248z$2);
 
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
 var Slider = function(param) {
-    var id = param.id, className = param.className;
+    var label = param.label, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? POSITION.TOP : _param_labelPosition, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? DIRECTION.VERTICAL : _param_orientation, _param_showValue = param.showValue, showValue = _param_showValue === void 0 ? true : _param_showValue, id = param.id, className = param.className;
+    var _useState = _sliced_to_array(useState(0), 2), value = _useState[0], setValue = _useState[1];
     var handleChange = function(val) {
+        setValue(val);
         var sliderState = Juce.getSliderState(id);
         sliderState.setNormalisedValue(val / 100);
     };
-    return /*#__PURE__*/ React.createElement(ReactSlider, {
+    return /*#__PURE__*/ React__default.createElement("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minWidth: orientation === DIRECTION.HORIZONTAL ? '100px' : 'auto',
+            minHeight: orientation === DIRECTION.VERTICAL ? '100px' : 'auto',
+            width: orientation === DIRECTION.HORIZONTAL ? '100%' : label ? '55px' : '12px',
+            height: orientation === DIRECTION.VERTICAL ? '100%' : '55px'
+        }
+    }, label && /*#__PURE__*/ React__default.createElement(TextLabel, {
+        style: {
+            order: labelPosition === POSITION.BOTTOM ? 3 : 0
+        },
+        padding: [
+            SPACING.SMALL,
+            SPACING.NONE
+        ],
+        text: label
+    }), /*#__PURE__*/ React__default.createElement(ReactSlider, {
+        invert: orientation === DIRECTION.VERTICAL,
+        orientation: orientation,
         onChange: handleChange,
-        className: classnames('Slider', className)
-    });
+        className: classnames('Slider', orientation === DIRECTION.HORIZONTAL ? 'horizontal' : 'vertical', className)
+    }), showValue && /*#__PURE__*/ React__default.createElement(TextLabel, {
+        // style={{ flex: 1 }}
+        text: "".concat(value),
+        padding: [
+            SPACING.SMALL,
+            SPACING.NONE
+        ]
+    }));
 };
 
-var css_248z$2 = ".h1 {\n  font-family: \"Arial\", sans-serif;\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.h2 {\n  font-family: \"Arial\", sans-serif;\n  font-size: 16px;\n  font-weight: bold;\n}";
-styleInject(css_248z$2);
+var css_248z$1 = ".h1 {\n  font-family: \"Arial\", sans-serif;\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.h2 {\n  font-family: \"Arial\", sans-serif;\n  font-size: 16px;\n  font-weight: bold;\n}";
+styleInject(css_248z$1);
 
 var TEXT_HEADER_LEVELS;
 (function(TEXT_HEADER_LEVELS) {
@@ -510,28 +642,6 @@ var TextHeader = function(param) {
     }, text ? text : children);
 };
 
-var css_248z$1 = ".TextLabel {\n  font-family: \"Arial\", sans-serif;\n  font-size: 16px;\n}";
-styleInject(css_248z$1);
-
-var TextLabel = function(param) {
-    var text = param.text, id = param.id, className = param.className, style = param.style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
-        SPACING.NONE
-    ] : _param_padding, children = param.children;
-    return /*#__PURE__*/ React.createElement("span", {
-        id: id,
-        style: style,
-        className: classnames('TextLabel', className, padding.length === 1 && 'padding-around-' + padding, padding.length === 2 && 'padding-vertical-' + padding[0], padding.length === 2 && 'padding-horizontal-' + padding[1], padding.length === 4 && 'padding-top-' + [
-            padding[0]
-        ], padding.length === 4 && 'padding-right-' + [
-            padding[1]
-        ], padding.length === 4 && 'padding-bottom-' + [
-            padding[2]
-        ], padding.length === 4 && 'padding-left-' + [
-            padding[3]
-        ])
-    }, text ? text : children);
-};
-
 var css_248z = ".Layout {\n  display: flex;\n  width: 100%;\n}\n.Layout.gap-xsmall {\n  column-gap: 2px;\n}\n.Layout.gap-small {\n  column-gap: 4px;\n}\n.Layout.gap-mediumsmall {\n  column-gap: 8px;\n}\n.Layout.gap-medium {\n  column-gap: 12px;\n}\n.Layout.gap-mediumlarge {\n  column-gap: 16px;\n}\n.Layout.gap-large {\n  column-gap: 20px;\n}\n.Layout.gap-xlarge {\n  column-gap: 24px;\n}";
 styleInject(css_248z);
 
@@ -582,13 +692,8 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-var DIRECTION;
-(function(DIRECTION) {
-    DIRECTION["VETICAL"] = "vertical";
-    DIRECTION["HORIZONTAL"] = "horizontal";
-})(DIRECTION || (DIRECTION = {}));
 var Layout = function(param) {
-    var centerHorizontal = param.centerHorizontal, centerVertical = param.centerVertical, className = param.className, style = param.style, children = param.children, _param_width = param.width, width = _param_width === void 0 ? '100%' : _param_width, _param_direction = param.direction, direction = _param_direction === void 0 ? "horizontal" : _param_direction, _param_padding = param.padding, padding = _param_padding === void 0 ? [
+    var centerHorizontal = param.centerHorizontal, centerVertical = param.centerVertical, className = param.className, style = param.style, children = param.children, _param_width = param.width, width = _param_width === void 0 ? '100%' : _param_width, _param_height = param.height, height = _param_height === void 0 ? '100%' : _param_height, _param_border = param.border, border = _param_border === void 0 ? false : _param_border, _param_direction = param.direction, direction = _param_direction === void 0 ? DIRECTION.HORIZONTAL : _param_direction, _param_padding = param.padding, padding = _param_padding === void 0 ? [
         SPACING.NONE,
         SPACING.NONE,
         SPACING.MEDIUM,
@@ -605,13 +710,15 @@ var Layout = function(param) {
             padding[3]
         ]),
         style: _object_spread_props(_object_spread({}, style), {
+            border: border ? '2px solid #999' : '',
             maxWidth: width,
-            flexDirection: direction === "horizontal" ? 'row' : 'column',
+            height: height,
+            flexDirection: direction === DIRECTION.HORIZONTAL ? 'row' : 'column',
             justifyContent: centerHorizontal ? 'center' : 'flex-start',
             alignItems: centerVertical ? 'center' : 'flex-start'
         })
     }, children);
 };
 
-export { Button, Col, DIRECTION, Dropdown, FLEX_DIRECTION, SPACING as GRID_SPACING, Knob, Layout, Row, SPACING, Slider, TEXT_HEADER_LEVELS, Tabs, TextHeader, TextLabel };
+export { Button, Col, DIRECTION, Dropdown, FLEX_DIRECTION, SPACING as GRID_SPACING, Knob, Layout, POSITION, Row, SPACING, Slider, TEXT_HEADER_LEVELS, Tabs, TextHeader, TextLabel };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/package.json

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