react-asc 18.3.0 → 18.3.4
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/components/Backdrop/Backdrop.d.ts +1 -0
- package/index.es.js +57 -48
- package/index.es.js.map +1 -1
- package/index.js +57 -48
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/readme.md +5 -4
package/index.es.js
CHANGED
|
@@ -87,56 +87,56 @@ function styleInject(css, ref) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
var styles$
|
|
92
|
-
styleInject(css_248z$
|
|
90
|
+
var css_248z$P = ".Alert-module_alert__2yOUn {\n border-radius: var(--borderRadius);\n padding: 6px 16px; }\n\n.Alert-module_contained__1cUnn.Alert-module_primary__1pnWJ {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n\n.Alert-module_contained__1cUnn.Alert-module_accent__3TlkP {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n\n.Alert-module_contained__1cUnn.Alert-module_secondary__3cfYS {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n\n.Alert-module_contained__1cUnn.Alert-module_light__vSzHK {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n\n.Alert-module_contained__1cUnn.Alert-module_dark__3DrkS {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n\n.Alert-module_outline__3fdYC.Alert-module_primary__1pnWJ {\n color: var(--primary) !important;\n border: 1px solid var(--primary) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_secondary__3cfYS {\n color: var(--secondary) !important;\n border: 1px solid var(--secondary) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_accent__3TlkP {\n color: var(--accent) !important;\n border: 1px solid var(--accent) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_light__vSzHK {\n color: var(--light-contrast-text) !important;\n border: 1px solid var(--light) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_dark__3DrkS {\n color: var(--dark) !important;\n border: 1px solid var(--dark) !important; }\n";
|
|
91
|
+
var styles$P = {"alert":"Alert-module_alert__2yOUn","contained":"Alert-module_contained__1cUnn","primary":"Alert-module_primary__1pnWJ","accent":"Alert-module_accent__3TlkP","secondary":"Alert-module_secondary__3cfYS","light":"Alert-module_light__vSzHK","dark":"Alert-module_dark__3DrkS","outline":"Alert-module_outline__3fdYC"};
|
|
92
|
+
styleInject(css_248z$P);
|
|
93
93
|
|
|
94
94
|
const Alert = (props) => {
|
|
95
95
|
const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
96
96
|
const getCssClasses = () => {
|
|
97
97
|
const cssClasses = [];
|
|
98
|
-
cssClasses.push(styles$
|
|
98
|
+
cssClasses.push(styles$P.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$P.contained);
|
|
101
|
+
cssClasses.push(styles$P[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$P.outline);
|
|
105
|
+
cssClasses.push(styles$P[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$P['shadow']);
|
|
108
108
|
className && cssClasses.push(className);
|
|
109
109
|
return cssClasses.filter(r => r).join(' ');
|
|
110
110
|
};
|
|
111
111
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
112
112
|
};
|
|
113
113
|
|
|
114
|
-
var css_248z$
|
|
115
|
-
var styles$
|
|
116
|
-
styleInject(css_248z$
|
|
114
|
+
var css_248z$O = ".AppBar-module_appbar__1S8G1 {\n padding: 0.5rem 1rem;\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0; }\n .AppBar-module_appbar__1S8G1.AppBar-module_primary__3CiO7 {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .AppBar-module_appbar__1S8G1.AppBar-module_secondary__1W4qT {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .AppBar-module_appbar__1S8G1.AppBar-module_accent__Mgcwx {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .AppBar-module_appbar__1S8G1.AppBar-module_light__1FxmL {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .AppBar-module_appbar__1S8G1.AppBar-module_dark__3n5rm {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .AppBar-module_appbar__1S8G1.AppBar-module_shadow__2c8iH {\n box-shadow: var(--shadow); }\n";
|
|
115
|
+
var styles$O = {"appbar":"AppBar-module_appbar__1S8G1","primary":"AppBar-module_primary__3CiO7","secondary":"AppBar-module_secondary__1W4qT","accent":"AppBar-module_accent__Mgcwx","light":"AppBar-module_light__1FxmL","dark":"AppBar-module_dark__3n5rm","shadow":"AppBar-module_shadow__2c8iH"};
|
|
116
|
+
styleInject(css_248z$O);
|
|
117
117
|
|
|
118
118
|
const AppBar = (props) => {
|
|
119
119
|
const { children, className, color = COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
120
120
|
const getCssClasses = () => {
|
|
121
121
|
const cssClasses = [];
|
|
122
|
-
cssClasses.push(styles$
|
|
123
|
-
cssClasses.push(styles$
|
|
124
|
-
shadow && cssClasses.push(styles$
|
|
122
|
+
cssClasses.push(styles$O[color]);
|
|
123
|
+
cssClasses.push(styles$O.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$O['shadow']);
|
|
125
125
|
className && cssClasses.push(className);
|
|
126
126
|
return cssClasses.filter(r => r).join(' ');
|
|
127
127
|
};
|
|
128
128
|
return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
129
129
|
};
|
|
130
130
|
|
|
131
|
-
var css_248z$
|
|
132
|
-
var styles$
|
|
133
|
-
styleInject(css_248z$
|
|
131
|
+
var css_248z$N = ".AppBarTitle-module_appbarTitle__3J-Z1 {\n display: flex;\n align-items: center;\n padding-top: 0.3125rem;\n padding-bottom: 0.3125rem;\n margin-right: 1rem;\n font-size: 1.25rem;\n line-height: inherit;\n white-space: nowrap; }\n .AppBarTitle-module_appbarTitle__3J-Z1:hover {\n cursor: pointer; }\n .AppBarTitle-module_appbarTitle__3J-Z1 h1 {\n margin-bottom: 0;\n font-size: 20px;\n font-weight: 400;\n line-height: 30px; }\n";
|
|
132
|
+
var styles$N = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
|
|
133
|
+
styleInject(css_248z$N);
|
|
134
134
|
|
|
135
135
|
const AppBarTitle = (props) => {
|
|
136
136
|
const { children, className, onClick } = props;
|
|
137
137
|
const getCssClass = () => {
|
|
138
138
|
const cssClasses = [];
|
|
139
|
-
cssClasses.push(styles$
|
|
139
|
+
cssClasses.push(styles$N.appbarTitle);
|
|
140
140
|
className && cssClasses.push(className);
|
|
141
141
|
return cssClasses.filter(r => r).join(' ');
|
|
142
142
|
};
|
|
@@ -144,7 +144,7 @@ const AppBarTitle = (props) => {
|
|
|
144
144
|
};
|
|
145
145
|
|
|
146
146
|
const Backdrop = (props) => {
|
|
147
|
-
const { target = document.body, isTransparent = false, onClick } = props;
|
|
147
|
+
const { target = document.body, isTransparent = false, onClick, style } = props;
|
|
148
148
|
const handleClick = (e) => {
|
|
149
149
|
e.stopPropagation();
|
|
150
150
|
onClick && onClick();
|
|
@@ -157,43 +157,47 @@ const Backdrop = (props) => {
|
|
|
157
157
|
}
|
|
158
158
|
return cssClasses.filter(css => css).join(' ');
|
|
159
159
|
};
|
|
160
|
-
|
|
160
|
+
const getStyles = () => {
|
|
161
|
+
const styles = Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
|
|
162
|
+
return styles;
|
|
163
|
+
};
|
|
164
|
+
return (createPortal(React.createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles() }), target));
|
|
161
165
|
};
|
|
162
166
|
|
|
163
|
-
var css_248z$
|
|
164
|
-
var styles$
|
|
165
|
-
styleInject(css_248z$
|
|
167
|
+
var css_248z$M = ".List-module_list__1ax9w {\n width: 100%;\n display: flex;\n flex-direction: column;\n padding-left: 0;\n margin-bottom: 0;\n margin-top: 0;\n background-color: var(--white); }\n";
|
|
168
|
+
var styles$M = {"list":"List-module_list__1ax9w"};
|
|
169
|
+
styleInject(css_248z$M);
|
|
166
170
|
|
|
167
171
|
const List = (props) => {
|
|
168
172
|
const { children, className, isFlush } = props;
|
|
169
173
|
const getCssClasses = () => {
|
|
170
174
|
const cssClasses = [];
|
|
171
175
|
if (isFlush) {
|
|
172
|
-
cssClasses.push(styles$
|
|
176
|
+
cssClasses.push(styles$M.flush);
|
|
173
177
|
}
|
|
174
|
-
cssClasses.push(styles$
|
|
178
|
+
cssClasses.push(styles$M.list);
|
|
175
179
|
className && cssClasses.push(className);
|
|
176
180
|
return cssClasses.filter(css => css).join(' ');
|
|
177
181
|
};
|
|
178
182
|
return (React.createElement("ul", { className: getCssClasses() }, children));
|
|
179
183
|
};
|
|
180
184
|
|
|
181
|
-
var css_248z$
|
|
182
|
-
var styles$
|
|
183
|
-
styleInject(css_248z$
|
|
185
|
+
var css_248z$L = ".ListItem-module_listItem__3hAZb {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.75rem 1.25rem;\n min-width: 100%;\n color: var(--bodyColor);\n text-align: inherit;\n transition: background 0.5s ease; }\n .ListItem-module_listItem__3hAZb:hover, .ListItem-module_listItem__3hAZb.ListItem-module_active__hyvch {\n cursor: pointer;\n z-index: 1;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n color: var(--primary); }\n .ListItem-module_listItem__3hAZb + .ListItem-module_listItem__3hAZb {\n border-top-width: 0; }\n .ListItem-module_listItem__3hAZb.ListItem-module_primary__2OJAg {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .ListItem-module_listItem__3hAZb.ListItem-module_accent__2RXHe {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .ListItem-module_listItem__3hAZb.ListItem-module_secondary__3EVjH {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .ListItem-module_listItem__3hAZb.ListItem-module_light__3CJBB {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .ListItem-module_listItem__3hAZb.ListItem-module_dark__SazkE {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n";
|
|
186
|
+
var styles$L = {"listItem":"ListItem-module_listItem__3hAZb","active":"ListItem-module_active__hyvch","primary":"ListItem-module_primary__2OJAg","accent":"ListItem-module_accent__2RXHe","secondary":"ListItem-module_secondary__3EVjH","light":"ListItem-module_light__3CJBB","dark":"ListItem-module_dark__SazkE"};
|
|
187
|
+
styleInject(css_248z$L);
|
|
184
188
|
|
|
185
189
|
const ListItem = (props) => {
|
|
186
190
|
const { id, children, color, active, className, isHoverable, isDisabled, onClick } = props;
|
|
187
191
|
const getCssClasses = () => {
|
|
188
192
|
const cssClasses = [];
|
|
189
193
|
if (active) {
|
|
190
|
-
cssClasses.push(styles$
|
|
194
|
+
cssClasses.push(styles$L['active']);
|
|
191
195
|
}
|
|
192
196
|
if (isDisabled) {
|
|
193
197
|
cssClasses.push(`disabled`);
|
|
194
198
|
}
|
|
195
|
-
color && cssClasses.push(styles$
|
|
196
|
-
cssClasses.push(styles$
|
|
199
|
+
color && cssClasses.push(styles$L[color]);
|
|
200
|
+
cssClasses.push(styles$L.listItem);
|
|
197
201
|
className && cssClasses.push(className);
|
|
198
202
|
return cssClasses.filter(css => css).join(' ');
|
|
199
203
|
};
|
|
@@ -203,28 +207,32 @@ const ListItem = (props) => {
|
|
|
203
207
|
return (React.createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
|
|
204
208
|
};
|
|
205
209
|
|
|
206
|
-
var css_248z$
|
|
207
|
-
var styles$
|
|
210
|
+
var css_248z$K = ".ListItemAvatar-module_avatar__1fjSE {\n margin-right: 16px; }\n .ListItemAvatar-module_avatar__1fjSE svg, .ListItemAvatar-module_avatar__1fjSE img {\n width: 24px;\n height: 24px; }\n .ListItemAvatar-module_avatar__1fjSE img {\n border-radius: 50%; }\n";
|
|
211
|
+
var styles$K = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
|
|
212
|
+
styleInject(css_248z$K);
|
|
213
|
+
|
|
214
|
+
const ListItemAvatar = ({ avatar }) => (React.createElement("div", { className: styles$K.avatar }, avatar));
|
|
215
|
+
|
|
216
|
+
var css_248z$J = ".ListItemIcon-module_icon__-nsUy {\n margin-right: 32px; }\n .ListItemIcon-module_icon__-nsUy svg {\n width: 24px;\n height: 24px; }\n";
|
|
217
|
+
var styles$J = {"icon":"ListItemIcon-module_icon__-nsUy"};
|
|
208
218
|
styleInject(css_248z$J);
|
|
209
219
|
|
|
210
|
-
const
|
|
220
|
+
const ListItemIcon = ({ icon }) => (React.createElement("div", { className: styles$J.icon }, icon));
|
|
211
221
|
|
|
212
|
-
var css_248z$I = ".
|
|
213
|
-
var styles$I = {"
|
|
222
|
+
var css_248z$I = ".ListItemAction-module_listItemAction__26S66 {\n display: flex;\n justify-content: center;\n min-width: 40px; }\n .ListItemAction-module_listItemAction__26S66 svg {\n width: 20px;\n height: 20px; }\n";
|
|
223
|
+
var styles$I = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
|
|
214
224
|
styleInject(css_248z$I);
|
|
215
225
|
|
|
216
|
-
const
|
|
226
|
+
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$I.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
217
227
|
|
|
218
|
-
var css_248z$H = ".
|
|
219
|
-
var styles$H = {"
|
|
228
|
+
var css_248z$H = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1; }\n";
|
|
229
|
+
var styles$H = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
220
230
|
styleInject(css_248z$H);
|
|
221
231
|
|
|
222
|
-
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$H.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
223
|
-
|
|
224
232
|
const ListItemText = ({ primary, secondary }) => {
|
|
225
233
|
const getCssClasses = () => {
|
|
226
234
|
const cssClasses = [];
|
|
227
|
-
cssClasses.push(
|
|
235
|
+
cssClasses.push(styles$H.listItemText);
|
|
228
236
|
return cssClasses.filter(css => css).join(' ');
|
|
229
237
|
};
|
|
230
238
|
return (React.createElement("div", { className: getCssClasses() },
|
|
@@ -337,7 +345,7 @@ const Icon = (props) => {
|
|
|
337
345
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
338
346
|
};
|
|
339
347
|
|
|
340
|
-
var css_248z$D = ".Button-module_button__3cIVZ {\n text-transform: uppercase !important;\n flex-shrink: 0;\n min-width: 64px;\n font-size: 0.875rem;\n box-shadow: var(--shadow); }\n\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6 {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n\n.Button-module_btnContained__8Q4uL:disabled:hover {\n cursor: not-allowed; }\n\n.Button-module_btnText__32H44 {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__32H44.Button-module_primary__2soUg {\n color: var(--primary) !important; }\n .Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_secondary__psAvb {\n color: var(--secondary) !important; }\n .Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n color: var(--accent) !important; }\n .Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important; }\n .Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n text-decoration: none;\n background: var(--light-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_dark__O89wU {\n color: var(--dark) !important; }\n .Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__2drkn {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n color: var(--primary) !important;\n border-color: var(--primary) !important; }\n .Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n background: var(--primary-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important; }\n .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n background: var(--secondary-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n border-color: var(--accent) !important; }\n .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n background: var(--accent-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important; }\n .Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n background: var(--light-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n color: var(--dark) !important;\n border-color: var(--dark) !important; }\n .Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__1TN-G {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__1TN-G svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__3uZjE {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__3uZjE svg {\n width: 18px;\n height: 18px; }\n";
|
|
348
|
+
var css_248z$D = ".Button-module_button__3cIVZ {\n text-transform: uppercase !important;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n border-radius: 0.25rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n box-shadow: var(--shadow); }\n\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Button-module_btnContained__8Q4uL.Button-module_primary__2soUg:hover {\n background-color: var(--primary-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6 {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6:hover {\n background-color: var(--accent-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb:hover {\n background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Button-module_btnContained__8Q4uL.Button-module_light__JVK1z:hover {\n background-color: var(--light-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Button-module_btnContained__8Q4uL.Button-module_dark__O89wU:hover {\n background-color: var(--dark-dark); }\n\n.Button-module_btnContained__8Q4uL:disabled:hover {\n cursor: not-allowed; }\n\n.Button-module_btnText__32H44 {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__32H44.Button-module_primary__2soUg {\n color: var(--primary) !important; }\n .Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_secondary__psAvb {\n color: var(--secondary) !important; }\n .Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n color: var(--accent) !important; }\n .Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important; }\n .Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n text-decoration: none;\n background: var(--light-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_dark__O89wU {\n color: var(--dark) !important; }\n .Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__2drkn {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n color: var(--primary) !important;\n border-color: var(--primary) !important; }\n .Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n background: var(--primary-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important; }\n .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n background: var(--secondary-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n border-color: var(--accent) !important; }\n .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n background: var(--accent-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important; }\n .Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n background: var(--light-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n color: var(--dark) !important;\n border-color: var(--dark) !important; }\n .Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__1TN-G {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__1TN-G svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__3uZjE {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__3uZjE svg {\n width: 18px;\n height: 18px; }\n";
|
|
341
349
|
var styles$D = {"button":"Button-module_button__3cIVZ","btnContained":"Button-module_btnContained__8Q4uL","primary":"Button-module_primary__2soUg","accent":"Button-module_accent__1_cP6","secondary":"Button-module_secondary__psAvb","light":"Button-module_light__JVK1z","dark":"Button-module_dark__O89wU","btnText":"Button-module_btnText__32H44","btnOutline":"Button-module_btnOutline__2drkn","startIcon":"Button-module_startIcon__1TN-G","endIcon":"Button-module_endIcon__3uZjE"};
|
|
342
350
|
styleInject(css_248z$D);
|
|
343
351
|
|
|
@@ -718,11 +726,12 @@ const FileInput = (props) => {
|
|
|
718
726
|
React.createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
|
|
719
727
|
};
|
|
720
728
|
|
|
721
|
-
var css_248z$q = ".Select-module_selectContainer__2oizY {\n position: relative; }\n\n.Select-module_select__MSqgU {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .Select-module_select__MSqgU:hover {\n cursor: pointer; }\n\n.Select-module_selectMenu__2vhJt {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 2px;\n z-index:
|
|
729
|
+
var css_248z$q = ".Select-module_selectContainer__2oizY {\n position: relative; }\n\n.Select-module_select__MSqgU {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .Select-module_select__MSqgU:hover {\n cursor: pointer; }\n\n.Select-module_selectMenu__2vhJt {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 2px;\n z-index: 1112;\n max-height: 280px;\n overflow: auto; }\n";
|
|
722
730
|
var styles$q = {"selectContainer":"Select-module_selectContainer__2oizY","select":"Select-module_select__MSqgU","selectMenu":"Select-module_selectMenu__2vhJt"};
|
|
723
731
|
styleInject(css_248z$q);
|
|
724
732
|
|
|
725
733
|
const Select = (props) => {
|
|
734
|
+
var _a, _b, _c;
|
|
726
735
|
const { id, className, options = [], value, multiple, multipleMaxCountItems = 5, onChange, onKeyDown } = props;
|
|
727
736
|
const [model, setModel] = useState('');
|
|
728
737
|
const [hoverIndex, setHoverIndex] = useState(null);
|
|
@@ -858,13 +867,13 @@ const Select = (props) => {
|
|
|
858
867
|
React.createElement(Icon, { className: "ml-auto" },
|
|
859
868
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
860
869
|
isShow &&
|
|
861
|
-
React.createElement(React.Fragment, null,
|
|
862
|
-
React.createElement("div", { className: styles$q.selectMenu },
|
|
870
|
+
createPortal(React.createElement(React.Fragment, null,
|
|
871
|
+
React.createElement("div", { className: styles$q.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
|
|
863
872
|
React.createElement(List, null, options && options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
|
|
864
873
|
multiple &&
|
|
865
874
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
866
875
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
867
|
-
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
|
|
876
|
+
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body))));
|
|
868
877
|
};
|
|
869
878
|
|
|
870
879
|
var css_248z$p = "textarea {\n min-height: calc(10em + 0.75rem + 2px);\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: 0.25rem;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n resize: vertical; }\n textarea:focus {\n outline: none !important;\n border-color: var(--primary); }\n";
|