react-asc 25.5.2 → 25.5.3
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/Form/Form.d.ts +1 -0
- package/components/Form/FormGroup.d.ts +2 -2
- package/index.es.js +169 -161
- package/index.js +169 -161
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -70,93 +70,93 @@ function styleInject(css, ref) {
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
var css_248z$
|
|
74
|
-
var styles$
|
|
75
|
-
styleInject(css_248z$
|
|
73
|
+
var css_248z$16 = ".Alert-module_alert__b4tbk {\n border-radius: var(--borderRadius);\n padding: 6px 16px;\n}\n.Alert-module_alert__b4tbk.Alert-module_shadow__5bz-7 {\n box-shadow: var(--shadow);\n}\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\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}";
|
|
74
|
+
var styles$16 = {"alert":"Alert-module_alert__b4tbk","shadow":"Alert-module_shadow__5bz-7","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"};
|
|
75
|
+
styleInject(css_248z$16);
|
|
76
76
|
|
|
77
77
|
const Alert = (props) => {
|
|
78
78
|
const { children, className, color = exports.COLOR.primary, variant = exports.VARIANT.contained, shadow = true, ...rest } = props;
|
|
79
79
|
const getCssClasses = () => {
|
|
80
80
|
const cssClasses = [];
|
|
81
|
-
cssClasses.push(styles$
|
|
81
|
+
cssClasses.push(styles$16.alert);
|
|
82
82
|
if (variant === exports.VARIANT.contained) {
|
|
83
|
-
cssClasses.push(styles$
|
|
84
|
-
cssClasses.push(styles$
|
|
83
|
+
cssClasses.push(styles$16.contained);
|
|
84
|
+
cssClasses.push(styles$16[color]);
|
|
85
85
|
}
|
|
86
86
|
if (variant === exports.VARIANT.outline) {
|
|
87
|
-
cssClasses.push(styles$
|
|
88
|
-
cssClasses.push(styles$
|
|
87
|
+
cssClasses.push(styles$16.outline);
|
|
88
|
+
cssClasses.push(styles$16[color]);
|
|
89
89
|
}
|
|
90
|
-
shadow && cssClasses.push(styles$
|
|
90
|
+
shadow && cssClasses.push(styles$16['shadow']);
|
|
91
91
|
className && cssClasses.push(className);
|
|
92
92
|
return cssClasses.filter(r => r).join(' ');
|
|
93
93
|
};
|
|
94
94
|
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
95
95
|
};
|
|
96
96
|
|
|
97
|
-
var css_248z$
|
|
98
|
-
var styles$
|
|
99
|
-
styleInject(css_248z$
|
|
97
|
+
var css_248z$15 = ".AppBar-module_appbar__Neyh3 {\n padding: 0.5rem var(--1);\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0;\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n box-shadow: 0 4px 2px -2px var(--shadowColor);\n}";
|
|
98
|
+
var styles$15 = {"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"};
|
|
99
|
+
styleInject(css_248z$15);
|
|
100
100
|
|
|
101
101
|
const AppBar = (props) => {
|
|
102
102
|
const { children, className, color = exports.COLOR.primary, shadow = true, ...rest } = props;
|
|
103
103
|
const getCssClasses = () => {
|
|
104
104
|
const cssClasses = [];
|
|
105
|
-
cssClasses.push(styles$
|
|
106
|
-
cssClasses.push(styles$
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
105
|
+
cssClasses.push(styles$15[color]);
|
|
106
|
+
cssClasses.push(styles$15.appbar);
|
|
107
|
+
shadow && cssClasses.push(styles$15['shadow']);
|
|
108
108
|
className && cssClasses.push(className);
|
|
109
109
|
return cssClasses.filter(r => r).join(' ');
|
|
110
110
|
};
|
|
111
111
|
return (React__default["default"].createElement("nav", { className: getCssClasses(), ...rest }, children));
|
|
112
112
|
};
|
|
113
113
|
|
|
114
|
-
var css_248z$
|
|
115
|
-
var styles$
|
|
116
|
-
styleInject(css_248z$
|
|
114
|
+
var css_248z$14 = ".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}\n.AppBarTitle-module_appbarTitle__RsFg5:hover {\n cursor: pointer;\n}";
|
|
115
|
+
var styles$14 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
116
|
+
styleInject(css_248z$14);
|
|
117
117
|
|
|
118
118
|
const AppBarTitle = (props) => {
|
|
119
119
|
const { children, className, onClick } = props;
|
|
120
120
|
const getCssClass = () => {
|
|
121
121
|
const cssClasses = [];
|
|
122
|
-
cssClasses.push(styles$
|
|
122
|
+
cssClasses.push(styles$14.appbarTitle);
|
|
123
123
|
className && cssClasses.push(className);
|
|
124
124
|
return cssClasses.filter(r => r).join(' ');
|
|
125
125
|
};
|
|
126
126
|
return (React__default["default"].createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
127
127
|
};
|
|
128
128
|
|
|
129
|
-
var css_248z$
|
|
130
|
-
var styles$
|
|
131
|
-
styleInject(css_248z$
|
|
129
|
+
var css_248z$13 = ".Icon-module_icon__lFKCA {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px;\n}\n.Icon-module_icon__lFKCA svg {\n width: inherit;\n height: inherit;\n}\n.Icon-module_icon__lFKCA.Icon-module_primary__3fID- {\n color: var(--primary);\n}\n.Icon-module_icon__lFKCA.Icon-module_accent__aZXGb {\n color: var(--accent);\n}\n.Icon-module_icon__lFKCA.Icon-module_secondary__HKKop {\n color: var(--secondary);\n}\n.Icon-module_icon__lFKCA.Icon-module_light__-ApMm {\n color: var(--light);\n}\n.Icon-module_icon__lFKCA.Icon-module_dark__DpCIK {\n color: var(--dark);\n}";
|
|
130
|
+
var styles$13 = {"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"};
|
|
131
|
+
styleInject(css_248z$13);
|
|
132
132
|
|
|
133
133
|
const Icon = (props) => {
|
|
134
134
|
const { children, iconColor, className, ...rest } = props;
|
|
135
135
|
const getCssClasses = () => {
|
|
136
136
|
const cssClasses = [];
|
|
137
|
-
cssClasses.push(styles$
|
|
138
|
-
iconColor && cssClasses.push(styles$
|
|
137
|
+
cssClasses.push(styles$13.icon);
|
|
138
|
+
iconColor && cssClasses.push(styles$13[iconColor]);
|
|
139
139
|
className && cssClasses.push(className);
|
|
140
140
|
return cssClasses.filter(css => css).join(' ');
|
|
141
141
|
};
|
|
142
142
|
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
143
143
|
};
|
|
144
144
|
|
|
145
|
-
var css_248z$
|
|
146
|
-
var styles$
|
|
147
|
-
styleInject(css_248z$
|
|
145
|
+
var css_248z$12 = ".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}\n.IconButton-module_iconButton__rpCPQ:hover {\n cursor: pointer;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n box-shadow: var(--shadow);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n width: 48px;\n height: 48px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n width: 56px;\n height: 56px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n padding: 0;\n background: transparent;\n color: inherit;\n}\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}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n color: var(--primary);\n}\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}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n color: var(--secondary);\n}\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}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n color: var(--accent);\n}\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}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n color: var(--light);\n}\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}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n color: var(--dark);\n}\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}\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}\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}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n background-color: var(--primary);\n color: var(--white);\n}\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}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n background-color: var(--secondary);\n color: var(--white);\n}\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}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n background-color: var(--accent);\n color: var(--white);\n}\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}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n background-color: var(--light);\n color: var(--dark);\n}\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}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n background-color: var(--dark);\n color: var(--white);\n}\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}\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}\n.IconButton-module_iconButton__rpCPQ:focus:not(.IconButton-module_iconButton__rpCPQ.IconButton-module_disabled__QB0ZV) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}";
|
|
146
|
+
var styles$12 = {"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"};
|
|
147
|
+
styleInject(css_248z$12);
|
|
148
148
|
|
|
149
149
|
const IconButton = (props) => {
|
|
150
150
|
const { children, icon, variant = exports.VARIANT.text, color = exports.COLOR.dark, size = exports.SIZE.md, isActive, disabled, className, shadow, ...rest } = props;
|
|
151
151
|
const getCssClasses = () => {
|
|
152
152
|
const cssClasses = [];
|
|
153
|
-
cssClasses.push(styles$
|
|
154
|
-
cssClasses.push(styles$
|
|
155
|
-
cssClasses.push(styles$
|
|
156
|
-
cssClasses.push(styles$
|
|
157
|
-
isActive && cssClasses.push(styles$
|
|
158
|
-
disabled && cssClasses.push(styles$
|
|
159
|
-
shadow && cssClasses.push(styles$
|
|
153
|
+
cssClasses.push(styles$12[color]);
|
|
154
|
+
cssClasses.push(styles$12[variant]);
|
|
155
|
+
cssClasses.push(styles$12[size]);
|
|
156
|
+
cssClasses.push(styles$12.iconButton);
|
|
157
|
+
isActive && cssClasses.push(styles$12.active);
|
|
158
|
+
disabled && cssClasses.push(styles$12.disabled);
|
|
159
|
+
shadow && cssClasses.push(styles$12.shadow);
|
|
160
160
|
className && cssClasses.push(className);
|
|
161
161
|
return cssClasses.filter(css => css).join(' ');
|
|
162
162
|
};
|
|
@@ -301,9 +301,9 @@ const Portal$1 = ({ children, target = document.body, className }) => {
|
|
|
301
301
|
return reactDom.createPortal(children, containerEl);
|
|
302
302
|
};
|
|
303
303
|
|
|
304
|
-
var css_248z$
|
|
305
|
-
var styles$
|
|
306
|
-
styleInject(css_248z$
|
|
304
|
+
var css_248z$11 = ".Backdrop-module_backdrop__IRMoL {\n height: 100%;\n width: 100%;\n position: absolute;\n opacity: 0.5;\n z-index: 1040;\n top: 0;\n left: 0;\n background-color: #000;\n}\n.Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n opacity: 0;\n}";
|
|
305
|
+
var styles$11 = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
306
|
+
styleInject(css_248z$11);
|
|
307
307
|
|
|
308
308
|
const Backdrop = (props) => {
|
|
309
309
|
const { target = document.body, isTransparent = false, onClick, style, ...rest } = props;
|
|
@@ -313,8 +313,8 @@ const Backdrop = (props) => {
|
|
|
313
313
|
};
|
|
314
314
|
const getCssClasses = () => {
|
|
315
315
|
const cssClasses = [];
|
|
316
|
-
cssClasses.push(styles$
|
|
317
|
-
isTransparent && cssClasses.push(styles$
|
|
316
|
+
cssClasses.push(styles$11.backdrop);
|
|
317
|
+
isTransparent && cssClasses.push(styles$11['isTransparent']);
|
|
318
318
|
return cssClasses.filter(css => css).join(' ');
|
|
319
319
|
};
|
|
320
320
|
const getStyles = () => {
|
|
@@ -324,34 +324,34 @@ const Backdrop = (props) => {
|
|
|
324
324
|
React__default["default"].createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles(), ...rest })));
|
|
325
325
|
};
|
|
326
326
|
|
|
327
|
-
var css_248z
|
|
328
|
-
var styles
|
|
329
|
-
styleInject(css_248z
|
|
327
|
+
var css_248z$10 = ".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}";
|
|
328
|
+
var styles$10 = {"list":"List-module_list__gpZ41"};
|
|
329
|
+
styleInject(css_248z$10);
|
|
330
330
|
|
|
331
331
|
const List = (props) => {
|
|
332
332
|
const { children, className, isFlush, ...rest } = props;
|
|
333
333
|
const getCssClasses = () => {
|
|
334
334
|
const cssClasses = [];
|
|
335
|
-
isFlush && cssClasses.push(styles
|
|
336
|
-
cssClasses.push(styles
|
|
335
|
+
isFlush && cssClasses.push(styles$10.flush);
|
|
336
|
+
cssClasses.push(styles$10.list);
|
|
337
337
|
className && cssClasses.push(className);
|
|
338
338
|
return cssClasses.filter(css => css).join(' ');
|
|
339
339
|
};
|
|
340
340
|
return (React__default["default"].createElement("ul", { className: getCssClasses(), ...rest }, children));
|
|
341
341
|
};
|
|
342
342
|
|
|
343
|
-
var css_248z
|
|
344
|
-
var styles
|
|
345
|
-
styleInject(css_248z
|
|
343
|
+
var css_248z$$ = ".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}\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}\n.ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n border-top-width: 0;\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n color: rgba(0, 0, 0, 0.26);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n cursor: not-allowed;\n background-color: inherit;\n}";
|
|
344
|
+
var styles$$ = {"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"};
|
|
345
|
+
styleInject(css_248z$$);
|
|
346
346
|
|
|
347
347
|
const ListItem = (props) => {
|
|
348
348
|
const { children, color, active, className, disabled, onClick, ...rest } = props;
|
|
349
349
|
const getCssClasses = () => {
|
|
350
350
|
const cssClasses = [];
|
|
351
|
-
cssClasses.push(styles
|
|
352
|
-
color && cssClasses.push(styles
|
|
353
|
-
active && cssClasses.push(styles
|
|
354
|
-
disabled && cssClasses.push(styles
|
|
351
|
+
cssClasses.push(styles$$.listItem);
|
|
352
|
+
color && cssClasses.push(styles$$[color]);
|
|
353
|
+
active && cssClasses.push(styles$$['active']);
|
|
354
|
+
disabled && cssClasses.push(styles$$['disabled']);
|
|
355
355
|
className && cssClasses.push(className);
|
|
356
356
|
return cssClasses.filter(css => css).join(' ');
|
|
357
357
|
};
|
|
@@ -361,32 +361,32 @@ const ListItem = (props) => {
|
|
|
361
361
|
return (React__default["default"].createElement("li", { onClick: handleClick, className: getCssClasses(), ...rest }, children));
|
|
362
362
|
};
|
|
363
363
|
|
|
364
|
-
var css_248z$
|
|
365
|
-
var styles$
|
|
364
|
+
var css_248z$_ = ".ListItemAvatar-module_avatar__sVWfR {\n display: flex;\n align-items: center;\n margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n width: 24px;\n height: 24px;\n}\n.ListItemAvatar-module_avatar__sVWfR img {\n border-radius: 50%;\n}";
|
|
365
|
+
var styles$_ = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
366
|
+
styleInject(css_248z$_);
|
|
367
|
+
|
|
368
|
+
const ListItemAvatar = ({ avatar, ...rest }) => (React__default["default"].createElement("div", { className: styles$_.avatar, ...rest }, avatar));
|
|
369
|
+
|
|
370
|
+
var css_248z$Z = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px;\n}";
|
|
371
|
+
var styles$Z = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
366
372
|
styleInject(css_248z$Z);
|
|
367
373
|
|
|
368
|
-
const
|
|
374
|
+
const ListItemIcon = ({ icon, ...rest }) => (React__default["default"].createElement("div", { className: styles$Z.icon, ...rest }, icon));
|
|
369
375
|
|
|
370
|
-
var css_248z$Y = ".
|
|
371
|
-
var styles$Y = {"
|
|
376
|
+
var css_248z$Y = ".ListItemAction-module_listItemAction__gAQRj {\n display: flex;\n justify-content: center;\n min-width: 40px;\n}\n.ListItemAction-module_listItemAction__gAQRj svg {\n width: 20px;\n height: 20px;\n}";
|
|
377
|
+
var styles$Y = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
372
378
|
styleInject(css_248z$Y);
|
|
373
379
|
|
|
374
|
-
const
|
|
380
|
+
const ListItemAction = ({ children, onClick, ...rest }) => (React__default["default"].createElement("div", { className: styles$Y.listItemAction, onClick: (e) => onClick && onClick(e), ...rest }, children));
|
|
375
381
|
|
|
376
|
-
var css_248z$X = ".
|
|
377
|
-
var styles$X = {"
|
|
382
|
+
var css_248z$X = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
383
|
+
var styles$X = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
378
384
|
styleInject(css_248z$X);
|
|
379
385
|
|
|
380
|
-
const ListItemAction = ({ children, onClick, ...rest }) => (React__default["default"].createElement("div", { className: styles$X.listItemAction, onClick: (e) => onClick && onClick(e), ...rest }, children));
|
|
381
|
-
|
|
382
|
-
var css_248z$W = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
383
|
-
var styles$W = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
384
|
-
styleInject(css_248z$W);
|
|
385
|
-
|
|
386
386
|
const ListItemText = ({ primary, secondary, ...rest }) => {
|
|
387
387
|
const getCssClasses = () => {
|
|
388
388
|
const cssClasses = [];
|
|
389
|
-
cssClasses.push(styles$
|
|
389
|
+
cssClasses.push(styles$X.listItemText);
|
|
390
390
|
return cssClasses.filter(css => css).join(' ');
|
|
391
391
|
};
|
|
392
392
|
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest },
|
|
@@ -397,9 +397,9 @@ const ListItemText = ({ primary, secondary, ...rest }) => {
|
|
|
397
397
|
const ListItemTextPrimary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-primary" }, children));
|
|
398
398
|
const ListItemTextSecondary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
399
399
|
|
|
400
|
-
var css_248z$
|
|
401
|
-
var styles$
|
|
402
|
-
styleInject(css_248z$
|
|
400
|
+
var css_248z$W = ".AutoComplete-module_selectContainer__1kA85 {\n position: relative;\n}\n\n.AutoComplete-module_select__NNYOi {\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 appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.AutoComplete-module_select__NNYOi:hover {\n cursor: pointer;\n}\n.AutoComplete-module_select__NNYOi:focus:not(.AutoComplete-module_select__NNYOi.AutoComplete-module_disabled__CbGP4) {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n.AutoComplete-module_select__NNYOi:disabled, .AutoComplete-module_select__NNYOi:read-only {\n background-color: #e9ecef;\n}\n.AutoComplete-module_select__NNYOi:disabled:hover {\n cursor: not-allowed;\n}\n.AutoComplete-module_select__NNYOi:read-only:hover {\n cursor: inherit;\n}\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}";
|
|
401
|
+
var styles$W = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
402
|
+
styleInject(css_248z$W);
|
|
403
403
|
|
|
404
404
|
// preset value
|
|
405
405
|
// enter -> delay? -> show results
|
|
@@ -447,7 +447,7 @@ const AutoComplete = (props) => {
|
|
|
447
447
|
const getCssClass = () => {
|
|
448
448
|
const cssClasses = [];
|
|
449
449
|
className && cssClasses.push(className);
|
|
450
|
-
cssClasses.push(styles$
|
|
450
|
+
cssClasses.push(styles$W.select);
|
|
451
451
|
return cssClasses.filter(r => r).join(' ');
|
|
452
452
|
};
|
|
453
453
|
const show = () => setIsShow(true);
|
|
@@ -471,28 +471,28 @@ const AutoComplete = (props) => {
|
|
|
471
471
|
setModel('');
|
|
472
472
|
setSearchText('');
|
|
473
473
|
};
|
|
474
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
474
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$W.selectContainer },
|
|
475
475
|
React__default["default"].createElement("div", { className: "d-flex" },
|
|
476
476
|
React__default["default"].createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
477
477
|
showClearButton && model?.length > 0 &&
|
|
478
478
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
479
479
|
isShow &&
|
|
480
480
|
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
481
|
-
React__default["default"].createElement("div", { className: styles$
|
|
481
|
+
React__default["default"].createElement("div", { className: styles$W.selectMenu },
|
|
482
482
|
React__default["default"].createElement(List, null, _options && _options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
483
483
|
React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
484
484
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
485
485
|
};
|
|
486
486
|
|
|
487
|
-
var css_248z$
|
|
488
|
-
var styles$
|
|
489
|
-
styleInject(css_248z$
|
|
487
|
+
var css_248z$V = ".Badge-module_badgeContainer__3nZBs {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\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}\n.Badge-module_badge__9ImR0.Badge-module_primary__41U-t {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Badge-module_badge__9ImR0.Badge-module_accent__OQy2- {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Badge-module_badge__9ImR0.Badge-module_secondary__a9Jfh {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Badge-module_badge__9ImR0.Badge-module_light__4QvQ5 {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Badge-module_badge__9ImR0.Badge-module_dark__g1yUJ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
|
|
488
|
+
var styles$V = {"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"};
|
|
489
|
+
styleInject(css_248z$V);
|
|
490
490
|
|
|
491
491
|
const Badge = (props) => {
|
|
492
492
|
const { children, content, className, color = exports.COLOR.primary, ...rest } = props;
|
|
493
493
|
const [cssClassName] = useCssClasses([
|
|
494
|
-
styles$
|
|
495
|
-
styles$
|
|
494
|
+
styles$V.badge,
|
|
495
|
+
styles$V[color],
|
|
496
496
|
className
|
|
497
497
|
]);
|
|
498
498
|
return (React__default["default"].createElement(BadgeContainer, null,
|
|
@@ -502,39 +502,39 @@ const Badge = (props) => {
|
|
|
502
502
|
const BadgeContainer = (props) => {
|
|
503
503
|
const { children, className, ...rest } = props;
|
|
504
504
|
const [cssClassName] = useCssClasses([
|
|
505
|
-
styles$
|
|
505
|
+
styles$V.badgeContainer,
|
|
506
506
|
className,
|
|
507
507
|
]);
|
|
508
508
|
return (React__default["default"].createElement("div", { className: cssClassName, ...rest }, children));
|
|
509
509
|
};
|
|
510
510
|
|
|
511
|
-
var css_248z$
|
|
512
|
-
var styles$
|
|
513
|
-
styleInject(css_248z$
|
|
511
|
+
var css_248z$U = ".Button-module_button__qeIer {\n text-transform: uppercase;\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}\n.Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow);\n}\n.Button-module_button__qeIer.Button-module_block__JIazf {\n width: 100%;\n}\n.Button-module_button__qeIer:hover:not(:disabled) {\n cursor: pointer;\n}\n.Button-module_button__qeIer:focus:not(:disabled) {\n border-color: var(--primary-highlight);\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem var(--primary-highlight);\n}\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\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}\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\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}\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\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}\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\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}\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n background-color: var(--dark-dark);\n}\n.Button-module_btnContained__16y5l:disabled {\n color: rgba(0, 0, 0, 0.26);\n box-shadow: none;\n background-color: rgba(0, 0, 0, 0.12);\n}\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed;\n}\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary);\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n text-decoration: none;\n background: var(--primary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n text-decoration: none;\n background: var(--secondary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n text-decoration: none;\n background: var(--accent-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n text-decoration: none;\n background: var(--light-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n text-decoration: none;\n background: var(--dark-highlight);\n}\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary);\n border-color: var(--primary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n background: var(--primary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary);\n border-color: var(--secondary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background: var(--secondary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent);\n border-color: var(--accent);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n background: var(--accent-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n border-color: var(--light);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n background: var(--light-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark);\n border-color: var(--dark);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n background: var(--dark-highlight);\n}\n.Button-module_btnOutline__CCFPI:disabled {\n color: rgba(0, 0, 0, 0.26);\n border: 1px solid rgba(0, 0, 0, 0.12);\n}\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px;\n}\n.Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px;\n}\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px;\n}\n.Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px;\n}";
|
|
512
|
+
var styles$U = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","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"};
|
|
513
|
+
styleInject(css_248z$U);
|
|
514
514
|
|
|
515
515
|
const ButtonContext = React.createContext({
|
|
516
516
|
color: null
|
|
517
517
|
});
|
|
518
518
|
const useButtonContext = () => React.useContext(ButtonContext);
|
|
519
519
|
|
|
520
|
-
const Button =
|
|
520
|
+
const Button = props => {
|
|
521
521
|
const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block, ...rest } = props;
|
|
522
522
|
const buttonContext = useButtonContext();
|
|
523
523
|
const getCssClasses = () => {
|
|
524
524
|
const cssClasses = [];
|
|
525
|
-
cssClasses.push(styles$
|
|
525
|
+
cssClasses.push(styles$U.button);
|
|
526
526
|
const buttonColor = buttonContext.color || color;
|
|
527
527
|
if (variant !== 'outline' && variant !== 'text') {
|
|
528
|
-
cssClasses.push(styles$
|
|
529
|
-
cssClasses.push(styles$
|
|
528
|
+
cssClasses.push(styles$U.btnContained);
|
|
529
|
+
cssClasses.push(styles$U[buttonColor]);
|
|
530
530
|
}
|
|
531
531
|
if (variant === 'outline') {
|
|
532
|
-
cssClasses.push(styles$
|
|
533
|
-
cssClasses.push(styles$
|
|
532
|
+
cssClasses.push(styles$U.btnOutline);
|
|
533
|
+
cssClasses.push(styles$U[buttonColor]);
|
|
534
534
|
}
|
|
535
535
|
if (variant === 'text') {
|
|
536
|
-
cssClasses.push(styles$
|
|
537
|
-
cssClasses.push(styles$
|
|
536
|
+
cssClasses.push(styles$U.btnText);
|
|
537
|
+
cssClasses.push(styles$U[buttonColor]);
|
|
538
538
|
}
|
|
539
539
|
if (isRounded && variant !== 'text') {
|
|
540
540
|
cssClasses.push(`rounded-pill`);
|
|
@@ -542,29 +542,27 @@ const Button = (props) => {
|
|
|
542
542
|
if (isActive) {
|
|
543
543
|
cssClasses.push('active');
|
|
544
544
|
}
|
|
545
|
-
shadow && cssClasses.push(styles$
|
|
546
|
-
block && cssClasses.push(styles$
|
|
545
|
+
shadow && cssClasses.push(styles$U.shadow);
|
|
546
|
+
block && cssClasses.push(styles$U.block);
|
|
547
547
|
className && cssClasses.push(className);
|
|
548
548
|
return cssClasses.filter(css => css).join(' ');
|
|
549
549
|
};
|
|
550
550
|
return (React__default["default"].createElement("button", { type: "button", className: getCssClasses(), ...rest },
|
|
551
551
|
React__default["default"].createElement("span", { className: "d-flex justify-content-center" },
|
|
552
|
-
startIcon &&
|
|
553
|
-
React__default["default"].createElement(Icon, { className: styles$T.startIcon }, startIcon),
|
|
552
|
+
startIcon && React__default["default"].createElement(Icon, { className: styles$U.startIcon }, startIcon),
|
|
554
553
|
children,
|
|
555
|
-
endIcon &&
|
|
556
|
-
React__default["default"].createElement(Icon, { className: styles$T.endIcon }, endIcon))));
|
|
554
|
+
endIcon && React__default["default"].createElement(Icon, { className: styles$U.endIcon }, endIcon))));
|
|
557
555
|
};
|
|
558
556
|
|
|
559
|
-
var css_248z$
|
|
560
|
-
var styles$
|
|
561
|
-
styleInject(css_248z$
|
|
557
|
+
var css_248z$T = ".ButtonGroup-module_buttonGroup__w6iB- {\n display: inline-flex;\n border-radius: 4px;\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.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}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:last-of-type) {\n border-right: 1px solid #bdbdbd;\n}";
|
|
558
|
+
var styles$T = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
559
|
+
styleInject(css_248z$T);
|
|
562
560
|
|
|
563
561
|
const ButtonGroup = (props) => {
|
|
564
562
|
const { children, className, color, ...rest } = props;
|
|
565
563
|
const getCssClasses = () => {
|
|
566
564
|
const cssClasses = [];
|
|
567
|
-
cssClasses.push(styles$
|
|
565
|
+
cssClasses.push(styles$T.buttonGroup);
|
|
568
566
|
className && cssClasses.push(className);
|
|
569
567
|
return cssClasses.filter(css => css).join(' ');
|
|
570
568
|
};
|
|
@@ -572,15 +570,15 @@ const ButtonGroup = (props) => {
|
|
|
572
570
|
React__default["default"].createElement("div", { className: getCssClasses(), role: "group", ...rest }, children)));
|
|
573
571
|
};
|
|
574
572
|
|
|
575
|
-
var css_248z$
|
|
576
|
-
var styles$
|
|
577
|
-
styleInject(css_248z$
|
|
573
|
+
var css_248z$S = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n list-style: none;\n margin: 0;\n}";
|
|
574
|
+
var styles$S = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
575
|
+
styleInject(css_248z$S);
|
|
578
576
|
|
|
579
577
|
const Breadcrumb = (props) => {
|
|
580
578
|
const { children, className, ...rest } = props;
|
|
581
579
|
const getCssClasses = () => {
|
|
582
580
|
const cssClasses = [];
|
|
583
|
-
cssClasses.push(styles$
|
|
581
|
+
cssClasses.push(styles$S.breadcrumb);
|
|
584
582
|
className && cssClasses.push(className);
|
|
585
583
|
return cssClasses.filter(css => css).join(' ');
|
|
586
584
|
};
|
|
@@ -590,15 +588,15 @@ const Breadcrumb = (props) => {
|
|
|
590
588
|
|
|
591
589
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
592
590
|
|
|
593
|
-
var css_248z$
|
|
594
|
-
var styles$
|
|
595
|
-
styleInject(css_248z$
|
|
591
|
+
var css_248z$R = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\";\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary);\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset;\n}";
|
|
592
|
+
var styles$R = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
593
|
+
styleInject(css_248z$R);
|
|
596
594
|
|
|
597
595
|
const BreadcrumbItem = (props) => {
|
|
598
596
|
const { children, className, isActive, onClick } = props;
|
|
599
597
|
const getCssClasses = () => {
|
|
600
598
|
const cssClasses = [];
|
|
601
|
-
cssClasses.push(styles$
|
|
599
|
+
cssClasses.push(styles$R.breadcrumbItem);
|
|
602
600
|
className && cssClasses.push(className);
|
|
603
601
|
isActive && cssClasses.push('active');
|
|
604
602
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -610,115 +608,115 @@ const BreadcrumbItem = (props) => {
|
|
|
610
608
|
React__default["default"].createElement(ConditionalWrapper, { condition: !isActive, wrapper: (label) => React__default["default"].createElement("a", null, label) }, children)));
|
|
611
609
|
};
|
|
612
610
|
|
|
613
|
-
var css_248z$
|
|
614
|
-
var styles$
|
|
615
|
-
styleInject(css_248z$
|
|
611
|
+
var css_248z$Q = ".Card-module_card__TQdQq {\n background: var(--white);\n border-radius: var(--borderRadius);\n}\n.Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n box-shadow: var(--shadow);\n}";
|
|
612
|
+
var styles$Q = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
613
|
+
styleInject(css_248z$Q);
|
|
616
614
|
|
|
617
615
|
const Card = (props) => {
|
|
618
616
|
const { children, className, shadow = true, ...rest } = props;
|
|
619
617
|
const getCssClasses = () => {
|
|
620
618
|
const cssClasses = [];
|
|
621
|
-
cssClasses.push(styles$
|
|
622
|
-
shadow && cssClasses.push(styles$
|
|
619
|
+
cssClasses.push(styles$Q.card);
|
|
620
|
+
shadow && cssClasses.push(styles$Q.shadow);
|
|
623
621
|
className && cssClasses.push(className);
|
|
624
622
|
return cssClasses.filter(css => css).join(' ');
|
|
625
623
|
};
|
|
626
624
|
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
627
625
|
};
|
|
628
626
|
|
|
629
|
-
var css_248z$
|
|
630
|
-
var styles$
|
|
631
|
-
styleInject(css_248z$
|
|
627
|
+
var css_248z$P = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
628
|
+
var styles$P = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
629
|
+
styleInject(css_248z$P);
|
|
632
630
|
|
|
633
631
|
const CardBody = (props) => {
|
|
634
632
|
const { children, className, ...rest } = props;
|
|
635
633
|
const getCssClasses = () => {
|
|
636
634
|
const cssClasses = [];
|
|
637
|
-
cssClasses.push(styles$
|
|
635
|
+
cssClasses.push(styles$P.cardBody);
|
|
638
636
|
className && cssClasses.push(className);
|
|
639
637
|
return cssClasses.filter(css => css).join(' ');
|
|
640
638
|
};
|
|
641
639
|
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
642
640
|
};
|
|
643
641
|
|
|
644
|
-
var css_248z$
|
|
645
|
-
var styles$
|
|
646
|
-
styleInject(css_248z$
|
|
642
|
+
var css_248z$O = ".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}\n.CardFooter-module_cardFooter__BpOTG:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);\n}";
|
|
643
|
+
var styles$O = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
644
|
+
styleInject(css_248z$O);
|
|
647
645
|
|
|
648
646
|
const CardFooter = (props) => {
|
|
649
647
|
const { children, className, ...rest } = props;
|
|
650
648
|
const getCssClasses = () => {
|
|
651
649
|
const cssClasses = [];
|
|
652
|
-
cssClasses.push(styles$
|
|
650
|
+
cssClasses.push(styles$O.cardFooter);
|
|
653
651
|
className && cssClasses.push(className);
|
|
654
652
|
return cssClasses.filter(css => css).join(' ');
|
|
655
653
|
};
|
|
656
654
|
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
657
655
|
};
|
|
658
656
|
|
|
659
|
-
var css_248z$
|
|
660
|
-
var styles$
|
|
661
|
-
styleInject(css_248z$
|
|
657
|
+
var css_248z$N = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
658
|
+
var styles$N = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
659
|
+
styleInject(css_248z$N);
|
|
662
660
|
|
|
663
661
|
const CardSubtitle = (props) => {
|
|
664
662
|
const { children, className, ...rest } = props;
|
|
665
663
|
const getCssClasses = () => {
|
|
666
664
|
const cssClasses = [];
|
|
667
|
-
cssClasses.push(styles$
|
|
665
|
+
cssClasses.push(styles$N.cardSubtitle);
|
|
668
666
|
className && cssClasses.push(className);
|
|
669
667
|
return cssClasses.filter(css => css).join(' ');
|
|
670
668
|
};
|
|
671
669
|
return (React__default["default"].createElement("p", { className: getCssClasses(), ...rest }, children));
|
|
672
670
|
};
|
|
673
671
|
|
|
674
|
-
var css_248z$
|
|
675
|
-
var styles$
|
|
676
|
-
styleInject(css_248z$
|
|
672
|
+
var css_248z$M = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
673
|
+
var styles$M = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
674
|
+
styleInject(css_248z$M);
|
|
677
675
|
|
|
678
676
|
const CardText = (props) => {
|
|
679
677
|
const { children, className, ...rest } = props;
|
|
680
678
|
const getCssClasses = () => {
|
|
681
679
|
const cssClasses = [];
|
|
682
|
-
cssClasses.push(styles$
|
|
680
|
+
cssClasses.push(styles$M.cardText);
|
|
683
681
|
className && cssClasses.push(className);
|
|
684
682
|
return cssClasses.filter(css => css).join(' ');
|
|
685
683
|
};
|
|
686
684
|
return (React__default["default"].createElement("p", { className: getCssClasses(), ...rest }, children));
|
|
687
685
|
};
|
|
688
686
|
|
|
689
|
-
var css_248z$
|
|
690
|
-
var styles$
|
|
691
|
-
styleInject(css_248z$
|
|
687
|
+
var css_248z$L = ".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}";
|
|
688
|
+
var styles$L = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
689
|
+
styleInject(css_248z$L);
|
|
692
690
|
|
|
693
691
|
const CardTitle = (props) => {
|
|
694
692
|
const { children, className, as: As = 'div', ...rest } = props;
|
|
695
693
|
const getCssClasses = () => {
|
|
696
694
|
const cssClasses = [];
|
|
697
|
-
cssClasses.push(styles$
|
|
695
|
+
cssClasses.push(styles$L.cardTitle);
|
|
698
696
|
className && cssClasses.push(className);
|
|
699
697
|
return cssClasses.filter(css => css).join(' ');
|
|
700
698
|
};
|
|
701
699
|
return (React__default["default"].createElement(As, { className: getCssClasses(), ...rest }, children));
|
|
702
700
|
};
|
|
703
701
|
|
|
704
|
-
var css_248z$
|
|
705
|
-
var styles$
|
|
706
|
-
styleInject(css_248z$
|
|
702
|
+
var css_248z$K = ".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}";
|
|
703
|
+
var styles$K = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
704
|
+
styleInject(css_248z$K);
|
|
707
705
|
|
|
708
706
|
const CardImage = (props) => {
|
|
709
707
|
const { src, alt, className, ...rest } = props;
|
|
710
708
|
const getCssClasses = () => {
|
|
711
709
|
const cssClasses = [];
|
|
712
|
-
cssClasses.push(styles$
|
|
710
|
+
cssClasses.push(styles$K.cardImage);
|
|
713
711
|
className && cssClasses.push(className);
|
|
714
712
|
return cssClasses.filter(css => css).join(' ');
|
|
715
713
|
};
|
|
716
714
|
return (React__default["default"].createElement("img", { className: getCssClasses(), src: src, alt: alt, ...rest }));
|
|
717
715
|
};
|
|
718
716
|
|
|
719
|
-
var css_248z$
|
|
720
|
-
var styles$
|
|
721
|
-
styleInject(css_248z$
|
|
717
|
+
var css_248z$J = ".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}\n\n.Checkbox-module_checkboxLabel__nPY4k: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}\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG:hover {\n cursor: not-allowed;\n}";
|
|
718
|
+
var styles$J = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
719
|
+
styleInject(css_248z$J);
|
|
722
720
|
|
|
723
721
|
const Checkbox = (props) => {
|
|
724
722
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly, ...rest } = props;
|
|
@@ -747,8 +745,8 @@ const Checkbox = (props) => {
|
|
|
747
745
|
};
|
|
748
746
|
const getCssClassesLabel = () => {
|
|
749
747
|
const cssClasses = [];
|
|
750
|
-
cssClasses.push(styles$
|
|
751
|
-
disabled && cssClasses.push(styles$
|
|
748
|
+
cssClasses.push(styles$J.checkboxLabel);
|
|
749
|
+
disabled && cssClasses.push(styles$J['disabled']);
|
|
752
750
|
return cssClasses.filter(css => css).join(' ');
|
|
753
751
|
};
|
|
754
752
|
const getIcon = () => {
|
|
@@ -760,24 +758,24 @@ const Checkbox = (props) => {
|
|
|
760
758
|
checkboxElement?.current?.click();
|
|
761
759
|
}
|
|
762
760
|
};
|
|
763
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
761
|
+
return (React__default["default"].createElement("div", { className: styles$J.checkboxContainer },
|
|
764
762
|
React__default["default"].createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
765
763
|
React__default["default"].createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
766
764
|
React__default["default"].createElement("input", { type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value, ...rest })));
|
|
767
765
|
};
|
|
768
766
|
|
|
769
|
-
var css_248z$
|
|
770
|
-
var styles$
|
|
771
|
-
styleInject(css_248z$
|
|
767
|
+
var css_248z$I = ".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}\n.Chip-module_chip__dZ5qz span {\n margin-bottom: 2px;\n}\n.Chip-module_chip__dZ5qz svg {\n width: 18px;\n height: 18px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n margin-left: 5px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n background: var(--primary);\n color: var(--primary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n background: var(--secondary);\n color: var(--secondary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n background: var(--accent);\n color: var(--accent-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n background: var(--primary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n background: var(--secondary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n background: var(--accent-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n box-shadow: var(--shadow);\n}";
|
|
768
|
+
var styles$I = {"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"};
|
|
769
|
+
styleInject(css_248z$I);
|
|
772
770
|
|
|
773
771
|
const Chip = (props) => {
|
|
774
772
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React__default["default"].createElement(TimesCircleSolidIcon, null), style, ...rest } = props;
|
|
775
773
|
const getCssClass = () => {
|
|
776
774
|
const cssClasses = [];
|
|
777
|
-
cssClasses.push(styles$
|
|
778
|
-
cssClasses.push(styles$
|
|
779
|
-
shadow && cssClasses.push(styles$
|
|
780
|
-
onClick && cssClasses.push(styles$
|
|
775
|
+
cssClasses.push(styles$I.chip);
|
|
776
|
+
cssClasses.push(styles$I[color]);
|
|
777
|
+
shadow && cssClasses.push(styles$I['shadow']);
|
|
778
|
+
onClick && cssClasses.push(styles$I['clickable']);
|
|
781
779
|
className && cssClasses.push(className);
|
|
782
780
|
return cssClasses.filter(r => r).join(' ');
|
|
783
781
|
};
|
|
@@ -787,7 +785,7 @@ const Chip = (props) => {
|
|
|
787
785
|
};
|
|
788
786
|
return (React__default["default"].createElement("div", { className: getCssClass(), ...rest, style: style },
|
|
789
787
|
React__default["default"].createElement("span", null, children),
|
|
790
|
-
isDeletable && (React__default["default"].createElement("div", { className: styles$
|
|
788
|
+
isDeletable && (React__default["default"].createElement("div", { className: styles$I.deleteIcon, onClick: (e) => handleClickOnDelete(e) }, deleteIcon))));
|
|
791
789
|
};
|
|
792
790
|
|
|
793
791
|
const CssTransition = (props) => {
|
|
@@ -865,29 +863,29 @@ const CssTransition = (props) => {
|
|
|
865
863
|
React__default["default"].createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
866
864
|
};
|
|
867
865
|
|
|
868
|
-
var css_248z$
|
|
869
|
-
var styles$
|
|
870
|
-
styleInject(css_248z$
|
|
866
|
+
var css_248z$H = ".Column-module_column__fcTgl {\n flex: 1 0 0%;\n}\n\n@media (max-width: 575.98px) {\n .Column-module_column__fcTgl {\n flex: 1;\n }\n}";
|
|
867
|
+
var styles$H = {"column":"Column-module_column__fcTgl"};
|
|
868
|
+
styleInject(css_248z$H);
|
|
871
869
|
|
|
872
870
|
const Column = (props) => {
|
|
873
871
|
const { children, className, ...rest } = props;
|
|
874
872
|
const getCssClasses = () => {
|
|
875
873
|
const cssClasses = [];
|
|
876
|
-
cssClasses.push(styles$
|
|
874
|
+
cssClasses.push(styles$H.column);
|
|
877
875
|
className && cssClasses.push(className);
|
|
878
876
|
return cssClasses.filter(css => css).join(' ');
|
|
879
877
|
};
|
|
880
878
|
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
881
879
|
};
|
|
882
880
|
|
|
883
|
-
var css_248z$
|
|
884
|
-
var styles$
|
|
885
|
-
styleInject(css_248z$
|
|
881
|
+
var css_248z$G = ".Row-module_row__bTIWp {\n display: flex;\n gap: 15px;\n flex-wrap: wrap;\n}\n.Row-module_row__bTIWp > * {\n flex-shrink: 0;\n width: 100%;\n min-width: 0;\n max-width: 100%;\n}";
|
|
882
|
+
var styles$G = {"row":"Row-module_row__bTIWp"};
|
|
883
|
+
styleInject(css_248z$G);
|
|
886
884
|
|
|
887
885
|
const Row = ({ children, direction = 'row', className, ...rest }) => {
|
|
888
886
|
const getCssClasses = () => {
|
|
889
887
|
const cssClasses = [];
|
|
890
|
-
cssClasses.push(styles$
|
|
888
|
+
cssClasses.push(styles$G.row);
|
|
891
889
|
className && cssClasses.push(className);
|
|
892
890
|
direction && cssClasses.push(`flex-${direction}`);
|
|
893
891
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -895,6 +893,10 @@ const Row = ({ children, direction = 'row', className, ...rest }) => {
|
|
|
895
893
|
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
896
894
|
};
|
|
897
895
|
|
|
896
|
+
var css_248z$F = ".Form-module_form__h9CkF > div {\n margin-bottom: 10px;\n}\n.Form-module_form__h9CkF :last-child {\n margin-bottom: 0;\n}";
|
|
897
|
+
var styles$F = {"form":"Form-module_form__h9CkF"};
|
|
898
|
+
styleInject(css_248z$F);
|
|
899
|
+
|
|
898
900
|
var css_248z$E = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
|
|
899
901
|
var styles$E = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
900
902
|
styleInject(css_248z$E);
|
|
@@ -906,8 +908,8 @@ const FormError = (props) => {
|
|
|
906
908
|
};
|
|
907
909
|
|
|
908
910
|
const FormGroup = (props) => {
|
|
909
|
-
const { children, className
|
|
910
|
-
return
|
|
911
|
+
const { children, className } = props;
|
|
912
|
+
return React__default["default"].createElement("div", { className: className }, children);
|
|
911
913
|
};
|
|
912
914
|
|
|
913
915
|
const FormHint = (props) => {
|
|
@@ -1207,6 +1209,12 @@ class Form extends React.Component {
|
|
|
1207
1209
|
submitOnEnter: props.submitOnEnter !== undefined ? props.submitOnEnter : true,
|
|
1208
1210
|
};
|
|
1209
1211
|
}
|
|
1212
|
+
getCssClasses() {
|
|
1213
|
+
const cssClasses = [];
|
|
1214
|
+
cssClasses.push(styles$F.form);
|
|
1215
|
+
this.props.className && cssClasses.push(this.props.className);
|
|
1216
|
+
return cssClasses.filter(css => css).join(' ');
|
|
1217
|
+
}
|
|
1210
1218
|
static getDerivedStateFromProps(nextProps, state) {
|
|
1211
1219
|
if (!state.controls && nextProps.controls) {
|
|
1212
1220
|
return { controls: nextProps.controls };
|
|
@@ -1372,7 +1380,7 @@ class Form extends React.Component {
|
|
|
1372
1380
|
return this.getControl(fieldKey).config.formGroupClassName;
|
|
1373
1381
|
}
|
|
1374
1382
|
render() {
|
|
1375
|
-
return (React__default["default"].createElement("form", { className: this.
|
|
1383
|
+
return (React__default["default"].createElement("form", { className: this.getCssClasses(), ref: this.myForm }, this.state &&
|
|
1376
1384
|
this.state.controls &&
|
|
1377
1385
|
Object.keys(this.state.controls).map(fieldKey => {
|
|
1378
1386
|
return (React__default["default"].createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
|