react-asc 18.6.0 → 18.6.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/index.es.js +79 -76
- package/index.es.js.map +1 -1
- package/index.js +79 -76
- package/index.js.map +1 -1
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -95,56 +95,56 @@ function styleInject(css, ref) {
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
var css_248z$
|
|
99
|
-
var styles$
|
|
100
|
-
styleInject(css_248z$
|
|
98
|
+
var css_248z$R = ".Alert-module_alert__2yOUn {\n border-radius: var(--borderRadius);\n padding: 6px 16px;\n}\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\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}";
|
|
99
|
+
var styles$R = {"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"};
|
|
100
|
+
styleInject(css_248z$R);
|
|
101
101
|
|
|
102
102
|
const Alert = (props) => {
|
|
103
103
|
const { children, className, color = exports.COLOR.primary, variant = exports.VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
104
104
|
const getCssClasses = () => {
|
|
105
105
|
const cssClasses = [];
|
|
106
|
-
cssClasses.push(styles$
|
|
106
|
+
cssClasses.push(styles$R.alert);
|
|
107
107
|
if (variant === exports.VARIANT.contained) {
|
|
108
|
-
cssClasses.push(styles$
|
|
109
|
-
cssClasses.push(styles$
|
|
108
|
+
cssClasses.push(styles$R.contained);
|
|
109
|
+
cssClasses.push(styles$R[color]);
|
|
110
110
|
}
|
|
111
111
|
if (variant === exports.VARIANT.outline) {
|
|
112
|
-
cssClasses.push(styles$
|
|
113
|
-
cssClasses.push(styles$
|
|
112
|
+
cssClasses.push(styles$R.outline);
|
|
113
|
+
cssClasses.push(styles$R[color]);
|
|
114
114
|
}
|
|
115
|
-
shadow && cssClasses.push(styles$
|
|
115
|
+
shadow && cssClasses.push(styles$R['shadow']);
|
|
116
116
|
className && cssClasses.push(className);
|
|
117
117
|
return cssClasses.filter(r => r).join(' ');
|
|
118
118
|
};
|
|
119
119
|
return (React__default['default'].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
120
120
|
};
|
|
121
121
|
|
|
122
|
-
var css_248z$
|
|
123
|
-
var styles$
|
|
124
|
-
styleInject(css_248z$
|
|
122
|
+
var css_248z$Q = ".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}\n.AppBar-module_appbar__1S8G1.AppBar-module_primary__3CiO7 {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_secondary__1W4qT {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_accent__Mgcwx {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_light__1FxmL {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_dark__3n5rm {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_shadow__2c8iH {\n box-shadow: var(--shadow);\n}";
|
|
123
|
+
var styles$Q = {"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"};
|
|
124
|
+
styleInject(css_248z$Q);
|
|
125
125
|
|
|
126
126
|
const AppBar = (props) => {
|
|
127
127
|
const { children, className, color = exports.COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
128
128
|
const getCssClasses = () => {
|
|
129
129
|
const cssClasses = [];
|
|
130
|
-
cssClasses.push(styles$
|
|
131
|
-
cssClasses.push(styles$
|
|
132
|
-
shadow && cssClasses.push(styles$
|
|
130
|
+
cssClasses.push(styles$Q[color]);
|
|
131
|
+
cssClasses.push(styles$Q.appbar);
|
|
132
|
+
shadow && cssClasses.push(styles$Q['shadow']);
|
|
133
133
|
className && cssClasses.push(className);
|
|
134
134
|
return cssClasses.filter(r => r).join(' ');
|
|
135
135
|
};
|
|
136
136
|
return (React__default['default'].createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
137
137
|
};
|
|
138
138
|
|
|
139
|
-
var css_248z$
|
|
140
|
-
var styles$
|
|
141
|
-
styleInject(css_248z$
|
|
139
|
+
var css_248z$P = ".AppBarTitle-module_appbarTitle__3J-Z1 {\n align-items: center;\n padding-top: 0.3125rem;\n padding-bottom: 0.3125rem;\n font-size: 1.25rem;\n line-height: 1.8;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden !important;\n display: inline-block;\n}\n.AppBarTitle-module_appbarTitle__3J-Z1:hover {\n cursor: pointer;\n}";
|
|
140
|
+
var styles$P = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
|
|
141
|
+
styleInject(css_248z$P);
|
|
142
142
|
|
|
143
143
|
const AppBarTitle = (props) => {
|
|
144
144
|
const { children, className, onClick } = props;
|
|
145
145
|
const getCssClass = () => {
|
|
146
146
|
const cssClasses = [];
|
|
147
|
-
cssClasses.push(styles$
|
|
147
|
+
cssClasses.push(styles$P.appbarTitle);
|
|
148
148
|
className && cssClasses.push(className);
|
|
149
149
|
return cssClasses.filter(r => r).join(' ');
|
|
150
150
|
};
|
|
@@ -172,40 +172,40 @@ const Backdrop = (props) => {
|
|
|
172
172
|
return (reactDom.createPortal(React__default['default'].createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles() }), target));
|
|
173
173
|
};
|
|
174
174
|
|
|
175
|
-
var css_248z$
|
|
176
|
-
var styles$
|
|
177
|
-
styleInject(css_248z$
|
|
175
|
+
var css_248z$O = ".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}";
|
|
176
|
+
var styles$O = {"list":"List-module_list__1ax9w"};
|
|
177
|
+
styleInject(css_248z$O);
|
|
178
178
|
|
|
179
179
|
const List = (props) => {
|
|
180
180
|
const { children, className, isFlush } = props;
|
|
181
181
|
const getCssClasses = () => {
|
|
182
182
|
const cssClasses = [];
|
|
183
183
|
if (isFlush) {
|
|
184
|
-
cssClasses.push(styles$
|
|
184
|
+
cssClasses.push(styles$O.flush);
|
|
185
185
|
}
|
|
186
|
-
cssClasses.push(styles$
|
|
186
|
+
cssClasses.push(styles$O.list);
|
|
187
187
|
className && cssClasses.push(className);
|
|
188
188
|
return cssClasses.filter(css => css).join(' ');
|
|
189
189
|
};
|
|
190
190
|
return (React__default['default'].createElement("ul", { className: getCssClasses() }, children));
|
|
191
191
|
};
|
|
192
192
|
|
|
193
|
-
var css_248z$
|
|
194
|
-
var styles$
|
|
195
|
-
styleInject(css_248z$
|
|
193
|
+
var css_248z$N = ".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}\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}\n.ListItem-module_listItem__3hAZb + .ListItem-module_listItem__3hAZb {\n border-top-width: 0;\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_primary__2OJAg {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_accent__2RXHe {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_secondary__3EVjH {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_light__3CJBB {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_dark__SazkE {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
|
|
194
|
+
var styles$N = {"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"};
|
|
195
|
+
styleInject(css_248z$N);
|
|
196
196
|
|
|
197
197
|
const ListItem = (props) => {
|
|
198
198
|
const { id, children, color, active, className, isHoverable, isDisabled, onClick } = props;
|
|
199
199
|
const getCssClasses = () => {
|
|
200
200
|
const cssClasses = [];
|
|
201
201
|
if (active) {
|
|
202
|
-
cssClasses.push(styles$
|
|
202
|
+
cssClasses.push(styles$N['active']);
|
|
203
203
|
}
|
|
204
204
|
if (isDisabled) {
|
|
205
205
|
cssClasses.push(`disabled`);
|
|
206
206
|
}
|
|
207
|
-
color && cssClasses.push(styles$
|
|
208
|
-
cssClasses.push(styles$
|
|
207
|
+
color && cssClasses.push(styles$N[color]);
|
|
208
|
+
cssClasses.push(styles$N.listItem);
|
|
209
209
|
className && cssClasses.push(className);
|
|
210
210
|
return cssClasses.filter(css => css).join(' ');
|
|
211
211
|
};
|
|
@@ -215,32 +215,32 @@ const ListItem = (props) => {
|
|
|
215
215
|
return (React__default['default'].createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
|
|
216
216
|
};
|
|
217
217
|
|
|
218
|
-
var css_248z$
|
|
219
|
-
var styles$
|
|
218
|
+
var css_248z$M = ".ListItemAvatar-module_avatar__1fjSE {\n margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__1fjSE svg, .ListItemAvatar-module_avatar__1fjSE img {\n width: 24px;\n height: 24px;\n}\n.ListItemAvatar-module_avatar__1fjSE img {\n border-radius: 50%;\n}";
|
|
219
|
+
var styles$M = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
|
|
220
|
+
styleInject(css_248z$M);
|
|
221
|
+
|
|
222
|
+
const ListItemAvatar = ({ avatar }) => (React__default['default'].createElement("div", { className: styles$M.avatar }, avatar));
|
|
223
|
+
|
|
224
|
+
var css_248z$L = ".ListItemIcon-module_icon__-nsUy {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__-nsUy svg {\n width: 24px;\n height: 24px;\n}";
|
|
225
|
+
var styles$L = {"icon":"ListItemIcon-module_icon__-nsUy"};
|
|
220
226
|
styleInject(css_248z$L);
|
|
221
227
|
|
|
222
|
-
const
|
|
228
|
+
const ListItemIcon = ({ icon }) => (React__default['default'].createElement("div", { className: styles$L.icon }, icon));
|
|
223
229
|
|
|
224
|
-
var css_248z$K = ".
|
|
225
|
-
var styles$K = {"
|
|
230
|
+
var css_248z$K = ".ListItemAction-module_listItemAction__26S66 {\n display: flex;\n justify-content: center;\n min-width: 40px;\n}\n.ListItemAction-module_listItemAction__26S66 svg {\n width: 20px;\n height: 20px;\n}";
|
|
231
|
+
var styles$K = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
|
|
226
232
|
styleInject(css_248z$K);
|
|
227
233
|
|
|
228
|
-
const
|
|
234
|
+
const ListItemAction = ({ children, onClick }) => (React__default['default'].createElement("div", { className: styles$K.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
229
235
|
|
|
230
|
-
var css_248z$J = ".
|
|
231
|
-
var styles$J = {"
|
|
236
|
+
var css_248z$J = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1;\n}";
|
|
237
|
+
var styles$J = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
232
238
|
styleInject(css_248z$J);
|
|
233
239
|
|
|
234
|
-
const ListItemAction = ({ children, onClick }) => (React__default['default'].createElement("div", { className: styles$J.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
235
|
-
|
|
236
|
-
var css_248z$I = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1;\n}";
|
|
237
|
-
var styles$I = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
238
|
-
styleInject(css_248z$I);
|
|
239
|
-
|
|
240
240
|
const ListItemText = ({ primary, secondary }) => {
|
|
241
241
|
const getCssClasses = () => {
|
|
242
242
|
const cssClasses = [];
|
|
243
|
-
cssClasses.push(styles$
|
|
243
|
+
cssClasses.push(styles$J.listItemText);
|
|
244
244
|
return cssClasses.filter(css => css).join(' ');
|
|
245
245
|
};
|
|
246
246
|
return (React__default['default'].createElement("div", { className: getCssClasses() },
|
|
@@ -251,9 +251,9 @@ const ListItemText = ({ primary, secondary }) => {
|
|
|
251
251
|
const ListItemTextPrimary = ({ children }) => (React__default['default'].createElement("div", { className: "list-item-text-primary" }, children));
|
|
252
252
|
const ListItemTextSecondary = ({ children }) => (React__default['default'].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
253
253
|
|
|
254
|
-
var css_248z$
|
|
255
|
-
var styles$
|
|
256
|
-
styleInject(css_248z$
|
|
254
|
+
var css_248z$I = ".AutoComplete-module_selectContainer__SyqtX {\n position: relative;\n}\n\n.AutoComplete-module_select__2_7JD {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.AutoComplete-module_select__2_7JD:hover {\n cursor: pointer;\n}\n\n.AutoComplete-module_selectMenu__2_ybA {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 38px;\n z-index: 1050;\n max-height: 280px;\n overflow: auto;\n}";
|
|
255
|
+
var styles$I = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
|
|
256
|
+
styleInject(css_248z$I);
|
|
257
257
|
|
|
258
258
|
// preset value
|
|
259
259
|
// enter -> delay? -> show results
|
|
@@ -279,7 +279,7 @@ const AutoComplete = (props) => {
|
|
|
279
279
|
const getCssClass = () => {
|
|
280
280
|
const cssClasses = [];
|
|
281
281
|
className && cssClasses.push(className);
|
|
282
|
-
cssClasses.push(styles$
|
|
282
|
+
cssClasses.push(styles$I.select);
|
|
283
283
|
return cssClasses.filter(r => r).join(' ');
|
|
284
284
|
};
|
|
285
285
|
const show = () => setIsShow(true);
|
|
@@ -304,32 +304,32 @@ const AutoComplete = (props) => {
|
|
|
304
304
|
openOnFocus && show();
|
|
305
305
|
};
|
|
306
306
|
return (React__default['default'].createElement(React__default['default'].Fragment, null,
|
|
307
|
-
React__default['default'].createElement("div", { ref: selectConainter, className: styles$
|
|
307
|
+
React__default['default'].createElement("div", { ref: selectConainter, className: styles$I.selectContainer },
|
|
308
308
|
React__default['default'].createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, value: model }),
|
|
309
309
|
isShow &&
|
|
310
310
|
React__default['default'].createElement(React__default['default'].Fragment, null,
|
|
311
|
-
React__default['default'].createElement("div", { className: styles$
|
|
311
|
+
React__default['default'].createElement("div", { className: styles$I.selectMenu },
|
|
312
312
|
React__default['default'].createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React__default['default'].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option) },
|
|
313
313
|
React__default['default'].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
314
314
|
React__default['default'].createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
|
|
315
315
|
};
|
|
316
316
|
|
|
317
|
-
var css_248z$
|
|
318
|
-
var styles$
|
|
319
|
-
styleInject(css_248z$
|
|
317
|
+
var css_248z$H = ".Badge-module_badgeContainer__1QtTD {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.Badge-module_badge__2Y_LO {\n top: 0;\n right: 0;\n transform: scale(1) translate(50%, -50%);\n transform-origin: 100% 0%;\n height: 20px;\n display: flex;\n padding: 0 6px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n align-items: center;\n font-weight: 500;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n border-radius: 10px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Badge-module_badge__2Y_LO.Badge-module_primary__2mn7_ {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Badge-module_badge__2Y_LO.Badge-module_accent__8Hg8z {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Badge-module_badge__2Y_LO.Badge-module_secondary__1QqDc {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Badge-module_badge__2Y_LO.Badge-module_light__3Z7JO {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Badge-module_badge__2Y_LO.Badge-module_dark__2qWe_ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
|
|
318
|
+
var styles$H = {"badgeContainer":"Badge-module_badgeContainer__1QtTD","badge":"Badge-module_badge__2Y_LO","primary":"Badge-module_primary__2mn7_","accent":"Badge-module_accent__8Hg8z","secondary":"Badge-module_secondary__1QqDc","light":"Badge-module_light__3Z7JO","dark":"Badge-module_dark__2qWe_"};
|
|
319
|
+
styleInject(css_248z$H);
|
|
320
320
|
|
|
321
321
|
const Badge = (props) => {
|
|
322
322
|
const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
323
323
|
const getCssClassesBadgeContainer = () => {
|
|
324
324
|
const cssClasses = [];
|
|
325
|
-
cssClasses.push(styles$
|
|
325
|
+
cssClasses.push(styles$H.badgeContainer);
|
|
326
326
|
className && cssClasses.push(className);
|
|
327
327
|
return cssClasses.filter(css => css).join(' ');
|
|
328
328
|
};
|
|
329
329
|
const getCssClassesBadge = () => {
|
|
330
330
|
const cssClasses = [];
|
|
331
|
-
cssClasses.push(styles$
|
|
332
|
-
cssClasses.push(styles$
|
|
331
|
+
cssClasses.push(styles$H.badge);
|
|
332
|
+
cssClasses.push(styles$H[color]);
|
|
333
333
|
return cssClasses.filter(css => css).join(' ');
|
|
334
334
|
};
|
|
335
335
|
return (React__default['default'].createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -337,43 +337,42 @@ const Badge = (props) => {
|
|
|
337
337
|
React__default['default'].createElement("span", { className: getCssClassesBadge() }, content)));
|
|
338
338
|
};
|
|
339
339
|
|
|
340
|
-
var css_248z$
|
|
341
|
-
var styles$
|
|
342
|
-
styleInject(css_248z$
|
|
340
|
+
var css_248z$G = ".Icon-module_icon__2etAT {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px;\n}\n.Icon-module_icon__2etAT svg {\n width: inherit;\n height: inherit;\n}\n.Icon-module_icon__2etAT.Icon-module_primary__32Mh4 {\n color: var(--primary);\n}\n.Icon-module_icon__2etAT.Icon-module_accent__2U_no {\n color: var(--accent);\n}\n.Icon-module_icon__2etAT.Icon-module_secondary__3cMmx {\n color: var(--secondary);\n}\n.Icon-module_icon__2etAT.Icon-module_light__2SugS {\n color: var(--light);\n}\n.Icon-module_icon__2etAT.Icon-module_dark__GWMzb {\n color: var(--dark);\n}";
|
|
341
|
+
var styles$G = {"icon":"Icon-module_icon__2etAT","primary":"Icon-module_primary__32Mh4","accent":"Icon-module_accent__2U_no","secondary":"Icon-module_secondary__3cMmx","light":"Icon-module_light__2SugS","dark":"Icon-module_dark__GWMzb"};
|
|
342
|
+
styleInject(css_248z$G);
|
|
343
343
|
|
|
344
344
|
const Icon = (props) => {
|
|
345
345
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
346
346
|
const getCssClasses = () => {
|
|
347
347
|
const cssClasses = [];
|
|
348
|
-
cssClasses.push(styles$
|
|
349
|
-
iconColor && cssClasses.push(styles$
|
|
348
|
+
cssClasses.push(styles$G.icon);
|
|
349
|
+
iconColor && cssClasses.push(styles$G[iconColor]);
|
|
350
350
|
className && cssClasses.push(className);
|
|
351
351
|
return cssClasses.filter(css => css).join(' ');
|
|
352
352
|
};
|
|
353
353
|
return (React__default['default'].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
354
354
|
};
|
|
355
355
|
|
|
356
|
-
var css_248z$
|
|
357
|
-
var styles$
|
|
358
|
-
styleInject(css_248z$
|
|
356
|
+
var css_248z$F = ".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 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 border-radius: var(--borderRadius);\n box-shadow: var(--shadow);\n}\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_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}\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}\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}\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}\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\n.Button-module_btnText__32H44 {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnText__32H44.Button-module_primary__2soUg {\n color: var(--primary) !important;\n}\n.Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n}\n.Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n}\n.Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n}\n.Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n text-decoration: none;\n background: var(--light-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_dark__O89wU {\n color: var(--dark) !important;\n}\n.Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important;\n}\n\n.Button-module_btnOutline__2drkn {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n color: var(--primary) !important;\n border-color: var(--primary) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n background: var(--primary-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n background: var(--secondary-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n border-color: var(--accent) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n background: var(--accent-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n background: var(--light-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n color: var(--dark) !important;\n border-color: var(--dark) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n background: var(--dark-highlight) !important;\n}\n\n.Button-module_startIcon__1TN-G {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px;\n}\n.Button-module_startIcon__1TN-G svg {\n width: 18px;\n height: 18px;\n}\n\n.Button-module_endIcon__3uZjE {\n display: inherit;\n margin-left: 8px;\n}\n.Button-module_endIcon__3uZjE svg {\n width: 18px;\n height: 18px;\n}";
|
|
357
|
+
var styles$F = {"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"};
|
|
358
|
+
styleInject(css_248z$F);
|
|
359
359
|
|
|
360
360
|
const ButtonTemplate = (props) => {
|
|
361
361
|
const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon"]);
|
|
362
362
|
const getCssClasses = () => {
|
|
363
363
|
const cssClasses = [];
|
|
364
|
-
cssClasses.push(
|
|
365
|
-
cssClasses.push(styles$E.button);
|
|
364
|
+
cssClasses.push(styles$F.button);
|
|
366
365
|
if (variant !== 'outline' && variant !== 'text') {
|
|
367
|
-
cssClasses.push(styles$
|
|
368
|
-
cssClasses.push(styles$
|
|
366
|
+
cssClasses.push(styles$F.btnContained);
|
|
367
|
+
cssClasses.push(styles$F[color]);
|
|
369
368
|
}
|
|
370
369
|
if (variant === 'outline') {
|
|
371
|
-
cssClasses.push(styles$
|
|
372
|
-
cssClasses.push(styles$
|
|
370
|
+
cssClasses.push(styles$F.btnOutline);
|
|
371
|
+
cssClasses.push(styles$F[color]);
|
|
373
372
|
}
|
|
374
373
|
if (variant === 'text') {
|
|
375
|
-
cssClasses.push(styles$
|
|
376
|
-
cssClasses.push(styles$
|
|
374
|
+
cssClasses.push(styles$F.btnText);
|
|
375
|
+
cssClasses.push(styles$F[color]);
|
|
377
376
|
}
|
|
378
377
|
if (isRounded && variant !== 'text') {
|
|
379
378
|
cssClasses.push(`rounded-pill`);
|
|
@@ -387,21 +386,25 @@ const ButtonTemplate = (props) => {
|
|
|
387
386
|
return (React__default['default'].createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
388
387
|
React__default['default'].createElement("span", { className: "d-flex justify-content-center" },
|
|
389
388
|
startIcon &&
|
|
390
|
-
React__default['default'].createElement(Icon, { className: styles$
|
|
389
|
+
React__default['default'].createElement(Icon, { className: styles$F.startIcon }, startIcon),
|
|
391
390
|
children,
|
|
392
391
|
endIcon &&
|
|
393
|
-
React__default['default'].createElement(Icon, { className: styles$
|
|
392
|
+
React__default['default'].createElement(Icon, { className: styles$F.endIcon }, endIcon))));
|
|
394
393
|
};
|
|
395
394
|
|
|
396
395
|
const Button = (props) => {
|
|
397
396
|
return (React__default['default'].createElement(ButtonTemplate, Object.assign({}, props)));
|
|
398
397
|
};
|
|
399
398
|
|
|
399
|
+
var css_248z$E = ".ButtonGroup-module_buttonGroup__2RS71 button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__2RS71 button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}";
|
|
400
|
+
var styles$E = {"buttonGroup":"ButtonGroup-module_buttonGroup__2RS71"};
|
|
401
|
+
styleInject(css_248z$E);
|
|
402
|
+
|
|
400
403
|
const ButtonGroup = (props) => {
|
|
401
404
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
402
405
|
const getCssClasses = () => {
|
|
403
406
|
const cssClasses = [];
|
|
404
|
-
cssClasses.push(
|
|
407
|
+
cssClasses.push(styles$E.buttonGroup);
|
|
405
408
|
className && cssClasses.push(className);
|
|
406
409
|
return cssClasses.filter(css => css).join(' ');
|
|
407
410
|
};
|