@antimatter-audio/antimatter-ui 2.2.0 → 2.3.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 +19 -2
- package/dist/index.js +149 -66
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -129,17 +129,23 @@ interface DropdownProps {
|
|
|
129
129
|
}
|
|
130
130
|
declare function Dropdown({ items, className, id }: DropdownProps): React__default.JSX.Element;
|
|
131
131
|
|
|
132
|
+
declare enum KNOB_TYPE {
|
|
133
|
+
STANDARD = "STANDARD",
|
|
134
|
+
BIPOLAR = "BIPOLAR"
|
|
135
|
+
}
|
|
132
136
|
interface KnobProps {
|
|
133
137
|
id: any;
|
|
134
138
|
label?: string;
|
|
135
139
|
labelPosition?: POSITION;
|
|
136
140
|
showValue?: boolean;
|
|
141
|
+
knobType?: KNOB_TYPE;
|
|
137
142
|
className?: string;
|
|
138
143
|
style?: object;
|
|
139
144
|
}
|
|
140
|
-
declare function Knob({ label, labelPosition, showValue, id, className, }: React__default.PropsWithChildren<KnobProps>): React__default.JSX.Element;
|
|
145
|
+
declare function Knob({ label, labelPosition, showValue, knobType, id, className, }: React__default.PropsWithChildren<KnobProps>): React__default.JSX.Element;
|
|
141
146
|
declare namespace Knob {
|
|
142
147
|
var LABEL_POSITION: typeof POSITION;
|
|
148
|
+
var KNOB_TYPE: typeof KNOB_TYPE;
|
|
143
149
|
}
|
|
144
150
|
|
|
145
151
|
interface SliderProps {
|
|
@@ -207,4 +213,15 @@ declare namespace Layout {
|
|
|
207
213
|
var PADDING: typeof SPACING;
|
|
208
214
|
}
|
|
209
215
|
|
|
210
|
-
|
|
216
|
+
interface MatrixProps {
|
|
217
|
+
rows: Array<{
|
|
218
|
+
[key: string]: string | number;
|
|
219
|
+
}>;
|
|
220
|
+
columns: Array<{
|
|
221
|
+
key: string;
|
|
222
|
+
label: string;
|
|
223
|
+
}>;
|
|
224
|
+
}
|
|
225
|
+
declare const Matrix: React__default.FC<React__default.PropsWithChildren<MatrixProps>>;
|
|
226
|
+
|
|
227
|
+
export { Button, Col, Dropdown, Knob, Layout, Matrix, Row, Slider, Tabs, TextHeader, TextLabel };
|
package/dist/index.js
CHANGED
|
@@ -33,11 +33,11 @@ function styleInject(css, ref) {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
var css_248z$
|
|
37
|
-
styleInject(css_248z$
|
|
36
|
+
var css_248z$a = "/* 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
|
+
styleInject(css_248z$a);
|
|
38
38
|
|
|
39
|
-
var css_248z$
|
|
40
|
-
styleInject(css_248z$
|
|
39
|
+
var css_248z$9 = ".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
|
+
styleInject(css_248z$9);
|
|
41
41
|
|
|
42
42
|
/**
|
|
43
43
|
* @typedef SPACING
|
|
@@ -123,8 +123,8 @@ var Tabs = function(param) {
|
|
|
123
123
|
})));
|
|
124
124
|
};
|
|
125
125
|
|
|
126
|
-
var css_248z$
|
|
127
|
-
styleInject(css_248z$
|
|
126
|
+
var css_248z$8 = ".Button {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: 8px;\n padding-left: 8px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n color: #fff;\n background-color: #737373;\n border: 0;\n border-radius: 3px;\n appearance: none;\n user-select: none;\n min-width: 1rem;\n min-height: 1rem;\n}\n\n.Button-small {\n height: 8px;\n}\n\n.Button-large {\n height: 12px;\n}\n\n.Button:hover {\n background-color: #606060;\n color: #eee;\n outline: 0;\n}\n\n.Button.selected {\n background-color: #404040;\n}\n.Button.selected:hover {\n background-color: #404040;\n}\n\n.Button:disabled,\n.Button.disabled {\n cursor: not-allowed;\n color: #404040;\n background: #858585;\n}";
|
|
127
|
+
styleInject(css_248z$8);
|
|
128
128
|
|
|
129
129
|
var BUTTON_SIZE;
|
|
130
130
|
(function(BUTTON_SIZE) {
|
|
@@ -347,7 +347,6 @@ function _object_spread_props$2(target, source) {
|
|
|
347
347
|
}
|
|
348
348
|
function Row(param) {
|
|
349
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 ? [
|
|
350
|
-
SPACING.MEDIUM,
|
|
351
350
|
SPACING.NONE
|
|
352
351
|
] : _param_padding, _param_flexDirection = param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FLEX_DIRECTION.ROW : _param_flexDirection, _param_border = param.border, border = _param_border === void 0 ? false : _param_border;
|
|
353
352
|
var isColumn = flexDirection === FLEX_DIRECTION.COLUMN;
|
|
@@ -371,11 +370,11 @@ function Row(param) {
|
|
|
371
370
|
Row.PADDING = SPACING;
|
|
372
371
|
Row.FLEX_DIRECTION = FLEX_DIRECTION;
|
|
373
372
|
|
|
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}";
|
|
375
|
-
styleInject(css_248z$
|
|
373
|
+
var css_248z$7 = ".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}";
|
|
374
|
+
styleInject(css_248z$7);
|
|
376
375
|
|
|
377
|
-
var css_248z$
|
|
378
|
-
styleInject(css_248z$
|
|
376
|
+
var css_248z$6 = ".Dropdown-button {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-right: 8px;\n padding-left: 8px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n color: #fff;\n background-color: #737373;\n border: 0;\n border-radius: 3px;\n appearance: none;\n user-select: none;\n height: 24px;\n}\n\n.Dropdown-button:hover,\n.Dropdown-button:focus,\n.Dropdown-button:active {\n outline: 0;\n}\n\n.Dropdown-button:hover {\n color: #eee;\n background-color: #606060;\n}\n\n.Dropdown-button:disabled,\n.Dropdown-button.disabled {\n cursor: not-allowed;\n color: #404040;\n background: #858585;\n}\n.Dropdown-button:disabled:hover,\n.Dropdown-button.disabled:hover {\n color: #404040;\n background: #858585;\n}\n\n.Dropdown-menu {\n background-color: #979797;\n z-index: 10;\n}\n\n.Dropdown-menu-item {\n font-family: \"Arial\", sans-serif;\n color: #fff;\n padding: 12px;\n background-color: #979797;\n cursor: pointer;\n}\n\n.Dropdown-menu-item:hover {\n background-color: #606060;\n}";
|
|
377
|
+
styleInject(css_248z$6);
|
|
379
378
|
|
|
380
379
|
function _array_like_to_array$2(arr, len) {
|
|
381
380
|
if (len == null || len > arr.length) len = arr.length;
|
|
@@ -452,11 +451,11 @@ function Dropdown(param) {
|
|
|
452
451
|
})));
|
|
453
452
|
}
|
|
454
453
|
|
|
455
|
-
var css_248z$
|
|
456
|
-
styleInject(css_248z$
|
|
454
|
+
var css_248z$5 = ".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}\n\n.Knob-center-marker {\n width: 0px;\n height: 0px;\n border-style: solid;\n border-width: 0 7px 10px 7px;\n border-color: transparent transparent #737373 transparent;\n transform: rotate(180deg);\n padding-bottom: 2px;\n}";
|
|
455
|
+
styleInject(css_248z$5);
|
|
457
456
|
|
|
458
|
-
var css_248z$
|
|
459
|
-
styleInject(css_248z$
|
|
457
|
+
var css_248z$4 = ".TextLabel {\n font-family: \"Arial\", sans-serif;\n font-size: 14px;\n text-align: center;\n}";
|
|
458
|
+
styleInject(css_248z$4);
|
|
460
459
|
|
|
461
460
|
var TextLabel = function(param) {
|
|
462
461
|
var text = param.text, id = param.id, className = param.className, style = param.style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
|
|
@@ -477,6 +476,10 @@ var TextLabel = function(param) {
|
|
|
477
476
|
}, text ? text : children);
|
|
478
477
|
};
|
|
479
478
|
|
|
479
|
+
var decimalToPercent = function(decimal) {
|
|
480
|
+
return Math.round(100 * (typeof decimal === 'string' ? parseFloat(decimal) : decimal));
|
|
481
|
+
};
|
|
482
|
+
|
|
480
483
|
function _array_like_to_array$1(arr, len) {
|
|
481
484
|
if (len == null || len > arr.length) len = arr.length;
|
|
482
485
|
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
@@ -577,46 +580,98 @@ var KNOB_TYPE;
|
|
|
577
580
|
})(KNOB_TYPE || (KNOB_TYPE = {}));
|
|
578
581
|
function Knob(param) {
|
|
579
582
|
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, _param_knobType = param.knobType, knobType = _param_knobType === void 0 ? "STANDARD" : _param_knobType, id = param.id, className = param.className;
|
|
580
|
-
var
|
|
581
|
-
var
|
|
582
|
-
var
|
|
583
|
-
var
|
|
584
|
-
|
|
583
|
+
var knobState = Juce.getSliderState(id);
|
|
584
|
+
var _useState = _sliced_to_array$1(useState(0), 2), normalizedValue = _useState[0], setNormalizedValue = _useState[1];
|
|
585
|
+
var _useState1 = _sliced_to_array$1(useState(0), 2), scaledValue = _useState1[0], setScaledValue = _useState1[1];
|
|
586
|
+
var _useState2 = _sliced_to_array$1(useState(null), 2), properties = _useState2[0], setProperties = _useState2[1];
|
|
587
|
+
// const [log, setLog] = useState('');
|
|
588
|
+
var handleChange = function(_, newValue) {
|
|
589
|
+
knobState.setNormalisedValue(newValue);
|
|
590
|
+
// setValue(newValue);
|
|
591
|
+
};
|
|
592
|
+
// const mouseDown = () => {
|
|
593
|
+
// knobState.sliderDragStarted();
|
|
594
|
+
// };
|
|
595
|
+
// const changeCommitted = (event: any, newValue: any) => {
|
|
596
|
+
// console.log(event);
|
|
597
|
+
// knobState.setNormalisedValue(newValue);
|
|
598
|
+
// knobState.sliderDragEnded();
|
|
599
|
+
// };
|
|
585
600
|
useEffect(function() {
|
|
586
|
-
var
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
601
|
+
var valueListenerId = knobState.valueChangedEvent.addListener(function() {
|
|
602
|
+
setNormalizedValue(knobState.getNormalisedValue());
|
|
603
|
+
setScaledValue(knobState.getScaledValue());
|
|
604
|
+
});
|
|
605
|
+
var propertiesListenerId = knobState.propertiesChangedEvent.addListener(function() {
|
|
606
|
+
return setProperties(knobState.properties);
|
|
607
|
+
});
|
|
608
|
+
console.log(knobState.getNormalisedValue(), knobState.getScaledValue(), 'VALUELISTENERID');
|
|
609
|
+
setNormalizedValue(knobState.getNormalisedValue());
|
|
610
|
+
setScaledValue(knobState.getScaledValue());
|
|
611
|
+
return function cleanup() {
|
|
612
|
+
knobState.valueChangedEvent.removeListener(valueListenerId);
|
|
613
|
+
knobState.propertiesChangedEvent.removeListener(propertiesListenerId);
|
|
614
|
+
};
|
|
595
615
|
}, []);
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
616
|
+
// function calculateValue() {
|
|
617
|
+
// return sliderState.getScaledValue();
|
|
618
|
+
// }
|
|
619
|
+
// const [hasStoreData, setHasStoreData] = useState<boolean>(false);
|
|
620
|
+
// function snapToLegalValue(value: any) {
|
|
621
|
+
// if (interval == 0) return value;
|
|
622
|
+
// return clamp(
|
|
623
|
+
// min + interval * Math.floor((value - min) / interval + 0.5),
|
|
624
|
+
// min,
|
|
625
|
+
// max,
|
|
626
|
+
// );
|
|
627
|
+
// }
|
|
628
|
+
// useEffect(() => {
|
|
629
|
+
// const knobState = Juce.getSliderState(id);
|
|
630
|
+
// knobState.valueChangedEvent.addListener(() => {
|
|
631
|
+
// console.log('value changed listener');
|
|
632
|
+
// setValue(knobState.getNormalisedValue());
|
|
633
|
+
// setPr
|
|
634
|
+
// setMin(knobState?.properties?.start);
|
|
635
|
+
// setMax(knobState?.properties?.end);
|
|
636
|
+
// setInterval(knobState?.properties?.interval);
|
|
637
|
+
// // setValue(knobState?.scaledValue);
|
|
638
|
+
// });
|
|
639
|
+
// knobRef?.current?.addEventListener('mousedown', (event: any) => {
|
|
640
|
+
// console.log(event, 'mousedown listener');
|
|
641
|
+
// knobState.sliderDragStarted();
|
|
642
|
+
// });
|
|
643
|
+
// knobRef?.current?.addEventListener('mouseup', (event: any) => {
|
|
644
|
+
// console.log(knobState, event, 'mouseup listener');
|
|
645
|
+
// knobState.sliderDragEnded();
|
|
646
|
+
// });
|
|
647
|
+
// knobRef?.current?.addEventListener('mousemove', (event: any) => {
|
|
648
|
+
// console.log(knobState, 'mousemove listener');
|
|
649
|
+
// knobState.setNormalisedValue(value + interval);
|
|
650
|
+
// });
|
|
651
|
+
// }, []);
|
|
602
652
|
var bindDrag = useDrag(function(param) {
|
|
603
653
|
var down = param.down, delta = param.delta;
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
654
|
+
if (down) {
|
|
655
|
+
// const knobState = Juce.getSliderState(id);
|
|
656
|
+
// console.log(interval, value, 'interval');
|
|
657
|
+
// setValue(() => {
|
|
658
|
+
// // console.log(value, delta, delta[1] * -1, 'value, delta[1]');
|
|
659
|
+
// const newValue = value + delta[1] * (properties?.interval || 0.01) * -1;
|
|
660
|
+
// return clamp(newValue);
|
|
661
|
+
// });
|
|
662
|
+
// console.log(value, 'VALUE');
|
|
663
|
+
var newValue = normalizedValue + delta[1] * ((properties === null || properties === void 0 ? void 0 : properties.interval) || 0.01) * -1;
|
|
664
|
+
// knobState.setNormalisedValue(Math.round(normalizedValue * 100) / 100);
|
|
665
|
+
handleChange(event, newValue);
|
|
666
|
+
// console.log(
|
|
667
|
+
// knobState,
|
|
668
|
+
// value,
|
|
669
|
+
// snapToLegalValue(value),
|
|
670
|
+
// 'KNOBSTATE_______',
|
|
671
|
+
// );
|
|
672
|
+
}
|
|
618
673
|
}, {
|
|
619
|
-
|
|
674
|
+
preventDefault: true
|
|
620
675
|
});
|
|
621
676
|
return /*#__PURE__*/ React__default.createElement("div", {
|
|
622
677
|
style: {
|
|
@@ -637,9 +692,7 @@ function Knob(param) {
|
|
|
637
692
|
}), knobType === "BIPOLAR" && /*#__PURE__*/ React__default.createElement("div", {
|
|
638
693
|
className: "Knob-center-marker"
|
|
639
694
|
}), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$1({
|
|
640
|
-
onPointerDown
|
|
641
|
-
return e.currentTarget.focus();
|
|
642
|
-
},
|
|
695
|
+
// onPointerDown={(e) => e.currentTarget.focus()}
|
|
643
696
|
className: classnames('Knob', className)
|
|
644
697
|
}, bindDrag()), {
|
|
645
698
|
style: {
|
|
@@ -649,12 +702,12 @@ function Knob(param) {
|
|
|
649
702
|
}), /*#__PURE__*/ React__default.createElement("div", {
|
|
650
703
|
className: "Knob-inner",
|
|
651
704
|
style: {
|
|
652
|
-
rotate: knobType === "STANDARD" ?
|
|
705
|
+
rotate: "".concat(knobType === "STANDARD" ? normalizedValue : normalizedValue + 0.5, "turn")
|
|
653
706
|
}
|
|
654
707
|
}, /*#__PURE__*/ React__default.createElement("div", {
|
|
655
708
|
className: "Knob-marker"
|
|
656
709
|
}))), showValue && /*#__PURE__*/ React__default.createElement(TextLabel, {
|
|
657
|
-
text: "".concat(
|
|
710
|
+
text: "".concat(decimalToPercent(scaledValue)),
|
|
658
711
|
padding: [
|
|
659
712
|
SPACING.SMALL,
|
|
660
713
|
SPACING.NONE
|
|
@@ -664,12 +717,8 @@ function Knob(param) {
|
|
|
664
717
|
Knob.LABEL_POSITION = POSITION;
|
|
665
718
|
Knob.KNOB_TYPE = KNOB_TYPE;
|
|
666
719
|
|
|
667
|
-
var css_248z$
|
|
668
|
-
styleInject(css_248z$
|
|
669
|
-
|
|
670
|
-
var decimalToPercent = function(decimal) {
|
|
671
|
-
return Math.ceil(decimal * 100);
|
|
672
|
-
};
|
|
720
|
+
var css_248z$3 = ".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}";
|
|
721
|
+
styleInject(css_248z$3);
|
|
673
722
|
|
|
674
723
|
function _array_like_to_array(arr, len) {
|
|
675
724
|
if (len == null || len > arr.length) len = arr.length;
|
|
@@ -783,8 +832,8 @@ function Slider(param) {
|
|
|
783
832
|
Slider.LABEL_POSITION = POSITION;
|
|
784
833
|
Slider.ORIENTATION = DIRECTION;
|
|
785
834
|
|
|
786
|
-
var css_248z$
|
|
787
|
-
styleInject(css_248z$
|
|
835
|
+
var css_248z$2 = ".h1 {\n font-family: \"Arial\", sans-serif;\n font-size: 20px;\n font-weight: bold;\n}\n\n.h2 {\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n font-weight: bold;\n}";
|
|
836
|
+
styleInject(css_248z$2);
|
|
788
837
|
|
|
789
838
|
var HEADER_LEVELS;
|
|
790
839
|
(function(HEADER_LEVELS) {
|
|
@@ -814,8 +863,8 @@ function TextHeader(param) {
|
|
|
814
863
|
TextHeader.HEADER_LEVELS = HEADER_LEVELS;
|
|
815
864
|
TextHeader.SPACING = SPACING;
|
|
816
865
|
|
|
817
|
-
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}";
|
|
818
|
-
styleInject(css_248z);
|
|
866
|
+
var css_248z$1 = ".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}";
|
|
867
|
+
styleInject(css_248z$1);
|
|
819
868
|
|
|
820
869
|
function _define_property(obj, key, value) {
|
|
821
870
|
if (key in obj) {
|
|
@@ -900,5 +949,39 @@ Layout.WIDTH = WIDTH;
|
|
|
900
949
|
Layout.HEIGHT = HEIGHT;
|
|
901
950
|
Layout.PADDING = SPACING;
|
|
902
951
|
|
|
903
|
-
|
|
952
|
+
var css_248z = ".Matrix-header-cell {\n margin: 1px;\n flex: 1 1 0px;\n}\n.Matrix-cell {\n margin: 1px;\n background: #979797;\n flex: 1 1 0px;\n}";
|
|
953
|
+
styleInject(css_248z);
|
|
954
|
+
|
|
955
|
+
var Matrix = function(param) {
|
|
956
|
+
var rows = param.rows, columns = param.columns;
|
|
957
|
+
return /*#__PURE__*/ React__default.createElement("div", {
|
|
958
|
+
className: "Matrix"
|
|
959
|
+
}, /*#__PURE__*/ React__default.createElement(Row, null, /*#__PURE__*/ React__default.createElement(Col, {
|
|
960
|
+
centerContentHorizontal: true,
|
|
961
|
+
centerContentVertical: true,
|
|
962
|
+
className: "Matrix-header-cell"
|
|
963
|
+
}, "Target"), columns.map(function(item) {
|
|
964
|
+
return /*#__PURE__*/ React__default.createElement(Col, {
|
|
965
|
+
className: "Matrix-header-cell",
|
|
966
|
+
centerContentHorizontal: true,
|
|
967
|
+
centerContentVertical: true,
|
|
968
|
+
padding: [
|
|
969
|
+
SPACING.MEDIUM
|
|
970
|
+
]
|
|
971
|
+
}, item === null || item === void 0 ? void 0 : item.label);
|
|
972
|
+
})), rows.map(function(item) {
|
|
973
|
+
return /*#__PURE__*/ React__default.createElement(Row, null, Object.values(item).map(function(value, i) {
|
|
974
|
+
return /*#__PURE__*/ React__default.createElement(Col, {
|
|
975
|
+
className: i === 0 ? 'Matrix-header-cell' : 'Matrix-cell',
|
|
976
|
+
centerContentHorizontal: true,
|
|
977
|
+
centerContentVertical: true,
|
|
978
|
+
padding: [
|
|
979
|
+
SPACING.MEDIUM
|
|
980
|
+
]
|
|
981
|
+
}, value);
|
|
982
|
+
}));
|
|
983
|
+
}));
|
|
984
|
+
};
|
|
985
|
+
|
|
986
|
+
export { Button, Col, Dropdown, Knob, Layout, Matrix, Row, Slider, Tabs, TextHeader, TextLabel };
|
|
904
987
|
//# 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]}
|