@antimatter-audio/antimatter-ui 1.0.14 → 1.1.1
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/README.md +65 -4
- package/dist/index.d.ts +15 -2
- package/dist/index.js +79 -22
- package/dist/index.js.map +1 -1
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
# Antimatter UI
|
|
2
2
|
|
|
3
|
-
A small
|
|
3
|
+
A small library of UI components for Animatter Audio.
|
|
4
|
+
|
|
5
|
+
[NPM package](https://www.npmjs.com/package/@antimatter-audio/antimatter-ui?activeTab=readme).
|
|
6
|
+
|
|
7
|
+
[Github](http://github.com/antimatter-audio/antimatter-ui)
|
|
4
8
|
|
|
5
9
|
# Usage
|
|
6
10
|
|
|
@@ -8,15 +12,72 @@ To install this package from npm, run:
|
|
|
8
12
|
|
|
9
13
|
`npm i @antimatter-audio/antimatter-ui`
|
|
10
14
|
|
|
11
|
-
|
|
15
|
+
# Getting started
|
|
16
|
+
|
|
17
|
+
1. Clone [this repo](http://github.com/antimatter-audio/antimatter-ui):
|
|
18
|
+
`git clone git@github.com:antimatter-audio/antimatter-ui.git`.
|
|
19
|
+
2. Open this project in VS Code, and hit command-j to bring up the terminal.
|
|
20
|
+
3. Run `npm install`.
|
|
12
21
|
|
|
13
22
|
# Development
|
|
14
23
|
|
|
15
|
-
|
|
24
|
+
This library is intended to be used with [antimatter-plugin-template](http://github.com/antimatter-audio/antimatter-plugin-template). All of the components are viewable there.
|
|
25
|
+
|
|
26
|
+
`antimatter-plugin-template` is made to bootstrap Juce plugins, but the front end application in the `js` folder can also be viewed in a web browser. This makes development easier, because you do not need to worry about running Juce while working on UI components.
|
|
27
|
+
|
|
28
|
+
To view the most recent _published_ version of the antimatter-ui components:
|
|
29
|
+
|
|
30
|
+
1. Clone the [antimatter-plugin-template](http://github.com/antimatter-audio/antimatter-plugin-template) repo:
|
|
31
|
+
|
|
32
|
+
`git clone git@github.com:antimatter-audio/antimatter-plugin-template.git`
|
|
33
|
+
|
|
34
|
+
2. Go to the `antimatter-plugin-template` folder, and open the `js` folder in VS Code. Hit command-j to bring up the terminal.
|
|
35
|
+
3. Run `npm install`.
|
|
36
|
+
4. Run `npm run start` to start your development server.
|
|
37
|
+
5. Go go `http://localhost:3000/` in your browser.
|
|
38
|
+
|
|
39
|
+
The default `antimatter-plugin-template` layout should now be viewable. This layout is a demo of all the `antimatter-ui` components, and includes the latest _published_ version of this library.
|
|
40
|
+
|
|
41
|
+
NOTE: You will not see any _local_ changes you have made to this library yet. To preview your changes locally before publishing, you will need to [npm link](https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557) this project with the `antimatter-plugin-template` front end application.
|
|
42
|
+
|
|
43
|
+
1. In **this project**, run: `npm run link-template`
|
|
44
|
+
2. In the `js` folder in **antimatter-plugin-template**, run: `npm run link-ui`.
|
|
45
|
+
3. If your local development server is running, hit option-c to shut it down.
|
|
46
|
+
4. Run `npm run start` to start (or restart) your development server.
|
|
47
|
+
|
|
48
|
+
You should now see your local changes to these components at `http://localhost:3000/`.
|
|
49
|
+
|
|
50
|
+
## Adding new components
|
|
51
|
+
|
|
52
|
+
If you add a new component to this library, make sure to also add the component to the layout in `antimatter-plugin-template`.
|
|
53
|
+
|
|
54
|
+
# Publish
|
|
55
|
+
|
|
56
|
+
After making updates in this repo, you will want to publish your changes to npm. This will allow all projects that use the Antimatter UI library to upgrade to the latest version.
|
|
57
|
+
|
|
58
|
+
First, commit all changes in this repo to git:
|
|
59
|
+
|
|
60
|
+
`git add -A`
|
|
61
|
+
`git commit -m "your update message here"`
|
|
62
|
+
`git push`
|
|
63
|
+
|
|
64
|
+
If you are working on your `main` branch, that's all you need to do.
|
|
65
|
+
|
|
66
|
+
If you are working on a feature branch, go to [github](http://github.com/antimatter-audio/antimatter-ui), open a new pull request, and then merge the pull request.
|
|
67
|
+
|
|
68
|
+
Then, you can switch back to your `main` branch:
|
|
69
|
+
`git checkout main`
|
|
70
|
+
|
|
71
|
+
And update your local `main` branch with the changes from github:
|
|
72
|
+
`git pull`
|
|
73
|
+
|
|
74
|
+
When you have gotten everything merged to git, you are ready to publish this project to the npm registry!
|
|
75
|
+
|
|
76
|
+
First, run:
|
|
16
77
|
|
|
17
78
|
`npm run build`
|
|
18
79
|
|
|
19
|
-
Then, depending on whether your update is a major change, minor change, or a patch, run one of the following:
|
|
80
|
+
Then, depending on whether your update is a [major change, minor change, or a patch](https://docs.npmjs.com/about-semantic-versioning#incrementing-semantic-versions-in-published-packages), run one of the following:
|
|
20
81
|
`npm version major` || `npm version minor` || `npm version patch`
|
|
21
82
|
|
|
22
83
|
Finally, run:
|
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",
|
|
@@ -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,6 +59,7 @@ 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
|
}
|
|
@@ -81,7 +92,8 @@ declare enum TEXT_HEADER_LEVELS {
|
|
|
81
92
|
}
|
|
82
93
|
|
|
83
94
|
interface TextHeaderProps {
|
|
84
|
-
level
|
|
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,10 +33,29 @@ function styleInject(css, ref) {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
var css_248z$
|
|
36
|
+
var css_248z$8 = "/* 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/* 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}";
|
|
37
40
|
styleInject(css_248z$7);
|
|
38
41
|
|
|
39
|
-
var
|
|
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}";
|
|
40
59
|
styleInject(css_248z$6);
|
|
41
60
|
|
|
42
61
|
var BUTTON_SIZE;
|
|
@@ -114,6 +133,7 @@ var Button = function(param) {
|
|
|
114
133
|
|
|
115
134
|
var SPACING;
|
|
116
135
|
(function(SPACING) {
|
|
136
|
+
SPACING["NONE"] = "";
|
|
117
137
|
SPACING["X_SMALL"] = "xsmall";
|
|
118
138
|
SPACING["SMALL"] = "small";
|
|
119
139
|
SPACING["MEDIUM_SMALL"] = "mediumsmall";
|
|
@@ -125,18 +145,18 @@ var SPACING;
|
|
|
125
145
|
|
|
126
146
|
var Col = function(param) {
|
|
127
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 ? [
|
|
128
|
-
SPACING.
|
|
148
|
+
SPACING.NONE
|
|
129
149
|
] : _param_padding;
|
|
130
150
|
return /*#__PURE__*/ React.createElement("div", {
|
|
131
151
|
onClick: onClick,
|
|
132
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-' + [
|
|
133
153
|
padding[0]
|
|
134
154
|
], padding.length === 4 && 'padding-right-' + [
|
|
135
|
-
padding[
|
|
155
|
+
padding[1]
|
|
136
156
|
], padding.length === 4 && 'padding-bottom-' + [
|
|
137
|
-
padding[
|
|
157
|
+
padding[2]
|
|
138
158
|
], padding.length === 4 && 'padding-left-' + [
|
|
139
|
-
padding[
|
|
159
|
+
padding[3]
|
|
140
160
|
])
|
|
141
161
|
}, children);
|
|
142
162
|
};
|
|
@@ -148,12 +168,23 @@ var FLEX_DIRECTION;
|
|
|
148
168
|
})(FLEX_DIRECTION || (FLEX_DIRECTION = {}));
|
|
149
169
|
|
|
150
170
|
var Row = function(param) {
|
|
151
|
-
var className = param.className, id = param.id, style = param.style, children = param.children, onClick = param.onClick,
|
|
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;
|
|
152
175
|
var isColumn = flexDirection === FLEX_DIRECTION.COLUMN;
|
|
153
176
|
return /*#__PURE__*/ React.createElement("div", {
|
|
154
177
|
style: style,
|
|
155
178
|
onClick: onClick,
|
|
156
|
-
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
|
+
]),
|
|
157
188
|
id: id
|
|
158
189
|
}, children);
|
|
159
190
|
};
|
|
@@ -161,7 +192,7 @@ var Row = function(param) {
|
|
|
161
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}";
|
|
162
193
|
styleInject(css_248z$5);
|
|
163
194
|
|
|
164
|
-
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
|
|
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}";
|
|
165
196
|
styleInject(css_248z$4);
|
|
166
197
|
|
|
167
198
|
function _array_like_to_array$1(arr, len) {
|
|
@@ -310,7 +341,7 @@ var Knob = function(param) {
|
|
|
310
341
|
return "".concat(Math.round(valueRaw), "%");
|
|
311
342
|
},
|
|
312
343
|
dragSensitivity: 0.009,
|
|
313
|
-
orientation:
|
|
344
|
+
orientation: 'vertical',
|
|
314
345
|
onValueRawChange: setValue
|
|
315
346
|
}, /*#__PURE__*/ React__default.createElement("div", {
|
|
316
347
|
className: "Knob-inner",
|
|
@@ -340,33 +371,59 @@ var Slider = function(param) {
|
|
|
340
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}";
|
|
341
372
|
styleInject(css_248z$1);
|
|
342
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
|
+
|
|
343
380
|
var TextHeader = function(param) {
|
|
344
|
-
var text = param.text, id = param.id, className = param.className, style = param.style,
|
|
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;
|
|
345
387
|
var Tag = level;
|
|
346
388
|
return /*#__PURE__*/ React.createElement(Tag, {
|
|
347
389
|
id: id,
|
|
348
390
|
style: style,
|
|
349
|
-
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
|
+
])
|
|
350
400
|
}, text ? text : children);
|
|
351
401
|
};
|
|
352
402
|
|
|
353
|
-
var TEXT_HEADER_LEVELS;
|
|
354
|
-
(function(TEXT_HEADER_LEVELS) {
|
|
355
|
-
TEXT_HEADER_LEVELS["H1"] = "h1";
|
|
356
|
-
TEXT_HEADER_LEVELS["H2"] = "h2";
|
|
357
|
-
})(TEXT_HEADER_LEVELS || (TEXT_HEADER_LEVELS = {}));
|
|
358
|
-
|
|
359
403
|
var css_248z = ".TextLabel {\n font-family: \"Arial\", sans-serif;\n font-size: 16px;\n}";
|
|
360
404
|
styleInject(css_248z);
|
|
361
405
|
|
|
362
406
|
var TextLabel = function(param) {
|
|
363
|
-
var text = param.text, id = param.id, className = param.className, style = param.style,
|
|
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;
|
|
364
413
|
return /*#__PURE__*/ React.createElement("span", {
|
|
365
414
|
id: id,
|
|
366
415
|
style: style,
|
|
367
|
-
className: classnames(
|
|
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
|
+
])
|
|
368
425
|
}, text ? text : children);
|
|
369
426
|
};
|
|
370
427
|
|
|
371
|
-
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 };
|
|
372
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
|
|
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.
|
|
3
|
+
"version": "1.1.1",
|
|
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-template": "npm link && npm link '../antimatter-plugin-template/js/node_modules/react'",
|
|
16
|
+
"unlink-template": "npm unlink -g && npm i"
|
|
15
17
|
},
|
|
16
18
|
"files": [
|
|
17
19
|
"dist"
|
|
@@ -35,7 +37,9 @@
|
|
|
35
37
|
"@types/react-slider": "^1.3.6",
|
|
36
38
|
"babel-core": "^6.26.3",
|
|
37
39
|
"babel-runtime": "^6.26.0",
|
|
40
|
+
"eslint-config-prettier": "^9.1.0",
|
|
38
41
|
"globals": "^15.3.0",
|
|
42
|
+
"prettier": "3.3.2",
|
|
39
43
|
"react": "^18.3.1",
|
|
40
44
|
"react-dom": "^18.3.1",
|
|
41
45
|
"rollup": "^4.18.0",
|