react-asc 18.8.5 → 18.9.0

package/index.js

@@ -95,67 +95,67 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$T = ".Alert-module_alert__2yOUn {\n  border-radius: var(--borderRadius);\n  padding: 6px 16px; }\n\n.Alert-module_contained__1cUnn.Alert-module_primary__1pnWJ {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n\n.Alert-module_contained__1cUnn.Alert-module_accent__3TlkP {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n\n.Alert-module_contained__1cUnn.Alert-module_secondary__3cfYS {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n\n.Alert-module_contained__1cUnn.Alert-module_light__vSzHK {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n\n.Alert-module_contained__1cUnn.Alert-module_dark__3DrkS {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n\n.Alert-module_outline__3fdYC.Alert-module_primary__1pnWJ {\n  color: var(--primary) !important;\n  border: 1px solid var(--primary) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_secondary__3cfYS {\n  color: var(--secondary) !important;\n  border: 1px solid var(--secondary) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_accent__3TlkP {\n  color: var(--accent) !important;\n  border: 1px solid var(--accent) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_light__vSzHK {\n  color: var(--light-contrast-text) !important;\n  border: 1px solid var(--light) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_dark__3DrkS {\n  color: var(--dark) !important;\n  border: 1px solid var(--dark) !important; }\n";
-var styles$T = {"alert":"Alert-module_alert__2yOUn","contained":"Alert-module_contained__1cUnn","primary":"Alert-module_primary__1pnWJ","accent":"Alert-module_accent__3TlkP","secondary":"Alert-module_secondary__3cfYS","light":"Alert-module_light__vSzHK","dark":"Alert-module_dark__3DrkS","outline":"Alert-module_outline__3fdYC"};
-styleInject(css_248z$T);
+var css_248z$V = ".Alert-module_alert__2yOUn {\n  border-radius: var(--borderRadius);\n  padding: 6px 16px; }\n\n.Alert-module_contained__1cUnn.Alert-module_primary__1pnWJ {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n\n.Alert-module_contained__1cUnn.Alert-module_accent__3TlkP {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n\n.Alert-module_contained__1cUnn.Alert-module_secondary__3cfYS {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n\n.Alert-module_contained__1cUnn.Alert-module_light__vSzHK {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n\n.Alert-module_contained__1cUnn.Alert-module_dark__3DrkS {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n\n.Alert-module_outline__3fdYC.Alert-module_primary__1pnWJ {\n  color: var(--primary) !important;\n  border: 1px solid var(--primary) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_secondary__3cfYS {\n  color: var(--secondary) !important;\n  border: 1px solid var(--secondary) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_accent__3TlkP {\n  color: var(--accent) !important;\n  border: 1px solid var(--accent) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_light__vSzHK {\n  color: var(--light-contrast-text) !important;\n  border: 1px solid var(--light) !important; }\n\n.Alert-module_outline__3fdYC.Alert-module_dark__3DrkS {\n  color: var(--dark) !important;\n  border: 1px solid var(--dark) !important; }\n";
+var styles$V = {"alert":"Alert-module_alert__2yOUn","contained":"Alert-module_contained__1cUnn","primary":"Alert-module_primary__1pnWJ","accent":"Alert-module_accent__3TlkP","secondary":"Alert-module_secondary__3cfYS","light":"Alert-module_light__vSzHK","dark":"Alert-module_dark__3DrkS","outline":"Alert-module_outline__3fdYC"};
+styleInject(css_248z$V);
 
 const Alert = (props) => {
     const { children, className, color = exports.COLOR.primary, variant = exports.VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$T.alert);
+        cssClasses.push(styles$V.alert);
         if (variant === exports.VARIANT.contained) {
-            cssClasses.push(styles$T.contained);
-            cssClasses.push(styles$T[color]);
+            cssClasses.push(styles$V.contained);
+            cssClasses.push(styles$V[color]);
         }
         if (variant === exports.VARIANT.outline) {
-            cssClasses.push(styles$T.outline);
-            cssClasses.push(styles$T[color]);
+            cssClasses.push(styles$V.outline);
+            cssClasses.push(styles$V[color]);
         }
-        shadow && cssClasses.push(styles$T['shadow']);
+        shadow && cssClasses.push(styles$V['shadow']);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$S = ".AppBar-module_appbar__1S8G1 {\n  padding: 0.5rem 1rem;\n  display: flex;\n  z-index: 1000;\n  min-height: 64px;\n  flex-shrink: 0; }\n  .AppBar-module_appbar__1S8G1.AppBar-module_primary__3CiO7 {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .AppBar-module_appbar__1S8G1.AppBar-module_secondary__1W4qT {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .AppBar-module_appbar__1S8G1.AppBar-module_accent__Mgcwx {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .AppBar-module_appbar__1S8G1.AppBar-module_light__1FxmL {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .AppBar-module_appbar__1S8G1.AppBar-module_dark__3n5rm {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .AppBar-module_appbar__1S8G1.AppBar-module_shadow__2c8iH {\n    box-shadow: var(--shadow); }\n";
-var styles$S = {"appbar":"AppBar-module_appbar__1S8G1","primary":"AppBar-module_primary__3CiO7","secondary":"AppBar-module_secondary__1W4qT","accent":"AppBar-module_accent__Mgcwx","light":"AppBar-module_light__1FxmL","dark":"AppBar-module_dark__3n5rm","shadow":"AppBar-module_shadow__2c8iH"};
-styleInject(css_248z$S);
+var css_248z$U = ".AppBar-module_appbar__1S8G1 {\n  padding: 0.5rem 1rem;\n  display: flex;\n  z-index: 1000;\n  min-height: 64px;\n  flex-shrink: 0; }\n  .AppBar-module_appbar__1S8G1.AppBar-module_primary__3CiO7 {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .AppBar-module_appbar__1S8G1.AppBar-module_secondary__1W4qT {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .AppBar-module_appbar__1S8G1.AppBar-module_accent__Mgcwx {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .AppBar-module_appbar__1S8G1.AppBar-module_light__1FxmL {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .AppBar-module_appbar__1S8G1.AppBar-module_dark__3n5rm {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .AppBar-module_appbar__1S8G1.AppBar-module_shadow__2c8iH {\n    box-shadow: var(--shadow); }\n";
+var styles$U = {"appbar":"AppBar-module_appbar__1S8G1","primary":"AppBar-module_primary__3CiO7","secondary":"AppBar-module_secondary__1W4qT","accent":"AppBar-module_accent__Mgcwx","light":"AppBar-module_light__1FxmL","dark":"AppBar-module_dark__3n5rm","shadow":"AppBar-module_shadow__2c8iH"};
+styleInject(css_248z$U);
 
 const AppBar = (props) => {
     const { children, className, color = exports.COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$S[color]);
-        cssClasses.push(styles$S.appbar);
-        shadow && cssClasses.push(styles$S['shadow']);
+        cssClasses.push(styles$U[color]);
+        cssClasses.push(styles$U.appbar);
+        shadow && cssClasses.push(styles$U['shadow']);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
     return (React__default["default"].createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$R = ".AppBarTitle-module_appbarTitle__3J-Z1 {\n  align-items: center;\n  padding-top: 0.3125rem;\n  padding-bottom: 0.3125rem;\n  font-size: 1.25rem;\n  line-height: 1.8;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden !important;\n  display: inline-block; }\n  .AppBarTitle-module_appbarTitle__3J-Z1:hover {\n    cursor: pointer; }\n";
-var styles$R = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
-styleInject(css_248z$R);
+var css_248z$T = ".AppBarTitle-module_appbarTitle__3J-Z1 {\n  align-items: center;\n  padding-top: 0.3125rem;\n  padding-bottom: 0.3125rem;\n  font-size: 1.25rem;\n  line-height: 1.8;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden !important;\n  display: inline-block; }\n  .AppBarTitle-module_appbarTitle__3J-Z1:hover {\n    cursor: pointer; }\n";
+var styles$T = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
+styleInject(css_248z$T);
 
 const AppBarTitle = (props) => {
     const { children, className, onClick } = props;
     const getCssClass = () => {
         const cssClasses = [];
-        cssClasses.push(styles$R.appbarTitle);
+        cssClasses.push(styles$T.appbarTitle);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
-    return (React__default["default"].createElement("div", { className: getCssClass(), onClick: () => onClick && onClick() }, children));
+    return (React__default["default"].createElement("div", { className: getCssClass(), onClick: onClick }, children));
 };
 
 const Backdrop = (props) => {
-    const { target = document.body, isTransparent = false, onClick, style } = props;
+    const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
     const handleClick = (e) => {
         e.stopPropagation();
-        onClick && onClick();
+        onClick && onClick(e);
     };
     const getCssClasses = () => {
         const cssClasses = [];
@@ -169,43 +169,43 @@ const Backdrop = (props) => {
         const styles = Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
         return styles;
     };
-    return (reactDom.createPortal(React__default["default"].createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles() }), target));
+    return (reactDom.createPortal(React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
 };
 
-var css_248z$Q = ".List-module_list__1ax9w {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  margin-bottom: 0;\n  margin-top: 0;\n  background-color: var(--white); }\n";
-var styles$Q = {"list":"List-module_list__1ax9w"};
-styleInject(css_248z$Q);
+var css_248z$S = ".List-module_list__1ax9w {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  margin-bottom: 0;\n  margin-top: 0;\n  background-color: var(--white); }\n";
+var styles$S = {"list":"List-module_list__1ax9w"};
+styleInject(css_248z$S);
 
 const List = (props) => {
     const { children, className, isFlush } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         if (isFlush) {
-            cssClasses.push(styles$Q.flush);
+            cssClasses.push(styles$S.flush);
         }
-        cssClasses.push(styles$Q.list);
+        cssClasses.push(styles$S.list);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("ul", { className: getCssClasses() }, children));
 };
 
-var css_248z$P = ".ListItem-module_listItem__3hAZb {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0.75rem 1.25rem;\n  min-width: 100%;\n  color: var(--bodyColor);\n  text-align: inherit;\n  transition: background 0.5s ease; }\n  .ListItem-module_listItem__3hAZb:hover, .ListItem-module_listItem__3hAZb.ListItem-module_active__hyvch {\n    cursor: pointer;\n    z-index: 1;\n    text-decoration: none;\n    background-color: rgba(0, 0, 0, 0.04);\n    color: var(--primary); }\n  .ListItem-module_listItem__3hAZb + .ListItem-module_listItem__3hAZb {\n    border-top-width: 0; }\n  .ListItem-module_listItem__3hAZb.ListItem-module_primary__2OJAg {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_accent__2RXHe {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_secondary__3EVjH {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_light__3CJBB {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_dark__SazkE {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_disabled__2Kh0o {\n    color: rgba(0, 0, 0, 0.26); }\n    .ListItem-module_listItem__3hAZb.ListItem-module_disabled__2Kh0o:hover {\n      cursor: not-allowed;\n      background-color: inherit; }\n";
-var styles$P = {"listItem":"ListItem-module_listItem__3hAZb","active":"ListItem-module_active__hyvch","primary":"ListItem-module_primary__2OJAg","accent":"ListItem-module_accent__2RXHe","secondary":"ListItem-module_secondary__3EVjH","light":"ListItem-module_light__3CJBB","dark":"ListItem-module_dark__SazkE","disabled":"ListItem-module_disabled__2Kh0o"};
-styleInject(css_248z$P);
+var css_248z$R = ".ListItem-module_listItem__3hAZb {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0.75rem 1.25rem;\n  min-width: 100%;\n  color: var(--bodyColor);\n  text-align: inherit;\n  transition: background 0.5s ease; }\n  .ListItem-module_listItem__3hAZb:hover, .ListItem-module_listItem__3hAZb.ListItem-module_active__hyvch {\n    cursor: pointer;\n    z-index: 1;\n    text-decoration: none;\n    background-color: rgba(0, 0, 0, 0.04);\n    color: var(--primary); }\n  .ListItem-module_listItem__3hAZb + .ListItem-module_listItem__3hAZb {\n    border-top-width: 0; }\n  .ListItem-module_listItem__3hAZb.ListItem-module_primary__2OJAg {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_accent__2RXHe {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_secondary__3EVjH {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_light__3CJBB {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_dark__SazkE {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .ListItem-module_listItem__3hAZb.ListItem-module_disabled__2Kh0o {\n    color: rgba(0, 0, 0, 0.26); }\n    .ListItem-module_listItem__3hAZb.ListItem-module_disabled__2Kh0o:hover {\n      cursor: not-allowed;\n      background-color: inherit; }\n";
+var styles$R = {"listItem":"ListItem-module_listItem__3hAZb","active":"ListItem-module_active__hyvch","primary":"ListItem-module_primary__2OJAg","accent":"ListItem-module_accent__2RXHe","secondary":"ListItem-module_secondary__3EVjH","light":"ListItem-module_light__3CJBB","dark":"ListItem-module_dark__SazkE","disabled":"ListItem-module_disabled__2Kh0o"};
+styleInject(css_248z$R);
 
 const ListItem = (props) => {
     const { id, children, color, active, className, isHoverable, disabled, onClick } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         if (active) {
-            cssClasses.push(styles$P['active']);
+            cssClasses.push(styles$R['active']);
         }
         if (disabled) {
-            cssClasses.push(styles$P['disabled']);
+            cssClasses.push(styles$R['disabled']);
         }
-        color && cssClasses.push(styles$P[color]);
-        cssClasses.push(styles$P.listItem);
+        color && cssClasses.push(styles$R[color]);
+        cssClasses.push(styles$R.listItem);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -215,32 +215,32 @@ const ListItem = (props) => {
     return (React__default["default"].createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
 };
 
-var css_248z$O = ".ListItemAvatar-module_avatar__1fjSE {\n  margin-right: 16px; }\n  .ListItemAvatar-module_avatar__1fjSE svg, .ListItemAvatar-module_avatar__1fjSE img {\n    width: 24px;\n    height: 24px; }\n  .ListItemAvatar-module_avatar__1fjSE img {\n    border-radius: 50%; }\n";
-var styles$O = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
-styleInject(css_248z$O);
+var css_248z$Q = ".ListItemAvatar-module_avatar__1fjSE {\n  margin-right: 16px; }\n  .ListItemAvatar-module_avatar__1fjSE svg, .ListItemAvatar-module_avatar__1fjSE img {\n    width: 24px;\n    height: 24px; }\n  .ListItemAvatar-module_avatar__1fjSE img {\n    border-radius: 50%; }\n";
+var styles$Q = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
+styleInject(css_248z$Q);
 
-const ListItemAvatar = ({ avatar }) => (React__default["default"].createElement("div", { className: styles$O.avatar }, avatar));
+const ListItemAvatar = ({ avatar }) => (React__default["default"].createElement("div", { className: styles$Q.avatar }, avatar));
 
-var css_248z$N = ".ListItemIcon-module_icon__-nsUy {\n  margin-right: 32px; }\n  .ListItemIcon-module_icon__-nsUy svg {\n    width: 24px;\n    height: 24px; }\n";
-var styles$N = {"icon":"ListItemIcon-module_icon__-nsUy"};
-styleInject(css_248z$N);
+var css_248z$P = ".ListItemIcon-module_icon__-nsUy {\n  margin-right: 32px; }\n  .ListItemIcon-module_icon__-nsUy svg {\n    width: 24px;\n    height: 24px; }\n";
+var styles$P = {"icon":"ListItemIcon-module_icon__-nsUy"};
+styleInject(css_248z$P);
 
-const ListItemIcon = ({ icon }) => (React__default["default"].createElement("div", { className: styles$N.icon }, icon));
+const ListItemIcon = ({ icon }) => (React__default["default"].createElement("div", { className: styles$P.icon }, icon));
 
-var css_248z$M = ".ListItemAction-module_listItemAction__26S66 {\n  display: flex;\n  justify-content: center;\n  min-width: 40px; }\n  .ListItemAction-module_listItemAction__26S66 svg {\n    width: 20px;\n    height: 20px; }\n";
-var styles$M = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
-styleInject(css_248z$M);
+var css_248z$O = ".ListItemAction-module_listItemAction__26S66 {\n  display: flex;\n  justify-content: center;\n  min-width: 40px; }\n  .ListItemAction-module_listItemAction__26S66 svg {\n    width: 20px;\n    height: 20px; }\n";
+var styles$O = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
+styleInject(css_248z$O);
 
-const ListItemAction = ({ children, onClick }) => (React__default["default"].createElement("div", { className: styles$M.listItemAction, onClick: e => onClick && onClick(e) }, children));
+const ListItemAction = ({ children, onClick }) => (React__default["default"].createElement("div", { className: styles$O.listItemAction, onClick: e => onClick && onClick(e) }, children));
 
-var css_248z$L = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n  flex: 1; }\n";
-var styles$L = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
-styleInject(css_248z$L);
+var css_248z$N = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n  flex: 1; }\n";
+var styles$N = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
+styleInject(css_248z$N);
 
 const ListItemText = ({ primary, secondary }) => {
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$L.listItemText);
+        cssClasses.push(styles$N.listItemText);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("div", { className: getCssClasses() },
@@ -251,9 +251,9 @@ const ListItemText = ({ primary, secondary }) => {
 const ListItemTextPrimary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-primary" }, children));
 const ListItemTextSecondary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
 
-var css_248z$K = ".AutoComplete-module_selectContainer__SyqtX {\n  position: relative; }\n\n.AutoComplete-module_select__2_7JD {\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex; }\n  .AutoComplete-module_select__2_7JD:hover {\n    cursor: pointer; }\n\n.AutoComplete-module_selectMenu__2_ybA {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 38px;\n  z-index: 1050;\n  max-height: 280px;\n  overflow: auto; }\n";
-var styles$K = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
-styleInject(css_248z$K);
+var css_248z$M = ".AutoComplete-module_selectContainer__SyqtX {\n  position: relative; }\n\n.AutoComplete-module_select__2_7JD {\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex; }\n  .AutoComplete-module_select__2_7JD:hover {\n    cursor: pointer; }\n\n.AutoComplete-module_selectMenu__2_ybA {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 38px;\n  z-index: 1050;\n  max-height: 280px;\n  overflow: auto; }\n";
+var styles$M = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
+styleInject(css_248z$M);
 
 // preset value
 // enter -> delay? -> show results
@@ -309,7 +309,7 @@ const AutoComplete = (props) => {
     const getCssClass = () => {
         const cssClasses = [];
         className && cssClasses.push(className);
-        cssClasses.push(styles$K.select);
+        cssClasses.push(styles$M.select);
         return cssClasses.filter(r => r).join(' ');
     };
     const show = () => setIsShow(true);
@@ -333,36 +333,35 @@ const AutoComplete = (props) => {
         setModel('');
         setSearchText('');
     };
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { ref: selectConainter, className: styles$K.selectContainer },
-            React__default["default"].createElement("div", { className: "d-flex" },
-                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 }),
-                showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
-                    React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
-            isShow &&
-                React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("div", { className: styles$K.selectMenu },
-                        React__default["default"].createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
-                            React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
-                    React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
-};
-
-var css_248z$J = ".Badge-module_badgeContainer__1QtTD {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle; }\n\n.Badge-module_badge__2Y_LO {\n  top: 0;\n  right: 0;\n  transform: scale(1) translate(50%, -50%);\n  transform-origin: 100% 0%;\n  height: 20px;\n  display: flex;\n  padding: 0 6px;\n  z-index: 1;\n  position: absolute;\n  flex-wrap: wrap;\n  font-size: 0.75rem;\n  min-width: 20px;\n  align-items: center;\n  font-weight: 500;\n  line-height: 1;\n  align-content: center;\n  flex-direction: row;\n  justify-content: center;\n  border-radius: 10px;\n  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Badge-module_badge__2Y_LO.Badge-module_primary__2mn7_ {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .Badge-module_badge__2Y_LO.Badge-module_accent__8Hg8z {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .Badge-module_badge__2Y_LO.Badge-module_secondary__1QqDc {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .Badge-module_badge__2Y_LO.Badge-module_light__3Z7JO {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Badge-module_badge__2Y_LO.Badge-module_dark__2qWe_ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n";
-var styles$J = {"badgeContainer":"Badge-module_badgeContainer__1QtTD","badge":"Badge-module_badge__2Y_LO","primary":"Badge-module_primary__2mn7_","accent":"Badge-module_accent__8Hg8z","secondary":"Badge-module_secondary__1QqDc","light":"Badge-module_light__3Z7JO","dark":"Badge-module_dark__2qWe_"};
-styleInject(css_248z$J);
+    return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$M.selectContainer },
+        React__default["default"].createElement("div", { className: "d-flex" },
+            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 }),
+            showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
+                React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
+        isShow &&
+            React__default["default"].createElement(React__default["default"].Fragment, null,
+                React__default["default"].createElement("div", { className: styles$M.selectMenu },
+                    React__default["default"].createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
+                        React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
+                React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
+};
+
+var css_248z$L = ".Badge-module_badgeContainer__1QtTD {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle; }\n\n.Badge-module_badge__2Y_LO {\n  top: 0;\n  right: 0;\n  transform: scale(1) translate(50%, -50%);\n  transform-origin: 100% 0%;\n  height: 20px;\n  display: flex;\n  padding: 0 6px;\n  z-index: 1;\n  position: absolute;\n  flex-wrap: wrap;\n  font-size: 0.75rem;\n  min-width: 20px;\n  align-items: center;\n  font-weight: 500;\n  line-height: 1;\n  align-content: center;\n  flex-direction: row;\n  justify-content: center;\n  border-radius: 10px;\n  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Badge-module_badge__2Y_LO.Badge-module_primary__2mn7_ {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .Badge-module_badge__2Y_LO.Badge-module_accent__8Hg8z {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .Badge-module_badge__2Y_LO.Badge-module_secondary__1QqDc {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .Badge-module_badge__2Y_LO.Badge-module_light__3Z7JO {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Badge-module_badge__2Y_LO.Badge-module_dark__2qWe_ {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n";
+var styles$L = {"badgeContainer":"Badge-module_badgeContainer__1QtTD","badge":"Badge-module_badge__2Y_LO","primary":"Badge-module_primary__2mn7_","accent":"Badge-module_accent__8Hg8z","secondary":"Badge-module_secondary__1QqDc","light":"Badge-module_light__3Z7JO","dark":"Badge-module_dark__2qWe_"};
+styleInject(css_248z$L);
 
 const Badge = (props) => {
     const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
     const getCssClassesBadgeContainer = () => {
         const cssClasses = [];
-        cssClasses.push(styles$J.badgeContainer);
+        cssClasses.push(styles$L.badgeContainer);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     const getCssClassesBadge = () => {
         const cssClasses = [];
-        cssClasses.push(styles$J.badge);
-        cssClasses.push(styles$J[color]);
+        cssClasses.push(styles$L.badge);
+        cssClasses.push(styles$L[color]);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
@@ -370,42 +369,26 @@ const Badge = (props) => {
         React__default["default"].createElement("span", { className: getCssClassesBadge() }, content)));
 };
 
-var css_248z$I = ".Icon-module_icon__2etAT {\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  width: 20px;\n  height: 20px; }\n  .Icon-module_icon__2etAT svg {\n    width: inherit;\n    height: inherit; }\n  .Icon-module_icon__2etAT.Icon-module_primary__32Mh4 {\n    color: var(--primary); }\n  .Icon-module_icon__2etAT.Icon-module_accent__2U_no {\n    color: var(--accent); }\n  .Icon-module_icon__2etAT.Icon-module_secondary__3cMmx {\n    color: var(--secondary); }\n  .Icon-module_icon__2etAT.Icon-module_light__2SugS {\n    color: var(--light); }\n  .Icon-module_icon__2etAT.Icon-module_dark__GWMzb {\n    color: var(--dark); }\n";
-var styles$I = {"icon":"Icon-module_icon__2etAT","primary":"Icon-module_primary__32Mh4","accent":"Icon-module_accent__2U_no","secondary":"Icon-module_secondary__3cMmx","light":"Icon-module_light__2SugS","dark":"Icon-module_dark__GWMzb"};
-styleInject(css_248z$I);
-
-const Icon = (props) => {
-    const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
-    const getCssClasses = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$I.icon);
-        iconColor && cssClasses.push(styles$I[iconColor]);
-        className && cssClasses.push(className);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
-};
-
-var css_248z$H = ".Button-module_button__3cIVZ {\n  text-transform: uppercase !important;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius);\n  box-shadow: var(--shadow); }\n\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__8Q4uL.Button-module_primary__2soUg:hover {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6 {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6:hover {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb:hover {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__8Q4uL.Button-module_light__JVK1z:hover {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__8Q4uL.Button-module_dark__O89wU:hover {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__8Q4uL:disabled:hover {\n  cursor: not-allowed; }\n\n.Button-module_btnText__32H44 {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__32H44.Button-module_primary__2soUg {\n    color: var(--primary) !important; }\n    .Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n      text-decoration: none;\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_secondary__psAvb {\n    color: var(--secondary) !important; }\n    .Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n      text-decoration: none;\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n    color: var(--accent) !important; }\n    .Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n      text-decoration: none;\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_light__JVK1z {\n    color: var(--light-contrast-text) !important; }\n    .Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n      text-decoration: none;\n      background: var(--light-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_dark__O89wU {\n    color: var(--dark) !important; }\n    .Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n      text-decoration: none;\n      background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__2drkn {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n    color: var(--primary) !important;\n    border-color: var(--primary) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n    color: var(--secondary) !important;\n    border-color: var(--secondary) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n    color: var(--accent) !important;\n    border-color: var(--accent) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n    color: var(--light-contrast-text) !important;\n    border-color: var(--light) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n      background: var(--light-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n    color: var(--dark) !important;\n    border-color: var(--dark) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n      background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__1TN-G {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__1TN-G svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__3uZjE {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__3uZjE svg {\n    width: 18px;\n    height: 18px; }\n";
-var styles$H = {"button":"Button-module_button__3cIVZ","btnContained":"Button-module_btnContained__8Q4uL","primary":"Button-module_primary__2soUg","accent":"Button-module_accent__1_cP6","secondary":"Button-module_secondary__psAvb","light":"Button-module_light__JVK1z","dark":"Button-module_dark__O89wU","btnText":"Button-module_btnText__32H44","btnOutline":"Button-module_btnOutline__2drkn","startIcon":"Button-module_startIcon__1TN-G","endIcon":"Button-module_endIcon__3uZjE"};
-styleInject(css_248z$H);
+var css_248z$K = ".Button-module_button__3cIVZ {\n  text-transform: uppercase !important;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius);\n  box-shadow: var(--shadow); }\n\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary); }\n  .Button-module_btnContained__8Q4uL.Button-module_primary__2soUg:hover {\n    background-color: var(--primary-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6 {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent); }\n  .Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6:hover {\n    background-color: var(--accent-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary); }\n  .Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb:hover {\n    background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z {\n  color: var(--light-contrast-text);\n  background-color: var(--light); }\n  .Button-module_btnContained__8Q4uL.Button-module_light__JVK1z:hover {\n    background-color: var(--light-dark); }\n\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark); }\n  .Button-module_btnContained__8Q4uL.Button-module_dark__O89wU:hover {\n    background-color: var(--dark-dark); }\n\n.Button-module_btnContained__8Q4uL:disabled:hover {\n  cursor: not-allowed; }\n\n.Button-module_btnText__32H44 {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnText__32H44.Button-module_primary__2soUg {\n    color: var(--primary) !important; }\n    .Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n      text-decoration: none;\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_secondary__psAvb {\n    color: var(--secondary) !important; }\n    .Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n      text-decoration: none;\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n    color: var(--accent) !important; }\n    .Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n      text-decoration: none;\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_light__JVK1z {\n    color: var(--light-contrast-text) !important; }\n    .Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n      text-decoration: none;\n      background: var(--light-highlight) !important; }\n  .Button-module_btnText__32H44.Button-module_dark__O89wU {\n    color: var(--dark) !important; }\n    .Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n      text-decoration: none;\n      background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__2drkn {\n  box-shadow: none;\n  text-decoration: none; }\n  .Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n    color: var(--primary) !important;\n    border-color: var(--primary) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n      background: var(--primary-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n    color: var(--secondary) !important;\n    border-color: var(--secondary) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n      background: var(--secondary-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n    color: var(--accent) !important;\n    border-color: var(--accent) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n      background: var(--accent-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n    color: var(--light-contrast-text) !important;\n    border-color: var(--light) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n      background: var(--light-highlight) !important; }\n  .Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n    color: var(--dark) !important;\n    border-color: var(--dark) !important; }\n    .Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n      background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__1TN-G {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px; }\n  .Button-module_startIcon__1TN-G svg {\n    width: 18px;\n    height: 18px; }\n\n.Button-module_endIcon__3uZjE {\n  display: inherit;\n  margin-left: 8px; }\n  .Button-module_endIcon__3uZjE svg {\n    width: 18px;\n    height: 18px; }\n";
+var styles$K = {"button":"Button-module_button__3cIVZ","btnContained":"Button-module_btnContained__8Q4uL","primary":"Button-module_primary__2soUg","accent":"Button-module_accent__1_cP6","secondary":"Button-module_secondary__psAvb","light":"Button-module_light__JVK1z","dark":"Button-module_dark__O89wU","btnText":"Button-module_btnText__32H44","btnOutline":"Button-module_btnOutline__2drkn","startIcon":"Button-module_startIcon__1TN-G","endIcon":"Button-module_endIcon__3uZjE"};
+styleInject(css_248z$K);
 
-const ButtonTemplate = (props) => {
+const Button = (props) => {
     const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$H.button);
+        cssClasses.push(styles$K.button);
         if (variant !== 'outline' && variant !== 'text') {
-            cssClasses.push(styles$H.btnContained);
-            cssClasses.push(styles$H[color]);
+            cssClasses.push(styles$K.btnContained);
+            cssClasses.push(styles$K[color]);
         }
         if (variant === 'outline') {
-            cssClasses.push(styles$H.btnOutline);
-            cssClasses.push(styles$H[color]);
+            cssClasses.push(styles$K.btnOutline);
+            cssClasses.push(styles$K[color]);
         }
         if (variant === 'text') {
-            cssClasses.push(styles$H.btnText);
-            cssClasses.push(styles$H[color]);
+            cssClasses.push(styles$K.btnText);
+            cssClasses.push(styles$K[color]);
         }
         if (isRounded && variant !== 'text') {
             cssClasses.push(`rounded-pill`);
@@ -419,58 +402,54 @@ const ButtonTemplate = (props) => {
     return (React__default["default"].createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
         React__default["default"].createElement("span", { className: "d-flex justify-content-center" },
             startIcon &&
-                React__default["default"].createElement(Icon, { className: styles$H.startIcon }, startIcon),
+                React__default["default"].createElement(Icon, { className: styles$K.startIcon }, startIcon),
             children,
             endIcon &&
-                React__default["default"].createElement(Icon, { className: styles$H.endIcon }, endIcon))));
-};
-
-const Button = (props) => {
-    return (React__default["default"].createElement(ButtonTemplate, Object.assign({}, props)));
+                React__default["default"].createElement(Icon, { className: styles$K.endIcon }, endIcon))));
 };
 
-var css_248z$G = ".ButtonGroup-module_buttonGroup__2RS71 button:not(:last-child) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0; }\n\n.ButtonGroup-module_buttonGroup__2RS71 button:not(:first-child) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0; }\n";
-var styles$G = {"buttonGroup":"ButtonGroup-module_buttonGroup__2RS71"};
-styleInject(css_248z$G);
+var css_248z$J = ".ButtonGroup-module_buttonGroup__2RS71 button:not(:last-child) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0; }\n\n.ButtonGroup-module_buttonGroup__2RS71 button:not(:first-child) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0; }\n";
+var styles$J = {"buttonGroup":"ButtonGroup-module_buttonGroup__2RS71"};
+styleInject(css_248z$J);
 
 const ButtonGroup = (props) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$G.buttonGroup);
+        cssClasses.push(styles$J.buttonGroup);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
 };
 
-var css_248z$F = ".Breadcrumb-module_breadcrumb__2BHXS {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0.75rem 1rem;\n  margin-bottom: 0;\n  list-style: none;\n  border-radius: var(--borderRadius); }\n";
-var styles$F = {"breadcrumb":"Breadcrumb-module_breadcrumb__2BHXS"};
-styleInject(css_248z$F);
+var css_248z$I = ".Breadcrumb-module_breadcrumb__2BHXS {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0.75rem 1rem;\n  margin-bottom: 0;\n  list-style: none;\n  border-radius: var(--borderRadius); }\n";
+var styles$I = {"breadcrumb":"Breadcrumb-module_breadcrumb__2BHXS"};
+styleInject(css_248z$I);
 
 const Breadcrumb = (props) => {
-    const { children, className } = props;
+    const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$F.breadcrumb);
+        cssClasses.push(styles$I.breadcrumb);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React__default["default"].createElement("nav", null,
+    return (React__default["default"].createElement("nav", Object.assign({}, rest),
         React__default["default"].createElement("ol", { className: getCssClasses() }, children)));
 };
 
 const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
 
-var css_248z$E = ".BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D {\n  padding-left: 0.5rem; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D::before {\n  float: left;\n  padding-right: 0.5rem;\n  color: #6c757d;\n  content: \"/\"; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D a:not([href]):not([class]) {\n  color: var(--primary); }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D:hover {\n  cursor: pointer; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D.BreadcrumbItem-module_active__3iVU2:hover {\n  cursor: unset; }\n";
-var styles$E = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__1yy-D","active":"BreadcrumbItem-module_active__3iVU2"};
-styleInject(css_248z$E);
+var css_248z$H = ".BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D {\n  padding-left: 0.5rem; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D::before {\n  float: left;\n  padding-right: 0.5rem;\n  color: #6c757d;\n  content: \"/\"; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D a:not([href]):not([class]) {\n  color: var(--primary); }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D:hover {\n  cursor: pointer; }\n\n.BreadcrumbItem-module_breadcrumbItem__1yy-D.BreadcrumbItem-module_active__3iVU2:hover {\n  cursor: unset; }\n";
+var styles$H = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__1yy-D","active":"BreadcrumbItem-module_active__3iVU2"};
+styleInject(css_248z$H);
 
 const BreadcrumbItem = (props) => {
     const { children, className, isActive, onClick } = props;
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$E.breadcrumbItem);
+        cssClasses.push(styles$H.breadcrumbItem);
         className && cssClasses.push(className);
         isActive && cssClasses.push('active');
         return cssClasses.filter(css => css).join(' ');
@@ -484,106 +463,106 @@ const BreadcrumbItem = (props) => {
             wrapper: label => React__default["default"].createElement("a", null, label) }, children)));
 };
 
-var css_248z$D = ".Card-module_card__31o3Z {\n  background: var(--white);\n  border-radius: var(--borderRadius); }\n  .Card-module_card__31o3Z.Card-module_shadow__2lpYq {\n    box-shadow: var(--shadow); }\n";
-var styles$D = {"card":"Card-module_card__31o3Z","shadow":"Card-module_shadow__2lpYq"};
-styleInject(css_248z$D);
+var css_248z$G = ".Card-module_card__31o3Z {\n  background: var(--white);\n  border-radius: var(--borderRadius); }\n  .Card-module_card__31o3Z.Card-module_shadow__2lpYq {\n    box-shadow: var(--shadow); }\n";
+var styles$G = {"card":"Card-module_card__31o3Z","shadow":"Card-module_shadow__2lpYq"};
+styleInject(css_248z$G);
 
 const Card = (props) => {
     const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$D.card);
-        shadow && cssClasses.push(styles$D.shadow);
+        cssClasses.push(styles$G.card);
+        shadow && cssClasses.push(styles$G.shadow);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$C = ".CardBody-module_cardBody__N8z-L {\n  flex: 1 1 auto;\n  min-height: 1px;\n  padding: 1.25rem; }\n";
-var styles$C = {"cardBody":"CardBody-module_cardBody__N8z-L"};
-styleInject(css_248z$C);
+var css_248z$F = ".CardBody-module_cardBody__N8z-L {\n  flex: 1 1 auto;\n  min-height: 1px;\n  padding: 1.25rem; }\n";
+var styles$F = {"cardBody":"CardBody-module_cardBody__N8z-L"};
+styleInject(css_248z$F);
 
 const CardBody = (props) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$C.cardBody);
+        cssClasses.push(styles$F.cardBody);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$B = ".CardFooter-module_cardFooter__3dYKa {\n  padding: 0.75rem 1.25rem;\n  background-color: rgba(0, 0, 0, 0.03);\n  border-top: 1px solid rgba(0, 0, 0, 0.125); }\n  .CardFooter-module_cardFooter__3dYKa:last-child {\n    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }\n";
-var styles$B = {"cardFooter":"CardFooter-module_cardFooter__3dYKa"};
-styleInject(css_248z$B);
+var css_248z$E = ".CardFooter-module_cardFooter__3dYKa {\n  padding: 0.75rem 1.25rem;\n  background-color: rgba(0, 0, 0, 0.03);\n  border-top: 1px solid rgba(0, 0, 0, 0.125); }\n  .CardFooter-module_cardFooter__3dYKa:last-child {\n    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }\n";
+var styles$E = {"cardFooter":"CardFooter-module_cardFooter__3dYKa"};
+styleInject(css_248z$E);
 
 const CardFooter = (props) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$B.cardFooter);
+        cssClasses.push(styles$E.cardFooter);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$A = ".CardSubtitle-module_cardSubtitle__2WWHW {\n  color: #6c757d !important; }\n";
-var styles$A = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__2WWHW"};
-styleInject(css_248z$A);
+var css_248z$D = ".CardSubtitle-module_cardSubtitle__2WWHW {\n  color: #6c757d !important; }\n";
+var styles$D = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__2WWHW"};
+styleInject(css_248z$D);
 
 const CardSubtitle = (props) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$A.cardSubtitle);
+        cssClasses.push(styles$D.cardSubtitle);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$z = ".CardText-module_cardText__1LWJi:last-child {\n  margin-bottom: 0; }\n";
-var styles$z = {"cardText":"CardText-module_cardText__1LWJi"};
-styleInject(css_248z$z);
+var css_248z$C = ".CardText-module_cardText__1LWJi:last-child {\n  margin-bottom: 0; }\n";
+var styles$C = {"cardText":"CardText-module_cardText__1LWJi"};
+styleInject(css_248z$C);
 
 const CardText = (props) => {
     const { children, className } = props, rest = __rest(props, ["children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$z.cardText);
+        cssClasses.push(styles$C.cardText);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), props.children));
 };
 
-var css_248z$y = ".CardTitle-module_cardTitle__24Amb {\n  margin-bottom: 0;\n  font-size: 1.5rem;\n  font-weight: 400;\n  line-height: 1.334;\n  letter-spacing: 0em; }\n";
-var styles$y = {"cardTitle":"CardTitle-module_cardTitle__24Amb"};
-styleInject(css_248z$y);
+var css_248z$B = ".CardTitle-module_cardTitle__24Amb {\n  margin-bottom: 0;\n  font-size: 1.5rem;\n  font-weight: 400;\n  line-height: 1.334;\n  letter-spacing: 0em; }\n";
+var styles$B = {"cardTitle":"CardTitle-module_cardTitle__24Amb"};
+styleInject(css_248z$B);
 
 const CardTitle = (props) => {
     const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$y.cardTitle);
+        cssClasses.push(styles$B.cardTitle);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React__default["default"].createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$x = ".CardImage-module_cardImage__1tZM4 {\n  flex-shrink: 0;\n  width: 100%;\n  border-top-left-radius: calc(0.25rem - 1px);\n  border-top-right-radius: calc(0.25rem - 1px); }\n";
-var styles$x = {"cardImage":"CardImage-module_cardImage__1tZM4"};
-styleInject(css_248z$x);
+var css_248z$A = ".CardImage-module_cardImage__1tZM4 {\n  flex-shrink: 0;\n  width: 100%;\n  border-top-left-radius: calc(0.25rem - 1px);\n  border-top-right-radius: calc(0.25rem - 1px); }\n";
+var styles$A = {"cardImage":"CardImage-module_cardImage__1tZM4"};
+styleInject(css_248z$A);
 
 const CardImage = (props) => {
     const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$x.cardImage);
+        cssClasses.push(styles$A.cardImage);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -632,15 +611,31 @@ const CircleSolidIcon = () => (React__default["default"].createElement("svg", {
 const ChevronLeftSolidIcon = () => (React__default["default"].createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
     React__default["default"].createElement("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" })));
 
-var css_248z$w = ".Typography-module_typography__2bM6E {\n  text-overflow: ellipsis;\n  overflow: hidden !important; }\n";
-var styles$w = {"typography":"Typography-module_typography__2bM6E"};
-styleInject(css_248z$w);
+var css_248z$z = ".Icon-module_icon__2etAT {\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  width: 20px;\n  height: 20px; }\n  .Icon-module_icon__2etAT svg {\n    width: inherit;\n    height: inherit; }\n  .Icon-module_icon__2etAT.Icon-module_primary__32Mh4 {\n    color: var(--primary); }\n  .Icon-module_icon__2etAT.Icon-module_accent__2U_no {\n    color: var(--accent); }\n  .Icon-module_icon__2etAT.Icon-module_secondary__3cMmx {\n    color: var(--secondary); }\n  .Icon-module_icon__2etAT.Icon-module_light__2SugS {\n    color: var(--light); }\n  .Icon-module_icon__2etAT.Icon-module_dark__GWMzb {\n    color: var(--dark); }\n";
+var styles$z = {"icon":"Icon-module_icon__2etAT","primary":"Icon-module_primary__32Mh4","accent":"Icon-module_accent__2U_no","secondary":"Icon-module_secondary__3cMmx","light":"Icon-module_light__2SugS","dark":"Icon-module_dark__GWMzb"};
+styleInject(css_248z$z);
+
+const Icon = (props) => {
+    const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$z.icon);
+        iconColor && cssClasses.push(styles$z[iconColor]);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+};
+
+var css_248z$y = ".Typography-module_typography__2bM6E {\n  text-overflow: ellipsis;\n  overflow: hidden !important; }\n";
+var styles$y = {"typography":"Typography-module_typography__2bM6E"};
+styleInject(css_248z$y);
 
 const Wrapper = (props) => {
     const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$w.typography);
+        cssClasses.push(styles$y.typography);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -651,21 +646,21 @@ const Typography = (_a) => {
     return (React__default["default"].createElement(Wrapper, Object.assign({ as: as }, rest), children));
 };
 
-var css_248z$v = ".IconButton-module_iconButton__1xqrL {\n  border-radius: 100%;\n  padding: 0px;\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  min-width: auto;\n  box-shadow: none;\n  font-weight: 400;\n  text-align: center;\n  vertical-align: middle;\n  -webkit-user-select: none;\n  user-select: none;\n  background-color: transparent;\n  font-size: 1rem;\n  line-height: 1.5;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: none; }\n  .IconButton-module_iconButton__1xqrL:hover {\n    cursor: pointer; }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_shadow__5U4-_ {\n    box-shadow: var(--shadow); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_md__1lmDL {\n    width: 48px;\n    height: 48px; }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_lg__1O2Uy {\n    width: 56px;\n    height: 56px; }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG {\n    padding: 0;\n    background: transparent;\n    color: inherit; }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_active__2tJut {\n      background-color: rgba(0, 0, 0, 0.04); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_primary__qRw4T {\n      color: var(--primary); }\n      .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_primary__qRw4T:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_primary__qRw4T.IconButton-module_active__2tJut {\n        color: var(--primary-dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_secondary__1lzNL {\n      color: var(--secondary); }\n      .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_secondary__1lzNL:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_secondary__1lzNL.IconButton-module_active__2tJut {\n        color: var(--secondary-dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_accent__exm5t {\n      color: var(--accent); }\n      .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_accent__exm5t:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_accent__exm5t.IconButton-module_active__2tJut {\n        color: var(--accent-dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_light__2nWhD {\n      color: var(--light); }\n      .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_light__2nWhD:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_light__2nWhD.IconButton-module_active__2tJut {\n        color: var(--light-dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_dark__1e6bR {\n      color: var(--dark); }\n      .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_dark__1e6bR:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_dark__1e6bR.IconButton-module_active__2tJut {\n        color: var(--dark-dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_disabled__3TgpF {\n      color: rgba(0, 0, 0, 0.26);\n      background-color: transparent;\n      cursor: default;\n      pointer-events: none; }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_active__2tJut {\n    background-color: rgba(0, 0, 0, 0.04); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T {\n    background-color: var(--primary);\n    color: var(--white); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T.IconButton-module_active__2tJut {\n      background-color: var(--primary-dark); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL {\n    background-color: var(--secondary);\n    color: var(--white); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL.IconButton-module_active__2tJut {\n      background-color: var(--secondary-dark); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t {\n    background-color: var(--accent);\n    color: var(--white); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t.IconButton-module_active__2tJut {\n      background-color: var(--accent-dark); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD {\n    background-color: var(--light);\n    color: var(--dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD.IconButton-module_active__2tJut {\n      background-color: var(--light-dark); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR {\n    background-color: var(--dark);\n    color: var(--white); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR.IconButton-module_active__2tJut {\n      background-color: var(--dark-light); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_disabled__3TgpF {\n    color: rgba(0, 0, 0, 0.26);\n    background-color: transparent;\n    cursor: default;\n    pointer-events: none; }\n";
-var styles$v = {"iconButton":"IconButton-module_iconButton__1xqrL","shadow":"IconButton-module_shadow__5U4-_","md":"IconButton-module_md__1lmDL","lg":"IconButton-module_lg__1O2Uy","text":"IconButton-module_text__33RrG","active":"IconButton-module_active__2tJut","primary":"IconButton-module_primary__qRw4T","secondary":"IconButton-module_secondary__1lzNL","accent":"IconButton-module_accent__exm5t","light":"IconButton-module_light__2nWhD","dark":"IconButton-module_dark__1e6bR","disabled":"IconButton-module_disabled__3TgpF","contained":"IconButton-module_contained__gWulJ"};
-styleInject(css_248z$v);
+var css_248z$x = ".IconButton-module_iconButton__1xqrL {\n  border-radius: 100%;\n  padding: 0px;\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  min-width: auto;\n  box-shadow: none;\n  font-weight: 400;\n  text-align: center;\n  vertical-align: middle;\n  -webkit-user-select: none;\n  user-select: none;\n  background-color: transparent;\n  font-size: 1rem;\n  line-height: 1.5;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: none; }\n  .IconButton-module_iconButton__1xqrL:hover {\n    cursor: pointer; }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_shadow__5U4-_ {\n    box-shadow: var(--shadow); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_md__1lmDL {\n    width: 48px;\n    height: 48px; }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_lg__1O2Uy {\n    width: 56px;\n    height: 56px; }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG {\n    padding: 0;\n    background: transparent;\n    color: inherit; }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_active__2tJut {\n      background-color: rgba(0, 0, 0, 0.04); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_primary__qRw4T {\n      color: var(--primary); }\n      .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_primary__qRw4T:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_primary__qRw4T.IconButton-module_active__2tJut {\n        color: var(--primary-dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_secondary__1lzNL {\n      color: var(--secondary); }\n      .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_secondary__1lzNL:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_secondary__1lzNL.IconButton-module_active__2tJut {\n        color: var(--secondary-dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_accent__exm5t {\n      color: var(--accent); }\n      .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_accent__exm5t:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_accent__exm5t.IconButton-module_active__2tJut {\n        color: var(--accent-dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_light__2nWhD {\n      color: var(--light); }\n      .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_light__2nWhD:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_light__2nWhD.IconButton-module_active__2tJut {\n        color: var(--light-dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_dark__1e6bR {\n      color: var(--dark); }\n      .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_dark__1e6bR:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_dark__1e6bR.IconButton-module_active__2tJut {\n        color: var(--dark-dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_disabled__3TgpF {\n      color: rgba(0, 0, 0, 0.26);\n      background-color: transparent;\n      cursor: default;\n      pointer-events: none; }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_active__2tJut {\n    background-color: rgba(0, 0, 0, 0.04); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T {\n    background-color: var(--primary);\n    color: var(--white); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T.IconButton-module_active__2tJut {\n      background-color: var(--primary-dark); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL {\n    background-color: var(--secondary);\n    color: var(--white); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL.IconButton-module_active__2tJut {\n      background-color: var(--secondary-dark); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t {\n    background-color: var(--accent);\n    color: var(--white); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t.IconButton-module_active__2tJut {\n      background-color: var(--accent-dark); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD {\n    background-color: var(--light);\n    color: var(--dark); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD.IconButton-module_active__2tJut {\n      background-color: var(--light-dark); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR {\n    background-color: var(--dark);\n    color: var(--white); }\n    .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR.IconButton-module_active__2tJut {\n      background-color: var(--dark-light); }\n  .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_disabled__3TgpF {\n    color: rgba(0, 0, 0, 0.26);\n    background-color: transparent;\n    cursor: default;\n    pointer-events: none; }\n";
+var styles$x = {"iconButton":"IconButton-module_iconButton__1xqrL","shadow":"IconButton-module_shadow__5U4-_","md":"IconButton-module_md__1lmDL","lg":"IconButton-module_lg__1O2Uy","text":"IconButton-module_text__33RrG","active":"IconButton-module_active__2tJut","primary":"IconButton-module_primary__qRw4T","secondary":"IconButton-module_secondary__1lzNL","accent":"IconButton-module_accent__exm5t","light":"IconButton-module_light__2nWhD","dark":"IconButton-module_dark__1e6bR","disabled":"IconButton-module_disabled__3TgpF","contained":"IconButton-module_contained__gWulJ"};
+styleInject(css_248z$x);
 
 const IconButton = (props) => {
     const { children, icon, label, variant = exports.VARIANT.text, color = exports.COLOR.dark, size = exports.SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "label", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$v[color]);
-        cssClasses.push(styles$v[variant]);
-        cssClasses.push(styles$v[size]);
-        cssClasses.push(styles$v.iconButton);
-        isActive && cssClasses.push(styles$v.active);
-        disabled && cssClasses.push(styles$v.disabled);
-        shadow && cssClasses.push(styles$v.shadow);
+        cssClasses.push(styles$x[color]);
+        cssClasses.push(styles$x[variant]);
+        cssClasses.push(styles$x[size]);
+        cssClasses.push(styles$x.iconButton);
+        isActive && cssClasses.push(styles$x.active);
+        disabled && cssClasses.push(styles$x.disabled);
+        shadow && cssClasses.push(styles$x.shadow);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -674,9 +669,9 @@ const IconButton = (props) => {
         label && React__default["default"].createElement(Typography, null, label)));
 };
 
-var css_248z$u = ".Checkbox-module_checkboxContainer__2oWhu {\n  display: flex;\n  align-items: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Checkbox-module_checkboxContainer__2oWhu label {\n    margin-bottom: 0;\n    margin-left: 0; }\n    .Checkbox-module_checkboxContainer__2oWhu label:hover {\n      cursor: pointer; }\n\n.Checkbox-module_checkboxLabel__27Y6U.Checkbox-module_disabled__3EXUd {\n  color: rgba(0, 0, 0, 0.26);\n  cursor: not-allowed; }\n";
-var styles$u = {"checkboxContainer":"Checkbox-module_checkboxContainer__2oWhu","checkboxLabel":"Checkbox-module_checkboxLabel__27Y6U","disabled":"Checkbox-module_disabled__3EXUd"};
-styleInject(css_248z$u);
+var css_248z$w = ".Checkbox-module_checkboxContainer__2oWhu {\n  display: flex;\n  align-items: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Checkbox-module_checkboxContainer__2oWhu label {\n    margin-bottom: 0;\n    margin-left: 0; }\n    .Checkbox-module_checkboxContainer__2oWhu label:hover {\n      cursor: pointer; }\n\n.Checkbox-module_checkboxLabel__27Y6U.Checkbox-module_disabled__3EXUd {\n  color: rgba(0, 0, 0, 0.26);\n  cursor: not-allowed; }\n";
+var styles$w = {"checkboxContainer":"Checkbox-module_checkboxContainer__2oWhu","checkboxLabel":"Checkbox-module_checkboxLabel__27Y6U","disabled":"Checkbox-module_disabled__3EXUd"};
+styleInject(css_248z$w);
 
 const Checkbox = (props) => {
     const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
@@ -708,27 +703,29 @@ const Checkbox = (props) => {
     };
     const handleClick = () => {
         var _a;
-        setIsChecked(!isChecked);
-        (_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
+        if (!disabled && !readOnly) {
+            setIsChecked(!isChecked);
+            (_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
     };
-    return (React__default["default"].createElement("div", { className: styles$u.checkboxContainer },
+    return (React__default["default"].createElement("div", { className: styles$w.checkboxContainer },
         React__default["default"].createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
-        React__default["default"].createElement("label", { onClick: handleClick, className: styles$u.checkboxLabel + ' ' + (disabled ? styles$u['disabled'] : undefined) }, label),
+        React__default["default"].createElement("label", { onClick: handleClick, className: styles$w.checkboxLabel + ' ' + (disabled ? styles$w['disabled'] : undefined) }, label),
         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))));
 };
 
-var css_248z$t = ".Chip-module_chip__1cghp {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1; }\n  .Chip-module_chip__1cghp svg {\n    width: 18px;\n    height: 18px; }\n  .Chip-module_chip__1cghp .Chip-module_deleteIcon__34X9c {\n    margin-left: 5px; }\n    .Chip-module_chip__1cghp .Chip-module_deleteIcon__34X9c:hover {\n      cursor: pointer; }\n  .Chip-module_chip__1cghp.Chip-module_primary__198Dq {\n    background: var(--primary);\n    color: var(--primary-contrast-text); }\n  .Chip-module_chip__1cghp.Chip-module_secondary__14H0b {\n    background: var(--secondary);\n    color: var(--secondary-contrast-text); }\n  .Chip-module_chip__1cghp.Chip-module_accent__2LkWr {\n    background: var(--accent);\n    color: var(--accent-contrast-text); }\n  .Chip-module_chip__1cghp.Chip-module_light__2zVYs {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Chip-module_chip__1cghp.Chip-module_dark__2Bg-S {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover {\n    cursor: pointer; }\n    .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_primary__198Dq {\n      background: var(--primary-dark); }\n    .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_secondary__14H0b {\n      background: var(--secondary-dark); }\n    .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_accent__2LkWr {\n      background: var(--accent-dark); }\n  .Chip-module_chip__1cghp.Chip-module_shadow__3TYny {\n    box-shadow: var(--shadow); }\n";
-var styles$t = {"chip":"Chip-module_chip__1cghp","deleteIcon":"Chip-module_deleteIcon__34X9c","primary":"Chip-module_primary__198Dq","secondary":"Chip-module_secondary__14H0b","accent":"Chip-module_accent__2LkWr","light":"Chip-module_light__2zVYs","dark":"Chip-module_dark__2Bg-S","clickable":"Chip-module_clickable__2Y4x7","shadow":"Chip-module_shadow__3TYny"};
-styleInject(css_248z$t);
+var css_248z$v = ".Chip-module_chip__1cghp {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1; }\n  .Chip-module_chip__1cghp svg {\n    width: 18px;\n    height: 18px; }\n  .Chip-module_chip__1cghp .Chip-module_deleteIcon__34X9c {\n    margin-left: 5px; }\n    .Chip-module_chip__1cghp .Chip-module_deleteIcon__34X9c:hover {\n      cursor: pointer; }\n  .Chip-module_chip__1cghp.Chip-module_primary__198Dq {\n    background: var(--primary);\n    color: var(--primary-contrast-text); }\n  .Chip-module_chip__1cghp.Chip-module_secondary__14H0b {\n    background: var(--secondary);\n    color: var(--secondary-contrast-text); }\n  .Chip-module_chip__1cghp.Chip-module_accent__2LkWr {\n    background: var(--accent);\n    color: var(--accent-contrast-text); }\n  .Chip-module_chip__1cghp.Chip-module_light__2zVYs {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Chip-module_chip__1cghp.Chip-module_dark__2Bg-S {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n  .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover {\n    cursor: pointer; }\n    .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_primary__198Dq {\n      background: var(--primary-dark); }\n    .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_secondary__14H0b {\n      background: var(--secondary-dark); }\n    .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_accent__2LkWr {\n      background: var(--accent-dark); }\n  .Chip-module_chip__1cghp.Chip-module_shadow__3TYny {\n    box-shadow: var(--shadow); }\n";
+var styles$v = {"chip":"Chip-module_chip__1cghp","deleteIcon":"Chip-module_deleteIcon__34X9c","primary":"Chip-module_primary__198Dq","secondary":"Chip-module_secondary__14H0b","accent":"Chip-module_accent__2LkWr","light":"Chip-module_light__2zVYs","dark":"Chip-module_dark__2Bg-S","clickable":"Chip-module_clickable__2Y4x7","shadow":"Chip-module_shadow__3TYny"};
+styleInject(css_248z$v);
 
 const Chip = (props) => {
     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"]);
     const getCssClass = () => {
         const cssClasses = [];
-        cssClasses.push(styles$t.chip);
-        cssClasses.push(styles$t[color]);
-        shadow && cssClasses.push(styles$t['shadow']);
-        onClick && cssClasses.push(styles$t['clickable']);
+        cssClasses.push(styles$v.chip);
+        cssClasses.push(styles$v[color]);
+        shadow && cssClasses.push(styles$v['shadow']);
+        onClick && cssClasses.push(styles$v['clickable']);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
@@ -738,10 +735,23 @@ const Chip = (props) => {
     };
     return (React__default["default"].createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
         React__default["default"].createElement("div", null, children),
-        isDeletable && (React__default["default"].createElement("div", { className: styles$t.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
+        isDeletable && (React__default["default"].createElement("div", { className: styles$v.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
 };
 
-const FormLabel = ({ children, className, htmlFor }) => (React__default["default"].createElement("label", { htmlFor: htmlFor, className: className }, children));
+var css_248z$u = ".FormLabel-module_formLabel__1Zv0W {\n  margin-bottom: .5rem; }\n";
+var styles$u = {"formLabel":"FormLabel-module_formLabel__1Zv0W"};
+styleInject(css_248z$u);
+
+const FormLabel = (props) => {
+    const { children, className, htmlFor } = props, rest = __rest(props, ["children", "className", "htmlFor"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$u.formLabel);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React__default["default"].createElement("label", Object.assign({ htmlFor: htmlFor, className: getCssClasses() }, rest), children));
+};
 
 const FormGroup = (props) => {
     const { children, className = 'mb-1' } = props;
@@ -774,9 +784,9 @@ const FileInput = (props) => {
         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))));
 };
 
-var css_248z$s = ".Select-module_selectContainer__2oizY {\n  position: relative; }\n\n.Select-module_select__MSqgU {\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex; }\n  .Select-module_select__MSqgU:hover {\n    cursor: pointer; }\n\n.Select-module_selectMenu__2vhJt {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto; }\n";
-var styles$s = {"selectContainer":"Select-module_selectContainer__2oizY","select":"Select-module_select__MSqgU","selectMenu":"Select-module_selectMenu__2vhJt"};
-styleInject(css_248z$s);
+var css_248z$t = ".Select-module_selectContainer__2oizY {\n  position: relative; }\n\n.Select-module_select__MSqgU {\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex; }\n  .Select-module_select__MSqgU:hover {\n    cursor: pointer; }\n\n.Select-module_selectMenu__2vhJt {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto; }\n";
+var styles$t = {"selectContainer":"Select-module_selectContainer__2oizY","select":"Select-module_select__MSqgU","selectMenu":"Select-module_selectMenu__2vhJt"};
+styleInject(css_248z$t);
 
 const Select = (props) => {
     var _a, _b, _c;
@@ -789,7 +799,7 @@ const Select = (props) => {
     const getCssClass = () => {
         const cssClasses = [];
         className && cssClasses.push(className);
-        cssClasses.push(styles$s.select);
+        cssClasses.push(styles$t.select);
         return cssClasses.filter(r => r).join(' ');
     };
     React.useEffect(() => {
@@ -908,7 +918,7 @@ const Select = (props) => {
         }
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { ref: selectConainter, className: styles$s.selectContainer },
+        React__default["default"].createElement("div", { ref: selectConainter, className: styles$t.selectContainer },
             React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
                 !multiple && renderSingleViewModel(),
                 multiple && renderMultipleViewModel(),
@@ -916,7 +926,7 @@ const Select = (props) => {
                     React__default["default"].createElement(ChevronDownSolidIcon, null))),
             isShow &&
                 reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement("div", { className: styles$s.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 } },
+                    React__default["default"].createElement("div", { className: styles$t.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 } },
                         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) },
                             multiple &&
                                 React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
@@ -924,23 +934,40 @@ const Select = (props) => {
                     React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body))));
 };
 
-var css_248z$r = "textarea {\n  min-height: calc(10em + 0.75rem + 2px);\n  display: block;\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  background-clip: padding-box;\n  border: 2px solid var(--input-border-color);\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border-radius: var(--borderRadius);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  resize: vertical; }\n  textarea:focus {\n    outline: none !important;\n    border-color: var(--primary); }\n";
-var styles$r = {};
-styleInject(css_248z$r);
+var css_248z$s = "textarea {\n  min-height: calc(10em + 0.75rem + 2px);\n  display: block;\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  background-clip: padding-box;\n  border: 2px solid var(--input-border-color);\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border-radius: var(--borderRadius);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  resize: vertical; }\n  textarea:focus {\n    outline: none !important;\n    border-color: var(--primary); }\n";
+var styles$s = {};
+styleInject(css_248z$s);
 
 const Textarea = (props) => {
     const { className } = props, rest = __rest(props, ["className"]);
     const getCssClass = () => {
         const cssClasses = [];
-        cssClasses.push(styles$r.textarea);
+        cssClasses.push(styles$s.textarea);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
     return (React__default["default"].createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
 };
 
+var css_248z$r = ".FormInput-module_formInput__1gAYi {\n  display: block;\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  -webkit-appearance: none;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n  .FormInput-module_formInput__1gAYi:focus {\n    color: #212529;\n    background-color: #fff;\n    border-color: #86b7fe;\n    outline: 0;\n    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }\n";
+var styles$r = {"formInput":"FormInput-module_formInput__1gAYi"};
+styleInject(css_248z$r);
+
 const FormInput = (props) => {
-    const { value, name, type, placeholder, className = 'form-control', isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onChange, onBlur, onKeyDown } = props;
+    const { value, name, type, placeholder, className = 'form-control', isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$r.formInput);
+        className && cssClasses.push(className);
+        !isValid && cssClasses.push('is-invalid');
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleOnInput = (value, type, name) => {
+        onInput && onInput({ value, type, name });
+    };
+    const handleOnChange = (value, type, name) => {
+        onChange && onChange({ value, type, name });
+    };
     return (React__default["default"].createElement(React.Fragment, null,
         (type === 'text' ||
             type === 'date' ||
@@ -951,24 +978,32 @@ const FormInput = (props) => {
             type === 'color' ||
             type === 'time')
             &&
-                React__default["default"].createElement("input", { id: name, name: name, type: type, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, onChange: e => onChange && onChange(name, e.target.value, type), onBlur: onBlur, placeholder: placeholder, readOnly: readonly, disabled: disabled, onKeyDown: onKeyDown }),
+                React__default["default"].createElement("input", { id: name, name: name, type: type, className: getCssClasses(), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), onBlur: onBlur, placeholder: placeholder, readOnly: readonly, disabled: disabled, onKeyDown: onKeyDown }),
         type === 'file' &&
-            React__default["default"].createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: e => onChange && onChange(name, e.target.value, type) }, "choose a file"),
+            React__default["default"].createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: e => handleOnChange(e.target.value, type, name) }, "choose a file"),
         type === 'textarea' &&
-            React__default["default"].createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, onChange: e => onChange && onChange(name, e.target.value, type), placeholder: placeholder, rows: textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
+            React__default["default"].createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), placeholder: placeholder, rows: textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
         type === 'select' &&
-            React__default["default"].createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e => onChange && onChange(name, e, type), onKeyDown: onKeyDown, options: options }),
+            React__default["default"].createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e => handleOnChange(e, type, name), onKeyDown: onKeyDown, options: options }),
         type === 'autocomplete' &&
-            React__default["default"].createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => onChange && onChange(name, e, type), onKeyDown: onKeyDown, options: options }),
+            React__default["default"].createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), onKeyDown: onKeyDown, options: options }),
         type === 'checkbox' &&
-            React__default["default"].createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => onChange && onChange(name, e.target.checked, type), checked: value, onKeyDown: onKeyDown }),
+            React__default["default"].createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value, onKeyDown: onKeyDown }),
         type === 'radio' &&
             React__default["default"].createElement(React.Fragment, null, options.map((option) => React__default["default"].createElement("div", { className: "form-check", key: option.id },
-                React__default["default"].createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => onChange && onChange(name, e.target.value, type), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
+                React__default["default"].createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
                 React__default["default"].createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
 };
 
-const FormHint = ({ hint, className = 'form-text text-muted' }) => (React__default["default"].createElement("small", { className: className }, hint));
+const FormHint = (props) => {
+    const { children, className = 'form-text text-muted' } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return (React__default["default"].createElement("small", { className: getCssClasses() }, children));
+};
 
 const FormError = (props) => {
     const { className = 'invalid-feedback', errors = [] } = props;
@@ -1147,11 +1182,11 @@ class Form extends React.Component {
             return (React__default["default"].createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
                 this.getControl(fieldKey).config.labelPosition !== 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
                     this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
-                React__default["default"].createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: (name, value, type) => this.handleInputChange(name, value, type), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
+                React__default["default"].createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value, type }) => this.handleInputChange(name, value, type), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
                 this.getControl(fieldKey).config.labelPosition === 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
                     this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
                 this.getControl(fieldKey).config.hint &&
-                    React__default["default"].createElement(FormHint, { hint: this.getControl(fieldKey).config.hint }),
+                    React__default["default"].createElement(FormHint, null, this.getControl(fieldKey).config.hint),
                 this.getControl(fieldKey).errors &&
                     React__default["default"].createElement(FormError, { errors: this.getControl(fieldKey).errors })));
         })));
@@ -1854,7 +1889,7 @@ var styles$d = {"snackbar":"Snackbar-module_snackbar__3AF3D","bounceIn":"Snackba
 styleInject(css_248z$d);
 
 const Snackbar = (props) => {
-    const { message, color = exports.COLOR.dark, actionText = 'ok', onOk } = props;
+    const { children, color = exports.COLOR.dark, actionText = 'ok', onOk } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$d.snackbar);
@@ -1862,11 +1897,11 @@ const Snackbar = (props) => {
         cssClasses.push(styles$d[color]);
         return cssClasses.filter(css => css).join(' ');
     };
-    const handleClickAction = () => {
-        onOk && onOk();
+    const handleClickAction = (e) => {
+        onOk && onOk(e);
     };
     return (React__default["default"].createElement("div", { className: getCssClasses() },
-        React__default["default"].createElement("div", { className: styles$d.text }, message),
+        React__default["default"].createElement("div", { className: styles$d.text }, children),
         React__default["default"].createElement("div", { className: styles$d.action + " text-accent", onClick: handleClickAction },
             React__default["default"].createElement("span", null, actionText))));
 };
@@ -1891,7 +1926,7 @@ class SnackbarService {
                 resolve();
                 this.hide();
             };
-            reactDom.render(React__default["default"].createElement(Snackbar, { message: message, color: mergedOptions.color, actionText: mergedOptions.actionText, onOk: handleOk }), this.container);
+            reactDom.render(React__default["default"].createElement(Snackbar, { color: mergedOptions.color, actionText: mergedOptions.actionText, onOk: handleOk }, message), this.container);
         });
     }
     hide() {
@@ -1949,14 +1984,14 @@ var styles$a = {"speedDialAction":"SpeedDialAction-module_speedDialAction__qmExs
 styleInject(css_248z$a);
 
 const SpeedDialAction = (props) => {
-    const { icon, onClick, className } = props;
+    const { icon, color = exports.COLOR.light, onClick, className } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$a.speedDialAction);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React__default["default"].createElement(IconButton, { className: getCssClasses(), icon: icon, color: exports.COLOR.light, shadow: true, onClick: onClick }));
+    return (React__default["default"].createElement(IconButton, { className: getCssClasses(), icon: icon, color: color, variant: exports.VARIANT.contained, shadow: true, onClick: onClick }));
 };
 
 const SpeedDialIcon = (props) => {