react-asc 18.9.0 → 18.9.4

package/index.es.js

@@ -169,17 +169,15 @@ var styles$S = {"list":"List-module_list__1ax9w"};
 styleInject(css_248z$S);
 
 const List = (props) => {
-    const { children, className, isFlush } = props;
+    const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        if (isFlush) {
-            cssClasses.push(styles$S.flush);
-        }
+        isFlush && cssClasses.push(styles$S.flush);
         cssClasses.push(styles$S.list);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("ul", { className: getCssClasses() }, children));
+    return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
 };
 
 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";
@@ -187,55 +185,61 @@ var styles$R = {"listItem":"ListItem-module_listItem__3hAZb","active":"ListItem-
 styleInject(css_248z$R);
 
 const ListItem = (props) => {
-    const { id, children, color, active, className, isHoverable, disabled, onClick } = props;
+    const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        if (active) {
-            cssClasses.push(styles$R['active']);
-        }
-        if (disabled) {
-            cssClasses.push(styles$R['disabled']);
-        }
-        color && cssClasses.push(styles$R[color]);
         cssClasses.push(styles$R.listItem);
+        color && cssClasses.push(styles$R[color]);
+        active && cssClasses.push(styles$R['active']);
+        disabled && cssClasses.push(styles$R['disabled']);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClick = (e) => {
         !disabled && onClick && onClick(e);
     };
-    return (React.createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
+    return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
 };
 
 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.createElement("div", { className: styles$Q.avatar }, avatar));
+const ListItemAvatar = (_a) => {
+    var { avatar } = _a, rest = __rest(_a, ["avatar"]);
+    return (React.createElement("div", Object.assign({ className: styles$Q.avatar }, rest), avatar));
+};
 
 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.createElement("div", { className: styles$P.icon }, icon));
+const ListItemIcon = (_a) => {
+    var { icon } = _a, rest = __rest(_a, ["icon"]);
+    return (React.createElement("div", Object.assign({ className: styles$P.icon }, rest), icon));
+};
 
 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.createElement("div", { className: styles$O.listItemAction, onClick: e => onClick && onClick(e) }, children));
+const ListItemAction = (_a) => {
+    var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
+    return (React.createElement("div", Object.assign({ className: styles$O.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
+};
 
 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 ListItemText = (_a) => {
+    var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$N.listItemText);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", { className: getCssClasses() },
+    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
         React.createElement(ListItemTextPrimary, null, primary),
         secondary &&
             React.createElement(ListItemTextSecondary, null, secondary)));
@@ -619,51 +623,32 @@ const Icon = (props) => {
     return (React.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"};
+var css_248z$y = ".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$y = {"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$y);
 
-const Wrapper = (props) => {
-    const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
-    const getCssClasses = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$y.typography);
-        className && cssClasses.push(className);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    return React.createElement(as, Object.assign(Object.assign({}, rest), { className: getCssClasses() }), children);
-};
-const Typography = (_a) => {
-    var { children, as = 'span' } = _a, rest = __rest(_a, ["children", "as"]);
-    return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
-};
-
-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 = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "label", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
+    const { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        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);
+        cssClasses.push(styles$y[color]);
+        cssClasses.push(styles$y[variant]);
+        cssClasses.push(styles$y[size]);
+        cssClasses.push(styles$y.iconButton);
+        isActive && cssClasses.push(styles$y.active);
+        disabled && cssClasses.push(styles$y.disabled);
+        shadow && cssClasses.push(styles$y.shadow);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses(), disabled: disabled }, rest),
         icon && React.createElement(Icon, null, icon),
-        label && React.createElement(Typography, null, label)));
+        children));
 };
 
-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);
+var css_248z$x = ".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$x = {"checkboxContainer":"Checkbox-module_checkboxContainer__2oWhu","checkboxLabel":"Checkbox-module_checkboxLabel__27Y6U","disabled":"Checkbox-module_disabled__3EXUd"};
+styleInject(css_248z$x);
 
 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"]);
@@ -700,24 +685,24 @@ const Checkbox = (props) => {
             (_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
         }
     };
-    return (React.createElement("div", { className: styles$w.checkboxContainer },
+    return (React.createElement("div", { className: styles$x.checkboxContainer },
         React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
-        React.createElement("label", { onClick: handleClick, className: styles$w.checkboxLabel + ' ' + (disabled ? styles$w['disabled'] : undefined) }, label),
+        React.createElement("label", { onClick: handleClick, className: styles$x.checkboxLabel + ' ' + (disabled ? styles$x['disabled'] : undefined) }, label),
         React.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$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);
+var css_248z$w = ".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$w = {"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$w);
 
 const Chip = (props) => {
     const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React.createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
     const getCssClass = () => {
         const cssClasses = [];
-        cssClasses.push(styles$v.chip);
-        cssClasses.push(styles$v[color]);
-        shadow && cssClasses.push(styles$v['shadow']);
-        onClick && cssClasses.push(styles$v['clickable']);
+        cssClasses.push(styles$w.chip);
+        cssClasses.push(styles$w[color]);
+        shadow && cssClasses.push(styles$w['shadow']);
+        onClick && cssClasses.push(styles$w['clickable']);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
@@ -727,18 +712,18 @@ const Chip = (props) => {
     };
     return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
         React.createElement("div", null, children),
-        isDeletable && (React.createElement("div", { className: styles$v.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
+        isDeletable && (React.createElement("div", { className: styles$w.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
 };
 
-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);
+var css_248z$v = ".FormLabel-module_formLabel__1Zv0W {\n  margin-bottom: .5rem; }\n";
+var styles$v = {"formLabel":"FormLabel-module_formLabel__1Zv0W"};
+styleInject(css_248z$v);
 
 const FormLabel = (props) => {
     const { children, className, htmlFor } = props, rest = __rest(props, ["children", "className", "htmlFor"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$u.formLabel);
+        cssClasses.push(styles$v.formLabel);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -776,9 +761,9 @@ const FileInput = (props) => {
         React.createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
 };
 
-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);
+var css_248z$u = ".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$u = {"selectContainer":"Select-module_selectContainer__2oizY","select":"Select-module_select__MSqgU","selectMenu":"Select-module_selectMenu__2vhJt"};
+styleInject(css_248z$u);
 
 const Select = (props) => {
     var _a, _b, _c;
@@ -791,7 +776,7 @@ const Select = (props) => {
     const getCssClass = () => {
         const cssClasses = [];
         className && cssClasses.push(className);
-        cssClasses.push(styles$t.select);
+        cssClasses.push(styles$u.select);
         return cssClasses.filter(r => r).join(' ');
     };
     useEffect(() => {
@@ -910,7 +895,7 @@ const Select = (props) => {
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: selectConainter, className: styles$t.selectContainer },
+        React.createElement("div", { ref: selectConainter, className: styles$u.selectContainer },
             React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
                 !multiple && renderSingleViewModel(),
                 multiple && renderMultipleViewModel(),
@@ -918,7 +903,7 @@ const Select = (props) => {
                     React.createElement(ChevronDownSolidIcon, null))),
             isShow &&
                 createPortal(React.createElement(React.Fragment, null,
-                    React.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.createElement("div", { className: styles$u.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.createElement(List, null, options && options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
                             multiple &&
                                 React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
@@ -926,30 +911,30 @@ const Select = (props) => {
                     React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body))));
 };
 
-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);
+var css_248z$t = "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$t = {};
+styleInject(css_248z$t);
 
 const Textarea = (props) => {
     const { className } = props, rest = __rest(props, ["className"]);
     const getCssClass = () => {
         const cssClasses = [];
-        cssClasses.push(styles$s.textarea);
+        cssClasses.push(styles$t.textarea);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
     return (React.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);
+var css_248z$s = ".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$s = {"formInput":"FormInput-module_formInput__1gAYi"};
+styleInject(css_248z$s);
 
 const FormInput = (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);
+        cssClasses.push(styles$s.formInput);
         className && cssClasses.push(className);
         !isValid && cssClasses.push('is-invalid');
         return cssClasses.filter(css => css).join(' ');
@@ -1315,16 +1300,16 @@ const DateSelect = (props) => {
 // 	return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
 // };
 
-var css_248z$q = ".Drawer-module_drawer__36R2P {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__36R2P.Drawer-module_permanent__AW5Df {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__36R2P.Drawer-module_left__1KKcY {\n    order: 0; }\n  .Drawer-module_drawer__36R2P.Drawer-module_right__2gESb {\n    order: 2; }\n\n.Drawer-module_drawerOpen__euFdW {\n  overflow: hidden; }\n";
-var styles$q = {"drawer":"Drawer-module_drawer__36R2P","permanent":"Drawer-module_permanent__AW5Df","left":"Drawer-module_left__1KKcY","right":"Drawer-module_right__2gESb","drawerOpen":"Drawer-module_drawerOpen__euFdW"};
-styleInject(css_248z$q);
+var css_248z$r = ".Drawer-module_drawer__36R2P {\n  height: 100%;\n  z-index: 1101;\n  bottom: 0;\n  position: fixed;\n  background: white;\n  min-width: 280px;\n  overflow-y: auto; }\n  .Drawer-module_drawer__36R2P.Drawer-module_permanent__AW5Df {\n    position: inherit;\n    z-index: 0; }\n  .Drawer-module_drawer__36R2P.Drawer-module_left__1KKcY {\n    order: 0; }\n  .Drawer-module_drawer__36R2P.Drawer-module_right__2gESb {\n    order: 2; }\n\n.Drawer-module_drawerOpen__euFdW {\n  overflow: hidden; }\n";
+var styles$r = {"drawer":"Drawer-module_drawer__36R2P","permanent":"Drawer-module_permanent__AW5Df","left":"Drawer-module_left__1KKcY","right":"Drawer-module_right__2gESb","drawerOpen":"Drawer-module_drawerOpen__euFdW"};
+styleInject(css_248z$r);
 
 const Drawer = (props) => {
     const { children, className, position = 'left', permanent = false, target = document.body, onClickBackdrop } = props;
     useEffect(() => {
-        document.body.classList.add(styles$q.drawerOpen);
+        document.body.classList.add(styles$r.drawerOpen);
         return () => {
-            document.body.classList.remove(styles$q.drawerOpen);
+            document.body.classList.remove(styles$r.drawerOpen);
         };
     }, []);
     const handleClickBackdrop = () => {
@@ -1338,10 +1323,10 @@ const DrawerContent = (props) => {
     const { children, className, position = 'left', permanent = false } = props;
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$q.drawer);
+        cssClasses.push(styles$r.drawer);
         className && cssClasses.push(className);
-        !!permanent && cssClasses.push(styles$q['permanent']);
-        position === 'left' ? cssClasses.push(styles$q['left']) : cssClasses.push(styles$q['right']);
+        !!permanent && cssClasses.push(styles$r['permanent']);
+        position === 'left' ? cssClasses.push(styles$r['left']) : cssClasses.push(styles$r['right']);
         return cssClasses.filter(css => css).join(' ');
     };
     const positionStyles = {
@@ -1354,9 +1339,9 @@ const DrawerContent = (props) => {
     return (React.createElement("div", { className: getCssClasses(), style: getStyles() }, children));
 };
 
-var css_248z$p = ".MenuBody-module_menuBody__3cPsp {\n  z-index: 1111;\n  margin: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 10rem;\n  padding: 8px 0px;\n  font-size: 1rem;\n  color: #212529;\n  text-align: left;\n  list-style: none;\n  background-color: #fff;\n  background-clip: padding-box;\n  border-radius: var(--borderRadius); }\n  .MenuBody-module_menuBody__3cPsp.MenuBody-module_shadow__AF_9C {\n    box-shadow: var(--shadow); }\n";
-var styles$p = {"menuBody":"MenuBody-module_menuBody__3cPsp","shadow":"MenuBody-module_shadow__AF_9C"};
-styleInject(css_248z$p);
+var css_248z$q = ".MenuBody-module_menuBody__3cPsp {\n  z-index: 1111;\n  margin: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 10rem;\n  padding: 8px 0px;\n  font-size: 1rem;\n  color: #212529;\n  text-align: left;\n  list-style: none;\n  background-color: #fff;\n  background-clip: padding-box;\n  border-radius: var(--borderRadius); }\n  .MenuBody-module_menuBody__3cPsp.MenuBody-module_shadow__AF_9C {\n    box-shadow: var(--shadow); }\n";
+var styles$q = {"menuBody":"MenuBody-module_menuBody__3cPsp","shadow":"MenuBody-module_shadow__AF_9C"};
+styleInject(css_248z$q);
 
 const MenuBody = (props) => {
     const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
@@ -1386,8 +1371,8 @@ const MenuBody = (props) => {
     }, [menuBodyRef]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$p.menuBody);
-        shadow && cssClasses.push(styles$p.shadow);
+        cssClasses.push(styles$q.menuBody);
+        shadow && cssClasses.push(styles$q.shadow);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -1399,9 +1384,9 @@ const MenuBody = (props) => {
         React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
 };
 
-var css_248z$o = ".Menu-module_menu__23BYG {\n  display: flex; }\n";
-var styles$o = {"menu":"Menu-module_menu__23BYG"};
-styleInject(css_248z$o);
+var css_248z$p = ".Menu-module_menu__23BYG {\n  display: flex; }\n";
+var styles$p = {"menu":"Menu-module_menu__23BYG"};
+styleInject(css_248z$p);
 
 const Menu = (props) => {
     const { toggle, children, className, open, menuPosition, onClickBackdrop, onToggleClick } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop", "onToggleClick"]);
@@ -1409,7 +1394,7 @@ const Menu = (props) => {
     const toggleContainerRef = useRef(null);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$o.menu);
+        cssClasses.push(styles$p.menu);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -1422,17 +1407,17 @@ const Menu = (props) => {
             React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
 };
 
-var css_248z$n = ".MenuItem-module_menuItem__kvauR {\n  display: flex;\n  width: 100%;\n  padding: 0.25rem 1.5rem;\n  clear: both;\n  font-weight: 400;\n  color: #212529;\n  text-align: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  background-color: transparent;\n  border: 0; }\n  .MenuItem-module_menuItem__kvauR.MenuItem-module_menuItemHeader__mp7wc {\n    margin-bottom: 0;\n    font-size: 0.875rem; }\n  .MenuItem-module_menuItem__kvauR:hover {\n    cursor: pointer;\n    color: #1e2125;\n    background-color: rgba(0, 0, 0, 0.04); }\n";
-var styles$n = {"menuItem":"MenuItem-module_menuItem__kvauR","menuItemHeader":"MenuItem-module_menuItemHeader__mp7wc"};
-styleInject(css_248z$n);
+var css_248z$o = ".MenuItem-module_menuItem__kvauR {\n  display: flex;\n  width: 100%;\n  padding: 0.25rem 1.5rem;\n  clear: both;\n  font-weight: 400;\n  color: #212529;\n  text-align: inherit;\n  text-decoration: none;\n  white-space: nowrap;\n  background-color: transparent;\n  border: 0; }\n  .MenuItem-module_menuItem__kvauR.MenuItem-module_menuItemHeader__mp7wc {\n    margin-bottom: 0;\n    font-size: 0.875rem; }\n  .MenuItem-module_menuItem__kvauR:hover {\n    cursor: pointer;\n    color: #1e2125;\n    background-color: rgba(0, 0, 0, 0.04); }\n";
+var styles$o = {"menuItem":"MenuItem-module_menuItem__kvauR","menuItemHeader":"MenuItem-module_menuItemHeader__mp7wc"};
+styleInject(css_248z$o);
 
 const MenuItem = (props) => {
     const { children, onClick, type = 'item' } = props;
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$n.menuItem);
+        cssClasses.push(styles$o.menuItem);
         if (type === 'header') {
-            cssClasses.push(styles$n.menuItemHeader);
+            cssClasses.push(styles$o.menuItemHeader);
         }
         return cssClasses.filter(css => css).join(' ');
     };
@@ -1450,23 +1435,23 @@ const MenuToggle = ({ children }) => {
     return (React.createElement(Fragment, null, children));
 };
 
-var css_248z$m = ".MenuDivider-module_menuItemDivider__JnLsC {\n  height: 0;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  border-top: 1px solid #e9ecef; }\n";
-var styles$m = {"menuItemDivider":"MenuDivider-module_menuItemDivider__JnLsC"};
-styleInject(css_248z$m);
+var css_248z$n = ".MenuDivider-module_menuItemDivider__JnLsC {\n  height: 0;\n  margin: 0.5rem 0;\n  overflow: hidden;\n  border-top: 1px solid #e9ecef; }\n";
+var styles$n = {"menuItemDivider":"MenuDivider-module_menuItemDivider__JnLsC"};
+styleInject(css_248z$n);
 
-const MenuDivider = () => React.createElement("div", { className: styles$m.menuItemDivider });
+const MenuDivider = () => React.createElement("div", { className: styles$n.menuItemDivider });
 
-var css_248z$l = ".ExpansionPanelContent-module_expansionPanelContent__3H62L {\n  padding: 8px 16px 16px; }\n";
-var styles$l = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__3H62L"};
-styleInject(css_248z$l);
+var css_248z$m = ".ExpansionPanelContent-module_expansionPanelContent__3H62L {\n  padding: 8px 16px 16px; }\n";
+var styles$m = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__3H62L"};
+styleInject(css_248z$m);
 
 const ExpansionPanelContent = ({ children }) => {
-    return (React.createElement("div", { className: styles$l.expansionPanelContent }, children));
+    return (React.createElement("div", { className: styles$m.expansionPanelContent }, children));
 };
 
-var css_248z$k = ".ExpansionPanelHeader-module_expansionPanelHeader__3hrsI {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  min-height: 48px; }\n  .ExpansionPanelHeader-module_expansionPanelHeader__3hrsI:hover {\n    cursor: pointer;\n    background-color: var(--highlight); }\n";
-var styles$k = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__3hrsI"};
-styleInject(css_248z$k);
+var css_248z$l = ".ExpansionPanelHeader-module_expansionPanelHeader__3hrsI {\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n  min-height: 48px; }\n  .ExpansionPanelHeader-module_expansionPanelHeader__3hrsI:hover {\n    cursor: pointer;\n    background-color: var(--highlight); }\n";
+var styles$l = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__3hrsI"};
+styleInject(css_248z$l);
 
 const ExpansionPanelHeader = (props) => {
     const { children, isExpanded, onClick } = props;
@@ -1474,15 +1459,15 @@ const ExpansionPanelHeader = (props) => {
         e.stopPropagation();
         onClick && onClick(e);
     };
-    return (React.createElement("div", { className: styles$k.expansionPanelHeader, onClick: handleClick },
+    return (React.createElement("div", { className: styles$l.expansionPanelHeader, onClick: handleClick },
         children,
         React.createElement("span", { className: "ml-auto text-muted" },
             React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
 };
 
-var css_248z$j = ".ExpansionPanel-module_expansionPanel__3krcE {\n  background-color: var(--white);\n  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n  .ExpansionPanel-module_expansionPanel__3krcE:first-child {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__3krcE:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt {\n    margin: 16px 0; }\n    .ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt:first-child {\n      margin-top: 0; }\n    .ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt:last-child {\n      margin-bottom: 0; }\n";
-var styles$j = {"expansionPanel":"ExpansionPanel-module_expansionPanel__3krcE","isExpanded":"ExpansionPanel-module_isExpanded__1m4Dt"};
-styleInject(css_248z$j);
+var css_248z$k = ".ExpansionPanel-module_expansionPanel__3krcE {\n  background-color: var(--white);\n  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n  .ExpansionPanel-module_expansionPanel__3krcE:first-child {\n    border-top-left-radius: 4px;\n    border-top-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__3krcE:last-child {\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px; }\n  .ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt {\n    margin: 16px 0; }\n    .ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt:first-child {\n      margin-top: 0; }\n    .ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt:last-child {\n      margin-bottom: 0; }\n";
+var styles$k = {"expansionPanel":"ExpansionPanel-module_expansionPanel__3krcE","isExpanded":"ExpansionPanel-module_isExpanded__1m4Dt"};
+styleInject(css_248z$k);
 
 const ExpansionPanel = (props) => {
     const { header, children, isExpanded = false, onChange } = props;
@@ -1492,9 +1477,9 @@ const ExpansionPanel = (props) => {
     }, [isExpanded]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$j.expansionPanel);
+        cssClasses.push(styles$k.expansionPanel);
         if (_isExpanded) {
-            cssClasses.push(styles$j.isExpanded);
+            cssClasses.push(styles$k.isExpanded);
         }
         return cssClasses.filter(css => css).join(' ');
     };
@@ -1508,16 +1493,16 @@ const ExpansionPanel = (props) => {
             React.createElement(ExpansionPanelContent, null, children)));
 };
 
-var css_248z$i = ".FloatingActionButton-module_fab__3GwiH {\n  box-shadow: var(--shadow); }\n  .FloatingActionButton-module_fab__3GwiH.FloatingActionButton-module_fixed__17qrv {\n    position: fixed;\n    bottom: 16px;\n    right: 16px;\n    z-index: 1000; }\n";
-var styles$i = {"fab":"FloatingActionButton-module_fab__3GwiH","fixed":"FloatingActionButton-module_fixed__17qrv"};
-styleInject(css_248z$i);
+var css_248z$j = ".FloatingActionButton-module_fab__3GwiH {\n  box-shadow: var(--shadow); }\n  .FloatingActionButton-module_fab__3GwiH.FloatingActionButton-module_fixed__17qrv {\n    position: fixed;\n    bottom: 16px;\n    right: 16px;\n    z-index: 1000; }\n";
+var styles$j = {"fab":"FloatingActionButton-module_fab__3GwiH","fixed":"FloatingActionButton-module_fixed__17qrv"};
+styleInject(css_248z$j);
 
 const FloatingActionButton = (props) => {
     const { className, icon, color = COLOR.primary, fixed, size = SIZE.lg, isActive, disabled, onClick } = props;
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$i.fab);
-        fixed && cssClasses.push(styles$i['fixed']);
+        cssClasses.push(styles$j.fab);
+        fixed && cssClasses.push(styles$j['fixed']);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -1561,11 +1546,10 @@ const Row = (props) => {
 };
 
 const Link = (props) => {
-    const { url, className, target, children } = props;
+    const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
     const [status, setStatus] = useState(STATUS.NORMAL);
     const getCssClasses = () => {
         const cssClasses = [];
-        // cssClasses.push(styles.badgeContainer);
         className && cssClasses.push(className);
         status !== STATUS.NORMAL && cssClasses.push(status);
         return cssClasses.filter(css => css).join(' ');
@@ -1576,17 +1560,17 @@ const Link = (props) => {
     const onMouseLeave = () => {
         setStatus(STATUS.NORMAL);
     };
-    return (React.createElement("a", { className: getCssClasses(), href: url || '#', target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children));
+    return (React.createElement("a", Object.assign({ className: getCssClasses(), href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
 };
 
-var css_248z$h = ".LoadingIndicator-module_loadingIndicatorContainer__3e1-3 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__tvp5i {\n  animation-name: LoadingIndicator-module_spinAnimation__PKRNn;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__PKRNn {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n";
-var styles$h = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__3e1-3","loadingIndicator":"LoadingIndicator-module_loadingIndicator__tvp5i","spinAnimation":"LoadingIndicator-module_spinAnimation__PKRNn"};
-styleInject(css_248z$h);
+var css_248z$i = ".LoadingIndicator-module_loadingIndicatorContainer__3e1-3 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__tvp5i {\n  animation-name: LoadingIndicator-module_spinAnimation__PKRNn;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__PKRNn {\n  from {\n    transform: rotate(0deg); }\n  to {\n    transform: rotate(360deg); } }\n";
+var styles$i = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__3e1-3","loadingIndicator":"LoadingIndicator-module_loadingIndicator__tvp5i","spinAnimation":"LoadingIndicator-module_spinAnimation__PKRNn"};
+styleInject(css_248z$i);
 
 const LoadingIndicator = () => {
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$h.loadingIndicator);
+        cssClasses.push(styles$i.loadingIndicator);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("div", { className: getCssClasses() },
@@ -1596,7 +1580,7 @@ const LoadingIndicator = () => {
 const LoadingIndicatorContainer = ({ children }) => {
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$h.loadingIndicatorContainer);
+        cssClasses.push(styles$i.loadingIndicatorContainer);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("div", { className: getCssClasses() }, children));
@@ -1626,16 +1610,16 @@ class LoadingIndicatorService {
 }
 const loadingIndicatorService = new LoadingIndicatorService();
 
-var css_248z$g = ".ModalHeader-module_modalHeader__o5HzE {\n  border-bottom: none;\n  align-items: center; }\n";
-var styles$g = {"modalHeader":"ModalHeader-module_modalHeader__o5HzE"};
-styleInject(css_248z$g);
+var css_248z$h = ".ModalHeader-module_modalHeader__o5HzE {\n  border-bottom: none;\n  align-items: center; }\n";
+var styles$h = {"modalHeader":"ModalHeader-module_modalHeader__o5HzE"};
+styleInject(css_248z$h);
 
 const ModalHeader = (props) => {
     const { children, isDismissable = false, onClose } = props;
     const handleClick = () => {
         onClose && onClose();
     };
-    return (React.createElement("div", { className: "modal-header " + styles$g.modalHeader },
+    return (React.createElement("div", { className: "modal-header " + styles$h.modalHeader },
         React.createElement("h5", { className: "modal-title" }, children),
         isDismissable &&
             React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
@@ -1643,24 +1627,24 @@ const ModalHeader = (props) => {
 
 const ModalBody = ({ children }) => (React.createElement("div", { className: "modal-body" }, children));
 
-var css_248z$f = ".Modal-module_modal__1NdMJ {\n  z-index: 1111 !important;\n  border-radius: var(--borderRadius); }\n  .Modal-module_modal__1NdMJ.Modal-module_fullscreen__3R-sM {\n    width: 100% !important;\n    height: 100% !important;\n    max-height: 100% !important;\n    margin: 0;\n    padding: 0; }\n    .Modal-module_modal__1NdMJ.Modal-module_fullscreen__3R-sM .Modal-module_modalContent__E2kaP {\n      height: auto;\n      min-height: 100%;\n      max-height: 100%;\n      border-radius: 0;\n      overflow: auto; }\n    @media (min-width: 320px) {\n      .Modal-module_modal__1NdMJ.Modal-module_fullscreen__3R-sM {\n        max-width: 100% !important; } }\n  .Modal-module_modal__1NdMJ .Modal-module_sm__3UfYB {\n    max-width: 300px; }\n  .Modal-module_modal__1NdMJ .Modal-module_md__2uX1a {\n    max-width: 500px; }\n  .Modal-module_modal__1NdMJ .Modal-module_lg__3ux_V {\n    max-width: 1140px; }\n  @media (min-width: 576px) {\n    .Modal-module_modal__1NdMJ .Modal-module_modal-dialog__IdJ1c {\n      max-width: 600px; } }\n";
-var styles$f = {"modal":"Modal-module_modal__1NdMJ","fullscreen":"Modal-module_fullscreen__3R-sM","modalContent":"Modal-module_modalContent__E2kaP","sm":"Modal-module_sm__3UfYB","md":"Modal-module_md__2uX1a","lg":"Modal-module_lg__3ux_V","modal-dialog":"Modal-module_modal-dialog__IdJ1c"};
-styleInject(css_248z$f);
+var css_248z$g = ".Modal-module_modal__1NdMJ {\n  z-index: 1111 !important;\n  border-radius: var(--borderRadius); }\n  .Modal-module_modal__1NdMJ.Modal-module_fullscreen__3R-sM {\n    width: 100% !important;\n    height: 100% !important;\n    max-height: 100% !important;\n    margin: 0;\n    padding: 0; }\n    .Modal-module_modal__1NdMJ.Modal-module_fullscreen__3R-sM .Modal-module_modalContent__E2kaP {\n      height: auto;\n      min-height: 100%;\n      max-height: 100%;\n      border-radius: 0;\n      overflow: auto; }\n    @media (min-width: 320px) {\n      .Modal-module_modal__1NdMJ.Modal-module_fullscreen__3R-sM {\n        max-width: 100% !important; } }\n  .Modal-module_modal__1NdMJ .Modal-module_sm__3UfYB {\n    max-width: 300px; }\n  .Modal-module_modal__1NdMJ .Modal-module_md__2uX1a {\n    max-width: 500px; }\n  .Modal-module_modal__1NdMJ .Modal-module_lg__3ux_V {\n    max-width: 1140px; }\n  @media (min-width: 576px) {\n    .Modal-module_modal__1NdMJ .Modal-module_modal-dialog__IdJ1c {\n      max-width: 600px; } }\n";
+var styles$g = {"modal":"Modal-module_modal__1NdMJ","fullscreen":"Modal-module_fullscreen__3R-sM","modalContent":"Modal-module_modalContent__E2kaP","sm":"Modal-module_sm__3UfYB","md":"Modal-module_md__2uX1a","lg":"Modal-module_lg__3ux_V","modal-dialog":"Modal-module_modal-dialog__IdJ1c"};
+styleInject(css_248z$g);
 
-var css_248z$e = ".ModalFooter-module_modalFooter__2Et4e {\n  border-top: none; }\n";
-var styles$e = {"modalFooter":"ModalFooter-module_modalFooter__2Et4e"};
-styleInject(css_248z$e);
+var css_248z$f = ".ModalFooter-module_modalFooter__2Et4e {\n  border-top: none; }\n";
+var styles$f = {"modalFooter":"ModalFooter-module_modalFooter__2Et4e"};
+styleInject(css_248z$f);
 
-const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$e.modalFooter }, children));
+const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$f.modalFooter }, children));
 
 const Modal = (props) => {
     const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
     const getCssClass = () => {
         const cssClasses = [];
         cssClasses.push('modal-dialog modal-dialog-centered');
-        cssClasses.push(styles$f.modal);
-        !!fullScreen && cssClasses.push(styles$f['fullscreen']);
-        size && cssClasses.push(styles$f[size]);
+        cssClasses.push(styles$g.modal);
+        !!fullScreen && cssClasses.push(styles$g['fullscreen']);
+        size && cssClasses.push(styles$g[size]);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
@@ -1674,9 +1658,9 @@ const Modal = (props) => {
         onBackdropClick && onBackdropClick();
     };
     return (React.createElement(Fragment, null,
-        React.createElement("div", { className: "modal show " + styles$f.modal, style: { display: 'block' } },
+        React.createElement("div", { className: "modal show " + styles$g.modal, style: { display: 'block' } },
             React.createElement("div", { className: getCssClass() },
-                React.createElement("div", { className: 'modal-content ' + (!!fullScreen ? styles$f['modalContent'] : undefined) },
+                React.createElement("div", { className: 'modal-content ' + (!!fullScreen ? styles$g['modalContent'] : undefined) },
                     header &&
                         React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
                     React.createElement(ModalBody, null, children),
@@ -1876,25 +1860,25 @@ const Sidebar = (props) => {
             !item.isCollapsed && item.items && item.items.length > 0 && (React.createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React.createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
 };
 
-var css_248z$d = ".Snackbar-module_snackbar__3AF3D {\n  display: flex;\n  align-items: center;\n  min-width: 288px;\n  padding: 6px 16px;\n  transform-origin: center;\n  min-height: 52px;\n  animation: Snackbar-module_bounceIn__11jAv 0.4s ease;\n  z-index: 1001;\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  bottom: 2%;\n  border-radius: var(--borderRadius); }\n  .Snackbar-module_snackbar__3AF3D.Snackbar-module_primary__3Pt9m {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .Snackbar-module_snackbar__3AF3D.Snackbar-module_accent__1iCXk {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .Snackbar-module_snackbar__3AF3D.Snackbar-module_secondary__3ke12 {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .Snackbar-module_snackbar__3AF3D.Snackbar-module_light__3Pi0Y {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Snackbar-module_snackbar__3AF3D.Snackbar-module_dark__3TwXn {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n\n.Snackbar-module_text__2gmW- {\n  width: 100%;\n  padding: 8px 0; }\n\n.Snackbar-module_action__1BXqS {\n  margin-left: auto; }\n  .Snackbar-module_action__1BXqS:hover {\n    cursor: pointer; }\n\n@keyframes Snackbar-module_bounceIn__11jAv {\n  0% {\n    opacity: 0; }\n  50% {\n    opacity: 0.9; }\n  80% {\n    opacity: 1; }\n  100% {\n    opacity: 1; } }\n";
-var styles$d = {"snackbar":"Snackbar-module_snackbar__3AF3D","bounceIn":"Snackbar-module_bounceIn__11jAv","primary":"Snackbar-module_primary__3Pt9m","accent":"Snackbar-module_accent__1iCXk","secondary":"Snackbar-module_secondary__3ke12","light":"Snackbar-module_light__3Pi0Y","dark":"Snackbar-module_dark__3TwXn","text":"Snackbar-module_text__2gmW-","action":"Snackbar-module_action__1BXqS"};
-styleInject(css_248z$d);
+var css_248z$e = ".Snackbar-module_snackbar__3AF3D {\n  display: flex;\n  align-items: center;\n  min-width: 288px;\n  padding: 6px 16px;\n  transform-origin: center;\n  min-height: 52px;\n  animation: Snackbar-module_bounceIn__11jAv 0.4s ease;\n  z-index: 1001;\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  bottom: 2%;\n  border-radius: var(--borderRadius); }\n  .Snackbar-module_snackbar__3AF3D.Snackbar-module_primary__3Pt9m {\n    color: var(--primary-contrast-text);\n    background-color: var(--primary); }\n  .Snackbar-module_snackbar__3AF3D.Snackbar-module_accent__1iCXk {\n    color: var(--accent-contrast-text);\n    background-color: var(--accent); }\n  .Snackbar-module_snackbar__3AF3D.Snackbar-module_secondary__3ke12 {\n    color: var(--secondary-contrast-text);\n    background-color: var(--secondary); }\n  .Snackbar-module_snackbar__3AF3D.Snackbar-module_light__3Pi0Y {\n    color: var(--light-contrast-text);\n    background-color: var(--light); }\n  .Snackbar-module_snackbar__3AF3D.Snackbar-module_dark__3TwXn {\n    color: var(--dark-contrast-text);\n    background-color: var(--dark); }\n\n.Snackbar-module_text__2gmW- {\n  width: 100%;\n  padding: 8px 0; }\n\n.Snackbar-module_action__1BXqS {\n  margin-left: auto; }\n  .Snackbar-module_action__1BXqS:hover {\n    cursor: pointer; }\n\n@keyframes Snackbar-module_bounceIn__11jAv {\n  0% {\n    opacity: 0; }\n  50% {\n    opacity: 0.9; }\n  80% {\n    opacity: 1; }\n  100% {\n    opacity: 1; } }\n";
+var styles$e = {"snackbar":"Snackbar-module_snackbar__3AF3D","bounceIn":"Snackbar-module_bounceIn__11jAv","primary":"Snackbar-module_primary__3Pt9m","accent":"Snackbar-module_accent__1iCXk","secondary":"Snackbar-module_secondary__3ke12","light":"Snackbar-module_light__3Pi0Y","dark":"Snackbar-module_dark__3TwXn","text":"Snackbar-module_text__2gmW-","action":"Snackbar-module_action__1BXqS"};
+styleInject(css_248z$e);
 
 const Snackbar = (props) => {
     const { children, color = COLOR.dark, actionText = 'ok', onOk } = props;
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$d.snackbar);
+        cssClasses.push(styles$e.snackbar);
         cssClasses.push(`shadow-lg`);
-        cssClasses.push(styles$d[color]);
+        cssClasses.push(styles$e[color]);
         return cssClasses.filter(css => css).join(' ');
     };
     const handleClickAction = (e) => {
         onOk && onOk(e);
     };
     return (React.createElement("div", { className: getCssClasses() },
-        React.createElement("div", { className: styles$d.text }, children),
-        React.createElement("div", { className: styles$d.action + " text-accent", onClick: handleClickAction },
+        React.createElement("div", { className: styles$e.text }, children),
+        React.createElement("div", { className: styles$e.action + " text-accent", onClick: handleClickAction },
             React.createElement("span", null, actionText))));
 };
 
@@ -1932,29 +1916,29 @@ class SnackbarService {
 }
 const snackbarService = new SnackbarService();
 
-var css_248z$c = ".SpeedDialActions-module_speedDialActions__zLEps {\n  margin-bottom: -32px;\n  flex-direction: column-reverse;\n  padding-bottom: 48px;\n  display: flex;\n  pointer-events: auto; }\n";
-var styles$c = {"speedDialActions":"SpeedDialActions-module_speedDialActions__zLEps"};
-styleInject(css_248z$c);
+var css_248z$d = ".SpeedDialActions-module_speedDialActions__zLEps {\n  margin-bottom: -32px;\n  flex-direction: column-reverse;\n  padding-bottom: 48px;\n  display: flex;\n  pointer-events: auto; }\n";
+var styles$d = {"speedDialActions":"SpeedDialActions-module_speedDialActions__zLEps"};
+styleInject(css_248z$d);
 
 const SpeedDialActions = (props) => {
     const { children } = props;
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$c.speedDialActions);
+        cssClasses.push(styles$d.speedDialActions);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("div", { className: getCssClasses() }, children));
 };
 
-var css_248z$b = ".SpeedDial-module_speedDial__CQ5x2 {\n  position: absolute;\n  flex-direction: column-reverse;\n  display: flex;\n  z-index: 1050;\n  align-items: center;\n  right: 16px;\n  bottom: 16px;\n  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n";
-var styles$b = {"speedDial":"SpeedDial-module_speedDial__CQ5x2"};
-styleInject(css_248z$b);
+var css_248z$c = ".SpeedDial-module_speedDial__CQ5x2 {\n  position: absolute;\n  flex-direction: column-reverse;\n  display: flex;\n  z-index: 1050;\n  align-items: center;\n  right: 16px;\n  bottom: 16px;\n  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n";
+var styles$c = {"speedDial":"SpeedDial-module_speedDial__CQ5x2"};
+styleInject(css_248z$c);
 
 const SpeedDial = (props) => {
     const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$b.speedDial);
+        cssClasses.push(styles$c.speedDial);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -1971,15 +1955,15 @@ const SpeedDial = (props) => {
             React.createElement(SpeedDialActions, null, children)));
 };
 
-var css_248z$a = ".SpeedDialAction-module_speedDialAction__qmExs + .SpeedDialAction-module_speedDialAction__qmExs {\n  margin-bottom: 10px; }\n";
-var styles$a = {"speedDialAction":"SpeedDialAction-module_speedDialAction__qmExs"};
-styleInject(css_248z$a);
+var css_248z$b = ".SpeedDialAction-module_speedDialAction__qmExs + .SpeedDialAction-module_speedDialAction__qmExs {\n  margin-bottom: 10px; }\n";
+var styles$b = {"speedDialAction":"SpeedDialAction-module_speedDialAction__qmExs"};
+styleInject(css_248z$b);
 
 const SpeedDialAction = (props) => {
     const { icon, color = COLOR.light, onClick, className } = props;
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$a.speedDialAction);
+        cssClasses.push(styles$b.speedDialAction);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -1996,15 +1980,15 @@ const SpeedDialIcon = (props) => {
     return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
 };
 
-var css_248z$9 = ".StepperActions-module_stepperActions__2r5ZT {\n  display: flex; }\n";
-var styles$9 = {"stepperActions":"StepperActions-module_stepperActions__2r5ZT"};
-styleInject(css_248z$9);
+var css_248z$a = ".StepperActions-module_stepperActions__2r5ZT {\n  display: flex; }\n";
+var styles$a = {"stepperActions":"StepperActions-module_stepperActions__2r5ZT"};
+styleInject(css_248z$a);
 
 const StepperActions = (props) => {
     const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$9.stepperActions);
+        cssClasses.push(styles$a.stepperActions);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -2021,31 +2005,31 @@ const StepPanel = (props) => {
     return (React.createElement("div", { className: "steppanel" }, children));
 };
 
-var css_248z$8 = ".StepConnector-module_stepConnector__2m7Xp {\n  flex: 1 1 auto;\n  flex-shrink: 0;\n  min-width: 20px; }\n\n.StepConnector-module_stepConnectorLine__jSqG4 {\n  display: block;\n  border-color: var(--secondary);\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .StepConnector-module_stepConnectorLine__jSqG4.StepConnector-module_isActive__3Yj6N {\n    border-color: var(--primary); }\n\n.StepConnector-module_stepConnectorLineHorizontal__3R2R8 {\n  border-top-style: solid;\n  border-top-width: 1px; }\n";
-var styles$8 = {"stepConnector":"StepConnector-module_stepConnector__2m7Xp","stepConnectorLine":"StepConnector-module_stepConnectorLine__jSqG4","isActive":"StepConnector-module_isActive__3Yj6N","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__3R2R8"};
-styleInject(css_248z$8);
+var css_248z$9 = ".StepConnector-module_stepConnector__2m7Xp {\n  flex: 1 1 auto;\n  flex-shrink: 0;\n  min-width: 20px; }\n\n.StepConnector-module_stepConnectorLine__jSqG4 {\n  display: block;\n  border-color: var(--secondary);\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .StepConnector-module_stepConnectorLine__jSqG4.StepConnector-module_isActive__3Yj6N {\n    border-color: var(--primary); }\n\n.StepConnector-module_stepConnectorLineHorizontal__3R2R8 {\n  border-top-style: solid;\n  border-top-width: 1px; }\n";
+var styles$9 = {"stepConnector":"StepConnector-module_stepConnector__2m7Xp","stepConnectorLine":"StepConnector-module_stepConnectorLine__jSqG4","isActive":"StepConnector-module_isActive__3Yj6N","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__3R2R8"};
+styleInject(css_248z$9);
 
 const StepConnector = (props) => {
     const { isActive, isHorizontal = true } = props;
     const getCssClassesConnector = () => {
         const cssClasses = [];
-        cssClasses.push(styles$8.stepConnector);
+        cssClasses.push(styles$9.stepConnector);
         return cssClasses.filter(css => css).join(' ');
     };
     const getCssClassesLine = () => {
         const cssClasses = [];
-        cssClasses.push(styles$8.stepConnectorLine);
-        isActive && cssClasses.push(styles$8['isActive']);
-        isHorizontal && cssClasses.push(styles$8.stepConnectorLineHorizontal);
+        cssClasses.push(styles$9.stepConnectorLine);
+        isActive && cssClasses.push(styles$9['isActive']);
+        isHorizontal && cssClasses.push(styles$9.stepConnectorLineHorizontal);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement("div", { className: getCssClassesConnector() },
         React.createElement("div", { className: getCssClassesLine() })));
 };
 
-var css_248z$7 = ".Stepper-module_stepper__1TOxM {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 10px; }\n  .Stepper-module_stepper__1TOxM.Stepper-module_isHorizontal__3rFHH {\n    overflow-x: auto; }\n";
-var styles$7 = {"stepper":"Stepper-module_stepper__1TOxM","isHorizontal":"Stepper-module_isHorizontal__3rFHH"};
-styleInject(css_248z$7);
+var css_248z$8 = ".Stepper-module_stepper__1TOxM {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 10px; }\n  .Stepper-module_stepper__1TOxM.Stepper-module_isHorizontal__3rFHH {\n    overflow-x: auto; }\n";
+var styles$8 = {"stepper":"Stepper-module_stepper__1TOxM","isHorizontal":"Stepper-module_isHorizontal__3rFHH"};
+styleInject(css_248z$8);
 
 const Stepper = (props) => {
     const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
@@ -2133,8 +2117,8 @@ const Stepper = (props) => {
     };
     const getCssClasses = () => {
         const cssClasses = [];
-        cssClasses.push(styles$7.stepper);
-        isHorizontal && cssClasses.push(styles$7['isHorizontal']);
+        cssClasses.push(styles$8.stepper);
+        isHorizontal && cssClasses.push(styles$8['isHorizontal']);
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement(React.Fragment, null, steps &&
@@ -2203,6 +2187,25 @@ function useDebounce(callback, timeout, deps) {
     }, deps);
 }
 
+var css_248z$7 = ".Typography-module_typography__2bM6E {\n  text-overflow: ellipsis;\n  overflow: hidden !important; }\n";
+var styles$7 = {"typography":"Typography-module_typography__2bM6E"};
+styleInject(css_248z$7);
+
+const Wrapper = (props) => {
+    const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$7.typography);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    return React.createElement(as, Object.assign(Object.assign({}, rest), { className: getCssClasses() }), children);
+};
+const Typography = (_a) => {
+    var { children, as = 'span' } = _a, rest = __rest(_a, ["children", "as"]);
+    return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
+};
+
 var css_248z$6 = ".Step-module_stepWrapper__1se3l {\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n  padding-right: 8px;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_stepWrapper__1se3l.Step-module_hasLabel__3cdCU:not(.Step-module_disabled__1R7hh):hover {\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04);\n    border-radius: var(--borderRadius); }\n\n.Step-module_step__2siYu {\n  width: 40px;\n  height: 40px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n  .Step-module_step__2siYu:not(.Step-module_hasLabel__3cdCU):not(.Step-module_disabled__1R7hh):hover {\n    border-radius: 100%;\n    cursor: pointer;\n    background-color: rgba(0, 0, 0, 0.04); }\n  .Step-module_step__2siYu.Step-module_hasLabel__3cdCU svg {\n    width: 18px !important;\n    height: 18px !important; }\n\n.Step-module_stepIconCircle__3IyDn svg {\n  width: 24px;\n  height: 24px; }\n\n.Step-module_stepValue__2TVrP {\n  position: absolute;\n  color: var(--secondary-contrast-text); }\n  .Step-module_stepValue__2TVrP .Step-module_isActive__1QTL4 {\n    color: var(--primary-contrast-text); }\n";
 var styles$6 = {"stepWrapper":"Step-module_stepWrapper__1se3l","hasLabel":"Step-module_hasLabel__3cdCU","disabled":"Step-module_disabled__1R7hh","step":"Step-module_step__2siYu","stepIconCircle":"Step-module_stepIconCircle__3IyDn","stepValue":"Step-module_stepValue__2TVrP","isActive":"Step-module_isActive__1QTL4"};
 styleInject(css_248z$6);