@antimatter-audio/antimatter-ui 8.0.0 → 8.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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/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
|
|
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",
|
|
@@ -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
|
|
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,
|
|
468
|
+
export { Slider as BarSlider, Box, Button, Dropdown, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Tabs, TextHeader, 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-
|
|
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';
|
|
@@ -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
|
|
365
|
-
var value = param.value, minLength = param.minLength, maxLength = param.maxLength, min = param.min, max = param.max;
|
|
366
|
-
|
|
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 (
|
|
376
|
-
|
|
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
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
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
|
-
|
|
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
|
|
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 =
|
|
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 =
|
|
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
|
|
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 =
|
|
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(
|
|
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,
|
|
@@ -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('
|
|
1586
|
+
className: classnames('root', theme ? theme : '', className)
|
|
1548
1587
|
}, children);
|
|
1549
1588
|
}
|
|
1550
1589
|
|
|
1551
|
-
var
|
|
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,
|
|
1592
|
+
export { Slider as BarSlider, Box, Button, Dropdown, IndicatorLight, Input, KeyValueDisplayScreen, Label, Matrix, ModuleHeader, Oscilloscope, RotarySlider, SliderValue, Tabs, TextHeader, 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
|
|
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 {
|
|
82
|
+
export { root };
|