react-asc 23.7.2 → 23.7.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/Menu/Menu.d.ts +2 -2
- package/components/Menu/MenuBody.d.ts +2 -2
- package/components/Menu/MenuItem.d.ts +3 -8
- package/index.es.js +201 -214
- package/index.js +201 -214
- 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$13 = ".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}";
|
|
91
|
+
var styles$13 = {"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"};
|
|
92
|
+
styleInject(css_248z$13);
|
|
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$13.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$13.contained);
|
|
101
|
+
cssClasses.push(styles$13[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$13.outline);
|
|
105
|
+
cssClasses.push(styles$13[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$13['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$12 = ".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: var(--shadow);\n}";
|
|
115
|
+
var styles$12 = {"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$12);
|
|
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$12[color]);
|
|
123
|
+
cssClasses.push(styles$12.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$12['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$11 = ".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}";
|
|
132
|
+
var styles$11 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
133
|
+
styleInject(css_248z$11);
|
|
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$11.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$10 = ".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}";
|
|
147
|
+
var styles$10 = {"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$10);
|
|
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$10.icon);
|
|
155
|
+
iconColor && cssClasses.push(styles$10[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$$ = ".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}";
|
|
163
|
+
var styles$$ = {"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$$);
|
|
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$$[color]);
|
|
171
|
+
cssClasses.push(styles$$[variant]);
|
|
172
|
+
cssClasses.push(styles$$[size]);
|
|
173
|
+
cssClasses.push(styles$$.iconButton);
|
|
174
|
+
isActive && cssClasses.push(styles$$.active);
|
|
175
|
+
disabled && cssClasses.push(styles$$.disabled);
|
|
176
|
+
shadow && cssClasses.push(styles$$.shadow);
|
|
177
177
|
className && cssClasses.push(className);
|
|
178
178
|
return cssClasses.filter(css => css).join(' ');
|
|
179
179
|
};
|
|
@@ -320,9 +320,9 @@ const Portal = ({ children, target = document.body, className }) => {
|
|
|
320
320
|
return createPortal(children, containerEl);
|
|
321
321
|
};
|
|
322
322
|
|
|
323
|
-
var css_248z$
|
|
324
|
-
var styles$
|
|
325
|
-
styleInject(css_248z$
|
|
323
|
+
var css_248z$_ = ".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}";
|
|
324
|
+
var styles$_ = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
325
|
+
styleInject(css_248z$_);
|
|
326
326
|
|
|
327
327
|
const Backdrop = (props) => {
|
|
328
328
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
@@ -332,8 +332,8 @@ const Backdrop = (props) => {
|
|
|
332
332
|
};
|
|
333
333
|
const getCssClasses = () => {
|
|
334
334
|
const cssClasses = [];
|
|
335
|
-
cssClasses.push(styles$
|
|
336
|
-
isTransparent && cssClasses.push(styles$
|
|
335
|
+
cssClasses.push(styles$_.backdrop);
|
|
336
|
+
isTransparent && cssClasses.push(styles$_['isTransparent']);
|
|
337
337
|
return cssClasses.filter(css => css).join(' ');
|
|
338
338
|
};
|
|
339
339
|
const getStyles = () => {
|
|
@@ -343,34 +343,34 @@ const Backdrop = (props) => {
|
|
|
343
343
|
React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest))));
|
|
344
344
|
};
|
|
345
345
|
|
|
346
|
-
var css_248z
|
|
347
|
-
var styles
|
|
348
|
-
styleInject(css_248z
|
|
346
|
+
var css_248z$Z = ".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}";
|
|
347
|
+
var styles$Z = {"list":"List-module_list__gpZ41"};
|
|
348
|
+
styleInject(css_248z$Z);
|
|
349
349
|
|
|
350
350
|
const List = (props) => {
|
|
351
351
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
352
352
|
const getCssClasses = () => {
|
|
353
353
|
const cssClasses = [];
|
|
354
|
-
isFlush && cssClasses.push(styles
|
|
355
|
-
cssClasses.push(styles
|
|
354
|
+
isFlush && cssClasses.push(styles$Z.flush);
|
|
355
|
+
cssClasses.push(styles$Z.list);
|
|
356
356
|
className && cssClasses.push(className);
|
|
357
357
|
return cssClasses.filter(css => css).join(' ');
|
|
358
358
|
};
|
|
359
359
|
return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
360
360
|
};
|
|
361
361
|
|
|
362
|
-
var css_248z$
|
|
363
|
-
var styles$
|
|
364
|
-
styleInject(css_248z$
|
|
362
|
+
var css_248z$Y = ".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}";
|
|
363
|
+
var styles$Y = {"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"};
|
|
364
|
+
styleInject(css_248z$Y);
|
|
365
365
|
|
|
366
366
|
const ListItem = (props) => {
|
|
367
367
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
368
368
|
const getCssClasses = () => {
|
|
369
369
|
const cssClasses = [];
|
|
370
|
-
cssClasses.push(styles$
|
|
371
|
-
color && cssClasses.push(styles$
|
|
372
|
-
active && cssClasses.push(styles$
|
|
373
|
-
disabled && cssClasses.push(styles$
|
|
370
|
+
cssClasses.push(styles$Y.listItem);
|
|
371
|
+
color && cssClasses.push(styles$Y[color]);
|
|
372
|
+
active && cssClasses.push(styles$Y['active']);
|
|
373
|
+
disabled && cssClasses.push(styles$Y['disabled']);
|
|
374
374
|
className && cssClasses.push(className);
|
|
375
375
|
return cssClasses.filter(css => css).join(' ');
|
|
376
376
|
};
|
|
@@ -380,42 +380,42 @@ const ListItem = (props) => {
|
|
|
380
380
|
return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
381
381
|
};
|
|
382
382
|
|
|
383
|
-
var css_248z$
|
|
384
|
-
var styles$
|
|
385
|
-
styleInject(css_248z$
|
|
383
|
+
var css_248z$X = ".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}";
|
|
384
|
+
var styles$X = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
385
|
+
styleInject(css_248z$X);
|
|
386
386
|
|
|
387
387
|
const ListItemAvatar = (_a) => {
|
|
388
388
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
389
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
389
|
+
return (React.createElement("div", Object.assign({ className: styles$X.avatar }, rest), avatar));
|
|
390
390
|
};
|
|
391
391
|
|
|
392
|
-
var css_248z$
|
|
393
|
-
var styles$
|
|
394
|
-
styleInject(css_248z$
|
|
392
|
+
var css_248z$W = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px;\n}";
|
|
393
|
+
var styles$W = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
394
|
+
styleInject(css_248z$W);
|
|
395
395
|
|
|
396
396
|
const ListItemIcon = (_a) => {
|
|
397
397
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
398
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
398
|
+
return (React.createElement("div", Object.assign({ className: styles$W.icon }, rest), icon));
|
|
399
399
|
};
|
|
400
400
|
|
|
401
|
-
var css_248z$
|
|
402
|
-
var styles$
|
|
403
|
-
styleInject(css_248z$
|
|
401
|
+
var css_248z$V = ".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}";
|
|
402
|
+
var styles$V = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
403
|
+
styleInject(css_248z$V);
|
|
404
404
|
|
|
405
405
|
const ListItemAction = (_a) => {
|
|
406
406
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
407
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
407
|
+
return (React.createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
408
408
|
};
|
|
409
409
|
|
|
410
|
-
var css_248z$
|
|
411
|
-
var styles$
|
|
412
|
-
styleInject(css_248z$
|
|
410
|
+
var css_248z$U = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
411
|
+
var styles$U = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
412
|
+
styleInject(css_248z$U);
|
|
413
413
|
|
|
414
414
|
const ListItemText = (_a) => {
|
|
415
415
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
416
416
|
const getCssClasses = () => {
|
|
417
417
|
const cssClasses = [];
|
|
418
|
-
cssClasses.push(styles$
|
|
418
|
+
cssClasses.push(styles$U.listItemText);
|
|
419
419
|
return cssClasses.filter(css => css).join(' ');
|
|
420
420
|
};
|
|
421
421
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -426,9 +426,9 @@ const ListItemText = (_a) => {
|
|
|
426
426
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
427
427
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
428
428
|
|
|
429
|
-
var css_248z$
|
|
430
|
-
var styles$
|
|
431
|
-
styleInject(css_248z$
|
|
429
|
+
var css_248z$T = ".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}";
|
|
430
|
+
var styles$T = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
431
|
+
styleInject(css_248z$T);
|
|
432
432
|
|
|
433
433
|
// preset value
|
|
434
434
|
// enter -> delay? -> show results
|
|
@@ -474,7 +474,7 @@ const AutoComplete = (props) => {
|
|
|
474
474
|
const getCssClass = () => {
|
|
475
475
|
const cssClasses = [];
|
|
476
476
|
className && cssClasses.push(className);
|
|
477
|
-
cssClasses.push(styles$
|
|
477
|
+
cssClasses.push(styles$T.select);
|
|
478
478
|
return cssClasses.filter(r => r).join(' ');
|
|
479
479
|
};
|
|
480
480
|
const show = () => setIsShow(true);
|
|
@@ -498,28 +498,28 @@ const AutoComplete = (props) => {
|
|
|
498
498
|
setModel('');
|
|
499
499
|
setSearchText('');
|
|
500
500
|
};
|
|
501
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
501
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$T.selectContainer },
|
|
502
502
|
React.createElement("div", { className: "d-flex" },
|
|
503
503
|
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 }),
|
|
504
504
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
505
505
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
506
506
|
isShow &&
|
|
507
507
|
React.createElement(React.Fragment, null,
|
|
508
|
-
React.createElement("div", { className: styles$
|
|
508
|
+
React.createElement("div", { className: styles$T.selectMenu },
|
|
509
509
|
React.createElement(List, null, _options && _options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
510
510
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
511
511
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
512
512
|
};
|
|
513
513
|
|
|
514
|
-
var css_248z$
|
|
515
|
-
var styles$
|
|
516
|
-
styleInject(css_248z$
|
|
514
|
+
var css_248z$S = ".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}";
|
|
515
|
+
var styles$S = {"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"};
|
|
516
|
+
styleInject(css_248z$S);
|
|
517
517
|
|
|
518
518
|
const Badge = (props) => {
|
|
519
519
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
520
520
|
const [cssClassName] = useCssClasses([
|
|
521
|
-
styles$
|
|
522
|
-
styles$
|
|
521
|
+
styles$S.badge,
|
|
522
|
+
styles$S[color],
|
|
523
523
|
className
|
|
524
524
|
]);
|
|
525
525
|
return (React.createElement(BadgeContainer, null,
|
|
@@ -529,15 +529,15 @@ const Badge = (props) => {
|
|
|
529
529
|
const BadgeContainer = (props) => {
|
|
530
530
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
531
531
|
const [cssClassName] = useCssClasses([
|
|
532
|
-
styles$
|
|
532
|
+
styles$S.badgeContainer,
|
|
533
533
|
className,
|
|
534
534
|
]);
|
|
535
535
|
return (React.createElement("div", Object.assign({ className: cssClassName }, rest), children));
|
|
536
536
|
};
|
|
537
537
|
|
|
538
|
-
var css_248z$
|
|
539
|
-
var styles$
|
|
540
|
-
styleInject(css_248z$
|
|
538
|
+
var css_248z$R = ".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: #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\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}";
|
|
539
|
+
var styles$R = {"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"};
|
|
540
|
+
styleInject(css_248z$R);
|
|
541
541
|
|
|
542
542
|
const ButtonContext = createContext({
|
|
543
543
|
color: null
|
|
@@ -549,19 +549,19 @@ const Button = (props) => {
|
|
|
549
549
|
const buttonContext = useButtonContext();
|
|
550
550
|
const getCssClasses = () => {
|
|
551
551
|
const cssClasses = [];
|
|
552
|
-
cssClasses.push(styles$
|
|
552
|
+
cssClasses.push(styles$R.button);
|
|
553
553
|
const buttonColor = buttonContext.color || color;
|
|
554
554
|
if (variant !== 'outline' && variant !== 'text') {
|
|
555
|
-
cssClasses.push(styles$
|
|
556
|
-
cssClasses.push(styles$
|
|
555
|
+
cssClasses.push(styles$R.btnContained);
|
|
556
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
557
557
|
}
|
|
558
558
|
if (variant === 'outline') {
|
|
559
|
-
cssClasses.push(styles$
|
|
560
|
-
cssClasses.push(styles$
|
|
559
|
+
cssClasses.push(styles$R.btnOutline);
|
|
560
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
561
561
|
}
|
|
562
562
|
if (variant === 'text') {
|
|
563
|
-
cssClasses.push(styles$
|
|
564
|
-
cssClasses.push(styles$
|
|
563
|
+
cssClasses.push(styles$R.btnText);
|
|
564
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
565
565
|
}
|
|
566
566
|
if (isRounded && variant !== 'text') {
|
|
567
567
|
cssClasses.push(`rounded-pill`);
|
|
@@ -569,29 +569,29 @@ const Button = (props) => {
|
|
|
569
569
|
if (isActive) {
|
|
570
570
|
cssClasses.push('active');
|
|
571
571
|
}
|
|
572
|
-
shadow && cssClasses.push(styles$
|
|
573
|
-
block && cssClasses.push(styles$
|
|
572
|
+
shadow && cssClasses.push(styles$R.shadow);
|
|
573
|
+
block && cssClasses.push(styles$R.block);
|
|
574
574
|
className && cssClasses.push(className);
|
|
575
575
|
return cssClasses.filter(css => css).join(' ');
|
|
576
576
|
};
|
|
577
577
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
578
578
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
579
579
|
startIcon &&
|
|
580
|
-
React.createElement(Icon, { className: styles$
|
|
580
|
+
React.createElement(Icon, { className: styles$R.startIcon }, startIcon),
|
|
581
581
|
children,
|
|
582
582
|
endIcon &&
|
|
583
|
-
React.createElement(Icon, { className: styles$
|
|
583
|
+
React.createElement(Icon, { className: styles$R.endIcon }, endIcon))));
|
|
584
584
|
};
|
|
585
585
|
|
|
586
|
-
var css_248z$
|
|
587
|
-
var styles$
|
|
588
|
-
styleInject(css_248z$
|
|
586
|
+
var css_248z$Q = ".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}";
|
|
587
|
+
var styles$Q = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
588
|
+
styleInject(css_248z$Q);
|
|
589
589
|
|
|
590
590
|
const ButtonGroup = (props) => {
|
|
591
591
|
const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
|
|
592
592
|
const getCssClasses = () => {
|
|
593
593
|
const cssClasses = [];
|
|
594
|
-
cssClasses.push(styles$
|
|
594
|
+
cssClasses.push(styles$Q.buttonGroup);
|
|
595
595
|
className && cssClasses.push(className);
|
|
596
596
|
return cssClasses.filter(css => css).join(' ');
|
|
597
597
|
};
|
|
@@ -599,15 +599,15 @@ const ButtonGroup = (props) => {
|
|
|
599
599
|
React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
|
|
600
600
|
};
|
|
601
601
|
|
|
602
|
-
var css_248z$
|
|
603
|
-
var styles$
|
|
604
|
-
styleInject(css_248z$
|
|
602
|
+
var css_248z$P = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n list-style: none;\n margin: 0;\n}";
|
|
603
|
+
var styles$P = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
604
|
+
styleInject(css_248z$P);
|
|
605
605
|
|
|
606
606
|
const Breadcrumb = (props) => {
|
|
607
607
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
608
608
|
const getCssClasses = () => {
|
|
609
609
|
const cssClasses = [];
|
|
610
|
-
cssClasses.push(styles$
|
|
610
|
+
cssClasses.push(styles$P.breadcrumb);
|
|
611
611
|
className && cssClasses.push(className);
|
|
612
612
|
return cssClasses.filter(css => css).join(' ');
|
|
613
613
|
};
|
|
@@ -617,15 +617,15 @@ const Breadcrumb = (props) => {
|
|
|
617
617
|
|
|
618
618
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
619
619
|
|
|
620
|
-
var css_248z$
|
|
621
|
-
var styles$
|
|
622
|
-
styleInject(css_248z$
|
|
620
|
+
var css_248z$O = ".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}";
|
|
621
|
+
var styles$O = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
622
|
+
styleInject(css_248z$O);
|
|
623
623
|
|
|
624
624
|
const BreadcrumbItem = (props) => {
|
|
625
625
|
const { children, className, isActive, onClick } = props;
|
|
626
626
|
const getCssClasses = () => {
|
|
627
627
|
const cssClasses = [];
|
|
628
|
-
cssClasses.push(styles$
|
|
628
|
+
cssClasses.push(styles$O.breadcrumbItem);
|
|
629
629
|
className && cssClasses.push(className);
|
|
630
630
|
isActive && cssClasses.push('active');
|
|
631
631
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -637,115 +637,115 @@ const BreadcrumbItem = (props) => {
|
|
|
637
637
|
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
|
|
638
638
|
};
|
|
639
639
|
|
|
640
|
-
var css_248z$
|
|
641
|
-
var styles$
|
|
642
|
-
styleInject(css_248z$
|
|
640
|
+
var css_248z$N = ".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}";
|
|
641
|
+
var styles$N = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
642
|
+
styleInject(css_248z$N);
|
|
643
643
|
|
|
644
644
|
const Card = (props) => {
|
|
645
645
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
646
646
|
const getCssClasses = () => {
|
|
647
647
|
const cssClasses = [];
|
|
648
|
-
cssClasses.push(styles$
|
|
649
|
-
shadow && cssClasses.push(styles$
|
|
648
|
+
cssClasses.push(styles$N.card);
|
|
649
|
+
shadow && cssClasses.push(styles$N.shadow);
|
|
650
650
|
className && cssClasses.push(className);
|
|
651
651
|
return cssClasses.filter(css => css).join(' ');
|
|
652
652
|
};
|
|
653
653
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
654
654
|
};
|
|
655
655
|
|
|
656
|
-
var css_248z$
|
|
657
|
-
var styles$
|
|
658
|
-
styleInject(css_248z$
|
|
656
|
+
var css_248z$M = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
657
|
+
var styles$M = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
658
|
+
styleInject(css_248z$M);
|
|
659
659
|
|
|
660
660
|
const CardBody = (props) => {
|
|
661
661
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
662
662
|
const getCssClasses = () => {
|
|
663
663
|
const cssClasses = [];
|
|
664
|
-
cssClasses.push(styles$
|
|
664
|
+
cssClasses.push(styles$M.cardBody);
|
|
665
665
|
className && cssClasses.push(className);
|
|
666
666
|
return cssClasses.filter(css => css).join(' ');
|
|
667
667
|
};
|
|
668
668
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
669
669
|
};
|
|
670
670
|
|
|
671
|
-
var css_248z$
|
|
672
|
-
var styles$
|
|
673
|
-
styleInject(css_248z$
|
|
671
|
+
var css_248z$L = ".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}";
|
|
672
|
+
var styles$L = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
673
|
+
styleInject(css_248z$L);
|
|
674
674
|
|
|
675
675
|
const CardFooter = (props) => {
|
|
676
676
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
677
677
|
const getCssClasses = () => {
|
|
678
678
|
const cssClasses = [];
|
|
679
|
-
cssClasses.push(styles$
|
|
679
|
+
cssClasses.push(styles$L.cardFooter);
|
|
680
680
|
className && cssClasses.push(className);
|
|
681
681
|
return cssClasses.filter(css => css).join(' ');
|
|
682
682
|
};
|
|
683
683
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
684
684
|
};
|
|
685
685
|
|
|
686
|
-
var css_248z$
|
|
687
|
-
var styles$
|
|
688
|
-
styleInject(css_248z$
|
|
686
|
+
var css_248z$K = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
687
|
+
var styles$K = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
688
|
+
styleInject(css_248z$K);
|
|
689
689
|
|
|
690
690
|
const CardSubtitle = (props) => {
|
|
691
691
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
692
692
|
const getCssClasses = () => {
|
|
693
693
|
const cssClasses = [];
|
|
694
|
-
cssClasses.push(styles$
|
|
694
|
+
cssClasses.push(styles$K.cardSubtitle);
|
|
695
695
|
className && cssClasses.push(className);
|
|
696
696
|
return cssClasses.filter(css => css).join(' ');
|
|
697
697
|
};
|
|
698
698
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
699
699
|
};
|
|
700
700
|
|
|
701
|
-
var css_248z$
|
|
702
|
-
var styles$
|
|
703
|
-
styleInject(css_248z$
|
|
701
|
+
var css_248z$J = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
702
|
+
var styles$J = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
703
|
+
styleInject(css_248z$J);
|
|
704
704
|
|
|
705
705
|
const CardText = (props) => {
|
|
706
706
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
707
707
|
const getCssClasses = () => {
|
|
708
708
|
const cssClasses = [];
|
|
709
|
-
cssClasses.push(styles$
|
|
709
|
+
cssClasses.push(styles$J.cardText);
|
|
710
710
|
className && cssClasses.push(className);
|
|
711
711
|
return cssClasses.filter(css => css).join(' ');
|
|
712
712
|
};
|
|
713
713
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
714
714
|
};
|
|
715
715
|
|
|
716
|
-
var css_248z$
|
|
717
|
-
var styles$
|
|
718
|
-
styleInject(css_248z$
|
|
716
|
+
var css_248z$I = ".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}";
|
|
717
|
+
var styles$I = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
718
|
+
styleInject(css_248z$I);
|
|
719
719
|
|
|
720
720
|
const CardTitle = (props) => {
|
|
721
721
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
722
722
|
const getCssClasses = () => {
|
|
723
723
|
const cssClasses = [];
|
|
724
|
-
cssClasses.push(styles$
|
|
724
|
+
cssClasses.push(styles$I.cardTitle);
|
|
725
725
|
className && cssClasses.push(className);
|
|
726
726
|
return cssClasses.filter(css => css).join(' ');
|
|
727
727
|
};
|
|
728
728
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
729
729
|
};
|
|
730
730
|
|
|
731
|
-
var css_248z$
|
|
732
|
-
var styles$
|
|
733
|
-
styleInject(css_248z$
|
|
731
|
+
var css_248z$H = ".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}";
|
|
732
|
+
var styles$H = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
733
|
+
styleInject(css_248z$H);
|
|
734
734
|
|
|
735
735
|
const CardImage = (props) => {
|
|
736
736
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
737
737
|
const getCssClasses = () => {
|
|
738
738
|
const cssClasses = [];
|
|
739
|
-
cssClasses.push(styles$
|
|
739
|
+
cssClasses.push(styles$H.cardImage);
|
|
740
740
|
className && cssClasses.push(className);
|
|
741
741
|
return cssClasses.filter(css => css).join(' ');
|
|
742
742
|
};
|
|
743
743
|
return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
744
744
|
};
|
|
745
745
|
|
|
746
|
-
var css_248z$
|
|
747
|
-
var styles$
|
|
748
|
-
styleInject(css_248z$
|
|
746
|
+
var css_248z$G = ".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}";
|
|
747
|
+
var styles$G = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
748
|
+
styleInject(css_248z$G);
|
|
749
749
|
|
|
750
750
|
const Checkbox = (props) => {
|
|
751
751
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -774,8 +774,8 @@ const Checkbox = (props) => {
|
|
|
774
774
|
};
|
|
775
775
|
const getCssClassesLabel = () => {
|
|
776
776
|
const cssClasses = [];
|
|
777
|
-
cssClasses.push(styles$
|
|
778
|
-
disabled && cssClasses.push(styles$
|
|
777
|
+
cssClasses.push(styles$G.checkboxLabel);
|
|
778
|
+
disabled && cssClasses.push(styles$G['disabled']);
|
|
779
779
|
return cssClasses.filter(css => css).join(' ');
|
|
780
780
|
};
|
|
781
781
|
const getIcon = () => {
|
|
@@ -788,24 +788,24 @@ const Checkbox = (props) => {
|
|
|
788
788
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
789
789
|
}
|
|
790
790
|
};
|
|
791
|
-
return (React.createElement("div", { className: styles$
|
|
791
|
+
return (React.createElement("div", { className: styles$G.checkboxContainer },
|
|
792
792
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
793
793
|
React.createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
794
794
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
795
795
|
};
|
|
796
796
|
|
|
797
|
-
var css_248z$
|
|
798
|
-
var styles$
|
|
799
|
-
styleInject(css_248z$
|
|
797
|
+
var css_248z$F = ".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}";
|
|
798
|
+
var styles$F = {"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"};
|
|
799
|
+
styleInject(css_248z$F);
|
|
800
800
|
|
|
801
801
|
const Chip = (props) => {
|
|
802
802
|
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"]);
|
|
803
803
|
const getCssClass = () => {
|
|
804
804
|
const cssClasses = [];
|
|
805
|
-
cssClasses.push(styles$
|
|
806
|
-
cssClasses.push(styles$
|
|
807
|
-
shadow && cssClasses.push(styles$
|
|
808
|
-
onClick && cssClasses.push(styles$
|
|
805
|
+
cssClasses.push(styles$F.chip);
|
|
806
|
+
cssClasses.push(styles$F[color]);
|
|
807
|
+
shadow && cssClasses.push(styles$F['shadow']);
|
|
808
|
+
onClick && cssClasses.push(styles$F['clickable']);
|
|
809
809
|
className && cssClasses.push(className);
|
|
810
810
|
return cssClasses.filter(r => r).join(' ');
|
|
811
811
|
};
|
|
@@ -815,7 +815,7 @@ const Chip = (props) => {
|
|
|
815
815
|
};
|
|
816
816
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
817
817
|
React.createElement("span", null, children),
|
|
818
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
818
|
+
isDeletable && (React.createElement("div", { className: styles$F.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
819
819
|
};
|
|
820
820
|
|
|
821
821
|
const CssTransition = (props) => {
|
|
@@ -893,9 +893,9 @@ const CssTransition = (props) => {
|
|
|
893
893
|
React.createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
894
894
|
};
|
|
895
895
|
|
|
896
|
-
var css_248z$
|
|
897
|
-
var styles$
|
|
898
|
-
styleInject(css_248z$
|
|
896
|
+
var css_248z$E = ".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}";
|
|
897
|
+
var styles$E = {"column":"Column-module_column__fcTgl"};
|
|
898
|
+
styleInject(css_248z$E);
|
|
899
899
|
|
|
900
900
|
const Column = (props) => {
|
|
901
901
|
const { children, className } = props,
|
|
@@ -913,22 +913,22 @@ const Column = (props) => {
|
|
|
913
913
|
// if (md) cssClasses.push(`col-md-${md.toString()}`);
|
|
914
914
|
// if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
|
|
915
915
|
// if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
|
|
916
|
-
cssClasses.push(styles$
|
|
916
|
+
cssClasses.push(styles$E.column);
|
|
917
917
|
className && cssClasses.push(className);
|
|
918
918
|
return cssClasses.filter(css => css).join(' ');
|
|
919
919
|
};
|
|
920
920
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
921
921
|
};
|
|
922
922
|
|
|
923
|
-
var css_248z$
|
|
924
|
-
var styles$
|
|
925
|
-
styleInject(css_248z$
|
|
923
|
+
var css_248z$D = ".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}";
|
|
924
|
+
var styles$D = {"row":"Row-module_row__bTIWp"};
|
|
925
|
+
styleInject(css_248z$D);
|
|
926
926
|
|
|
927
927
|
const Row = (_a) => {
|
|
928
928
|
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
929
929
|
const getCssClasses = () => {
|
|
930
930
|
const cssClasses = [];
|
|
931
|
-
cssClasses.push(styles$
|
|
931
|
+
cssClasses.push(styles$D.row);
|
|
932
932
|
className && cssClasses.push(className);
|
|
933
933
|
direction && cssClasses.push(`flex-${direction}`);
|
|
934
934
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -936,15 +936,15 @@ const Row = (_a) => {
|
|
|
936
936
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
937
937
|
};
|
|
938
938
|
|
|
939
|
-
var css_248z$
|
|
940
|
-
var styles$
|
|
941
|
-
styleInject(css_248z$
|
|
939
|
+
var css_248z$C = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
940
|
+
var styles$C = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
941
|
+
styleInject(css_248z$C);
|
|
942
942
|
|
|
943
943
|
const FormLabel = (_a) => {
|
|
944
944
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
945
945
|
const getCssClasses = () => {
|
|
946
946
|
const cssClasses = [];
|
|
947
|
-
cssClasses.push(styles$
|
|
947
|
+
cssClasses.push(styles$C.formLabel);
|
|
948
948
|
className && cssClasses.push(className);
|
|
949
949
|
return cssClasses.filter(css => css).join(' ');
|
|
950
950
|
};
|
|
@@ -981,9 +981,9 @@ const FileInput = (props) => {
|
|
|
981
981
|
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))));
|
|
982
982
|
};
|
|
983
983
|
|
|
984
|
-
var css_248z$
|
|
985
|
-
var styles$
|
|
986
|
-
styleInject(css_248z$
|
|
984
|
+
var css_248z$B = ".Select-module_selectContainer__DHFDZ {\n position: relative;\n}\n\n.Select-module_select__Fbn38 {\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 align-items: center;\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n flex-wrap: wrap;\n}\n.Select-module_select__Fbn38 > span {\n flex: 1;\n}\n.Select-module_select__Fbn38:hover {\n cursor: pointer;\n}\n.Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\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.Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n background-color: #e9ecef;\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n cursor: not-allowed;\n}\n.Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n cursor: inherit;\n}\n\n.Select-module_chipContainer__1poFF {\n gap: 10px;\n flex: 1;\n display: inline-flex;\n flex-wrap: wrap;\n}\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}";
|
|
985
|
+
var styles$B = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","chipContainer":"Select-module_chipContainer__1poFF","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
986
|
+
styleInject(css_248z$B);
|
|
987
987
|
|
|
988
988
|
const Select = (props) => {
|
|
989
989
|
var _a, _b, _c;
|
|
@@ -996,9 +996,9 @@ const Select = (props) => {
|
|
|
996
996
|
const getCssClass = () => {
|
|
997
997
|
const cssClasses = [];
|
|
998
998
|
className && cssClasses.push(className);
|
|
999
|
-
disabled && cssClasses.push(styles$
|
|
1000
|
-
readOnly && cssClasses.push(styles$
|
|
1001
|
-
cssClasses.push(styles$
|
|
999
|
+
disabled && cssClasses.push(styles$B['disabled']);
|
|
1000
|
+
readOnly && cssClasses.push(styles$B['readOnly']);
|
|
1001
|
+
cssClasses.push(styles$B.select);
|
|
1002
1002
|
return cssClasses.filter(r => r).join(' ');
|
|
1003
1003
|
};
|
|
1004
1004
|
useEffect(() => {
|
|
@@ -1120,16 +1120,16 @@ const Select = (props) => {
|
|
|
1120
1120
|
}
|
|
1121
1121
|
}
|
|
1122
1122
|
};
|
|
1123
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
1123
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$B.selectContainer },
|
|
1124
1124
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
1125
1125
|
!multiple && renderSingleViewModel(),
|
|
1126
1126
|
multiple &&
|
|
1127
|
-
React.createElement("div", { className: styles$
|
|
1127
|
+
React.createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
|
|
1128
1128
|
React.createElement(Icon, { className: "ml-2" },
|
|
1129
1129
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
1130
1130
|
isShow &&
|
|
1131
1131
|
React.createElement(Portal, { className: 'backdrop-root' },
|
|
1132
|
-
React.createElement("div", { className: styles$
|
|
1132
|
+
React.createElement("div", { className: styles$B.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 } },
|
|
1133
1133
|
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) },
|
|
1134
1134
|
multiple &&
|
|
1135
1135
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -1137,33 +1137,33 @@ const Select = (props) => {
|
|
|
1137
1137
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
|
|
1138
1138
|
};
|
|
1139
1139
|
|
|
1140
|
-
var css_248z$
|
|
1141
|
-
var styles$
|
|
1142
|
-
styleInject(css_248z$
|
|
1140
|
+
var css_248z$A = ".Textarea-module_textarea__L5zqa {\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 resize: vertical;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\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 border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n outline: none !important;\n border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|
|
1141
|
+
var styles$A = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1142
|
+
styleInject(css_248z$A);
|
|
1143
1143
|
|
|
1144
1144
|
const Textarea = (props) => {
|
|
1145
1145
|
const { className, error } = props, rest = __rest(props, ["className", "error"]);
|
|
1146
1146
|
const getCssClass = () => {
|
|
1147
1147
|
const cssClasses = [];
|
|
1148
|
-
cssClasses.push(styles$
|
|
1148
|
+
cssClasses.push(styles$A.textarea);
|
|
1149
1149
|
className && cssClasses.push(className);
|
|
1150
|
-
error && cssClasses.push(styles$
|
|
1150
|
+
error && cssClasses.push(styles$A['isInvalid']);
|
|
1151
1151
|
return cssClasses.filter(r => r).join(' ');
|
|
1152
1152
|
};
|
|
1153
1153
|
return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
1154
1154
|
};
|
|
1155
1155
|
|
|
1156
|
-
var css_248z$
|
|
1157
|
-
var styles$
|
|
1158
|
-
styleInject(css_248z$
|
|
1156
|
+
var css_248z$z = ".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}\n.FormInput-module_formInput__VXZip:focus:not(.FormInput-module_formInput__VXZip.FormInput-module_disabled__EjdD9) {\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}\n.FormInput-module_formInput__VXZip.FormInput-module_isInvalid__vQDuz {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|
|
1157
|
+
var styles$z = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1158
|
+
styleInject(css_248z$z);
|
|
1159
1159
|
|
|
1160
1160
|
const FormInput = (props) => {
|
|
1161
1161
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1162
1162
|
const getCssClasses = () => {
|
|
1163
1163
|
const cssClasses = [];
|
|
1164
|
-
cssClasses.push(styles$
|
|
1164
|
+
cssClasses.push(styles$z.formInput);
|
|
1165
1165
|
className && cssClasses.push(className);
|
|
1166
|
-
!isValid && cssClasses.push(styles$
|
|
1166
|
+
!isValid && cssClasses.push(styles$z['isInvalid']);
|
|
1167
1167
|
return cssClasses.filter(css => css).join(' ');
|
|
1168
1168
|
};
|
|
1169
1169
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1211,12 +1211,12 @@ const FormHint = (props) => {
|
|
|
1211
1211
|
return (React.createElement("small", { className: getCssClasses() }, children));
|
|
1212
1212
|
};
|
|
1213
1213
|
|
|
1214
|
-
var css_248z$
|
|
1215
|
-
var styles$
|
|
1216
|
-
styleInject(css_248z$
|
|
1214
|
+
var css_248z$y = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
|
|
1215
|
+
var styles$y = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1216
|
+
styleInject(css_248z$y);
|
|
1217
1217
|
|
|
1218
1218
|
const FormError = (props) => {
|
|
1219
|
-
const { className = styles$
|
|
1219
|
+
const { className = styles$y.isInvalid, errors = [] } = props;
|
|
1220
1220
|
return (React.createElement(Fragment, null, errors &&
|
|
1221
1221
|
React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
|
|
1222
1222
|
};
|
|
@@ -1547,16 +1547,16 @@ const DateSelect = (props) => {
|
|
|
1547
1547
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1548
1548
|
// };
|
|
1549
1549
|
|
|
1550
|
-
var css_248z$
|
|
1551
|
-
var styles$
|
|
1552
|
-
styleInject(css_248z$
|
|
1550
|
+
var css_248z$x = ".Drawer-module_drawer__kdQCk {\n height: 100%;\n z-index: 1101;\n bottom: 0;\n position: fixed;\n background: white;\n min-width: 320px;\n overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n position: inherit;\n z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n order: 0;\n left: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n order: 2;\n right: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n overflow: hidden;\n}";
|
|
1551
|
+
var styles$x = {"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"};
|
|
1552
|
+
styleInject(css_248z$x);
|
|
1553
1553
|
|
|
1554
1554
|
const Drawer = (props) => {
|
|
1555
1555
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1556
1556
|
useEffect(() => {
|
|
1557
|
-
document.body.classList.add(styles$
|
|
1557
|
+
document.body.classList.add(styles$x.drawerOpen);
|
|
1558
1558
|
return () => {
|
|
1559
|
-
document.body.classList.remove(styles$
|
|
1559
|
+
document.body.classList.remove(styles$x.drawerOpen);
|
|
1560
1560
|
};
|
|
1561
1561
|
}, []);
|
|
1562
1562
|
const handleClickBackdrop = () => {
|
|
@@ -1570,10 +1570,10 @@ const DrawerContent = (props) => {
|
|
|
1570
1570
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1571
1571
|
const getCssClasses = () => {
|
|
1572
1572
|
const cssClasses = [];
|
|
1573
|
-
cssClasses.push(styles$
|
|
1574
|
-
shadow && cssClasses.push(styles$
|
|
1575
|
-
!!permanent && cssClasses.push(styles$
|
|
1576
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1573
|
+
cssClasses.push(styles$x.drawer);
|
|
1574
|
+
shadow && cssClasses.push(styles$x.shadow);
|
|
1575
|
+
!!permanent && cssClasses.push(styles$x['permanent']);
|
|
1576
|
+
position === 'left' ? cssClasses.push(styles$x['left']) : cssClasses.push(styles$x['right']);
|
|
1577
1577
|
className && cssClasses.push(className);
|
|
1578
1578
|
return cssClasses.filter(css => css).join(' ');
|
|
1579
1579
|
};
|
|
@@ -1587,9 +1587,9 @@ const DrawerContent = (props) => {
|
|
|
1587
1587
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1588
1588
|
};
|
|
1589
1589
|
|
|
1590
|
-
var css_248z$
|
|
1591
|
-
var styles$
|
|
1592
|
-
styleInject(css_248z$
|
|
1590
|
+
var css_248z$w = ".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: 0px;\n font-size: 1rem;\n color: #212529;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n border-radius: var(--borderRadius);\n}\n.MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n box-shadow: var(--shadow);\n}";
|
|
1591
|
+
var styles$w = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1592
|
+
styleInject(css_248z$w);
|
|
1593
1593
|
|
|
1594
1594
|
const MenuBody = (props) => {
|
|
1595
1595
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1620,8 +1620,8 @@ const MenuBody = (props) => {
|
|
|
1620
1620
|
}, [menuBodyRef]);
|
|
1621
1621
|
const getCssClasses = () => {
|
|
1622
1622
|
const cssClasses = [];
|
|
1623
|
-
cssClasses.push(styles$
|
|
1624
|
-
shadow && cssClasses.push(styles$
|
|
1623
|
+
cssClasses.push(styles$w.menuBody);
|
|
1624
|
+
shadow && cssClasses.push(styles$w.shadow);
|
|
1625
1625
|
className && cssClasses.push(className);
|
|
1626
1626
|
return cssClasses.filter(css => css).join(' ');
|
|
1627
1627
|
};
|
|
@@ -1629,21 +1629,17 @@ const MenuBody = (props) => {
|
|
|
1629
1629
|
onClickBackdrop && onClickBackdrop();
|
|
1630
1630
|
};
|
|
1631
1631
|
return (React.createElement(Portal, { className: 'menu-root' },
|
|
1632
|
-
React.createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1632
|
+
React.createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1633
|
+
React.createElement(List, null, children)),
|
|
1633
1634
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })));
|
|
1634
1635
|
};
|
|
1635
1636
|
|
|
1636
|
-
var css_248z$x = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
1637
|
-
var styles$x = {"menu":"Menu-module_menu__p8QL-"};
|
|
1638
|
-
styleInject(css_248z$x);
|
|
1639
|
-
|
|
1640
1637
|
const Menu = (props) => {
|
|
1641
1638
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
1642
1639
|
const menuContainer = useRef(null);
|
|
1643
1640
|
const toggleContainerRef = useRef(null);
|
|
1644
1641
|
const getCssClasses = () => {
|
|
1645
1642
|
const cssClasses = [];
|
|
1646
|
-
cssClasses.push(styles$x.menu);
|
|
1647
1643
|
className && cssClasses.push(className);
|
|
1648
1644
|
return cssClasses.filter(css => css).join(' ');
|
|
1649
1645
|
};
|
|
@@ -1656,26 +1652,17 @@ const Menu = (props) => {
|
|
|
1656
1652
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1657
1653
|
};
|
|
1658
1654
|
|
|
1659
|
-
var css_248z$w = ".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}\n.MenuItem-module_menuItem__MeBxN.MenuItem-module_menuItemHeader__2l732 {\n margin-bottom: 0;\n font-size: 0.875rem;\n}\n.MenuItem-module_menuItem__MeBxN:hover {\n cursor: pointer;\n color: #1e2125;\n background-color: rgba(0, 0, 0, 0.04);\n}";
|
|
1660
|
-
var styles$w = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1661
|
-
styleInject(css_248z$w);
|
|
1662
|
-
|
|
1663
1655
|
const MenuItem = (props) => {
|
|
1664
|
-
const { children, onClick
|
|
1656
|
+
const { children, onClick } = props, rest = __rest(props, ["children", "onClick"]);
|
|
1665
1657
|
const getCssClasses = () => {
|
|
1666
1658
|
const cssClasses = [];
|
|
1667
|
-
cssClasses.push(styles$w.menuItem);
|
|
1668
|
-
if (type === 'header') {
|
|
1669
|
-
cssClasses.push(styles$w.menuItemHeader);
|
|
1670
|
-
}
|
|
1671
1659
|
return cssClasses.filter(css => css).join(' ');
|
|
1672
1660
|
};
|
|
1673
1661
|
const handleClick = (e) => {
|
|
1674
1662
|
e.stopPropagation();
|
|
1675
1663
|
onClick && onClick(e);
|
|
1676
1664
|
};
|
|
1677
|
-
return (React.createElement(
|
|
1678
|
-
React.createElement("div", { className: getCssClasses(), onClick: handleClick }, children))) }, children));
|
|
1665
|
+
return (React.createElement(ListItem, Object.assign({ className: getCssClasses(), onClick: handleClick }, rest), children));
|
|
1679
1666
|
};
|
|
1680
1667
|
|
|
1681
1668
|
const MenuToggle = ({ children }) => {
|