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.js
CHANGED
|
@@ -95,93 +95,93 @@ function styleInject(css, ref) {
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
var css_248z$
|
|
99
|
-
var styles$
|
|
100
|
-
styleInject(css_248z$
|
|
98
|
+
var css_248z$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}";
|
|
99
|
+
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"};
|
|
100
|
+
styleInject(css_248z$13);
|
|
101
101
|
|
|
102
102
|
const Alert = (props) => {
|
|
103
103
|
const { children, className, color = exports.COLOR.primary, variant = exports.VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
104
104
|
const getCssClasses = () => {
|
|
105
105
|
const cssClasses = [];
|
|
106
|
-
cssClasses.push(styles$
|
|
106
|
+
cssClasses.push(styles$13.alert);
|
|
107
107
|
if (variant === exports.VARIANT.contained) {
|
|
108
|
-
cssClasses.push(styles$
|
|
109
|
-
cssClasses.push(styles$
|
|
108
|
+
cssClasses.push(styles$13.contained);
|
|
109
|
+
cssClasses.push(styles$13[color]);
|
|
110
110
|
}
|
|
111
111
|
if (variant === exports.VARIANT.outline) {
|
|
112
|
-
cssClasses.push(styles$
|
|
113
|
-
cssClasses.push(styles$
|
|
112
|
+
cssClasses.push(styles$13.outline);
|
|
113
|
+
cssClasses.push(styles$13[color]);
|
|
114
114
|
}
|
|
115
|
-
shadow && cssClasses.push(styles$
|
|
115
|
+
shadow && cssClasses.push(styles$13['shadow']);
|
|
116
116
|
className && cssClasses.push(className);
|
|
117
117
|
return cssClasses.filter(r => r).join(' ');
|
|
118
118
|
};
|
|
119
119
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
120
120
|
};
|
|
121
121
|
|
|
122
|
-
var css_248z$
|
|
123
|
-
var styles$
|
|
124
|
-
styleInject(css_248z$
|
|
122
|
+
var css_248z$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}";
|
|
123
|
+
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"};
|
|
124
|
+
styleInject(css_248z$12);
|
|
125
125
|
|
|
126
126
|
const AppBar = (props) => {
|
|
127
127
|
const { children, className, color = exports.COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
128
128
|
const getCssClasses = () => {
|
|
129
129
|
const cssClasses = [];
|
|
130
|
-
cssClasses.push(styles$
|
|
131
|
-
cssClasses.push(styles$
|
|
132
|
-
shadow && cssClasses.push(styles$
|
|
130
|
+
cssClasses.push(styles$12[color]);
|
|
131
|
+
cssClasses.push(styles$12.appbar);
|
|
132
|
+
shadow && cssClasses.push(styles$12['shadow']);
|
|
133
133
|
className && cssClasses.push(className);
|
|
134
134
|
return cssClasses.filter(r => r).join(' ');
|
|
135
135
|
};
|
|
136
136
|
return (React__default["default"].createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
137
137
|
};
|
|
138
138
|
|
|
139
|
-
var css_248z$
|
|
140
|
-
var styles$
|
|
141
|
-
styleInject(css_248z$
|
|
139
|
+
var css_248z$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}";
|
|
140
|
+
var styles$11 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
141
|
+
styleInject(css_248z$11);
|
|
142
142
|
|
|
143
143
|
const AppBarTitle = (props) => {
|
|
144
144
|
const { children, className, onClick } = props;
|
|
145
145
|
const getCssClass = () => {
|
|
146
146
|
const cssClasses = [];
|
|
147
|
-
cssClasses.push(styles$
|
|
147
|
+
cssClasses.push(styles$11.appbarTitle);
|
|
148
148
|
className && cssClasses.push(className);
|
|
149
149
|
return cssClasses.filter(r => r).join(' ');
|
|
150
150
|
};
|
|
151
151
|
return (React__default["default"].createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
152
152
|
};
|
|
153
153
|
|
|
154
|
-
var css_248z$
|
|
155
|
-
var styles$
|
|
156
|
-
styleInject(css_248z$
|
|
154
|
+
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}";
|
|
155
|
+
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"};
|
|
156
|
+
styleInject(css_248z$10);
|
|
157
157
|
|
|
158
158
|
const Icon = (props) => {
|
|
159
159
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
160
160
|
const getCssClasses = () => {
|
|
161
161
|
const cssClasses = [];
|
|
162
|
-
cssClasses.push(styles$
|
|
163
|
-
iconColor && cssClasses.push(styles$
|
|
162
|
+
cssClasses.push(styles$10.icon);
|
|
163
|
+
iconColor && cssClasses.push(styles$10[iconColor]);
|
|
164
164
|
className && cssClasses.push(className);
|
|
165
165
|
return cssClasses.filter(css => css).join(' ');
|
|
166
166
|
};
|
|
167
167
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
168
168
|
};
|
|
169
169
|
|
|
170
|
-
var css_248z
|
|
171
|
-
var styles
|
|
172
|
-
styleInject(css_248z
|
|
170
|
+
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}";
|
|
171
|
+
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"};
|
|
172
|
+
styleInject(css_248z$$);
|
|
173
173
|
|
|
174
174
|
const IconButton = (props) => {
|
|
175
175
|
const { children, icon, variant = exports.VARIANT.text, color = exports.COLOR.dark, size = exports.SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
|
|
176
176
|
const getCssClasses = () => {
|
|
177
177
|
const cssClasses = [];
|
|
178
|
-
cssClasses.push(styles
|
|
179
|
-
cssClasses.push(styles
|
|
180
|
-
cssClasses.push(styles
|
|
181
|
-
cssClasses.push(styles
|
|
182
|
-
isActive && cssClasses.push(styles
|
|
183
|
-
disabled && cssClasses.push(styles
|
|
184
|
-
shadow && cssClasses.push(styles
|
|
178
|
+
cssClasses.push(styles$$[color]);
|
|
179
|
+
cssClasses.push(styles$$[variant]);
|
|
180
|
+
cssClasses.push(styles$$[size]);
|
|
181
|
+
cssClasses.push(styles$$.iconButton);
|
|
182
|
+
isActive && cssClasses.push(styles$$.active);
|
|
183
|
+
disabled && cssClasses.push(styles$$.disabled);
|
|
184
|
+
shadow && cssClasses.push(styles$$.shadow);
|
|
185
185
|
className && cssClasses.push(className);
|
|
186
186
|
return cssClasses.filter(css => css).join(' ');
|
|
187
187
|
};
|
|
@@ -328,9 +328,9 @@ const Portal = ({ children, target = document.body, className }) => {
|
|
|
328
328
|
return reactDom.createPortal(children, containerEl);
|
|
329
329
|
};
|
|
330
330
|
|
|
331
|
-
var css_248z$
|
|
332
|
-
var styles$
|
|
333
|
-
styleInject(css_248z$
|
|
331
|
+
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}";
|
|
332
|
+
var styles$_ = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
333
|
+
styleInject(css_248z$_);
|
|
334
334
|
|
|
335
335
|
const Backdrop = (props) => {
|
|
336
336
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
@@ -340,8 +340,8 @@ const Backdrop = (props) => {
|
|
|
340
340
|
};
|
|
341
341
|
const getCssClasses = () => {
|
|
342
342
|
const cssClasses = [];
|
|
343
|
-
cssClasses.push(styles$
|
|
344
|
-
isTransparent && cssClasses.push(styles$
|
|
343
|
+
cssClasses.push(styles$_.backdrop);
|
|
344
|
+
isTransparent && cssClasses.push(styles$_['isTransparent']);
|
|
345
345
|
return cssClasses.filter(css => css).join(' ');
|
|
346
346
|
};
|
|
347
347
|
const getStyles = () => {
|
|
@@ -351,34 +351,34 @@ const Backdrop = (props) => {
|
|
|
351
351
|
React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest))));
|
|
352
352
|
};
|
|
353
353
|
|
|
354
|
-
var css_248z
|
|
355
|
-
var styles
|
|
356
|
-
styleInject(css_248z
|
|
354
|
+
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}";
|
|
355
|
+
var styles$Z = {"list":"List-module_list__gpZ41"};
|
|
356
|
+
styleInject(css_248z$Z);
|
|
357
357
|
|
|
358
358
|
const List = (props) => {
|
|
359
359
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
360
360
|
const getCssClasses = () => {
|
|
361
361
|
const cssClasses = [];
|
|
362
|
-
isFlush && cssClasses.push(styles
|
|
363
|
-
cssClasses.push(styles
|
|
362
|
+
isFlush && cssClasses.push(styles$Z.flush);
|
|
363
|
+
cssClasses.push(styles$Z.list);
|
|
364
364
|
className && cssClasses.push(className);
|
|
365
365
|
return cssClasses.filter(css => css).join(' ');
|
|
366
366
|
};
|
|
367
367
|
return (React__default["default"].createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
368
368
|
};
|
|
369
369
|
|
|
370
|
-
var css_248z$
|
|
371
|
-
var styles$
|
|
372
|
-
styleInject(css_248z$
|
|
370
|
+
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}";
|
|
371
|
+
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"};
|
|
372
|
+
styleInject(css_248z$Y);
|
|
373
373
|
|
|
374
374
|
const ListItem = (props) => {
|
|
375
375
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
376
376
|
const getCssClasses = () => {
|
|
377
377
|
const cssClasses = [];
|
|
378
|
-
cssClasses.push(styles$
|
|
379
|
-
color && cssClasses.push(styles$
|
|
380
|
-
active && cssClasses.push(styles$
|
|
381
|
-
disabled && cssClasses.push(styles$
|
|
378
|
+
cssClasses.push(styles$Y.listItem);
|
|
379
|
+
color && cssClasses.push(styles$Y[color]);
|
|
380
|
+
active && cssClasses.push(styles$Y['active']);
|
|
381
|
+
disabled && cssClasses.push(styles$Y['disabled']);
|
|
382
382
|
className && cssClasses.push(className);
|
|
383
383
|
return cssClasses.filter(css => css).join(' ');
|
|
384
384
|
};
|
|
@@ -388,42 +388,42 @@ const ListItem = (props) => {
|
|
|
388
388
|
return (React__default["default"].createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
389
389
|
};
|
|
390
390
|
|
|
391
|
-
var css_248z$
|
|
392
|
-
var styles$
|
|
393
|
-
styleInject(css_248z$
|
|
391
|
+
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}";
|
|
392
|
+
var styles$X = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
393
|
+
styleInject(css_248z$X);
|
|
394
394
|
|
|
395
395
|
const ListItemAvatar = (_a) => {
|
|
396
396
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
397
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
397
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$X.avatar }, rest), avatar));
|
|
398
398
|
};
|
|
399
399
|
|
|
400
|
-
var css_248z$
|
|
401
|
-
var styles$
|
|
402
|
-
styleInject(css_248z$
|
|
400
|
+
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}";
|
|
401
|
+
var styles$W = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
402
|
+
styleInject(css_248z$W);
|
|
403
403
|
|
|
404
404
|
const ListItemIcon = (_a) => {
|
|
405
405
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
406
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
406
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$W.icon }, rest), icon));
|
|
407
407
|
};
|
|
408
408
|
|
|
409
|
-
var css_248z$
|
|
410
|
-
var styles$
|
|
411
|
-
styleInject(css_248z$
|
|
409
|
+
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}";
|
|
410
|
+
var styles$V = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
411
|
+
styleInject(css_248z$V);
|
|
412
412
|
|
|
413
413
|
const ListItemAction = (_a) => {
|
|
414
414
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
415
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
415
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
416
416
|
};
|
|
417
417
|
|
|
418
|
-
var css_248z$
|
|
419
|
-
var styles$
|
|
420
|
-
styleInject(css_248z$
|
|
418
|
+
var css_248z$U = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
419
|
+
var styles$U = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
420
|
+
styleInject(css_248z$U);
|
|
421
421
|
|
|
422
422
|
const ListItemText = (_a) => {
|
|
423
423
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
424
424
|
const getCssClasses = () => {
|
|
425
425
|
const cssClasses = [];
|
|
426
|
-
cssClasses.push(styles$
|
|
426
|
+
cssClasses.push(styles$U.listItemText);
|
|
427
427
|
return cssClasses.filter(css => css).join(' ');
|
|
428
428
|
};
|
|
429
429
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -434,9 +434,9 @@ const ListItemText = (_a) => {
|
|
|
434
434
|
const ListItemTextPrimary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-primary" }, children));
|
|
435
435
|
const ListItemTextSecondary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
436
436
|
|
|
437
|
-
var css_248z$
|
|
438
|
-
var styles$
|
|
439
|
-
styleInject(css_248z$
|
|
437
|
+
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}";
|
|
438
|
+
var styles$T = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
439
|
+
styleInject(css_248z$T);
|
|
440
440
|
|
|
441
441
|
// preset value
|
|
442
442
|
// enter -> delay? -> show results
|
|
@@ -482,7 +482,7 @@ const AutoComplete = (props) => {
|
|
|
482
482
|
const getCssClass = () => {
|
|
483
483
|
const cssClasses = [];
|
|
484
484
|
className && cssClasses.push(className);
|
|
485
|
-
cssClasses.push(styles$
|
|
485
|
+
cssClasses.push(styles$T.select);
|
|
486
486
|
return cssClasses.filter(r => r).join(' ');
|
|
487
487
|
};
|
|
488
488
|
const show = () => setIsShow(true);
|
|
@@ -506,28 +506,28 @@ const AutoComplete = (props) => {
|
|
|
506
506
|
setModel('');
|
|
507
507
|
setSearchText('');
|
|
508
508
|
};
|
|
509
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
509
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$T.selectContainer },
|
|
510
510
|
React__default["default"].createElement("div", { className: "d-flex" },
|
|
511
511
|
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 }),
|
|
512
512
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
513
513
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
514
514
|
isShow &&
|
|
515
515
|
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
516
|
-
React__default["default"].createElement("div", { className: styles$
|
|
516
|
+
React__default["default"].createElement("div", { className: styles$T.selectMenu },
|
|
517
517
|
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 },
|
|
518
518
|
React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
519
519
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
520
520
|
};
|
|
521
521
|
|
|
522
|
-
var css_248z$
|
|
523
|
-
var styles$
|
|
524
|
-
styleInject(css_248z$
|
|
522
|
+
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}";
|
|
523
|
+
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"};
|
|
524
|
+
styleInject(css_248z$S);
|
|
525
525
|
|
|
526
526
|
const Badge = (props) => {
|
|
527
527
|
const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
528
528
|
const [cssClassName] = useCssClasses([
|
|
529
|
-
styles$
|
|
530
|
-
styles$
|
|
529
|
+
styles$S.badge,
|
|
530
|
+
styles$S[color],
|
|
531
531
|
className
|
|
532
532
|
]);
|
|
533
533
|
return (React__default["default"].createElement(BadgeContainer, null,
|
|
@@ -537,15 +537,15 @@ const Badge = (props) => {
|
|
|
537
537
|
const BadgeContainer = (props) => {
|
|
538
538
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
539
539
|
const [cssClassName] = useCssClasses([
|
|
540
|
-
styles$
|
|
540
|
+
styles$S.badgeContainer,
|
|
541
541
|
className,
|
|
542
542
|
]);
|
|
543
543
|
return (React__default["default"].createElement("div", Object.assign({ className: cssClassName }, rest), children));
|
|
544
544
|
};
|
|
545
545
|
|
|
546
|
-
var css_248z$
|
|
547
|
-
var styles$
|
|
548
|
-
styleInject(css_248z$
|
|
546
|
+
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}";
|
|
547
|
+
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"};
|
|
548
|
+
styleInject(css_248z$R);
|
|
549
549
|
|
|
550
550
|
const ButtonContext = React.createContext({
|
|
551
551
|
color: null
|
|
@@ -557,19 +557,19 @@ const Button = (props) => {
|
|
|
557
557
|
const buttonContext = useButtonContext();
|
|
558
558
|
const getCssClasses = () => {
|
|
559
559
|
const cssClasses = [];
|
|
560
|
-
cssClasses.push(styles$
|
|
560
|
+
cssClasses.push(styles$R.button);
|
|
561
561
|
const buttonColor = buttonContext.color || color;
|
|
562
562
|
if (variant !== 'outline' && variant !== 'text') {
|
|
563
|
-
cssClasses.push(styles$
|
|
564
|
-
cssClasses.push(styles$
|
|
563
|
+
cssClasses.push(styles$R.btnContained);
|
|
564
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
565
565
|
}
|
|
566
566
|
if (variant === 'outline') {
|
|
567
|
-
cssClasses.push(styles$
|
|
568
|
-
cssClasses.push(styles$
|
|
567
|
+
cssClasses.push(styles$R.btnOutline);
|
|
568
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
569
569
|
}
|
|
570
570
|
if (variant === 'text') {
|
|
571
|
-
cssClasses.push(styles$
|
|
572
|
-
cssClasses.push(styles$
|
|
571
|
+
cssClasses.push(styles$R.btnText);
|
|
572
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
573
573
|
}
|
|
574
574
|
if (isRounded && variant !== 'text') {
|
|
575
575
|
cssClasses.push(`rounded-pill`);
|
|
@@ -577,29 +577,29 @@ const Button = (props) => {
|
|
|
577
577
|
if (isActive) {
|
|
578
578
|
cssClasses.push('active');
|
|
579
579
|
}
|
|
580
|
-
shadow && cssClasses.push(styles$
|
|
581
|
-
block && cssClasses.push(styles$
|
|
580
|
+
shadow && cssClasses.push(styles$R.shadow);
|
|
581
|
+
block && cssClasses.push(styles$R.block);
|
|
582
582
|
className && cssClasses.push(className);
|
|
583
583
|
return cssClasses.filter(css => css).join(' ');
|
|
584
584
|
};
|
|
585
585
|
return (React__default["default"].createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
586
586
|
React__default["default"].createElement("span", { className: "d-flex justify-content-center" },
|
|
587
587
|
startIcon &&
|
|
588
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
588
|
+
React__default["default"].createElement(Icon, { className: styles$R.startIcon }, startIcon),
|
|
589
589
|
children,
|
|
590
590
|
endIcon &&
|
|
591
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
591
|
+
React__default["default"].createElement(Icon, { className: styles$R.endIcon }, endIcon))));
|
|
592
592
|
};
|
|
593
593
|
|
|
594
|
-
var css_248z$
|
|
595
|
-
var styles$
|
|
596
|
-
styleInject(css_248z$
|
|
594
|
+
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}";
|
|
595
|
+
var styles$Q = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
596
|
+
styleInject(css_248z$Q);
|
|
597
597
|
|
|
598
598
|
const ButtonGroup = (props) => {
|
|
599
599
|
const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
|
|
600
600
|
const getCssClasses = () => {
|
|
601
601
|
const cssClasses = [];
|
|
602
|
-
cssClasses.push(styles$
|
|
602
|
+
cssClasses.push(styles$Q.buttonGroup);
|
|
603
603
|
className && cssClasses.push(className);
|
|
604
604
|
return cssClasses.filter(css => css).join(' ');
|
|
605
605
|
};
|
|
@@ -607,15 +607,15 @@ const ButtonGroup = (props) => {
|
|
|
607
607
|
React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
|
|
608
608
|
};
|
|
609
609
|
|
|
610
|
-
var css_248z$
|
|
611
|
-
var styles$
|
|
612
|
-
styleInject(css_248z$
|
|
610
|
+
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}";
|
|
611
|
+
var styles$P = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
612
|
+
styleInject(css_248z$P);
|
|
613
613
|
|
|
614
614
|
const Breadcrumb = (props) => {
|
|
615
615
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
616
616
|
const getCssClasses = () => {
|
|
617
617
|
const cssClasses = [];
|
|
618
|
-
cssClasses.push(styles$
|
|
618
|
+
cssClasses.push(styles$P.breadcrumb);
|
|
619
619
|
className && cssClasses.push(className);
|
|
620
620
|
return cssClasses.filter(css => css).join(' ');
|
|
621
621
|
};
|
|
@@ -625,15 +625,15 @@ const Breadcrumb = (props) => {
|
|
|
625
625
|
|
|
626
626
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
627
627
|
|
|
628
|
-
var css_248z$
|
|
629
|
-
var styles$
|
|
630
|
-
styleInject(css_248z$
|
|
628
|
+
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}";
|
|
629
|
+
var styles$O = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
630
|
+
styleInject(css_248z$O);
|
|
631
631
|
|
|
632
632
|
const BreadcrumbItem = (props) => {
|
|
633
633
|
const { children, className, isActive, onClick } = props;
|
|
634
634
|
const getCssClasses = () => {
|
|
635
635
|
const cssClasses = [];
|
|
636
|
-
cssClasses.push(styles$
|
|
636
|
+
cssClasses.push(styles$O.breadcrumbItem);
|
|
637
637
|
className && cssClasses.push(className);
|
|
638
638
|
isActive && cssClasses.push('active');
|
|
639
639
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -645,115 +645,115 @@ const BreadcrumbItem = (props) => {
|
|
|
645
645
|
React__default["default"].createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React__default["default"].createElement("a", null, label) }, children)));
|
|
646
646
|
};
|
|
647
647
|
|
|
648
|
-
var css_248z$
|
|
649
|
-
var styles$
|
|
650
|
-
styleInject(css_248z$
|
|
648
|
+
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}";
|
|
649
|
+
var styles$N = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
650
|
+
styleInject(css_248z$N);
|
|
651
651
|
|
|
652
652
|
const Card = (props) => {
|
|
653
653
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
654
654
|
const getCssClasses = () => {
|
|
655
655
|
const cssClasses = [];
|
|
656
|
-
cssClasses.push(styles$
|
|
657
|
-
shadow && cssClasses.push(styles$
|
|
656
|
+
cssClasses.push(styles$N.card);
|
|
657
|
+
shadow && cssClasses.push(styles$N.shadow);
|
|
658
658
|
className && cssClasses.push(className);
|
|
659
659
|
return cssClasses.filter(css => css).join(' ');
|
|
660
660
|
};
|
|
661
661
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
662
662
|
};
|
|
663
663
|
|
|
664
|
-
var css_248z$
|
|
665
|
-
var styles$
|
|
666
|
-
styleInject(css_248z$
|
|
664
|
+
var css_248z$M = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
665
|
+
var styles$M = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
666
|
+
styleInject(css_248z$M);
|
|
667
667
|
|
|
668
668
|
const CardBody = (props) => {
|
|
669
669
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
670
670
|
const getCssClasses = () => {
|
|
671
671
|
const cssClasses = [];
|
|
672
|
-
cssClasses.push(styles$
|
|
672
|
+
cssClasses.push(styles$M.cardBody);
|
|
673
673
|
className && cssClasses.push(className);
|
|
674
674
|
return cssClasses.filter(css => css).join(' ');
|
|
675
675
|
};
|
|
676
676
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
677
677
|
};
|
|
678
678
|
|
|
679
|
-
var css_248z$
|
|
680
|
-
var styles$
|
|
681
|
-
styleInject(css_248z$
|
|
679
|
+
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}";
|
|
680
|
+
var styles$L = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
681
|
+
styleInject(css_248z$L);
|
|
682
682
|
|
|
683
683
|
const CardFooter = (props) => {
|
|
684
684
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
685
685
|
const getCssClasses = () => {
|
|
686
686
|
const cssClasses = [];
|
|
687
|
-
cssClasses.push(styles$
|
|
687
|
+
cssClasses.push(styles$L.cardFooter);
|
|
688
688
|
className && cssClasses.push(className);
|
|
689
689
|
return cssClasses.filter(css => css).join(' ');
|
|
690
690
|
};
|
|
691
691
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
692
692
|
};
|
|
693
693
|
|
|
694
|
-
var css_248z$
|
|
695
|
-
var styles$
|
|
696
|
-
styleInject(css_248z$
|
|
694
|
+
var css_248z$K = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
695
|
+
var styles$K = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
696
|
+
styleInject(css_248z$K);
|
|
697
697
|
|
|
698
698
|
const CardSubtitle = (props) => {
|
|
699
699
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
700
700
|
const getCssClasses = () => {
|
|
701
701
|
const cssClasses = [];
|
|
702
|
-
cssClasses.push(styles$
|
|
702
|
+
cssClasses.push(styles$K.cardSubtitle);
|
|
703
703
|
className && cssClasses.push(className);
|
|
704
704
|
return cssClasses.filter(css => css).join(' ');
|
|
705
705
|
};
|
|
706
706
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
707
707
|
};
|
|
708
708
|
|
|
709
|
-
var css_248z$
|
|
710
|
-
var styles$
|
|
711
|
-
styleInject(css_248z$
|
|
709
|
+
var css_248z$J = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
710
|
+
var styles$J = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
711
|
+
styleInject(css_248z$J);
|
|
712
712
|
|
|
713
713
|
const CardText = (props) => {
|
|
714
714
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
715
715
|
const getCssClasses = () => {
|
|
716
716
|
const cssClasses = [];
|
|
717
|
-
cssClasses.push(styles$
|
|
717
|
+
cssClasses.push(styles$J.cardText);
|
|
718
718
|
className && cssClasses.push(className);
|
|
719
719
|
return cssClasses.filter(css => css).join(' ');
|
|
720
720
|
};
|
|
721
721
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
722
722
|
};
|
|
723
723
|
|
|
724
|
-
var css_248z$
|
|
725
|
-
var styles$
|
|
726
|
-
styleInject(css_248z$
|
|
724
|
+
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}";
|
|
725
|
+
var styles$I = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
726
|
+
styleInject(css_248z$I);
|
|
727
727
|
|
|
728
728
|
const CardTitle = (props) => {
|
|
729
729
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
730
730
|
const getCssClasses = () => {
|
|
731
731
|
const cssClasses = [];
|
|
732
|
-
cssClasses.push(styles$
|
|
732
|
+
cssClasses.push(styles$I.cardTitle);
|
|
733
733
|
className && cssClasses.push(className);
|
|
734
734
|
return cssClasses.filter(css => css).join(' ');
|
|
735
735
|
};
|
|
736
736
|
return (React__default["default"].createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
737
737
|
};
|
|
738
738
|
|
|
739
|
-
var css_248z$
|
|
740
|
-
var styles$
|
|
741
|
-
styleInject(css_248z$
|
|
739
|
+
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}";
|
|
740
|
+
var styles$H = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
741
|
+
styleInject(css_248z$H);
|
|
742
742
|
|
|
743
743
|
const CardImage = (props) => {
|
|
744
744
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
745
745
|
const getCssClasses = () => {
|
|
746
746
|
const cssClasses = [];
|
|
747
|
-
cssClasses.push(styles$
|
|
747
|
+
cssClasses.push(styles$H.cardImage);
|
|
748
748
|
className && cssClasses.push(className);
|
|
749
749
|
return cssClasses.filter(css => css).join(' ');
|
|
750
750
|
};
|
|
751
751
|
return (React__default["default"].createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
752
752
|
};
|
|
753
753
|
|
|
754
|
-
var css_248z$
|
|
755
|
-
var styles$
|
|
756
|
-
styleInject(css_248z$
|
|
754
|
+
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}";
|
|
755
|
+
var styles$G = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
756
|
+
styleInject(css_248z$G);
|
|
757
757
|
|
|
758
758
|
const Checkbox = (props) => {
|
|
759
759
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -782,8 +782,8 @@ const Checkbox = (props) => {
|
|
|
782
782
|
};
|
|
783
783
|
const getCssClassesLabel = () => {
|
|
784
784
|
const cssClasses = [];
|
|
785
|
-
cssClasses.push(styles$
|
|
786
|
-
disabled && cssClasses.push(styles$
|
|
785
|
+
cssClasses.push(styles$G.checkboxLabel);
|
|
786
|
+
disabled && cssClasses.push(styles$G['disabled']);
|
|
787
787
|
return cssClasses.filter(css => css).join(' ');
|
|
788
788
|
};
|
|
789
789
|
const getIcon = () => {
|
|
@@ -796,24 +796,24 @@ const Checkbox = (props) => {
|
|
|
796
796
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
797
797
|
}
|
|
798
798
|
};
|
|
799
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
799
|
+
return (React__default["default"].createElement("div", { className: styles$G.checkboxContainer },
|
|
800
800
|
React__default["default"].createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
801
801
|
React__default["default"].createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
802
802
|
React__default["default"].createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
803
803
|
};
|
|
804
804
|
|
|
805
|
-
var css_248z$
|
|
806
|
-
var styles$
|
|
807
|
-
styleInject(css_248z$
|
|
805
|
+
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}";
|
|
806
|
+
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"};
|
|
807
|
+
styleInject(css_248z$F);
|
|
808
808
|
|
|
809
809
|
const Chip = (props) => {
|
|
810
810
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React__default["default"].createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
|
|
811
811
|
const getCssClass = () => {
|
|
812
812
|
const cssClasses = [];
|
|
813
|
-
cssClasses.push(styles$
|
|
814
|
-
cssClasses.push(styles$
|
|
815
|
-
shadow && cssClasses.push(styles$
|
|
816
|
-
onClick && cssClasses.push(styles$
|
|
813
|
+
cssClasses.push(styles$F.chip);
|
|
814
|
+
cssClasses.push(styles$F[color]);
|
|
815
|
+
shadow && cssClasses.push(styles$F['shadow']);
|
|
816
|
+
onClick && cssClasses.push(styles$F['clickable']);
|
|
817
817
|
className && cssClasses.push(className);
|
|
818
818
|
return cssClasses.filter(r => r).join(' ');
|
|
819
819
|
};
|
|
@@ -823,7 +823,7 @@ const Chip = (props) => {
|
|
|
823
823
|
};
|
|
824
824
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
825
825
|
React__default["default"].createElement("span", null, children),
|
|
826
|
-
isDeletable && (React__default["default"].createElement("div", { className: styles$
|
|
826
|
+
isDeletable && (React__default["default"].createElement("div", { className: styles$F.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
827
827
|
};
|
|
828
828
|
|
|
829
829
|
const CssTransition = (props) => {
|
|
@@ -901,9 +901,9 @@ const CssTransition = (props) => {
|
|
|
901
901
|
React__default["default"].createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
902
902
|
};
|
|
903
903
|
|
|
904
|
-
var css_248z$
|
|
905
|
-
var styles$
|
|
906
|
-
styleInject(css_248z$
|
|
904
|
+
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}";
|
|
905
|
+
var styles$E = {"column":"Column-module_column__fcTgl"};
|
|
906
|
+
styleInject(css_248z$E);
|
|
907
907
|
|
|
908
908
|
const Column = (props) => {
|
|
909
909
|
const { children, className } = props,
|
|
@@ -921,22 +921,22 @@ const Column = (props) => {
|
|
|
921
921
|
// if (md) cssClasses.push(`col-md-${md.toString()}`);
|
|
922
922
|
// if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
|
|
923
923
|
// if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
|
|
924
|
-
cssClasses.push(styles$
|
|
924
|
+
cssClasses.push(styles$E.column);
|
|
925
925
|
className && cssClasses.push(className);
|
|
926
926
|
return cssClasses.filter(css => css).join(' ');
|
|
927
927
|
};
|
|
928
928
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
929
929
|
};
|
|
930
930
|
|
|
931
|
-
var css_248z$
|
|
932
|
-
var styles$
|
|
933
|
-
styleInject(css_248z$
|
|
931
|
+
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}";
|
|
932
|
+
var styles$D = {"row":"Row-module_row__bTIWp"};
|
|
933
|
+
styleInject(css_248z$D);
|
|
934
934
|
|
|
935
935
|
const Row = (_a) => {
|
|
936
936
|
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
937
937
|
const getCssClasses = () => {
|
|
938
938
|
const cssClasses = [];
|
|
939
|
-
cssClasses.push(styles$
|
|
939
|
+
cssClasses.push(styles$D.row);
|
|
940
940
|
className && cssClasses.push(className);
|
|
941
941
|
direction && cssClasses.push(`flex-${direction}`);
|
|
942
942
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -944,15 +944,15 @@ const Row = (_a) => {
|
|
|
944
944
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
945
945
|
};
|
|
946
946
|
|
|
947
|
-
var css_248z$
|
|
948
|
-
var styles$
|
|
949
|
-
styleInject(css_248z$
|
|
947
|
+
var css_248z$C = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
948
|
+
var styles$C = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
949
|
+
styleInject(css_248z$C);
|
|
950
950
|
|
|
951
951
|
const FormLabel = (_a) => {
|
|
952
952
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
953
953
|
const getCssClasses = () => {
|
|
954
954
|
const cssClasses = [];
|
|
955
|
-
cssClasses.push(styles$
|
|
955
|
+
cssClasses.push(styles$C.formLabel);
|
|
956
956
|
className && cssClasses.push(className);
|
|
957
957
|
return cssClasses.filter(css => css).join(' ');
|
|
958
958
|
};
|
|
@@ -989,9 +989,9 @@ const FileInput = (props) => {
|
|
|
989
989
|
React__default["default"].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))));
|
|
990
990
|
};
|
|
991
991
|
|
|
992
|
-
var css_248z$
|
|
993
|
-
var styles$
|
|
994
|
-
styleInject(css_248z$
|
|
992
|
+
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}";
|
|
993
|
+
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"};
|
|
994
|
+
styleInject(css_248z$B);
|
|
995
995
|
|
|
996
996
|
const Select = (props) => {
|
|
997
997
|
var _a, _b, _c;
|
|
@@ -1004,9 +1004,9 @@ const Select = (props) => {
|
|
|
1004
1004
|
const getCssClass = () => {
|
|
1005
1005
|
const cssClasses = [];
|
|
1006
1006
|
className && cssClasses.push(className);
|
|
1007
|
-
disabled && cssClasses.push(styles$
|
|
1008
|
-
readOnly && cssClasses.push(styles$
|
|
1009
|
-
cssClasses.push(styles$
|
|
1007
|
+
disabled && cssClasses.push(styles$B['disabled']);
|
|
1008
|
+
readOnly && cssClasses.push(styles$B['readOnly']);
|
|
1009
|
+
cssClasses.push(styles$B.select);
|
|
1010
1010
|
return cssClasses.filter(r => r).join(' ');
|
|
1011
1011
|
};
|
|
1012
1012
|
React.useEffect(() => {
|
|
@@ -1128,16 +1128,16 @@ const Select = (props) => {
|
|
|
1128
1128
|
}
|
|
1129
1129
|
}
|
|
1130
1130
|
};
|
|
1131
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
1131
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$B.selectContainer },
|
|
1132
1132
|
React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
1133
1133
|
!multiple && renderSingleViewModel(),
|
|
1134
1134
|
multiple &&
|
|
1135
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1135
|
+
React__default["default"].createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
|
|
1136
1136
|
React__default["default"].createElement(Icon, { className: "ml-2" },
|
|
1137
1137
|
React__default["default"].createElement(ChevronDownSolidIcon, null))),
|
|
1138
1138
|
isShow &&
|
|
1139
1139
|
React__default["default"].createElement(Portal, { className: 'backdrop-root' },
|
|
1140
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1140
|
+
React__default["default"].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 } },
|
|
1141
1141
|
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), active: isActive(option) },
|
|
1142
1142
|
multiple &&
|
|
1143
1143
|
React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -1145,33 +1145,33 @@ const Select = (props) => {
|
|
|
1145
1145
|
React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
|
|
1146
1146
|
};
|
|
1147
1147
|
|
|
1148
|
-
var css_248z$
|
|
1149
|
-
var styles$
|
|
1150
|
-
styleInject(css_248z$
|
|
1148
|
+
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}";
|
|
1149
|
+
var styles$A = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1150
|
+
styleInject(css_248z$A);
|
|
1151
1151
|
|
|
1152
1152
|
const Textarea = (props) => {
|
|
1153
1153
|
const { className, error } = props, rest = __rest(props, ["className", "error"]);
|
|
1154
1154
|
const getCssClass = () => {
|
|
1155
1155
|
const cssClasses = [];
|
|
1156
|
-
cssClasses.push(styles$
|
|
1156
|
+
cssClasses.push(styles$A.textarea);
|
|
1157
1157
|
className && cssClasses.push(className);
|
|
1158
|
-
error && cssClasses.push(styles$
|
|
1158
|
+
error && cssClasses.push(styles$A['isInvalid']);
|
|
1159
1159
|
return cssClasses.filter(r => r).join(' ');
|
|
1160
1160
|
};
|
|
1161
1161
|
return (React__default["default"].createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
1162
1162
|
};
|
|
1163
1163
|
|
|
1164
|
-
var css_248z$
|
|
1165
|
-
var styles$
|
|
1166
|
-
styleInject(css_248z$
|
|
1164
|
+
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}";
|
|
1165
|
+
var styles$z = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1166
|
+
styleInject(css_248z$z);
|
|
1167
1167
|
|
|
1168
1168
|
const FormInput = (props) => {
|
|
1169
1169
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1170
1170
|
const getCssClasses = () => {
|
|
1171
1171
|
const cssClasses = [];
|
|
1172
|
-
cssClasses.push(styles$
|
|
1172
|
+
cssClasses.push(styles$z.formInput);
|
|
1173
1173
|
className && cssClasses.push(className);
|
|
1174
|
-
!isValid && cssClasses.push(styles$
|
|
1174
|
+
!isValid && cssClasses.push(styles$z['isInvalid']);
|
|
1175
1175
|
return cssClasses.filter(css => css).join(' ');
|
|
1176
1176
|
};
|
|
1177
1177
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1219,12 +1219,12 @@ const FormHint = (props) => {
|
|
|
1219
1219
|
return (React__default["default"].createElement("small", { className: getCssClasses() }, children));
|
|
1220
1220
|
};
|
|
1221
1221
|
|
|
1222
|
-
var css_248z$
|
|
1223
|
-
var styles$
|
|
1224
|
-
styleInject(css_248z$
|
|
1222
|
+
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}";
|
|
1223
|
+
var styles$y = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1224
|
+
styleInject(css_248z$y);
|
|
1225
1225
|
|
|
1226
1226
|
const FormError = (props) => {
|
|
1227
|
-
const { className = styles$
|
|
1227
|
+
const { className = styles$y.isInvalid, errors = [] } = props;
|
|
1228
1228
|
return (React__default["default"].createElement(React.Fragment, null, errors &&
|
|
1229
1229
|
React__default["default"].createElement("div", { className: className }, errors.map(e => React__default["default"].createElement("div", { key: e.validator }, e.message)))));
|
|
1230
1230
|
};
|
|
@@ -1555,16 +1555,16 @@ const DateSelect = (props) => {
|
|
|
1555
1555
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1556
1556
|
// };
|
|
1557
1557
|
|
|
1558
|
-
var css_248z$
|
|
1559
|
-
var styles$
|
|
1560
|
-
styleInject(css_248z$
|
|
1558
|
+
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}";
|
|
1559
|
+
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"};
|
|
1560
|
+
styleInject(css_248z$x);
|
|
1561
1561
|
|
|
1562
1562
|
const Drawer = (props) => {
|
|
1563
1563
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1564
1564
|
React.useEffect(() => {
|
|
1565
|
-
document.body.classList.add(styles$
|
|
1565
|
+
document.body.classList.add(styles$x.drawerOpen);
|
|
1566
1566
|
return () => {
|
|
1567
|
-
document.body.classList.remove(styles$
|
|
1567
|
+
document.body.classList.remove(styles$x.drawerOpen);
|
|
1568
1568
|
};
|
|
1569
1569
|
}, []);
|
|
1570
1570
|
const handleClickBackdrop = () => {
|
|
@@ -1578,10 +1578,10 @@ const DrawerContent = (props) => {
|
|
|
1578
1578
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1579
1579
|
const getCssClasses = () => {
|
|
1580
1580
|
const cssClasses = [];
|
|
1581
|
-
cssClasses.push(styles$
|
|
1582
|
-
shadow && cssClasses.push(styles$
|
|
1583
|
-
!!permanent && cssClasses.push(styles$
|
|
1584
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1581
|
+
cssClasses.push(styles$x.drawer);
|
|
1582
|
+
shadow && cssClasses.push(styles$x.shadow);
|
|
1583
|
+
!!permanent && cssClasses.push(styles$x['permanent']);
|
|
1584
|
+
position === 'left' ? cssClasses.push(styles$x['left']) : cssClasses.push(styles$x['right']);
|
|
1585
1585
|
className && cssClasses.push(className);
|
|
1586
1586
|
return cssClasses.filter(css => css).join(' ');
|
|
1587
1587
|
};
|
|
@@ -1595,9 +1595,9 @@ const DrawerContent = (props) => {
|
|
|
1595
1595
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1596
1596
|
};
|
|
1597
1597
|
|
|
1598
|
-
var css_248z$
|
|
1599
|
-
var styles$
|
|
1600
|
-
styleInject(css_248z$
|
|
1598
|
+
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}";
|
|
1599
|
+
var styles$w = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1600
|
+
styleInject(css_248z$w);
|
|
1601
1601
|
|
|
1602
1602
|
const MenuBody = (props) => {
|
|
1603
1603
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1628,8 +1628,8 @@ const MenuBody = (props) => {
|
|
|
1628
1628
|
}, [menuBodyRef]);
|
|
1629
1629
|
const getCssClasses = () => {
|
|
1630
1630
|
const cssClasses = [];
|
|
1631
|
-
cssClasses.push(styles$
|
|
1632
|
-
shadow && cssClasses.push(styles$
|
|
1631
|
+
cssClasses.push(styles$w.menuBody);
|
|
1632
|
+
shadow && cssClasses.push(styles$w.shadow);
|
|
1633
1633
|
className && cssClasses.push(className);
|
|
1634
1634
|
return cssClasses.filter(css => css).join(' ');
|
|
1635
1635
|
};
|
|
@@ -1637,21 +1637,17 @@ const MenuBody = (props) => {
|
|
|
1637
1637
|
onClickBackdrop && onClickBackdrop();
|
|
1638
1638
|
};
|
|
1639
1639
|
return (React__default["default"].createElement(Portal, { className: 'menu-root' },
|
|
1640
|
-
React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1640
|
+
React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1641
|
+
React__default["default"].createElement(List, null, children)),
|
|
1641
1642
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })));
|
|
1642
1643
|
};
|
|
1643
1644
|
|
|
1644
|
-
var css_248z$x = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
1645
|
-
var styles$x = {"menu":"Menu-module_menu__p8QL-"};
|
|
1646
|
-
styleInject(css_248z$x);
|
|
1647
|
-
|
|
1648
1645
|
const Menu = (props) => {
|
|
1649
1646
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
1650
1647
|
const menuContainer = React.useRef(null);
|
|
1651
1648
|
const toggleContainerRef = React.useRef(null);
|
|
1652
1649
|
const getCssClasses = () => {
|
|
1653
1650
|
const cssClasses = [];
|
|
1654
|
-
cssClasses.push(styles$x.menu);
|
|
1655
1651
|
className && cssClasses.push(className);
|
|
1656
1652
|
return cssClasses.filter(css => css).join(' ');
|
|
1657
1653
|
};
|
|
@@ -1664,26 +1660,17 @@ const Menu = (props) => {
|
|
|
1664
1660
|
React__default["default"].createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1665
1661
|
};
|
|
1666
1662
|
|
|
1667
|
-
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}";
|
|
1668
|
-
var styles$w = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1669
|
-
styleInject(css_248z$w);
|
|
1670
|
-
|
|
1671
1663
|
const MenuItem = (props) => {
|
|
1672
|
-
const { children, onClick
|
|
1664
|
+
const { children, onClick } = props, rest = __rest(props, ["children", "onClick"]);
|
|
1673
1665
|
const getCssClasses = () => {
|
|
1674
1666
|
const cssClasses = [];
|
|
1675
|
-
cssClasses.push(styles$w.menuItem);
|
|
1676
|
-
if (type === 'header') {
|
|
1677
|
-
cssClasses.push(styles$w.menuItemHeader);
|
|
1678
|
-
}
|
|
1679
1667
|
return cssClasses.filter(css => css).join(' ');
|
|
1680
1668
|
};
|
|
1681
1669
|
const handleClick = (e) => {
|
|
1682
1670
|
e.stopPropagation();
|
|
1683
1671
|
onClick && onClick(e);
|
|
1684
1672
|
};
|
|
1685
|
-
return (React__default["default"].createElement(
|
|
1686
|
-
React__default["default"].createElement("div", { className: getCssClasses(), onClick: handleClick }, children))) }, children));
|
|
1673
|
+
return (React__default["default"].createElement(ListItem, Object.assign({ className: getCssClasses(), onClick: handleClick }, rest), children));
|
|
1687
1674
|
};
|
|
1688
1675
|
|
|
1689
1676
|
const MenuToggle = ({ children }) => {
|