@antimatter-audio/antimatter-ui 1.9.2 → 2.0.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.
- package/dist/index.d.ts +65 -17
- package/dist/index.js +96 -49
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -12,8 +12,8 @@ interface TabsProps {
|
|
|
12
12
|
declare const Tabs: React__default.FC<React__default.PropsWithChildren<TabsProps>>;
|
|
13
13
|
|
|
14
14
|
declare enum BUTTON_SIZE {
|
|
15
|
-
SMALL = "
|
|
16
|
-
LARGE = "
|
|
15
|
+
SMALL = "small",
|
|
16
|
+
LARGE = "large"
|
|
17
17
|
}
|
|
18
18
|
declare enum BUTTON_TYPE {
|
|
19
19
|
MOMENTARY = "MOMENTARY",
|
|
@@ -30,7 +30,11 @@ interface TextButtonProps {
|
|
|
30
30
|
style?: object;
|
|
31
31
|
children?: React.ReactNode;
|
|
32
32
|
}
|
|
33
|
-
declare
|
|
33
|
+
declare function Button({ disabled, text, id, className, style, children, type, size, }: React.PropsWithChildren<TextButtonProps>): React.JSX.Element;
|
|
34
|
+
declare namespace Button {
|
|
35
|
+
var TYPE: typeof BUTTON_TYPE;
|
|
36
|
+
var SIZE: typeof BUTTON_SIZE;
|
|
37
|
+
}
|
|
34
38
|
|
|
35
39
|
/**
|
|
36
40
|
* @typedef SPACING
|
|
@@ -61,6 +65,24 @@ declare enum DIRECTION {
|
|
|
61
65
|
VERTICAL = "vertical",
|
|
62
66
|
HORIZONTAL = "horizontal"
|
|
63
67
|
}
|
|
68
|
+
declare enum ALIGN {
|
|
69
|
+
FLEX_START = "flex-start",
|
|
70
|
+
FLEX_END = "flex-end",
|
|
71
|
+
CENTER = "center"
|
|
72
|
+
}
|
|
73
|
+
declare enum JUSTIFY {
|
|
74
|
+
FLEX_START = "flex-start",
|
|
75
|
+
FLEX_END = "flex-end",
|
|
76
|
+
CENTER = "center"
|
|
77
|
+
}
|
|
78
|
+
declare enum HEIGHT {
|
|
79
|
+
FULL = "100%",
|
|
80
|
+
AUTO = "auto"
|
|
81
|
+
}
|
|
82
|
+
declare enum WIDTH {
|
|
83
|
+
FULL = "100%",
|
|
84
|
+
AUTO = "auto"
|
|
85
|
+
}
|
|
64
86
|
|
|
65
87
|
interface GridColProps {
|
|
66
88
|
span?: number;
|
|
@@ -74,7 +96,10 @@ interface GridColProps {
|
|
|
74
96
|
border?: boolean;
|
|
75
97
|
onClick?: () => void;
|
|
76
98
|
}
|
|
77
|
-
declare
|
|
99
|
+
declare function Col({ offset, centerContentHorizontal, centerContentVertical, alignContentRight, className, children, onClick, span, padding, style, border, }: React.PropsWithChildren<GridColProps>): React.JSX.Element;
|
|
100
|
+
declare namespace Col {
|
|
101
|
+
var PADDING: typeof SPACING;
|
|
102
|
+
}
|
|
78
103
|
|
|
79
104
|
declare enum FLEX_DIRECTION {
|
|
80
105
|
ROW = 0,
|
|
@@ -90,7 +115,11 @@ interface GridRowProps {
|
|
|
90
115
|
border?: boolean;
|
|
91
116
|
onClick?: () => void;
|
|
92
117
|
}
|
|
93
|
-
declare
|
|
118
|
+
declare function Row({ className, id, children, onClick, style, padding, flexDirection, border, }: React.PropsWithChildren<GridRowProps>): React.JSX.Element;
|
|
119
|
+
declare namespace Row {
|
|
120
|
+
var PADDING: typeof SPACING$1;
|
|
121
|
+
var FLEX_DIRECTION: typeof FLEX_DIRECTION;
|
|
122
|
+
}
|
|
94
123
|
|
|
95
124
|
interface DropdownProps {
|
|
96
125
|
id: string;
|
|
@@ -98,7 +127,7 @@ interface DropdownProps {
|
|
|
98
127
|
className?: string;
|
|
99
128
|
onChange?: (event: any) => {};
|
|
100
129
|
}
|
|
101
|
-
declare
|
|
130
|
+
declare function Dropdown({ items, className, id }: DropdownProps): React__default.JSX.Element;
|
|
102
131
|
|
|
103
132
|
interface KnobProps {
|
|
104
133
|
id: any;
|
|
@@ -108,7 +137,10 @@ interface KnobProps {
|
|
|
108
137
|
className?: string;
|
|
109
138
|
style?: object;
|
|
110
139
|
}
|
|
111
|
-
declare
|
|
140
|
+
declare function Knob({ label, labelPosition, showValue, id, className, }: React__default.PropsWithChildren<KnobProps>): React__default.JSX.Element;
|
|
141
|
+
declare namespace Knob {
|
|
142
|
+
var LABEL_POSITION: typeof POSITION;
|
|
143
|
+
}
|
|
112
144
|
|
|
113
145
|
interface SliderProps {
|
|
114
146
|
id: any;
|
|
@@ -118,22 +150,30 @@ interface SliderProps {
|
|
|
118
150
|
showValue?: boolean;
|
|
119
151
|
className?: string;
|
|
120
152
|
}
|
|
121
|
-
declare
|
|
153
|
+
declare function Slider({ label, labelPosition, orientation, showValue, id, className, }: React__default.PropsWithChildren<SliderProps>): React__default.JSX.Element;
|
|
154
|
+
declare namespace Slider {
|
|
155
|
+
var LABEL_POSITION: typeof POSITION;
|
|
156
|
+
var ORIENTATION: typeof DIRECTION;
|
|
157
|
+
}
|
|
122
158
|
|
|
123
|
-
declare enum
|
|
159
|
+
declare enum HEADER_LEVELS {
|
|
124
160
|
H1 = "h1",
|
|
125
161
|
H2 = "h2"
|
|
126
162
|
}
|
|
127
163
|
|
|
128
164
|
interface TextHeaderProps {
|
|
129
|
-
level?:
|
|
165
|
+
level?: HEADER_LEVELS;
|
|
130
166
|
padding?: Array<SPACING>;
|
|
131
167
|
text?: string;
|
|
132
168
|
id?: any;
|
|
133
169
|
className?: string;
|
|
134
170
|
style?: object;
|
|
135
171
|
}
|
|
136
|
-
declare
|
|
172
|
+
declare function TextHeader({ text, id, className, style, level, padding, children, }: React.PropsWithChildren<TextHeaderProps>): React.JSX.Element;
|
|
173
|
+
declare namespace TextHeader {
|
|
174
|
+
var HEADER_LEVELS: typeof HEADER_LEVELS;
|
|
175
|
+
var SPACING: typeof SPACING;
|
|
176
|
+
}
|
|
137
177
|
|
|
138
178
|
interface TextLabelProps {
|
|
139
179
|
text?: string;
|
|
@@ -147,15 +187,23 @@ declare const TextLabel: React.FC<React.PropsWithChildren<TextLabelProps>>;
|
|
|
147
187
|
interface LayoutProps {
|
|
148
188
|
className?: string;
|
|
149
189
|
style?: React__default.CSSProperties;
|
|
150
|
-
|
|
151
|
-
|
|
190
|
+
alignItems?: ALIGN;
|
|
191
|
+
justifyContent?: JUSTIFY;
|
|
152
192
|
gap?: SPACING;
|
|
153
193
|
direction?: DIRECTION;
|
|
154
|
-
width?: string;
|
|
155
|
-
height?: string;
|
|
194
|
+
width?: WIDTH | string;
|
|
195
|
+
height?: HEIGHT | string;
|
|
156
196
|
border?: boolean;
|
|
157
197
|
padding?: Array<SPACING>;
|
|
158
198
|
}
|
|
159
|
-
declare
|
|
199
|
+
declare function Layout({ alignItems, justifyContent, className, style, children, width, height, border, direction, padding, gap, }: React__default.PropsWithChildren<LayoutProps>): React__default.JSX.Element;
|
|
200
|
+
declare namespace Layout {
|
|
201
|
+
var ALIGN_ITEMS: typeof ALIGN;
|
|
202
|
+
var JUSTIFY_CONTENT: typeof JUSTIFY;
|
|
203
|
+
var GAP: typeof SPACING;
|
|
204
|
+
var DIRECTION: typeof DIRECTION;
|
|
205
|
+
var WIDTH: typeof WIDTH;
|
|
206
|
+
var HEIGHT: typeof HEIGHT;
|
|
207
|
+
}
|
|
160
208
|
|
|
161
|
-
export {
|
|
209
|
+
export { Button, Col, Dropdown, Knob, Layout, Row, Slider, Tabs, TextHeader, TextLabel };
|
package/dist/index.js
CHANGED
|
@@ -36,7 +36,7 @@ function styleInject(css, ref) {
|
|
|
36
36
|
var css_248z$9 = "/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol,\nul {\n list-style: none;\n}\n\nblockquote,\nq {\n quotes: none;\n}\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n content: \"\";\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n.flex-align-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.flex-align-center-vertical {\n display: flex;\n align-items: center;\n}\n\n.flex-align-center-horizontal {\n display: flex;\n justify-content: center;\n}\n\n.flex-align-start {\n display: flex;\n justify-content: flex-start;\n}\n\n.flex-align-end {\n display: flex;\n justify-content: flex-end;\n}\n\n.flex-direction-column {\n display: flex;\n flex-direction: column;\n}\n\n.flex-wrap-nowrap {\n flex-wrap: nowrap;\n}\n\n.padding-around-xsmall {\n padding: 2px;\n}\n\n.padding-around-small {\n padding: 4px;\n}\n\n.padding-around-mediumsmall {\n padding: 8px;\n}\n\n.padding-around-medium {\n padding: 12px;\n}\n\n.padding-around-mediumlarge {\n padding: 16px;\n}\n\n.padding-around-large {\n padding: 20px;\n}\n\n.padding-around-xlarge {\n padding: 24px;\n}\n\n.padding-vertical-xsmall {\n padding: 2px 0;\n}\n\n.padding-vertical-small {\n padding: 4px 0;\n}\n\n.padding-vertical-mediumsmall {\n padding: 8px 0;\n}\n\n.padding-vertical-medium {\n padding: 12px 0;\n}\n\n.padding-vertical-mediumlarge {\n padding: 16px 0;\n}\n\n.padding-vertical-large {\n padding: 20px 0;\n}\n\n.padding-vertical-xlarge {\n padding: 24px 0;\n}\n\n.padding-horizontal-xsmall {\n padding: 0 2px;\n}\n\n.padding-horizontal-small {\n padding: 0 4px;\n}\n\n.padding-horizontal-mediumsmall {\n padding: 0 8px;\n}\n\n.padding-horizontal-medium {\n padding: 0 12px;\n}\n\n.padding-horizontal-mediumlarge {\n padding: 0 16px;\n}\n\n.padding-horizontal-large {\n padding: 0 20px;\n}\n\n.padding-horizontal-xlarge {\n padding: 0 24px;\n}\n\n.padding-top-xsmall {\n padding-top: 2px;\n}\n\n.padding-top-small {\n padding-top: 4px;\n}\n\n.padding-top-mediumsmall {\n padding-top: 8px;\n}\n\n.padding-top-medium {\n padding-top: 12px;\n}\n\n.padding-top-mediumlarge {\n padding-top: 16px;\n}\n\n.padding-top-large {\n padding-top: 20px;\n}\n\n.padding-top-xlarge {\n padding-top: 24px;\n}\n\n.padding-right-xsmall {\n padding-right: 2px;\n}\n\n.padding-right-small {\n padding-right: 4px;\n}\n\n.padding-right-mediumsmall {\n padding-right: 8px;\n}\n\n.padding-right-medium {\n padding-right: 12px;\n}\n\n.padding-right-mediumlarge {\n padding-right: 16px;\n}\n\n.padding-right-large {\n padding-right: 20px;\n}\n\n.padding-right-xlarge {\n padding-right: 24px;\n}\n\n.padding-bottom-xsmall {\n padding-bottom: 2px;\n}\n\n.padding-bottom-small {\n padding-bottom: 4px;\n}\n\n.padding-bottom-mediumsmall {\n padding-bottom: 8px;\n}\n\n.padding-bottom-medium {\n padding-bottom: 12px;\n}\n\n.padding-bottom-mediumlarge {\n padding-bottom: 16px;\n}\n\n.padding-bottom-large {\n padding-bottom: 20px;\n}\n\n.padding-bottom-xlarge {\n padding-bottom: 24px;\n}\n\n.padding-left-xsmall {\n padding-left: 2px;\n}\n\n.padding-left-small {\n padding-left: 4px;\n}\n\n.padding-left-mediumsmall {\n padding-left: 8px;\n}\n\n.padding-left-medium {\n padding-left: 12px;\n}\n\n.padding-left-mediumlarge {\n padding-left: 16px;\n}\n\n.padding-left-large {\n padding-left: 20px;\n}\n\n.padding-left-xlarge {\n padding-left: 24px;\n}\n\n.height-100-percent {\n height: 100%;\n}\n\n.flex-auto {\n flex: auto;\n}";
|
|
37
37
|
styleInject(css_248z$9);
|
|
38
38
|
|
|
39
|
-
var css_248z$8 = ".Tabs {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n
|
|
39
|
+
var css_248z$8 = ".Tabs {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n color: #fff;\n border: 0;\n border-radius: 3px;\n appearance: none;\n user-select: none;\n}\n.Tabs .Tabs-item {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px 8px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n color: #fff;\n background-color: #737373;\n border: 0;\n appearance: none;\n user-select: none;\n}\n.Tabs .Tabs-item:first-child {\n border-radius: 3px 0 0 3px;\n}\n.Tabs .Tabs-item:last-child {\n border-radius: 0 3px 3px 0;\n}\n.Tabs .Tabs-item:hover, .Tabs .Tabs-item:focus, .Tabs .Tabs-item:active {\n outline: 0;\n}\n.Tabs .Tabs-item:hover {\n background-color: #606060;\n color: #eee;\n}\n.Tabs .Tabs-item[data-headlessui-state=selected] {\n background-color: #404040;\n}\n.Tabs .Tabs-item[data-headlessui-state=\"selected hover\"] {\n background-color: #404040;\n}";
|
|
40
40
|
styleInject(css_248z$8);
|
|
41
41
|
|
|
42
42
|
/**
|
|
@@ -70,6 +70,28 @@ var DIRECTION;
|
|
|
70
70
|
DIRECTION["VERTICAL"] = "vertical";
|
|
71
71
|
DIRECTION["HORIZONTAL"] = "horizontal";
|
|
72
72
|
})(DIRECTION || (DIRECTION = {}));
|
|
73
|
+
var ALIGN;
|
|
74
|
+
(function(ALIGN) {
|
|
75
|
+
ALIGN["FLEX_START"] = "flex-start";
|
|
76
|
+
ALIGN["FLEX_END"] = "flex-end";
|
|
77
|
+
ALIGN["CENTER"] = "center";
|
|
78
|
+
})(ALIGN || (ALIGN = {}));
|
|
79
|
+
var JUSTIFY;
|
|
80
|
+
(function(JUSTIFY) {
|
|
81
|
+
JUSTIFY["FLEX_START"] = "flex-start";
|
|
82
|
+
JUSTIFY["FLEX_END"] = "flex-end";
|
|
83
|
+
JUSTIFY["CENTER"] = "center";
|
|
84
|
+
})(JUSTIFY || (JUSTIFY = {}));
|
|
85
|
+
var HEIGHT;
|
|
86
|
+
(function(HEIGHT) {
|
|
87
|
+
HEIGHT["FULL"] = "100%";
|
|
88
|
+
HEIGHT["AUTO"] = "auto";
|
|
89
|
+
})(HEIGHT || (HEIGHT = {}));
|
|
90
|
+
var WIDTH;
|
|
91
|
+
(function(WIDTH) {
|
|
92
|
+
WIDTH["FULL"] = "100%";
|
|
93
|
+
WIDTH["AUTO"] = "auto";
|
|
94
|
+
})(WIDTH || (WIDTH = {}));
|
|
73
95
|
|
|
74
96
|
var Tabs = function(param) {
|
|
75
97
|
var items = param.items, className = param.className, _param_padding = param.padding, padding = _param_padding === void 0 ? [
|
|
@@ -106,18 +128,14 @@ styleInject(css_248z$7);
|
|
|
106
128
|
|
|
107
129
|
var BUTTON_SIZE;
|
|
108
130
|
(function(BUTTON_SIZE) {
|
|
109
|
-
BUTTON_SIZE["SMALL"] = "
|
|
110
|
-
BUTTON_SIZE["LARGE"] = "
|
|
131
|
+
BUTTON_SIZE["SMALL"] = "small";
|
|
132
|
+
BUTTON_SIZE["LARGE"] = "large";
|
|
111
133
|
})(BUTTON_SIZE || (BUTTON_SIZE = {}));
|
|
112
134
|
var BUTTON_TYPE;
|
|
113
135
|
(function(BUTTON_TYPE) {
|
|
114
136
|
BUTTON_TYPE["MOMENTARY"] = "MOMENTARY";
|
|
115
137
|
BUTTON_TYPE["LATCH"] = "LATCH";
|
|
116
138
|
})(BUTTON_TYPE || (BUTTON_TYPE = {}));
|
|
117
|
-
var BUTTON_SIZE_CLASSES = {
|
|
118
|
-
SMALL: 'button-small',
|
|
119
|
-
LARGE: 'button-large'
|
|
120
|
-
};
|
|
121
139
|
|
|
122
140
|
function _array_like_to_array$3(arr, len) {
|
|
123
141
|
if (len == null || len > arr.length) len = arr.length;
|
|
@@ -165,8 +183,8 @@ function _unsupported_iterable_to_array$3(o, minLen) {
|
|
|
165
183
|
if (n === "Map" || n === "Set") return Array.from(n);
|
|
166
184
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3(o, minLen);
|
|
167
185
|
}
|
|
168
|
-
|
|
169
|
-
var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, children = param.children, _param_type = param.type, type = _param_type === void 0 ? BUTTON_TYPE.LATCH : _param_type, _param_size = param.size, size = _param_size === void 0 ?
|
|
186
|
+
function Button(param) {
|
|
187
|
+
var disabled = param.disabled, text = param.text, id = param.id, className = param.className, style = param.style, children = param.children, _param_type = param.type, type = _param_type === void 0 ? BUTTON_TYPE.LATCH : _param_type, _param_size = param.size, size = _param_size === void 0 ? BUTTON_SIZE.SMALL : _param_size;
|
|
170
188
|
var _React_useState = _sliced_to_array$3(React.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
|
|
171
189
|
var buttonState = Juce.getToggleState(id);
|
|
172
190
|
var handleMouseDown = function(e) {
|
|
@@ -199,9 +217,11 @@ var Button = function(param) {
|
|
|
199
217
|
onMouseDown: handleMouseDown,
|
|
200
218
|
disabled: disabled,
|
|
201
219
|
style: style,
|
|
202
|
-
className: classnames('Button', size, className, disabled && 'disabled', isSelected && 'selected')
|
|
220
|
+
className: classnames('Button', "button-".concat(size), className, disabled && 'disabled', isSelected && 'selected')
|
|
203
221
|
}, text ? text : children);
|
|
204
|
-
}
|
|
222
|
+
}
|
|
223
|
+
Button.TYPE = BUTTON_TYPE;
|
|
224
|
+
Button.SIZE = BUTTON_SIZE;
|
|
205
225
|
|
|
206
226
|
function _define_property$2(obj, key, value) {
|
|
207
227
|
if (key in obj) {
|
|
@@ -250,7 +270,7 @@ function _object_spread_props$2(target, source) {
|
|
|
250
270
|
}
|
|
251
271
|
return target;
|
|
252
272
|
}
|
|
253
|
-
|
|
273
|
+
function Col(param) {
|
|
254
274
|
var offset = param.offset, centerContentHorizontal = param.centerContentHorizontal, centerContentVertical = param.centerContentVertical, alignContentRight = param.alignContentRight, className = param.className, children = param.children, onClick = param.onClick, span = param.span, _param_padding = param.padding, padding = _param_padding === void 0 ? [
|
|
255
275
|
SPACING.NONE
|
|
256
276
|
] : _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;
|
|
@@ -269,7 +289,8 @@ var Col = function(param) {
|
|
|
269
289
|
padding[3]
|
|
270
290
|
])
|
|
271
291
|
}, children);
|
|
272
|
-
}
|
|
292
|
+
}
|
|
293
|
+
Col.PADDING = SPACING;
|
|
273
294
|
|
|
274
295
|
var FLEX_DIRECTION;
|
|
275
296
|
(function(FLEX_DIRECTION) {
|
|
@@ -324,7 +345,7 @@ function _object_spread_props$1(target, source) {
|
|
|
324
345
|
}
|
|
325
346
|
return target;
|
|
326
347
|
}
|
|
327
|
-
|
|
348
|
+
function Row(param) {
|
|
328
349
|
var className = param.className, id = param.id, children = param.children, onClick = param.onClick, _param_style = param.style, style = _param_style === void 0 ? {} : _param_style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
|
|
329
350
|
SPACING.MEDIUM,
|
|
330
351
|
SPACING.NONE
|
|
@@ -346,7 +367,9 @@ var Row = function(param) {
|
|
|
346
367
|
]),
|
|
347
368
|
id: id
|
|
348
369
|
}, children);
|
|
349
|
-
}
|
|
370
|
+
}
|
|
371
|
+
Row.PADDING = SPACING;
|
|
372
|
+
Row.FLEX_DIRECTION = FLEX_DIRECTION;
|
|
350
373
|
|
|
351
374
|
var css_248z$6 = ".wrapper {\n box-sizing: border-box;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.container-fluid {\n margin-right: auto;\n margin-left: auto;\n padding-right: 2rem;\n padding-left: 2rem;\n}\n\n.row {\n box-sizing: border-box;\n display: flex;\n flex: 0, 1, auto;\n flex-direction: row;\n flex-wrap: wrap;\n margin-right: 0;\n margin-left: 0;\n}\n\n.row.reverse {\n flex-direction: row-reverse;\n}\n\n.row.flex-direction--column {\n flex-direction: column;\n}\n\n.col.reverse {\n flex-direction: column-reverse;\n}\n\n.col-grow--zero {\n flex-grow: 0;\n}\n\n.col-grow--one {\n flex-grow: 1;\n}\n\n.col-xs {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: auto;\n}\n.flex-direction--column .col-xs {\n flex-grow: 1;\n}\n\n.col-xs-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 8.3333333333%;\n max-width: 8.3333333333%;\n}\n.flex-direction--column .col-xs-1 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-1 {\n max-width: 100%;\n}\n\n.col-xs-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 16.6666666667%;\n max-width: 16.6666666667%;\n}\n.flex-direction--column .col-xs-2 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-2 {\n max-width: 100%;\n}\n\n.col-xs-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 25%;\n max-width: 25%;\n}\n.flex-direction--column .col-xs-3 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-3 {\n max-width: 100%;\n}\n\n.col-xs-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 33.3333333333%;\n max-width: 33.3333333333%;\n}\n.flex-direction--column .col-xs-4 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-4 {\n max-width: 100%;\n}\n\n.col-xs-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 41.6666666667%;\n max-width: 41.6666666667%;\n}\n.flex-direction--column .col-xs-5 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-5 {\n max-width: 100%;\n}\n\n.col-xs-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 50%;\n max-width: 50%;\n}\n.flex-direction--column .col-xs-6 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-6 {\n max-width: 100%;\n}\n\n.col-xs-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 58.3333333333%;\n max-width: 58.3333333333%;\n}\n.flex-direction--column .col-xs-7 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-7 {\n max-width: 100%;\n}\n\n.col-xs-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 66.6666666667%;\n max-width: 66.6666666667%;\n}\n.flex-direction--column .col-xs-8 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-8 {\n max-width: 100%;\n}\n\n.col-xs-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 75%;\n max-width: 75%;\n}\n.flex-direction--column .col-xs-9 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-9 {\n max-width: 100%;\n}\n\n.col-xs-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 83.3333333333%;\n max-width: 83.3333333333%;\n}\n.flex-direction--column .col-xs-10 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-10 {\n max-width: 100%;\n}\n\n.col-xs-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 91.6666666667%;\n max-width: 91.6666666667%;\n}\n.flex-direction--column .col-xs-11 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-11 {\n max-width: 100%;\n}\n\n.col-xs-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 100%;\n max-width: 100%;\n}\n.flex-direction--column .col-xs-12 {\n flex-grow: 1;\n}\n\n.flex-direction--column .col-xs-12 {\n max-width: 100%;\n}\n\n.col-xs-offset-0 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 0;\n}\n.flex-direction--column .col-xs-offset-0 {\n flex-grow: 1;\n}\n\n.col-xs-offset-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 8.3333333333%;\n}\n.flex-direction--column .col-xs-offset-1 {\n flex-grow: 1;\n}\n\n.col-xs-offset-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 16.6666666667%;\n}\n.flex-direction--column .col-xs-offset-2 {\n flex-grow: 1;\n}\n\n.col-xs-offset-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 25%;\n}\n.flex-direction--column .col-xs-offset-3 {\n flex-grow: 1;\n}\n\n.col-xs-offset-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 33.3333333333%;\n}\n.flex-direction--column .col-xs-offset-4 {\n flex-grow: 1;\n}\n\n.col-xs-offset-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 41.6666666667%;\n}\n.flex-direction--column .col-xs-offset-5 {\n flex-grow: 1;\n}\n\n.col-xs-offset-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 50%;\n}\n.flex-direction--column .col-xs-offset-6 {\n flex-grow: 1;\n}\n\n.col-xs-offset-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 58.3333333333%;\n}\n.flex-direction--column .col-xs-offset-7 {\n flex-grow: 1;\n}\n\n.col-xs-offset-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 66.6666666667%;\n}\n.flex-direction--column .col-xs-offset-8 {\n flex-grow: 1;\n}\n\n.col-xs-offset-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 75%;\n}\n.flex-direction--column .col-xs-offset-9 {\n flex-grow: 1;\n}\n\n.col-xs-offset-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 83.3333333333%;\n}\n.flex-direction--column .col-xs-offset-10 {\n flex-grow: 1;\n}\n\n.col-xs-offset-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 91.6666666667%;\n}\n.flex-direction--column .col-xs-offset-11 {\n flex-grow: 1;\n}\n\n.col-xs-offset-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 100%;\n}\n.flex-direction--column .col-xs-offset-12 {\n flex-grow: 1;\n}\n\n.col-xs {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n}\n\n.start-xs {\n justify-content: flex-start;\n text-align: left;\n}\n\n.center-xs {\n justify-content: center;\n text-align: center;\n}\n\n.end-xs {\n justify-content: flex-end;\n text-align: right;\n}\n\n.top-xs {\n align-items: flex-start;\n}\n\n.middle-xs {\n align-items: center;\n}\n\n.bottom-xs {\n align-items: flex-end;\n}\n\n.around-xs {\n justify-content: space-around;\n}\n\n.between-xs {\n justify-content: space-between;\n}\n\n.first-xs {\n order: -1;\n}\n\n.last-xs {\n order: 1;\n}\n\n@media only screen and (min-width: 48em) {\n .container {\n width: 46rem;\n }\n .col-sm {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: auto;\n }\n .flex-direction--column .col-sm {\n flex-grow: 1;\n }\n .col-sm-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .flex-direction--column .col-sm-1 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-1 {\n max-width: 100%;\n }\n .col-sm-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .flex-direction--column .col-sm-2 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-2 {\n max-width: 100%;\n }\n .col-sm-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n .flex-direction--column .col-sm-3 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-3 {\n max-width: 100%;\n }\n .col-sm-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .flex-direction--column .col-sm-4 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-4 {\n max-width: 100%;\n }\n .col-sm-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 41.6666666667%;\n max-width: 41.6666666667%;\n }\n .flex-direction--column .col-sm-5 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-5 {\n max-width: 100%;\n }\n .col-sm-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n .flex-direction--column .col-sm-6 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-6 {\n max-width: 100%;\n }\n .col-sm-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 58.3333333333%;\n max-width: 58.3333333333%;\n }\n .flex-direction--column .col-sm-7 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-7 {\n max-width: 100%;\n }\n .col-sm-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .flex-direction--column .col-sm-8 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-8 {\n max-width: 100%;\n }\n .col-sm-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n .flex-direction--column .col-sm-9 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-9 {\n max-width: 100%;\n }\n .col-sm-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .flex-direction--column .col-sm-10 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-10 {\n max-width: 100%;\n }\n .col-sm-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .flex-direction--column .col-sm-11 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-11 {\n max-width: 100%;\n }\n .col-sm-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n .flex-direction--column .col-sm-12 {\n flex-grow: 1;\n }\n .flex-direction--column .col-sm-12 {\n max-width: 100%;\n }\n .col-sm-offset-0 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 0;\n }\n .flex-direction--column .col-sm-offset-0 {\n flex-grow: 1;\n }\n .col-sm-offset-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 8.3333333333%;\n }\n .flex-direction--column .col-sm-offset-1 {\n flex-grow: 1;\n }\n .col-sm-offset-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 16.6666666667%;\n }\n .flex-direction--column .col-sm-offset-2 {\n flex-grow: 1;\n }\n .col-sm-offset-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 25%;\n }\n .flex-direction--column .col-sm-offset-3 {\n flex-grow: 1;\n }\n .col-sm-offset-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 33.3333333333%;\n }\n .flex-direction--column .col-sm-offset-4 {\n flex-grow: 1;\n }\n .col-sm-offset-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 41.6666666667%;\n }\n .flex-direction--column .col-sm-offset-5 {\n flex-grow: 1;\n }\n .col-sm-offset-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 50%;\n }\n .flex-direction--column .col-sm-offset-6 {\n flex-grow: 1;\n }\n .col-sm-offset-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 58.3333333333%;\n }\n .flex-direction--column .col-sm-offset-7 {\n flex-grow: 1;\n }\n .col-sm-offset-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 66.6666666667%;\n }\n .flex-direction--column .col-sm-offset-8 {\n flex-grow: 1;\n }\n .col-sm-offset-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 75%;\n }\n .flex-direction--column .col-sm-offset-9 {\n flex-grow: 1;\n }\n .col-sm-offset-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 83.3333333333%;\n }\n .flex-direction--column .col-sm-offset-10 {\n flex-grow: 1;\n }\n .col-sm-offset-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 91.6666666667%;\n }\n .flex-direction--column .col-sm-offset-11 {\n flex-grow: 1;\n }\n .col-sm-offset-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 100%;\n }\n .flex-direction--column .col-sm-offset-12 {\n flex-grow: 1;\n }\n .col-sm {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n .start-sm {\n justify-content: flex-start;\n text-align: left;\n }\n .center-sm {\n justify-content: center;\n text-align: center;\n }\n .end-sm {\n justify-content: flex-end;\n text-align: right;\n }\n .top-sm {\n align-items: flex-start;\n }\n .middle-sm {\n align-items: center;\n }\n .bottom-sm {\n align-items: flex-end;\n }\n .around-sm {\n justify-content: space-around;\n }\n .between-sm {\n justify-content: space-between;\n }\n .first-sm {\n order: -1;\n }\n .last-sm {\n order: 1;\n }\n}\n@media only screen and (min-width: 62em) {\n .container {\n width: 61rem;\n }\n .col-md {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: auto;\n }\n .flex-direction--column .col-md {\n flex-grow: 1;\n }\n .col-md-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .flex-direction--column .col-md-1 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-1 {\n max-width: 100%;\n }\n .col-md-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .flex-direction--column .col-md-2 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-2 {\n max-width: 100%;\n }\n .col-md-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n .flex-direction--column .col-md-3 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-3 {\n max-width: 100%;\n }\n .col-md-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .flex-direction--column .col-md-4 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-4 {\n max-width: 100%;\n }\n .col-md-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 41.6666666667%;\n max-width: 41.6666666667%;\n }\n .flex-direction--column .col-md-5 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-5 {\n max-width: 100%;\n }\n .col-md-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n .flex-direction--column .col-md-6 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-6 {\n max-width: 100%;\n }\n .col-md-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 58.3333333333%;\n max-width: 58.3333333333%;\n }\n .flex-direction--column .col-md-7 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-7 {\n max-width: 100%;\n }\n .col-md-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .flex-direction--column .col-md-8 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-8 {\n max-width: 100%;\n }\n .col-md-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n .flex-direction--column .col-md-9 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-9 {\n max-width: 100%;\n }\n .col-md-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .flex-direction--column .col-md-10 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-10 {\n max-width: 100%;\n }\n .col-md-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .flex-direction--column .col-md-11 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-11 {\n max-width: 100%;\n }\n .col-md-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n .flex-direction--column .col-md-12 {\n flex-grow: 1;\n }\n .flex-direction--column .col-md-12 {\n max-width: 100%;\n }\n .col-md-offset-0 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 0;\n }\n .flex-direction--column .col-md-offset-0 {\n flex-grow: 1;\n }\n .col-md-offset-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 8.3333333333%;\n }\n .flex-direction--column .col-md-offset-1 {\n flex-grow: 1;\n }\n .col-md-offset-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 16.6666666667%;\n }\n .flex-direction--column .col-md-offset-2 {\n flex-grow: 1;\n }\n .col-md-offset-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 25%;\n }\n .flex-direction--column .col-md-offset-3 {\n flex-grow: 1;\n }\n .col-md-offset-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 33.3333333333%;\n }\n .flex-direction--column .col-md-offset-4 {\n flex-grow: 1;\n }\n .col-md-offset-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 41.6666666667%;\n }\n .flex-direction--column .col-md-offset-5 {\n flex-grow: 1;\n }\n .col-md-offset-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 50%;\n }\n .flex-direction--column .col-md-offset-6 {\n flex-grow: 1;\n }\n .col-md-offset-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 58.3333333333%;\n }\n .flex-direction--column .col-md-offset-7 {\n flex-grow: 1;\n }\n .col-md-offset-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 66.6666666667%;\n }\n .flex-direction--column .col-md-offset-8 {\n flex-grow: 1;\n }\n .col-md-offset-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 75%;\n }\n .flex-direction--column .col-md-offset-9 {\n flex-grow: 1;\n }\n .col-md-offset-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 83.3333333333%;\n }\n .flex-direction--column .col-md-offset-10 {\n flex-grow: 1;\n }\n .col-md-offset-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 91.6666666667%;\n }\n .flex-direction--column .col-md-offset-11 {\n flex-grow: 1;\n }\n .col-md-offset-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 100%;\n }\n .flex-direction--column .col-md-offset-12 {\n flex-grow: 1;\n }\n .col-md {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n .start-md {\n justify-content: flex-start;\n text-align: left;\n }\n .center-md {\n justify-content: center;\n text-align: center;\n }\n .end-md {\n justify-content: flex-end;\n text-align: right;\n }\n .top-md {\n align-items: flex-start;\n }\n .middle-md {\n align-items: center;\n }\n .bottom-md {\n align-items: flex-end;\n }\n .around-md {\n justify-content: space-around;\n }\n .between-md {\n justify-content: space-between;\n }\n .first-md {\n order: -1;\n }\n .last-md {\n order: 1;\n }\n}\n@media only screen and (min-width: 75em) {\n .container {\n width: 71rem;\n }\n .col-lg {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: auto;\n }\n .flex-direction--column .col-lg {\n flex-grow: 1;\n }\n .col-lg-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .flex-direction--column .col-lg-1 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-1 {\n max-width: 100%;\n }\n .col-lg-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .flex-direction--column .col-lg-2 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-2 {\n max-width: 100%;\n }\n .col-lg-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 25%;\n max-width: 25%;\n }\n .flex-direction--column .col-lg-3 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-3 {\n max-width: 100%;\n }\n .col-lg-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .flex-direction--column .col-lg-4 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-4 {\n max-width: 100%;\n }\n .col-lg-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 41.6666666667%;\n max-width: 41.6666666667%;\n }\n .flex-direction--column .col-lg-5 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-5 {\n max-width: 100%;\n }\n .col-lg-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 50%;\n max-width: 50%;\n }\n .flex-direction--column .col-lg-6 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-6 {\n max-width: 100%;\n }\n .col-lg-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 58.3333333333%;\n max-width: 58.3333333333%;\n }\n .flex-direction--column .col-lg-7 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-7 {\n max-width: 100%;\n }\n .col-lg-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .flex-direction--column .col-lg-8 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-8 {\n max-width: 100%;\n }\n .col-lg-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 75%;\n max-width: 75%;\n }\n .flex-direction--column .col-lg-9 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-9 {\n max-width: 100%;\n }\n .col-lg-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .flex-direction--column .col-lg-10 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-10 {\n max-width: 100%;\n }\n .col-lg-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .flex-direction--column .col-lg-11 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-11 {\n max-width: 100%;\n }\n .col-lg-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n flex-basis: 100%;\n max-width: 100%;\n }\n .flex-direction--column .col-lg-12 {\n flex-grow: 1;\n }\n .flex-direction--column .col-lg-12 {\n max-width: 100%;\n }\n .col-lg-offset-0 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 0;\n }\n .flex-direction--column .col-lg-offset-0 {\n flex-grow: 1;\n }\n .col-lg-offset-1 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 8.3333333333%;\n }\n .flex-direction--column .col-lg-offset-1 {\n flex-grow: 1;\n }\n .col-lg-offset-2 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 16.6666666667%;\n }\n .flex-direction--column .col-lg-offset-2 {\n flex-grow: 1;\n }\n .col-lg-offset-3 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 25%;\n }\n .flex-direction--column .col-lg-offset-3 {\n flex-grow: 1;\n }\n .col-lg-offset-4 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 33.3333333333%;\n }\n .flex-direction--column .col-lg-offset-4 {\n flex-grow: 1;\n }\n .col-lg-offset-5 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 41.6666666667%;\n }\n .flex-direction--column .col-lg-offset-5 {\n flex-grow: 1;\n }\n .col-lg-offset-6 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 50%;\n }\n .flex-direction--column .col-lg-offset-6 {\n flex-grow: 1;\n }\n .col-lg-offset-7 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 58.3333333333%;\n }\n .flex-direction--column .col-lg-offset-7 {\n flex-grow: 1;\n }\n .col-lg-offset-8 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 66.6666666667%;\n }\n .flex-direction--column .col-lg-offset-8 {\n flex-grow: 1;\n }\n .col-lg-offset-9 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 75%;\n }\n .flex-direction--column .col-lg-offset-9 {\n flex-grow: 1;\n }\n .col-lg-offset-10 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 83.3333333333%;\n }\n .flex-direction--column .col-lg-offset-10 {\n flex-grow: 1;\n }\n .col-lg-offset-11 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 91.6666666667%;\n }\n .flex-direction--column .col-lg-offset-11 {\n flex-grow: 1;\n }\n .col-lg-offset-12 {\n box-sizing: border-box;\n flex-grow: 0;\n flex-shrink: 0;\n padding-right: 0;\n padding-left: 0;\n margin-left: 100%;\n }\n .flex-direction--column .col-lg-offset-12 {\n flex-grow: 1;\n }\n .col-lg {\n flex-grow: 1;\n flex-basis: 0;\n max-width: 100%;\n }\n .start-lg {\n justify-content: flex-start;\n text-align: left;\n }\n .center-lg {\n justify-content: center;\n text-align: center;\n }\n .end-lg {\n justify-content: flex-end;\n text-align: right;\n }\n .top-lg {\n align-items: flex-start;\n }\n .middle-lg {\n align-items: center;\n }\n .bottom-lg {\n align-items: flex-end;\n }\n .around-lg {\n justify-content: space-around;\n }\n .between-lg {\n justify-content: space-between;\n }\n .first-lg {\n order: -1;\n }\n .last-lg {\n order: 1;\n }\n}";
|
|
352
375
|
styleInject(css_248z$6);
|
|
@@ -400,7 +423,7 @@ function _unsupported_iterable_to_array$2(o, minLen) {
|
|
|
400
423
|
if (n === "Map" || n === "Set") return Array.from(n);
|
|
401
424
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
|
|
402
425
|
}
|
|
403
|
-
|
|
426
|
+
function Dropdown(param) {
|
|
404
427
|
var items = param.items, className = param.className, id = param.id;
|
|
405
428
|
var _useState = _sliced_to_array$2(useState(0), 2), selectedIndex = _useState[0], setSelectedIndex = _useState[1];
|
|
406
429
|
var dropdownState = Juce.getComboBoxState(id);
|
|
@@ -427,7 +450,7 @@ var Dropdown = function(param) {
|
|
|
427
450
|
value: i
|
|
428
451
|
}, items[i]);
|
|
429
452
|
})));
|
|
430
|
-
}
|
|
453
|
+
}
|
|
431
454
|
|
|
432
455
|
var css_248z$4 = ".Knob {\n height: 50px;\n background-color: #737373;\n width: 50px;\n border-radius: 100%;\n position: relative;\n aspect-ratio: 1/1;\n}\n\n.Knob-inner {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n}\n\n.Knob-marker {\n position: absolute;\n top: 0;\n right: 0;\n left: 50%;\n width: 2px;\n height: 50%;\n border-radius: 125rem;\n background-color: #fff;\n transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}";
|
|
433
456
|
styleInject(css_248z$4);
|
|
@@ -500,7 +523,7 @@ function _unsupported_iterable_to_array$1(o, minLen) {
|
|
|
500
523
|
if (n === "Map" || n === "Set") return Array.from(n);
|
|
501
524
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
|
|
502
525
|
}
|
|
503
|
-
|
|
526
|
+
function Knob(param) {
|
|
504
527
|
var label = param.label, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? POSITION.TOP : _param_labelPosition, _param_showValue = param.showValue, showValue = _param_showValue === void 0 ? true : _param_showValue, id = param.id, className = param.className;
|
|
505
528
|
var _useState = _sliced_to_array$1(useState(0), 2), min = _useState[0], setMin = _useState[1];
|
|
506
529
|
var _useState1 = _sliced_to_array$1(useState(0), 2), max = _useState1[0], setMax = _useState1[1];
|
|
@@ -563,11 +586,16 @@ var Knob = function(param) {
|
|
|
563
586
|
SPACING.NONE
|
|
564
587
|
]
|
|
565
588
|
}));
|
|
566
|
-
}
|
|
589
|
+
}
|
|
590
|
+
Knob.LABEL_POSITION = POSITION;
|
|
567
591
|
|
|
568
592
|
var css_248z$2 = ".Slider {\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n}\n\n.track {\n background-color: #737373;\n}\n.horizontal .track {\n height: 12px;\n}\n.vertical .track {\n width: 12px;\n}\n\n.thumb {\n height: 12px;\n width: 12px;\n background-color: #404040;\n}";
|
|
569
593
|
styleInject(css_248z$2);
|
|
570
594
|
|
|
595
|
+
var decimalToPercent = function(decimal) {
|
|
596
|
+
return Math.ceil(decimal * 100);
|
|
597
|
+
};
|
|
598
|
+
|
|
571
599
|
function _array_like_to_array(arr, len) {
|
|
572
600
|
if (len == null || len > arr.length) len = arr.length;
|
|
573
601
|
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
@@ -614,23 +642,30 @@ function _unsupported_iterable_to_array(o, minLen) {
|
|
|
614
642
|
if (n === "Map" || n === "Set") return Array.from(n);
|
|
615
643
|
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
616
644
|
}
|
|
617
|
-
|
|
645
|
+
function Slider(param) {
|
|
618
646
|
var label = param.label, _param_labelPosition = param.labelPosition, labelPosition = _param_labelPosition === void 0 ? POSITION.TOP : _param_labelPosition, _param_orientation = param.orientation, orientation = _param_orientation === void 0 ? DIRECTION.VERTICAL : _param_orientation, _param_showValue = param.showValue, showValue = _param_showValue === void 0 ? true : _param_showValue, id = param.id, className = param.className;
|
|
619
|
-
var _useState = _sliced_to_array(useState(0), 2), min = _useState[0], setMin = _useState[1];
|
|
620
|
-
var _useState1 = _sliced_to_array(useState(0), 2), max = _useState1[0], setMax = _useState1[1];
|
|
621
|
-
var _useState2 = _sliced_to_array(useState(0),
|
|
647
|
+
var _useState = _sliced_to_array(useState(0.0), 2), min = _useState[0], setMin = _useState[1];
|
|
648
|
+
var _useState1 = _sliced_to_array(useState(1.0), 2), max = _useState1[0], setMax = _useState1[1];
|
|
649
|
+
var _useState2 = _sliced_to_array(useState(0.01), 1), interval = _useState2[0];
|
|
650
|
+
var _useState3 = _sliced_to_array(useState(0.0), 2), value = _useState3[0], setValue = _useState3[1];
|
|
651
|
+
var _useState4 = _sliced_to_array(useState(false), 2), hasStoreData = _useState4[0], setHasStoreData = _useState4[1];
|
|
622
652
|
useEffect(function() {
|
|
623
|
-
var _sliderState_properties, _sliderState_properties1, _sliderState_properties2;
|
|
624
653
|
var sliderState = Juce.getSliderState(id);
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
654
|
+
if (!!sliderState) {
|
|
655
|
+
var _sliderState_properties, _sliderState_properties1, _sliderState_properties2;
|
|
656
|
+
setMin(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start);
|
|
657
|
+
setMax(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end);
|
|
658
|
+
setInterval(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.interval);
|
|
659
|
+
setValue(sliderState === null || sliderState === void 0 ? void 0 : sliderState.scaledValue);
|
|
660
|
+
setHasStoreData(true);
|
|
661
|
+
}
|
|
628
662
|
}, []);
|
|
629
|
-
var _useState3 = _sliced_to_array(useState(min), 2), value = _useState3[0], setValue = _useState3[1];
|
|
630
663
|
var handleChange = function(val) {
|
|
631
664
|
setValue(val);
|
|
632
|
-
|
|
633
|
-
|
|
665
|
+
if (hasStoreData) {
|
|
666
|
+
var sliderState = Juce.getSliderState(id);
|
|
667
|
+
sliderState.setNormalisedValue(val);
|
|
668
|
+
}
|
|
634
669
|
};
|
|
635
670
|
return /*#__PURE__*/ React__default.createElement("div", {
|
|
636
671
|
style: {
|
|
@@ -651,36 +686,39 @@ var Slider = function(param) {
|
|
|
651
686
|
SPACING.SMALL,
|
|
652
687
|
SPACING.NONE
|
|
653
688
|
],
|
|
654
|
-
text:
|
|
655
|
-
}), /*#__PURE__*/ React__default.createElement(ReactSlider, {
|
|
689
|
+
text: label
|
|
690
|
+
}), (value || value === 0) && /*#__PURE__*/ React__default.createElement(ReactSlider, {
|
|
656
691
|
min: min,
|
|
657
692
|
max: max,
|
|
693
|
+
value: value,
|
|
694
|
+
disabled: !hasStoreData,
|
|
658
695
|
invert: orientation === DIRECTION.VERTICAL,
|
|
659
696
|
orientation: orientation,
|
|
660
697
|
onChange: handleChange,
|
|
661
698
|
step: interval,
|
|
662
699
|
className: classnames('Slider', orientation === DIRECTION.HORIZONTAL ? 'horizontal' : 'vertical', className)
|
|
663
700
|
}), showValue && /*#__PURE__*/ React__default.createElement(TextLabel, {
|
|
664
|
-
|
|
665
|
-
text: "".concat(value),
|
|
701
|
+
text: "".concat(decimalToPercent(value)),
|
|
666
702
|
padding: [
|
|
667
703
|
SPACING.SMALL,
|
|
668
704
|
SPACING.NONE
|
|
669
705
|
]
|
|
670
706
|
}));
|
|
671
|
-
}
|
|
707
|
+
}
|
|
708
|
+
Slider.LABEL_POSITION = POSITION;
|
|
709
|
+
Slider.ORIENTATION = DIRECTION;
|
|
672
710
|
|
|
673
711
|
var css_248z$1 = ".h1 {\n font-family: \"Arial\", sans-serif;\n font-size: 20px;\n font-weight: bold;\n}\n\n.h2 {\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n font-weight: bold;\n}";
|
|
674
712
|
styleInject(css_248z$1);
|
|
675
713
|
|
|
676
|
-
var
|
|
677
|
-
(function(
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
})(
|
|
714
|
+
var HEADER_LEVELS;
|
|
715
|
+
(function(HEADER_LEVELS) {
|
|
716
|
+
HEADER_LEVELS["H1"] = "h1";
|
|
717
|
+
HEADER_LEVELS["H2"] = "h2";
|
|
718
|
+
})(HEADER_LEVELS || (HEADER_LEVELS = {}));
|
|
681
719
|
|
|
682
|
-
|
|
683
|
-
var text = param.text, id = param.id, className = param.className, style = param.style, _param_level = param.level, level = _param_level === void 0 ?
|
|
720
|
+
function TextHeader(param) {
|
|
721
|
+
var text = param.text, id = param.id, className = param.className, style = param.style, _param_level = param.level, level = _param_level === void 0 ? HEADER_LEVELS.H1 : _param_level, _param_padding = param.padding, padding = _param_padding === void 0 ? [
|
|
684
722
|
SPACING.NONE
|
|
685
723
|
] : _param_padding, children = param.children;
|
|
686
724
|
var Tag = level;
|
|
@@ -697,7 +735,9 @@ var TextHeader = function(param) {
|
|
|
697
735
|
padding[3]
|
|
698
736
|
])
|
|
699
737
|
}, text ? text : children);
|
|
700
|
-
}
|
|
738
|
+
}
|
|
739
|
+
TextHeader.HEADER_LEVELS = HEADER_LEVELS;
|
|
740
|
+
TextHeader.SPACING = SPACING;
|
|
701
741
|
|
|
702
742
|
var css_248z = ".Layout {\n display: flex;\n width: 100%;\n}\n.Layout.gap-xsmall {\n column-gap: 2px;\n}\n.Layout.gap-small {\n column-gap: 4px;\n}\n.Layout.gap-mediumsmall {\n column-gap: 8px;\n}\n.Layout.gap-medium {\n column-gap: 12px;\n}\n.Layout.gap-mediumlarge {\n column-gap: 16px;\n}\n.Layout.gap-large {\n column-gap: 20px;\n}\n.Layout.gap-xlarge {\n column-gap: 24px;\n}";
|
|
703
743
|
styleInject(css_248z);
|
|
@@ -749,8 +789,8 @@ function _object_spread_props(target, source) {
|
|
|
749
789
|
}
|
|
750
790
|
return target;
|
|
751
791
|
}
|
|
752
|
-
|
|
753
|
-
var
|
|
792
|
+
function Layout(param) {
|
|
793
|
+
var alignItems = param.alignItems, justifyContent = param.justifyContent, className = param.className, style = param.style, children = param.children, _param_width = param.width, width = _param_width === void 0 ? WIDTH.AUTO : _param_width, _param_height = param.height, height = _param_height === void 0 ? HEIGHT.AUTO : _param_height, _param_border = param.border, border = _param_border === void 0 ? false : _param_border, _param_direction = param.direction, direction = _param_direction === void 0 ? DIRECTION.HORIZONTAL : _param_direction, _param_padding = param.padding, padding = _param_padding === void 0 ? [
|
|
754
794
|
SPACING.NONE,
|
|
755
795
|
SPACING.NONE,
|
|
756
796
|
SPACING.MEDIUM,
|
|
@@ -771,11 +811,18 @@ var Layout = function(param) {
|
|
|
771
811
|
maxWidth: width,
|
|
772
812
|
height: height,
|
|
773
813
|
flexDirection: direction === DIRECTION.HORIZONTAL ? 'row' : 'column',
|
|
774
|
-
justifyContent:
|
|
775
|
-
alignItems:
|
|
814
|
+
justifyContent: "".concat(justifyContent),
|
|
815
|
+
alignItems: "".concat(alignItems)
|
|
776
816
|
})
|
|
777
817
|
}, children);
|
|
778
|
-
}
|
|
818
|
+
}
|
|
819
|
+
// Object.assign(Layout, WIDTH, HEIGHT, ALIGN, JUSTIFY, DIRECTION, SPACING);
|
|
820
|
+
Layout.ALIGN_ITEMS = ALIGN;
|
|
821
|
+
Layout.JUSTIFY_CONTENT = JUSTIFY;
|
|
822
|
+
Layout.GAP = SPACING;
|
|
823
|
+
Layout.DIRECTION = DIRECTION;
|
|
824
|
+
Layout.WIDTH = WIDTH;
|
|
825
|
+
Layout.HEIGHT = HEIGHT;
|
|
779
826
|
|
|
780
|
-
export {
|
|
827
|
+
export { Button, Col, Dropdown, Knob, Layout, Row, Slider, Tabs, TextHeader, TextLabel };
|
|
781
828
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
|