react-asc 18.3.4 → 18.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Menu/Menu.d.ts +2 -0
- package/components/Menu/MenuBody.d.ts +2 -0
- package/components/Modal/GlobalModal.d.ts +3 -1
- package/components/Modal/Modal.d.ts +3 -2
- package/components/Modal/modal.service.d.ts +2 -0
- package/index.es.js +168 -181
- package/index.es.js.map +1 -1
- package/index.js +167 -180
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react-asc.scss +1 -1
package/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useRef, useEffect, Fragment, Component, createRef,
|
|
1
|
+
import React, { useState, useRef, useEffect, Fragment, Component, createRef, cloneElement } from 'react';
|
|
2
2
|
import { createPortal, render, unmountComponentAtNode } from 'react-dom';
|
|
3
3
|
import { createPopper } from '@popperjs/core';
|
|
4
4
|
|
|
@@ -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$Q = ".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}";
|
|
91
|
+
var styles$Q = {"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$Q);
|
|
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$Q.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$Q.contained);
|
|
101
|
+
cssClasses.push(styles$Q[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$Q.outline);
|
|
105
|
+
cssClasses.push(styles$Q[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$Q['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$P = ".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}";
|
|
115
|
+
var styles$P = {"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$P);
|
|
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$P[color]);
|
|
123
|
+
cssClasses.push(styles$P.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$P['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$O = ".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}";
|
|
132
|
+
var styles$O = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
|
|
133
|
+
styleInject(css_248z$O);
|
|
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$O.appbarTitle);
|
|
140
140
|
className && cssClasses.push(className);
|
|
141
141
|
return cssClasses.filter(r => r).join(' ');
|
|
142
142
|
};
|
|
@@ -164,40 +164,40 @@ const Backdrop = (props) => {
|
|
|
164
164
|
return (createPortal(React.createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles() }), target));
|
|
165
165
|
};
|
|
166
166
|
|
|
167
|
-
var css_248z$
|
|
168
|
-
var styles$
|
|
169
|
-
styleInject(css_248z$
|
|
167
|
+
var css_248z$N = ".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$N = {"list":"List-module_list__1ax9w"};
|
|
169
|
+
styleInject(css_248z$N);
|
|
170
170
|
|
|
171
171
|
const List = (props) => {
|
|
172
172
|
const { children, className, isFlush } = props;
|
|
173
173
|
const getCssClasses = () => {
|
|
174
174
|
const cssClasses = [];
|
|
175
175
|
if (isFlush) {
|
|
176
|
-
cssClasses.push(styles$
|
|
176
|
+
cssClasses.push(styles$N.flush);
|
|
177
177
|
}
|
|
178
|
-
cssClasses.push(styles$
|
|
178
|
+
cssClasses.push(styles$N.list);
|
|
179
179
|
className && cssClasses.push(className);
|
|
180
180
|
return cssClasses.filter(css => css).join(' ');
|
|
181
181
|
};
|
|
182
182
|
return (React.createElement("ul", { className: getCssClasses() }, children));
|
|
183
183
|
};
|
|
184
184
|
|
|
185
|
-
var css_248z$
|
|
186
|
-
var styles$
|
|
187
|
-
styleInject(css_248z$
|
|
185
|
+
var css_248z$M = ".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}";
|
|
186
|
+
var styles$M = {"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$M);
|
|
188
188
|
|
|
189
189
|
const ListItem = (props) => {
|
|
190
190
|
const { id, children, color, active, className, isHoverable, isDisabled, onClick } = props;
|
|
191
191
|
const getCssClasses = () => {
|
|
192
192
|
const cssClasses = [];
|
|
193
193
|
if (active) {
|
|
194
|
-
cssClasses.push(styles$
|
|
194
|
+
cssClasses.push(styles$M['active']);
|
|
195
195
|
}
|
|
196
196
|
if (isDisabled) {
|
|
197
197
|
cssClasses.push(`disabled`);
|
|
198
198
|
}
|
|
199
|
-
color && cssClasses.push(styles$
|
|
200
|
-
cssClasses.push(styles$
|
|
199
|
+
color && cssClasses.push(styles$M[color]);
|
|
200
|
+
cssClasses.push(styles$M.listItem);
|
|
201
201
|
className && cssClasses.push(className);
|
|
202
202
|
return cssClasses.filter(css => css).join(' ');
|
|
203
203
|
};
|
|
@@ -207,32 +207,32 @@ const ListItem = (props) => {
|
|
|
207
207
|
return (React.createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
|
|
208
208
|
};
|
|
209
209
|
|
|
210
|
-
var css_248z$
|
|
211
|
-
var styles$
|
|
210
|
+
var css_248z$L = ".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}";
|
|
211
|
+
var styles$L = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
|
|
212
|
+
styleInject(css_248z$L);
|
|
213
|
+
|
|
214
|
+
const ListItemAvatar = ({ avatar }) => (React.createElement("div", { className: styles$L.avatar }, avatar));
|
|
215
|
+
|
|
216
|
+
var css_248z$K = ".ListItemIcon-module_icon__-nsUy {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__-nsUy svg {\n width: 24px;\n height: 24px;\n}";
|
|
217
|
+
var styles$K = {"icon":"ListItemIcon-module_icon__-nsUy"};
|
|
212
218
|
styleInject(css_248z$K);
|
|
213
219
|
|
|
214
|
-
const
|
|
220
|
+
const ListItemIcon = ({ icon }) => (React.createElement("div", { className: styles$K.icon }, icon));
|
|
215
221
|
|
|
216
|
-
var css_248z$J = ".
|
|
217
|
-
var styles$J = {"
|
|
222
|
+
var css_248z$J = ".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}";
|
|
223
|
+
var styles$J = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
|
|
218
224
|
styleInject(css_248z$J);
|
|
219
225
|
|
|
220
|
-
const
|
|
226
|
+
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$J.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
221
227
|
|
|
222
|
-
var css_248z$I = ".
|
|
223
|
-
var styles$I = {"
|
|
228
|
+
var css_248z$I = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1;\n}";
|
|
229
|
+
var styles$I = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
224
230
|
styleInject(css_248z$I);
|
|
225
231
|
|
|
226
|
-
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$I.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
227
|
-
|
|
228
|
-
var css_248z$H = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1; }\n";
|
|
229
|
-
var styles$H = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
230
|
-
styleInject(css_248z$H);
|
|
231
|
-
|
|
232
232
|
const ListItemText = ({ primary, secondary }) => {
|
|
233
233
|
const getCssClasses = () => {
|
|
234
234
|
const cssClasses = [];
|
|
235
|
-
cssClasses.push(styles$
|
|
235
|
+
cssClasses.push(styles$I.listItemText);
|
|
236
236
|
return cssClasses.filter(css => css).join(' ');
|
|
237
237
|
};
|
|
238
238
|
return (React.createElement("div", { className: getCssClasses() },
|
|
@@ -243,9 +243,9 @@ const ListItemText = ({ primary, secondary }) => {
|
|
|
243
243
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
244
244
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
245
245
|
|
|
246
|
-
var css_248z$
|
|
247
|
-
var styles$
|
|
248
|
-
styleInject(css_248z$
|
|
246
|
+
var css_248z$H = ".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}";
|
|
247
|
+
var styles$H = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
|
|
248
|
+
styleInject(css_248z$H);
|
|
249
249
|
|
|
250
250
|
// preset value
|
|
251
251
|
// enter -> delay? -> show results
|
|
@@ -271,7 +271,7 @@ const AutoComplete = (props) => {
|
|
|
271
271
|
const getCssClass = () => {
|
|
272
272
|
const cssClasses = [];
|
|
273
273
|
className && cssClasses.push(className);
|
|
274
|
-
cssClasses.push(styles$
|
|
274
|
+
cssClasses.push(styles$H.select);
|
|
275
275
|
return cssClasses.filter(r => r).join(' ');
|
|
276
276
|
};
|
|
277
277
|
const show = () => setIsShow(true);
|
|
@@ -296,32 +296,32 @@ const AutoComplete = (props) => {
|
|
|
296
296
|
openOnFocus && show();
|
|
297
297
|
};
|
|
298
298
|
return (React.createElement(React.Fragment, null,
|
|
299
|
-
React.createElement("div", { ref: selectConainter, className: styles$
|
|
299
|
+
React.createElement("div", { ref: selectConainter, className: styles$H.selectContainer },
|
|
300
300
|
React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, value: model }),
|
|
301
301
|
isShow &&
|
|
302
302
|
React.createElement(React.Fragment, null,
|
|
303
|
-
React.createElement("div", { className: styles$
|
|
303
|
+
React.createElement("div", { className: styles$H.selectMenu },
|
|
304
304
|
React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option) },
|
|
305
305
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
306
306
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
|
|
307
307
|
};
|
|
308
308
|
|
|
309
|
-
var css_248z$
|
|
310
|
-
var styles$
|
|
311
|
-
styleInject(css_248z$
|
|
309
|
+
var css_248z$G = ".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}";
|
|
310
|
+
var styles$G = {"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_"};
|
|
311
|
+
styleInject(css_248z$G);
|
|
312
312
|
|
|
313
313
|
const Badge = (props) => {
|
|
314
314
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
315
315
|
const getCssClassesBadgeContainer = () => {
|
|
316
316
|
const cssClasses = [];
|
|
317
|
-
cssClasses.push(styles$
|
|
317
|
+
cssClasses.push(styles$G.badgeContainer);
|
|
318
318
|
className && cssClasses.push(className);
|
|
319
319
|
return cssClasses.filter(css => css).join(' ');
|
|
320
320
|
};
|
|
321
321
|
const getCssClassesBadge = () => {
|
|
322
322
|
const cssClasses = [];
|
|
323
|
-
cssClasses.push(styles$
|
|
324
|
-
cssClasses.push(styles$
|
|
323
|
+
cssClasses.push(styles$G.badge);
|
|
324
|
+
cssClasses.push(styles$G[color]);
|
|
325
325
|
return cssClasses.filter(css => css).join(' ');
|
|
326
326
|
};
|
|
327
327
|
return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -329,43 +329,43 @@ const Badge = (props) => {
|
|
|
329
329
|
React.createElement("span", { className: getCssClassesBadge() }, content)));
|
|
330
330
|
};
|
|
331
331
|
|
|
332
|
-
var css_248z$
|
|
333
|
-
var styles$
|
|
334
|
-
styleInject(css_248z$
|
|
332
|
+
var css_248z$F = ".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}";
|
|
333
|
+
var styles$F = {"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"};
|
|
334
|
+
styleInject(css_248z$F);
|
|
335
335
|
|
|
336
336
|
const Icon = (props) => {
|
|
337
337
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
338
338
|
const getCssClasses = () => {
|
|
339
339
|
const cssClasses = [];
|
|
340
|
-
cssClasses.push(styles$
|
|
341
|
-
iconColor && cssClasses.push(styles$
|
|
340
|
+
cssClasses.push(styles$F.icon);
|
|
341
|
+
iconColor && cssClasses.push(styles$F[iconColor]);
|
|
342
342
|
className && cssClasses.push(className);
|
|
343
343
|
return cssClasses.filter(css => css).join(' ');
|
|
344
344
|
};
|
|
345
345
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
346
346
|
};
|
|
347
347
|
|
|
348
|
-
var css_248z$
|
|
349
|
-
var styles$
|
|
350
|
-
styleInject(css_248z$
|
|
348
|
+
var css_248z$E = ".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}";
|
|
349
|
+
var styles$E = {"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"};
|
|
350
|
+
styleInject(css_248z$E);
|
|
351
351
|
|
|
352
352
|
const ButtonTemplate = (props) => {
|
|
353
353
|
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon"]);
|
|
354
354
|
const getCssClasses = () => {
|
|
355
355
|
const cssClasses = [];
|
|
356
356
|
cssClasses.push(`btn`);
|
|
357
|
-
cssClasses.push(styles$
|
|
357
|
+
cssClasses.push(styles$E.button);
|
|
358
358
|
if (variant !== 'outline' && variant !== 'text') {
|
|
359
|
-
cssClasses.push(styles$
|
|
360
|
-
cssClasses.push(styles$
|
|
359
|
+
cssClasses.push(styles$E.btnContained);
|
|
360
|
+
cssClasses.push(styles$E[color]);
|
|
361
361
|
}
|
|
362
362
|
if (variant === 'outline') {
|
|
363
|
-
cssClasses.push(styles$
|
|
364
|
-
cssClasses.push(styles$
|
|
363
|
+
cssClasses.push(styles$E.btnOutline);
|
|
364
|
+
cssClasses.push(styles$E[color]);
|
|
365
365
|
}
|
|
366
366
|
if (variant === 'text') {
|
|
367
|
-
cssClasses.push(styles$
|
|
368
|
-
cssClasses.push(styles$
|
|
367
|
+
cssClasses.push(styles$E.btnText);
|
|
368
|
+
cssClasses.push(styles$E[color]);
|
|
369
369
|
}
|
|
370
370
|
if (isRounded && variant !== 'text') {
|
|
371
371
|
cssClasses.push(`rounded-pill`);
|
|
@@ -379,10 +379,10 @@ const ButtonTemplate = (props) => {
|
|
|
379
379
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
380
380
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
381
381
|
startIcon &&
|
|
382
|
-
React.createElement(Icon, { className: styles$
|
|
382
|
+
React.createElement(Icon, { className: styles$E.startIcon }, startIcon),
|
|
383
383
|
children,
|
|
384
384
|
endIcon &&
|
|
385
|
-
React.createElement(Icon, { className: styles$
|
|
385
|
+
React.createElement(Icon, { className: styles$E.endIcon }, endIcon))));
|
|
386
386
|
};
|
|
387
387
|
|
|
388
388
|
const Button = (props) => {
|
|
@@ -400,15 +400,15 @@ const ButtonGroup = (props) => {
|
|
|
400
400
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
401
401
|
};
|
|
402
402
|
|
|
403
|
-
var css_248z$
|
|
404
|
-
var styles$
|
|
405
|
-
styleInject(css_248z$
|
|
403
|
+
var css_248z$D = ".Breadcrumb-module_breadcrumb__2BHXS {\n display: flex;\n flex-wrap: wrap;\n padding: 0.75rem 1rem;\n margin-bottom: 0;\n list-style: none;\n border-radius: var(--borderRadius);\n}";
|
|
404
|
+
var styles$D = {"breadcrumb":"Breadcrumb-module_breadcrumb__2BHXS"};
|
|
405
|
+
styleInject(css_248z$D);
|
|
406
406
|
|
|
407
407
|
const Breadcrumb = (props) => {
|
|
408
408
|
const { children, className } = props;
|
|
409
409
|
const getCssClasses = () => {
|
|
410
410
|
const cssClasses = [];
|
|
411
|
-
cssClasses.push(styles$
|
|
411
|
+
cssClasses.push(styles$D.breadcrumb);
|
|
412
412
|
className && cssClasses.push(className);
|
|
413
413
|
return cssClasses.filter(css => css).join(' ');
|
|
414
414
|
};
|
|
@@ -418,15 +418,15 @@ const Breadcrumb = (props) => {
|
|
|
418
418
|
|
|
419
419
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
420
420
|
|
|
421
|
-
var css_248z$
|
|
422
|
-
var styles$
|
|
423
|
-
styleInject(css_248z$
|
|
421
|
+
var css_248z$C = ".BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D {\n padding-left: 0.5rem;\n}\n.BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\";\n}\n.BreadcrumbItem-module_breadcrumbItem__1yy-D a:not([href]):not([class]) {\n color: var(--primary);\n}\n.BreadcrumbItem-module_breadcrumbItem__1yy-D:hover {\n cursor: pointer;\n}\n.BreadcrumbItem-module_breadcrumbItem__1yy-D.BreadcrumbItem-module_active__3iVU2:hover {\n cursor: unset;\n}";
|
|
422
|
+
var styles$C = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__1yy-D","active":"BreadcrumbItem-module_active__3iVU2"};
|
|
423
|
+
styleInject(css_248z$C);
|
|
424
424
|
|
|
425
425
|
const BreadcrumbItem = (props) => {
|
|
426
426
|
const { children, className, isActive, onClick } = props;
|
|
427
427
|
const getCssClasses = () => {
|
|
428
428
|
const cssClasses = [];
|
|
429
|
-
cssClasses.push(styles$
|
|
429
|
+
cssClasses.push(styles$C.breadcrumbItem);
|
|
430
430
|
className && cssClasses.push(className);
|
|
431
431
|
isActive && cssClasses.push('active');
|
|
432
432
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -440,106 +440,106 @@ const BreadcrumbItem = (props) => {
|
|
|
440
440
|
wrapper: label => React.createElement("a", null, label) }, children)));
|
|
441
441
|
};
|
|
442
442
|
|
|
443
|
-
var css_248z$
|
|
444
|
-
var styles$
|
|
445
|
-
styleInject(css_248z$
|
|
443
|
+
var css_248z$B = ".Card-module_card__31o3Z {\n background: var(--white);\n border-radius: var(--borderRadius);\n}\n.Card-module_card__31o3Z.Card-module_shadow__2lpYq {\n box-shadow: var(--shadow);\n}";
|
|
444
|
+
var styles$B = {"card":"Card-module_card__31o3Z","shadow":"Card-module_shadow__2lpYq"};
|
|
445
|
+
styleInject(css_248z$B);
|
|
446
446
|
|
|
447
447
|
const Card = (props) => {
|
|
448
448
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
449
449
|
const getCssClasses = () => {
|
|
450
450
|
const cssClasses = [];
|
|
451
|
-
cssClasses.push(styles$
|
|
452
|
-
shadow && cssClasses.push(styles$
|
|
451
|
+
cssClasses.push(styles$B.card);
|
|
452
|
+
shadow && cssClasses.push(styles$B.shadow);
|
|
453
453
|
className && cssClasses.push(className);
|
|
454
454
|
return cssClasses.filter(css => css).join(' ');
|
|
455
455
|
};
|
|
456
456
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
457
457
|
};
|
|
458
458
|
|
|
459
|
-
var css_248z$
|
|
460
|
-
var styles$
|
|
461
|
-
styleInject(css_248z$
|
|
459
|
+
var css_248z$A = ".CardBody-module_cardBody__N8z-L {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
460
|
+
var styles$A = {"cardBody":"CardBody-module_cardBody__N8z-L"};
|
|
461
|
+
styleInject(css_248z$A);
|
|
462
462
|
|
|
463
463
|
const CardBody = (props) => {
|
|
464
464
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
465
465
|
const getCssClasses = () => {
|
|
466
466
|
const cssClasses = [];
|
|
467
|
-
cssClasses.push(styles$
|
|
467
|
+
cssClasses.push(styles$A.cardBody);
|
|
468
468
|
className && cssClasses.push(className);
|
|
469
469
|
return cssClasses.filter(css => css).join(' ');
|
|
470
470
|
};
|
|
471
471
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
472
472
|
};
|
|
473
473
|
|
|
474
|
-
var css_248z$
|
|
475
|
-
var styles$
|
|
476
|
-
styleInject(css_248z$
|
|
474
|
+
var css_248z$z = ".CardFooter-module_cardFooter__3dYKa {\n padding: 0.75rem 1.25rem;\n background-color: rgba(0, 0, 0, 0.03);\n border-top: 1px solid rgba(0, 0, 0, 0.125);\n}\n.CardFooter-module_cardFooter__3dYKa:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);\n}";
|
|
475
|
+
var styles$z = {"cardFooter":"CardFooter-module_cardFooter__3dYKa"};
|
|
476
|
+
styleInject(css_248z$z);
|
|
477
477
|
|
|
478
478
|
const CardFooter = (props) => {
|
|
479
479
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
480
480
|
const getCssClasses = () => {
|
|
481
481
|
const cssClasses = [];
|
|
482
|
-
cssClasses.push(styles$
|
|
482
|
+
cssClasses.push(styles$z.cardFooter);
|
|
483
483
|
className && cssClasses.push(className);
|
|
484
484
|
return cssClasses.filter(css => css).join(' ');
|
|
485
485
|
};
|
|
486
486
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
487
487
|
};
|
|
488
488
|
|
|
489
|
-
var css_248z$
|
|
490
|
-
var styles$
|
|
491
|
-
styleInject(css_248z$
|
|
489
|
+
var css_248z$y = ".CardSubtitle-module_cardSubtitle__2WWHW {\n color: #6c757d !important;\n}";
|
|
490
|
+
var styles$y = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__2WWHW"};
|
|
491
|
+
styleInject(css_248z$y);
|
|
492
492
|
|
|
493
493
|
const CardSubtitle = (props) => {
|
|
494
494
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
495
495
|
const getCssClasses = () => {
|
|
496
496
|
const cssClasses = [];
|
|
497
|
-
cssClasses.push(styles$
|
|
497
|
+
cssClasses.push(styles$y.cardSubtitle);
|
|
498
498
|
className && cssClasses.push(className);
|
|
499
499
|
return cssClasses.filter(css => css).join(' ');
|
|
500
500
|
};
|
|
501
501
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
502
502
|
};
|
|
503
503
|
|
|
504
|
-
var css_248z$
|
|
505
|
-
var styles$
|
|
506
|
-
styleInject(css_248z$
|
|
504
|
+
var css_248z$x = ".CardText-module_cardText__1LWJi:last-child {\n margin-bottom: 0;\n}";
|
|
505
|
+
var styles$x = {"cardText":"CardText-module_cardText__1LWJi"};
|
|
506
|
+
styleInject(css_248z$x);
|
|
507
507
|
|
|
508
508
|
const CardText = (props) => {
|
|
509
509
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
510
510
|
const getCssClasses = () => {
|
|
511
511
|
const cssClasses = [];
|
|
512
|
-
cssClasses.push(styles$
|
|
512
|
+
cssClasses.push(styles$x.cardText);
|
|
513
513
|
className && cssClasses.push(className);
|
|
514
514
|
return cssClasses.filter(css => css).join(' ');
|
|
515
515
|
};
|
|
516
516
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), props.children));
|
|
517
517
|
};
|
|
518
518
|
|
|
519
|
-
var css_248z$
|
|
520
|
-
var styles$
|
|
521
|
-
styleInject(css_248z$
|
|
519
|
+
var css_248z$w = ".CardTitle-module_cardTitle__24Amb {\n margin-bottom: 0;\n font-size: 1.5rem;\n font-weight: 400;\n line-height: 1.334;\n letter-spacing: 0em;\n}";
|
|
520
|
+
var styles$w = {"cardTitle":"CardTitle-module_cardTitle__24Amb"};
|
|
521
|
+
styleInject(css_248z$w);
|
|
522
522
|
|
|
523
523
|
const CardTitle = (props) => {
|
|
524
524
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
525
525
|
const getCssClasses = () => {
|
|
526
526
|
const cssClasses = [];
|
|
527
|
-
cssClasses.push(styles$
|
|
527
|
+
cssClasses.push(styles$w.cardTitle);
|
|
528
528
|
className && cssClasses.push(className);
|
|
529
529
|
return cssClasses.filter(css => css).join(' ');
|
|
530
530
|
};
|
|
531
531
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
532
532
|
};
|
|
533
533
|
|
|
534
|
-
var css_248z$
|
|
535
|
-
var styles$
|
|
536
|
-
styleInject(css_248z$
|
|
534
|
+
var css_248z$v = ".CardImage-module_cardImage__1tZM4 {\n flex-shrink: 0;\n width: 100%;\n border-top-left-radius: calc(0.25rem - 1px);\n border-top-right-radius: calc(0.25rem - 1px);\n}";
|
|
535
|
+
var styles$v = {"cardImage":"CardImage-module_cardImage__1tZM4"};
|
|
536
|
+
styleInject(css_248z$v);
|
|
537
537
|
|
|
538
538
|
const CardImage = (props) => {
|
|
539
539
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
540
540
|
const getCssClasses = () => {
|
|
541
541
|
const cssClasses = [];
|
|
542
|
-
cssClasses.push(styles$
|
|
542
|
+
cssClasses.push(styles$v.cardImage);
|
|
543
543
|
className && cssClasses.push(className);
|
|
544
544
|
return cssClasses.filter(css => css).join(' ');
|
|
545
545
|
};
|
|
@@ -588,11 +588,15 @@ const CircleSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true
|
|
|
588
588
|
const ChevronLeftSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
|
|
589
589
|
React.createElement("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" })));
|
|
590
590
|
|
|
591
|
+
var css_248z$u = ".Typography-module_typography__2bM6E {\n text-overflow: ellipsis;\n overflow: hidden !important;\n}";
|
|
592
|
+
var styles$u = {"typography":"Typography-module_typography__2bM6E"};
|
|
593
|
+
styleInject(css_248z$u);
|
|
594
|
+
|
|
591
595
|
const Wrapper = (props) => {
|
|
592
596
|
const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
|
|
593
597
|
const getCssClasses = () => {
|
|
594
598
|
const cssClasses = [];
|
|
595
|
-
cssClasses.push(
|
|
599
|
+
cssClasses.push(styles$u.typography);
|
|
596
600
|
className && cssClasses.push(className);
|
|
597
601
|
return cssClasses.filter(css => css).join(' ');
|
|
598
602
|
};
|
|
@@ -603,7 +607,7 @@ const Typography = (_a) => {
|
|
|
603
607
|
return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
|
|
604
608
|
};
|
|
605
609
|
|
|
606
|
-
var css_248z$t = ".IconButton-module_iconButton__1xqrL {\n border-radius: 100%;\n padding: 0px;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n min-width: auto;\n box-shadow: none;\n font-weight: 400;\n text-align: center;\n vertical-align: middle;\n -webkit-user-select: none;\n user-select: none;\n background-color: transparent;\n font-size: 1rem;\n line-height: 1.5;\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 border: none
|
|
610
|
+
var css_248z$t = ".IconButton-module_iconButton__1xqrL {\n border-radius: 100%;\n padding: 0px;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n min-width: auto;\n box-shadow: none;\n font-weight: 400;\n text-align: center;\n vertical-align: middle;\n -webkit-user-select: none;\n user-select: none;\n background-color: transparent;\n font-size: 1rem;\n line-height: 1.5;\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 border: none;\n}\n.IconButton-module_iconButton__1xqrL:hover {\n cursor: pointer;\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_shadow__5U4-_ {\n box-shadow: var(--shadow);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_md__1lmDL {\n width: 48px;\n height: 48px;\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_lg__1O2Uy {\n width: 56px;\n height: 56px;\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG {\n padding: 0;\n background: transparent;\n color: inherit;\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_active__2tJut {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_primary__qRw4T:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_primary__qRw4T.IconButton-module_active__2tJut {\n color: var(--primary);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_secondary__1lzNL:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_secondary__1lzNL.IconButton-module_active__2tJut {\n color: var(--secondary);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_accent__exm5t:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_accent__exm5t.IconButton-module_active__2tJut {\n color: var(--accent);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_light__2nWhD:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_light__2nWhD.IconButton-module_active__2tJut {\n color: var(--light);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_dark__1e6bR {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_disabled__3TgpF {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_active__2tJut {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T {\n background-color: var(--primary);\n color: var(--white);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T.IconButton-module_active__2tJut {\n background-color: var(--primary-dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL {\n background-color: var(--secondary);\n color: var(--white);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL.IconButton-module_active__2tJut {\n background-color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t {\n background-color: var(--accent);\n color: var(--white);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t.IconButton-module_active__2tJut {\n background-color: var(--accent-dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD {\n background-color: var(--light);\n color: var(--dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD.IconButton-module_active__2tJut {\n background-color: var(--light-dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR {\n background-color: var(--dark);\n color: var(--white);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR.IconButton-module_active__2tJut {\n background-color: var(--dark-light);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_disabled__3TgpF {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}";
|
|
607
611
|
var styles$t = {"iconButton":"IconButton-module_iconButton__1xqrL","shadow":"IconButton-module_shadow__5U4-_","md":"IconButton-module_md__1lmDL","lg":"IconButton-module_lg__1O2Uy","text":"IconButton-module_text__33RrG","active":"IconButton-module_active__2tJut","primary":"IconButton-module_primary__qRw4T","secondary":"IconButton-module_secondary__1lzNL","accent":"IconButton-module_accent__exm5t","light":"IconButton-module_light__2nWhD","dark":"IconButton-module_dark__1e6bR","disabled":"IconButton-module_disabled__3TgpF","contained":"IconButton-module_contained__gWulJ"};
|
|
608
612
|
styleInject(css_248z$t);
|
|
609
613
|
|
|
@@ -626,7 +630,7 @@ const IconButton = (props) => {
|
|
|
626
630
|
label && React.createElement(Typography, null, label)));
|
|
627
631
|
};
|
|
628
632
|
|
|
629
|
-
var css_248z$s = ".Checkbox-module_checkboxContainer__2oWhu {\n display: flex;\n align-items: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
|
|
633
|
+
var css_248z$s = ".Checkbox-module_checkboxContainer__2oWhu {\n display: flex;\n align-items: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Checkbox-module_checkboxContainer__2oWhu label {\n margin-bottom: 0;\n margin-left: 0;\n}\n.Checkbox-module_checkboxContainer__2oWhu label:hover {\n cursor: pointer;\n}\n\n.Checkbox-module_checkboxLabel__27Y6U.Checkbox-module_disabled__3EXUd {\n color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed;\n}";
|
|
630
634
|
var styles$s = {"checkboxContainer":"Checkbox-module_checkboxContainer__2oWhu","checkboxLabel":"Checkbox-module_checkboxLabel__27Y6U","disabled":"Checkbox-module_disabled__3EXUd"};
|
|
631
635
|
styleInject(css_248z$s);
|
|
632
636
|
|
|
@@ -669,7 +673,7 @@ const Checkbox = (props) => {
|
|
|
669
673
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
670
674
|
};
|
|
671
675
|
|
|
672
|
-
var css_248z$r = ".Chip-module_chip__1cghp {\n display: inline-flex;\n align-items: center;\n padding: 0.5rem;\n text-align: center;\n white-space: nowrap;\n vertical-align: baseline;\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 font-size: 75%;\n font-weight: 700;\n border-radius: 10rem;\n line-height: 1
|
|
676
|
+
var css_248z$r = ".Chip-module_chip__1cghp {\n display: inline-flex;\n align-items: center;\n padding: 0.5rem;\n text-align: center;\n white-space: nowrap;\n vertical-align: baseline;\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 font-size: 75%;\n font-weight: 700;\n border-radius: 10rem;\n line-height: 1;\n}\n.Chip-module_chip__1cghp svg {\n width: 18px;\n height: 18px;\n}\n.Chip-module_chip__1cghp .Chip-module_deleteIcon__34X9c {\n margin-left: 5px;\n}\n.Chip-module_chip__1cghp .Chip-module_deleteIcon__34X9c:hover {\n cursor: pointer;\n}\n.Chip-module_chip__1cghp.Chip-module_primary__198Dq {\n background: var(--primary);\n color: var(--primary-contrast-text);\n}\n.Chip-module_chip__1cghp.Chip-module_secondary__14H0b {\n background: var(--secondary);\n color: var(--secondary-contrast-text);\n}\n.Chip-module_chip__1cghp.Chip-module_accent__2LkWr {\n background: var(--accent);\n color: var(--accent-contrast-text);\n}\n.Chip-module_chip__1cghp.Chip-module_light__2zVYs {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Chip-module_chip__1cghp.Chip-module_dark__2Bg-S {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover {\n cursor: pointer;\n}\n.Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_primary__198Dq {\n background: var(--primary-dark);\n}\n.Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_secondary__14H0b {\n background: var(--secondary-dark);\n}\n.Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_accent__2LkWr {\n background: var(--accent-dark);\n}\n.Chip-module_chip__1cghp.Chip-module_shadow__3TYny {\n box-shadow: var(--shadow);\n}";
|
|
673
677
|
var styles$r = {"chip":"Chip-module_chip__1cghp","deleteIcon":"Chip-module_deleteIcon__34X9c","primary":"Chip-module_primary__198Dq","secondary":"Chip-module_secondary__14H0b","accent":"Chip-module_accent__2LkWr","light":"Chip-module_light__2zVYs","dark":"Chip-module_dark__2Bg-S","clickable":"Chip-module_clickable__2Y4x7","shadow":"Chip-module_shadow__3TYny"};
|
|
674
678
|
styleInject(css_248z$r);
|
|
675
679
|
|
|
@@ -726,7 +730,7 @@ const FileInput = (props) => {
|
|
|
726
730
|
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))));
|
|
727
731
|
};
|
|
728
732
|
|
|
729
|
-
var css_248z$q = ".Select-module_selectContainer__2oizY {\n position: relative
|
|
733
|
+
var css_248z$q = ".Select-module_selectContainer__2oizY {\n position: relative;\n}\n\n.Select-module_select__MSqgU {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.Select-module_select__MSqgU:hover {\n cursor: pointer;\n}\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}";
|
|
730
734
|
var styles$q = {"selectContainer":"Select-module_selectContainer__2oizY","select":"Select-module_select__MSqgU","selectMenu":"Select-module_selectMenu__2vhJt"};
|
|
731
735
|
styleInject(css_248z$q);
|
|
732
736
|
|
|
@@ -876,7 +880,7 @@ const Select = (props) => {
|
|
|
876
880
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body))));
|
|
877
881
|
};
|
|
878
882
|
|
|
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:
|
|
883
|
+
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: var(--borderRadius);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n resize: vertical;\n}\ntextarea:focus {\n outline: none !important;\n border-color: var(--primary);\n}";
|
|
880
884
|
var styles$p = {};
|
|
881
885
|
styleInject(css_248z$p);
|
|
882
886
|
|
|
@@ -1240,7 +1244,7 @@ const DateSelect = (props) => {
|
|
|
1240
1244
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1241
1245
|
// };
|
|
1242
1246
|
|
|
1243
|
-
var css_248z$o = ".Drawer-module_drawer__36R2P {\n height: 100%;\n z-index: 1101;\n bottom: 0;\n position: fixed;\n background: white;\n min-width: 280px;\n overflow-y: auto
|
|
1247
|
+
var css_248z$o = ".Drawer-module_drawer__36R2P {\n height: 100%;\n z-index: 1101;\n bottom: 0;\n position: fixed;\n background: white;\n min-width: 280px;\n overflow-y: auto;\n}\n.Drawer-module_drawer__36R2P.Drawer-module_permanent__AW5Df {\n position: inherit;\n z-index: 0;\n}\n.Drawer-module_drawer__36R2P.Drawer-module_left__1KKcY {\n order: 0;\n}\n.Drawer-module_drawer__36R2P.Drawer-module_right__2gESb {\n order: 2;\n}\n\n.Drawer-module_drawerOpen__euFdW {\n overflow: hidden;\n}";
|
|
1244
1248
|
var styles$o = {"drawer":"Drawer-module_drawer__36R2P","permanent":"Drawer-module_permanent__AW5Df","left":"Drawer-module_left__1KKcY","right":"Drawer-module_right__2gESb","drawerOpen":"Drawer-module_drawerOpen__euFdW"};
|
|
1245
1249
|
styleInject(css_248z$o);
|
|
1246
1250
|
|
|
@@ -1279,19 +1283,13 @@ const DrawerContent = (props) => {
|
|
|
1279
1283
|
return (React.createElement("div", { className: getCssClasses(), style: getStyles() }, children));
|
|
1280
1284
|
};
|
|
1281
1285
|
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
setIsShow: () => { }
|
|
1285
|
-
});
|
|
1286
|
-
|
|
1287
|
-
var css_248z$n = ".MenuBody-module_menuBody__3cPsp {\n z-index: 1111;\n margin: 0;\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 10rem;\n padding: 0.5rem 0;\n font-size: 1rem;\n color: #212529;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid rgba(0, 0, 0, 0.15);\n border-radius: 0.25rem; }\n";
|
|
1288
|
-
var styles$n = {"menuBody":"MenuBody-module_menuBody__3cPsp"};
|
|
1286
|
+
var css_248z$n = ".MenuBody-module_menuBody__3cPsp {\n z-index: 1111;\n margin: 0;\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 10rem;\n padding: 8px 0px;\n font-size: 1rem;\n color: #212529;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n border-radius: var(--borderRadius);\n}\n.MenuBody-module_menuBody__3cPsp.MenuBody-module_shadow__AF_9C {\n box-shadow: var(--shadow);\n}";
|
|
1287
|
+
var styles$n = {"menuBody":"MenuBody-module_menuBody__3cPsp","shadow":"MenuBody-module_shadow__AF_9C"};
|
|
1289
1288
|
styleInject(css_248z$n);
|
|
1290
1289
|
|
|
1291
1290
|
const MenuBody = (props) => {
|
|
1292
|
-
const { parentRef, children, className, menuPosition = 'left' } = props;
|
|
1291
|
+
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
1293
1292
|
const menuBodyRef = useRef(null);
|
|
1294
|
-
const { setIsShow } = useContext(MenuContext);
|
|
1295
1293
|
useEffect(() => {
|
|
1296
1294
|
if (menuBodyRef) {
|
|
1297
1295
|
createPopper(parentRef.current, menuBodyRef.current, {
|
|
@@ -1318,30 +1316,24 @@ const MenuBody = (props) => {
|
|
|
1318
1316
|
const getCssClasses = () => {
|
|
1319
1317
|
const cssClasses = [];
|
|
1320
1318
|
cssClasses.push(styles$n.menuBody);
|
|
1319
|
+
shadow && cssClasses.push(styles$n.shadow);
|
|
1321
1320
|
className && cssClasses.push(className);
|
|
1322
1321
|
return cssClasses.filter(css => css).join(' ');
|
|
1323
1322
|
};
|
|
1324
|
-
const
|
|
1325
|
-
|
|
1323
|
+
const handleClickBackdrop = () => {
|
|
1324
|
+
onClickBackdrop && onClickBackdrop();
|
|
1326
1325
|
};
|
|
1327
1326
|
return (createPortal(React.createElement(React.Fragment, null,
|
|
1328
|
-
React.createElement("div", { ref: menuBodyRef, className: getCssClasses() }, children
|
|
1329
|
-
|
|
1330
|
-
onClick: (e) => {
|
|
1331
|
-
child.props.onClick && child.props.onClick(e);
|
|
1332
|
-
child.props.type !== 'header' && handleClickItem();
|
|
1333
|
-
}
|
|
1334
|
-
})))),
|
|
1335
|
-
React.createElement(Backdrop, { isTransparent: true, onClick: () => setIsShow(false) })), document.body));
|
|
1327
|
+
React.createElement("div", { ref: menuBodyRef, className: getCssClasses() }, children),
|
|
1328
|
+
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1336
1329
|
};
|
|
1337
1330
|
|
|
1338
|
-
var css_248z$m = ".Menu-module_menu__23BYG {\n display: flex
|
|
1331
|
+
var css_248z$m = ".Menu-module_menu__23BYG {\n display: flex;\n}";
|
|
1339
1332
|
var styles$m = {"menu":"Menu-module_menu__23BYG"};
|
|
1340
1333
|
styleInject(css_248z$m);
|
|
1341
1334
|
|
|
1342
1335
|
const Menu = (props) => {
|
|
1343
|
-
const { toggle, children, className, menuPosition, onToggleClick } = props, rest = __rest(props, ["toggle", "children", "className", "menuPosition", "onToggleClick"]);
|
|
1344
|
-
const [isShow, setIsShow] = useState(false);
|
|
1336
|
+
const { toggle, children, className, open, menuPosition, onClickBackdrop, onToggleClick } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop", "onToggleClick"]);
|
|
1345
1337
|
const menuContainer = useRef(null);
|
|
1346
1338
|
const toggleContainerRef = useRef(null);
|
|
1347
1339
|
const getCssClasses = () => {
|
|
@@ -1350,23 +1342,16 @@ const Menu = (props) => {
|
|
|
1350
1342
|
className && cssClasses.push(className);
|
|
1351
1343
|
return cssClasses.filter(css => css).join(' ');
|
|
1352
1344
|
};
|
|
1353
|
-
const
|
|
1354
|
-
|
|
1355
|
-
setIsShow: setIsShow
|
|
1356
|
-
};
|
|
1357
|
-
const handleClickToggle = (e) => {
|
|
1358
|
-
e.stopPropagation();
|
|
1359
|
-
setIsShow(!isShow);
|
|
1360
|
-
onToggleClick && onToggleClick(e);
|
|
1345
|
+
const handleClickBackdrop = () => {
|
|
1346
|
+
onClickBackdrop && onClickBackdrop();
|
|
1361
1347
|
};
|
|
1362
|
-
return (React.createElement(
|
|
1363
|
-
React.createElement("div",
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition }, children))));
|
|
1348
|
+
return (React.createElement("div", Object.assign({ ref: menuContainer, className: getCssClasses() }, rest),
|
|
1349
|
+
React.createElement("div", { ref: toggleContainerRef }, toggle),
|
|
1350
|
+
open &&
|
|
1351
|
+
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1367
1352
|
};
|
|
1368
1353
|
|
|
1369
|
-
var css_248z$l = ".MenuItem-module_menuItem__kvauR {\n display: flex;\n width: 100%;\n padding: 0.25rem 1.5rem;\n clear: both;\n font-weight: 400;\n color: #212529;\n text-align: inherit;\n text-decoration: none;\n white-space: nowrap;\n background-color: transparent;\n border: 0
|
|
1354
|
+
var css_248z$l = ".MenuItem-module_menuItem__kvauR {\n display: flex;\n width: 100%;\n padding: 0.25rem 1.5rem;\n clear: both;\n font-weight: 400;\n color: #212529;\n text-align: inherit;\n text-decoration: none;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n}\n.MenuItem-module_menuItem__kvauR.MenuItem-module_menuItemHeader__mp7wc {\n margin-bottom: 0;\n font-size: 0.875rem;\n}\n.MenuItem-module_menuItem__kvauR:hover {\n cursor: pointer;\n color: #1e2125;\n background-color: rgba(0, 0, 0, 0.04);\n}";
|
|
1370
1355
|
var styles$l = {"menuItem":"MenuItem-module_menuItem__kvauR","menuItemHeader":"MenuItem-module_menuItemHeader__mp7wc"};
|
|
1371
1356
|
styleInject(css_248z$l);
|
|
1372
1357
|
|
|
@@ -1394,13 +1379,13 @@ const MenuToggle = ({ children }) => {
|
|
|
1394
1379
|
return (React.createElement(Fragment, null, children));
|
|
1395
1380
|
};
|
|
1396
1381
|
|
|
1397
|
-
var css_248z$k = ".MenuDivider-module_menuItemDivider__JnLsC {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef
|
|
1382
|
+
var css_248z$k = ".MenuDivider-module_menuItemDivider__JnLsC {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef;\n}";
|
|
1398
1383
|
var styles$k = {"menuItemDivider":"MenuDivider-module_menuItemDivider__JnLsC"};
|
|
1399
1384
|
styleInject(css_248z$k);
|
|
1400
1385
|
|
|
1401
1386
|
const MenuDivider = () => React.createElement("div", { className: styles$k.menuItemDivider });
|
|
1402
1387
|
|
|
1403
|
-
var css_248z$j = ".ExpansionPanelContent-module_expansionPanelContent__3H62L {\n padding: 8px 16px 16px
|
|
1388
|
+
var css_248z$j = ".ExpansionPanelContent-module_expansionPanelContent__3H62L {\n padding: 8px 16px 16px;\n}";
|
|
1404
1389
|
var styles$j = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__3H62L"};
|
|
1405
1390
|
styleInject(css_248z$j);
|
|
1406
1391
|
|
|
@@ -1408,7 +1393,7 @@ const ExpansionPanelContent = ({ children }) => {
|
|
|
1408
1393
|
return (React.createElement("div", { className: styles$j.expansionPanelContent }, children));
|
|
1409
1394
|
};
|
|
1410
1395
|
|
|
1411
|
-
var css_248z$i = ".ExpansionPanelHeader-module_expansionPanelHeader__3hrsI {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px
|
|
1396
|
+
var css_248z$i = ".ExpansionPanelHeader-module_expansionPanelHeader__3hrsI {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__3hrsI:hover {\n cursor: pointer;\n background-color: var(--highlight);\n}";
|
|
1412
1397
|
var styles$i = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__3hrsI"};
|
|
1413
1398
|
styleInject(css_248z$i);
|
|
1414
1399
|
|
|
@@ -1424,7 +1409,7 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1424
1409
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1425
1410
|
};
|
|
1426
1411
|
|
|
1427
|
-
var css_248z$h = ".ExpansionPanel-module_expansionPanel__3krcE {\n background-color: var(--white);\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\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
|
|
1412
|
+
var css_248z$h = ".ExpansionPanel-module_expansionPanel__3krcE {\n background-color: var(--white);\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\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}\n.ExpansionPanel-module_expansionPanel__3krcE:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__3krcE:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt {\n margin: 16px 0;\n}\n.ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt:first-child {\n margin-top: 0;\n}\n.ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt:last-child {\n margin-bottom: 0;\n}";
|
|
1428
1413
|
var styles$h = {"expansionPanel":"ExpansionPanel-module_expansionPanel__3krcE","isExpanded":"ExpansionPanel-module_isExpanded__1m4Dt"};
|
|
1429
1414
|
styleInject(css_248z$h);
|
|
1430
1415
|
|
|
@@ -1452,7 +1437,7 @@ const ExpansionPanel = (props) => {
|
|
|
1452
1437
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1453
1438
|
};
|
|
1454
1439
|
|
|
1455
|
-
var css_248z$g = ".FloatingActionButton-module_fab__3GwiH {\n box-shadow: var(--shadow)
|
|
1440
|
+
var css_248z$g = ".FloatingActionButton-module_fab__3GwiH {\n box-shadow: var(--shadow);\n}\n.FloatingActionButton-module_fab__3GwiH.FloatingActionButton-module_fixed__17qrv {\n position: fixed;\n bottom: 16px;\n right: 16px;\n z-index: 1000;\n}";
|
|
1456
1441
|
var styles$g = {"fab":"FloatingActionButton-module_fab__3GwiH","fixed":"FloatingActionButton-module_fixed__17qrv"};
|
|
1457
1442
|
styleInject(css_248z$g);
|
|
1458
1443
|
|
|
@@ -1523,7 +1508,7 @@ const Link = (props) => {
|
|
|
1523
1508
|
return (React.createElement("a", { className: getCssClasses(), href: url || '#', target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children));
|
|
1524
1509
|
};
|
|
1525
1510
|
|
|
1526
|
-
var css_248z$f = ".LoadingIndicator-module_loadingIndicatorContainer__3e1-3 {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100
|
|
1511
|
+
var css_248z$f = ".LoadingIndicator-module_loadingIndicatorContainer__3e1-3 {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n\n.LoadingIndicator-module_loadingIndicator__tvp5i {\n animation-name: LoadingIndicator-module_spinAnimation__PKRNn;\n animation-duration: 5000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n width: 24px;\n height: 24px;\n}\n\n@keyframes LoadingIndicator-module_spinAnimation__PKRNn {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}";
|
|
1527
1512
|
var styles$f = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__3e1-3","loadingIndicator":"LoadingIndicator-module_loadingIndicator__tvp5i","spinAnimation":"LoadingIndicator-module_spinAnimation__PKRNn"};
|
|
1528
1513
|
styleInject(css_248z$f);
|
|
1529
1514
|
|
|
@@ -1570,7 +1555,7 @@ class LoadingIndicatorService {
|
|
|
1570
1555
|
}
|
|
1571
1556
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1572
1557
|
|
|
1573
|
-
var css_248z$e = ".ModalHeader-module_modalHeader__o5HzE {\n border-bottom: none;\n align-items: center
|
|
1558
|
+
var css_248z$e = ".ModalHeader-module_modalHeader__o5HzE {\n border-bottom: none;\n align-items: center;\n}";
|
|
1574
1559
|
var styles$e = {"modalHeader":"ModalHeader-module_modalHeader__o5HzE"};
|
|
1575
1560
|
styleInject(css_248z$e);
|
|
1576
1561
|
|
|
@@ -1587,23 +1572,24 @@ const ModalHeader = (props) => {
|
|
|
1587
1572
|
|
|
1588
1573
|
const ModalBody = ({ children }) => (React.createElement("div", { className: "modal-body" }, children));
|
|
1589
1574
|
|
|
1590
|
-
var css_248z$d = ".Modal-module_modal__1NdMJ {\n z-index: 1111 !important
|
|
1591
|
-
var styles$d = {"modal":"Modal-module_modal__1NdMJ","fullscreen":"Modal-module_fullscreen__3R-sM","modalContent":"Modal-module_modalContent__E2kaP","modal-dialog":"Modal-module_modal-dialog__IdJ1c"};
|
|
1575
|
+
var css_248z$d = ".Modal-module_modal__1NdMJ {\n z-index: 1111 !important;\n border-radius: var(--borderRadius);\n}\n.Modal-module_modal__1NdMJ.Modal-module_fullscreen__3R-sM {\n width: 100% !important;\n height: 100% !important;\n max-height: 100% !important;\n margin: 0;\n padding: 0;\n}\n.Modal-module_modal__1NdMJ.Modal-module_fullscreen__3R-sM .Modal-module_modalContent__E2kaP {\n height: auto;\n min-height: 100%;\n max-height: 100%;\n border-radius: 0;\n overflow: auto;\n}\n@media (min-width: 320px) {\n .Modal-module_modal__1NdMJ.Modal-module_fullscreen__3R-sM {\n max-width: 100% !important;\n }\n}\n.Modal-module_modal__1NdMJ .Modal-module_sm__3UfYB {\n max-width: 300px;\n}\n.Modal-module_modal__1NdMJ .Modal-module_md__2uX1a {\n max-width: 500px;\n}\n.Modal-module_modal__1NdMJ .Modal-module_lg__3ux_V {\n max-width: 1140px;\n}\n@media (min-width: 576px) {\n .Modal-module_modal__1NdMJ .Modal-module_modal-dialog__IdJ1c {\n max-width: 600px;\n }\n}";
|
|
1576
|
+
var styles$d = {"modal":"Modal-module_modal__1NdMJ","fullscreen":"Modal-module_fullscreen__3R-sM","modalContent":"Modal-module_modalContent__E2kaP","sm":"Modal-module_sm__3UfYB","md":"Modal-module_md__2uX1a","lg":"Modal-module_lg__3ux_V","modal-dialog":"Modal-module_modal-dialog__IdJ1c"};
|
|
1592
1577
|
styleInject(css_248z$d);
|
|
1593
1578
|
|
|
1594
|
-
var css_248z$c = ".ModalFooter-module_modalFooter__2Et4e {\n border-top: none
|
|
1579
|
+
var css_248z$c = ".ModalFooter-module_modalFooter__2Et4e {\n border-top: none;\n}";
|
|
1595
1580
|
var styles$c = {"modalFooter":"ModalFooter-module_modalFooter__2Et4e"};
|
|
1596
1581
|
styleInject(css_248z$c);
|
|
1597
1582
|
|
|
1598
1583
|
const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$c.modalFooter }, children));
|
|
1599
1584
|
|
|
1600
1585
|
const Modal = (props) => {
|
|
1601
|
-
const { className, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1586
|
+
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1602
1587
|
const getCssClass = () => {
|
|
1603
1588
|
const cssClasses = [];
|
|
1604
1589
|
cssClasses.push('modal-dialog modal-dialog-centered');
|
|
1605
1590
|
cssClasses.push(styles$d.modal);
|
|
1606
1591
|
!!fullScreen && cssClasses.push(styles$d['fullscreen']);
|
|
1592
|
+
size && cssClasses.push(styles$d[size]);
|
|
1607
1593
|
className && cssClasses.push(className);
|
|
1608
1594
|
return cssClasses.filter(r => r).join(' ');
|
|
1609
1595
|
};
|
|
@@ -1645,7 +1631,7 @@ var MODALBUTTONTYPE;
|
|
|
1645
1631
|
const GlobalModal = ({ title, description, formControls, onOk, onCancel, isDismissable = false, buttons = [
|
|
1646
1632
|
{ label: 'Cancel', type: MODALBUTTONTYPE.CANCEL, color: COLOR.secondary, variant: VARIANT.text, focus: true },
|
|
1647
1633
|
{ label: 'Ok', type: MODALBUTTONTYPE.OK, variant: VARIANT.contained },
|
|
1648
|
-
], fullScreen = false }) => {
|
|
1634
|
+
], size = SIZE.md, fullScreen = false }) => {
|
|
1649
1635
|
// workaround for getDerivedStateFromProps
|
|
1650
1636
|
const [myControls, setMyControls] = useState(null);
|
|
1651
1637
|
useEffect(() => {
|
|
@@ -1683,7 +1669,7 @@ const GlobalModal = ({ title, description, formControls, onOk, onCancel, isDismi
|
|
|
1683
1669
|
}
|
|
1684
1670
|
button.handler && button.handler();
|
|
1685
1671
|
};
|
|
1686
|
-
return (React.createElement(Modal, { fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, isDismissable: isDismissable, footer: React.createElement(Fragment, null, buttons.map((button, index) => (React.createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, onClick: () => handleClickButton(button) }, button.label)))) },
|
|
1672
|
+
return (React.createElement(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, isDismissable: isDismissable, footer: React.createElement(Fragment, null, buttons.map((button, index) => (React.createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, onClick: () => handleClickButton(button) }, button.label)))) },
|
|
1687
1673
|
description && React.createElement("div", null, description),
|
|
1688
1674
|
modalType === MODALTYPE.FORM &&
|
|
1689
1675
|
React.createElement(Fragment, null,
|
|
@@ -1704,7 +1690,7 @@ class ModalService {
|
|
|
1704
1690
|
reject();
|
|
1705
1691
|
this.hide();
|
|
1706
1692
|
};
|
|
1707
|
-
render(React.createElement(GlobalModal, { fullScreen: options && options.fullScreen, title: title, description: description, formControls: options && options.formControls, onCancel: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }), this.container);
|
|
1693
|
+
render(React.createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, description: description, formControls: options && options.formControls, onCancel: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }), this.container);
|
|
1708
1694
|
}
|
|
1709
1695
|
});
|
|
1710
1696
|
}
|
|
@@ -1819,7 +1805,7 @@ const Sidebar = (props) => {
|
|
|
1819
1805
|
!item.isCollapsed && item.items && item.items.length > 0 && (React.createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React.createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
|
|
1820
1806
|
};
|
|
1821
1807
|
|
|
1822
|
-
var css_248z$b = ".Snackbar-module_snackbar__3AF3D {\n display: flex;\n align-items: center;\n min-width: 288px;\n padding: 6px 16px;\n transform-origin: center;\n
|
|
1808
|
+
var css_248z$b = ".Snackbar-module_snackbar__3AF3D {\n display: flex;\n align-items: center;\n min-width: 288px;\n padding: 6px 16px;\n transform-origin: center;\n min-height: 52px;\n animation: Snackbar-module_bounceIn__11jAv 0.4s ease;\n z-index: 1001;\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n bottom: 2%;\n border-radius: var(--borderRadius);\n}\n.Snackbar-module_snackbar__3AF3D.Snackbar-module_primary__3Pt9m {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Snackbar-module_snackbar__3AF3D.Snackbar-module_accent__1iCXk {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Snackbar-module_snackbar__3AF3D.Snackbar-module_secondary__3ke12 {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Snackbar-module_snackbar__3AF3D.Snackbar-module_light__3Pi0Y {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Snackbar-module_snackbar__3AF3D.Snackbar-module_dark__3TwXn {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Snackbar-module_text__2gmW- {\n width: 100%;\n padding: 8px 0;\n}\n\n.Snackbar-module_action__1BXqS {\n margin-left: auto;\n}\n.Snackbar-module_action__1BXqS:hover {\n cursor: pointer;\n}\n\n@keyframes Snackbar-module_bounceIn__11jAv {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 0.9;\n }\n 80% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}";
|
|
1823
1809
|
var styles$b = {"snackbar":"Snackbar-module_snackbar__3AF3D","bounceIn":"Snackbar-module_bounceIn__11jAv","primary":"Snackbar-module_primary__3Pt9m","accent":"Snackbar-module_accent__1iCXk","secondary":"Snackbar-module_secondary__3ke12","light":"Snackbar-module_light__3Pi0Y","dark":"Snackbar-module_dark__3TwXn","text":"Snackbar-module_text__2gmW-","action":"Snackbar-module_action__1BXqS"};
|
|
1824
1810
|
styleInject(css_248z$b);
|
|
1825
1811
|
|
|
@@ -1875,7 +1861,7 @@ class SnackbarService {
|
|
|
1875
1861
|
}
|
|
1876
1862
|
const snackbarService = new SnackbarService();
|
|
1877
1863
|
|
|
1878
|
-
var css_248z$a = ".SpeedDialActions-module_speedDialActions__zLEps {\n margin-bottom: -32px;\n flex-direction: column-reverse;\n padding-bottom: 48px;\n display: flex;\n pointer-events: auto
|
|
1864
|
+
var css_248z$a = ".SpeedDialActions-module_speedDialActions__zLEps {\n margin-bottom: -32px;\n flex-direction: column-reverse;\n padding-bottom: 48px;\n display: flex;\n pointer-events: auto;\n}";
|
|
1879
1865
|
var styles$a = {"speedDialActions":"SpeedDialActions-module_speedDialActions__zLEps"};
|
|
1880
1866
|
styleInject(css_248z$a);
|
|
1881
1867
|
|
|
@@ -1889,7 +1875,7 @@ const SpeedDialActions = (props) => {
|
|
|
1889
1875
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
1890
1876
|
};
|
|
1891
1877
|
|
|
1892
|
-
var css_248z$9 = ".SpeedDial-module_speedDial__CQ5x2 {\n position: absolute;\n flex-direction: column-reverse;\n display: flex;\n z-index: 1050;\n align-items: center;\n right: 16px;\n bottom: 16px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
|
|
1878
|
+
var css_248z$9 = ".SpeedDial-module_speedDial__CQ5x2 {\n position: absolute;\n flex-direction: column-reverse;\n display: flex;\n z-index: 1050;\n align-items: center;\n right: 16px;\n bottom: 16px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
|
|
1893
1879
|
var styles$9 = {"speedDial":"SpeedDial-module_speedDial__CQ5x2"};
|
|
1894
1880
|
styleInject(css_248z$9);
|
|
1895
1881
|
|
|
@@ -1914,7 +1900,7 @@ const SpeedDial = (props) => {
|
|
|
1914
1900
|
React.createElement(SpeedDialActions, null, children)));
|
|
1915
1901
|
};
|
|
1916
1902
|
|
|
1917
|
-
var css_248z$8 = ".SpeedDialAction-module_speedDialAction__qmExs + .SpeedDialAction-module_speedDialAction__qmExs {\n margin-bottom: 10px
|
|
1903
|
+
var css_248z$8 = ".SpeedDialAction-module_speedDialAction__qmExs + .SpeedDialAction-module_speedDialAction__qmExs {\n margin-bottom: 10px;\n}";
|
|
1918
1904
|
var styles$8 = {"speedDialAction":"SpeedDialAction-module_speedDialAction__qmExs"};
|
|
1919
1905
|
styleInject(css_248z$8);
|
|
1920
1906
|
|
|
@@ -1939,7 +1925,7 @@ const SpeedDialIcon = (props) => {
|
|
|
1939
1925
|
return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
1940
1926
|
};
|
|
1941
1927
|
|
|
1942
|
-
var css_248z$7 = ".StepperActions-module_stepperActions__2r5ZT {\n display: flex
|
|
1928
|
+
var css_248z$7 = ".StepperActions-module_stepperActions__2r5ZT {\n display: flex;\n}";
|
|
1943
1929
|
var styles$7 = {"stepperActions":"StepperActions-module_stepperActions__2r5ZT"};
|
|
1944
1930
|
styleInject(css_248z$7);
|
|
1945
1931
|
|
|
@@ -1964,7 +1950,7 @@ const StepPanel = (props) => {
|
|
|
1964
1950
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
1965
1951
|
};
|
|
1966
1952
|
|
|
1967
|
-
var css_248z$6 = ".StepConnector-module_stepConnector__2m7Xp {\n flex: 1 1 auto;\n flex-shrink: 0;\n min-width: 20px
|
|
1953
|
+
var css_248z$6 = ".StepConnector-module_stepConnector__2m7Xp {\n flex: 1 1 auto;\n flex-shrink: 0;\n min-width: 20px;\n}\n\n.StepConnector-module_stepConnectorLine__jSqG4 {\n display: block;\n border-color: var(--secondary);\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.StepConnector-module_stepConnectorLine__jSqG4.StepConnector-module_isActive__3Yj6N {\n border-color: var(--primary);\n}\n\n.StepConnector-module_stepConnectorLineHorizontal__3R2R8 {\n border-top-style: solid;\n border-top-width: 1px;\n}";
|
|
1968
1954
|
var styles$6 = {"stepConnector":"StepConnector-module_stepConnector__2m7Xp","stepConnectorLine":"StepConnector-module_stepConnectorLine__jSqG4","isActive":"StepConnector-module_isActive__3Yj6N","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__3R2R8"};
|
|
1969
1955
|
styleInject(css_248z$6);
|
|
1970
1956
|
|
|
@@ -1986,7 +1972,7 @@ const StepConnector = (props) => {
|
|
|
1986
1972
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
1987
1973
|
};
|
|
1988
1974
|
|
|
1989
|
-
var css_248z$5 = ".Stepper-module_stepper__1TOxM {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin-bottom: 10px
|
|
1975
|
+
var css_248z$5 = ".Stepper-module_stepper__1TOxM {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin-bottom: 10px;\n}\n.Stepper-module_stepper__1TOxM.Stepper-module_isHorizontal__3rFHH {\n overflow-x: auto;\n}";
|
|
1990
1976
|
var styles$5 = {"stepper":"Stepper-module_stepper__1TOxM","isHorizontal":"Stepper-module_isHorizontal__3rFHH"};
|
|
1991
1977
|
styleInject(css_248z$5);
|
|
1992
1978
|
|
|
@@ -2137,7 +2123,7 @@ const useConstructor = (callBack = () => { }) => {
|
|
|
2137
2123
|
setHasBeenCalled(true);
|
|
2138
2124
|
};
|
|
2139
2125
|
|
|
2140
|
-
var css_248z$4 = ".Step-module_stepWrapper__1se3l {\n display: flex;\n align-items: center;\n padding-left: 8px;\n padding-right: 8px;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
|
|
2126
|
+
var css_248z$4 = ".Step-module_stepWrapper__1se3l {\n display: flex;\n align-items: center;\n padding-left: 8px;\n padding-right: 8px;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_stepWrapper__1se3l.Step-module_hasLabel__3cdCU:not(.Step-module_disabled__1R7hh):hover {\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n border-radius: var(--borderRadius);\n}\n\n.Step-module_step__2siYu {\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_step__2siYu:not(.Step-module_hasLabel__3cdCU):not(.Step-module_disabled__1R7hh):hover {\n border-radius: 100%;\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n}\n.Step-module_step__2siYu.Step-module_hasLabel__3cdCU svg {\n width: 18px !important;\n height: 18px !important;\n}\n\n.Step-module_stepIconCircle__3IyDn svg {\n width: 24px;\n height: 24px;\n}\n\n.Step-module_stepValue__2TVrP {\n position: absolute;\n color: var(--secondary-contrast-text);\n}\n.Step-module_stepValue__2TVrP .Step-module_isActive__1QTL4 {\n color: var(--primary-contrast-text);\n}";
|
|
2141
2127
|
var styles$4 = {"stepWrapper":"Step-module_stepWrapper__1se3l","hasLabel":"Step-module_hasLabel__3cdCU","disabled":"Step-module_disabled__1R7hh","step":"Step-module_step__2siYu","stepIconCircle":"Step-module_stepIconCircle__3IyDn","stepValue":"Step-module_stepValue__2TVrP","isActive":"Step-module_isActive__1QTL4"};
|
|
2142
2128
|
styleInject(css_248z$4);
|
|
2143
2129
|
|
|
@@ -2192,7 +2178,7 @@ const Table = (props) => {
|
|
|
2192
2178
|
React.createElement("table", { className: getCssClasses() }, children)));
|
|
2193
2179
|
};
|
|
2194
2180
|
|
|
2195
|
-
var css_248z$3 = ".TabIndicator-module_tabIndicator__wj9Qm {\n bottom: 0;\n height: 2px;\n position: absolute;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
|
|
2181
|
+
var css_248z$3 = ".TabIndicator-module_tabIndicator__wj9Qm {\n bottom: 0;\n height: 2px;\n position: absolute;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.TabIndicator-module_tabIndicator__wj9Qm.TabIndicator-module_primary__2Lc8c {\n background-color: var(--primary);\n}\n.TabIndicator-module_tabIndicator__wj9Qm.TabIndicator-module_accent__37h0D {\n background-color: var(--accent);\n}";
|
|
2196
2182
|
var styles$3 = {"tabIndicator":"TabIndicator-module_tabIndicator__wj9Qm","primary":"TabIndicator-module_primary__2Lc8c","accent":"TabIndicator-module_accent__37h0D"};
|
|
2197
2183
|
styleInject(css_248z$3);
|
|
2198
2184
|
|
|
@@ -2210,7 +2196,7 @@ const TabIndicator = (props) => {
|
|
|
2210
2196
|
} }));
|
|
2211
2197
|
};
|
|
2212
2198
|
|
|
2213
|
-
var css_248z$2 = ".Tabs-module_tabs__2azkC {\n display: flex;\n position: relative
|
|
2199
|
+
var css_248z$2 = ".Tabs-module_tabs__2azkC {\n display: flex;\n position: relative;\n}";
|
|
2214
2200
|
var styles$2 = {"tabs":"Tabs-module_tabs__2azkC"};
|
|
2215
2201
|
styleInject(css_248z$2);
|
|
2216
2202
|
|
|
@@ -2251,7 +2237,7 @@ const Tabs = (props) => {
|
|
|
2251
2237
|
React.createElement(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length }))));
|
|
2252
2238
|
};
|
|
2253
2239
|
|
|
2254
|
-
var css_248z$1 = ".Tab-module_tab__31Fjd {\n padding: 6px 12px;\n overflow: hidden;\n position: relative;\n font-size: 0.875rem;\n min-width: 72px;\n box-sizing: border-box;\n min-height: 48px;\n text-align: center;\n font-weight: 500;\n line-height: 1.75;\n white-space: normal;\n letter-spacing: 0.02857em;\n text-transform: uppercase;\n border-radius: 0;\n flex-grow: 1;\n flex-basis: 0;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
|
|
2240
|
+
var css_248z$1 = ".Tab-module_tab__31Fjd {\n padding: 6px 12px;\n overflow: hidden;\n position: relative;\n font-size: 0.875rem;\n min-width: 72px;\n box-sizing: border-box;\n min-height: 48px;\n text-align: center;\n font-weight: 500;\n line-height: 1.75;\n white-space: normal;\n letter-spacing: 0.02857em;\n text-transform: uppercase;\n border-radius: 0;\n flex-grow: 1;\n flex-basis: 0;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
|
|
2255
2241
|
var styles$1 = {"tab":"Tab-module_tab__31Fjd"};
|
|
2256
2242
|
styleInject(css_248z$1);
|
|
2257
2243
|
|
|
@@ -2274,7 +2260,7 @@ const TabPanel = (props) => {
|
|
|
2274
2260
|
return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
|
|
2275
2261
|
};
|
|
2276
2262
|
|
|
2277
|
-
var css_248z = ".Tooltip-module_tooltipContainer__3SPVX {\n display: inline
|
|
2263
|
+
var css_248z = ".Tooltip-module_tooltipContainer__3SPVX {\n display: inline;\n}\n\n.Tooltip-module_tooltip__1AML3 {\n background-color: #333;\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 13px;\n position: absolute;\n left: -1000000px;\n z-index: 1100;\n}\n.Tooltip-module_tooltip__1AML3 #Tooltip-module_arrow__2c3YL,\n.Tooltip-module_tooltip__1AML3 #Tooltip-module_arrow__2c3YL::before {\n position: absolute;\n width: 8px;\n height: 8px;\n z-index: -1;\n}\n.Tooltip-module_tooltip__1AML3 #Tooltip-module_arrow__2c3YL::before {\n content: \"\";\n transform: rotate(45deg);\n background: #333;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=top] > #Tooltip-module_arrow__2c3YL {\n bottom: -4px;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=bottom] > #Tooltip-module_arrow__2c3YL {\n top: -4px;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=left] > #Tooltip-module_arrow__2c3YL {\n right: -4px;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=right] > #Tooltip-module_arrow__2c3YL {\n left: -4px;\n}";
|
|
2278
2264
|
var styles = {"tooltipContainer":"Tooltip-module_tooltipContainer__3SPVX","tooltip":"Tooltip-module_tooltip__1AML3","arrow":"Tooltip-module_arrow__2c3YL"};
|
|
2279
2265
|
styleInject(css_248z);
|
|
2280
2266
|
|
|
@@ -2285,6 +2271,7 @@ const Tooltip = (props) => {
|
|
|
2285
2271
|
const refTooltip = useRef(null);
|
|
2286
2272
|
useEffect(() => {
|
|
2287
2273
|
if (show === true && refChild && refChild.current) {
|
|
2274
|
+
// TODO - extract to own component?
|
|
2288
2275
|
createPopper(refChild.current, refTooltip.current, {
|
|
2289
2276
|
placement: placement,
|
|
2290
2277
|
modifiers: [
|