react-asc 25.14.0 → 25.15.0

package/index.es.js

@@ -5,39 +5,43 @@ import { createPopper } from '@popperjs/core';
 import saveAs from 'file-saver';
 import { unparse, parse } from 'papaparse';
 
-var COLOR;
-(function (COLOR) {
-    COLOR["primary"] = "primary";
-    COLOR["accent"] = "accent";
-    COLOR["secondary"] = "secondary";
-    COLOR["success"] = "success";
-    COLOR["error"] = "error";
-    COLOR["light"] = "light";
-    COLOR["dark"] = "dark";
-})(COLOR || (COLOR = {}));
-var VARIANT;
-(function (VARIANT) {
-    VARIANT["contained"] = "contained";
-    VARIANT["outline"] = "outline";
-    VARIANT["text"] = "text";
-})(VARIANT || (VARIANT = {}));
+var Color;
+(function (Color) {
+    Color["primary"] = "primary";
+    Color["accent"] = "accent";
+    Color["secondary"] = "secondary";
+    Color["success"] = "success";
+    Color["error"] = "error";
+    Color["light"] = "light";
+    Color["dark"] = "dark";
+})(Color || (Color = {}));
+
+var POSITION;
+(function (POSITION) {
+    POSITION["right"] = "right";
+    POSITION["left"] = "left";
+})(POSITION || (POSITION = {}));
+
 var SIZE;
 (function (SIZE) {
     SIZE["sm"] = "sm";
     SIZE["md"] = "md";
     SIZE["lg"] = "lg";
 })(SIZE || (SIZE = {}));
-var POSITION;
-(function (POSITION) {
-    POSITION["right"] = "right";
-    POSITION["left"] = "left";
-})(POSITION || (POSITION = {}));
+
 var STATUS;
 (function (STATUS) {
     STATUS["HOVERED"] = "hovered";
     STATUS["NORMAL"] = "normal";
 })(STATUS || (STATUS = {}));
 
+var VARIANT;
+(function (VARIANT) {
+    VARIANT["contained"] = "contained";
+    VARIANT["outline"] = "outline";
+    VARIANT["text"] = "text";
+})(VARIANT || (VARIANT = {}));
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -70,7 +74,7 @@ var styles$16 = {"alert":"Alert-module_alert__b4tbk","shadow":"Alert-module_shad
 styleInject(css_248z$16);
 
 const Alert = (props) => {
-    const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true, ...rest } = props;
+    const { children, className, color = Color.secondary, variant = VARIANT.contained, shadow = true, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$16.alert);
@@ -94,7 +98,7 @@ var styles$15 = {"appbar":"AppBar-module_appbar__Neyh3","primary":"AppBar-module
 styleInject(css_248z$15);
 
 const AppBar = (props) => {
-    const { children, className, color = COLOR.primary, shadow = true, ...rest } = props;
+    const { children, className, color = Color.primary, shadow = true, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$15[color]);
@@ -374,7 +378,7 @@ var styles$10 = {"iconButton":"IconButton-module_iconButton__rpCPQ","shadow":"Ic
 styleInject(css_248z$10);
 
 const IconButton = (props) => {
-    const { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, loading, className, shadow, ...rest } = props;
+    const { children, icon, variant = VARIANT.text, color = Color.dark, size = SIZE.md, isActive, disabled, loading, className, shadow, ...rest } = props;
     const [isDisabled, setIsDisabled] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     useEffect(() => {
@@ -589,7 +593,7 @@ var styles$U = {"badgeContainer":"Badge-module_badgeContainer__3nZBs","badge":"B
 styleInject(css_248z$U);
 
 const Badge = (props) => {
-    const { children, content, className, color = COLOR.primary, ...rest } = props;
+    const { children, content, className, color = Color.secondary, ...rest } = props;
     const [cssClassName] = useCssClasses([styles$U.badge, styles$U[color], className]);
     return (jsxs(BadgeContainer, { children: [children, jsx("span", { className: cssClassName, ...rest, children: content })] }));
 };
@@ -635,17 +639,17 @@ const BreadcrumbItem = (props) => {
     return (jsx("li", { className: getCssClasses(), onClick: handleClick, children: jsx(ConditionalWrapper, { condition: !isActive, wrapper: (label) => jsx("a", { children: label }), children: 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: var(--primary-highlight);\n  outline: 0;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem var(--primary-highlight);\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}";
-var styles$R = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
+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: var(--primary-highlight);\n  outline: 0;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem var(--primary-highlight);\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_success__780qD {\n  color: var(--success-contrast-text);\n  background-color: var(--success);\n}\n.Button-module_btnContained__16y5l.Button-module_success__780qD:hover:not(:disabled) {\n  background-color: var(--success-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_error__uhFls {\n  color: var(--error-contrast-text);\n  background-color: var(--error);\n}\n.Button-module_btnContained__16y5l.Button-module_error__uhFls:hover:not(:disabled) {\n  background-color: var(--error-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}";
+var styles$R = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","success":"Button-module_success__780qD","error":"Button-module_error__uhFls","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
 styleInject(css_248z$R);
 
 const ButtonContext = createContext({
-    color: null
+    color: null,
 });
 const useButtonContext = () => useContext(ButtonContext);
 
 const Button = props => {
-    const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block, loading, disabled, ...rest } = props;
+    const { children, variant = VARIANT.contained, color = Color.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block, loading, disabled, ...rest } = props;
     const [isDisabled, setIsDisabled] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     useEffect(() => {
@@ -693,7 +697,7 @@ const Button = props => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (jsx("button", { type: "button", className: getCssClasses(), disabled: isDisabled, ...rest, children: jsxs("span", { className: "d-flex justify-content-center", children: [isLoading && (jsx("div", { className: "mr-1", children: jsx(LoadingIndicatorContainer, { children: jsx(LoadingIndicator, {}) }) })), startIcon && jsx(Icon, { className: styles$R.startIcon, children: startIcon }), children, endIcon && jsx(Icon, { className: styles$R.endIcon, children: endIcon })] }) }));
+    return (jsx("button", { type: "button", className: getCssClasses(), disabled: isDisabled, ...rest, children: jsxs("span", { className: "d-flex justify-content-center align-items-center", children: [isLoading && (jsx("div", { className: "mr-1", children: jsx(LoadingIndicatorContainer, { children: jsx(LoadingIndicator, {}) }) })), startIcon && jsx(Icon, { className: styles$R.startIcon, children: startIcon }), children, endIcon && jsx(Icon, { className: styles$R.endIcon, children: endIcon })] }) }));
 };
 
 var css_248z$Q = ".ButtonGroup-module_buttonGroup__w6iB- {\n  display: inline-flex;\n  border-radius: 4px;\n  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:last-child) {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:first-child) {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:last-of-type) {\n  border-right: 1px solid #bdbdbd;\n}";
@@ -708,7 +712,7 @@ const ButtonGroup = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (jsx(ButtonContext.Provider, { value: { color: color || COLOR.primary }, children: jsx("div", { className: getCssClasses(), role: "group", ...rest, children: children }) }));
+    return (jsx(ButtonContext.Provider, { value: { color: color || Color.primary }, children: jsx("div", { className: getCssClasses(), role: "group", ...rest, children: children }) }));
 };
 
 var css_248z$P = ".Card-module_card__TQdQq {\n  background: var(--white);\n  border-radius: var(--borderRadius);\n}\n.Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n  box-shadow: var(--shadow);\n}";
@@ -5255,7 +5259,7 @@ const Select = (props) => {
     const renderMultipleViewModel = () => {
         let result = null;
         if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
-            result = selectedOptions.map(option => (jsx(Chip, { color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option), children: option.label }, option.value)));
+            result = selectedOptions.map(option => (jsx(Chip, { color: Color.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option), children: option.label }, option.value)));
         }
         else {
             result = jsxs("span", { children: [selectedOptions.length, " Items selected"] });
@@ -5591,15 +5595,16 @@ class FormControl {
     }
 }
 
-var css_248z$z = ".Column-module_column__fcTgl {\n  flex: 1 0 0%;\n}\n\n@media (max-width: 575.98px) {\n  .Column-module_column__fcTgl {\n    flex: 1;\n  }\n}";
-var styles$z = {"column":"Column-module_column__fcTgl"};
+var css_248z$z = ".Column-module_column__fcTgl {\n  flex: 1 0 0%;\n}\n\n.Column-module_column-10__4935j {\n  flex: 0 0 10%;\n}\n\n.Column-module_column-20__cRb6d {\n  flex: 0 0 20%;\n}\n\n.Column-module_column-30__LqTq8 {\n  flex: 0 0 30%;\n}\n\n.Column-module_column-40__l9TqX {\n  flex: 0 0 40%;\n}\n\n.Column-module_column-50__d4Dxd {\n  flex: 0 0 50%;\n}\n\n.Column-module_column-60__dUUhT {\n  flex: 0 0 60%;\n}\n\n.Column-module_column-70__7xevU {\n  flex: 0 0 70%;\n}\n\n.Column-module_column-80__3mfFZ {\n  flex: 0 0 80%;\n}\n\n.Column-module_column-90__wntvM {\n  flex: 0 0 90%;\n}\n\n.Column-module_column-100__rh1-C {\n  flex: 0 0 100%;\n}\n\n@media (max-width: 575.98px) {\n  .Column-module_column__fcTgl {\n    flex: 1;\n  }\n}";
+var styles$z = {"column":"Column-module_column__fcTgl","column-10":"Column-module_column-10__4935j","column-20":"Column-module_column-20__cRb6d","column-30":"Column-module_column-30__LqTq8","column-40":"Column-module_column-40__l9TqX","column-50":"Column-module_column-50__d4Dxd","column-60":"Column-module_column-60__dUUhT","column-70":"Column-module_column-70__7xevU","column-80":"Column-module_column-80__3mfFZ","column-90":"Column-module_column-90__wntvM","column-100":"Column-module_column-100__rh1-C"};
 styleInject(css_248z$z);
 
 const Column = (props) => {
-    const { children, className, ...rest } = props;
+    const { children, className, size, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$z.column);
+        size && cssClasses.push(styles$z[`column-${size}`]);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
@@ -5807,7 +5812,7 @@ var styles$t = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"Floating
 styleInject(css_248z$t);
 
 const FloatingActionButton = (props) => {
-    const { className, icon, color = COLOR.primary, fixed, position = 'rightBottom', size = SIZE.lg, isActive, disabled, onClick } = props;
+    const { className, icon, color = Color.primary, fixed, position = 'rightBottom', size = SIZE.lg, isActive, disabled, onClick } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$t.fab);
@@ -5931,26 +5936,10 @@ styleInject(css_248z$q);
 
 const MenuDivider = () => jsx("div", { className: styles$q.menuItemDivider });
 
-var css_248z$p = ".ModalHeader-module_modalHeader__tw-u- {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem;\n  border-top-left-radius: calc(0.3rem - 1px);\n  border-top-right-radius: calc(0.3rem - 1px);\n  border-bottom: none;\n  align-items: center;\n}\n.ModalHeader-module_modalHeader__tw-u-.ModalHeader-module_shadow__qELWb {\n  box-shadow: var(--shadow);\n}\n\n.ModalHeader-module_modalTitle__2xShH {\n  margin-bottom: 0;\n  line-height: 1.5;\n}";
-var styles$p = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","shadow":"ModalHeader-module_shadow__qELWb","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
+var css_248z$p = ".Modal-module_modal__HMxWV {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  outline: 0;\n  z-index: 1111 !important;\n  border-radius: var(--borderRadius);\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_sm__CsR6U {\n  max-width: 300px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_md__lNggx {\n  max-width: 500px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_lg__6dtT2 {\n  max-width: 1140px;\n}\n@media (min-width: 576px) {\n  .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n    max-width: 600px;\n  }\n}\n\n.Modal-module_modalDialog__fNqyK {\n  position: relative;\n  width: auto;\n  pointer-events: none;\n}\n\n.Modal-module_modalDialogCentered__sa2wv {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.Modal-module_modalContent__9wAwB {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  pointer-events: auto;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n  border-radius: 0.3rem;\n  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);\n  outline: 0;\n  margin: 1rem;\n  max-height: 600px;\n}\n@media (min-width: 576px) {\n  .Modal-module_modalContent__9wAwB {\n    max-width: 500px;\n    margin: auto;\n  }\n}\n\n.Modal-module_fullscreen__iepGa {\n  width: 100% !important;\n  height: 100% !important;\n  max-height: 100% !important;\n  margin: 0;\n  padding: 0;\n}\n.Modal-module_fullscreen__iepGa .Modal-module_modalContent__9wAwB {\n  margin: 0;\n  height: auto;\n  min-height: 100%;\n  max-height: 100%;\n  border-radius: 0;\n  overflow: auto;\n  max-width: 100%;\n}\n@media (min-width: 320px) {\n  .Modal-module_fullscreen__iepGa {\n    max-width: 100% !important;\n  }\n}";
+var styles$p = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module_modal-dialog__U2wGf","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modalDialog":"Modal-module_modalDialog__fNqyK","modalDialogCentered":"Modal-module_modalDialogCentered__sa2wv","modalContent":"Modal-module_modalContent__9wAwB","fullscreen":"Modal-module_fullscreen__iepGa"};
 styleInject(css_248z$p);
 
-const ModalHeader = (props) => {
-    const { children, shadow, className, isDismissable = false, onClose, ...rest } = props;
-    const getCssClasses = () => {
-        const cssClasses = [];
-        cssClasses.push(styles$p.modalHeader);
-        shadow && cssClasses.push(styles$p.shadow);
-        className && cssClasses.push(className);
-        return cssClasses.filter(css => css).join(' ');
-    };
-    const handleClick = () => {
-        onClose && onClose();
-    };
-    return (jsxs("div", { className: getCssClasses(), ...rest, children: [jsx("h5", { className: styles$p.modalTitle, children: children }), isDismissable &&
-                jsx(IconButton, { icon: jsx(TimesSolidIcon, {}), variant: VARIANT.text, onClick: handleClick })] }));
-};
-
 var css_248z$o = ".ModalBody-module_modalBody__D-gk2 {\n  position: relative;\n  flex: 1 1 auto;\n  padding: 0 1rem 1rem 1rem;\n  overflow-y: auto;\n}";
 var styles$o = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
 styleInject(css_248z$o);
@@ -5973,18 +5962,33 @@ const ModalFooter = (props) => {
     return (jsx("div", { className: getCssClasses(), ...rest, children: children }));
 };
 
-var css_248z$m = ".Modal-module_modal__HMxWV {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  outline: 0;\n  z-index: 1111 !important;\n  border-radius: var(--borderRadius);\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_sm__CsR6U {\n  max-width: 300px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_md__lNggx {\n  max-width: 500px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_lg__6dtT2 {\n  max-width: 1140px;\n}\n@media (min-width: 576px) {\n  .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n    max-width: 600px;\n  }\n}\n\n.Modal-module_modalDialog__fNqyK {\n  position: relative;\n  width: auto;\n  pointer-events: none;\n}\n\n.Modal-module_modalDialogCentered__sa2wv {\n  height: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.Modal-module_modalContent__9wAwB {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  pointer-events: auto;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n  border-radius: 0.3rem;\n  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);\n  outline: 0;\n  margin: 1rem;\n  max-height: 600px;\n}\n@media (min-width: 576px) {\n  .Modal-module_modalContent__9wAwB {\n    max-width: 500px;\n    margin: auto;\n  }\n}\n\n.Modal-module_fullscreen__iepGa {\n  width: 100% !important;\n  height: 100% !important;\n  max-height: 100% !important;\n  margin: 0;\n  padding: 0;\n}\n.Modal-module_fullscreen__iepGa .Modal-module_modalContent__9wAwB {\n  margin: 0;\n  height: auto;\n  min-height: 100%;\n  max-height: 100%;\n  border-radius: 0;\n  overflow: auto;\n  max-width: 100%;\n}\n@media (min-width: 320px) {\n  .Modal-module_fullscreen__iepGa {\n    max-width: 100% !important;\n  }\n}";
-var styles$m = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module_modal-dialog__U2wGf","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modalDialog":"Modal-module_modalDialog__fNqyK","modalDialogCentered":"Modal-module_modalDialogCentered__sa2wv","modalContent":"Modal-module_modalContent__9wAwB","fullscreen":"Modal-module_fullscreen__iepGa"};
+var css_248z$m = ".ModalHeader-module_modalHeader__tw-u- {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem;\n  border-top-left-radius: calc(0.3rem - 1px);\n  border-top-right-radius: calc(0.3rem - 1px);\n  border-bottom: none;\n  align-items: center;\n}\n.ModalHeader-module_modalHeader__tw-u-.ModalHeader-module_shadow__qELWb {\n  box-shadow: var(--shadow);\n}\n\n.ModalHeader-module_modalTitle__2xShH {\n  margin-bottom: 0;\n  line-height: 1.5;\n}";
+var styles$m = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","shadow":"ModalHeader-module_shadow__qELWb","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
 styleInject(css_248z$m);
 
+const ModalHeader = (props) => {
+    const { children, shadow, className, isDismissable = false, onClose, ...rest } = props;
+    const getCssClasses = () => {
+        const cssClasses = [];
+        cssClasses.push(styles$m.modalHeader);
+        shadow && cssClasses.push(styles$m.shadow);
+        className && cssClasses.push(className);
+        return cssClasses.filter(css => css).join(' ');
+    };
+    const handleClick = () => {
+        onClose && onClose();
+    };
+    return (jsxs("div", { className: getCssClasses(), ...rest, children: [jsx("h5", { className: styles$m.modalTitle, children: children }), isDismissable && jsx(IconButton, { icon: jsx(TimesSolidIcon, {}), variant: VARIANT.text, onClick: handleClick })] }));
+};
+
 const Modal = (props) => {
-    const { target = document.body, className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
+    const { target = document.body, className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false, } = props;
     const getCssClass = () => {
         const cssClasses = [];
-        cssClasses.push(styles$m.modalDialog);
-        cssClasses.push(styles$m.modalDialogCentered);
-        size && cssClasses.push(styles$m[size]);
-        fullScreen && cssClasses.push(styles$m.fullscreen);
+        cssClasses.push(styles$p.modalDialog);
+        cssClasses.push(styles$p.modalDialogCentered);
+        size && cssClasses.push(styles$p[size]);
+        fullScreen && cssClasses.push(styles$p.fullscreen);
         className && cssClasses.push(className);
         return cssClasses.filter(r => r).join(' ');
     };
@@ -5997,9 +6001,7 @@ const Modal = (props) => {
     const handleClickBackdrop = () => {
         onBackdropClick && onBackdropClick();
     };
-    return (jsxs(Fragment$1, { children: [jsx(Portal$1, { className: 'modal-root', target: target, children: jsx("div", { className: styles$m.modal, children: jsx("div", { className: getCssClass(), children: jsxs("div", { className: styles$m.modalContent, children: [header &&
-                                    jsx(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick(), children: header }), jsx(ModalBody, { children: children }), footer &&
-                                    jsx(ModalFooter, { children: footer })] }) }) }) }), jsx(Backdrop, { onClick: handleClickBackdrop, style: { zIndex: 1040 } })] }));
+    return (jsxs(Fragment$1, { children: [jsx(Portal$1, { className: "modal-root", target: target, children: jsx("div", { className: styles$p.modal, children: jsx("div", { className: getCssClass(), children: jsxs("div", { className: styles$p.modalContent, children: [header && (jsx(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick(), children: header })), jsx(ModalBody, { children: children }), footer && jsx(ModalFooter, { children: footer })] }) }) }) }), jsx(Backdrop, { onClick: handleClickBackdrop, style: { zIndex: 1040 } })] }));
 };
 
 var MODALTYPE;
@@ -6016,9 +6018,9 @@ var MODALBUTTONTYPE;
 })(MODALBUTTONTYPE || (MODALBUTTONTYPE = {}));
 
 const GlobalModal = ({ title, description, formControls, onOk, onChange, onCancel, onBackdropClick, isDismissable = false, buttons = [
-    { label: 'Cancel', type: MODALBUTTONTYPE.CANCEL, color: COLOR.secondary, variant: VARIANT.text, shadow: false },
+    { label: 'Cancel', type: MODALBUTTONTYPE.CANCEL, color: Color.secondary, variant: VARIANT.text, shadow: false },
     { label: 'Ok', type: MODALBUTTONTYPE.OK, variant: VARIANT.contained, focus: true },
-], size = SIZE.md, fullScreen = false }) => {
+], size = SIZE.md, fullScreen = false, }) => {
     // workaround for getDerivedStateFromProps
     const [myControls, setMyControls] = useState(null);
     useEffect(() => {
@@ -6055,8 +6057,7 @@ const GlobalModal = ({ title, description, formControls, onOk, onChange, onCance
         }
         button.handler && button.handler();
     };
-    return (jsxs(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, onBackdropClick: onBackdropClick, isDismissable: isDismissable, footer: jsx(Fragment$1, { children: buttons.map((button, index) => (jsx(Button, { variant: button.variant, color: button.color, autoFocus: button.autoFocus, shadow: button.shadow, onClick: () => handleClickButton(button), children: button.label }, index))) }), children: [description && jsx("div", { children: description }), modalType === MODALTYPE.FORM &&
-                jsx(Fragment$1, { children: jsx(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit, onChange: onChange }) })] }));
+    return (jsxs(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, onBackdropClick: onBackdropClick, isDismissable: isDismissable, footer: jsx(Fragment$1, { children: buttons.map((button, index) => (jsx(Button, { variant: button.variant, color: button.color, autoFocus: button.autoFocus, shadow: button.shadow, onClick: () => handleClickButton(button), children: button.label }, index))) }), children: [description && jsx("div", { children: description }), modalType === MODALTYPE.FORM && (jsx(Fragment$1, { children: jsx(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit, onChange: onChange }) }))] }));
 };
 
 class ModalService {
@@ -6220,7 +6221,7 @@ var styles$k = {"progressBarContainer":"ProgressBar-module_progressBarContainer_
 styleInject(css_248z$k);
 
 const ProgressBar = (props) => {
-    const { className, color = COLOR.primary, value, indeterminate, ...rest } = props;
+    const { className, color = Color.primary, value, indeterminate, ...rest } = props;
     const [model, setModel] = useState();
     useEffect(() => {
         document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
@@ -6254,7 +6255,7 @@ const ProgressBar = (props) => {
         }
         return `${width}%`;
     };
-    return (jsx(Tooltip, { text: !indeterminate ? model?.toString() : '', children: jsx("div", { className: getCssClasses(), ...rest, children: jsx("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }) }) }));
+    return (jsx(Tooltip, { text: !indeterminate ? model?.toString() : '', children: jsx("div", { className: getCssClasses(), ...rest, children: jsx("div", { className: getCssClassesBar(), style: { width: getStyle() }, role: "progressbar" }) }) }));
 };
 
 class SidebarItemModel {
@@ -6389,7 +6390,7 @@ var styles$f = {"snackbar":"Snackbar-module_snackbar__O5T2b","bounceIn":"Snackba
 styleInject(css_248z$f);
 
 const Snackbar = (props) => {
-    const { children, color = COLOR.dark, actionText = 'ok', onOk, ...rest } = props;
+    const { children, color = Color.dark, actionText = 'ok', onOk, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$f.snackbar);
@@ -6405,9 +6406,9 @@ const Snackbar = (props) => {
 
 class SnackbarService {
     show(message, options) {
-        const defaultOptions = { timeout: 3000, actionText: 'ok', color: COLOR.dark, target: document.body };
+        const defaultOptions = { timeout: 3000, actionText: 'ok', color: Color.dark, target: document.body };
         const mergedOptions = Object.assign(defaultOptions, options);
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             if (this.container) {
                 this.hide();
             }
@@ -6481,14 +6482,14 @@ var styles$c = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz
 styleInject(css_248z$c);
 
 const SpeedDialAction = (props) => {
-    const { icon, color = COLOR.light, onClick, className } = props;
+    const { icon, color = Color.light, onClick, className } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$c.speedDialAction);
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (jsx(IconButton, { className: getCssClasses(), icon: icon, color: color, variant: VARIANT.contained, shadow: true, onClick: onClick }));
+    return jsx(IconButton, { className: getCssClasses(), icon: icon, color: color, variant: VARIANT.contained, shadow: true, onClick: onClick });
 };
 
 const SpeedDialIcon = (props) => {
@@ -6513,10 +6514,7 @@ const StepperActions = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (jsxs("div", { className: getCssClasses(), children: [!isFirstStep &&
-                jsx(Button, { className: "mr-2", variant: VARIANT.outline, startIcon: jsx(ChevronLeftSolidIcon, {}), onClick: () => onBack && onBack(), children: "Back" }), jsxs("div", { className: "ml-auto", children: [isCompleted && showResetButton && (jsx(Button, { color: COLOR.secondary, variant: VARIANT.text, onClick: () => onReset && onReset(), children: "Reset" })), isStepOptional && (jsx(Button, { variant: VARIANT.contained, color: COLOR.primary, onClick: () => onSkip && onSkip(), children: "Skip" })), !isCompleted &&
-                        jsx(Button, { className: 'ml-2', variant: VARIANT.contained, color: COLOR.primary, endIcon: jsx(ChevronRightSolidIcon, {}), onClick: () => onNext && onNext(), children: "Next" }), isCompleted && showDoneButton &&
-                        jsx(Button, { className: 'ml-2', variant: VARIANT.contained, color: COLOR.primary, startIcon: jsx(CheckSolidIcon, {}), onClick: () => onNext && onNext(), children: "Done" })] })] }));
+    return (jsxs("div", { className: getCssClasses(), children: [!isFirstStep && (jsx(Button, { className: "mr-2", variant: VARIANT.outline, startIcon: jsx(ChevronLeftSolidIcon, {}), onClick: () => onBack && onBack(), children: "Back" })), jsxs("div", { className: "ml-auto", children: [isCompleted && showResetButton && (jsx(Button, { color: Color.secondary, variant: VARIANT.text, onClick: () => onReset && onReset(), children: "Reset" })), isStepOptional && (jsx(Button, { variant: VARIANT.contained, color: Color.primary, onClick: () => onSkip && onSkip(), children: "Skip" })), !isCompleted && (jsx(Button, { className: "ml-2", variant: VARIANT.contained, color: Color.primary, endIcon: jsx(ChevronRightSolidIcon, {}), onClick: () => onNext && onNext(), children: "Next" })), isCompleted && showDoneButton && (jsx(Button, { className: "ml-2", variant: VARIANT.contained, color: Color.primary, startIcon: jsx(CheckSolidIcon, {}), onClick: () => onNext && onNext(), children: "Done" }))] })] }));
 };
 
 const StepPanel = (props) => {
@@ -6554,7 +6552,7 @@ var styles$8 = {"dot":"Dot-module_dot__w59yb","isActive":"Dot-module_isActive__V
 styleInject(css_248z$8);
 
 const Dot = (props) => {
-    const { className, color = COLOR.primary, isActive, ...rest } = props;
+    const { className, color = Color.primary, isActive, ...rest } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$8.dot);
@@ -6563,7 +6561,7 @@ const Dot = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (jsx("div", { className: getCssClasses(), ...rest }));
+    return jsx("div", { className: getCssClasses(), ...rest });
 };
 
 const Stepper = (props) => {
@@ -6713,11 +6711,7 @@ const Step = (props) => {
         isActive && cssClasses.push(styles$6.stepValue['isActive']);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (jsxs("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick, children: [jsxs("div", { className: getCssClassesStep(), children: [jsx(Icon, { className: styles$6.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary, children: jsx(CircleSolidIcon, {}) }), jsx("div", { className: getCssClassesStepValue(), children: showProgressCheckIcon && isActive && isDone ?
-                            jsx(Icon, { children: jsx(CheckSolidIcon, {}) })
-                            :
-                                jsx(Typography, { children: index + 1 }) })] }), label && showLabel &&
-                jsx(Typography, { className: "flex-shrink-0", children: label })] }));
+    return (jsxs("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick, children: [jsxs("div", { className: getCssClassesStep(), children: [jsx(Icon, { className: styles$6.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? Color.primary : Color.secondary, children: jsx(CircleSolidIcon, {}) }), jsx("div", { className: getCssClassesStepValue(), children: showProgressCheckIcon && isActive && isDone ? (jsx(Icon, { children: jsx(CheckSolidIcon, {}) })) : (jsx(Typography, { children: index + 1 })) })] }), label && showLabel && jsx(Typography, { className: "flex-shrink-0", children: label })] }));
 };
 
 var css_248z$5 = ":root {\n  --table-bg: transparent;\n  --table-accent-bg: transparent;\n  --table-striped-color: #212529;\n  --table-striped-bg: rgba(0, 0, 0, 0.05);\n  --table-active-color: #212529;\n  --table-active-bg: rgba(0, 0, 0, 0.1);\n  --table-hover-color: #212529;\n  --table-hover-bg: rgba(0, 0, 0, 0.075);\n}\n\n.Table-module_tableResponsive__ykttB {\n  overflow-x: auto;\n}\n\n.Table-module_table__DHKNv {\n  display: table;\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0px;\n  min-width: 650px;\n}\n.Table-module_table__DHKNv thead {\n  display: table-header-group;\n}\n.Table-module_table__DHKNv tbody {\n  display: table-row-group;\n}\n.Table-module_table__DHKNv tr {\n  color: inherit;\n  display: table-row;\n  vertical-align: middle;\n  outline: 0px;\n}\n.Table-module_table__DHKNv th {\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgb(224, 224, 224);\n  text-align: left;\n  padding: 16px;\n  color: rgba(0, 0, 0, 0.87);\n  border-collapse: collapse;\n  border-spacing: 0px;\n}\n.Table-module_table__DHKNv td {\n  font-size: 0.875rem;\n  line-height: 1.43;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgb(224, 224, 224);\n  padding: 16px;\n  color: rgba(0, 0, 0, 0.87);\n  flex-direction: row-reverse;\n}\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n  background-color: var(--table-hover-bg);\n  color: var(--table-hover-color);\n}";
@@ -6773,7 +6767,7 @@ var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primar
 styleInject(css_248z$4);
 
 const TabIndicator = (props) => {
-    const { color = COLOR.primary, width, amount, index } = props;
+    const { color = Color.primary, width, amount, index } = props;
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$4.tabIndicator);
@@ -6782,7 +6776,7 @@ const TabIndicator = (props) => {
     };
     return (jsx("span", { className: getCssClasses(), style: {
             width: width,
-            left: `calc(calc(100% / ${amount}) * ${index})`
+            left: `calc(calc(100% / ${amount}) * ${index})`,
         } }));
 };
 
@@ -6791,14 +6785,14 @@ var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
 styleInject(css_248z$3);
 
 const Tabs = (props) => {
-    const { children, className, fixed = false, color, indicatorColor = COLOR.accent, value, onChange } = props;
+    const { children, className, fixed = false, color, indicatorColor = Color.accent, value, onChange } = props;
     const [selectedValue, setSelectedValue] = useState('');
     const [selectedIndex, setSelectedIndex] = useState(0);
-    const tabContext = ({
+    const tabContext = {
         selectedValue: selectedValue,
         setSelectedValue: setSelectedValue,
-        fixed: fixed
-    });
+        fixed: fixed,
+    };
     const prevSelectedValueRef = useRef();
     useEffect(() => {
         if (value !== undefined && value !== prevSelectedValueRef.current) {
@@ -6822,8 +6816,7 @@ const Tabs = (props) => {
         className && cssClasses.push(className);
         return cssClasses.filter(css => css).join(' ');
     };
-    return (jsx(ButtonContext.Provider, { value: { color: color || COLOR.light }, children: jsx(TabContext.Provider, { value: tabContext, children: jsxs("div", { className: getCssClasses(), children: [children, children &&
-                        jsx(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length })] }) }) }));
+    return (jsx(ButtonContext.Provider, { value: { color: color || Color.light }, children: jsx(TabContext.Provider, { value: tabContext, children: jsxs("div", { className: getCssClasses(), children: [children, children && (jsx(TabIndicator, { color: indicatorColor, width: 100 / React.Children.toArray(children).length + '%', index: selectedIndex, amount: React.Children.toArray(children).length }))] }) }) }));
 };
 
 var css_248z$2 = ".Tab-module_tab__Q8w1f {\n  padding: 6px 12px;\n  overflow: hidden;\n  position: relative;\n  font-size: 0.875rem;\n  min-width: 72px;\n  box-sizing: border-box;\n  min-height: 48px;\n  text-align: center;\n  font-weight: 500;\n  line-height: 1.75;\n  white-space: normal;\n  letter-spacing: 0.02857em;\n  text-transform: uppercase;\n  border-radius: 0;\n  flex-grow: 1;\n  flex-basis: 0;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
@@ -7264,4 +7257,4 @@ String.prototype.capitalize = function () {
     return this.charAt(0).toUpperCase() + this.slice(1);
 };
 
-export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Portal$1 as Portal, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useWindowSize };
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Color, Column, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Portal$1 as Portal, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useWindowSize };