@antimatter-audio/antimatter-ui 2.4.3 → 4.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 +28 -30
- package/dist/index.js +156 -195
- package/dist/index.js.map +1 -1
- package/package.json +1 -3
package/dist/index.d.ts
CHANGED
|
@@ -83,6 +83,15 @@ declare enum WIDTH {
|
|
|
83
83
|
FULL = "100%",
|
|
84
84
|
AUTO = "auto"
|
|
85
85
|
}
|
|
86
|
+
interface JuceSliderProperties {
|
|
87
|
+
name?: string;
|
|
88
|
+
label?: string;
|
|
89
|
+
start: number;
|
|
90
|
+
end: number;
|
|
91
|
+
interval: number;
|
|
92
|
+
skew?: number;
|
|
93
|
+
numSteps?: number;
|
|
94
|
+
}
|
|
86
95
|
|
|
87
96
|
interface GridColProps {
|
|
88
97
|
span?: number;
|
|
@@ -129,16 +138,26 @@ interface DropdownProps {
|
|
|
129
138
|
}
|
|
130
139
|
declare function Dropdown({ items, className, id }: DropdownProps): React__default.JSX.Element;
|
|
131
140
|
|
|
132
|
-
declare enum
|
|
133
|
-
|
|
141
|
+
declare enum SLIDER_POLARITY {
|
|
142
|
+
LINEAR = "LINEAR",
|
|
134
143
|
BIPOLAR = "BIPOLAR"
|
|
135
144
|
}
|
|
136
|
-
|
|
145
|
+
declare enum SLIDER_TYPE {
|
|
146
|
+
BAR = "BAR",
|
|
147
|
+
ROTARY = "ROTARY"
|
|
148
|
+
}
|
|
149
|
+
declare enum SLIDER_ORIENTATION {
|
|
150
|
+
HORIZONTAL = "HORIZONTAL",
|
|
151
|
+
VERTICAL = "VERTICAL"
|
|
152
|
+
}
|
|
153
|
+
interface SliderProps {
|
|
137
154
|
id: any;
|
|
138
155
|
label?: string;
|
|
139
156
|
labelPosition?: POSITION;
|
|
140
157
|
showValue?: boolean;
|
|
141
|
-
|
|
158
|
+
sliderPolarity?: SLIDER_POLARITY;
|
|
159
|
+
sliderType?: SLIDER_TYPE;
|
|
160
|
+
sliderOrientation?: SLIDER_ORIENTATION;
|
|
142
161
|
className?: string;
|
|
143
162
|
style?: object;
|
|
144
163
|
/**
|
|
@@ -149,33 +168,12 @@ interface KnobProps {
|
|
|
149
168
|
mockInitialScaledValue?: number;
|
|
150
169
|
mockProperties?: JuceSliderProperties;
|
|
151
170
|
}
|
|
152
|
-
|
|
153
|
-
name?: string;
|
|
154
|
-
label?: string;
|
|
155
|
-
start: number;
|
|
156
|
-
end: number;
|
|
157
|
-
interval: number;
|
|
158
|
-
skew?: number;
|
|
159
|
-
numSteps?: number;
|
|
160
|
-
}
|
|
161
|
-
declare function Knob({ label, labelPosition, showValue, knobType, id, className, mockInitialScaledValue, mockProperties, }: React__default.PropsWithChildren<KnobProps>): React__default.JSX.Element;
|
|
162
|
-
declare namespace Knob {
|
|
163
|
-
var LABEL_POSITION: typeof POSITION;
|
|
164
|
-
var KNOB_TYPE: typeof KNOB_TYPE;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
interface SliderProps {
|
|
168
|
-
id: any;
|
|
169
|
-
label?: string;
|
|
170
|
-
labelPosition?: POSITION;
|
|
171
|
-
orientation?: DIRECTION;
|
|
172
|
-
showValue?: boolean;
|
|
173
|
-
className?: string;
|
|
174
|
-
}
|
|
175
|
-
declare function Slider({ label, labelPosition, orientation, showValue, id, className, }: React__default.PropsWithChildren<SliderProps>): React__default.JSX.Element;
|
|
171
|
+
declare function Slider({ label, labelPosition, showValue, sliderPolarity, sliderOrientation, sliderType, className, id, mockInitialScaledValue, mockProperties, }: React__default.PropsWithChildren<SliderProps>): React__default.JSX.Element;
|
|
176
172
|
declare namespace Slider {
|
|
177
173
|
var LABEL_POSITION: typeof POSITION;
|
|
178
|
-
var
|
|
174
|
+
var SLIDER_TYPE: typeof SLIDER_TYPE;
|
|
175
|
+
var SLIDER_POLARITY: typeof SLIDER_POLARITY;
|
|
176
|
+
var SLIDER_ORIENTATION: typeof SLIDER_ORIENTATION;
|
|
179
177
|
}
|
|
180
178
|
|
|
181
179
|
declare enum HEADER_LEVELS {
|
|
@@ -240,4 +238,4 @@ interface MatrixProps {
|
|
|
240
238
|
}
|
|
241
239
|
declare const Matrix: React__default.FC<React__default.PropsWithChildren<MatrixProps>>;
|
|
242
240
|
|
|
243
|
-
export { Button, Col, Dropdown,
|
|
241
|
+
export { Button, Col, Dropdown, Layout, Matrix, Row, Slider, Tabs, TextHeader, TextLabel };
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,6 @@ import classnames from 'classnames';
|
|
|
4
4
|
import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
|
|
5
5
|
import * as Juce from 'juce-framework-frontend';
|
|
6
6
|
import { useDrag } from '@use-gesture/react';
|
|
7
|
-
import ReactSlider from 'react-slider';
|
|
8
7
|
|
|
9
8
|
function styleInject(css, ref) {
|
|
10
9
|
if ( ref === void 0 ) ref = {};
|
|
@@ -33,12 +32,12 @@ function styleInject(css, ref) {
|
|
|
33
32
|
}
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
var css_248z$
|
|
37
|
-
styleInject(css_248z$a);
|
|
38
|
-
|
|
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}";
|
|
35
|
+
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}";
|
|
40
36
|
styleInject(css_248z$9);
|
|
41
37
|
|
|
38
|
+
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}";
|
|
39
|
+
styleInject(css_248z$8);
|
|
40
|
+
|
|
42
41
|
/**
|
|
43
42
|
* @typedef SPACING
|
|
44
43
|
* @property {string} NONE "0px"
|
|
@@ -123,8 +122,8 @@ var Tabs = function(param) {
|
|
|
123
122
|
})));
|
|
124
123
|
};
|
|
125
124
|
|
|
126
|
-
var css_248z$
|
|
127
|
-
styleInject(css_248z$
|
|
125
|
+
var css_248z$7 = ".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}";
|
|
126
|
+
styleInject(css_248z$7);
|
|
128
127
|
|
|
129
128
|
var BUTTON_SIZE;
|
|
130
129
|
(function(BUTTON_SIZE) {
|
|
@@ -137,15 +136,15 @@ var BUTTON_TYPE;
|
|
|
137
136
|
BUTTON_TYPE["LATCH"] = "LATCH";
|
|
138
137
|
})(BUTTON_TYPE || (BUTTON_TYPE = {}));
|
|
139
138
|
|
|
140
|
-
function _array_like_to_array$
|
|
139
|
+
function _array_like_to_array$2(arr, len) {
|
|
141
140
|
if (len == null || len > arr.length) len = arr.length;
|
|
142
141
|
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
143
142
|
return arr2;
|
|
144
143
|
}
|
|
145
|
-
function _array_with_holes$
|
|
144
|
+
function _array_with_holes$2(arr) {
|
|
146
145
|
if (Array.isArray(arr)) return arr;
|
|
147
146
|
}
|
|
148
|
-
function _iterable_to_array_limit$
|
|
147
|
+
function _iterable_to_array_limit$2(arr, i) {
|
|
149
148
|
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
150
149
|
if (_i == null) return;
|
|
151
150
|
var _arr = [];
|
|
@@ -169,23 +168,23 @@ function _iterable_to_array_limit$3(arr, i) {
|
|
|
169
168
|
}
|
|
170
169
|
return _arr;
|
|
171
170
|
}
|
|
172
|
-
function _non_iterable_rest$
|
|
171
|
+
function _non_iterable_rest$2() {
|
|
173
172
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
174
173
|
}
|
|
175
|
-
function _sliced_to_array$
|
|
176
|
-
return _array_with_holes$
|
|
174
|
+
function _sliced_to_array$2(arr, i) {
|
|
175
|
+
return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
|
|
177
176
|
}
|
|
178
|
-
function _unsupported_iterable_to_array$
|
|
177
|
+
function _unsupported_iterable_to_array$2(o, minLen) {
|
|
179
178
|
if (!o) return;
|
|
180
|
-
if (typeof o === "string") return _array_like_to_array$
|
|
179
|
+
if (typeof o === "string") return _array_like_to_array$2(o, minLen);
|
|
181
180
|
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
182
181
|
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
183
182
|
if (n === "Map" || n === "Set") return Array.from(n);
|
|
184
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$
|
|
183
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
|
|
185
184
|
}
|
|
186
185
|
function Button(param) {
|
|
187
186
|
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;
|
|
188
|
-
var _React_useState = _sliced_to_array$
|
|
187
|
+
var _React_useState = _sliced_to_array$2(React.useState(false), 2), isSelected = _React_useState[0], setIsSelected = _React_useState[1];
|
|
189
188
|
var buttonState = Juce.getToggleState(id);
|
|
190
189
|
var handleMouseDown = function(e) {
|
|
191
190
|
e.preventDefault();
|
|
@@ -370,21 +369,21 @@ function Row(param) {
|
|
|
370
369
|
Row.PADDING = SPACING;
|
|
371
370
|
Row.FLEX_DIRECTION = FLEX_DIRECTION;
|
|
372
371
|
|
|
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);
|
|
375
|
-
|
|
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}";
|
|
372
|
+
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}";
|
|
377
373
|
styleInject(css_248z$6);
|
|
378
374
|
|
|
379
|
-
|
|
375
|
+
var css_248z$5 = ".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}";
|
|
376
|
+
styleInject(css_248z$5);
|
|
377
|
+
|
|
378
|
+
function _array_like_to_array$1(arr, len) {
|
|
380
379
|
if (len == null || len > arr.length) len = arr.length;
|
|
381
380
|
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
382
381
|
return arr2;
|
|
383
382
|
}
|
|
384
|
-
function _array_with_holes$
|
|
383
|
+
function _array_with_holes$1(arr) {
|
|
385
384
|
if (Array.isArray(arr)) return arr;
|
|
386
385
|
}
|
|
387
|
-
function _iterable_to_array_limit$
|
|
386
|
+
function _iterable_to_array_limit$1(arr, i) {
|
|
388
387
|
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
389
388
|
if (_i == null) return;
|
|
390
389
|
var _arr = [];
|
|
@@ -408,23 +407,23 @@ function _iterable_to_array_limit$2(arr, i) {
|
|
|
408
407
|
}
|
|
409
408
|
return _arr;
|
|
410
409
|
}
|
|
411
|
-
function _non_iterable_rest$
|
|
410
|
+
function _non_iterable_rest$1() {
|
|
412
411
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
413
412
|
}
|
|
414
|
-
function _sliced_to_array$
|
|
415
|
-
return _array_with_holes$
|
|
413
|
+
function _sliced_to_array$1(arr, i) {
|
|
414
|
+
return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
|
|
416
415
|
}
|
|
417
|
-
function _unsupported_iterable_to_array$
|
|
416
|
+
function _unsupported_iterable_to_array$1(o, minLen) {
|
|
418
417
|
if (!o) return;
|
|
419
|
-
if (typeof o === "string") return _array_like_to_array$
|
|
418
|
+
if (typeof o === "string") return _array_like_to_array$1(o, minLen);
|
|
420
419
|
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
421
420
|
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
422
421
|
if (n === "Map" || n === "Set") return Array.from(n);
|
|
423
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$
|
|
422
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
|
|
424
423
|
}
|
|
425
424
|
function Dropdown(param) {
|
|
426
425
|
var items = param.items, className = param.className, id = param.id;
|
|
427
|
-
var _useState = _sliced_to_array$
|
|
426
|
+
var _useState = _sliced_to_array$1(useState(0), 2), selectedIndex = _useState[0], setSelectedIndex = _useState[1];
|
|
428
427
|
var dropdownState = Juce.getComboBoxState(id);
|
|
429
428
|
var handleChange = function(val) {
|
|
430
429
|
setSelectedIndex(val);
|
|
@@ -451,12 +450,12 @@ function Dropdown(param) {
|
|
|
451
450
|
})));
|
|
452
451
|
}
|
|
453
452
|
|
|
454
|
-
var css_248z$
|
|
455
|
-
styleInject(css_248z$5);
|
|
456
|
-
|
|
457
|
-
var css_248z$4 = ".TextLabel {\n font-family: \"Arial\", sans-serif;\n font-size: 14px;\n text-align: center;\n}";
|
|
453
|
+
var css_248z$4 = ".Slider {\n position: relative;\n}\n.Slider-inner {\n height: 100%;\n width: 100%;\n position: absolute;\n}\n.Slider-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}\n.Slider--bar {\n background-color: #737373;\n}\n.Slider--bar .Slider-marker {\n height: 100%;\n background-color: #979797;\n}\n.Slider--rotary {\n height: 50px;\n background-color: #737373;\n width: 50px;\n border-radius: 100%;\n position: relative;\n aspect-ratio: 1/1;\n}\n.Slider--rotary .Slider-inner {\n right: 0;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n}\n.Slider--rotary .Slider-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.Slider-polarity--bipolar.Slider-orientation--horizontal::after {\n content: \"\";\n width: 2px;\n height: 100%;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 49%;\n background: #fff;\n}\n\n.Slider-polarity--bipolar.Slider-orientation--vertical::after {\n content: \"\";\n height: 2px;\n width: 100%;\n position: absolute;\n bottom: 49%;\n left: 0;\n right: 0;\n background: #fff;\n}\n\n.Slider-orientation--horizontal {\n height: 20px;\n width: 100%;\n}\n\n.Slider-orientation--vertical {\n height: 100%;\n width: 20px;\n}";
|
|
458
454
|
styleInject(css_248z$4);
|
|
459
455
|
|
|
456
|
+
var css_248z$3 = ".TextLabel {\n font-family: \"Arial\", sans-serif;\n font-size: 14px;\n text-align: center;\n}";
|
|
457
|
+
styleInject(css_248z$3);
|
|
458
|
+
|
|
460
459
|
var TextLabel = function(param) {
|
|
461
460
|
var text = param.text, id = param.id, className = param.className, style = param.style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
|
|
462
461
|
SPACING.NONE
|
|
@@ -497,12 +496,12 @@ var decimalToPercent = function(decimal) {
|
|
|
497
496
|
return Math.round(100 * (typeof decimal === 'string' ? parseFloat(decimal) : decimal));
|
|
498
497
|
};
|
|
499
498
|
|
|
500
|
-
function _array_like_to_array
|
|
499
|
+
function _array_like_to_array(arr, len) {
|
|
501
500
|
if (len == null || len > arr.length) len = arr.length;
|
|
502
501
|
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
503
502
|
return arr2;
|
|
504
503
|
}
|
|
505
|
-
function _array_with_holes
|
|
504
|
+
function _array_with_holes(arr) {
|
|
506
505
|
if (Array.isArray(arr)) return arr;
|
|
507
506
|
}
|
|
508
507
|
function _define_property$1(obj, key, value) {
|
|
@@ -518,7 +517,7 @@ function _define_property$1(obj, key, value) {
|
|
|
518
517
|
}
|
|
519
518
|
return obj;
|
|
520
519
|
}
|
|
521
|
-
function _iterable_to_array_limit
|
|
520
|
+
function _iterable_to_array_limit(arr, i) {
|
|
522
521
|
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
523
522
|
if (_i == null) return;
|
|
524
523
|
var _arr = [];
|
|
@@ -542,7 +541,7 @@ function _iterable_to_array_limit$1(arr, i) {
|
|
|
542
541
|
}
|
|
543
542
|
return _arr;
|
|
544
543
|
}
|
|
545
|
-
function _non_iterable_rest
|
|
544
|
+
function _non_iterable_rest() {
|
|
546
545
|
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
547
546
|
}
|
|
548
547
|
function _object_spread$1(target) {
|
|
@@ -579,30 +578,94 @@ function _object_spread_props$1(target, source) {
|
|
|
579
578
|
}
|
|
580
579
|
return target;
|
|
581
580
|
}
|
|
582
|
-
function _sliced_to_array
|
|
583
|
-
return _array_with_holes
|
|
581
|
+
function _sliced_to_array(arr, i) {
|
|
582
|
+
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
584
583
|
}
|
|
585
|
-
function _unsupported_iterable_to_array
|
|
584
|
+
function _unsupported_iterable_to_array(o, minLen) {
|
|
586
585
|
if (!o) return;
|
|
587
|
-
if (typeof o === "string") return _array_like_to_array
|
|
586
|
+
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
588
587
|
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
589
588
|
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
590
589
|
if (n === "Map" || n === "Set") return Array.from(n);
|
|
591
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array
|
|
590
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
592
591
|
}
|
|
593
|
-
var
|
|
594
|
-
(function(
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
})(
|
|
598
|
-
|
|
599
|
-
|
|
592
|
+
var SLIDER_POLARITY;
|
|
593
|
+
(function(SLIDER_POLARITY) {
|
|
594
|
+
SLIDER_POLARITY["LINEAR"] = "LINEAR";
|
|
595
|
+
SLIDER_POLARITY["BIPOLAR"] = "BIPOLAR";
|
|
596
|
+
})(SLIDER_POLARITY || (SLIDER_POLARITY = {}));
|
|
597
|
+
var SLIDER_TYPE;
|
|
598
|
+
(function(SLIDER_TYPE) {
|
|
599
|
+
SLIDER_TYPE["BAR"] = "BAR";
|
|
600
|
+
SLIDER_TYPE["ROTARY"] = "ROTARY";
|
|
601
|
+
})(SLIDER_TYPE || (SLIDER_TYPE = {}));
|
|
602
|
+
var SLIDER_ORIENTATION;
|
|
603
|
+
(function(SLIDER_ORIENTATION) {
|
|
604
|
+
SLIDER_ORIENTATION["HORIZONTAL"] = "HORIZONTAL";
|
|
605
|
+
SLIDER_ORIENTATION["VERTICAL"] = "VERTICAL";
|
|
606
|
+
})(SLIDER_ORIENTATION || (SLIDER_ORIENTATION = {}));
|
|
607
|
+
var getTransformString = function(param) {
|
|
608
|
+
var sliderType = param.sliderType, sliderOrientation = param.sliderOrientation, sliderPolarity = param.sliderPolarity, normalizedValue = param.normalizedValue, scaledValue = param.scaledValue;
|
|
609
|
+
if (sliderType === "BAR") {
|
|
610
|
+
if (sliderPolarity === "LINEAR") {
|
|
611
|
+
return sliderOrientation === "HORIZONTAL" ? {
|
|
612
|
+
transform: "scale(".concat(normalizedValue, ", 1)"),
|
|
613
|
+
transformOrigin: 'center left'
|
|
614
|
+
} : {
|
|
615
|
+
transform: "scale(1, ".concat(normalizedValue, ")"),
|
|
616
|
+
transformOrigin: 'bottom center'
|
|
617
|
+
};
|
|
618
|
+
} else {
|
|
619
|
+
return sliderOrientation === "HORIZONTAL" ? {
|
|
620
|
+
transform: "scale(".concat(Math.ceil(scaledValue * 100) / 100 / 2, ", 1)"),
|
|
621
|
+
transformOrigin: 'left center'
|
|
622
|
+
} : {
|
|
623
|
+
transform: "scale(1, ".concat(Math.ceil(scaledValue * 100) / 100 / 2, ")"),
|
|
624
|
+
transformOrigin: 'bottom center'
|
|
625
|
+
};
|
|
626
|
+
}
|
|
627
|
+
} else {
|
|
628
|
+
return {
|
|
629
|
+
transform: '0'
|
|
630
|
+
};
|
|
631
|
+
}
|
|
632
|
+
};
|
|
633
|
+
var getPosition = function(param) {
|
|
634
|
+
var sliderType = param.sliderType, sliderOrientation = param.sliderOrientation, sliderPolarity = param.sliderPolarity;
|
|
635
|
+
if (sliderType === "BAR") {
|
|
636
|
+
if (sliderPolarity === "LINEAR") {
|
|
637
|
+
return sliderOrientation === "HORIZONTAL" ? {
|
|
638
|
+
top: '0',
|
|
639
|
+
bottom: '0',
|
|
640
|
+
left: '0'
|
|
641
|
+
} : {
|
|
642
|
+
right: '0',
|
|
643
|
+
bottom: '0',
|
|
644
|
+
left: '0'
|
|
645
|
+
};
|
|
646
|
+
} else {
|
|
647
|
+
return sliderOrientation === "HORIZONTAL" ? {
|
|
648
|
+
top: '0',
|
|
649
|
+
bottom: '0',
|
|
650
|
+
left: '50%'
|
|
651
|
+
} : {
|
|
652
|
+
bottom: '50%',
|
|
653
|
+
left: '0',
|
|
654
|
+
right: '0'
|
|
655
|
+
};
|
|
656
|
+
}
|
|
657
|
+
} else {
|
|
658
|
+
return {};
|
|
659
|
+
}
|
|
660
|
+
};
|
|
661
|
+
function Slider(param) {
|
|
662
|
+
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_sliderPolarity = param.sliderPolarity, sliderPolarity = _param_sliderPolarity === void 0 ? "LINEAR" : _param_sliderPolarity, _param_sliderOrientation = param.sliderOrientation, sliderOrientation = _param_sliderOrientation === void 0 ? "VERTICAL" : _param_sliderOrientation, _param_sliderType = param.sliderType, sliderType = _param_sliderType === void 0 ? "BAR" : _param_sliderType, className = param.className, id = param.id, _param_mockInitialScaledValue = param.// Mocks the initial scaled value of the slider for web veiws outside of JUCE
|
|
600
663
|
mockInitialScaledValue, mockInitialScaledValue = _param_mockInitialScaledValue === void 0 ? 0 : _param_mockInitialScaledValue, _param_mockProperties = param.mockProperties, mockProperties = _param_mockProperties === void 0 ? {
|
|
601
664
|
start: 0,
|
|
602
665
|
end: 1,
|
|
603
666
|
interval: 0.01
|
|
604
667
|
} : _param_mockProperties;
|
|
605
|
-
var
|
|
668
|
+
var sliderState = Juce.getSliderState(id);
|
|
606
669
|
// if isLocalhost is true, the front end app is running outside of JUCE in a browser.
|
|
607
670
|
var isLocalhost = window.location.hostname === 'localhost';
|
|
608
671
|
// getNormalisedValue:
|
|
@@ -614,11 +677,11 @@ function Knob(param) {
|
|
|
614
677
|
* AudioProcessorParameter::getValue() (C++).
|
|
615
678
|
*/ // See https://github.com/juce-framework/JUCE/blob/51d11a2be6d5c97ccf12b4e5e827006e19f0555a/modules/juce_gui_extra/native/javascript/index.js#L230C1-L238C6
|
|
616
679
|
// NOTE: We can think of this as a percentage value, in 0 to 1 format
|
|
617
|
-
var _useState = _sliced_to_array
|
|
618
|
-
var _useState1 = _sliced_to_array
|
|
619
|
-
var _useState2 = _sliced_to_array
|
|
680
|
+
var _useState = _sliced_to_array(useState(0), 2), normalizedValue = _useState[0], setNormalizedValue = _useState[1];
|
|
681
|
+
var _useState1 = _sliced_to_array(useState(0), 2), scaledValue = _useState1[0], setScaledValue = _useState1[1];
|
|
682
|
+
var _useState2 = _sliced_to_array(useState(null), 2), properties = _useState2[0], setProperties = _useState2[1];
|
|
620
683
|
var handleChange = function(_, newValue) {
|
|
621
|
-
|
|
684
|
+
sliderState === null || sliderState === void 0 ? void 0 : sliderState.setNormalisedValue(newValue);
|
|
622
685
|
// If the front end app is running in a browser, set the new value here.
|
|
623
686
|
// Otherwise, the value will come from JUCE.
|
|
624
687
|
if (isLocalhost) {
|
|
@@ -642,22 +705,22 @@ function Knob(param) {
|
|
|
642
705
|
end: mockProperties === null || mockProperties === void 0 ? void 0 : mockProperties.end
|
|
643
706
|
}));
|
|
644
707
|
setScaledValue(mockInitialScaledValue);
|
|
645
|
-
|
|
708
|
+
sliderState.setNormalisedValue(mockInitialScaledValue);
|
|
646
709
|
return;
|
|
647
710
|
} else {
|
|
648
|
-
var valueListenerId =
|
|
649
|
-
setNormalizedValue(
|
|
650
|
-
setScaledValue(
|
|
711
|
+
var valueListenerId = sliderState.valueChangedEvent.addListener(function() {
|
|
712
|
+
setNormalizedValue(sliderState.getNormalisedValue());
|
|
713
|
+
setScaledValue(sliderState.getScaledValue());
|
|
651
714
|
});
|
|
652
|
-
var propertiesListenerId =
|
|
653
|
-
return setProperties(
|
|
715
|
+
var propertiesListenerId = sliderState.propertiesChangedEvent.addListener(function() {
|
|
716
|
+
return setProperties(sliderState.properties);
|
|
654
717
|
});
|
|
655
|
-
setProperties(
|
|
656
|
-
setNormalizedValue(
|
|
657
|
-
setScaledValue(
|
|
718
|
+
setProperties(sliderState.properties);
|
|
719
|
+
setNormalizedValue(sliderState.getNormalisedValue());
|
|
720
|
+
setScaledValue(sliderState.getScaledValue());
|
|
658
721
|
return function cleanup() {
|
|
659
|
-
|
|
660
|
-
|
|
722
|
+
sliderState.valueChangedEvent.removeListener(valueListenerId);
|
|
723
|
+
sliderState.propertiesChangedEvent.removeListener(propertiesListenerId);
|
|
661
724
|
};
|
|
662
725
|
}
|
|
663
726
|
}
|
|
@@ -665,8 +728,10 @@ function Knob(param) {
|
|
|
665
728
|
var bindDrag = useDrag(function(param) {
|
|
666
729
|
var down = param.down, delta = param.delta;
|
|
667
730
|
if (down) {
|
|
668
|
-
var
|
|
669
|
-
|
|
731
|
+
var deltaVal = sliderType === "ROTARY" || sliderType === "BAR" && sliderOrientation === "VERTICAL" ? delta[1] * -1 : delta[0];
|
|
732
|
+
var newValue = normalizedValue + deltaVal * ((properties === null || properties === void 0 ? void 0 : properties.interval) && (properties === null || properties === void 0 ? void 0 : properties.interval.toString().length) > 4 ? 4 : 0.4) * ((properties === null || properties === void 0 ? void 0 : properties.interval) || 0.01);
|
|
733
|
+
var invertedNewValue = newValue;
|
|
734
|
+
handleChange(event, invertedNewValue );
|
|
670
735
|
}
|
|
671
736
|
}, {
|
|
672
737
|
preventDefault: true
|
|
@@ -687,22 +752,31 @@ function Knob(param) {
|
|
|
687
752
|
SPACING.NONE
|
|
688
753
|
],
|
|
689
754
|
text: label
|
|
690
|
-
}),
|
|
691
|
-
className: "
|
|
755
|
+
}), sliderPolarity === "BIPOLAR" && sliderType === "ROTARY" && /*#__PURE__*/ React__default.createElement("div", {
|
|
756
|
+
className: "Slider-center-marker"
|
|
692
757
|
}), /*#__PURE__*/ React__default.createElement("div", _object_spread_props$1(_object_spread$1({
|
|
693
|
-
className: classnames('
|
|
758
|
+
className: classnames('Slider', sliderPolarity === "LINEAR" ? 'Slider-polarity--linear' : 'Slider-polarity--bipolar', sliderType === "BAR" ? 'Slider--bar' : 'Slider--rotary', sliderType === "BAR" ? sliderOrientation === "HORIZONTAL" ? 'Slider-orientation--horizontal' : 'Slider-orientation--vertical' : '', className)
|
|
694
759
|
}, bindDrag()), {
|
|
695
760
|
style: {
|
|
696
|
-
transform: knobType === "STANDARD" ? '' : ')',
|
|
697
761
|
touchAction: 'none'
|
|
698
762
|
}
|
|
699
763
|
}), /*#__PURE__*/ React__default.createElement("div", {
|
|
700
|
-
className: "
|
|
701
|
-
style: {
|
|
702
|
-
rotate: "".concat(
|
|
703
|
-
}
|
|
764
|
+
className: "Slider-inner",
|
|
765
|
+
style: _object_spread$1({
|
|
766
|
+
rotate: sliderType === "ROTARY" ? "".concat(sliderPolarity === "LINEAR" ? normalizedValue : normalizedValue + 0.5, "turn") : "0"
|
|
767
|
+
}, getTransformString({
|
|
768
|
+
sliderType: sliderType,
|
|
769
|
+
sliderOrientation: sliderOrientation,
|
|
770
|
+
sliderPolarity: sliderPolarity,
|
|
771
|
+
normalizedValue: normalizedValue,
|
|
772
|
+
scaledValue: scaledValue
|
|
773
|
+
}), getPosition({
|
|
774
|
+
sliderType: sliderType,
|
|
775
|
+
sliderOrientation: sliderOrientation,
|
|
776
|
+
sliderPolarity: sliderPolarity
|
|
777
|
+
}))
|
|
704
778
|
}, /*#__PURE__*/ React__default.createElement("div", {
|
|
705
|
-
className: "
|
|
779
|
+
className: "Slider-marker"
|
|
706
780
|
}))), showValue && /*#__PURE__*/ React__default.createElement(TextLabel, {
|
|
707
781
|
text: "".concat(decimalToPercent(scaledValue)),
|
|
708
782
|
padding: [
|
|
@@ -711,123 +785,10 @@ function Knob(param) {
|
|
|
711
785
|
]
|
|
712
786
|
}));
|
|
713
787
|
}
|
|
714
|
-
Knob.LABEL_POSITION = POSITION;
|
|
715
|
-
Knob.KNOB_TYPE = KNOB_TYPE;
|
|
716
|
-
|
|
717
|
-
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}";
|
|
718
|
-
styleInject(css_248z$3);
|
|
719
|
-
|
|
720
|
-
function _array_like_to_array(arr, len) {
|
|
721
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
722
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
723
|
-
return arr2;
|
|
724
|
-
}
|
|
725
|
-
function _array_with_holes(arr) {
|
|
726
|
-
if (Array.isArray(arr)) return arr;
|
|
727
|
-
}
|
|
728
|
-
function _iterable_to_array_limit(arr, i) {
|
|
729
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
730
|
-
if (_i == null) return;
|
|
731
|
-
var _arr = [];
|
|
732
|
-
var _n = true;
|
|
733
|
-
var _d = false;
|
|
734
|
-
var _s, _e;
|
|
735
|
-
try {
|
|
736
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
737
|
-
_arr.push(_s.value);
|
|
738
|
-
if (i && _arr.length === i) break;
|
|
739
|
-
}
|
|
740
|
-
} catch (err) {
|
|
741
|
-
_d = true;
|
|
742
|
-
_e = err;
|
|
743
|
-
} finally{
|
|
744
|
-
try {
|
|
745
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
746
|
-
} finally{
|
|
747
|
-
if (_d) throw _e;
|
|
748
|
-
}
|
|
749
|
-
}
|
|
750
|
-
return _arr;
|
|
751
|
-
}
|
|
752
|
-
function _non_iterable_rest() {
|
|
753
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
754
|
-
}
|
|
755
|
-
function _sliced_to_array(arr, i) {
|
|
756
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
757
|
-
}
|
|
758
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
759
|
-
if (!o) return;
|
|
760
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
761
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
762
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
763
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
764
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
765
|
-
}
|
|
766
|
-
function Slider(param) {
|
|
767
|
-
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;
|
|
768
|
-
var _useState = _sliced_to_array(useState(0.0), 2), min = _useState[0], setMin = _useState[1];
|
|
769
|
-
var _useState1 = _sliced_to_array(useState(1.0), 2), max = _useState1[0], setMax = _useState1[1];
|
|
770
|
-
var _useState2 = _sliced_to_array(useState(0.01), 1), interval = _useState2[0];
|
|
771
|
-
var _useState3 = _sliced_to_array(useState(0.0), 2), value = _useState3[0], setValue = _useState3[1];
|
|
772
|
-
var _useState4 = _sliced_to_array(useState(false), 2), hasStoreData = _useState4[0], setHasStoreData = _useState4[1];
|
|
773
|
-
useEffect(function() {
|
|
774
|
-
var sliderState = Juce.getSliderState(id);
|
|
775
|
-
if (!!sliderState) {
|
|
776
|
-
var _sliderState_properties, _sliderState_properties1, _sliderState_properties2;
|
|
777
|
-
setMin(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties = sliderState.properties) === null || _sliderState_properties === void 0 ? void 0 : _sliderState_properties.start);
|
|
778
|
-
setMax(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties1 = sliderState.properties) === null || _sliderState_properties1 === void 0 ? void 0 : _sliderState_properties1.end);
|
|
779
|
-
setInterval(sliderState === null || sliderState === void 0 ? void 0 : (_sliderState_properties2 = sliderState.properties) === null || _sliderState_properties2 === void 0 ? void 0 : _sliderState_properties2.interval);
|
|
780
|
-
setValue(sliderState === null || sliderState === void 0 ? void 0 : sliderState.scaledValue);
|
|
781
|
-
setHasStoreData(true);
|
|
782
|
-
}
|
|
783
|
-
}, []);
|
|
784
|
-
var handleChange = function(val) {
|
|
785
|
-
setValue(val);
|
|
786
|
-
if (hasStoreData) {
|
|
787
|
-
var sliderState = Juce.getSliderState(id);
|
|
788
|
-
sliderState.setNormalisedValue(val);
|
|
789
|
-
}
|
|
790
|
-
};
|
|
791
|
-
return /*#__PURE__*/ React__default.createElement("div", {
|
|
792
|
-
style: {
|
|
793
|
-
display: 'flex',
|
|
794
|
-
flexDirection: 'column',
|
|
795
|
-
alignItems: 'center',
|
|
796
|
-
justifyContent: 'center',
|
|
797
|
-
minWidth: orientation === DIRECTION.HORIZONTAL ? '100px' : 'auto',
|
|
798
|
-
minHeight: orientation === DIRECTION.VERTICAL ? '100px' : 'auto',
|
|
799
|
-
width: orientation === DIRECTION.HORIZONTAL ? '100%' : label ? '55px' : '12px',
|
|
800
|
-
height: orientation === DIRECTION.VERTICAL ? '100%' : '55px'
|
|
801
|
-
}
|
|
802
|
-
}, label && /*#__PURE__*/ React__default.createElement(TextLabel, {
|
|
803
|
-
style: {
|
|
804
|
-
order: labelPosition === POSITION.BOTTOM ? 3 : 0
|
|
805
|
-
},
|
|
806
|
-
padding: [
|
|
807
|
-
SPACING.SMALL,
|
|
808
|
-
SPACING.NONE
|
|
809
|
-
],
|
|
810
|
-
text: label
|
|
811
|
-
}), (value || value === 0) && /*#__PURE__*/ React__default.createElement(ReactSlider, {
|
|
812
|
-
min: min,
|
|
813
|
-
max: max,
|
|
814
|
-
value: value,
|
|
815
|
-
disabled: !hasStoreData,
|
|
816
|
-
invert: orientation === DIRECTION.VERTICAL,
|
|
817
|
-
orientation: orientation,
|
|
818
|
-
onChange: handleChange,
|
|
819
|
-
step: interval,
|
|
820
|
-
className: classnames('Slider', orientation === DIRECTION.HORIZONTAL ? 'horizontal' : 'vertical', className)
|
|
821
|
-
}), showValue && /*#__PURE__*/ React__default.createElement(TextLabel, {
|
|
822
|
-
text: "".concat(decimalToPercent(value)),
|
|
823
|
-
padding: [
|
|
824
|
-
SPACING.SMALL,
|
|
825
|
-
SPACING.NONE
|
|
826
|
-
]
|
|
827
|
-
}));
|
|
828
|
-
}
|
|
829
788
|
Slider.LABEL_POSITION = POSITION;
|
|
830
|
-
Slider.
|
|
789
|
+
Slider.SLIDER_TYPE = SLIDER_TYPE;
|
|
790
|
+
Slider.SLIDER_POLARITY = SLIDER_POLARITY;
|
|
791
|
+
Slider.SLIDER_ORIENTATION = SLIDER_ORIENTATION;
|
|
831
792
|
|
|
832
793
|
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}";
|
|
833
794
|
styleInject(css_248z$2);
|
|
@@ -980,5 +941,5 @@ var Matrix = function(param) {
|
|
|
980
941
|
}));
|
|
981
942
|
};
|
|
982
943
|
|
|
983
|
-
export { Button, Col, Dropdown,
|
|
944
|
+
export { Button, Col, Dropdown, Layout, Matrix, Row, Slider, Tabs, TextHeader, TextLabel };
|
|
984
945
|
//# 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":"
|
|
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]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@antimatter-audio/antimatter-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "React UI component library for Antimatter Audio.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,8 +26,6 @@
|
|
|
26
26
|
"classnames": "^2.5.1",
|
|
27
27
|
"juce-framework-frontend": "file:src/assets/juce-framework-frontend",
|
|
28
28
|
"node-sass": "^9.0.0",
|
|
29
|
-
"react-knob-headless": "^0.3.0",
|
|
30
|
-
"react-slider": "^2.0.6",
|
|
31
29
|
"rollup-plugin-dts": "^6.1.1",
|
|
32
30
|
"rollup-plugin-import-css": "^3.5.0",
|
|
33
31
|
"rollup-plugin-swc3": "^0.11.2"
|