react-asc 25.1.0 → 25.1.1

package/index.es.js

@@ -2,33 +2,6 @@ import React, { useRef, useEffect, useState, useMemo, createContext, useContext,
 import reactDom, { createPortal } from 'react-dom';
 import { createPopper } from '@popperjs/core';
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 var COLOR;
 (function (COLOR) {
     COLOR["primary"] = "primary";
@@ -93,7 +66,7 @@ var styles$13 = {"alert":"Alert-module_alert__b4tbk","shadow":"Alert-module_shad
 styleInject(css_248z$13);
 
 const Alert = (props) => {
-    const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
+    const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$13.alert);
@@ -109,7 +82,7 @@ const Alert = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$12 = ".AppBar-module_appbar__Neyh3 {\n  padding: 0.5rem var(--1);\n  display: flex;\n  z-index: 1000;\n  min-height: 64px;\n  flex-shrink: 0;\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n  color: var(--light-contrast-text);\n  background-color: var(--light);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n  box-shadow: 0 4px 2px -2px var(--sadowColor);\n}";
@@ -117,7 +90,7 @@ var styles$12 = {"appbar":"AppBar-module_appbar__Neyh3","primary":"AppBar-module
 styleInject(css_248z$12);
 
 const AppBar = (props) => {
-    const { children, className, color = COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
+    const { children, className, color = COLOR.primary, shadow = true, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$12[color]);
@@ -126,7 +99,7 @@ const AppBar = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
-    return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("nav", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$11 = ".AppBarTitle-module_appbarTitle__RsFg5 {\n  align-items: center;\n  padding-top: 0.3125rem;\n  padding-bottom: 0.3125rem;\n  font-size: 1.25rem;\n  line-height: 1.8;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden !important;\n  display: inline-block;\n}\n.AppBarTitle-module_appbarTitle__RsFg5:hover {\n  cursor: pointer;\n}";
@@ -149,7 +122,7 @@ var styles$10 = {"icon":"Icon-module_icon__lFKCA","primary":"Icon-module_primary
 styleInject(css_248z$10);
 
 const Icon = (props) => {
-    const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
+    const { children, iconColor, className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$10.icon);
@@ -157,7 +130,7 @@ const Icon = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$$ = ".IconButton-module_iconButton__rpCPQ {\n  border-radius: 100%;\n  padding: 0px;\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  min-width: auto;\n  box-shadow: none;\n  font-weight: 400;\n  text-align: center;\n  vertical-align: middle;\n  -webkit-user-select: none;\n  user-select: none;\n  background-color: transparent;\n  font-size: 1rem;\n  line-height: 1.5;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  border: none;\n}\n.IconButton-module_iconButton__rpCPQ:hover {\n  cursor: pointer;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n  box-shadow: var(--shadow);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n  width: 48px;\n  height: 48px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n  width: 56px;\n  height: 56px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n  padding: 0;\n  background: transparent;\n  color: inherit;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_active__VIqU9 {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n  color: var(--primary);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n  color: var(--primary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n  color: var(--secondary);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n  color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n  color: var(--accent);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n  color: var(--accent-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n  color: var(--light);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n  color: var(--light-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n  color: var(--dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n  color: var(--dark-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_disabled__QB0ZV {\n  color: rgba(0, 0, 0, 0.26);\n  background-color: transparent;\n  cursor: default;\n  pointer-events: none;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_active__VIqU9 {\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n  background-color: var(--primary);\n  color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n  background-color: var(--primary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n  background-color: var(--secondary);\n  color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n  background-color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n  background-color: var(--accent);\n  color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n  background-color: var(--accent-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n  background-color: var(--light);\n  color: var(--dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n  background-color: var(--light-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n  background-color: var(--dark);\n  color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n  background-color: var(--dark-light);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_disabled__QB0ZV {\n  color: rgba(0, 0, 0, 0.26);\n  background-color: transparent;\n  cursor: default;\n  pointer-events: none;\n}\n.IconButton-module_iconButton__rpCPQ:focus:not(.IconButton-module_iconButton__rpCPQ.IconButton-module_disabled__QB0ZV) {\n  border-color: #86b7fe;\n  outline: 0;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}";
@@ -165,7 +138,7 @@ var styles$$ = {"iconButton":"IconButton-module_iconButton__rpCPQ","shadow":"Ico
 styleInject(css_248z$$);
 
 const IconButton = (props) => {
-    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 { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$$[color]);
@@ -178,7 +151,7 @@ const IconButton = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses(), disabled: disabled }, rest),
+    return (React.createElement("button", { type: "button", className: getCssClasses(), disabled: disabled, ...rest },
         icon && React.createElement(Icon, null, icon),
         children));
 };
@@ -241,7 +214,7 @@ const useConstructor = (callBack) => {
 };
 
 function useCssClasses(cssClasses) {
-    return [(cssClasses === null || cssClasses === void 0 ? void 0 : cssClasses.filter(css => css).join(' ')) || ''];
+    return [cssClasses?.filter(css => css).join(' ') || ''];
 }
 
 function useHover() {
@@ -324,7 +297,7 @@ var styles$_ = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Ba
 styleInject(css_248z$_);
 
 const Backdrop = (props) => {
-    const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
+    const { target = document.body, isTransparent = false, onClick, style, ...rest } = props;
     const handleClick = (e) => {
         e.stopPropagation();
         onClick && onClick(e);
@@ -339,7 +312,7 @@ const Backdrop = (props) => {
         return Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
     };
     return (React.createElement(Portal, { className: 'backdrop-root', target: target },
-        React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest))));
+        React.createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles(), ...rest })));
 };
 
 var css_248z$Z = ".List-module_list__gpZ41 {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  padding-left: 0;\n  margin-bottom: 0;\n  margin-top: 0;\n  background-color: var(--white);\n}";
@@ -347,7 +320,7 @@ var styles$Z = {"list":"List-module_list__gpZ41"};
 styleInject(css_248z$Z);
 
 const List = (props) => {
-    const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
+    const { children, className, isFlush, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         isFlush && cssClasses.push(styles$Z.flush);
@@ -355,7 +328,7 @@ const List = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("ul", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$Y = ".ListItem-module_listItem__Pk1AP {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0.75rem 1.25rem;\n  min-width: 100%;\n  color: var(--bodyColor);\n  text-align: inherit;\n  transition: background 0.5s ease;\n}\n.ListItem-module_listItem__Pk1AP:hover, .ListItem-module_listItem__Pk1AP.ListItem-module_active__zm2q8 {\n  cursor: pointer;\n  z-index: 1;\n  text-decoration: none;\n  background-color: rgba(0, 0, 0, 0.04);\n  color: var(--primary);\n}\n.ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n  border-top-width: 0;\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n  color: var(--light-contrast-text);\n  background-color: var(--light);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n  color: rgba(0, 0, 0, 0.26);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n  cursor: not-allowed;\n  background-color: inherit;\n}";
@@ -363,7 +336,7 @@ var styles$Y = {"listItem":"ListItem-module_listItem__Pk1AP","active":"ListItem-
 styleInject(css_248z$Y);
 
 const ListItem = (props) => {
-    const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
+    const { children, color, active, className, disabled, onClick, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$Y.listItem);
@@ -376,48 +349,38 @@ const ListItem = (props) => {
     const handleClick = (e) => {
         !disabled && onClick && onClick(e);
     };
-    return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
+    return (React.createElement("li", { onClick: handleClick, className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$X = ".ListItemAvatar-module_avatar__sVWfR {\n  display: flex;\n  align-items: center;\n  margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n  width: 24px;\n  height: 24px;\n}\n.ListItemAvatar-module_avatar__sVWfR img {\n  border-radius: 50%;\n}";
 var styles$X = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
 styleInject(css_248z$X);
 
-const ListItemAvatar = (_a) => {
-    var { avatar } = _a, rest = __rest(_a, ["avatar"]);
-    return (React.createElement("div", Object.assign({ className: styles$X.avatar }, rest), avatar));
-};
+const ListItemAvatar = ({ avatar, ...rest }) => (React.createElement("div", { className: styles$X.avatar, ...rest }, avatar));
 
 var css_248z$W = ".ListItemIcon-module_icon__cCvEv {\n  margin-right: 32px;\n}\n.ListItemIcon-module_icon__cCvEv svg {\n  width: 24px;\n  height: 24px;\n}";
 var styles$W = {"icon":"ListItemIcon-module_icon__cCvEv"};
 styleInject(css_248z$W);
 
-const ListItemIcon = (_a) => {
-    var { icon } = _a, rest = __rest(_a, ["icon"]);
-    return (React.createElement("div", Object.assign({ className: styles$W.icon }, rest), icon));
-};
+const ListItemIcon = ({ icon, ...rest }) => (React.createElement("div", { className: styles$W.icon, ...rest }, icon));
 
 var css_248z$V = ".ListItemAction-module_listItemAction__gAQRj {\n  display: flex;\n  justify-content: center;\n  min-width: 40px;\n}\n.ListItemAction-module_listItemAction__gAQRj svg {\n  width: 20px;\n  height: 20px;\n}";
 var styles$V = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
 styleInject(css_248z$V);
 
-const ListItemAction = (_a) => {
-    var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
-    return (React.createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: (e) => onClick && onClick(e) }, rest), children));
-};
+const ListItemAction = ({ children, onClick, ...rest }) => (React.createElement("div", { className: styles$V.listItemAction, onClick: (e) => onClick && onClick(e), ...rest }, children));
 
 var css_248z$U = ".ListItemTextIcon-module_listItemText__xCBLW {\n  flex: 1;\n}";
 var styles$U = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
 styleInject(css_248z$U);
 
-const ListItemText = (_a) => {
-    var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
+const ListItemText = ({ primary, secondary, ...rest }) => {
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$U.listItemText);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
+    return (React.createElement("div", { className: getCssClasses(), ...rest },
         React.createElement(ListItemTextPrimary, null, primary),
         secondary &&
             React.createElement(ListItemTextSecondary, null, secondary)));
@@ -457,19 +420,19 @@ const AutoComplete = (props) => {
         if (isShow === true) {
             document.body.classList.add('modal-open');
             const main = document.querySelector('.main');
-            main === null || main === void 0 ? void 0 : main.classList.add('modal-open');
+            main?.classList.add('modal-open');
         }
         else {
             document.body.classList.remove('modal-open');
             const main = document.querySelector('.main');
-            main === null || main === void 0 ? void 0 : main.classList.remove('modal-open');
+            main?.classList.remove('modal-open');
         }
     }, [isShow]);
     useEffect(() => {
         return () => {
             document.body.classList.remove('modal-open');
             const main = document.querySelector('.main');
-            main === null || main === void 0 ? void 0 : main.classList.remove('modal-open');
+            main?.classList.remove('modal-open');
         };
     }, []);
     const getCssClass = () => {
@@ -502,7 +465,7 @@ const AutoComplete = (props) => {
     return (React.createElement("div", { ref: selectConainter, className: styles$T.selectContainer },
         React.createElement("div", { className: "d-flex" },
             React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
-            showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
+            showClearButton && model?.length > 0 &&
                 React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
         isShow &&
             React.createElement(React.Fragment, null,
@@ -517,7 +480,7 @@ var styles$S = {"badgeContainer":"Badge-module_badgeContainer__3nZBs","badge":"B
 styleInject(css_248z$S);
 
 const Badge = (props) => {
-    const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
+    const { children, content, className, color = COLOR.primary, ...rest } = props;
     const [cssClassName] = useCssClasses([
         styles$S.badge,
         styles$S[color],
@@ -525,15 +488,15 @@ const Badge = (props) => {
     ]);
     return (React.createElement(BadgeContainer, null,
         children,
-        React.createElement("span", Object.assign({ className: cssClassName }, rest), content)));
+        React.createElement("span", { className: cssClassName, ...rest }, content)));
 };
 const BadgeContainer = (props) => {
-    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { children, className, ...rest } = props;
     const [cssClassName] = useCssClasses([
         styles$S.badgeContainer,
         className,
     ]);
-    return (React.createElement("div", Object.assign({ className: cssClassName }, rest), children));
+    return (React.createElement("div", { className: cssClassName, ...rest }, children));
 };
 
 var css_248z$R = ".Button-module_button__qeIer {\n  text-transform: uppercase;\n  flex-shrink: 0;\n  background-color: transparent;\n  display: inline-block;\n  font-weight: 400;\n  line-height: 1.5;\n  text-align: center;\n  text-decoration: none;\n  vertical-align: middle;\n  user-select: none;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  min-width: 64px;\n  font-size: 0.875rem;\n  border-radius: var(--borderRadius);\n}\n.Button-module_button__qeIer.Button-module_shadow__6N2nE {\n  box-shadow: var(--shadow);\n}\n.Button-module_button__qeIer.Button-module_block__JIazf {\n  width: 100%;\n}\n.Button-module_button__qeIer:hover:not(:disabled) {\n  cursor: pointer;\n}\n.Button-module_button__qeIer:focus:not(:disabled) {\n  border-color: #86b7fe;\n  outline: 0;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n  color: var(--primary-contrast-text);\n  background-color: var(--primary);\n}\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\n  background-color: var(--primary-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n  color: var(--accent-contrast-text);\n  background-color: var(--accent);\n}\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\n  background-color: var(--accent-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n  color: var(--secondary-contrast-text);\n  background-color: var(--secondary);\n}\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\n  background-color: var(--secondary-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n  background-color: var(--light);\n}\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\n  background-color: var(--light-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark);\n}\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n  background-color: var(--dark-dark);\n}\n.Button-module_btnContained__16y5l:disabled {\n  color: rgba(0, 0, 0, 0.26);\n  box-shadow: none;\n  background-color: rgba(0, 0, 0, 0.12);\n}\n.Button-module_btnContained__16y5l:disabled:hover {\n  cursor: not-allowed;\n}\n\n.Button-module_btnText__N5Gys {\n  box-shadow: none;\n  text-decoration: none;\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n  color: var(--primary);\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n  text-decoration: none;\n  background: var(--primary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n  color: var(--secondary);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n  text-decoration: none;\n  background: var(--secondary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n  color: var(--accent);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n  text-decoration: none;\n  background: var(--accent-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n  text-decoration: none;\n  background: var(--light-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n  color: var(--dark);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n  text-decoration: none;\n  background: var(--dark-highlight);\n}\n\n.Button-module_btnOutline__CCFPI {\n  box-shadow: none;\n  text-decoration: none;\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n  color: var(--primary);\n  border-color: var(--primary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n  background: var(--primary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n  color: var(--secondary);\n  border-color: var(--secondary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n  background: var(--secondary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n  color: var(--accent);\n  border-color: var(--accent);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n  background: var(--accent-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n  color: var(--light-contrast-text);\n  border-color: var(--light);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n  background: var(--light-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n  color: var(--dark);\n  border-color: var(--dark);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n  background: var(--dark-highlight);\n}\n.Button-module_btnOutline__CCFPI:disabled {\n  color: rgba(0, 0, 0, 0.26);\n  border: 1px solid rgba(0, 0, 0, 0.12);\n}\n\n.Button-module_startIcon__Eylwr {\n  display: inherit;\n  margin-left: -4px;\n  margin-right: 8px;\n}\n.Button-module_startIcon__Eylwr svg {\n  width: 18px;\n  height: 18px;\n}\n\n.Button-module_endIcon__pCffL {\n  display: inherit;\n  margin-left: 8px;\n}\n.Button-module_endIcon__pCffL svg {\n  width: 18px;\n  height: 18px;\n}";
@@ -546,7 +509,7 @@ const ButtonContext = createContext({
 const useButtonContext = () => useContext(ButtonContext);
 
 const Button = (props) => {
-    const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow", "block"]);
+    const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block, ...rest } = props;
     const buttonContext = useButtonContext();
     const getCssClasses = () => {
         const cssClasses = [];
@@ -575,7 +538,7 @@ const Button = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
+    return (React.createElement("button", { type: "button", className: getCssClasses(), ...rest },
         React.createElement("span", { className: "d-flex justify-content-center" },
             startIcon &&
                 React.createElement(Icon, { className: styles$R.startIcon }, startIcon),
@@ -589,7 +552,7 @@ var styles$Q = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
 styleInject(css_248z$Q);
 
 const ButtonGroup = (props) => {
-    const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
+    const { children, className, color, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$Q.buttonGroup);
@@ -597,7 +560,7 @@ const ButtonGroup = (props) => {
         return cssClasses.filter(css => css).join(' ');
     };
     return (React.createElement(ButtonContext.Provider, { value: { color: color || COLOR.primary } },
-        React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
+        React.createElement("div", { className: getCssClasses(), role: "group", ...rest }, children)));
 };
 
 var css_248z$P = ".Breadcrumb-module_breadcrumb__-pvAn {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  list-style: none;\n  margin: 0;\n}";
@@ -605,14 +568,14 @@ var styles$P = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
 styleInject(css_248z$P);
 
 const Breadcrumb = (props) => {
-    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { children, className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$P.breadcrumb);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("nav", Object.assign({}, rest),
+    return (React.createElement("nav", { ...rest },
         React.createElement("ol", { className: getCssClasses() }, children)));
 };
 
@@ -643,7 +606,7 @@ var styles$N = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__N
 styleInject(css_248z$N);
 
 const Card = (props) => {
-    const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
+    const { children, className, shadow = true, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$N.card);
@@ -651,7 +614,7 @@ const Card = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$M = ".CardBody-module_cardBody__X52VY {\n  flex: 1 1 auto;\n  min-height: 1px;\n  padding: 1.25rem;\n}";
@@ -659,14 +622,14 @@ var styles$M = {"cardBody":"CardBody-module_cardBody__X52VY"};
 styleInject(css_248z$M);
 
 const CardBody = (props) => {
-    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { children, className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$M.cardBody);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$L = ".CardFooter-module_cardFooter__BpOTG {\n  padding: 0.75rem 1.25rem;\n  background-color: rgba(0, 0, 0, 0.03);\n  border-top: 1px solid rgba(0, 0, 0, 0.125);\n}\n.CardFooter-module_cardFooter__BpOTG:last-child {\n  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);\n}";
@@ -674,14 +637,14 @@ var styles$L = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
 styleInject(css_248z$L);
 
 const CardFooter = (props) => {
-    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { children, className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$L.cardFooter);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$K = ".CardSubtitle-module_cardSubtitle__YdoRM {\n  color: #6c757d !important;\n}";
@@ -689,14 +652,14 @@ var styles$K = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
 styleInject(css_248z$K);
 
 const CardSubtitle = (props) => {
-    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { children, className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$K.cardSubtitle);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("p", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$J = ".CardText-module_cardText__UtYd9:last-child {\n  margin-bottom: 0;\n}";
@@ -704,14 +667,14 @@ var styles$J = {"cardText":"CardText-module_cardText__UtYd9"};
 styleInject(css_248z$J);
 
 const CardText = (props) => {
-    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { children, className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$J.cardText);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("p", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$I = ".CardTitle-module_cardTitle__aiPSE {\n  margin-bottom: 0;\n  font-size: 1.5rem;\n  font-weight: 400;\n  line-height: 1.334;\n  letter-spacing: 0em;\n}";
@@ -719,14 +682,14 @@ var styles$I = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
 styleInject(css_248z$I);
 
 const CardTitle = (props) => {
-    const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
+    const { children, className, as: As = 'div', ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$I.cardTitle);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement(As, { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$H = ".CardImage-module_cardImage__Z6JWW {\n  flex-shrink: 0;\n  width: 100%;\n  border-top-left-radius: calc(0.25rem - 1px);\n  border-top-right-radius: calc(0.25rem - 1px);\n}";
@@ -734,14 +697,14 @@ var styles$H = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
 styleInject(css_248z$H);
 
 const CardImage = (props) => {
-    const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
+    const { src, alt, className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$H.cardImage);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
+    return (React.createElement("img", { className: getCssClasses(), src: src, alt: alt, ...rest }));
 };
 
 var css_248z$G = ".Checkbox-module_checkboxContainer__x2GCi {\n  display: flex;\n  align-items: center;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.Checkbox-module_checkboxLabel__nPY4k:hover {\n  cursor: pointer;\n}\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG {\n  color: rgba(0, 0, 0, 0.26);\n  cursor: not-allowed;\n}\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG:hover {\n  cursor: not-allowed;\n}";
@@ -749,7 +712,7 @@ var styles$G = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","
 styleInject(css_248z$G);
 
 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"]);
+    const { id, checked, className, label, name, value = 'off', disabled, readOnly, ...rest } = props;
     // TODO
     // add own value
     // set from outer
@@ -783,16 +746,15 @@ const Checkbox = (props) => {
         return isChecked ? icons.selected : icons.default;
     };
     const handleClick = () => {
-        var _a;
         if (!disabled && !readOnly) {
             setIsChecked(!isChecked);
-            (_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
+            checkboxElement?.current?.click();
         }
     };
     return (React.createElement("div", { className: styles$G.checkboxContainer },
         React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
         React.createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, 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))));
+        React.createElement("input", { type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value, ...rest })));
 };
 
 var css_248z$F = ".Chip-module_chip__dZ5qz {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: baseline;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  font-size: 75%;\n  font-weight: 700;\n  border-radius: 10rem;\n  line-height: 1;\n}\n.Chip-module_chip__dZ5qz span {\n  margin-bottom: 2px;\n}\n.Chip-module_chip__dZ5qz svg {\n  width: 18px;\n  height: 18px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n  margin-left: 5px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n  cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n  background: var(--primary);\n  color: var(--primary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n  background: var(--secondary);\n  color: var(--secondary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n  background: var(--accent);\n  color: var(--accent-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n  color: var(--light-contrast-text);\n  background-color: var(--light);\n}\n.Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n  color: var(--dark-contrast-text);\n  background-color: var(--dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n  cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n  background: var(--primary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n  background: var(--secondary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n  background: var(--accent-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n  box-shadow: var(--shadow);\n}";
@@ -800,7 +762,7 @@ var styles$F = {"chip":"Chip-module_chip__dZ5qz","deleteIcon":"Chip-module_delet
 styleInject(css_248z$F);
 
 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 { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React.createElement(TimesCircleSolidIcon, null), style, ...rest } = props;
     const getCssClass = () => {
         const cssClasses = [];
         cssClasses.push(styles$F.chip);
@@ -814,7 +776,7 @@ const Chip = (props) => {
         e.stopPropagation();
         onDelete && onDelete(e);
     };
-    return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
+    return (React.createElement("div", { className: getCssClass(), ...rest, style: style },
         React.createElement("span", null, children),
         isDeletable && (React.createElement("div", { className: styles$F.deleteIcon, onClick: (e) => handleClickOnDelete(e) }, deleteIcon))));
 };
@@ -881,13 +843,13 @@ const CssTransition = (props) => {
     }, [isShow]);
     const getCssClasses = () => {
         const cssClasses = [];
-        (cssState === null || cssState === void 0 ? void 0 : cssState.hidden) && cssClasses.push(`hidden`);
-        (cssState === null || cssState === void 0 ? void 0 : cssState.enter) && cssClasses.push(`${className}-enter`);
-        (cssState === null || cssState === void 0 ? void 0 : cssState.enterStart) && cssClasses.push(`${className}-enter-start`);
-        (cssState === null || cssState === void 0 ? void 0 : cssState.enterEnd) && cssClasses.push(`${className}-enter-end`);
-        (cssState === null || cssState === void 0 ? void 0 : cssState.leave) && cssClasses.push(`${className}-leave`);
-        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveStart) && cssClasses.push(`${className}-leave-start`);
-        (cssState === null || cssState === void 0 ? void 0 : cssState.leaveEnd) && cssClasses.push(`${className}-leave-end`);
+        cssState?.hidden && cssClasses.push(`hidden`);
+        cssState?.enter && cssClasses.push(`${className}-enter`);
+        cssState?.enterStart && cssClasses.push(`${className}-enter-start`);
+        cssState?.enterEnd && cssClasses.push(`${className}-enter-end`);
+        cssState?.leave && cssClasses.push(`${className}-leave`);
+        cssState?.leaveStart && cssClasses.push(`${className}-leave-start`);
+        cssState?.leaveEnd && cssClasses.push(`${className}-leave-end`);
         return cssClasses.filter((css) => css).join(' ');
     };
     return (React.createElement(React.Fragment, null, isRenderChild &&
@@ -899,22 +861,21 @@ var styles$E = {"column":"Column-module_column__fcTgl"};
 styleInject(css_248z$E);
 
 const Column = (props) => {
-    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { children, className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$E.column);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$D = ".Row-module_row__bTIWp {\n  display: flex;\n  gap: 15px;\n  flex-wrap: wrap;\n}\n.Row-module_row__bTIWp > * {\n  flex-shrink: 0;\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}";
 var styles$D = {"row":"Row-module_row__bTIWp"};
 styleInject(css_248z$D);
 
-const Row = (_a) => {
-    var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
+const Row = ({ children, direction = 'row', className, ...rest }) => {
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$D.row);
@@ -922,22 +883,21 @@ const Row = (_a) => {
         direction && cssClasses.push(`flex-${direction}`);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$C = ".FormLabel-module_formLabel__TXcHc {\n  display: inline-block;\n  margin-bottom: 0.5rem;\n}";
 var styles$C = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
 styleInject(css_248z$C);
 
-const FormLabel = (_a) => {
-    var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
+const FormLabel = ({ children, className, htmlFor, ...rest }) => {
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$C.formLabel);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("label", Object.assign({ htmlFor: htmlFor, className: getCssClasses() }, rest), children));
+    return (React.createElement("label", { htmlFor: htmlFor, className: getCssClasses(), ...rest }, children));
 };
 
 const FormGroup = (props) => {
@@ -946,7 +906,7 @@ const FormGroup = (props) => {
 };
 
 const FileInput = (props) => {
-    const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false } = props, rest = __rest(props, ["id", "className", "children", "name", "multiple", "accept", "disabled", "onChange", "readOnly", "value", "deletable"]);
+    const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false, ...rest } = props;
     const inputFileElement = useRef(null);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [model, setModel] = useState(value);
@@ -965,9 +925,9 @@ const FileInput = (props) => {
         alert('coming soon');
     };
     return (React.createElement("div", { className: "d-flex align-items-start" },
-        React.createElement(Button, { className: "flex-wrap", disabled: disabled, onClick: () => { var _a; return (_a = inputFileElement.current) === null || _a === void 0 ? void 0 : _a.click(); } }, children),
+        React.createElement(Button, { className: "flex-wrap", disabled: disabled, onClick: () => inputFileElement.current?.click() }, children),
         React.createElement("div", { className: "d-flex align-items-center flex-wrap ml-1" }, fileList && Array.from(fileList).map((file) => React.createElement(Chip, { key: file.name, isDeletable: deletable, onDelete: () => handleOnDelete() }, file.name))),
-        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))));
+        React.createElement("input", { 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$B = ".Select-module_selectContainer__DHFDZ {\n  position: relative;\n}\n\n.Select-module_select__Fbn38 {\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n  align-items: center;\n  min-height: calc(1.5em + 0.75rem + 2px);\n  height: auto;\n  display: flex;\n  flex-wrap: wrap;\n}\n.Select-module_select__Fbn38 > span {\n  flex: 1;\n}\n.Select-module_select__Fbn38:hover {\n  cursor: pointer;\n}\n.Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n  color: #212529;\n  background-color: #fff;\n  border-color: #86b7fe;\n  outline: 0;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n  background-color: #e9ecef;\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n  cursor: not-allowed;\n}\n.Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n  cursor: inherit;\n}\n\n.Select-module_chipContainer__1poFF {\n  gap: 10px;\n  flex: 1;\n  display: inline-flex;\n  flex-wrap: wrap;\n}\n\n.Select-module_selectMenu__8y4kQ {\n  background-color: var(--light);\n  position: absolute;\n  box-shadow: var(--shadow);\n  border-radius: var(--borderRadius);\n  width: 100%;\n  top: 2px;\n  z-index: 1112;\n  max-height: 280px;\n  overflow: auto;\n}";
@@ -975,7 +935,6 @@ var styles$B = {"selectContainer":"Select-module_selectContainer__DHFDZ","select
 styleInject(css_248z$B);
 
 const Select = (props) => {
-    var _a, _b, _c;
     const { id, className, options = [], value, multiple, multipleMaxCountItems = 5, disabled, readOnly, onChange, onKeyDown } = props;
     const [model, setModel] = useState('');
     const [hoverIndex, setHoverIndex] = useState(null);
@@ -1006,10 +965,9 @@ const Select = (props) => {
         }
     }, [hoverIndex, isShow]);
     const scrollIntoView = (index) => {
-        var _a;
-        const htmlListItem = (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.querySelector(`#list-item-${index}`);
+        const htmlListItem = selectConainter.current?.querySelector(`#list-item-${index}`);
         if (htmlListItem) {
-            htmlListItem === null || htmlListItem === void 0 ? void 0 : htmlListItem.scrollIntoView({ block: 'end', behavior: 'smooth' });
+            htmlListItem?.scrollIntoView({ block: 'end', behavior: 'smooth' });
         }
     };
     const writeValue = (val) => setModel(val);
@@ -1120,7 +1078,7 @@ const Select = (props) => {
                     React.createElement(ChevronDownSolidIcon, null)))),
         isShow &&
             React.createElement(Portal, { className: 'backdrop-root' },
-                React.createElement("div", { className: styles$B.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
+                React.createElement("div", { className: styles$B.selectMenu, style: { left: selectConainter.current?.getBoundingClientRect().x, top: selectConainter.current?.getBoundingClientRect().y, width: selectConainter.current?.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) }),
@@ -1133,7 +1091,7 @@ var styles$A = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textare
 styleInject(css_248z$A);
 
 const Textarea = (props) => {
-    const { className, error } = props, rest = __rest(props, ["className", "error"]);
+    const { className, error, ...rest } = props;
     const getCssClass = () => {
         const cssClasses = [];
         cssClasses.push(styles$A.textarea);
@@ -1141,7 +1099,7 @@ const Textarea = (props) => {
         error && cssClasses.push(styles$A['isInvalid']);
         return cssClasses.filter(r => r).join(' ');
     };
-    return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
+    return (React.createElement("textarea", { className: getCssClass(), ...rest }));
 };
 
 var css_248z$z = ".FormInput-module_formInput__VXZip {\n  display: block;\n  width: 100%;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.5;\n  color: #212529;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid #ced4da;\n  -webkit-appearance: none;\n  appearance: none;\n  border-radius: 0.25rem;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.FormInput-module_formInput__VXZip:focus:not(.FormInput-module_formInput__VXZip.FormInput-module_disabled__EjdD9) {\n  color: #212529;\n  background-color: #fff;\n  border-color: #86b7fe;\n  outline: 0;\n  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);\n}\n.FormInput-module_formInput__VXZip.FormInput-module_isInvalid__vQDuz {\n  border-color: #dc3545;\n  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
@@ -1175,20 +1133,20 @@ const FormInput = (props) => {
             type === 'color' ||
             type === 'time')
             &&
-                React.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 }),
+                React.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?.target).value, type, name), onBlur: onBlur, placeholder: placeholder, readOnly: readonly, disabled: disabled, onKeyDown: onKeyDown }),
         type === 'file' &&
             React.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.createElement(Textarea, { id: name, name: name, className: className, error: !isValid, value: value, autoFocus: autoFocus, onInput: (e) => handleOnInput(e.target.value, type, name), onChange: (e) => handleOnChange(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' } }),
+            React.createElement(Textarea, { id: name, name: name, className: className, error: !isValid, value: value, autoFocus: autoFocus, onInput: (e) => handleOnInput(e.target.value, type, name), onChange: (e) => handleOnChange(e.target.value, type, name), placeholder: placeholder, rows: textareaOptions?.rows, style: textareaOptions?.resize !== false ? undefined : { resize: 'none' } }),
         type === 'select' &&
-            React.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), options: options }),
+            React.createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions?.multiple, onChange: (e) => handleOnChange(e, type, name), options: options }),
         type === 'autocomplete' &&
-            React.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), onSelect: (e) => handleOnChange(e.value, type, name), options: options }),
+            React.createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions?.openOnFocus, onChange: (e) => handleOnChange(e, type, name), onSelect: (e) => handleOnChange(e.value, type, name), options: options }),
         type === 'checkbox' &&
-            React.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 }),
+            React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: (e) => handleOnChange((e?.target).checked, type, name), checked: value }),
         type === 'radio' &&
             React.createElement(React.Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
-                React.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.createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: (e) => handleOnChange((e?.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
                 React.createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
 };
 
@@ -1249,7 +1207,10 @@ class Form extends Component {
                 const newValue = ((control.type === 'date' || control.type === 'datetime-local') &&
                     control.value &&
                     isValidDate((control.value))) ? new Date((control.value)).toISOString() : control.value;
-                return (Object.assign(Object.assign({}, obj), { [f]: newValue }));
+                return ({
+                    ...obj,
+                    [f]: newValue
+                });
             }, {});
             if (this.state.isValid && this.state.isSubmitted) {
                 this.props.onSubmit && this.props.onSubmit(values);
@@ -1312,7 +1273,7 @@ class Form extends Component {
         field.isDirty = true;
         field.errors = this.validateField(field.value, field.validators);
         field.isValid = field.errors.length === 0;
-        const newControls = Object.assign({}, this.state.controls);
+        const newControls = { ...this.state.controls };
         newControls[name] = field;
         this.setState({ controls: newControls, isChanged: true }, () => this.handleChange());
     }
@@ -1357,7 +1318,7 @@ class Form extends Component {
             field.isValid = field.errors.length === 0;
         }
         this.setState({
-            controls: Object.assign({}, this.state.controls),
+            controls: { ...this.state.controls },
             isSubmitted: true,
             isValid: Object.keys(this.state.controls).map(f => this.getControl(f).isValid).every(valid => valid === true)
         }, () => this.handleChange());
@@ -1372,7 +1333,7 @@ class Form extends Component {
             field.isValid = field.errors.length === 0;
         }
         this.setState({
-            controls: Object.assign({}, this.state.controls),
+            controls: { ...this.state.controls },
             isSubmitted: false,
             isChanged: false,
             isValid: false
@@ -1519,7 +1480,7 @@ const DateSelect = (props) => {
     return (React.createElement(Row, { className: getCssClasses() },
         React.createElement(Column, null,
             React.createElement(FormLabel, null, "Year"),
-            React.createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.from, to: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.to, onChange: (e) => handleOnChange(e, DATEMODE.YEAR) })),
+            React.createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig?.from, to: yearConfig?.to, onChange: (e) => handleOnChange(e, DATEMODE.YEAR) })),
         React.createElement(Column, null,
             React.createElement(FormLabel, null, "Month"),
             React.createElement(MonthSelect, { value: currDate.getMonth(), disabled: disabled, onChange: (e) => handleOnChange(e, DATEMODE.MONTH) })),
@@ -1543,7 +1504,7 @@ var styles$x = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-modul
 styleInject(css_248z$x);
 
 const Drawer = (props) => {
-    const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
+    const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop, ...rest } = props;
     useEffect(() => {
         document.body.classList.add(styles$x.drawerOpen);
         return () => {
@@ -1554,11 +1515,11 @@ const Drawer = (props) => {
         onClickBackdrop && onClickBackdrop();
     };
     return (React.createElement(Portal, { className: 'drawer-root', target: target },
-        React.createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
+        React.createElement(DrawerContent, { className: className, position: position, permanent: permanent, shadow: shadow, ...rest }, children),
         !permanent && React.createElement(Backdrop, { onClick: handleClickBackdrop })));
 };
 const DrawerContent = (props) => {
-    const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
+    const { children, className, position = 'left', permanent = false, shadow, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$x.drawer);
@@ -1575,7 +1536,7 @@ const DrawerContent = (props) => {
     const getStyles = () => {
         return !permanent ? positionStyles[position] : undefined;
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
+    return (React.createElement("div", { className: getCssClasses(), style: getStyles(), ...rest }, children));
 };
 
 var css_248z$w = ".MenuBody-module_menuBody__u4FIQ {\n  z-index: 1111;\n  margin: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  min-width: 10rem;\n  padding: 0px;\n  font-size: 1rem;\n  color: #212529;\n  text-align: left;\n  list-style: none;\n  background-color: #fff;\n  background-clip: padding-box;\n  border-radius: var(--borderRadius);\n}\n.MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n  box-shadow: var(--shadow);\n}";
@@ -1626,7 +1587,7 @@ const MenuBody = (props) => {
 };
 
 const Menu = (props) => {
-    const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
+    const { toggle, children, className, open, menuPosition, onClickBackdrop, ...rest } = props;
     const menuContainer = useRef(null);
     const toggleContainerRef = useRef(null);
     const getCssClasses = () => {
@@ -1637,14 +1598,14 @@ const Menu = (props) => {
     const handleClickBackdrop = () => {
         onClickBackdrop && onClickBackdrop();
     };
-    return (React.createElement("div", Object.assign({ ref: menuContainer, className: getCssClasses() }, rest),
+    return (React.createElement("div", { ref: menuContainer, className: getCssClasses(), ...rest },
         React.createElement("div", { ref: toggleContainerRef }, toggle),
         open &&
             React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
 };
 
 const MenuItem = (props) => {
-    const { children, onClick } = props, rest = __rest(props, ["children", "onClick"]);
+    const { children, onClick, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         return cssClasses.filter(css => css).join(' ');
@@ -1653,7 +1614,7 @@ const MenuItem = (props) => {
         e.stopPropagation();
         onClick && onClick(e);
     };
-    return (React.createElement(ListItem, Object.assign({ className: getCssClasses(), onClick: handleClick }, rest), children));
+    return (React.createElement(ListItem, { className: getCssClasses(), onClick: handleClick, ...rest }, children));
 };
 
 const MenuToggle = ({ children }) => {
@@ -1745,7 +1706,7 @@ var styles$q = {"link":"Link-module_link__YlJQl"};
 styleInject(css_248z$q);
 
 const Link = (props) => {
-    const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
+    const { href = '#', className, target, children, ...rest } = props;
     const [status, setStatus] = useState(STATUS.NORMAL);
     const [cssClassName] = useCssClasses([styles$q.link, className, status]);
     const onMouseEnter = () => {
@@ -1754,21 +1715,20 @@ const Link = (props) => {
     const onMouseLeave = () => {
         setStatus(STATUS.NORMAL);
     };
-    return (React.createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
+    return (React.createElement("a", { className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...rest }, children));
 };
 
 var css_248z$p = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n.LoadingIndicator-module_loadingIndicatorContainer__GS9OG.LoadingIndicator-module_isFixed__WCFNG {\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n  animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n  animation-duration: 5000ms;\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  width: 24px;\n  height: 24px;\n}\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}";
 var styles$p = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
 styleInject(css_248z$p);
 
-const LoadingIndicator = (_a) => {
-    var rest = __rest(_a, []);
+const LoadingIndicator = ({ ...rest }) => {
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$p.loadingIndicator);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
+    return (React.createElement("div", { className: getCssClasses(), ...rest },
         React.createElement(SpinnerSolidIcon, null)));
 };
 
@@ -1828,9 +1788,8 @@ class LoadingIndicatorService {
             React.createElement(LoadingIndicator, null)));
     }
     hide() {
-        var _a;
         if (this.container) {
-            (_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
+            this.root?.unmount();
             document.body.removeChild(this.container);
             this.container = undefined;
             this.handler && clearTimeout(this.handler);
@@ -1844,11 +1803,11 @@ var styles$o = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitl
 styleInject(css_248z$o);
 
 const ModalHeader = (props) => {
-    const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
+    const { children, isDismissable = false, onClose, ...rest } = props;
     const handleClick = () => {
         onClose && onClose();
     };
-    return (React.createElement("div", Object.assign({ className: styles$o.modalHeader }, rest),
+    return (React.createElement("div", { className: styles$o.modalHeader, ...rest },
         React.createElement("h5", { className: styles$o.modalTitle }, children),
         isDismissable &&
             React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
@@ -1923,15 +1882,14 @@ const GlobalModal = ({ title, description, formControls, onOk, onChange, onCance
     // workaround for getDerivedStateFromProps
     const [myControls, setMyControls] = useState(null);
     useEffect(() => {
-        setMyControls(Object.assign({}, formControls));
+        setMyControls({ ...formControls });
     }, []);
     // end
     const modalType = formControls ? MODALTYPE.FORM : MODALTYPE.BASIC;
     const myForm = useRef(null);
     const handleOk = () => {
-        var _a;
         if (modalType === MODALTYPE.FORM) {
-            (_a = myForm === null || myForm === void 0 ? void 0 : myForm.current) === null || _a === void 0 ? void 0 : _a.handleFormSubmit();
+            myForm?.current?.handleFormSubmit();
         }
         else {
             onOk && onOk();
@@ -2002,9 +1960,8 @@ class ModalService {
         });
     }
     hide() {
-        var _a;
         if (this.container) {
-            (_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
+            this.root?.unmount();
             // document.body.removeChild(this.container);
             this.container = undefined;
         }
@@ -2083,7 +2040,7 @@ var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer_
 styleInject(css_248z$j);
 
 const ProgressBar = (props) => {
-    const { className, color = COLOR.primary, value, indeterminate } = props, rest = __rest(props, ["className", "color", "value", "indeterminate"]);
+    const { className, color = COLOR.primary, value, indeterminate, ...rest } = props;
     const [model, setModel] = useState();
     useEffect(() => {
         document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
@@ -2117,8 +2074,8 @@ const ProgressBar = (props) => {
         }
         return `${width}%`;
     };
-    return (React.createElement(Tooltip, { text: !indeterminate ? model === null || model === void 0 ? void 0 : model.toString() : '' },
-        React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
+    return (React.createElement(Tooltip, { text: !indeterminate ? model?.toString() : '' },
+        React.createElement("div", { className: getCssClasses(), ...rest },
             React.createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
 };
 
@@ -2136,7 +2093,7 @@ class SidebarItemModel {
 }
 
 const Sidebar = (props) => {
-    const { className, items, currentUrl, onItemClicked } = props, rest = __rest(props, ["className", "items", "currentUrl", "onItemClicked"]);
+    const { className, items, currentUrl, onItemClicked, ...rest } = props;
     const [menuItems, setMenuItems] = useState([]);
     useEffect(() => {
         if (items && items.length > 0) {
@@ -2185,7 +2142,7 @@ const Sidebar = (props) => {
     const handleClickSubItem = (itemPath, subItemPath, e) => {
         navigate(e, `${itemPath}/${subItemPath}`);
     };
-    return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest),
+    return (React.createElement("nav", { className: getCssClasses(), ...rest },
         React.createElement(List, null, menuItems.map(item => (React.createElement(React.Fragment, { key: item.id },
             React.createElement(ListItem, { active: isMenuItemActive(item.path), onClick: (e) => handleClickItem(item, e) },
                 React.createElement(ListItemText, { primary: React.createElement(React.Fragment, null,
@@ -2204,7 +2161,7 @@ var styles$i = {"snackbar":"Snackbar-module_snackbar__O5T2b","bounceIn":"Snackba
 styleInject(css_248z$i);
 
 const Snackbar = (props) => {
-    const { children, color = COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
+    const { children, color = COLOR.dark, actionText = 'ok', onOk, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$i.snackbar);
@@ -2215,7 +2172,7 @@ const Snackbar = (props) => {
     const handleClickAction = (e) => {
         onOk && onOk(e);
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
+    return (React.createElement("div", { className: getCssClasses(), ...rest },
         React.createElement("div", { className: styles$i.text }, children),
         React.createElement("div", { className: styles$i.action + ' text-accent', onClick: handleClickAction },
             React.createElement("span", null, actionText))));
@@ -2246,9 +2203,8 @@ class SnackbarService {
         });
     }
     hide() {
-        var _a;
         if (this.container) {
-            (_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
+            this.root?.unmount();
             document.body.removeChild(this.container);
             this.container = undefined;
             this.handler && clearTimeout(this.handler);
@@ -2276,7 +2232,7 @@ var styles$g = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
 styleInject(css_248z$g);
 
 const SpeedDial = (props) => {
-    const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
+    const { children, className, open, onOpen, onClose, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$g.speedDial);
@@ -2291,7 +2247,7 @@ const SpeedDial = (props) => {
             onOpen && onOpen(e);
         }
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
+    return (React.createElement("div", { className: getCssClasses(), ...rest },
         React.createElement("div", { style: { 'transform': open ? 'rotate(45deg)' : undefined } },
             React.createElement(FloatingActionButton, { icon: React.createElement(PlusSolidIcon, null), onClick: handleClick })),
         open &&
@@ -2314,13 +2270,13 @@ const SpeedDialAction = (props) => {
 };
 
 const SpeedDialIcon = (props) => {
-    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { children, className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement(Icon, { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z$e = ".StepperActions-module_stepperActions__hBUkh {\n  display: flex;\n}";
@@ -2483,7 +2439,7 @@ var styles$b = {"typography":"Typography-module_typography__sw-td","wrap":"Typog
 styleInject(css_248z$b);
 
 const Wrapper = (props) => {
-    const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
+    const { as = 'span', wrap, children, className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$b.typography);
@@ -2492,11 +2448,10 @@ const Wrapper = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return React.createElement(as, Object.assign(Object.assign({}, rest), { className: getCssClasses() }), children);
+    return React.createElement(as, { ...rest, className: getCssClasses() }, children);
 };
-const Typography = (_a) => {
-    var { children, as = 'span', wrap } = _a, rest = __rest(_a, ["children", "as", "wrap"]);
-    return (React.createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
+const Typography = ({ children, as = 'span', wrap, ...rest }) => {
+    return (React.createElement(Wrapper, { as: as, wrap: wrap, ...rest }, children));
 };
 
 var css_248z$a = ".Step-module_stepWrapper__IQwq1 {\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}\n.Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0.04);\n  border-radius: var(--borderRadius);\n}\n\n.Step-module_step__k42go {\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}\n.Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n  border-radius: 100%;\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0.04);\n}\n.Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n  width: 18px !important;\n  height: 18px !important;\n}\n\n.Step-module_stepIconCircle__hnxIV svg {\n  width: 24px;\n  height: 24px;\n}\n\n.Step-module_stepValue__B0-xv {\n  position: absolute;\n  color: var(--secondary-contrast-text);\n}\n.Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n  color: var(--primary-contrast-text);\n}";
@@ -2551,14 +2506,14 @@ var styles$9 = {"skeletonAvatar":"SkeletonAvatar-module_skeletonAvatar__03QnJ","
 styleInject(css_248z$9);
 
 const SkeletonAvatar = (props) => {
-    const { className } = props, rest = __rest(props, ["className"]);
+    const { className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$9.skeletonAvatar);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
+    return (React.createElement("div", { className: getCssClasses(), ...rest }));
 };
 
 var css_248z$8 = "@keyframes SkeletonText-module_skeleton-loading__EYFfJ {\n  0% {\n    background-color: hsl(200deg, 20%, 80%);\n  }\n  100% {\n    background-color: hsl(200deg, 20%, 95%);\n  }\n}\n.SkeletonText-module_skeletonText__E5NCO {\n  width: 100%;\n  height: 0.7rem;\n  margin-bottom: 0.5rem;\n  border-radius: 0.25rem;\n  animation: SkeletonText-module_skeleton-loading__EYFfJ 1s linear infinite alternate;\n}";
@@ -2566,14 +2521,14 @@ var styles$8 = {"skeletonText":"SkeletonText-module_skeletonText__E5NCO","skelet
 styleInject(css_248z$8);
 
 const SkeletonText = (props) => {
-    const { className } = props, rest = __rest(props, ["className"]);
+    const { className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$8.skeletonText);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
+    return (React.createElement("div", { className: getCssClasses(), ...rest }));
 };
 
 var css_248z$7 = "@keyframes SkeletonFooter-module_skeleton-loading__OEErv {\n  0% {\n    background-color: hsl(200deg, 20%, 80%);\n  }\n  100% {\n    background-color: hsl(200deg, 20%, 95%);\n  }\n}\n.SkeletonFooter-module_skeletonFooter__u2Gxc {\n  width: 30%;\n  height: 0.7rem;\n  border-radius: 0.25rem;\n  animation: SkeletonFooter-module_skeleton-loading__OEErv 1s linear infinite alternate;\n}";
@@ -2581,14 +2536,14 @@ var styles$7 = {"skeletonFooter":"SkeletonFooter-module_skeletonFooter__u2Gxc","
 styleInject(css_248z$7);
 
 const SkeletonFooter = (props) => {
-    const { className } = props, rest = __rest(props, ["className"]);
+    const { className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$7.skeletonFooter);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
+    return (React.createElement("div", { className: getCssClasses(), ...rest }));
 };
 
 var css_248z$6 = "@keyframes SkeletonImage-module_skeleton-loading__04lJ7 {\n  0% {\n    background-color: hsl(200deg, 20%, 80%);\n  }\n  100% {\n    background-color: hsl(200deg, 20%, 95%);\n  }\n}\n.SkeletonImage-module_skeletonImage__2EwDG {\n  height: 10rem;\n  margin: 0.5rem 0;\n  border-radius: 0.75rem;\n  animation: SkeletonImage-module_skeleton-loading__04lJ7 1s linear infinite alternate;\n}\n\n.SkeletonImage-module_div__tqqrB {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  margin: auto;\n  border-radius: 0.75rem;\n  border-color: none;\n}";
@@ -2596,14 +2551,14 @@ var styles$6 = {"skeletonImage":"SkeletonImage-module_skeletonImage__2EwDG","ske
 styleInject(css_248z$6);
 
 const SkeletonImage = (props) => {
-    const { className } = props, rest = __rest(props, ["className"]);
+    const { className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$6.skeletonImage);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
-    return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
+    return (React.createElement("div", { className: getCssClasses(), ...rest },
         React.createElement("div", { className: styles$6.img })));
 };
 
@@ -2627,8 +2582,8 @@ const Table = (props) => {
 };
 
 const TableRow = (props) => {
-    const { children } = props, rest = __rest(props, ["children"]);
-    return (React.createElement("tr", Object.assign({}, rest), children));
+    const { children, ...rest } = props;
+    return (React.createElement("tr", { ...rest }, children));
 };
 
 const TableContext = createContext({
@@ -2637,22 +2592,22 @@ const TableContext = createContext({
 const useTableContext = () => useContext(TableContext);
 
 const TableHead = (props) => {
-    const { children } = props, rest = __rest(props, ["children"]);
+    const { children, ...rest } = props;
     return (React.createElement(TableContext.Provider, { value: { variant: 'head' } },
-        React.createElement("thead", Object.assign({}, rest), children)));
+        React.createElement("thead", { ...rest }, children)));
 };
 
 const TableBody = (props) => {
-    const { children } = props, rest = __rest(props, ["children"]);
+    const { children, ...rest } = props;
     return (React.createElement(TableContext.Provider, { value: { variant: 'body' } },
-        React.createElement("tbody", Object.assign({}, rest), children)));
+        React.createElement("tbody", { ...rest }, children)));
 };
 
 const TableCell = (props) => {
     const { variant } = useTableContext();
-    const { children, component } = props, rest = __rest(props, ["children", "component"]);
-    return (React.createElement(ConditionalWrapper, { condition: true, wrapper: (children) => ((variant === 'head' || component === 'th') ? (React.createElement("th", Object.assign({}, rest), children)) :
-            React.createElement("td", Object.assign({}, rest), children)) }, children));
+    const { children, component, ...rest } = props;
+    return (React.createElement(ConditionalWrapper, { condition: true, wrapper: (children) => ((variant === 'head' || component === 'th') ? (React.createElement("th", { ...rest }, children)) :
+            React.createElement("td", { ...rest }, children)) }, children));
 };
 
 const TabContext = createContext({});
@@ -2741,8 +2696,8 @@ const Tab = (props) => {
 };
 
 const TabPanel = (props) => {
-    const { children, value, index } = props, rest = __rest(props, ["children", "value", "index"]);
-    return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
+    const { children, value, index, ...rest } = props;
+    return (React.createElement("div", { role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}`, ...rest }, value === index && children));
 };
 
 const HourSelect = (props) => {
@@ -2889,14 +2844,14 @@ var styles$1 = {"treeView":"TreeView-module_treeView__VVj-4"};
 styleInject(css_248z$1);
 
 const TreeView = (props) => {
-    const { children, className } = props, rest = __rest(props, ["children", "className"]);
+    const { children, className, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$1.treeView);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
+    return (React.createElement("ul", { className: getCssClasses(), ...rest }, children));
 };
 
 var css_248z = ".TreeItem-module_treeItem__Mxsjr {\n  display: flex;\n  flex-direction: column;\n  min-height: 48px;\n  justify-content: center;\n}";