@antimatter-audio/antimatter-ui 7.0.2 → 7.2.0

package/dist/assets/src/components/ModuleHeader/ModuleHeader.css.ts.vanilla-D0g1ku0n.css

@@ -0,0 +1,4 @@
+.ModuleHeader_ModuleHeaderStyle__1in8y4q0 {
+  background-color: var(--colors-background-header__1gden72h);
+  color: var(--colors-text-primary__1gden72v);
+}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default from 'react';
 import { Spacing as Spacing$1, FlexWrap as FlexWrap$1 } from 'common/types';
-import { FlexDirection as FlexDirection$1, AlignItems, JustifyContent as JustifyContent$1 } from 'core/Layout/types';
+import { FlexDirection as FlexDirection$1, AlignItems as AlignItems$1, JustifyContent as JustifyContent$1 } from 'core/Layout/types';
 export { defaultTheme, root, themeValues } from 'styles.css';
 import * as _use_gesture_react_dist_declarations_src_types from '@use-gesture/react/dist/declarations/src/types';
 import { SliderOrientation as SliderOrientation$1, JuceSliderProperties as JuceSliderProperties$1 } from 'core/Slider/types';
@@ -176,20 +176,10 @@ declare enum FlexDirection {
     row = "row",
     column = "column"
 }
-declare enum FlexAlign {
-    flexStart = "flex-start",
-    flexEnd = "flex-end",
-    center = "center"
-}
 declare enum FlexWrap {
     wrap = "wrap",
     noWrap = "nowrap"
 }
-declare enum JustifyContent {
-    flexStart = "flex-start",
-    flexEnd = "flex-end",
-    center = "center"
-}
 declare enum Height {
     full = "100%",
     auto = "auto"
@@ -257,10 +247,31 @@ declare namespace IndicatorLight {
     var type: typeof IndicatorLightType;
 }
 
+declare enum JustifyContent {
+    flexStart = "flex-start",
+    flexEnd = "flex-end",
+    center = "center",
+    spaceBetween = "space-between",
+    spaceAround = "space-around",
+    spaceEvenly = "space-evenly"
+}
+declare enum AlignItems {
+    flexStart = "flex-start",
+    flexEnd = "flex-end",
+    center = "center",
+    stretch = "stretch",
+    baseline = "baseline"
+}
+declare enum LayoutTags {
+    header = "header",
+    main = "main",
+    section = "section"
+}
+
 interface LayoutProps {
     className?: string;
     style?: React__default.CSSProperties;
-    alignItems?: FlexAlign;
+    alignItems?: AlignItems;
     justifyContent?: JustifyContent;
     gap?: Spacing;
     flexWrap?: FlexWrap;
@@ -269,10 +280,11 @@ interface LayoutProps {
     height?: Height | string;
     border?: boolean;
     padding?: Array<Spacing>;
+    tag?: LayoutTags;
 }
-declare function Layout({ alignItems, justifyContent, className, style, children, width, flexWrap, height, border, flexDirection, padding, gap, }: React__default.PropsWithChildren<LayoutProps>): React__default.JSX.Element;
+declare function Layout({ alignItems, justifyContent, className, style, children, width, flexWrap, height, border, flexDirection, padding, gap, tag, }: React__default.PropsWithChildren<LayoutProps>): React__default.JSX.Element;
 declare namespace Layout {
-    var alignItems: typeof FlexAlign;
+    var alignItems: typeof AlignItems;
     var justifyContent: typeof JustifyContent;
     var gap: typeof Spacing;
     var flexDirection: typeof FlexDirection;
@@ -287,7 +299,7 @@ interface LayoutFlexItemProps {
     offset?: number;
     padding?: Array<Spacing$1>;
     justifyContent?: JustifyContent$1;
-    alignItems?: AlignItems;
+    alignItems?: AlignItems$1;
     flexDirection?: FlexDirection$1;
     flexWrap?: FlexWrap$1;
     flex?: string;
@@ -301,7 +313,7 @@ declare function LayoutFlexItem({ justifyContent, alignItems, flexDirection, cla
 declare namespace LayoutFlexItem {
     var padding: typeof Spacing$1;
     var flexDirection: typeof FlexDirection$1;
-    var alignItems: typeof AlignItems;
+    var alignItems: typeof AlignItems$1;
     var justifyContent: typeof JustifyContent$1;
     var gap: typeof Spacing$1;
     var flexWrap: typeof FlexWrap$1;
@@ -323,8 +335,8 @@ declare namespace LayoutBlockItem {
 
 interface KeyValueDisplayScreenProps {
     data?: {
-        key: string;
-        value: string | number;
+        key?: string;
+        value?: string | number;
     };
     className?: string;
     style?: React__default.CSSProperties;
@@ -340,6 +352,17 @@ interface OscilloscopeProps {
 }
 declare function Oscilloscope({ width, height, className, style, id, }: OscilloscopeProps): React__default.JSX.Element;
 
+declare function ModuleHeader({ title, subtitle, activeItem, className, style, }: {
+    title: string;
+    subtitle: string;
+    activeItem: {
+        key: string;
+        value: string | number;
+    };
+    className: string;
+    style: React__default.CSSProperties;
+}): React__default.JSX.Element;
+
 declare const clamp: (val: number, min?: number, max?: number) => number;
 declare function normalizedToScaledValue({ normalizedValue, skew, end, start, }: {
     normalizedValue: number;
@@ -408,4 +431,4 @@ declare const useSlider: ({ id, mockProperties, mockInitialScaledValue, sliderOr
     properties: JuceSliderProperties$1 | null;
 };
 
-export { Slider as BarSlider, Button, CustomSlider, Dropdown, IndicatorLight, KeyValueDisplayScreen, Label, Layout, LayoutBlockItem, LayoutFlexItem, Matrix, Oscilloscope, RotarySlider, SliderValue, Tabs, TextHeader, TextInput, clamp, decimalToPercent, getNormalizedValue, getPosition, getTransformString, normalizedToScaledValue, percentToDecimal, useSlider };
+export { Slider as BarSlider, Button, CustomSlider, Dropdown, IndicatorLight, KeyValueDisplayScreen, Label, Layout, LayoutBlockItem, LayoutFlexItem, Matrix, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Tabs, TextHeader, TextInput, clamp, decimalToPercent, getNormalizedValue, getPosition, getTransformString, normalizedToScaledValue, percentToDecimal, useSlider };

package/dist/index.js

@@ -20,6 +20,7 @@ import './assets/src/core/Indicators/IndicatorLight.css.ts.vanilla-DezQz_Lo.css'
 import './assets/src/core/Layout/LayoutBlockItem.css.ts.vanilla-DqLdzK1x.css';
 import * as d3 from 'd3';
 import './assets/src/components/Oscilloscope/Oscilloscope.css.ts.vanilla-2B6OY8v0.css';
+import './assets/src/components/ModuleHeader/ModuleHeader.css.ts.vanilla-D0g1ku0n.css';
 
 var Spacing;
 (function(Spacing) {
@@ -53,6 +54,9 @@ var JustifyContent$1;
     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) {
@@ -177,7 +181,7 @@ function _array_like_to_array$4(arr, len) {
 function _array_with_holes$4(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$a(obj, key, value) {
+function _define_property$b(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -217,7 +221,7 @@ function _iterable_to_array_limit$4(arr, i) {
 function _non_iterable_rest$4() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _object_spread$a(target) {
+function _object_spread$b(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -227,7 +231,7 @@ function _object_spread$a(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$a(target, key, source[key]);
+            _define_property$b(target, key, source[key]);
         });
     }
     return target;
@@ -276,7 +280,7 @@ function Button(param) {
         id: id,
         onMouseDown: handleMouseDown,
         disabled: disabled,
-        style: _object_spread$a({}, style),
+        style: _object_spread$b({}, style),
         className: classnames('Button', defaultTheme, ButtonStyle, variants$2[size], isSelected && 'selected', className)
     }, text ? text : children);
 }
@@ -392,7 +396,7 @@ function _array_like_to_array$2(arr, len) {
 function _array_with_holes$2(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _define_property$9(obj, key, value) {
+function _define_property$a(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -432,7 +436,7 @@ function _iterable_to_array_limit$2(arr, i) {
 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 _object_spread$9(target) {
+function _object_spread$a(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -442,7 +446,7 @@ function _object_spread$9(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$9(target, key, source[key]);
+            _define_property$a(target, key, source[key]);
         });
     }
     return target;
@@ -535,7 +539,7 @@ function TextInput(param) {
     return /*#__PURE__*/ React__default.createElement("input", {
         ref: inputRef,
         className: classnames('TextInput', hasIncompleteValue || hasError ? 'is-blinking' : '', className),
-        style: _object_spread$9({
+        style: _object_spread$a({
             color: hasError ? 'red' : hasIncompleteValue ? '#999' : textColor,
             fontFamily: 'DS-DIGIB',
             fontSize: '24px'
@@ -814,7 +818,7 @@ var RotarySliderIndicatorStyle = 'RotarySlider_RotarySliderIndicatorStyle__srrsm
 var RotarySliderInnerStyle = 'RotarySlider_RotarySliderInnerStyle__srrsmo1';
 var RotarySliderStyle = 'RotarySlider_RotarySliderStyle__srrsmo0';
 
-function _define_property$8(obj, key, value) {
+function _define_property$9(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -827,7 +831,7 @@ function _define_property$8(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$8(target) {
+function _object_spread$9(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -837,7 +841,7 @@ function _object_spread$8(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$8(target, key, source[key]);
+            _define_property$9(target, key, source[key]);
         });
     }
     return target;
@@ -883,18 +887,18 @@ function RotarySlider(param) {
         }
     }, polarity === SliderPolarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         className: classnames(defaultTheme, RotarySliderCenterMarkerStyle)
-    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$2(_object_spread$8({
+    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$2(_object_spread$9({
         className: classnames(defaultTheme, RotarySliderStyle, 'Slider-rotary', polarity === SliderPolarity.linear ? 'Slider-polarity-linear' : 'Slider-polarity-bipolar', className)
     }, bindDrag()), {
         onMouseEnter: function() {
             return onMouseEnter && onMouseEnter(id, decimalToPercent(scaledValue));
         },
-        style: _object_spread$8({
+        style: _object_spread$9({
             touchAction: 'none'
         }, style)
     }), /*#__PURE__*/ React__default.createElement("div", {
         className: classnames(defaultTheme, RotarySliderInnerStyle),
-        style: _object_spread$8({
+        style: _object_spread$9({
             rotate: rotationBehavior === SliderRotationBehavior.rotateIndicator ? "".concat(polarity === SliderPolarity.linear ? normalizedValue : normalizedValue + 0.5, "turn") : ''
         }, getTransformString({
             sliderType: SliderType.rotary,
@@ -907,7 +911,7 @@ function RotarySlider(param) {
         }))
     }, /*#__PURE__*/ React__default.createElement("div", {
         className: classnames(defaultTheme, RotarySliderIndicatorStyle),
-        style: _object_spread$8({}, style)
+        style: _object_spread$9({}, style)
     }))));
 }
 RotarySlider.sliderPolarity = SliderPolarity;
@@ -916,7 +920,7 @@ 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'};
 
-function _define_property$7(obj, key, value) {
+function _define_property$8(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -929,7 +933,7 @@ function _define_property$7(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$7(target) {
+function _object_spread$8(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -939,7 +943,7 @@ function _object_spread$7(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$7(target, key, source[key]);
+            _define_property$8(target, key, source[key]);
         });
     }
     return target;
@@ -986,18 +990,18 @@ function Slider(param) {
         }
     }, polarity === SliderPolarity.bipolar && /*#__PURE__*/ React__default.createElement("div", {
         className: "Slider-center-marker"
-    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$7({
+    }), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$8({
         className: classnames('Slider-bar', defaultTheme, BarSliderStyle, sliderOrientation === SliderOrientation.horizontal ? variants$1.horizontal : variants$1.vertical, className)
     }, bindDrag()), {
         onMouseEnter: function() {
             return onMouseEnter && onMouseEnter(id, decimalToPercent(scaledValue));
         },
-        style: _object_spread$7({
+        style: _object_spread$8({
             touchAction: 'none'
         }, style)
     }), /*#__PURE__*/ React__default.createElement("div", {
         className: classnames(defaultTheme, BarSliderInnerStyle),
-        style: _object_spread$7({}, getTransformString({
+        style: _object_spread$8({}, getTransformString({
             sliderType: SliderType.bar,
             sliderOrientation: sliderOrientation,
             polarity: polarity,
@@ -1020,7 +1024,7 @@ var paddingLeft$4 = {none:'Label_paddingLeft_none__gunjniu Label_LabelStyle__gun
 var paddingRight$4 = {none:'Label_paddingRight_none__gunjnie Label_LabelStyle__gunjni0',xSmall:'Label_paddingRight_xSmall__gunjnif Label_LabelStyle__gunjni0',small:'Label_paddingRight_small__gunjnig Label_LabelStyle__gunjni0',mediumSmall:'Label_paddingRight_mediumSmall__gunjnih Label_LabelStyle__gunjni0',medium:'Label_paddingRight_medium__gunjnii Label_LabelStyle__gunjni0',mediumLarge:'Label_paddingRight_mediumLarge__gunjnij Label_LabelStyle__gunjni0',large:'Label_paddingRight_large__gunjnik Label_LabelStyle__gunjni0',xLarge:'Label_paddingRight_xLarge__gunjnil Label_LabelStyle__gunjni0'};
 var paddingTop$4 = {none:'Label_paddingTop_none__gunjni6 Label_LabelStyle__gunjni0',xSmall:'Label_paddingTop_xSmall__gunjni7 Label_LabelStyle__gunjni0',small:'Label_paddingTop_small__gunjni8 Label_LabelStyle__gunjni0',mediumSmall:'Label_paddingTop_mediumSmall__gunjni9 Label_LabelStyle__gunjni0',medium:'Label_paddingTop_medium__gunjnia Label_LabelStyle__gunjni0',mediumLarge:'Label_paddingTop_mediumLarge__gunjnib Label_LabelStyle__gunjni0',large:'Label_paddingTop_large__gunjnic Label_LabelStyle__gunjni0',xLarge:'Label_paddingTop_xLarge__gunjnid Label_LabelStyle__gunjni0'};
 
-function _define_property$6(obj, key, value) {
+function _define_property$7(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1033,7 +1037,7 @@ function _define_property$6(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$6(target) {
+function _object_spread$7(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1043,7 +1047,7 @@ function _object_spread$6(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$6(target, key, source[key]);
+            _define_property$7(target, key, source[key]);
         });
     }
     return target;
@@ -1055,7 +1059,7 @@ function Label(param) {
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React.createElement("span", {
         id: id,
-        style: _object_spread$6({}, style),
+        style: _object_spread$7({}, style),
         className: classnames('Label', LabelStyle, paddingTop$4[padding[0]], paddingRight$4[(_padding_ = padding[1]) !== null && _padding_ !== void 0 ? _padding_ : padding[0]], paddingBottom$4[(_padding_1 = padding[2]) !== null && _padding_1 !== void 0 ? _padding_1 : padding[0]], paddingLeft$4[(_ref = (_padding_2 = padding[3]) !== null && _padding_2 !== void 0 ? _padding_2 : padding[1]) !== null && _ref !== void 0 ? _ref : padding[0]], className)
     }, value ? value : children);
 }
@@ -1079,7 +1083,7 @@ function SliderValue(param) {
     }));
 }
 
-function _define_property$5(obj, key, value) {
+function _define_property$6(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1092,7 +1096,7 @@ function _define_property$5(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$5(target) {
+function _object_spread$6(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1102,7 +1106,7 @@ function _object_spread$5(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$5(target, key, source[key]);
+            _define_property$6(target, key, source[key]);
         });
     }
     return target;
@@ -1140,13 +1144,13 @@ function CustomSlider(param) {
         onChange: onChange
     }).bindDrag;
     return /*#__PURE__*/ React__default.createElement("div", {
-        style: _object_spread$5({}, style)
-    }, /*#__PURE__*/ React__default.createElement("div", _object_spread_props(_object_spread$5({
+        style: _object_spread$6({}, style)
+    }, /*#__PURE__*/ React__default.createElement("div", _object_spread_props(_object_spread$6({
         className: classnames('Slider-custom', className)
     }, bindDrag()), {
         onMouseEnter: onMouseEnter,
         onChange: onChange,
-        style: _object_spread$5({
+        style: _object_spread$6({
             touchAction: 'none'
         }, style)
     }), /*#__PURE__*/ React__default.createElement("div", null, children)));
@@ -1164,7 +1168,7 @@ var HeaderLevels;
     HeaderLevels["h2"] = "h2";
 })(HeaderLevels || (HeaderLevels = {}));
 
-function _define_property$4(obj, key, value) {
+function _define_property$5(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1177,7 +1181,7 @@ function _define_property$4(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$4(target) {
+function _object_spread$5(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1187,7 +1191,7 @@ function _object_spread$4(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$4(target, key, source[key]);
+            _define_property$5(target, key, source[key]);
         });
     }
     return target;
@@ -1200,7 +1204,7 @@ function TextHeader(param) {
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React.createElement(Tag, {
         id: id,
-        style: _object_spread$4({}, style),
+        style: _object_spread$5({}, style),
         className: classnames('TextHeader', TextHeaderStyle, 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]], className)
     }, value ? value : children);
 }
@@ -1214,7 +1218,36 @@ var paddingLeft$2 = {none:'Layout_paddingLeft_none__1sxxtfex Layout_LayoutStyle_
 var paddingRight$2 = {none:'Layout_paddingRight_none__1sxxtfeh Layout_LayoutStyle__1sxxtfe0',xSmall:'Layout_paddingRight_xSmall__1sxxtfei Layout_LayoutStyle__1sxxtfe0',small:'Layout_paddingRight_small__1sxxtfej Layout_LayoutStyle__1sxxtfe0',mediumSmall:'Layout_paddingRight_mediumSmall__1sxxtfek Layout_LayoutStyle__1sxxtfe0',medium:'Layout_paddingRight_medium__1sxxtfel Layout_LayoutStyle__1sxxtfe0',mediumLarge:'Layout_paddingRight_mediumLarge__1sxxtfem Layout_LayoutStyle__1sxxtfe0',large:'Layout_paddingRight_large__1sxxtfen Layout_LayoutStyle__1sxxtfe0',xLarge:'Layout_paddingRight_xLarge__1sxxtfeo Layout_LayoutStyle__1sxxtfe0'};
 var paddingTop$2 = {none:'Layout_paddingTop_none__1sxxtfe9 Layout_LayoutStyle__1sxxtfe0',xSmall:'Layout_paddingTop_xSmall__1sxxtfea Layout_LayoutStyle__1sxxtfe0',small:'Layout_paddingTop_small__1sxxtfeb Layout_LayoutStyle__1sxxtfe0',mediumSmall:'Layout_paddingTop_mediumSmall__1sxxtfec Layout_LayoutStyle__1sxxtfe0',medium:'Layout_paddingTop_medium__1sxxtfed Layout_LayoutStyle__1sxxtfe0',mediumLarge:'Layout_paddingTop_mediumLarge__1sxxtfee Layout_LayoutStyle__1sxxtfe0',large:'Layout_paddingTop_large__1sxxtfef Layout_LayoutStyle__1sxxtfe0',xLarge:'Layout_paddingTop_xLarge__1sxxtfeg Layout_LayoutStyle__1sxxtfe0'};
 
-function _define_property$3(obj, key, value) {
+var FlexDirection;
+(function(FlexDirection) {
+    FlexDirection["row"] = "row";
+    FlexDirection["column"] = "column";
+})(FlexDirection || (FlexDirection = {}));
+var JustifyContent;
+(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) {
+    AlignItems["flexStart"] = "flex-start";
+    AlignItems["flexEnd"] = "flex-end";
+    AlignItems["center"] = "center";
+    AlignItems["stretch"] = "stretch";
+    AlignItems["baseline"] = "baseline";
+})(AlignItems || (AlignItems = {}));
+var LayoutTags;
+(function(LayoutTags) {
+    LayoutTags["header"] = "header";
+    LayoutTags["main"] = "main";
+    LayoutTags["section"] = "section";
+})(LayoutTags || (LayoutTags = {}));
+
+function _define_property$4(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1227,7 +1260,7 @@ function _define_property$3(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$3(target) {
+function _object_spread$4(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1237,7 +1270,7 @@ function _object_spread$3(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$3(target, key, source[key]);
+            _define_property$4(target, key, source[key]);
         });
     }
     return target;
@@ -1248,12 +1281,13 @@ function Layout(param) {
         Spacing.none,
         Spacing.none,
         Spacing.none
-    ] : _param_padding, _param_gap = param.gap, gap = _param_gap === void 0 ? Spacing.xSmall : _param_gap;
+    ] : _param_padding, _param_gap = param.gap, gap = _param_gap === void 0 ? Spacing.xSmall : _param_gap, _param_tag = param.tag, tag = _param_tag === void 0 ? LayoutTags.section : _param_tag;
+    var Tag = tag;
     var _padding_, _padding_1, _padding_2, _ref;
-    return /*#__PURE__*/ React__default.createElement("div", {
+    return /*#__PURE__*/ React__default.createElement(Tag, {
         className: classnames('Layout', 'globalValues', LayoutStyle, gapVariant$1[gap], 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),
         // id="globalValues"
-        style: _object_spread$3({
+        style: _object_spread$4({
             flexWrap: flexWrap,
             border: border ? '2px solid #999' : '',
             maxWidth: width,
@@ -1265,8 +1299,8 @@ function Layout(param) {
     }, children);
 }
 // Object.assign(Layout, width, height, ALIGN, JUSTIFY, DIRECTION, SPACING);
-Layout.alignItems = FlexAlign;
-Layout.justifyContent = JustifyContent$1;
+Layout.alignItems = AlignItems;
+Layout.justifyContent = JustifyContent;
 Layout.gap = Spacing;
 Layout.flexDirection = FlexDirection$1;
 Layout.width = Width;
@@ -1274,29 +1308,6 @@ Layout.height = Height;
 Layout.padding = Spacing;
 Layout.flexWrap = FlexWrap;
 
-var FlexDirection;
-(function(FlexDirection) {
-    FlexDirection["row"] = "row";
-    FlexDirection["column"] = "column";
-})(FlexDirection || (FlexDirection = {}));
-var JustifyContent;
-(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) {
-    AlignItems["flexStart"] = "flex-start";
-    AlignItems["flexEnd"] = "flex-end";
-    AlignItems["center"] = "center";
-    AlignItems["stretch"] = "stretch";
-    AlignItems["baseline"] = "baseline";
-})(AlignItems || (AlignItems = {}));
-
 var LayoutFlexItemStyle = 'LayoutFlexItem_LayoutFlexItemStyle__197p9du0';
 var gapVariant = {none:'LayoutFlexItem_gapVariant_none__197p9du1 LayoutFlexItem_LayoutFlexItemStyle__197p9du0',xSmall:'LayoutFlexItem_gapVariant_xSmall__197p9du2 LayoutFlexItem_LayoutFlexItemStyle__197p9du0',small:'LayoutFlexItem_gapVariant_small__197p9du3 LayoutFlexItem_LayoutFlexItemStyle__197p9du0',mediumSmall:'LayoutFlexItem_gapVariant_mediumSmall__197p9du4 LayoutFlexItem_LayoutFlexItemStyle__197p9du0',medium:'LayoutFlexItem_gapVariant_medium__197p9du5 LayoutFlexItem_LayoutFlexItemStyle__197p9du0',mediumLarge:'LayoutFlexItem_gapVariant_mediumLarge__197p9du6 LayoutFlexItem_LayoutFlexItemStyle__197p9du0',large:'LayoutFlexItem_gapVariant_large__197p9du7 LayoutFlexItem_LayoutFlexItemStyle__197p9du0',xLarge:'LayoutFlexItem_gapVariant_xLarge__197p9du8 LayoutFlexItem_LayoutFlexItemStyle__197p9du0'};
 var paddingBottom$1 = {none:'LayoutFlexItem_paddingBottom_none__197p9dup LayoutFlexItem_LayoutFlexItemStyle__197p9du0',xSmall:'LayoutFlexItem_paddingBottom_xSmall__197p9duq LayoutFlexItem_LayoutFlexItemStyle__197p9du0',small:'LayoutFlexItem_paddingBottom_small__197p9dur LayoutFlexItem_LayoutFlexItemStyle__197p9du0',mediumSmall:'LayoutFlexItem_paddingBottom_mediumSmall__197p9dus LayoutFlexItem_LayoutFlexItemStyle__197p9du0',medium:'LayoutFlexItem_paddingBottom_medium__197p9dut LayoutFlexItem_LayoutFlexItemStyle__197p9du0',mediumLarge:'LayoutFlexItem_paddingBottom_mediumLarge__197p9duu LayoutFlexItem_LayoutFlexItemStyle__197p9du0',large:'LayoutFlexItem_paddingBottom_large__197p9duv LayoutFlexItem_LayoutFlexItemStyle__197p9du0',xLarge:'LayoutFlexItem_paddingBottom_xLarge__197p9duw LayoutFlexItem_LayoutFlexItemStyle__197p9du0'};
@@ -1304,7 +1315,7 @@ var paddingLeft$1 = {none:'LayoutFlexItem_paddingLeft_none__197p9dux LayoutFlexI
 var paddingRight$1 = {none:'LayoutFlexItem_paddingRight_none__197p9duh LayoutFlexItem_LayoutFlexItemStyle__197p9du0',xSmall:'LayoutFlexItem_paddingRight_xSmall__197p9dui LayoutFlexItem_LayoutFlexItemStyle__197p9du0',small:'LayoutFlexItem_paddingRight_small__197p9duj LayoutFlexItem_LayoutFlexItemStyle__197p9du0',mediumSmall:'LayoutFlexItem_paddingRight_mediumSmall__197p9duk LayoutFlexItem_LayoutFlexItemStyle__197p9du0',medium:'LayoutFlexItem_paddingRight_medium__197p9dul LayoutFlexItem_LayoutFlexItemStyle__197p9du0',mediumLarge:'LayoutFlexItem_paddingRight_mediumLarge__197p9dum LayoutFlexItem_LayoutFlexItemStyle__197p9du0',large:'LayoutFlexItem_paddingRight_large__197p9dun LayoutFlexItem_LayoutFlexItemStyle__197p9du0',xLarge:'LayoutFlexItem_paddingRight_xLarge__197p9duo LayoutFlexItem_LayoutFlexItemStyle__197p9du0'};
 var paddingTop$1 = {none:'LayoutFlexItem_paddingTop_none__197p9du9 LayoutFlexItem_LayoutFlexItemStyle__197p9du0',xSmall:'LayoutFlexItem_paddingTop_xSmall__197p9dua LayoutFlexItem_LayoutFlexItemStyle__197p9du0',small:'LayoutFlexItem_paddingTop_small__197p9dub LayoutFlexItem_LayoutFlexItemStyle__197p9du0',mediumSmall:'LayoutFlexItem_paddingTop_mediumSmall__197p9duc LayoutFlexItem_LayoutFlexItemStyle__197p9du0',medium:'LayoutFlexItem_paddingTop_medium__197p9dud LayoutFlexItem_LayoutFlexItemStyle__197p9du0',mediumLarge:'LayoutFlexItem_paddingTop_mediumLarge__197p9due LayoutFlexItem_LayoutFlexItemStyle__197p9du0',large:'LayoutFlexItem_paddingTop_large__197p9duf LayoutFlexItem_LayoutFlexItemStyle__197p9du0',xLarge:'LayoutFlexItem_paddingTop_xLarge__197p9dug LayoutFlexItem_LayoutFlexItemStyle__197p9du0'};
 
-function _define_property$2(obj, key, value) {
+function _define_property$3(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1317,7 +1328,7 @@ function _define_property$2(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$2(target) {
+function _object_spread$3(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1327,7 +1338,7 @@ function _object_spread$2(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$2(target, key, source[key]);
+            _define_property$3(target, key, source[key]);
         });
     }
     return target;
@@ -1336,7 +1347,7 @@ function LayoutFlexItem(param) {
     var _param_justifyContent = param.justifyContent, justifyContent = _param_justifyContent === void 0 ? JustifyContent.center : _param_justifyContent, _param_alignItems = param.alignItems, alignItems = _param_alignItems === void 0 ? AlignItems.center : _param_alignItems, _param_flexDirection = param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FlexDirection.row : _param_flexDirection, className = param.className, children = param.children, onClick = param.onClick, flex = param.flex, _param_padding = param.padding, padding = _param_padding === void 0 ? [] : _param_padding, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style, _param_border = param.border, border = _param_border === void 0 ? false : _param_border, _param_gap = param.gap, gap = _param_gap === void 0 ? Spacing.medium : _param_gap;
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React.createElement("div", {
-        style: _object_spread$2({
+        style: _object_spread$3({
             border: border ? '2px solid #888' : '',
             justifyContent: justifyContent,
             alignItems: alignItems,
@@ -1422,7 +1433,7 @@ var paddingLeft = {none:'LayoutBlockItem_paddingLeft_none__xc14fup LayoutBlockIt
 var paddingRight = {none:'LayoutBlockItem_paddingRight_none__xc14fu9 LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',xSmall:'LayoutBlockItem_paddingRight_xSmall__xc14fua LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',small:'LayoutBlockItem_paddingRight_small__xc14fub LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',mediumSmall:'LayoutBlockItem_paddingRight_mediumSmall__xc14fuc LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',medium:'LayoutBlockItem_paddingRight_medium__xc14fud LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',mediumLarge:'LayoutBlockItem_paddingRight_mediumLarge__xc14fue LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',large:'LayoutBlockItem_paddingRight_large__xc14fuf LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',xLarge:'LayoutBlockItem_paddingRight_xLarge__xc14fug LayoutBlockItem_LayoutBlockItemStyle__xc14fu0'};
 var paddingTop = {none:'LayoutBlockItem_paddingTop_none__xc14fu1 LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',xSmall:'LayoutBlockItem_paddingTop_xSmall__xc14fu2 LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',small:'LayoutBlockItem_paddingTop_small__xc14fu3 LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',mediumSmall:'LayoutBlockItem_paddingTop_mediumSmall__xc14fu4 LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',medium:'LayoutBlockItem_paddingTop_medium__xc14fu5 LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',mediumLarge:'LayoutBlockItem_paddingTop_mediumLarge__xc14fu6 LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',large:'LayoutBlockItem_paddingTop_large__xc14fu7 LayoutBlockItem_LayoutBlockItemStyle__xc14fu0',xLarge:'LayoutBlockItem_paddingTop_xLarge__xc14fu8 LayoutBlockItem_LayoutBlockItemStyle__xc14fu0'};
 
-function _define_property$1(obj, key, value) {
+function _define_property$2(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1435,7 +1446,7 @@ function _define_property$1(obj, key, value) {
     }
     return obj;
 }
-function _object_spread$1(target) {
+function _object_spread$2(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1445,7 +1456,7 @@ function _object_spread$1(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property$1(target, key, source[key]);
+            _define_property$2(target, key, source[key]);
         });
     }
     return target;
@@ -1454,7 +1465,7 @@ function LayoutBlockItem(param) {
     var className = param.className, children = param.children, onClick = param.onClick, _param_padding = param.padding, padding = _param_padding === void 0 ? [] : _param_padding, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style, _param_border = param.border, border = _param_border === void 0 ? false : _param_border;
     var _padding_, _padding_1, _padding_2, _ref;
     return /*#__PURE__*/ React.createElement("div", {
-        style: _object_spread$1({
+        style: _object_spread$2({
             border: border ? '2px solid #888' : ''
         }, style),
         onClick: onClick,
@@ -1463,7 +1474,7 @@ function LayoutBlockItem(param) {
 }
 LayoutBlockItem.padding = Spacing;
 
-function _define_property(obj, key, value) {
+function _define_property$1(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -1476,7 +1487,7 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-function _object_spread(target) {
+function _object_spread$1(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -1486,7 +1497,7 @@ function _object_spread(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
+            _define_property$1(target, key, source[key]);
         });
     }
     return target;
@@ -1496,7 +1507,7 @@ function KeyValueDisplayScreen(param) {
     return /*#__PURE__*/ React__default.createElement(Layout, {
         flexDirection: Layout.flexDirection.column,
         gap: Layout.gap.small,
-        style: _object_spread({
+        style: _object_spread$1({
             backgroundColor: '#333',
             width: '150px'
         }, style),
@@ -1651,5 +1662,54 @@ function Oscilloscope(param) {
     }));
 }
 
-export { Slider as BarSlider, Button, CustomSlider, Dropdown, IndicatorLight, KeyValueDisplayScreen, Label, Layout, LayoutBlockItem, LayoutFlexItem, Matrix, Oscilloscope, RotarySlider, SliderValue, Tabs, TextHeader, TextInput, clamp, decimalToPercent, defaultTheme, getNormalizedValue, getPosition, getTransformString, normalizedToScaledValue, percentToDecimal, root, themeValues, useSlider };
+var ModuleHeaderStyle = 'ModuleHeader_ModuleHeaderStyle__1in8y4q0';
+
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ModuleHeader(param) {
+    var title = param.title, subtitle = param.subtitle, activeItem = param.activeItem, className = param.className, style = param.style;
+    return /*#__PURE__*/ React__default.createElement("header", null, /*#__PURE__*/ React__default.createElement(Layout, {
+        gap: Layout.gap.medium,
+        className: classnames(ModuleHeaderStyle, defaultTheme, className),
+        style: _object_spread({}, style)
+    }, /*#__PURE__*/ React__default.createElement(LayoutFlexItem, {
+        flexDirection: LayoutFlexItem.flexDirection.column
+    }, /*#__PURE__*/ React__default.createElement(TextHeader, null, title), /*#__PURE__*/ React__default.createElement(TextHeader, null, subtitle)), /*#__PURE__*/ React__default.createElement(LayoutFlexItem, null, /*#__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(LayoutFlexItem, null, /*#__PURE__*/ React__default.createElement(Dropdown, {
+        id: "ModuleHeader-dropdown",
+        items: []
+    }))));
+}
+
+export { Slider as BarSlider, Button, CustomSlider, Dropdown, IndicatorLight, KeyValueDisplayScreen, Label, Layout, LayoutBlockItem, LayoutFlexItem, Matrix, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Tabs, TextHeader, TextInput, clamp, decimalToPercent, defaultTheme, getNormalizedValue, getPosition, getTransformString, normalizedToScaledValue, percentToDecimal, root, themeValues, useSlider };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

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