@antimatter-audio/antimatter-ui 1.0.13 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +21 -1
  2. package/dist/index.d.ts +19 -6
  3. package/dist/index.js +84 -24
  4. package/dist/index.js.map +1 -1
  5. package/package.json +4 -2
package/README.md CHANGED
@@ -1,3 +1,23 @@
1
1
  # Antimatter UI
2
2
 
3
- A small React UI library for Animatter Audio.
3
+ A small React UI library for Animatter Audio.
4
+
5
+ # Usage
6
+
7
+ To install this package from npm, run:
8
+
9
+ `npm i @antimatter-audio/antimatter-ui`
10
+
11
+ NOTE: This package is included in [antimatter-plugin-template](http://github.com/antimatter-audio/antimatter-plugin-template). Most likely, you will want to use that project as your starting point.
12
+
13
+ # Development
14
+
15
+ To build and publish this project to the npm registry, run:
16
+
17
+ `npm run build`
18
+
19
+ Then, depending on whether your update is a major change, minor change, or a patch, run one of the following:
20
+ `npm version major` || `npm version minor` || `npm version patch`
21
+
22
+ Finally, run:
23
+ `npm publish`
package/dist/index.d.ts CHANGED
@@ -1,5 +1,14 @@
1
1
  import * as React from 'react';
2
2
  import React__default from 'react';
3
+ import { SPACING as SPACING$1 } from 'common/types';
4
+
5
+ interface TabsProps {
6
+ items: Array<string>;
7
+ onChange: (index: number) => void;
8
+ className?: string;
9
+ style?: object;
10
+ }
11
+ declare const Tabs: React__default.FC<React__default.PropsWithChildren<TabsProps>>;
3
12
 
4
13
  declare enum BUTTON_SIZE {
5
14
  SMALL = "SMALL",
@@ -7,11 +16,11 @@ declare enum BUTTON_SIZE {
7
16
  }
8
17
 
9
18
  interface TextButtonProps {
19
+ id: any;
10
20
  disabled?: boolean;
11
21
  size?: BUTTON_SIZE;
12
22
  onClick?: any;
13
23
  text?: string;
14
- id?: any;
15
24
  className?: string;
16
25
  style?: object;
17
26
  children?: React.ReactNode;
@@ -19,6 +28,7 @@ interface TextButtonProps {
19
28
  declare const Button: React.FC<React.PropsWithChildren<TextButtonProps>>;
20
29
 
21
30
  declare enum SPACING {
31
+ NONE = "",
22
32
  X_SMALL = "xsmall",
23
33
  SMALL = "small",
24
34
  MEDIUM_SMALL = "mediumsmall",
@@ -49,28 +59,29 @@ interface GridRowProps {
49
59
  className?: string;
50
60
  id?: string;
51
61
  style?: object;
62
+ padding?: Array<SPACING$1>;
52
63
  flexDirection?: FLEX_DIRECTION;
53
64
  onClick?: () => void;
54
65
  }
55
66
  declare const Row: React.FC<React.PropsWithChildren<GridRowProps>>;
56
67
 
57
68
  interface DropdownProps {
58
- items: Array<string>;
59
69
  id: string;
70
+ items: Array<string>;
60
71
  className?: string;
61
72
  onChange?: (event: any) => {};
62
73
  }
63
74
  declare const Dropdown: React__default.FC<DropdownProps>;
64
75
 
65
76
  interface KnobProps {
66
- id?: any;
77
+ id: any;
67
78
  className?: string;
68
79
  style?: object;
69
80
  }
70
81
  declare const Knob: React__default.FC<React__default.PropsWithChildren<KnobProps>>;
71
82
 
72
83
  interface SliderProps {
73
- id?: any;
84
+ id: any;
74
85
  className?: string;
75
86
  }
76
87
  declare const Slider: React.FC<React.PropsWithChildren<SliderProps>>;
@@ -81,7 +92,8 @@ declare enum TEXT_HEADER_LEVELS {
81
92
  }
82
93
 
83
94
  interface TextHeaderProps {
84
- level: TEXT_HEADER_LEVELS;
95
+ level?: TEXT_HEADER_LEVELS;
96
+ padding?: Array<SPACING>;
85
97
  text?: string;
86
98
  id?: any;
87
99
  className?: string;
@@ -91,10 +103,11 @@ declare const TextHeader: React.FC<React.PropsWithChildren<TextHeaderProps>>;
91
103
 
92
104
  interface TextLabelProps {
93
105
  text?: string;
106
+ padding?: Array<SPACING>;
94
107
  id?: any;
95
108
  className?: string;
96
109
  style?: object;
97
110
  }
98
111
  declare const TextLabel: React.FC<React.PropsWithChildren<TextLabelProps>>;
99
112
 
100
- export { Button, Col, Dropdown, FLEX_DIRECTION, SPACING as GRID_SPACING, Knob, Row, SPACING, Slider, TEXT_HEADER_LEVELS, TextHeader, TextLabel };
113
+ export { Button, Col, Dropdown, FLEX_DIRECTION, SPACING as GRID_SPACING, Knob, Row, SPACING, Slider, TEXT_HEADER_LEVELS, Tabs, TextHeader, TextLabel };
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import React__default, { useState, useEffect } from 'react';
3
3
  import classnames from 'classnames';
4
+ import { TabGroup, TabList, Tab, Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
4
5
  import * as Juce from 'juce-framework-frontend';
5
- import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/react';
6
6
  import { KnobHeadless } from 'react-knob-headless';
7
7
  import ReactSlider from 'react-slider';
8
8
 
@@ -33,7 +33,29 @@ function styleInject(css, ref) {
33
33
  }
34
34
  }
35
35
 
36
- var css_248z$6 = "/* border radius */\n/* spacing */\n/* typography */\n.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}\n\n.Button-small {\n height: 8px;\n}\n\n.Button-large {\n height: 12px;\n}\n\n.Button.selected {\n color: #fc5713;\n}\n\n.Button:hover {\n background-color: #404040;\n outline: 0;\n}\n\n.Button:disabled,\n.Button.disabled {\n cursor: not-allowed;\n color: #404040;\n background: #858585;\n}";
36
+ var css_248z$8 = "/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\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, aside, details, figcaption, figure,\nfooter, header, hgroup, menu, nav, section {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol, ul {\n list-style: none;\n}\n\nblockquote, q {\n quotes: none;\n}\n\nblockquote:before, blockquote:after,\nq:before, q: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/* Margin Top */\n.margin-top-none {\n margin-top: 0;\n}\n\n.margin-top-xsmall {\n margin-top: 2px;\n}\n\n.margin-top-small {\n margin-top: 4px;\n}\n\n.margin-top-medium {\n margin-top: 12px;\n}\n\n.margin-top-large {\n margin-top: 20px;\n}\n\n.margin-top-xlarge {\n margin-top: 24px;\n}\n\n/* Margin Bottom */\n.margin-bottom-none {\n margin-bottom: 0;\n}\n\n.margin-bottom-xsmall {\n margin-bottom: 2px;\n}\n\n.margin-bottom-small {\n margin-bottom: 4px;\n}\n\n.margin-bottom-medium {\n margin-bottom: 12px;\n}\n\n.margin-bottom-large {\n margin-bottom: 20px;\n}\n\n.margin-bottom-xlarge {\n margin-bottom: 24px;\n}\n\n/* Margin Left */\n.margin-left-none {\n margin-left: 0;\n}\n\n.margin-left-xsmall {\n margin-left: 2px;\n}\n\n.margin-left-small {\n margin-left: 4px;\n}\n\n.margin-left-medium {\n margin-left: 12px;\n}\n\n.margin-left-large {\n margin-left: 20px;\n}\n\n.margin-left-xlarge {\n margin-left: 24px;\n}\n\n/* Margin Right */\n.margin-right-none {\n margin-right: 0;\n}\n\n.margin-right-xsmall {\n margin-right: 2px;\n}\n\n.margin-right-small {\n margin-right: 4px;\n}\n\n.margin-right-medium {\n margin-right: 12px;\n}\n\n.margin-right-large {\n margin-right: 20px;\n}\n\n.margin-right-xlarge {\n margin-right: 24px;\n}\n\n/* Margin Vertical */\n.margin-vertical-none {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.margin-vertical-xsmall {\n margin-top: 2px;\n margin-bottom: 2px;\n}\n\n.margin-vertical-small {\n margin-top: 4px;\n margin-bottom: 4px;\n}\n\n.margin-vertical-medium {\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.margin-vertical-large {\n margin-top: 20px;\n margin-bottom: 20px;\n}\n\n.margin-vertical-xlarge {\n margin-top: 24px;\n margin-bottom: 24px;\n}\n\n/* Margin Horizontal */\n.margin-horizontal-none {\n margin-left: 0;\n margin-right: 0;\n}\n\n.margin-horizontal-xsmall {\n margin-left: 2px;\n margin-right: 2px;\n}\n\n.margin-horizontal-small {\n margin-left: 4px;\n margin-right: 4px;\n}\n\n.margin-horizontal-medium {\n margin-left: 12px;\n margin-right: 12px;\n}\n\n.margin-horizontal-large {\n margin-left: 20px;\n margin-right: 20px;\n}\n\n.margin-horizontal-xlarge {\n margin-left: 24px;\n margin-right: 24px;\n}\n\n/* Margin Around */\n.margin-around-none {\n margin-left: 0;\n margin-right: 0;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.margin-around-xsmall {\n margin-left: 2px;\n margin-right: 2px;\n margin-top: 2px;\n margin-bottom: 2px;\n}\n\n.margin-around-small {\n margin-left: 4px;\n margin-right: 4px;\n margin-top: 4px;\n margin-bottom: 4px;\n}\n\n.margin-around-medium {\n margin-left: 12px;\n margin-right: 12px;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.margin-around-large {\n margin-left: 20px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 20px;\n}\n\n.margin-around-xlarge {\n margin-left: 24px;\n margin-right: 24px;\n margin-top: 24px;\n margin-bottom: 24px;\n}\n\n/* Padding */\n/* Padding Top */\n.padding-top-none {\n padding-top: 0;\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-medium {\n padding-top: 12px;\n}\n\n.padding-top-large {\n padding-top: 20px;\n}\n\n.padding-top-xlarge {\n padding-top: 24px;\n}\n\n/* Padding Bottom */\n.padding-bottom-none {\n padding-bottom: 0;\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-medium {\n padding-bottom: 12px;\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 */\n.padding-left-none {\n padding-left: 0;\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-medium {\n padding-left: 12px;\n}\n\n.padding-left-large {\n padding-left: 20px;\n}\n\n.padding-left-xlarge {\n padding-left: 24px;\n}\n\n/* Padding Right */\n.padding-right-none {\n padding-right: 0;\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-medium {\n padding-right: 12px;\n}\n\n.padding-right-large {\n padding-right: 20px;\n}\n\n.padding-right-xlarge {\n padding-right: 24px;\n}\n\n/* Padding Vertical */\n.padding-vertical-none {\n padding-top: 0;\n padding-bottom: 0;\n}\n\n.padding-vertical-xsmall {\n padding-top: 2px;\n padding-bottom: 2px;\n}\n\n.padding-vertical-small {\n padding-top: 4px;\n padding-bottom: 4px;\n}\n\n.padding-vertical-medium {\n padding-top: 12px;\n padding-bottom: 12px;\n}\n\n.padding-vertical-large {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n.padding-vertical-xlarge {\n padding-top: 24px;\n padding-bottom: 24px;\n}\n\n/* Padding Horizontal */\n.padding-horizontal-none {\n padding-left: 0;\n padding-right: 0;\n}\n\n.padding-horizontal-xsmall {\n padding-left: 2px;\n padding-right: 2px;\n}\n\n.padding-horizontal-small {\n padding-left: 4px;\n padding-right: 4px;\n}\n\n.padding-horizontal-medium {\n padding-left: 12px;\n padding-right: 12px;\n}\n\n.padding-horizontal-large {\n padding-left: 20px;\n padding-right: 20px;\n}\n\n.padding-horizontal-xlarge {\n padding-left: 24px;\n padding-right: 24px;\n}\n\n/* Padding Around */\n.padding-around-none {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n padding-bottom: 0;\n}\n\n.padding-around-xsmall {\n padding-left: 2px;\n padding-right: 2px;\n padding-top: 2px;\n padding-bottom: 2px;\n}\n\n.padding-around-small {\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 4px;\n padding-bottom: 4px;\n}\n\n.padding-around-medium {\n padding-left: 12px;\n padding-right: 12px;\n padding-top: 12px;\n padding-bottom: 12px;\n}\n\n.padding-around-large {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n.padding-around-xlarge {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: 24px;\n padding-bottom: 24px;\n}\n\n.height-100-percent {\n height: 100%;\n}\n\n.flex-auto {\n flex: auto;\n}";
37
+ styleInject(css_248z$8);
38
+
39
+ var css_248z$7 = ".Tabs {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\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}\n.Tabs .Tabs-item {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px 8px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n color: #fff;\n background-color: #737373;\n border: 0;\n appearance: none;\n user-select: none;\n}\n.Tabs .Tabs-item:first-child {\n border-radius: 3px 0 0 3px;\n}\n.Tabs .Tabs-item:last-child {\n border-radius: 0 3px 3px 0;\n}\n.Tabs .Tabs-item:hover, .Tabs .Tabs-item:focus, .Tabs .Tabs-item:active {\n outline: 0;\n}\n.Tabs .Tabs-item:hover {\n background-color: #606060;\n color: #eee;\n}\n.Tabs .Tabs-item[data-headlessui-state=selected] {\n background-color: #404040;\n}\n.Tabs .Tabs-item[data-headlessui-state=\"selected hover\"] {\n background-color: #404040;\n}";
40
+ styleInject(css_248z$7);
41
+
42
+ var Tabs = function(param) {
43
+ var items = param.items, className = param.className, onChange = param.onChange;
44
+ return /*#__PURE__*/ React__default.createElement(TabGroup, {
45
+ onChange: function(index) {
46
+ return onChange(index);
47
+ }
48
+ }, /*#__PURE__*/ React__default.createElement(TabList, {
49
+ className: classnames(className, 'Tabs')
50
+ }, items && items.map(function(item) {
51
+ return /*#__PURE__*/ React__default.createElement(Tab, {
52
+ id: item,
53
+ className: "Tabs-item"
54
+ }, item);
55
+ })));
56
+ };
57
+
58
+ var css_248z$6 = ".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}\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}";
37
59
  styleInject(css_248z$6);
38
60
 
39
61
  var BUTTON_SIZE;
@@ -111,6 +133,7 @@ var Button = function(param) {
111
133
 
112
134
  var SPACING;
113
135
  (function(SPACING) {
136
+ SPACING["NONE"] = "";
114
137
  SPACING["X_SMALL"] = "xsmall";
115
138
  SPACING["SMALL"] = "small";
116
139
  SPACING["MEDIUM_SMALL"] = "mediumsmall";
@@ -122,18 +145,18 @@ var SPACING;
122
145
 
123
146
  var Col = function(param) {
124
147
  var offset = param.offset, centerContentHorizontal = param.centerContentHorizontal, centerContentVertical = param.centerContentVertical, alignContentRight = param.alignContentRight, className = param.className, children = param.children, onClick = param.onClick, span = param.span, _param_padding = param.padding, padding = _param_padding === void 0 ? [
125
- SPACING.MEDIUM
148
+ SPACING.NONE
126
149
  ] : _param_padding;
127
150
  return /*#__PURE__*/ React.createElement("div", {
128
151
  onClick: onClick,
129
152
  className: classnames(className, span ? 'col-xs-' + span : 'flex-auto', offset && 'col-xs-offset-' + offset, centerContentHorizontal && 'flex-align-center-horizontal', centerContentVertical && 'flex-align-center-vertical', alignContentRight && 'flex-align-end', padding.length === 1 && 'padding-around-' + padding, padding.length === 2 && 'padding-vertical-' + padding[0], padding.length === 2 && 'padding-horizontal-' + padding[1], padding.length === 4 && 'padding-top-' + [
130
153
  padding[0]
131
154
  ], padding.length === 4 && 'padding-right-' + [
132
- padding[0]
155
+ padding[1]
133
156
  ], padding.length === 4 && 'padding-bottom-' + [
134
- padding[0]
157
+ padding[2]
135
158
  ], padding.length === 4 && 'padding-left-' + [
136
- padding[0]
159
+ padding[3]
137
160
  ])
138
161
  }, children);
139
162
  };
@@ -145,12 +168,23 @@ var FLEX_DIRECTION;
145
168
  })(FLEX_DIRECTION || (FLEX_DIRECTION = {}));
146
169
 
147
170
  var Row = function(param) {
148
- var className = param.className, id = param.id, style = param.style, children = param.children, onClick = param.onClick, _param_flexDirection = param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FLEX_DIRECTION.ROW : _param_flexDirection;
171
+ var className = param.className, id = param.id, style = param.style, children = param.children, onClick = param.onClick, _param_padding = param.padding, padding = _param_padding === void 0 ? [
172
+ SPACING.MEDIUM,
173
+ SPACING.NONE
174
+ ] : _param_padding, _param_flexDirection = param.flexDirection, flexDirection = _param_flexDirection === void 0 ? FLEX_DIRECTION.ROW : _param_flexDirection;
149
175
  var isColumn = flexDirection === FLEX_DIRECTION.COLUMN;
150
176
  return /*#__PURE__*/ React.createElement("div", {
151
177
  style: style,
152
178
  onClick: onClick,
153
- className: classnames('row', className, isColumn && 'flex-direction-column flex-wrap-nowrap height-100-percent'),
179
+ className: classnames('row', className, isColumn && 'flex-direction-column flex-wrap-nowrap height-100-percent', padding.length === 1 && 'padding-around-' + padding, padding.length === 2 && 'padding-vertical-' + padding[0], padding.length === 2 && 'padding-horizontal-' + padding[1], padding.length === 4 && 'padding-top-' + [
180
+ padding[0]
181
+ ], padding.length === 4 && 'padding-right-' + [
182
+ padding[1]
183
+ ], padding.length === 4 && 'padding-bottom-' + [
184
+ padding[2]
185
+ ], padding.length === 4 && 'padding-left-' + [
186
+ padding[3]
187
+ ]),
154
188
  id: id
155
189
  }, children);
156
190
  };
@@ -158,7 +192,7 @@ var Row = function(param) {
158
192
  var css_248z$5 = ".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}";
159
193
  styleInject(css_248z$5);
160
194
 
161
- var css_248z$4 = "/* border radius */\n/* spacing */\n/* typography */\n.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 color: #fff;\n background-color: #404040;\n outline: 0;\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: #737373;\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: #404040;\n cursor: pointer;\n}\n\n.Dropdown-menu-item:hover {\n background-color: #858585;\n}";
195
+ var css_248z$4 = ".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}";
162
196
  styleInject(css_248z$4);
163
197
 
164
198
  function _array_like_to_array$1(arr, len) {
@@ -236,7 +270,7 @@ var Dropdown = function(param) {
236
270
  })));
237
271
  };
238
272
 
239
- var css_248z$3 = "/* border radius */\n/* spacing */\n/* typography */\n.Knob {\n height: 3rem;\n background-color: #737373;\n width: 3rem;\n border-radius: 100%;\n position: relative;\n}\n\n.Knob-inner {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n}\n\n.Knob-marker {\n position: absolute;\n top: 0;\n right: 0;\n left: 50%;\n width: 2px;\n height: 50%;\n border-radius: 125rem;\n background-color: #fff;\n transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}";
273
+ var css_248z$3 = ".Knob {\n height: 3rem;\n background-color: #737373;\n width: 3rem;\n border-radius: 100%;\n position: relative;\n}\n\n.Knob-inner {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: 100%;\n width: 100%;\n}\n\n.Knob-marker {\n position: absolute;\n top: 0;\n right: 0;\n left: 50%;\n width: 2px;\n height: 50%;\n border-radius: 125rem;\n background-color: #fff;\n transform: translate(-50%, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);\n}";
240
274
  styleInject(css_248z$3);
241
275
 
242
276
  function _array_like_to_array(arr, len) {
@@ -319,7 +353,7 @@ var Knob = function(param) {
319
353
  })));
320
354
  };
321
355
 
322
- var css_248z$2 = "/* border radius */\n/* spacing */\n/* typography */\n.track {\n height: 12px;\n background-color: #737373;\n}\n\n.thumb {\n height: 12px;\n width: 12px;\n background-color: #404040;\n}";
356
+ var css_248z$2 = ".track {\n height: 12px;\n background-color: #737373;\n}\n\n.thumb {\n height: 12px;\n width: 12px;\n background-color: #404040;\n}";
323
357
  styleInject(css_248z$2);
324
358
 
325
359
  var Slider = function(param) {
@@ -334,36 +368,62 @@ var Slider = function(param) {
334
368
  });
335
369
  };
336
370
 
337
- var css_248z$1 = "/* border radius */\n/* spacing */\n/* typography */\n.h1 {\n font-family: \"Arial\", sans-serif;\n font-size: 20px;\n font-weight: bold;\n text-transform: capitalize;\n}\n\n.h2 {\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n font-weight: bold;\n text-transform: capitalize;\n}";
371
+ var css_248z$1 = ".h1 {\n font-family: \"Arial\", sans-serif;\n font-size: 20px;\n font-weight: bold;\n text-transform: capitalize;\n}\n\n.h2 {\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n font-weight: bold;\n text-transform: capitalize;\n}";
338
372
  styleInject(css_248z$1);
339
373
 
374
+ var TEXT_HEADER_LEVELS;
375
+ (function(TEXT_HEADER_LEVELS) {
376
+ TEXT_HEADER_LEVELS["H1"] = "h1";
377
+ TEXT_HEADER_LEVELS["H2"] = "h2";
378
+ })(TEXT_HEADER_LEVELS || (TEXT_HEADER_LEVELS = {}));
379
+
340
380
  var TextHeader = function(param) {
341
- var text = param.text, id = param.id, className = param.className, style = param.style, level = param.level, children = param.children;
381
+ var text = param.text, id = param.id, className = param.className, style = param.style, _param_level = param.level, level = _param_level === void 0 ? TEXT_HEADER_LEVELS.H1 : _param_level, _param_padding = param.padding, padding = _param_padding === void 0 ? [
382
+ SPACING.NONE,
383
+ SPACING.NONE,
384
+ SPACING.MEDIUM,
385
+ SPACING.NONE
386
+ ] : _param_padding, children = param.children;
342
387
  var Tag = level;
343
388
  return /*#__PURE__*/ React.createElement(Tag, {
344
389
  id: id,
345
390
  style: style,
346
- className: classnames('TextHeader', className, level)
391
+ className: classnames('TextHeader', className, level, padding.length === 1 && 'padding-around-' + padding, padding.length === 2 && 'padding-vertical-' + padding[0], padding.length === 2 && 'padding-horizontal-' + padding[1], padding.length === 4 && 'padding-top-' + [
392
+ padding[0]
393
+ ], padding.length === 4 && 'padding-right-' + [
394
+ padding[1]
395
+ ], padding.length === 4 && 'padding-bottom-' + [
396
+ padding[2]
397
+ ], padding.length === 4 && 'padding-left-' + [
398
+ padding[3]
399
+ ])
347
400
  }, text ? text : children);
348
401
  };
349
402
 
350
- var TEXT_HEADER_LEVELS;
351
- (function(TEXT_HEADER_LEVELS) {
352
- TEXT_HEADER_LEVELS["H1"] = "h1";
353
- TEXT_HEADER_LEVELS["H2"] = "h2";
354
- })(TEXT_HEADER_LEVELS || (TEXT_HEADER_LEVELS = {}));
355
-
356
- var css_248z = "/* border radius */\n/* spacing */\n/* typography */\n.TextLabel {\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n}";
403
+ var css_248z = ".TextLabel {\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n}";
357
404
  styleInject(css_248z);
358
405
 
359
406
  var TextLabel = function(param) {
360
- var text = param.text, id = param.id, className = param.className, style = param.style, children = param.children;
407
+ var text = param.text, id = param.id, className = param.className, style = param.style, _param_padding = param.padding, padding = _param_padding === void 0 ? [
408
+ SPACING.NONE,
409
+ SPACING.NONE,
410
+ SPACING.MEDIUM,
411
+ SPACING.NONE
412
+ ] : _param_padding, children = param.children;
361
413
  return /*#__PURE__*/ React.createElement("span", {
362
414
  id: id,
363
415
  style: style,
364
- className: classnames("TextLabel", className)
416
+ className: classnames("TextLabel", className, padding.length === 1 && 'padding-around-' + padding, padding.length === 2 && 'padding-vertical-' + padding[0], padding.length === 2 && 'padding-horizontal-' + padding[1], padding.length === 4 && 'padding-top-' + [
417
+ padding[0]
418
+ ], padding.length === 4 && 'padding-right-' + [
419
+ padding[1]
420
+ ], padding.length === 4 && 'padding-bottom-' + [
421
+ padding[2]
422
+ ], padding.length === 4 && 'padding-left-' + [
423
+ padding[3]
424
+ ])
365
425
  }, text ? text : children);
366
426
  };
367
427
 
368
- export { Button, Col, Dropdown, FLEX_DIRECTION, SPACING as GRID_SPACING, Knob, Row, SPACING, Slider, TEXT_HEADER_LEVELS, TextHeader, TextLabel };
428
+ export { Button, Col, Dropdown, FLEX_DIRECTION, SPACING as GRID_SPACING, Knob, Row, SPACING, Slider, TEXT_HEADER_LEVELS, Tabs, TextHeader, TextLabel };
369
429
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":";;;;;;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
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": "1.0.13",
3
+ "version": "1.1.0",
4
4
  "description": "React UI component library for Antimatter Audio.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -11,7 +11,9 @@
11
11
  "types": "./dist/index.d.ts",
12
12
  "scripts": {
13
13
  "build": "rollup -c",
14
- "start": "rollup -c -w"
14
+ "start": "rollup -c -w",
15
+ "link-react": "npm link '/Users/marri/Documents/dev/antimatter-plugin-template/js/node_modules/react'",
16
+ "unlink-react": "npm unlink -g && npm i"
15
17
  },
16
18
  "files": [
17
19
  "dist"