react-asc 19.0.2 → 19.0.6
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/Button/Button.d.ts +1 -0
- package/components/Form/FormInput/FormInput.d.ts +2 -2
- package/hooks/useHover.d.ts +2 -2
- package/index.es.js +308 -295
- package/index.js +308 -295
- package/package.json +1 -1
package/index.es.js
CHANGED
|
@@ -87,93 +87,93 @@ 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$X = ".Alert-module_alert__b4tbk {\n border-radius: var(--borderRadius);\n padding: 6px 16px; }\n\n.Alert-module_contained__EM0x6.Alert-module_primary__q4pNj {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n\n.Alert-module_contained__EM0x6.Alert-module_accent__a2WIl {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n\n.Alert-module_contained__EM0x6.Alert-module_secondary__syXKX {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n\n.Alert-module_contained__EM0x6.Alert-module_light__VKCXF {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n\n.Alert-module_contained__EM0x6.Alert-module_dark__3c-Hm {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n\n.Alert-module_outline__T2262.Alert-module_primary__q4pNj {\n color: var(--primary) !important;\n border: 1px solid var(--primary) !important; }\n\n.Alert-module_outline__T2262.Alert-module_secondary__syXKX {\n color: var(--secondary) !important;\n border: 1px solid var(--secondary) !important; }\n\n.Alert-module_outline__T2262.Alert-module_accent__a2WIl {\n color: var(--accent) !important;\n border: 1px solid var(--accent) !important; }\n\n.Alert-module_outline__T2262.Alert-module_light__VKCXF {\n color: var(--light-contrast-text) !important;\n border: 1px solid var(--light) !important; }\n\n.Alert-module_outline__T2262.Alert-module_dark__3c-Hm {\n color: var(--dark) !important;\n border: 1px solid var(--dark) !important; }\n";
|
|
91
|
+
var styles$X = {"alert":"Alert-module_alert__b4tbk","contained":"Alert-module_contained__EM0x6","primary":"Alert-module_primary__q4pNj","accent":"Alert-module_accent__a2WIl","secondary":"Alert-module_secondary__syXKX","light":"Alert-module_light__VKCXF","dark":"Alert-module_dark__3c-Hm","outline":"Alert-module_outline__T2262"};
|
|
92
|
+
styleInject(css_248z$X);
|
|
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$X.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$X.contained);
|
|
101
|
+
cssClasses.push(styles$X[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$X.outline);
|
|
105
|
+
cssClasses.push(styles$X[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$X['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$W = ".AppBar-module_appbar__Neyh3 {\n padding: 0.5rem 1rem;\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0; }\n .AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n box-shadow: var(--shadow); }\n";
|
|
115
|
+
var styles$W = {"appbar":"AppBar-module_appbar__Neyh3","primary":"AppBar-module_primary__xMqXD","secondary":"AppBar-module_secondary__8MkLA","accent":"AppBar-module_accent__vHbkp","light":"AppBar-module_light__HGy3y","dark":"AppBar-module_dark__ILq96","shadow":"AppBar-module_shadow__gQN8s"};
|
|
116
|
+
styleInject(css_248z$W);
|
|
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$W[color]);
|
|
123
|
+
cssClasses.push(styles$W.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$W['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$V = ".AppBarTitle-module_appbarTitle__RsFg5 {\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 .AppBarTitle-module_appbarTitle__RsFg5:hover {\n cursor: pointer; }\n";
|
|
132
|
+
var styles$V = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
133
|
+
styleInject(css_248z$V);
|
|
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$V.appbarTitle);
|
|
140
140
|
className && cssClasses.push(className);
|
|
141
141
|
return cssClasses.filter(r => r).join(' ');
|
|
142
142
|
};
|
|
143
143
|
return (React.createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
144
144
|
};
|
|
145
145
|
|
|
146
|
-
var css_248z$
|
|
147
|
-
var styles$
|
|
148
|
-
styleInject(css_248z$
|
|
146
|
+
var css_248z$U = ".Icon-module_icon__lFKCA {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px; }\n .Icon-module_icon__lFKCA svg {\n width: inherit;\n height: inherit; }\n .Icon-module_icon__lFKCA.Icon-module_primary__3fID- {\n color: var(--primary); }\n .Icon-module_icon__lFKCA.Icon-module_accent__aZXGb {\n color: var(--accent); }\n .Icon-module_icon__lFKCA.Icon-module_secondary__HKKop {\n color: var(--secondary); }\n .Icon-module_icon__lFKCA.Icon-module_light__-ApMm {\n color: var(--light); }\n .Icon-module_icon__lFKCA.Icon-module_dark__DpCIK {\n color: var(--dark); }\n";
|
|
147
|
+
var styles$U = {"icon":"Icon-module_icon__lFKCA","primary":"Icon-module_primary__3fID-","accent":"Icon-module_accent__aZXGb","secondary":"Icon-module_secondary__HKKop","light":"Icon-module_light__-ApMm","dark":"Icon-module_dark__DpCIK"};
|
|
148
|
+
styleInject(css_248z$U);
|
|
149
149
|
|
|
150
150
|
const Icon = (props) => {
|
|
151
151
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
152
152
|
const getCssClasses = () => {
|
|
153
153
|
const cssClasses = [];
|
|
154
|
-
cssClasses.push(styles$
|
|
155
|
-
iconColor && cssClasses.push(styles$
|
|
154
|
+
cssClasses.push(styles$U.icon);
|
|
155
|
+
iconColor && cssClasses.push(styles$U[iconColor]);
|
|
156
156
|
className && cssClasses.push(className);
|
|
157
157
|
return cssClasses.filter(css => css).join(' ');
|
|
158
158
|
};
|
|
159
159
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
160
160
|
};
|
|
161
161
|
|
|
162
|
-
var css_248z$
|
|
163
|
-
var styles$
|
|
164
|
-
styleInject(css_248z$
|
|
162
|
+
var css_248z$T = ".IconButton-module_iconButton__rpCPQ {\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 .IconButton-module_iconButton__rpCPQ:hover {\n cursor: pointer; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n box-shadow: var(--shadow); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n width: 48px;\n height: 48px; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n width: 56px;\n height: 56px; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n padding: 0;\n background: transparent;\n color: inherit; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n color: var(--primary); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n color: var(--primary-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n color: var(--secondary); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n color: var(--secondary-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n color: var(--accent); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n color: var(--accent-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n color: var(--light); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n color: var(--light-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n color: var(--dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n color: var(--dark-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n background-color: var(--primary);\n color: var(--white); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n background-color: var(--primary-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n background-color: var(--secondary);\n color: var(--white); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n background-color: var(--secondary-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n background-color: var(--accent);\n color: var(--white); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n background-color: var(--accent-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n background-color: var(--light);\n color: var(--dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n background-color: var(--light-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n background-color: var(--dark);\n color: var(--white); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n background-color: var(--dark-light); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none; }\n";
|
|
163
|
+
var styles$T = {"iconButton":"IconButton-module_iconButton__rpCPQ","shadow":"IconButton-module_shadow__Uw0RK","md":"IconButton-module_md__XnuSk","lg":"IconButton-module_lg__arEvo","text":"IconButton-module_text__Ualag","active":"IconButton-module_active__VIqU9","primary":"IconButton-module_primary__vbo-G","secondary":"IconButton-module_secondary__AiNAY","accent":"IconButton-module_accent__QRzM2","light":"IconButton-module_light__YNEiO","dark":"IconButton-module_dark__gnbUH","disabled":"IconButton-module_disabled__QB0ZV","contained":"IconButton-module_contained__k7vGA"};
|
|
164
|
+
styleInject(css_248z$T);
|
|
165
165
|
|
|
166
166
|
const IconButton = (props) => {
|
|
167
167
|
const { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
|
|
168
168
|
const getCssClasses = () => {
|
|
169
169
|
const cssClasses = [];
|
|
170
|
-
cssClasses.push(styles$
|
|
171
|
-
cssClasses.push(styles$
|
|
172
|
-
cssClasses.push(styles$
|
|
173
|
-
cssClasses.push(styles$
|
|
174
|
-
isActive && cssClasses.push(styles$
|
|
175
|
-
disabled && cssClasses.push(styles$
|
|
176
|
-
shadow && cssClasses.push(styles$
|
|
170
|
+
cssClasses.push(styles$T[color]);
|
|
171
|
+
cssClasses.push(styles$T[variant]);
|
|
172
|
+
cssClasses.push(styles$T[size]);
|
|
173
|
+
cssClasses.push(styles$T.iconButton);
|
|
174
|
+
isActive && cssClasses.push(styles$T.active);
|
|
175
|
+
disabled && cssClasses.push(styles$T.disabled);
|
|
176
|
+
shadow && cssClasses.push(styles$T.shadow);
|
|
177
177
|
className && cssClasses.push(className);
|
|
178
178
|
return cssClasses.filter(css => css).join(' ');
|
|
179
179
|
};
|
|
@@ -243,22 +243,26 @@ function useWindowSize() {
|
|
|
243
243
|
return windowSize;
|
|
244
244
|
}
|
|
245
245
|
|
|
246
|
-
function useHover(
|
|
246
|
+
function useHover() {
|
|
247
247
|
const [value, setValue] = useState(false);
|
|
248
|
+
const ref = useRef(null);
|
|
248
249
|
const handleMouseOver = () => setValue(true);
|
|
249
250
|
const handleMouseOut = () => setValue(false);
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
node.
|
|
253
|
-
node
|
|
254
|
-
|
|
251
|
+
useEffect(() => {
|
|
252
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
253
|
+
const node = ref.current;
|
|
254
|
+
if (node) {
|
|
255
|
+
node.addEventListener("mouseover", handleMouseOver);
|
|
256
|
+
node.addEventListener("mouseout", handleMouseOut);
|
|
255
257
|
return () => {
|
|
256
258
|
node.removeEventListener("mouseover", handleMouseOver);
|
|
257
259
|
node.removeEventListener("mouseout", handleMouseOut);
|
|
258
260
|
};
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
|
|
261
|
+
}
|
|
262
|
+
return;
|
|
263
|
+
}, [ref.current] // Recall only if ref changes
|
|
264
|
+
);
|
|
265
|
+
return [ref, value];
|
|
262
266
|
}
|
|
263
267
|
|
|
264
268
|
const useConstructor = (callBack) => {
|
|
@@ -299,34 +303,34 @@ const Backdrop = (props) => {
|
|
|
299
303
|
return (createPortal(React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
|
|
300
304
|
};
|
|
301
305
|
|
|
302
|
-
var css_248z$
|
|
303
|
-
var styles$
|
|
304
|
-
styleInject(css_248z$
|
|
306
|
+
var css_248z$S = ".List-module_list__gpZ41 {\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";
|
|
307
|
+
var styles$S = {"list":"List-module_list__gpZ41"};
|
|
308
|
+
styleInject(css_248z$S);
|
|
305
309
|
|
|
306
310
|
const List = (props) => {
|
|
307
311
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
308
312
|
const getCssClasses = () => {
|
|
309
313
|
const cssClasses = [];
|
|
310
|
-
isFlush && cssClasses.push(styles$
|
|
311
|
-
cssClasses.push(styles$
|
|
314
|
+
isFlush && cssClasses.push(styles$S.flush);
|
|
315
|
+
cssClasses.push(styles$S.list);
|
|
312
316
|
className && cssClasses.push(className);
|
|
313
317
|
return cssClasses.filter(css => css).join(' ');
|
|
314
318
|
};
|
|
315
319
|
return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
316
320
|
};
|
|
317
321
|
|
|
318
|
-
var css_248z$
|
|
319
|
-
var styles$
|
|
320
|
-
styleInject(css_248z$
|
|
322
|
+
var css_248z$R = ".ListItem-module_listItem__Pk1AP {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.75rem 1.25rem;\n min-width: 100%;\n color: var(--bodyColor);\n text-align: inherit;\n transition: background 0.5s ease; }\n .ListItem-module_listItem__Pk1AP:hover, .ListItem-module_listItem__Pk1AP.ListItem-module_active__zm2q8 {\n cursor: pointer;\n z-index: 1;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n color: var(--primary); }\n .ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n border-top-width: 0; }\n .ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n color: rgba(0, 0, 0, 0.26); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n cursor: not-allowed;\n background-color: inherit; }\n";
|
|
323
|
+
var styles$R = {"listItem":"ListItem-module_listItem__Pk1AP","active":"ListItem-module_active__zm2q8","primary":"ListItem-module_primary__F6Qja","accent":"ListItem-module_accent__pg3Ha","secondary":"ListItem-module_secondary__d0drD","light":"ListItem-module_light__37kby","dark":"ListItem-module_dark__ZxQTF","disabled":"ListItem-module_disabled__DQLKl"};
|
|
324
|
+
styleInject(css_248z$R);
|
|
321
325
|
|
|
322
326
|
const ListItem = (props) => {
|
|
323
327
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
324
328
|
const getCssClasses = () => {
|
|
325
329
|
const cssClasses = [];
|
|
326
|
-
cssClasses.push(styles$
|
|
327
|
-
color && cssClasses.push(styles$
|
|
328
|
-
active && cssClasses.push(styles$
|
|
329
|
-
disabled && cssClasses.push(styles$
|
|
330
|
+
cssClasses.push(styles$R.listItem);
|
|
331
|
+
color && cssClasses.push(styles$R[color]);
|
|
332
|
+
active && cssClasses.push(styles$R['active']);
|
|
333
|
+
disabled && cssClasses.push(styles$R['disabled']);
|
|
330
334
|
className && cssClasses.push(className);
|
|
331
335
|
return cssClasses.filter(css => css).join(' ');
|
|
332
336
|
};
|
|
@@ -336,42 +340,42 @@ const ListItem = (props) => {
|
|
|
336
340
|
return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
337
341
|
};
|
|
338
342
|
|
|
339
|
-
var css_248z$
|
|
340
|
-
var styles$
|
|
341
|
-
styleInject(css_248z$
|
|
343
|
+
var css_248z$Q = ".ListItemAvatar-module_avatar__sVWfR {\n margin-right: 16px; }\n .ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n width: 24px;\n height: 24px; }\n .ListItemAvatar-module_avatar__sVWfR img {\n border-radius: 50%; }\n";
|
|
344
|
+
var styles$Q = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
345
|
+
styleInject(css_248z$Q);
|
|
342
346
|
|
|
343
347
|
const ListItemAvatar = (_a) => {
|
|
344
348
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
345
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
349
|
+
return (React.createElement("div", Object.assign({ className: styles$Q.avatar }, rest), avatar));
|
|
346
350
|
};
|
|
347
351
|
|
|
348
|
-
var css_248z$
|
|
349
|
-
var styles$
|
|
350
|
-
styleInject(css_248z$
|
|
352
|
+
var css_248z$P = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px; }\n .ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px; }\n";
|
|
353
|
+
var styles$P = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
354
|
+
styleInject(css_248z$P);
|
|
351
355
|
|
|
352
356
|
const ListItemIcon = (_a) => {
|
|
353
357
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
354
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
358
|
+
return (React.createElement("div", Object.assign({ className: styles$P.icon }, rest), icon));
|
|
355
359
|
};
|
|
356
360
|
|
|
357
|
-
var css_248z$
|
|
358
|
-
var styles$
|
|
359
|
-
styleInject(css_248z$
|
|
361
|
+
var css_248z$O = ".ListItemAction-module_listItemAction__gAQRj {\n display: flex;\n justify-content: center;\n min-width: 40px; }\n .ListItemAction-module_listItemAction__gAQRj svg {\n width: 20px;\n height: 20px; }\n";
|
|
362
|
+
var styles$O = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
363
|
+
styleInject(css_248z$O);
|
|
360
364
|
|
|
361
365
|
const ListItemAction = (_a) => {
|
|
362
366
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
363
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
367
|
+
return (React.createElement("div", Object.assign({ className: styles$O.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
364
368
|
};
|
|
365
369
|
|
|
366
|
-
var css_248z$
|
|
367
|
-
var styles$
|
|
368
|
-
styleInject(css_248z$
|
|
370
|
+
var css_248z$N = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1; }\n";
|
|
371
|
+
var styles$N = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
372
|
+
styleInject(css_248z$N);
|
|
369
373
|
|
|
370
374
|
const ListItemText = (_a) => {
|
|
371
375
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
372
376
|
const getCssClasses = () => {
|
|
373
377
|
const cssClasses = [];
|
|
374
|
-
cssClasses.push(styles$
|
|
378
|
+
cssClasses.push(styles$N.listItemText);
|
|
375
379
|
return cssClasses.filter(css => css).join(' ');
|
|
376
380
|
};
|
|
377
381
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -382,9 +386,9 @@ const ListItemText = (_a) => {
|
|
|
382
386
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
383
387
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
384
388
|
|
|
385
|
-
var css_248z$
|
|
386
|
-
var styles$
|
|
387
|
-
styleInject(css_248z$
|
|
389
|
+
var css_248z$M = ".AutoComplete-module_selectContainer__1kA85 {\n position: relative; }\n\n.AutoComplete-module_select__NNYOi {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .AutoComplete-module_select__NNYOi:hover {\n cursor: pointer; }\n\n.AutoComplete-module_selectMenu__Gu81L {\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";
|
|
390
|
+
var styles$M = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
391
|
+
styleInject(css_248z$M);
|
|
388
392
|
|
|
389
393
|
// preset value
|
|
390
394
|
// enter -> delay? -> show results
|
|
@@ -440,7 +444,7 @@ const AutoComplete = (props) => {
|
|
|
440
444
|
const getCssClass = () => {
|
|
441
445
|
const cssClasses = [];
|
|
442
446
|
className && cssClasses.push(className);
|
|
443
|
-
cssClasses.push(styles$
|
|
447
|
+
cssClasses.push(styles$M.select);
|
|
444
448
|
return cssClasses.filter(r => r).join(' ');
|
|
445
449
|
};
|
|
446
450
|
const show = () => setIsShow(true);
|
|
@@ -464,35 +468,35 @@ const AutoComplete = (props) => {
|
|
|
464
468
|
setModel('');
|
|
465
469
|
setSearchText('');
|
|
466
470
|
};
|
|
467
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
471
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$M.selectContainer },
|
|
468
472
|
React.createElement("div", { className: "d-flex" },
|
|
469
473
|
React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
470
474
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
471
475
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
472
476
|
isShow &&
|
|
473
477
|
React.createElement(React.Fragment, null,
|
|
474
|
-
React.createElement("div", { className: styles$
|
|
478
|
+
React.createElement("div", { className: styles$M.selectMenu },
|
|
475
479
|
React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
476
480
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
477
481
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
478
482
|
};
|
|
479
483
|
|
|
480
|
-
var css_248z$
|
|
481
|
-
var styles$
|
|
482
|
-
styleInject(css_248z$
|
|
484
|
+
var css_248z$L = ".Badge-module_badgeContainer__3nZBs {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle; }\n\n.Badge-module_badge__9ImR0 {\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 .Badge-module_badge__9ImR0.Badge-module_primary__41U-t {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Badge-module_badge__9ImR0.Badge-module_accent__OQy2- {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Badge-module_badge__9ImR0.Badge-module_secondary__a9Jfh {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Badge-module_badge__9ImR0.Badge-module_light__4QvQ5 {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Badge-module_badge__9ImR0.Badge-module_dark__g1yUJ {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n";
|
|
485
|
+
var styles$L = {"badgeContainer":"Badge-module_badgeContainer__3nZBs","badge":"Badge-module_badge__9ImR0","primary":"Badge-module_primary__41U-t","accent":"Badge-module_accent__OQy2-","secondary":"Badge-module_secondary__a9Jfh","light":"Badge-module_light__4QvQ5","dark":"Badge-module_dark__g1yUJ"};
|
|
486
|
+
styleInject(css_248z$L);
|
|
483
487
|
|
|
484
488
|
const Badge = (props) => {
|
|
485
489
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
486
490
|
const getCssClassesBadgeContainer = () => {
|
|
487
491
|
const cssClasses = [];
|
|
488
|
-
cssClasses.push(styles$
|
|
492
|
+
cssClasses.push(styles$L.badgeContainer);
|
|
489
493
|
className && cssClasses.push(className);
|
|
490
494
|
return cssClasses.filter(css => css).join(' ');
|
|
491
495
|
};
|
|
492
496
|
const getCssClassesBadge = () => {
|
|
493
497
|
const cssClasses = [];
|
|
494
|
-
cssClasses.push(styles$
|
|
495
|
-
cssClasses.push(styles$
|
|
498
|
+
cssClasses.push(styles$L.badge);
|
|
499
|
+
cssClasses.push(styles$L[color]);
|
|
496
500
|
return cssClasses.filter(css => css).join(' ');
|
|
497
501
|
};
|
|
498
502
|
return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -500,26 +504,26 @@ const Badge = (props) => {
|
|
|
500
504
|
React.createElement("span", { className: getCssClassesBadge() }, content)));
|
|
501
505
|
};
|
|
502
506
|
|
|
503
|
-
var css_248z$
|
|
504
|
-
var styles$
|
|
505
|
-
styleInject(css_248z$
|
|
507
|
+
var css_248z$K = ".Button-module_button__qeIer {\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 .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow); }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\n background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\n background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\n background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\n background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary) !important; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n text-decoration: none;\n background: var(--light-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary) !important;\n border-color: var(--primary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n background: var(--primary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n background: var(--secondary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent) !important;\n border-color: var(--accent) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n background: var(--accent-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n background: var(--light-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark) !important;\n border-color: var(--dark) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px; }\n";
|
|
508
|
+
var styles$K = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
|
|
509
|
+
styleInject(css_248z$K);
|
|
506
510
|
|
|
507
511
|
const Button = (props) => {
|
|
508
|
-
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"]);
|
|
512
|
+
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow"]);
|
|
509
513
|
const getCssClasses = () => {
|
|
510
514
|
const cssClasses = [];
|
|
511
|
-
cssClasses.push(styles$
|
|
515
|
+
cssClasses.push(styles$K.button);
|
|
512
516
|
if (variant !== 'outline' && variant !== 'text') {
|
|
513
|
-
cssClasses.push(styles$
|
|
514
|
-
cssClasses.push(styles$
|
|
517
|
+
cssClasses.push(styles$K.btnContained);
|
|
518
|
+
cssClasses.push(styles$K[color]);
|
|
515
519
|
}
|
|
516
520
|
if (variant === 'outline') {
|
|
517
|
-
cssClasses.push(styles$
|
|
518
|
-
cssClasses.push(styles$
|
|
521
|
+
cssClasses.push(styles$K.btnOutline);
|
|
522
|
+
cssClasses.push(styles$K[color]);
|
|
519
523
|
}
|
|
520
524
|
if (variant === 'text') {
|
|
521
|
-
cssClasses.push(styles$
|
|
522
|
-
cssClasses.push(styles$
|
|
525
|
+
cssClasses.push(styles$K.btnText);
|
|
526
|
+
cssClasses.push(styles$K[color]);
|
|
523
527
|
}
|
|
524
528
|
if (isRounded && variant !== 'text') {
|
|
525
529
|
cssClasses.push(`rounded-pill`);
|
|
@@ -527,42 +531,43 @@ const Button = (props) => {
|
|
|
527
531
|
if (isActive) {
|
|
528
532
|
cssClasses.push('active');
|
|
529
533
|
}
|
|
534
|
+
shadow && cssClasses.push(styles$K.shadow);
|
|
530
535
|
className && cssClasses.push(className);
|
|
531
536
|
return cssClasses.filter(css => css).join(' ');
|
|
532
537
|
};
|
|
533
538
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
534
539
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
535
540
|
startIcon &&
|
|
536
|
-
React.createElement(Icon, { className: styles$
|
|
541
|
+
React.createElement(Icon, { className: styles$K.startIcon }, startIcon),
|
|
537
542
|
children,
|
|
538
543
|
endIcon &&
|
|
539
|
-
React.createElement(Icon, { className: styles$
|
|
544
|
+
React.createElement(Icon, { className: styles$K.endIcon }, endIcon))));
|
|
540
545
|
};
|
|
541
546
|
|
|
542
|
-
var css_248z$
|
|
543
|
-
var styles$
|
|
544
|
-
styleInject(css_248z$
|
|
547
|
+
var css_248z$J = ".ButtonGroup-module_buttonGroup__w6iB- button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n";
|
|
548
|
+
var styles$J = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
549
|
+
styleInject(css_248z$J);
|
|
545
550
|
|
|
546
551
|
const ButtonGroup = (props) => {
|
|
547
552
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
548
553
|
const getCssClasses = () => {
|
|
549
554
|
const cssClasses = [];
|
|
550
|
-
cssClasses.push(styles$
|
|
555
|
+
cssClasses.push(styles$J.buttonGroup);
|
|
551
556
|
className && cssClasses.push(className);
|
|
552
557
|
return cssClasses.filter(css => css).join(' ');
|
|
553
558
|
};
|
|
554
559
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
555
560
|
};
|
|
556
561
|
|
|
557
|
-
var css_248z$
|
|
558
|
-
var styles$
|
|
559
|
-
styleInject(css_248z$
|
|
562
|
+
var css_248z$I = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin-bottom: 0;\n list-style: none;\n margin-bottom: 1rem; }\n";
|
|
563
|
+
var styles$I = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
564
|
+
styleInject(css_248z$I);
|
|
560
565
|
|
|
561
566
|
const Breadcrumb = (props) => {
|
|
562
567
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
563
568
|
const getCssClasses = () => {
|
|
564
569
|
const cssClasses = [];
|
|
565
|
-
cssClasses.push(styles$
|
|
570
|
+
cssClasses.push(styles$I.breadcrumb);
|
|
566
571
|
className && cssClasses.push(className);
|
|
567
572
|
return cssClasses.filter(css => css).join(' ');
|
|
568
573
|
};
|
|
@@ -572,15 +577,15 @@ const Breadcrumb = (props) => {
|
|
|
572
577
|
|
|
573
578
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
574
579
|
|
|
575
|
-
var css_248z$
|
|
576
|
-
var styles$
|
|
577
|
-
styleInject(css_248z$
|
|
580
|
+
var css_248z$H = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\"; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary); }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset; }\n";
|
|
581
|
+
var styles$H = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
582
|
+
styleInject(css_248z$H);
|
|
578
583
|
|
|
579
584
|
const BreadcrumbItem = (props) => {
|
|
580
585
|
const { children, className, isActive, onClick } = props;
|
|
581
586
|
const getCssClasses = () => {
|
|
582
587
|
const cssClasses = [];
|
|
583
|
-
cssClasses.push(styles$
|
|
588
|
+
cssClasses.push(styles$H.breadcrumbItem);
|
|
584
589
|
className && cssClasses.push(className);
|
|
585
590
|
isActive && cssClasses.push('active');
|
|
586
591
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -592,115 +597,115 @@ const BreadcrumbItem = (props) => {
|
|
|
592
597
|
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
|
|
593
598
|
};
|
|
594
599
|
|
|
595
|
-
var css_248z$
|
|
596
|
-
var styles$
|
|
597
|
-
styleInject(css_248z$
|
|
600
|
+
var css_248z$G = ".Card-module_card__TQdQq {\n background: var(--white);\n border-radius: var(--borderRadius); }\n .Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n box-shadow: var(--shadow); }\n";
|
|
601
|
+
var styles$G = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
602
|
+
styleInject(css_248z$G);
|
|
598
603
|
|
|
599
604
|
const Card = (props) => {
|
|
600
605
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
601
606
|
const getCssClasses = () => {
|
|
602
607
|
const cssClasses = [];
|
|
603
|
-
cssClasses.push(styles$
|
|
604
|
-
shadow && cssClasses.push(styles$
|
|
608
|
+
cssClasses.push(styles$G.card);
|
|
609
|
+
shadow && cssClasses.push(styles$G.shadow);
|
|
605
610
|
className && cssClasses.push(className);
|
|
606
611
|
return cssClasses.filter(css => css).join(' ');
|
|
607
612
|
};
|
|
608
613
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
609
614
|
};
|
|
610
615
|
|
|
611
|
-
var css_248z$
|
|
612
|
-
var styles$
|
|
613
|
-
styleInject(css_248z$
|
|
616
|
+
var css_248z$F = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem; }\n";
|
|
617
|
+
var styles$F = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
618
|
+
styleInject(css_248z$F);
|
|
614
619
|
|
|
615
620
|
const CardBody = (props) => {
|
|
616
621
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
617
622
|
const getCssClasses = () => {
|
|
618
623
|
const cssClasses = [];
|
|
619
|
-
cssClasses.push(styles$
|
|
624
|
+
cssClasses.push(styles$F.cardBody);
|
|
620
625
|
className && cssClasses.push(className);
|
|
621
626
|
return cssClasses.filter(css => css).join(' ');
|
|
622
627
|
};
|
|
623
628
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
624
629
|
};
|
|
625
630
|
|
|
626
|
-
var css_248z$
|
|
627
|
-
var styles$
|
|
628
|
-
styleInject(css_248z$
|
|
631
|
+
var css_248z$E = ".CardFooter-module_cardFooter__BpOTG {\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 .CardFooter-module_cardFooter__BpOTG:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }\n";
|
|
632
|
+
var styles$E = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
633
|
+
styleInject(css_248z$E);
|
|
629
634
|
|
|
630
635
|
const CardFooter = (props) => {
|
|
631
636
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
632
637
|
const getCssClasses = () => {
|
|
633
638
|
const cssClasses = [];
|
|
634
|
-
cssClasses.push(styles$
|
|
639
|
+
cssClasses.push(styles$E.cardFooter);
|
|
635
640
|
className && cssClasses.push(className);
|
|
636
641
|
return cssClasses.filter(css => css).join(' ');
|
|
637
642
|
};
|
|
638
643
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
639
644
|
};
|
|
640
645
|
|
|
641
|
-
var css_248z$
|
|
642
|
-
var styles$
|
|
643
|
-
styleInject(css_248z$
|
|
646
|
+
var css_248z$D = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important; }\n";
|
|
647
|
+
var styles$D = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
648
|
+
styleInject(css_248z$D);
|
|
644
649
|
|
|
645
650
|
const CardSubtitle = (props) => {
|
|
646
651
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
647
652
|
const getCssClasses = () => {
|
|
648
653
|
const cssClasses = [];
|
|
649
|
-
cssClasses.push(styles$
|
|
654
|
+
cssClasses.push(styles$D.cardSubtitle);
|
|
650
655
|
className && cssClasses.push(className);
|
|
651
656
|
return cssClasses.filter(css => css).join(' ');
|
|
652
657
|
};
|
|
653
658
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
654
659
|
};
|
|
655
660
|
|
|
656
|
-
var css_248z$
|
|
657
|
-
var styles$
|
|
658
|
-
styleInject(css_248z$
|
|
661
|
+
var css_248z$C = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0; }\n";
|
|
662
|
+
var styles$C = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
663
|
+
styleInject(css_248z$C);
|
|
659
664
|
|
|
660
665
|
const CardText = (props) => {
|
|
661
666
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
662
667
|
const getCssClasses = () => {
|
|
663
668
|
const cssClasses = [];
|
|
664
|
-
cssClasses.push(styles$
|
|
669
|
+
cssClasses.push(styles$C.cardText);
|
|
665
670
|
className && cssClasses.push(className);
|
|
666
671
|
return cssClasses.filter(css => css).join(' ');
|
|
667
672
|
};
|
|
668
673
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
669
674
|
};
|
|
670
675
|
|
|
671
|
-
var css_248z$
|
|
672
|
-
var styles$
|
|
673
|
-
styleInject(css_248z$
|
|
676
|
+
var css_248z$B = ".CardTitle-module_cardTitle__aiPSE {\n margin-bottom: 0;\n font-size: 1.5rem;\n font-weight: 400;\n line-height: 1.334;\n letter-spacing: 0em; }\n";
|
|
677
|
+
var styles$B = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
678
|
+
styleInject(css_248z$B);
|
|
674
679
|
|
|
675
680
|
const CardTitle = (props) => {
|
|
676
681
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
677
682
|
const getCssClasses = () => {
|
|
678
683
|
const cssClasses = [];
|
|
679
|
-
cssClasses.push(styles$
|
|
684
|
+
cssClasses.push(styles$B.cardTitle);
|
|
680
685
|
className && cssClasses.push(className);
|
|
681
686
|
return cssClasses.filter(css => css).join(' ');
|
|
682
687
|
};
|
|
683
688
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
684
689
|
};
|
|
685
690
|
|
|
686
|
-
var css_248z$
|
|
687
|
-
var styles$
|
|
688
|
-
styleInject(css_248z$
|
|
691
|
+
var css_248z$A = ".CardImage-module_cardImage__Z6JWW {\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";
|
|
692
|
+
var styles$A = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
693
|
+
styleInject(css_248z$A);
|
|
689
694
|
|
|
690
695
|
const CardImage = (props) => {
|
|
691
696
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
692
697
|
const getCssClasses = () => {
|
|
693
698
|
const cssClasses = [];
|
|
694
|
-
cssClasses.push(styles$
|
|
699
|
+
cssClasses.push(styles$A.cardImage);
|
|
695
700
|
className && cssClasses.push(className);
|
|
696
701
|
return cssClasses.filter(css => css).join(' ');
|
|
697
702
|
};
|
|
698
703
|
return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
699
704
|
};
|
|
700
705
|
|
|
701
|
-
var css_248z$
|
|
702
|
-
var styles$
|
|
703
|
-
styleInject(css_248z$
|
|
706
|
+
var css_248z$z = ".Checkbox-module_checkboxContainer__x2GCi {\n display: flex;\n align-items: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n .Checkbox-module_checkboxContainer__x2GCi label {\n margin-bottom: 0;\n margin-left: 0; }\n .Checkbox-module_checkboxContainer__x2GCi label:hover {\n cursor: pointer; }\n\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG {\n color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed; }\n";
|
|
707
|
+
var styles$z = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
708
|
+
styleInject(css_248z$z);
|
|
704
709
|
|
|
705
710
|
const Checkbox = (props) => {
|
|
706
711
|
const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -737,24 +742,24 @@ const Checkbox = (props) => {
|
|
|
737
742
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
738
743
|
}
|
|
739
744
|
};
|
|
740
|
-
return (React.createElement("div", { className: styles$
|
|
745
|
+
return (React.createElement("div", { className: styles$z.checkboxContainer },
|
|
741
746
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
742
|
-
React.createElement("label", { onClick: handleClick, className: styles$
|
|
747
|
+
React.createElement("label", { onClick: handleClick, className: styles$z.checkboxLabel + ' ' + (disabled ? styles$z['disabled'] : undefined) }, label),
|
|
743
748
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
744
749
|
};
|
|
745
750
|
|
|
746
|
-
var css_248z$
|
|
747
|
-
var styles$
|
|
748
|
-
styleInject(css_248z$
|
|
751
|
+
var css_248z$y = ".Chip-module_chip__dZ5qz {\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 .Chip-module_chip__dZ5qz svg {\n width: 18px;\n height: 18px; }\n .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n margin-left: 5px; }\n .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n cursor: pointer; }\n .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n background: var(--primary);\n color: var(--primary-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n background: var(--secondary);\n color: var(--secondary-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n background: var(--accent);\n color: var(--accent-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n cursor: pointer; }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n background: var(--primary-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n background: var(--secondary-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n background: var(--accent-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n box-shadow: var(--shadow); }\n";
|
|
752
|
+
var styles$y = {"chip":"Chip-module_chip__dZ5qz","deleteIcon":"Chip-module_deleteIcon__--rUx","primary":"Chip-module_primary__YVDi9","secondary":"Chip-module_secondary__-e4xP","accent":"Chip-module_accent__ZCTwu","light":"Chip-module_light__vKs7O","dark":"Chip-module_dark__G-FLQ","clickable":"Chip-module_clickable__qAqVH","shadow":"Chip-module_shadow__v11NF"};
|
|
753
|
+
styleInject(css_248z$y);
|
|
749
754
|
|
|
750
755
|
const Chip = (props) => {
|
|
751
756
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React.createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
|
|
752
757
|
const getCssClass = () => {
|
|
753
758
|
const cssClasses = [];
|
|
754
|
-
cssClasses.push(styles$
|
|
755
|
-
cssClasses.push(styles$
|
|
756
|
-
shadow && cssClasses.push(styles$
|
|
757
|
-
onClick && cssClasses.push(styles$
|
|
759
|
+
cssClasses.push(styles$y.chip);
|
|
760
|
+
cssClasses.push(styles$y[color]);
|
|
761
|
+
shadow && cssClasses.push(styles$y['shadow']);
|
|
762
|
+
onClick && cssClasses.push(styles$y['clickable']);
|
|
758
763
|
className && cssClasses.push(className);
|
|
759
764
|
return cssClasses.filter(r => r).join(' ');
|
|
760
765
|
};
|
|
@@ -764,18 +769,18 @@ const Chip = (props) => {
|
|
|
764
769
|
};
|
|
765
770
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
766
771
|
React.createElement("div", null, children),
|
|
767
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
772
|
+
isDeletable && (React.createElement("div", { className: styles$y.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
768
773
|
};
|
|
769
774
|
|
|
770
|
-
var css_248z$
|
|
771
|
-
var styles$
|
|
772
|
-
styleInject(css_248z$
|
|
775
|
+
var css_248z$x = ".FormLabel-module_formLabel__TXcHc {\n margin-bottom: .5rem; }\n";
|
|
776
|
+
var styles$x = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
777
|
+
styleInject(css_248z$x);
|
|
773
778
|
|
|
774
779
|
const FormLabel = (_a) => {
|
|
775
780
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
776
781
|
const getCssClasses = () => {
|
|
777
782
|
const cssClasses = [];
|
|
778
|
-
cssClasses.push(styles$
|
|
783
|
+
cssClasses.push(styles$x.formLabel);
|
|
779
784
|
className && cssClasses.push(className);
|
|
780
785
|
return cssClasses.filter(css => css).join(' ');
|
|
781
786
|
};
|
|
@@ -812,9 +817,9 @@ const FileInput = (props) => {
|
|
|
812
817
|
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))));
|
|
813
818
|
};
|
|
814
819
|
|
|
815
|
-
var css_248z$
|
|
816
|
-
var styles$
|
|
817
|
-
styleInject(css_248z$
|
|
820
|
+
var css_248z$w = ".Select-module_selectContainer__DHFDZ {\n position: relative; }\n\n.Select-module_select__Fbn38 {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .Select-module_select__Fbn38:hover {\n cursor: pointer; }\n\n.Select-module_selectMenu__8y4kQ {\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";
|
|
821
|
+
var styles$w = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
822
|
+
styleInject(css_248z$w);
|
|
818
823
|
|
|
819
824
|
const Select = (props) => {
|
|
820
825
|
var _a, _b, _c;
|
|
@@ -827,7 +832,7 @@ const Select = (props) => {
|
|
|
827
832
|
const getCssClass = () => {
|
|
828
833
|
const cssClasses = [];
|
|
829
834
|
className && cssClasses.push(className);
|
|
830
|
-
cssClasses.push(styles$
|
|
835
|
+
cssClasses.push(styles$w.select);
|
|
831
836
|
return cssClasses.filter(r => r).join(' ');
|
|
832
837
|
};
|
|
833
838
|
useEffect(() => {
|
|
@@ -945,7 +950,7 @@ const Select = (props) => {
|
|
|
945
950
|
}
|
|
946
951
|
}
|
|
947
952
|
};
|
|
948
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
953
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$w.selectContainer },
|
|
949
954
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
950
955
|
!multiple && renderSingleViewModel(),
|
|
951
956
|
multiple && renderMultipleViewModel(),
|
|
@@ -953,7 +958,7 @@ const Select = (props) => {
|
|
|
953
958
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
954
959
|
isShow &&
|
|
955
960
|
createPortal(React.createElement(React.Fragment, null,
|
|
956
|
-
React.createElement("div", { className: styles$
|
|
961
|
+
React.createElement("div", { className: styles$w.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
|
|
957
962
|
React.createElement(List, null, options && options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
|
|
958
963
|
multiple &&
|
|
959
964
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -961,37 +966,39 @@ const Select = (props) => {
|
|
|
961
966
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
|
|
962
967
|
};
|
|
963
968
|
|
|
964
|
-
var css_248z$
|
|
965
|
-
var styles$
|
|
966
|
-
styleInject(css_248z$
|
|
969
|
+
var css_248z$v = "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 textarea:focus {\n outline: none !important;\n border-color: var(--primary); }\n";
|
|
970
|
+
var styles$v = {};
|
|
971
|
+
styleInject(css_248z$v);
|
|
967
972
|
|
|
968
973
|
const Textarea = (props) => {
|
|
969
974
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
970
975
|
const getCssClass = () => {
|
|
971
976
|
const cssClasses = [];
|
|
972
|
-
cssClasses.push(styles$
|
|
977
|
+
cssClasses.push(styles$v.textarea);
|
|
973
978
|
className && cssClasses.push(className);
|
|
974
979
|
return cssClasses.filter(r => r).join(' ');
|
|
975
980
|
};
|
|
976
981
|
return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
977
982
|
};
|
|
978
983
|
|
|
979
|
-
var css_248z$
|
|
980
|
-
var styles$
|
|
981
|
-
styleInject(css_248z$
|
|
984
|
+
var css_248z$u = ".FormInput-module_formInput__VXZip {\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 color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n -webkit-appearance: none;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n .FormInput-module_formInput__VXZip:focus {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }\n";
|
|
985
|
+
var styles$u = {"formInput":"FormInput-module_formInput__VXZip"};
|
|
986
|
+
styleInject(css_248z$u);
|
|
982
987
|
|
|
983
988
|
const FormInput = (props) => {
|
|
984
989
|
const { value, name, type, placeholder, className = 'form-control', isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
985
990
|
const getCssClasses = () => {
|
|
986
991
|
const cssClasses = [];
|
|
987
|
-
cssClasses.push(styles$
|
|
992
|
+
cssClasses.push(styles$u.formInput);
|
|
988
993
|
className && cssClasses.push(className);
|
|
989
994
|
!isValid && cssClasses.push('is-invalid');
|
|
990
995
|
return cssClasses.filter(css => css).join(' ');
|
|
991
996
|
};
|
|
997
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
992
998
|
const handleOnInput = (value, type, name) => {
|
|
993
999
|
onInput && onInput({ value, type, name });
|
|
994
1000
|
};
|
|
1001
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
995
1002
|
const handleOnChange = (value, type, name) => {
|
|
996
1003
|
onChange && onChange({ value, type, name });
|
|
997
1004
|
};
|
|
@@ -1017,9 +1024,7 @@ const FormInput = (props) => {
|
|
|
1017
1024
|
type === 'autocomplete' &&
|
|
1018
1025
|
React.createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), options: options }),
|
|
1019
1026
|
type === 'checkbox' &&
|
|
1020
|
-
React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''),
|
|
1021
|
-
// onChange={e => handleOnChange((e?.target as HTMLInputElement).checked, type, name as string)}
|
|
1022
|
-
checked: value === 'true' ? true : false }),
|
|
1027
|
+
React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value }),
|
|
1023
1028
|
type === 'radio' &&
|
|
1024
1029
|
React.createElement(React.Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
|
|
1025
1030
|
React.createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
|
|
@@ -1354,16 +1359,16 @@ const DateSelect = (props) => {
|
|
|
1354
1359
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1355
1360
|
// };
|
|
1356
1361
|
|
|
1357
|
-
var css_248z$
|
|
1358
|
-
var styles$
|
|
1359
|
-
styleInject(css_248z$
|
|
1362
|
+
var css_248z$t = ".Drawer-module_drawer__kdQCk {\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 .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n position: inherit;\n z-index: 0; }\n .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n order: 0; }\n .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n order: 2; }\n .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n overflow: hidden; }\n";
|
|
1363
|
+
var styles$t = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
|
|
1364
|
+
styleInject(css_248z$t);
|
|
1360
1365
|
|
|
1361
1366
|
const Drawer = (props) => {
|
|
1362
1367
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1363
1368
|
useEffect(() => {
|
|
1364
|
-
document.body.classList.add(styles$
|
|
1369
|
+
document.body.classList.add(styles$t.drawerOpen);
|
|
1365
1370
|
return () => {
|
|
1366
|
-
document.body.classList.remove(styles$
|
|
1371
|
+
document.body.classList.remove(styles$t.drawerOpen);
|
|
1367
1372
|
};
|
|
1368
1373
|
}, []);
|
|
1369
1374
|
const handleClickBackdrop = () => {
|
|
@@ -1377,10 +1382,10 @@ const DrawerContent = (props) => {
|
|
|
1377
1382
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1378
1383
|
const getCssClasses = () => {
|
|
1379
1384
|
const cssClasses = [];
|
|
1380
|
-
cssClasses.push(styles$
|
|
1381
|
-
shadow && cssClasses.push(styles$
|
|
1382
|
-
!!permanent && cssClasses.push(styles$
|
|
1383
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1385
|
+
cssClasses.push(styles$t.drawer);
|
|
1386
|
+
shadow && cssClasses.push(styles$t.shadow);
|
|
1387
|
+
!!permanent && cssClasses.push(styles$t['permanent']);
|
|
1388
|
+
position === 'left' ? cssClasses.push(styles$t['left']) : cssClasses.push(styles$t['right']);
|
|
1384
1389
|
className && cssClasses.push(className);
|
|
1385
1390
|
return cssClasses.filter(css => css).join(' ');
|
|
1386
1391
|
};
|
|
@@ -1394,9 +1399,9 @@ const DrawerContent = (props) => {
|
|
|
1394
1399
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1395
1400
|
};
|
|
1396
1401
|
|
|
1397
|
-
var css_248z$
|
|
1398
|
-
var styles$
|
|
1399
|
-
styleInject(css_248z$
|
|
1402
|
+
var css_248z$s = ".MenuBody-module_menuBody__u4FIQ {\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 .MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n box-shadow: var(--shadow); }\n";
|
|
1403
|
+
var styles$s = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1404
|
+
styleInject(css_248z$s);
|
|
1400
1405
|
|
|
1401
1406
|
const MenuBody = (props) => {
|
|
1402
1407
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1427,8 +1432,8 @@ const MenuBody = (props) => {
|
|
|
1427
1432
|
}, [menuBodyRef]);
|
|
1428
1433
|
const getCssClasses = () => {
|
|
1429
1434
|
const cssClasses = [];
|
|
1430
|
-
cssClasses.push(styles$
|
|
1431
|
-
shadow && cssClasses.push(styles$
|
|
1435
|
+
cssClasses.push(styles$s.menuBody);
|
|
1436
|
+
shadow && cssClasses.push(styles$s.shadow);
|
|
1432
1437
|
className && cssClasses.push(className);
|
|
1433
1438
|
return cssClasses.filter(css => css).join(' ');
|
|
1434
1439
|
};
|
|
@@ -1440,9 +1445,9 @@ const MenuBody = (props) => {
|
|
|
1440
1445
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1441
1446
|
};
|
|
1442
1447
|
|
|
1443
|
-
var css_248z$
|
|
1444
|
-
var styles$
|
|
1445
|
-
styleInject(css_248z$
|
|
1448
|
+
var css_248z$r = ".Menu-module_menu__p8QL- {\n display: flex; }\n";
|
|
1449
|
+
var styles$r = {"menu":"Menu-module_menu__p8QL-"};
|
|
1450
|
+
styleInject(css_248z$r);
|
|
1446
1451
|
|
|
1447
1452
|
const Menu = (props) => {
|
|
1448
1453
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
@@ -1450,7 +1455,7 @@ const Menu = (props) => {
|
|
|
1450
1455
|
const toggleContainerRef = useRef(null);
|
|
1451
1456
|
const getCssClasses = () => {
|
|
1452
1457
|
const cssClasses = [];
|
|
1453
|
-
cssClasses.push(styles$
|
|
1458
|
+
cssClasses.push(styles$r.menu);
|
|
1454
1459
|
className && cssClasses.push(className);
|
|
1455
1460
|
return cssClasses.filter(css => css).join(' ');
|
|
1456
1461
|
};
|
|
@@ -1463,17 +1468,17 @@ const Menu = (props) => {
|
|
|
1463
1468
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1464
1469
|
};
|
|
1465
1470
|
|
|
1466
|
-
var css_248z$
|
|
1467
|
-
var styles$
|
|
1468
|
-
styleInject(css_248z$
|
|
1471
|
+
var css_248z$q = ".MenuItem-module_menuItem__MeBxN {\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 .MenuItem-module_menuItem__MeBxN.MenuItem-module_menuItemHeader__2l732 {\n margin-bottom: 0;\n font-size: 0.875rem; }\n .MenuItem-module_menuItem__MeBxN:hover {\n cursor: pointer;\n color: #1e2125;\n background-color: rgba(0, 0, 0, 0.04); }\n";
|
|
1472
|
+
var styles$q = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1473
|
+
styleInject(css_248z$q);
|
|
1469
1474
|
|
|
1470
1475
|
const MenuItem = (props) => {
|
|
1471
1476
|
const { children, onClick, type = 'item' } = props;
|
|
1472
1477
|
const getCssClasses = () => {
|
|
1473
1478
|
const cssClasses = [];
|
|
1474
|
-
cssClasses.push(styles$
|
|
1479
|
+
cssClasses.push(styles$q.menuItem);
|
|
1475
1480
|
if (type === 'header') {
|
|
1476
|
-
cssClasses.push(styles$
|
|
1481
|
+
cssClasses.push(styles$q.menuItemHeader);
|
|
1477
1482
|
}
|
|
1478
1483
|
return cssClasses.filter(css => css).join(' ');
|
|
1479
1484
|
};
|
|
@@ -1489,23 +1494,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1489
1494
|
return (React.createElement(Fragment, null, children));
|
|
1490
1495
|
};
|
|
1491
1496
|
|
|
1492
|
-
var css_248z$
|
|
1493
|
-
var styles$
|
|
1494
|
-
styleInject(css_248z$
|
|
1497
|
+
var css_248z$p = ".MenuDivider-module_menuItemDivider__oRP-j {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef; }\n";
|
|
1498
|
+
var styles$p = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1499
|
+
styleInject(css_248z$p);
|
|
1495
1500
|
|
|
1496
|
-
const MenuDivider = () => React.createElement("div", { className: styles$
|
|
1501
|
+
const MenuDivider = () => React.createElement("div", { className: styles$p.menuItemDivider });
|
|
1497
1502
|
|
|
1498
|
-
var css_248z$
|
|
1499
|
-
var styles$
|
|
1500
|
-
styleInject(css_248z$
|
|
1503
|
+
var css_248z$o = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px; }\n";
|
|
1504
|
+
var styles$o = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1505
|
+
styleInject(css_248z$o);
|
|
1501
1506
|
|
|
1502
1507
|
const ExpansionPanelContent = ({ children }) => {
|
|
1503
|
-
return (React.createElement("div", { className: styles$
|
|
1508
|
+
return (React.createElement("div", { className: styles$o.expansionPanelContent }, children));
|
|
1504
1509
|
};
|
|
1505
1510
|
|
|
1506
|
-
var css_248z$
|
|
1507
|
-
var styles$
|
|
1508
|
-
styleInject(css_248z$
|
|
1511
|
+
var css_248z$n = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px; }\n .ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n cursor: pointer;\n background-color: var(--highlight); }\n";
|
|
1512
|
+
var styles$n = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1513
|
+
styleInject(css_248z$n);
|
|
1509
1514
|
|
|
1510
1515
|
const ExpansionPanelHeader = (props) => {
|
|
1511
1516
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1513,15 +1518,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1513
1518
|
e.stopPropagation();
|
|
1514
1519
|
onClick && onClick(e);
|
|
1515
1520
|
};
|
|
1516
|
-
return (React.createElement("div", { className: styles$
|
|
1521
|
+
return (React.createElement("div", { className: styles$n.expansionPanelHeader, onClick: handleClick },
|
|
1517
1522
|
children,
|
|
1518
1523
|
React.createElement("span", { className: "ml-auto text-muted" },
|
|
1519
1524
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1520
1525
|
};
|
|
1521
1526
|
|
|
1522
|
-
var css_248z$
|
|
1523
|
-
var styles$
|
|
1524
|
-
styleInject(css_248z$
|
|
1527
|
+
var css_248z$m = ".ExpansionPanel-module_expansionPanel__m1yQq {\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 .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph {\n margin: 16px 0; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n margin-top: 0; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n margin-bottom: 0; }\n";
|
|
1528
|
+
var styles$m = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1529
|
+
styleInject(css_248z$m);
|
|
1525
1530
|
|
|
1526
1531
|
const ExpansionPanel = (props) => {
|
|
1527
1532
|
const { header, children, isExpanded = false, onChange } = props;
|
|
@@ -1531,9 +1536,9 @@ const ExpansionPanel = (props) => {
|
|
|
1531
1536
|
}, [isExpanded]);
|
|
1532
1537
|
const getCssClasses = () => {
|
|
1533
1538
|
const cssClasses = [];
|
|
1534
|
-
cssClasses.push(styles$
|
|
1539
|
+
cssClasses.push(styles$m.expansionPanel);
|
|
1535
1540
|
if (_isExpanded) {
|
|
1536
|
-
cssClasses.push(styles$
|
|
1541
|
+
cssClasses.push(styles$m.isExpanded);
|
|
1537
1542
|
}
|
|
1538
1543
|
return cssClasses.filter(css => css).join(' ');
|
|
1539
1544
|
};
|
|
@@ -1547,16 +1552,16 @@ const ExpansionPanel = (props) => {
|
|
|
1547
1552
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1548
1553
|
};
|
|
1549
1554
|
|
|
1550
|
-
var css_248z$
|
|
1551
|
-
var styles$
|
|
1552
|
-
styleInject(css_248z$
|
|
1555
|
+
var css_248z$l = ".FloatingActionButton-module_fab__Rw3kd {\n box-shadow: var(--shadow); }\n .FloatingActionButton-module_fab__Rw3kd.FloatingActionButton-module_fixed__XQOkG {\n position: fixed;\n bottom: 16px;\n right: 16px;\n z-index: 1000; }\n";
|
|
1556
|
+
var styles$l = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG"};
|
|
1557
|
+
styleInject(css_248z$l);
|
|
1553
1558
|
|
|
1554
1559
|
const FloatingActionButton = (props) => {
|
|
1555
1560
|
const { className, icon, color = COLOR.primary, fixed, size = SIZE.lg, isActive, disabled, onClick } = props;
|
|
1556
1561
|
const getCssClasses = () => {
|
|
1557
1562
|
const cssClasses = [];
|
|
1558
|
-
cssClasses.push(styles$
|
|
1559
|
-
fixed && cssClasses.push(styles$
|
|
1563
|
+
cssClasses.push(styles$l.fab);
|
|
1564
|
+
fixed && cssClasses.push(styles$l['fixed']);
|
|
1560
1565
|
className && cssClasses.push(className);
|
|
1561
1566
|
return cssClasses.filter(css => css).join(' ');
|
|
1562
1567
|
};
|
|
@@ -1599,11 +1604,16 @@ const Row = (props) => {
|
|
|
1599
1604
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
1600
1605
|
};
|
|
1601
1606
|
|
|
1607
|
+
var css_248z$k = ".Link-module_link__YlJQl {\n color: var(--primary);\n text-decoration: underline; }\n .Link-module_link__YlJQl:hover {\n color: var(--primary-dark); }\n";
|
|
1608
|
+
var styles$k = {"link":"Link-module_link__YlJQl"};
|
|
1609
|
+
styleInject(css_248z$k);
|
|
1610
|
+
|
|
1602
1611
|
const Link = (props) => {
|
|
1603
1612
|
const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
|
|
1604
1613
|
const [status, setStatus] = useState(STATUS.NORMAL);
|
|
1605
1614
|
const getCssClasses = () => {
|
|
1606
1615
|
const cssClasses = [];
|
|
1616
|
+
cssClasses.push(styles$k.link);
|
|
1607
1617
|
className && cssClasses.push(className);
|
|
1608
1618
|
status !== STATUS.NORMAL && cssClasses.push(status);
|
|
1609
1619
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -1617,15 +1627,15 @@ const Link = (props) => {
|
|
|
1617
1627
|
return (React.createElement("a", Object.assign({ className: getCssClasses(), href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
|
|
1618
1628
|
};
|
|
1619
1629
|
|
|
1620
|
-
var css_248z$
|
|
1621
|
-
var styles$
|
|
1622
|
-
styleInject(css_248z$
|
|
1630
|
+
var css_248z$j = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\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.LoadingIndicator-module_loadingIndicator__EC9sx {\n animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n animation-duration: 5000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n width: 24px;\n height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg); }\n to {\n transform: rotate(360deg); } }\n";
|
|
1631
|
+
var styles$j = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1632
|
+
styleInject(css_248z$j);
|
|
1623
1633
|
|
|
1624
1634
|
const LoadingIndicator = (_a) => {
|
|
1625
1635
|
var rest = __rest(_a, []);
|
|
1626
1636
|
const getCssClasses = () => {
|
|
1627
1637
|
const cssClasses = [];
|
|
1628
|
-
cssClasses.push(styles$
|
|
1638
|
+
cssClasses.push(styles$j.loadingIndicator);
|
|
1629
1639
|
return cssClasses.filter(css => css).join(' ');
|
|
1630
1640
|
};
|
|
1631
1641
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -1635,7 +1645,7 @@ const LoadingIndicator = (_a) => {
|
|
|
1635
1645
|
const LoadingIndicatorContainer = ({ children }) => {
|
|
1636
1646
|
const getCssClasses = () => {
|
|
1637
1647
|
const cssClasses = [];
|
|
1638
|
-
cssClasses.push(styles$
|
|
1648
|
+
cssClasses.push(styles$j.loadingIndicatorContainer);
|
|
1639
1649
|
return cssClasses.filter(css => css).join(' ');
|
|
1640
1650
|
};
|
|
1641
1651
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1663,16 +1673,16 @@ class LoadingIndicatorService {
|
|
|
1663
1673
|
}
|
|
1664
1674
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1665
1675
|
|
|
1666
|
-
var css_248z$
|
|
1667
|
-
var styles$
|
|
1668
|
-
styleInject(css_248z$
|
|
1676
|
+
var css_248z$i = ".ModalHeader-module_modalHeader__tw-u- {\n border-bottom: none;\n align-items: center; }\n";
|
|
1677
|
+
var styles$i = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-"};
|
|
1678
|
+
styleInject(css_248z$i);
|
|
1669
1679
|
|
|
1670
1680
|
const ModalHeader = (props) => {
|
|
1671
1681
|
const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
|
|
1672
1682
|
const handleClick = () => {
|
|
1673
1683
|
onClose && onClose();
|
|
1674
1684
|
};
|
|
1675
|
-
return (React.createElement("div", Object.assign({ className: "modal-header " + styles$
|
|
1685
|
+
return (React.createElement("div", Object.assign({ className: "modal-header " + styles$i.modalHeader }, rest),
|
|
1676
1686
|
React.createElement("h5", { className: "modal-title" }, children),
|
|
1677
1687
|
isDismissable &&
|
|
1678
1688
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
|
|
@@ -1680,24 +1690,24 @@ const ModalHeader = (props) => {
|
|
|
1680
1690
|
|
|
1681
1691
|
const ModalBody = ({ children }) => (React.createElement("div", { className: "modal-body" }, children));
|
|
1682
1692
|
|
|
1683
|
-
var css_248z$
|
|
1684
|
-
var styles$
|
|
1685
|
-
styleInject(css_248z$
|
|
1693
|
+
var css_248z$h = ".Modal-module_modal__HMxWV {\n z-index: 1111 !important;\n border-radius: var(--borderRadius); }\n .Modal-module_modal__HMxWV.Modal-module_fullscreen__iepGa {\n width: 100% !important;\n height: 100% !important;\n max-height: 100% !important;\n margin: 0;\n padding: 0; }\n .Modal-module_modal__HMxWV.Modal-module_fullscreen__iepGa .Modal-module_modalContent__9wAwB {\n height: auto;\n min-height: 100%;\n max-height: 100%;\n border-radius: 0;\n overflow: auto; }\n @media (min-width: 320px) {\n .Modal-module_modal__HMxWV.Modal-module_fullscreen__iepGa {\n max-width: 100% !important; } }\n .Modal-module_modal__HMxWV .Modal-module_sm__CsR6U {\n max-width: 300px; }\n .Modal-module_modal__HMxWV .Modal-module_md__lNggx {\n max-width: 500px; }\n .Modal-module_modal__HMxWV .Modal-module_lg__6dtT2 {\n max-width: 1140px; }\n @media (min-width: 576px) {\n .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n max-width: 600px; } }\n";
|
|
1694
|
+
var styles$h = {"modal":"Modal-module_modal__HMxWV","fullscreen":"Modal-module_fullscreen__iepGa","modalContent":"Modal-module_modalContent__9wAwB","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modal-dialog":"Modal-module_modal-dialog__U2wGf"};
|
|
1695
|
+
styleInject(css_248z$h);
|
|
1686
1696
|
|
|
1687
|
-
var css_248z$
|
|
1688
|
-
var styles$
|
|
1689
|
-
styleInject(css_248z$
|
|
1697
|
+
var css_248z$g = ".ModalFooter-module_modalFooter__SNm-f {\n border-top: none; }\n";
|
|
1698
|
+
var styles$g = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1699
|
+
styleInject(css_248z$g);
|
|
1690
1700
|
|
|
1691
|
-
const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$
|
|
1701
|
+
const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$g.modalFooter }, children));
|
|
1692
1702
|
|
|
1693
1703
|
const Modal = (props) => {
|
|
1694
1704
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1695
1705
|
const getCssClass = () => {
|
|
1696
1706
|
const cssClasses = [];
|
|
1697
1707
|
cssClasses.push('modal-dialog modal-dialog-centered');
|
|
1698
|
-
cssClasses.push(styles$
|
|
1699
|
-
!!fullScreen && cssClasses.push(styles$
|
|
1700
|
-
size && cssClasses.push(styles$
|
|
1708
|
+
cssClasses.push(styles$h.modal);
|
|
1709
|
+
!!fullScreen && cssClasses.push(styles$h['fullscreen']);
|
|
1710
|
+
size && cssClasses.push(styles$h[size]);
|
|
1701
1711
|
className && cssClasses.push(className);
|
|
1702
1712
|
return cssClasses.filter(r => r).join(' ');
|
|
1703
1713
|
};
|
|
@@ -1711,9 +1721,9 @@ const Modal = (props) => {
|
|
|
1711
1721
|
onBackdropClick && onBackdropClick();
|
|
1712
1722
|
};
|
|
1713
1723
|
return (React.createElement(Fragment, null,
|
|
1714
|
-
React.createElement("div", { className: "modal show " + styles$
|
|
1724
|
+
React.createElement("div", { className: "modal show " + styles$h.modal, style: { display: 'block' } },
|
|
1715
1725
|
React.createElement("div", { className: getCssClass() },
|
|
1716
|
-
React.createElement("div", { className: 'modal-content ' + (fullScreen ? styles$
|
|
1726
|
+
React.createElement("div", { className: 'modal-content ' + (fullScreen ? styles$h['modalContent'] : undefined) },
|
|
1717
1727
|
header &&
|
|
1718
1728
|
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1719
1729
|
React.createElement(ModalBody, null, children),
|
|
@@ -1916,25 +1926,25 @@ const Sidebar = (props) => {
|
|
|
1916
1926
|
!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)))))))))));
|
|
1917
1927
|
};
|
|
1918
1928
|
|
|
1919
|
-
var css_248z$
|
|
1920
|
-
var styles$
|
|
1921
|
-
styleInject(css_248z$
|
|
1929
|
+
var css_248z$f = ".Snackbar-module_snackbar__O5T2b {\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__E47iD 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 .Snackbar-module_snackbar__O5T2b.Snackbar-module_primary__ZBOTN {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_accent__0MnFy {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_secondary__s8-ez {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_light__Vrd7o {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_dark__U-5io {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n\n.Snackbar-module_text__G5r5D {\n width: 100%;\n padding: 8px 0; }\n\n.Snackbar-module_action__vus2Y {\n margin-left: auto; }\n .Snackbar-module_action__vus2Y:hover {\n cursor: pointer; }\n\n@keyframes Snackbar-module_bounceIn__E47iD {\n 0% {\n opacity: 0; }\n 50% {\n opacity: 0.9; }\n 80% {\n opacity: 1; }\n 100% {\n opacity: 1; } }\n";
|
|
1930
|
+
var styles$f = {"snackbar":"Snackbar-module_snackbar__O5T2b","bounceIn":"Snackbar-module_bounceIn__E47iD","primary":"Snackbar-module_primary__ZBOTN","accent":"Snackbar-module_accent__0MnFy","secondary":"Snackbar-module_secondary__s8-ez","light":"Snackbar-module_light__Vrd7o","dark":"Snackbar-module_dark__U-5io","text":"Snackbar-module_text__G5r5D","action":"Snackbar-module_action__vus2Y"};
|
|
1931
|
+
styleInject(css_248z$f);
|
|
1922
1932
|
|
|
1923
1933
|
const Snackbar = (props) => {
|
|
1924
1934
|
const { children, color = COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
|
|
1925
1935
|
const getCssClasses = () => {
|
|
1926
1936
|
const cssClasses = [];
|
|
1927
|
-
cssClasses.push(styles$
|
|
1937
|
+
cssClasses.push(styles$f.snackbar);
|
|
1928
1938
|
cssClasses.push(`shadow-lg`);
|
|
1929
|
-
cssClasses.push(styles$
|
|
1939
|
+
cssClasses.push(styles$f[color]);
|
|
1930
1940
|
return cssClasses.filter(css => css).join(' ');
|
|
1931
1941
|
};
|
|
1932
1942
|
const handleClickAction = (e) => {
|
|
1933
1943
|
onOk && onOk(e);
|
|
1934
1944
|
};
|
|
1935
1945
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
1936
|
-
React.createElement("div", { className: styles$
|
|
1937
|
-
React.createElement("div", { className: styles$
|
|
1946
|
+
React.createElement("div", { className: styles$f.text }, children),
|
|
1947
|
+
React.createElement("div", { className: styles$f.action + " text-accent", onClick: handleClickAction },
|
|
1938
1948
|
React.createElement("span", null, actionText))));
|
|
1939
1949
|
};
|
|
1940
1950
|
|
|
@@ -1972,29 +1982,29 @@ class SnackbarService {
|
|
|
1972
1982
|
}
|
|
1973
1983
|
const snackbarService = new SnackbarService();
|
|
1974
1984
|
|
|
1975
|
-
var css_248z$
|
|
1976
|
-
var styles$
|
|
1977
|
-
styleInject(css_248z$
|
|
1985
|
+
var css_248z$e = ".SpeedDialActions-module_speedDialActions__cY2i3 {\n margin-bottom: -32px;\n flex-direction: column-reverse;\n padding-bottom: 48px;\n display: flex;\n pointer-events: auto; }\n";
|
|
1986
|
+
var styles$e = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
1987
|
+
styleInject(css_248z$e);
|
|
1978
1988
|
|
|
1979
1989
|
const SpeedDialActions = (props) => {
|
|
1980
1990
|
const { children } = props;
|
|
1981
1991
|
const getCssClasses = () => {
|
|
1982
1992
|
const cssClasses = [];
|
|
1983
|
-
cssClasses.push(styles$
|
|
1993
|
+
cssClasses.push(styles$e.speedDialActions);
|
|
1984
1994
|
return cssClasses.filter(css => css).join(' ');
|
|
1985
1995
|
};
|
|
1986
1996
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
1987
1997
|
};
|
|
1988
1998
|
|
|
1989
|
-
var css_248z$
|
|
1990
|
-
var styles$
|
|
1991
|
-
styleInject(css_248z$
|
|
1999
|
+
var css_248z$d = ".SpeedDial-module_speedDial__W3VN2 {\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";
|
|
2000
|
+
var styles$d = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2001
|
+
styleInject(css_248z$d);
|
|
1992
2002
|
|
|
1993
2003
|
const SpeedDial = (props) => {
|
|
1994
2004
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
1995
2005
|
const getCssClasses = () => {
|
|
1996
2006
|
const cssClasses = [];
|
|
1997
|
-
cssClasses.push(styles$
|
|
2007
|
+
cssClasses.push(styles$d.speedDial);
|
|
1998
2008
|
className && cssClasses.push(className);
|
|
1999
2009
|
return cssClasses.filter(css => css).join(' ');
|
|
2000
2010
|
};
|
|
@@ -2011,15 +2021,15 @@ const SpeedDial = (props) => {
|
|
|
2011
2021
|
React.createElement(SpeedDialActions, null, children)));
|
|
2012
2022
|
};
|
|
2013
2023
|
|
|
2014
|
-
var css_248z$
|
|
2015
|
-
var styles$
|
|
2016
|
-
styleInject(css_248z$
|
|
2024
|
+
var css_248z$c = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px; }\n";
|
|
2025
|
+
var styles$c = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2026
|
+
styleInject(css_248z$c);
|
|
2017
2027
|
|
|
2018
2028
|
const SpeedDialAction = (props) => {
|
|
2019
2029
|
const { icon, color = COLOR.light, onClick, className } = props;
|
|
2020
2030
|
const getCssClasses = () => {
|
|
2021
2031
|
const cssClasses = [];
|
|
2022
|
-
cssClasses.push(styles$
|
|
2032
|
+
cssClasses.push(styles$c.speedDialAction);
|
|
2023
2033
|
className && cssClasses.push(className);
|
|
2024
2034
|
return cssClasses.filter(css => css).join(' ');
|
|
2025
2035
|
};
|
|
@@ -2036,15 +2046,15 @@ const SpeedDialIcon = (props) => {
|
|
|
2036
2046
|
return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
2037
2047
|
};
|
|
2038
2048
|
|
|
2039
|
-
var css_248z$
|
|
2040
|
-
var styles$
|
|
2041
|
-
styleInject(css_248z$
|
|
2049
|
+
var css_248z$b = ".StepperActions-module_stepperActions__hBUkh {\n display: flex; }\n";
|
|
2050
|
+
var styles$b = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2051
|
+
styleInject(css_248z$b);
|
|
2042
2052
|
|
|
2043
2053
|
const StepperActions = (props) => {
|
|
2044
2054
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2045
2055
|
const getCssClasses = () => {
|
|
2046
2056
|
const cssClasses = [];
|
|
2047
|
-
cssClasses.push(styles$
|
|
2057
|
+
cssClasses.push(styles$b.stepperActions);
|
|
2048
2058
|
className && cssClasses.push(className);
|
|
2049
2059
|
return cssClasses.filter(css => css).join(' ');
|
|
2050
2060
|
};
|
|
@@ -2061,31 +2071,31 @@ const StepPanel = (props) => {
|
|
|
2061
2071
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
2062
2072
|
};
|
|
2063
2073
|
|
|
2064
|
-
var css_248z$
|
|
2065
|
-
var styles$
|
|
2066
|
-
styleInject(css_248z$
|
|
2074
|
+
var css_248z$a = ".StepConnector-module_stepConnector__A7A-7 {\n flex: 1 1 auto;\n flex-shrink: 0;\n min-width: 20px; }\n\n.StepConnector-module_stepConnectorLine__8rQxv {\n display: block;\n border-color: var(--secondary);\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n .StepConnector-module_stepConnectorLine__8rQxv.StepConnector-module_isActive__TUIKV {\n border-color: var(--primary); }\n\n.StepConnector-module_stepConnectorLineHorizontal__i09K0 {\n border-top-style: solid;\n border-top-width: 1px; }\n";
|
|
2075
|
+
var styles$a = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2076
|
+
styleInject(css_248z$a);
|
|
2067
2077
|
|
|
2068
2078
|
const StepConnector = (props) => {
|
|
2069
2079
|
const { isActive, isHorizontal = true } = props;
|
|
2070
2080
|
const getCssClassesConnector = () => {
|
|
2071
2081
|
const cssClasses = [];
|
|
2072
|
-
cssClasses.push(styles$
|
|
2082
|
+
cssClasses.push(styles$a.stepConnector);
|
|
2073
2083
|
return cssClasses.filter(css => css).join(' ');
|
|
2074
2084
|
};
|
|
2075
2085
|
const getCssClassesLine = () => {
|
|
2076
2086
|
const cssClasses = [];
|
|
2077
|
-
cssClasses.push(styles$
|
|
2078
|
-
isActive && cssClasses.push(styles$
|
|
2079
|
-
isHorizontal && cssClasses.push(styles$
|
|
2087
|
+
cssClasses.push(styles$a.stepConnectorLine);
|
|
2088
|
+
isActive && cssClasses.push(styles$a['isActive']);
|
|
2089
|
+
isHorizontal && cssClasses.push(styles$a.stepConnectorLineHorizontal);
|
|
2080
2090
|
return cssClasses.filter(css => css).join(' ');
|
|
2081
2091
|
};
|
|
2082
2092
|
return (React.createElement("div", { className: getCssClassesConnector() },
|
|
2083
2093
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
2084
2094
|
};
|
|
2085
2095
|
|
|
2086
|
-
var css_248z$
|
|
2087
|
-
var styles$
|
|
2088
|
-
styleInject(css_248z$
|
|
2096
|
+
var css_248z$9 = ".Stepper-module_stepper__V6odG {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin-bottom: 10px; }\n .Stepper-module_stepper__V6odG.Stepper-module_isHorizontal__Q-3Wu {\n overflow-x: auto; }\n";
|
|
2097
|
+
var styles$9 = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2098
|
+
styleInject(css_248z$9);
|
|
2089
2099
|
|
|
2090
2100
|
const Stepper = (props) => {
|
|
2091
2101
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2173,8 +2183,8 @@ const Stepper = (props) => {
|
|
|
2173
2183
|
};
|
|
2174
2184
|
const getCssClasses = () => {
|
|
2175
2185
|
const cssClasses = [];
|
|
2176
|
-
cssClasses.push(styles$
|
|
2177
|
-
isHorizontal && cssClasses.push(styles$
|
|
2186
|
+
cssClasses.push(styles$9.stepper);
|
|
2187
|
+
isHorizontal && cssClasses.push(styles$9['isHorizontal']);
|
|
2178
2188
|
return cssClasses.filter(css => css).join(' ');
|
|
2179
2189
|
};
|
|
2180
2190
|
return (React.createElement(React.Fragment, null, steps &&
|
|
@@ -2187,15 +2197,15 @@ const Stepper = (props) => {
|
|
|
2187
2197
|
React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2188
2198
|
};
|
|
2189
2199
|
|
|
2190
|
-
var css_248z$
|
|
2191
|
-
var styles$
|
|
2192
|
-
styleInject(css_248z$
|
|
2200
|
+
var css_248z$8 = ".Typography-module_typography__sw-td {\n text-overflow: ellipsis;\n overflow: hidden !important; }\n";
|
|
2201
|
+
var styles$8 = {"typography":"Typography-module_typography__sw-td"};
|
|
2202
|
+
styleInject(css_248z$8);
|
|
2193
2203
|
|
|
2194
2204
|
const Wrapper = (props) => {
|
|
2195
2205
|
const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
|
|
2196
2206
|
const getCssClasses = () => {
|
|
2197
2207
|
const cssClasses = [];
|
|
2198
|
-
cssClasses.push(styles$
|
|
2208
|
+
cssClasses.push(styles$8.typography);
|
|
2199
2209
|
className && cssClasses.push(className);
|
|
2200
2210
|
return cssClasses.filter(css => css).join(' ');
|
|
2201
2211
|
};
|
|
@@ -2206,14 +2216,13 @@ const Typography = (_a) => {
|
|
|
2206
2216
|
return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
|
|
2207
2217
|
};
|
|
2208
2218
|
|
|
2209
|
-
var css_248z$
|
|
2210
|
-
var styles$
|
|
2211
|
-
styleInject(css_248z$
|
|
2219
|
+
var css_248z$7 = ".Step-module_stepWrapper__IQwq1 {\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 .Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n border-radius: var(--borderRadius); }\n\n.Step-module_step__k42go {\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 .Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n border-radius: 100%;\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04); }\n .Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n width: 18px !important;\n height: 18px !important; }\n\n.Step-module_stepIconCircle__hnxIV svg {\n width: 24px;\n height: 24px; }\n\n.Step-module_stepValue__B0-xv {\n position: absolute;\n color: var(--secondary-contrast-text); }\n .Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n color: var(--primary-contrast-text); }\n";
|
|
2220
|
+
var styles$7 = {"stepWrapper":"Step-module_stepWrapper__IQwq1","hasLabel":"Step-module_hasLabel__LZNvd","disabled":"Step-module_disabled__JnxUP","step":"Step-module_step__k42go","stepIconCircle":"Step-module_stepIconCircle__hnxIV","stepValue":"Step-module_stepValue__B0-xv","isActive":"Step-module_isActive__3GGcl"};
|
|
2221
|
+
styleInject(css_248z$7);
|
|
2212
2222
|
|
|
2213
2223
|
const Step = (props) => {
|
|
2214
2224
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
2215
|
-
const hoverRef =
|
|
2216
|
-
const isHover = useHover(hoverRef);
|
|
2225
|
+
const [hoverRef, isHovered] = useHover();
|
|
2217
2226
|
const handleClick = (event) => {
|
|
2218
2227
|
if (!isDisabled) {
|
|
2219
2228
|
onClick && onClick({ event, value });
|
|
@@ -2221,29 +2230,29 @@ const Step = (props) => {
|
|
|
2221
2230
|
};
|
|
2222
2231
|
const getCssClasses = () => {
|
|
2223
2232
|
const cssClasses = [];
|
|
2224
|
-
cssClasses.push(styles$
|
|
2225
|
-
label && showLabel && cssClasses.push(styles$
|
|
2226
|
-
isDisabled && cssClasses.push(styles$
|
|
2233
|
+
cssClasses.push(styles$7.stepWrapper);
|
|
2234
|
+
label && showLabel && cssClasses.push(styles$7['hasLabel']);
|
|
2235
|
+
isDisabled && cssClasses.push(styles$7['disabled']);
|
|
2227
2236
|
className && cssClasses.push(className);
|
|
2228
2237
|
return cssClasses.filter(css => css).join(' ');
|
|
2229
2238
|
};
|
|
2230
2239
|
const getCssClassesStep = () => {
|
|
2231
2240
|
const cssClasses = [];
|
|
2232
|
-
cssClasses.push(styles$
|
|
2233
|
-
label && showLabel && cssClasses.push(styles$
|
|
2234
|
-
isDisabled && cssClasses.push(styles$
|
|
2241
|
+
cssClasses.push(styles$7.step);
|
|
2242
|
+
label && showLabel && cssClasses.push(styles$7['hasLabel']);
|
|
2243
|
+
isDisabled && cssClasses.push(styles$7['disabled']);
|
|
2235
2244
|
return cssClasses.filter(css => css).join(' ');
|
|
2236
2245
|
};
|
|
2237
2246
|
const getCssClassesStepValue = () => {
|
|
2238
2247
|
const cssClasses = [];
|
|
2239
|
-
cssClasses.push(styles$
|
|
2248
|
+
cssClasses.push(styles$7.stepValue);
|
|
2240
2249
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2241
|
-
isActive && cssClasses.push(styles$
|
|
2250
|
+
isActive && cssClasses.push(styles$7.stepValue['isActive']);
|
|
2242
2251
|
return cssClasses.filter(css => css).join(' ');
|
|
2243
2252
|
};
|
|
2244
2253
|
return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2245
2254
|
React.createElement("div", { className: getCssClassesStep() },
|
|
2246
|
-
React.createElement(Icon, { className: styles$
|
|
2255
|
+
React.createElement(Icon, { className: styles$7.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
|
|
2247
2256
|
React.createElement(CircleSolidIcon, null)),
|
|
2248
2257
|
React.createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
|
|
2249
2258
|
React.createElement(Icon, null,
|
|
@@ -2254,18 +2263,22 @@ const Step = (props) => {
|
|
|
2254
2263
|
React.createElement(Typography, { className: "flex-shrink-0" }, label)));
|
|
2255
2264
|
};
|
|
2256
2265
|
|
|
2266
|
+
var css_248z$6 = ".Table-module_table__DHKNv {\n --bs-table-bg: transparent;\n --bs-table-accent-bg: transparent;\n --bs-table-striped-color: #212529;\n --bs-table-striped-bg: rgba(0, 0, 0, 0.05);\n --bs-table-active-color: #212529;\n --bs-table-active-bg: rgba(0, 0, 0, 0.1);\n --bs-table-hover-color: #212529;\n --bs-table-hover-bg: rgba(0, 0, 0, 0.075);\n width: 100%;\n margin-bottom: 1rem;\n color: #212529;\n vertical-align: top;\n border-color: #dee2e6; }\n .Table-module_table__DHKNv thead {\n vertical-align: bottom; }\n .Table-module_table__DHKNv > :not(caption) > * > * {\n padding: 0.5rem 0.5rem;\n background-color: var(--bs-table-bg);\n border-bottom-width: 1px;\n box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); }\n .Table-module_table__DHKNv > :not(:first-child) {\n border-top: 2px solid currentColor; }\n\n.Table-module_bordered__1Kp1p > :not(caption) > * > * {\n border-width: 0 1px; }\n\n.Table-module_bordered__1Kp1p > :not(caption) > * {\n border-width: 1px 0; }\n\n.Table-module_striped__jmxgE > tbody > tr:nth-of-type(odd) > * {\n --bs-table-accent-bg: var(--bs-table-striped-bg);\n color: var(--bs-table-striped-color); }\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n --bs-table-accent-bg: var(--bs-table-hover-bg);\n color: var(--bs-table-hover-color); }\n\n.Table-module_tableResponsive__ykttB {\n overflow-x: auto; }\n";
|
|
2267
|
+
var styles$6 = {"table":"Table-module_table__DHKNv","bordered":"Table-module_bordered__1Kp1p","striped":"Table-module_striped__jmxgE","hover":"Table-module_hover__P6r3y","tableResponsive":"Table-module_tableResponsive__ykttB"};
|
|
2268
|
+
styleInject(css_248z$6);
|
|
2269
|
+
|
|
2257
2270
|
const Table = (props) => {
|
|
2258
2271
|
const { children, className, bordered, striped, hover, responsive = false } = props;
|
|
2259
2272
|
const getCssClasses = () => {
|
|
2260
2273
|
const cssClasses = [];
|
|
2261
|
-
cssClasses.push(
|
|
2262
|
-
bordered && cssClasses.push('
|
|
2263
|
-
striped && cssClasses.push('
|
|
2264
|
-
hover && cssClasses.push('
|
|
2274
|
+
cssClasses.push(styles$6.table);
|
|
2275
|
+
bordered && cssClasses.push(styles$6['bordered']);
|
|
2276
|
+
striped && cssClasses.push(styles$6['striped']);
|
|
2277
|
+
hover && cssClasses.push(styles$6['hover']);
|
|
2265
2278
|
className && cssClasses.push(className);
|
|
2266
2279
|
return cssClasses.filter(css => css).join(' ');
|
|
2267
2280
|
};
|
|
2268
|
-
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className:
|
|
2281
|
+
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$6.tableResponsive }, children) },
|
|
2269
2282
|
React.createElement("table", { className: getCssClasses() }, children)));
|
|
2270
2283
|
};
|
|
2271
2284
|
|