@antimatter-audio/antimatter-ui 8.0.1 → 8.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/assets/src/common/styles/base.css.ts.vanilla-CBYrCtOZ.css +58 -0
  2. package/dist/assets/src/core/Heading/Heading.css.ts.vanilla-LHnXtoZN.css +99 -0
  3. package/dist/index.d.ts +17 -9
  4. package/dist/index.js +79 -40
  5. package/dist/index.js.map +1 -1
  6. package/lib/styles.css.ts +2 -2
  7. package/package.json +1 -1
package/dist/assets/src/common/styles/base.css.ts.vanilla-CBYrCtOZ.css ADDED
@@ -0,0 +1,58 @@
1
+ .root {
2
+ --spacing-none__1rgzsg00: 0px;
3
+ --spacing-xSmall__1rgzsg01: 2px;
4
+ --spacing-small__1rgzsg02: 4px;
5
+ --spacing-mediumSmall__1rgzsg03: 8px;
6
+ --spacing-medium__1rgzsg04: 12px;
7
+ --spacing-mediumLarge__1rgzsg05: 16px;
8
+ --spacing-large__1rgzsg06: 20px;
9
+ --spacing-xLarge__1rgzsg07: 24px;
10
+ --fontSizes-xSmall__1rgzsg08: .75rem;
11
+ --fontSizes-small__1rgzsg09: .875rem;
12
+ --fontSizes-medium__1rgzsg0a: 1rem;
13
+ --fontSizes-large__1rgzsg0b: 1.25rem;
14
+ --fontSizes-xLarge__1rgzsg0c: 1.5rem;
15
+ --fontSizes-title__1rgzsg0d: 2.5rem;
16
+ --borderRadius__1rgzsg0e: 3px;
17
+ --namedColors-primary__1rgzsg0f: #333333;
18
+ --namedColors-accent__1rgzsg0g: #A362BD;
19
+ --namedColors-alert__1rgzsg0h: #8a0101;
20
+ --namedColors-muted__1rgzsg0i: #555555;
21
+ --namedColors-highlighted__1rgzsg0j: #777777;
22
+ --namedColors-selected__1rgzsg0k: #999999;
23
+ --namedColors-text-default__1rgzsg0l: #EEEEEE;
24
+ --namedColors-text-inverse__1rgzsg0m: #222222;
25
+ --namedColors-background-page__1rgzsg0n: #333333;
26
+ --namedColors-background-section__1rgzsg0o: #454545;
27
+ --namedColors-background-popover__1rgzsg0p: #606060;
28
+ --namedColors-background-input__1rgzsg0q: #606060;
29
+ --namedColors-border__1rgzsg0r: #222222;
30
+ --colors-grey-100__1rgzsg0s: #EEEEEE;
31
+ --colors-grey-200__1rgzsg0t: #999999;
32
+ --colors-grey-300__1rgzsg0u: #888888;
33
+ --colors-grey-400__1rgzsg0v: #606060;
34
+ --colors-grey-500__1rgzsg0w: #454545;
35
+ --colors-grey-600__1rgzsg0x: #333333;
36
+ --colors-grey-700__1rgzsg0y: #222222;
37
+ --fonts-heading__1rgzsg0z: arial, sans-serif;
38
+ --fonts-body__1rgzsg010: arial, sans-serif;
39
+ --fonts-label__1rgzsg011: arial, sans-serif;
40
+ }
41
+ body, html {
42
+ font-size: 16px;
43
+ color: #eee;
44
+ font-family: arial, sans-serif;
45
+ }
46
+ input, input:hover, input:focus, input:focus-visible {
47
+ background: transparent;
48
+ border: none;
49
+ outline: none;
50
+ appearance: textfield;
51
+ }
52
+ button, button:hover, button:focus, button:focus-visible {
53
+ border: none;
54
+ outline: none;
55
+ }
56
+ button:disabled, input:disabled {
57
+ cursor: not-allowed;
58
+ }
package/dist/assets/src/core/Heading/Heading.css.ts.vanilla-LHnXtoZN.css ADDED
@@ -0,0 +1,99 @@
1
+ .Heading_HeadingStyle__36kgqp0 {
2
+ font-weight: bold;
3
+ }
4
+ .Heading_paddingTop_none__36kgqp1 {
5
+ padding-top: var(--spacing-none__1rgzsg00);
6
+ }
7
+ .Heading_paddingTop_xSmall__36kgqp2 {
8
+ padding-top: var(--spacing-xSmall__1rgzsg01);
9
+ }
10
+ .Heading_paddingTop_small__36kgqp3 {
11
+ padding-top: var(--spacing-small__1rgzsg02);
12
+ }
13
+ .Heading_paddingTop_mediumSmall__36kgqp4 {
14
+ padding-top: var(--spacing-mediumSmall__1rgzsg03);
15
+ }
16
+ .Heading_paddingTop_medium__36kgqp5 {
17
+ padding-top: var(--spacing-medium__1rgzsg04);
18
+ }
19
+ .Heading_paddingTop_mediumLarge__36kgqp6 {
20
+ padding-top: var(--spacing-mediumLarge__1rgzsg05);
21
+ }
22
+ .Heading_paddingTop_large__36kgqp7 {
23
+ padding-top: var(--spacing-large__1rgzsg06);
24
+ }
25
+ .Heading_paddingTop_xLarge__36kgqp8 {
26
+ padding-top: var(--spacing-xLarge__1rgzsg07);
27
+ }
28
+ .Heading_paddingRight_none__36kgqp9 {
29
+ padding-right: var(--spacing-none__1rgzsg00);
30
+ }
31
+ .Heading_paddingRight_xSmall__36kgqpa {
32
+ padding-right: var(--spacing-xSmall__1rgzsg01);
33
+ }
34
+ .Heading_paddingRight_small__36kgqpb {
35
+ padding-right: var(--spacing-small__1rgzsg02);
36
+ }
37
+ .Heading_paddingRight_mediumSmall__36kgqpc {
38
+ padding-right: var(--spacing-mediumSmall__1rgzsg03);
39
+ }
40
+ .Heading_paddingRight_medium__36kgqpd {
41
+ padding-right: var(--spacing-medium__1rgzsg04);
42
+ }
43
+ .Heading_paddingRight_mediumLarge__36kgqpe {
44
+ padding-right: var(--spacing-mediumLarge__1rgzsg05);
45
+ }
46
+ .Heading_paddingRight_large__36kgqpf {
47
+ padding-right: var(--spacing-large__1rgzsg06);
48
+ }
49
+ .Heading_paddingRight_xLarge__36kgqpg {
50
+ padding-right: var(--spacing-xLarge__1rgzsg07);
51
+ }
52
+ .Heading_paddingBottom_none__36kgqph {
53
+ padding-bottom: var(--spacing-none__1rgzsg00);
54
+ }
55
+ .Heading_paddingBottom_xSmall__36kgqpi {
56
+ padding-bottom: var(--spacing-xSmall__1rgzsg01);
57
+ }
58
+ .Heading_paddingBottom_small__36kgqpj {
59
+ padding-bottom: var(--spacing-small__1rgzsg02);
60
+ }
61
+ .Heading_paddingBottom_mediumSmall__36kgqpk {
62
+ padding-bottom: var(--spacing-mediumSmall__1rgzsg03);
63
+ }
64
+ .Heading_paddingBottom_medium__36kgqpl {
65
+ padding-bottom: var(--spacing-medium__1rgzsg04);
66
+ }
67
+ .Heading_paddingBottom_mediumLarge__36kgqpm {
68
+ padding-bottom: var(--spacing-mediumLarge__1rgzsg05);
69
+ }
70
+ .Heading_paddingBottom_large__36kgqpn {
71
+ padding-bottom: var(--spacing-large__1rgzsg06);
72
+ }
73
+ .Heading_paddingBottom_xLarge__36kgqpo {
74
+ padding-bottom: var(--spacing-xLarge__1rgzsg07);
75
+ }
76
+ .Heading_paddingLeft_none__36kgqpp {
77
+ padding-left: var(--spacing-none__1rgzsg00);
78
+ }
79
+ .Heading_paddingLeft_xSmall__36kgqpq {
80
+ padding-left: var(--spacing-xSmall__1rgzsg01);
81
+ }
82
+ .Heading_paddingLeft_small__36kgqpr {
83
+ padding-left: var(--spacing-small__1rgzsg02);
84
+ }
85
+ .Heading_paddingLeft_mediumSmall__36kgqps {
86
+ padding-left: var(--spacing-mediumSmall__1rgzsg03);
87
+ }
88
+ .Heading_paddingLeft_medium__36kgqpt {
89
+ padding-left: var(--spacing-medium__1rgzsg04);
90
+ }
91
+ .Heading_paddingLeft_mediumLarge__36kgqpu {
92
+ padding-left: var(--spacing-mediumLarge__1rgzsg05);
93
+ }
94
+ .Heading_paddingLeft_large__36kgqpv {
95
+ padding-left: var(--spacing-large__1rgzsg06);
96
+ }
97
+ .Heading_paddingLeft_xLarge__36kgqpw {
98
+ padding-left: var(--spacing-xLarge__1rgzsg07);
99
+ }
package/dist/index.d.ts CHANGED
@@ -71,10 +71,15 @@ interface DropdownProps {
71
71
  }
72
72
  declare function Dropdown({ items, className, id }: DropdownProps): React__default.JSX.Element;
73
73
 
74
- declare function TextInput({ onChange, value, min, max, minLength, maxLength, style, className, textColor, }: {
74
+ declare enum InputTypes {
75
+ text = "text",
76
+ number = "number"
77
+ }
78
+ declare function Input({ onChange, value, min, max, type, minLength, maxLength, style, className, textColor, }: {
75
79
  onChange?: ({ scaledValue }: {
76
80
  scaledValue: number;
77
81
  }) => any;
82
+ type?: InputTypes;
78
83
  value: number;
79
84
  min: number;
80
85
  max: number;
@@ -84,6 +89,9 @@ declare function TextInput({ onChange, value, min, max, minLength, maxLength, st
84
89
  style?: React__default.CSSProperties;
85
90
  className?: string;
86
91
  }): React__default.JSX.Element;
92
+ declare namespace Input {
93
+ var type: typeof InputTypes;
94
+ }
87
95
 
88
96
  declare enum SliderPolarity {
89
97
  linear = "linear",
@@ -169,24 +177,24 @@ declare function SliderValue({ value, min, max, minLength, maxLength, isEditable
169
177
  style: React__default.CSSProperties;
170
178
  }): React__default.JSX.Element;
171
179
 
172
- declare enum HeaderTags {
180
+ declare enum HeadingTags {
173
181
  h1 = "h1",
174
182
  h2 = "h2",
175
183
  h3 = "h3",
176
184
  h4 = "h4"
177
185
  }
178
186
 
179
- interface TextHeaderProps {
180
- tag?: HeaderTags;
187
+ interface HeadingProps {
188
+ tag?: HeadingTags;
181
189
  padding?: Array<Spacing>;
182
190
  value?: string;
183
191
  id?: any;
184
192
  className?: string;
185
193
  style?: object;
186
194
  }
187
- declare function TextHeader({ value, id, className, style, tag, padding, children, }: React.PropsWithChildren<TextHeaderProps>): React.JSX.Element;
188
- declare namespace TextHeader {
189
- var tag: typeof HeaderTags;
195
+ declare function Heading({ value, id, className, style, tag, padding, children, }: React.PropsWithChildren<HeadingProps>): React.JSX.Element;
196
+ declare namespace Heading {
197
+ var tag: typeof HeadingTags;
190
198
  var padding: typeof Spacing;
191
199
  }
192
200
 
@@ -332,7 +340,7 @@ declare function ThemeProvider({ theme, className, children, }: React__default.P
332
340
  styles?: React__default.CSSProperties;
333
341
  }>): React__default.JSX.Element;
334
342
 
335
- declare const rootValues: {
343
+ declare const root: {
336
344
  spacing: {
337
345
  none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
338
346
  xSmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -457,4 +465,4 @@ declare const useSlider: ({ id, mockProperties, mockInitialScaledValue, sliderOr
457
465
  properties: JuceSliderProperties | null;
458
466
  };
459
467
 
460
- export { Slider as BarSlider, Box, Button, Dropdown, IndicatorLight, KeyValueDisplayScreen, Label, Matrix, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Tabs, TextHeader, TextInput, ThemeProvider, clamp, decimalToPercent, getNormalizedValue, getPosition, getTransformString, normalizedToScaledValue, percentToDecimal, rootValues as root, useSlider };
468
+ export { Slider as BarSlider, Box, Button, Dropdown, Heading, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Tabs, ThemeProvider, clamp, decimalToPercent, getNormalizedValue, getPosition, getTransformString, normalizedToScaledValue, percentToDecimal, root, useSlider };
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import React__default, { useState, useRef, useEffect } from 'react';
3
3
  import classnames from 'classnames';
4
4
  import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
5
- import './assets/src/common/styles/base.css.ts.vanilla-DQ2HmC01.css';
5
+ import './assets/src/common/styles/base.css.ts.vanilla-CBYrCtOZ.css';
6
6
  import './assets/src/core/Tabs/Tabs.css.ts.vanilla-BW5igVQH.css';
7
7
  import * as Juce from 'juce-framework-frontend';
8
8
  import './assets/src/core/Button/Button.css.ts.vanilla-BFb_4C6w.css';
@@ -11,7 +11,7 @@ import { useDrag } from '@use-gesture/react';
11
11
  import './assets/src/core/Slider/RotarySlider.css.ts.vanilla-cwa1vz5d.css';
12
12
  import './assets/src/core/Slider/BarSlider.css.ts.vanilla-C2zKXoRb.css';
13
13
  import './assets/src/core/Label/Label.css.ts.vanilla-CVXwAkKg.css';
14
- import './assets/src/core/TextHeader/TextHeader.css.ts.vanilla-DMAP5sCB.css';
14
+ import './assets/src/core/Heading/Heading.css.ts.vanilla-LHnXtoZN.css';
15
15
  import './assets/src/core/Box/Box.css.ts.vanilla-DbG2dKSH.css';
16
16
  import { v4 } from 'uuid';
17
17
  import './assets/src/core/Matrix/Matrix.css.ts.vanilla-CM51RBF2.css';
@@ -70,6 +70,7 @@ var InputErrorStates;
70
70
  (function(InputErrorStates) {
71
71
  InputErrorStates["exceedsMaxLength"] = "exceedsMaxLength";
72
72
  InputErrorStates["valueOutOfRange"] = "valueOutOfRange";
73
+ InputErrorStates["invalidCharacter"] = "invalidCharacter";
73
74
  })(InputErrorStates || (InputErrorStates = {}));
74
75
 
75
76
  var TabsItemStyle = 'Tabs_TabsItemStyle__1mqnhd41';
@@ -361,19 +362,27 @@ function Dropdown(param) {
361
362
  })));
362
363
  }
363
364
 
364
- var validateInputValue = function(param) {
365
- var value = param.value, minLength = param.minLength, maxLength = param.maxLength, min = param.min, max = param.max;
366
- var length = value.toString().length;
365
+ var validate = function(param) {
366
+ var value = param.value, minLength = param.minLength, maxLength = param.maxLength, min = param.min, max = param.max, _param_type = param.type, type = _param_type === void 0 ? InputTypes.text : _param_type;
367
+ // TODO: Clean up
367
368
  var errorMessages = [];
368
369
  var isIncomplete = false;
370
+ var length = value.toString().length;
369
371
  if (length > maxLength && errorMessages.indexOf(InputErrorStates.exceedsMaxLength) === -1) {
370
372
  errorMessages.push(InputErrorStates.exceedsMaxLength);
371
373
  }
372
374
  if (length < minLength) {
373
375
  isIncomplete = true;
374
376
  }
375
- if ((value > max || value < min) && errorMessages.indexOf(InputErrorStates.valueOutOfRange) === -1) {
376
- errorMessages.push(InputErrorStates.valueOutOfRange);
377
+ if (type === InputTypes.number) {
378
+ if (!(value === '' || /^-?[\d-]+$/.test(value.toString()))) {
379
+ errorMessages.push(InputErrorStates.invalidCharacter);
380
+ }
381
+ if (typeof value === 'number') {
382
+ if ((value > max || value < min) && errorMessages.indexOf(InputErrorStates.valueOutOfRange) === -1) {
383
+ errorMessages.push(InputErrorStates.valueOutOfRange);
384
+ }
385
+ }
377
386
  }
378
387
  return {
379
388
  errorMessages: errorMessages,
@@ -456,29 +465,53 @@ function _unsupported_iterable_to_array$2(o, minLen) {
456
465
  if (n === "Map" || n === "Set") return Array.from(n);
457
466
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
458
467
  }
459
- // import { decimalToPercent, percentToDecimal } from '../../common/utils';
460
- // import debounce from 'lodash.debounce';
461
- function TextInput(param) {
462
- var onChange = param.onChange, value = param.value, min = param.min, max = param.max, _param_minLength = param.minLength, minLength = _param_minLength === void 0 ? 1 : _param_minLength, _param_maxLength = param.maxLength, maxLength = _param_maxLength === void 0 ? 20 : _param_maxLength, style = param.style, className = param.className, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? '#999' : _param_textColor;
468
+ var InputTypes;
469
+ (function(InputTypes) {
470
+ InputTypes["text"] = "text";
471
+ InputTypes["number"] = "number";
472
+ })(InputTypes || (InputTypes = {}));
473
+ function Input(param) {
474
+ var onChange = param.onChange, 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, style = param.style, className = param.className, _param_textColor = param.textColor, textColor = _param_textColor === void 0 ? '#999' : _param_textColor;
463
475
  var _inputRef_current, _inputRef_current1;
464
476
  var _useState = _sliced_to_array$2(useState(value || 0), 2), internalValue = _useState[0], setInternalValue = _useState[1];
465
477
  var _useState1 = _sliced_to_array$2(useState(false), 2), hasError = _useState1[0], setHasError = _useState1[1];
466
478
  var _useState2 = _sliced_to_array$2(useState(false), 2), hasIncompleteValue = _useState2[0], setHasIncompleteValue = _useState2[1];
467
479
  var timer, timeoutVal = 1000;
468
- function handleKeyPress() {
480
+ // (inputValue === '' || /^-?\d+$/.test(inputValue)
481
+ function handleKeyPress(e) {
469
482
  window.clearTimeout(timer);
483
+ var key = e.keyCode || e.which;
484
+ if (key === 13 || key === 9) {
485
+ var newValue = e.target.value;
486
+ var _validate = validate({
487
+ value: newValue,
488
+ type: type,
489
+ minLength: minLength,
490
+ maxLength: maxLength,
491
+ min: min,
492
+ max: max
493
+ }), errorMessages = _validate.errorMessages, isIncomplete = _validate.isIncomplete;
494
+ if (errorMessages.length === 0 && !isIncomplete) {
495
+ setHasIncompleteValue(false);
496
+ setHasError(false);
497
+ onChange && onChange({
498
+ scaledValue: newValue * 0.01
499
+ });
500
+ }
501
+ }
470
502
  }
471
503
  function handleKeyUp(e) {
472
504
  window.clearTimeout(timer); // prevent errant multiple timeouts from being generated
473
505
  timer = window.setTimeout(function() {
474
506
  var newValue = e.target.value;
475
- var _validateInputValue = validateInputValue({
507
+ var _validate = validate({
476
508
  value: newValue,
509
+ type: type,
477
510
  minLength: minLength,
478
511
  maxLength: maxLength,
479
512
  min: min,
480
513
  max: max
481
- }), errorMessages = _validateInputValue.errorMessages, isIncomplete = _validateInputValue.isIncomplete;
514
+ }), errorMessages = _validate.errorMessages, isIncomplete = _validate.isIncomplete;
482
515
  if (errorMessages.length && !isIncomplete) {
483
516
  setHasError(true);
484
517
  setHasIncompleteValue(false);
@@ -503,21 +536,25 @@ function TextInput(param) {
503
536
  var handleChange = function(e) {
504
537
  var newValue = e.target.value;
505
538
  setHasError(false);
506
- var errorMessages = validateInputValue({
539
+ var errorMessages = validate({
507
540
  value: newValue,
541
+ type: type,
508
542
  minLength: minLength,
509
543
  maxLength: maxLength,
510
544
  min: min,
511
545
  max: max
512
546
  }).errorMessages;
513
- if (errorMessages.indexOf(InputErrorStates.exceedsMaxLength) === -1) {
547
+ // Don't set the internal value if the value exceeds the max length
548
+ // Don't set the internal value if the value contains an invalid character
549
+ if (errorMessages.indexOf(InputErrorStates.exceedsMaxLength) === -1 && errorMessages.indexOf(InputErrorStates.invalidCharacter) === -1) {
514
550
  setInternalValue(newValue);
515
551
  }
516
552
  };
517
553
  useEffect(function() {
518
554
  setInternalValue(value);
519
- var isValid = validateInputValue({
555
+ var isValid = validate({
520
556
  value: value,
557
+ type: type,
521
558
  minLength: minLength,
522
559
  maxLength: maxLength,
523
560
  min: min,
@@ -537,7 +574,6 @@ function TextInput(param) {
537
574
  color: hasError ? 'red' : hasIncompleteValue ? '#999' : textColor,
538
575
  fontSize: '24px'
539
576
  }, style),
540
- type: "number",
541
577
  value: internalValue,
542
578
  onKeyUp: handleKeyUp,
543
579
  onKeyDown: handleKeyPress,
@@ -547,6 +583,7 @@ function TextInput(param) {
547
583
  }
548
584
  });
549
585
  }
586
+ Input.type = InputTypes;
550
587
 
551
588
  var SliderPolarity;
552
589
  (function(SliderPolarity) {
@@ -770,6 +807,7 @@ var useSlider = function(param) {
770
807
  // Otherwise, the value will come from JUCE.
771
808
  if (isLocalhost) {
772
809
  if (normalizedValue) {
810
+ console.log(normalizedValue, 'NORMALIZEDVALUE');
773
811
  var newNormalizedValueClamped = clamp(normalizedValue);
774
812
  setNormalizedValue(newNormalizedValueClamped);
775
813
  setScaledValue(normalizedToScaledValue({
@@ -779,6 +817,7 @@ var useSlider = function(param) {
779
817
  }));
780
818
  }
781
819
  if (scaledValue) {
820
+ console.log(normalizedValue, 'SCALEDVALUE');
782
821
  setScaledValue(scaledValue);
783
822
  onChange && onChange(decimalToPercent(scaledValue));
784
823
  }
@@ -1062,7 +1101,7 @@ Label.padding = Spacing;
1062
1101
 
1063
1102
  function SliderValue(param) {
1064
1103
  var value = param.value, min = param.min, max = param.max, minLength = param.minLength, maxLength = param.maxLength, isEditable = param.isEditable, onChange = param.onChange, className = param.className, style = param.style;
1065
- return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, isEditable ? /*#__PURE__*/ React__default.createElement(TextInput, {
1104
+ return /*#__PURE__*/ React__default.createElement(React__default.Fragment, null, isEditable ? /*#__PURE__*/ React__default.createElement(Input, {
1066
1105
  value: value,
1067
1106
  min: min,
1068
1107
  max: max,
@@ -1078,19 +1117,19 @@ function SliderValue(param) {
1078
1117
  }));
1079
1118
  }
1080
1119
 
1081
- var TextHeaderStyle = 'TextHeader_TextHeaderStyle__10238370';
1082
- var paddingBottom$1 = {none:'TextHeader_paddingBottom_none__1023837h TextHeader_TextHeaderStyle__10238370',xSmall:'TextHeader_paddingBottom_xSmall__1023837i TextHeader_TextHeaderStyle__10238370',small:'TextHeader_paddingBottom_small__1023837j TextHeader_TextHeaderStyle__10238370',mediumSmall:'TextHeader_paddingBottom_mediumSmall__1023837k TextHeader_TextHeaderStyle__10238370',medium:'TextHeader_paddingBottom_medium__1023837l TextHeader_TextHeaderStyle__10238370',mediumLarge:'TextHeader_paddingBottom_mediumLarge__1023837m TextHeader_TextHeaderStyle__10238370',large:'TextHeader_paddingBottom_large__1023837n TextHeader_TextHeaderStyle__10238370',xLarge:'TextHeader_paddingBottom_xLarge__1023837o TextHeader_TextHeaderStyle__10238370'};
1083
- var paddingLeft$1 = {none:'TextHeader_paddingLeft_none__1023837p TextHeader_TextHeaderStyle__10238370',xSmall:'TextHeader_paddingLeft_xSmall__1023837q TextHeader_TextHeaderStyle__10238370',small:'TextHeader_paddingLeft_small__1023837r TextHeader_TextHeaderStyle__10238370',mediumSmall:'TextHeader_paddingLeft_mediumSmall__1023837s TextHeader_TextHeaderStyle__10238370',medium:'TextHeader_paddingLeft_medium__1023837t TextHeader_TextHeaderStyle__10238370',mediumLarge:'TextHeader_paddingLeft_mediumLarge__1023837u TextHeader_TextHeaderStyle__10238370',large:'TextHeader_paddingLeft_large__1023837v TextHeader_TextHeaderStyle__10238370',xLarge:'TextHeader_paddingLeft_xLarge__1023837w TextHeader_TextHeaderStyle__10238370'};
1084
- var paddingRight$1 = {none:'TextHeader_paddingRight_none__10238379 TextHeader_TextHeaderStyle__10238370',xSmall:'TextHeader_paddingRight_xSmall__1023837a TextHeader_TextHeaderStyle__10238370',small:'TextHeader_paddingRight_small__1023837b TextHeader_TextHeaderStyle__10238370',mediumSmall:'TextHeader_paddingRight_mediumSmall__1023837c TextHeader_TextHeaderStyle__10238370',medium:'TextHeader_paddingRight_medium__1023837d TextHeader_TextHeaderStyle__10238370',mediumLarge:'TextHeader_paddingRight_mediumLarge__1023837e TextHeader_TextHeaderStyle__10238370',large:'TextHeader_paddingRight_large__1023837f TextHeader_TextHeaderStyle__10238370',xLarge:'TextHeader_paddingRight_xLarge__1023837g TextHeader_TextHeaderStyle__10238370'};
1085
- var paddingTop$1 = {none:'TextHeader_paddingTop_none__10238371 TextHeader_TextHeaderStyle__10238370',xSmall:'TextHeader_paddingTop_xSmall__10238372 TextHeader_TextHeaderStyle__10238370',small:'TextHeader_paddingTop_small__10238373 TextHeader_TextHeaderStyle__10238370',mediumSmall:'TextHeader_paddingTop_mediumSmall__10238374 TextHeader_TextHeaderStyle__10238370',medium:'TextHeader_paddingTop_medium__10238375 TextHeader_TextHeaderStyle__10238370',mediumLarge:'TextHeader_paddingTop_mediumLarge__10238376 TextHeader_TextHeaderStyle__10238370',large:'TextHeader_paddingTop_large__10238377 TextHeader_TextHeaderStyle__10238370',xLarge:'TextHeader_paddingTop_xLarge__10238378 TextHeader_TextHeaderStyle__10238370'};
1120
+ var HeadingStyle = 'Heading_HeadingStyle__36kgqp0';
1121
+ var paddingBottom$1 = {none:'Heading_paddingBottom_none__36kgqph Heading_HeadingStyle__36kgqp0',xSmall:'Heading_paddingBottom_xSmall__36kgqpi Heading_HeadingStyle__36kgqp0',small:'Heading_paddingBottom_small__36kgqpj Heading_HeadingStyle__36kgqp0',mediumSmall:'Heading_paddingBottom_mediumSmall__36kgqpk Heading_HeadingStyle__36kgqp0',medium:'Heading_paddingBottom_medium__36kgqpl Heading_HeadingStyle__36kgqp0',mediumLarge:'Heading_paddingBottom_mediumLarge__36kgqpm Heading_HeadingStyle__36kgqp0',large:'Heading_paddingBottom_large__36kgqpn Heading_HeadingStyle__36kgqp0',xLarge:'Heading_paddingBottom_xLarge__36kgqpo Heading_HeadingStyle__36kgqp0'};
1122
+ var paddingLeft$1 = {none:'Heading_paddingLeft_none__36kgqpp Heading_HeadingStyle__36kgqp0',xSmall:'Heading_paddingLeft_xSmall__36kgqpq Heading_HeadingStyle__36kgqp0',small:'Heading_paddingLeft_small__36kgqpr Heading_HeadingStyle__36kgqp0',mediumSmall:'Heading_paddingLeft_mediumSmall__36kgqps Heading_HeadingStyle__36kgqp0',medium:'Heading_paddingLeft_medium__36kgqpt Heading_HeadingStyle__36kgqp0',mediumLarge:'Heading_paddingLeft_mediumLarge__36kgqpu Heading_HeadingStyle__36kgqp0',large:'Heading_paddingLeft_large__36kgqpv Heading_HeadingStyle__36kgqp0',xLarge:'Heading_paddingLeft_xLarge__36kgqpw Heading_HeadingStyle__36kgqp0'};
1123
+ var paddingRight$1 = {none:'Heading_paddingRight_none__36kgqp9 Heading_HeadingStyle__36kgqp0',xSmall:'Heading_paddingRight_xSmall__36kgqpa Heading_HeadingStyle__36kgqp0',small:'Heading_paddingRight_small__36kgqpb Heading_HeadingStyle__36kgqp0',mediumSmall:'Heading_paddingRight_mediumSmall__36kgqpc Heading_HeadingStyle__36kgqp0',medium:'Heading_paddingRight_medium__36kgqpd Heading_HeadingStyle__36kgqp0',mediumLarge:'Heading_paddingRight_mediumLarge__36kgqpe Heading_HeadingStyle__36kgqp0',large:'Heading_paddingRight_large__36kgqpf Heading_HeadingStyle__36kgqp0',xLarge:'Heading_paddingRight_xLarge__36kgqpg Heading_HeadingStyle__36kgqp0'};
1124
+ var paddingTop$1 = {none:'Heading_paddingTop_none__36kgqp1 Heading_HeadingStyle__36kgqp0',xSmall:'Heading_paddingTop_xSmall__36kgqp2 Heading_HeadingStyle__36kgqp0',small:'Heading_paddingTop_small__36kgqp3 Heading_HeadingStyle__36kgqp0',mediumSmall:'Heading_paddingTop_mediumSmall__36kgqp4 Heading_HeadingStyle__36kgqp0',medium:'Heading_paddingTop_medium__36kgqp5 Heading_HeadingStyle__36kgqp0',mediumLarge:'Heading_paddingTop_mediumLarge__36kgqp6 Heading_HeadingStyle__36kgqp0',large:'Heading_paddingTop_large__36kgqp7 Heading_HeadingStyle__36kgqp0',xLarge:'Heading_paddingTop_xLarge__36kgqp8 Heading_HeadingStyle__36kgqp0'};
1086
1125
 
1087
- var HeaderTags;
1088
- (function(HeaderTags) {
1089
- HeaderTags["h1"] = "h1";
1090
- HeaderTags["h2"] = "h2";
1091
- HeaderTags["h3"] = "h3";
1092
- HeaderTags["h4"] = "h4";
1093
- })(HeaderTags || (HeaderTags = {}));
1126
+ var HeadingTags;
1127
+ (function(HeadingTags) {
1128
+ HeadingTags["h1"] = "h1";
1129
+ HeadingTags["h2"] = "h2";
1130
+ HeadingTags["h3"] = "h3";
1131
+ HeadingTags["h4"] = "h4";
1132
+ })(HeadingTags || (HeadingTags = {}));
1094
1133
 
1095
1134
  function _define_property$3(obj, key, value) {
1096
1135
  if (key in obj) {
@@ -1120,8 +1159,8 @@ function _object_spread$3(target) {
1120
1159
  }
1121
1160
  return target;
1122
1161
  }
1123
- function TextHeader(param) {
1124
- var value = param.value, id = param.id, className = param.className, style = param.style, _param_tag = param.tag, tag = _param_tag === void 0 ? HeaderTags.h1 : _param_tag, _param_padding = param.padding, padding = _param_padding === void 0 ? [
1162
+ function Heading(param) {
1163
+ var value = param.value, id = param.id, className = param.className, style = param.style, _param_tag = param.tag, tag = _param_tag === void 0 ? HeadingTags.h1 : _param_tag, _param_padding = param.padding, padding = _param_padding === void 0 ? [
1125
1164
  Spacing.none
1126
1165
  ] : _param_padding, children = param.children;
1127
1166
  var Tag = tag;
@@ -1129,11 +1168,11 @@ function TextHeader(param) {
1129
1168
  return /*#__PURE__*/ React.createElement(Tag, {
1130
1169
  id: id,
1131
1170
  style: _object_spread$3({}, style),
1132
- className: classnames('TextHeader', TextHeaderStyle, 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)
1171
+ className: classnames('Heading', HeadingStyle, 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)
1133
1172
  }, value ? value : children);
1134
1173
  }
1135
- TextHeader.tag = HeaderTags;
1136
- TextHeader.padding = Spacing;
1174
+ Heading.tag = HeadingTags;
1175
+ Heading.padding = Spacing;
1137
1176
 
1138
1177
  var LayoutStyle = 'Box_LayoutStyle__wglvzp0';
1139
1178
  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'};
@@ -1530,7 +1569,7 @@ function ModuleHeader(param) {
1530
1569
  style: _object_spread({}, style)
1531
1570
  }, /*#__PURE__*/ React__default.createElement(Box, {
1532
1571
  flexDirection: Box.flexDirection.column
1533
- }, /*#__PURE__*/ React__default.createElement(TextHeader, null, title), /*#__PURE__*/ React__default.createElement(TextHeader, null, subtitle)), /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(KeyValueDisplayScreen, {
1572
+ }, /*#__PURE__*/ React__default.createElement(Heading, null, title), /*#__PURE__*/ React__default.createElement(Heading, null, subtitle)), /*#__PURE__*/ React__default.createElement(Box, null, /*#__PURE__*/ React__default.createElement(KeyValueDisplayScreen, {
1534
1573
  data: {
1535
1574
  key: activeItem === null || activeItem === void 0 ? void 0 : activeItem.key,
1536
1575
  value: activeItem === null || activeItem === void 0 ? void 0 : activeItem.value
@@ -1544,11 +1583,11 @@ function ModuleHeader(param) {
1544
1583
  function ThemeProvider(param) {
1545
1584
  var theme = param.theme, className = param.className, children = param.children;
1546
1585
  return /*#__PURE__*/ React__default.createElement("div", {
1547
- className: classnames('rootValues', theme ? theme : '', className)
1586
+ className: classnames('root', theme ? theme : '', className)
1548
1587
  }, children);
1549
1588
  }
1550
1589
 
1551
- var rootValues = {spacing:{none:'var(--spacing-none__1rgzsg00)',xSmall:'var(--spacing-xSmall__1rgzsg01)',small:'var(--spacing-small__1rgzsg02)',mediumSmall:'var(--spacing-mediumSmall__1rgzsg03)',medium:'var(--spacing-medium__1rgzsg04)',mediumLarge:'var(--spacing-mediumLarge__1rgzsg05)',large:'var(--spacing-large__1rgzsg06)',xLarge:'var(--spacing-xLarge__1rgzsg07)'},fontSizes:{xSmall:'var(--fontSizes-xSmall__1rgzsg08)',small:'var(--fontSizes-small__1rgzsg09)',medium:'var(--fontSizes-medium__1rgzsg0a)',large:'var(--fontSizes-large__1rgzsg0b)',xLarge:'var(--fontSizes-xLarge__1rgzsg0c)',title:'var(--fontSizes-title__1rgzsg0d)'},borderRadius:'var(--borderRadius__1rgzsg0e)',namedColors:{primary:'var(--namedColors-primary__1rgzsg0f)',accent:'var(--namedColors-accent__1rgzsg0g)',alert:'var(--namedColors-alert__1rgzsg0h)',muted:'var(--namedColors-muted__1rgzsg0i)',highlighted:'var(--namedColors-highlighted__1rgzsg0j)',selected:'var(--namedColors-selected__1rgzsg0k)',text:{'default':'var(--namedColors-text-default__1rgzsg0l)',inverse:'var(--namedColors-text-inverse__1rgzsg0m)'},background:{page:'var(--namedColors-background-page__1rgzsg0n)',section:'var(--namedColors-background-section__1rgzsg0o)',popover:'var(--namedColors-background-popover__1rgzsg0p)',input:'var(--namedColors-background-input__1rgzsg0q)'},border:'var(--namedColors-border__1rgzsg0r)'},colors:{grey:{'100':'var(--colors-grey-100__1rgzsg0s)','200':'var(--colors-grey-200__1rgzsg0t)','300':'var(--colors-grey-300__1rgzsg0u)','400':'var(--colors-grey-400__1rgzsg0v)','500':'var(--colors-grey-500__1rgzsg0w)','600':'var(--colors-grey-600__1rgzsg0x)','700':'var(--colors-grey-700__1rgzsg0y)'}},fonts:{heading:'var(--fonts-heading__1rgzsg0z)',body:'var(--fonts-body__1rgzsg010)',label:'var(--fonts-label__1rgzsg011)'}};
1590
+ var root = {spacing:{none:'var(--spacing-none__1rgzsg00)',xSmall:'var(--spacing-xSmall__1rgzsg01)',small:'var(--spacing-small__1rgzsg02)',mediumSmall:'var(--spacing-mediumSmall__1rgzsg03)',medium:'var(--spacing-medium__1rgzsg04)',mediumLarge:'var(--spacing-mediumLarge__1rgzsg05)',large:'var(--spacing-large__1rgzsg06)',xLarge:'var(--spacing-xLarge__1rgzsg07)'},fontSizes:{xSmall:'var(--fontSizes-xSmall__1rgzsg08)',small:'var(--fontSizes-small__1rgzsg09)',medium:'var(--fontSizes-medium__1rgzsg0a)',large:'var(--fontSizes-large__1rgzsg0b)',xLarge:'var(--fontSizes-xLarge__1rgzsg0c)',title:'var(--fontSizes-title__1rgzsg0d)'},borderRadius:'var(--borderRadius__1rgzsg0e)',namedColors:{primary:'var(--namedColors-primary__1rgzsg0f)',accent:'var(--namedColors-accent__1rgzsg0g)',alert:'var(--namedColors-alert__1rgzsg0h)',muted:'var(--namedColors-muted__1rgzsg0i)',highlighted:'var(--namedColors-highlighted__1rgzsg0j)',selected:'var(--namedColors-selected__1rgzsg0k)',text:{'default':'var(--namedColors-text-default__1rgzsg0l)',inverse:'var(--namedColors-text-inverse__1rgzsg0m)'},background:{page:'var(--namedColors-background-page__1rgzsg0n)',section:'var(--namedColors-background-section__1rgzsg0o)',popover:'var(--namedColors-background-popover__1rgzsg0p)',input:'var(--namedColors-background-input__1rgzsg0q)'},border:'var(--namedColors-border__1rgzsg0r)'},colors:{grey:{'100':'var(--colors-grey-100__1rgzsg0s)','200':'var(--colors-grey-200__1rgzsg0t)','300':'var(--colors-grey-300__1rgzsg0u)','400':'var(--colors-grey-400__1rgzsg0v)','500':'var(--colors-grey-500__1rgzsg0w)','600':'var(--colors-grey-600__1rgzsg0x)','700':'var(--colors-grey-700__1rgzsg0y)'}},fonts:{heading:'var(--fonts-heading__1rgzsg0z)',body:'var(--fonts-body__1rgzsg010)',label:'var(--fonts-label__1rgzsg011)'}};
1552
1591
 
1553
- export { Slider as BarSlider, Box, Button, Dropdown, IndicatorLight, KeyValueDisplayScreen, Label, Matrix, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Tabs, TextHeader, TextInput, ThemeProvider, clamp, decimalToPercent, getNormalizedValue, getPosition, getTransformString, normalizedToScaledValue, percentToDecimal, rootValues as root, useSlider };
1592
+ export { Slider as BarSlider, Box, Button, Dropdown, Heading, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Tabs, ThemeProvider, clamp, decimalToPercent, getNormalizedValue, getPosition, getTransformString, normalizedToScaledValue, percentToDecimal, root, useSlider };
1554
1593
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/lib/styles.css.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { createGlobalTheme, globalStyle } from '@vanilla-extract/css';
2
2
 
3
- const rootValues = createGlobalTheme('.rootValues', {
3
+ const root = createGlobalTheme('.root', {
4
4
  spacing: {
5
5
  none: '0px',
6
6
  xSmall: '2px',
@@ -79,4 +79,4 @@ globalStyle('button:disabled, input:disabled', {
79
79
  cursor: 'not-allowed',
80
80
  });
81
81
 
82
- export { rootValues };
82
+ export { root };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antimatter-audio/antimatter-ui",
3
- "version": "8.0.1",
3
+ "version": "8.2.0",
4
4
  "description": "React UI component library for Antimatter Audio.",
5
5
  "repository": {
6
6
  "type": "git",