@fattureincloud/fic-design-system 0.3.20 → 0.3.23

package/dist/index.esm.js

@@ -11,6 +11,7 @@ import Async from 'react-select/async';
 import AsyncCreatable from 'react-select/async-creatable';
 import Creatable from 'react-select/creatable';
 import { faTimes as faTimes$1, faSearch, faEllipsisH as faEllipsisH$1 } from '@fortawesome/pro-light-svg-icons';
+import { isMacOs } from 'react-device-detect';
 import ReactModal from 'react-modal';
 import range from 'lodash/range';
 import _ from 'lodash';
@@ -1563,6 +1564,11 @@ var inputTextPalette = {
     },
 };
 
+var useSelectValue = function (initialValue) { return useState(initialValue); };
+var useSelectMultiValues = function (initialValue) {
+    return useState(initialValue);
+};
+
 var ClearIndicator = function (_a) {
     var isDisabled = _a.isDisabled, clearValue = _a.clearValue;
     var onClick = useCallback(function () { return !isDisabled && clearValue(); }, [clearValue, isDisabled]);
@@ -1573,7 +1579,7 @@ var templateObject_1$w;
 
 var Control = function (_a) {
     var onMouseDown = _a.innerProps.onMouseDown, children = _a.children;
-    return (React.createElement(Wrapper$7, { onMouseDown: onMouseDown }, children));
+    return React.createElement(Wrapper$7, { onMouseDown: onMouseDown }, children);
 };
 var Wrapper$7 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: initial;\n\n  cursor: default;\n"], ["\n  display: flex;\n  flex-wrap: initial;\n\n  cursor: default;\n"])));
 var templateObject_1$x;
@@ -1613,11 +1619,12 @@ var templateObject_1$z, templateObject_2$e;
 var MenuList = function (props) {
     var setValue = props.setValue, getValue = props.getValue, selectProps = props.selectProps;
     var children = props.children, rest = __rest(props, ["children"]);
-    var footerActions = selectProps.footerActions;
-    var List = components$1.MenuList;
+    var footerActions = selectProps === null || selectProps === void 0 ? void 0 : selectProps.footerActions;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     var triggerClose = useCallback(function () { return setValue(getValue(), 'select-option'); }, [getValue, setValue]);
     return (React.createElement(Wrapper$a, null,
-        React.createElement(List, __assign({}, rest),
+        React.createElement(components$1.MenuList, __assign({}, rest),
             children,
             footerActions && React.createElement(FooterActions, { actions: footerActions, triggerClose: triggerClose }))));
 };
@@ -1638,7 +1645,7 @@ var templateObject_1$B;
 
 var Placeholder = function (_a) {
     var children = _a.children;
-    return React.createElement(Wrapper$c, null, children);
+    return (React.createElement(Wrapper$c, null, children));
 };
 var Wrapper$c = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  font-size: 14px;\n  color: ", ";\n"], ["\n  font-size: 14px;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
@@ -1646,14 +1653,14 @@ var Wrapper$c = styled.div(templateObject_1$C || (templateObject_1$C = __makeTem
 });
 var templateObject_1$C;
 
-var customComponents = {
+var getCustomComponents = function () { return ({
     Option: Option,
     DropdownIndicator: DropdownIndicator,
     ClearIndicator: ClearIndicator,
     Placeholder: Placeholder,
     Control: Control,
     MenuList: MenuList,
-};
+}); };
 
 var getSelectStyles = function (_a) {
     var theme = _a.theme, isDisabled = _a.isDisabled, _b = _a.status, status = _b === void 0 ? 'normal' : _b;
@@ -1669,17 +1676,21 @@ var useSelectThemeStyles = function (_a) {
     return {
         singleValue: function (provided) { return (__assign(__assign({}, provided), { color: color, fontSize: '14px' })); },
         noOptionsMessage: function (base) { return (__assign(__assign({}, base), { fontSize: '14px' })); },
+        valueContainer: function (base) { return (__assign(__assign({}, base), { padding: '0 8px' })); },
     };
 };
 
-var SelectWrapper = styled.span.attrs(getSelectStyles)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  & > div:first-child {\n    ", ";\n    & > div:nth-child(2) {\n      height: ", "px;\n      min-height: ", "px;\n    }\n  }\n"], ["\n  & > div:first-child {\n    ", ";\n    & > div:nth-child(2) {\n      height: ", "px;\n      min-height: ", "px;\n    }\n  }\n"])), boxedInputWrapperStyle, function (_a) {
+var selectBootstrapFixes = css(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  input {\n    margin-bottom: 0 !important;\n    box-shadow: none !important;\n  }\n"], ["\n  input {\n    margin-bottom: 0 !important;\n    box-shadow: none !important;\n  }\n"])));
+var templateObject_1$D;
+
+var SelectWrapper = styled.span.attrs(getSelectStyles)(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  & > div:first-child {\n    ", ";\n    & > div:nth-child(2) {\n      height: ", "px;\n      min-height: ", "px;\n    }\n  }\n\n  ", "\n"], ["\n  & > div:first-child {\n    ", ";\n    & > div:nth-child(2) {\n      height: ", "px;\n      min-height: ", "px;\n    }\n  }\n\n  ", "\n"])), boxedInputWrapperStyle, function (_a) {
     var inputSize = _a.inputSize;
     return (inputSize === 'large' ? 40 : 30);
 }, function (_a) {
     var inputSize = _a.inputSize;
     return (inputSize === 'large' ? 40 : 30);
-});
-var templateObject_1$D;
+}, selectBootstrapFixes);
+var templateObject_1$E;
 
 var SelectsWrapper = function (_a) {
     var children = _a.children, rest = __rest(_a, ["children"]);
@@ -1692,30 +1703,30 @@ var SelectsWrapper = function (_a) {
 var Select = function (props) {
     var _a = props.status, status = _a === void 0 ? 'normal' : _a, components = props.components;
     var styles = useSelectThemeStyles({ status: status });
-    var customComponents$1 = useMemo(function () { return (__assign(__assign({}, customComponents), components)); }, [components]);
-    return (React.createElement(SelectsWrapper, null,
-        React.createElement(ReactSelect, __assign({}, props, { components: customComponents$1, backspaceRemoves: true, styles: styles }))));
+    var customComponents = useMemo(function () { return (__assign(__assign({}, getCustomComponents()), components)); }, [components]);
+    return (React.createElement(SelectsWrapper, __assign({}, props),
+        React.createElement(ReactSelect, __assign({}, props, { components: customComponents, backspaceRemoves: true, styles: styles }))));
 };
 var CreatableSelect = function (props) {
     var _a = props.status, status = _a === void 0 ? 'normal' : _a, components = props.components;
     var styles = useSelectThemeStyles({ status: status });
-    var customComponents$1 = useMemo(function () { return (__assign(__assign({}, customComponents), components)); }, [components]);
-    return (React.createElement(SelectsWrapper, null,
-        React.createElement(Creatable, __assign({}, props, { components: customComponents$1, backspaceRemoves: true, styles: styles }))));
+    var customComponents = useMemo(function () { return (__assign(__assign({}, getCustomComponents()), components)); }, [components]);
+    return (React.createElement(SelectsWrapper, __assign({}, props),
+        React.createElement(Creatable, __assign({}, props, { components: customComponents, backspaceRemoves: true, styles: styles }))));
 };
 var AsyncSelect = function (props) {
     var _a = props.status, status = _a === void 0 ? 'normal' : _a, components = props.components;
     var styles = useSelectThemeStyles({ status: status });
-    var customComponents$1 = useMemo(function () { return (__assign(__assign({}, customComponents), components)); }, [components]);
-    return (React.createElement(SelectsWrapper, null,
-        React.createElement(Async, __assign({}, props, { components: customComponents$1, backspaceRemoves: true, styles: styles }))));
+    var customComponents = useMemo(function () { return (__assign(__assign({}, getCustomComponents()), components)); }, [components]);
+    return (React.createElement(SelectsWrapper, __assign({}, props),
+        React.createElement(Async, __assign({}, props, { components: customComponents, backspaceRemoves: true, styles: styles }))));
 };
 var AsyncCreatableSelect = function (props) {
     var _a = props.status, status = _a === void 0 ? 'normal' : _a, components = props.components;
     var styles = useSelectThemeStyles({ status: status });
-    var customComponents$1 = useMemo(function () { return (__assign(__assign({}, customComponents), components)); }, [components]);
-    return (React.createElement(SelectsWrapper, null,
-        React.createElement(AsyncCreatable, __assign({}, props, { components: customComponents$1, backspaceRemoves: true, styles: styles }))));
+    var customComponents = useMemo(function () { return (__assign(__assign({}, getCustomComponents()), components)); }, [components]);
+    return (React.createElement(SelectsWrapper, __assign({}, props),
+        React.createElement(AsyncCreatable, __assign({}, props, { components: customComponents, backspaceRemoves: true, styles: styles }))));
 };
 
 var selectPalette = {
@@ -1763,20 +1774,20 @@ var CharCounter = function (_a) {
         length,
         maxLength && "/" + maxLength));
 };
-var Wrapper$d = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n  text-align: right;\n  color: ", ";\n  padding: 0.3em;\n"], ["\n  text-align: right;\n  color: ", ";\n  padding: 0.3em;\n"])), function (_a) {
+var Wrapper$d = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  text-align: right;\n  color: ", ";\n  padding: 0.3em;\n"], ["\n  text-align: right;\n  color: ", ";\n  padding: 0.3em;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[500];
 });
-var templateObject_1$E;
-
-var inputTextHTMLTextAreaBootstrapFixes = css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  font-weight: 400 !important;\n  margin: 0 !important;\n  font-size: 14px !important;\n  line-height: normal !important;\n  vertical-align: baseline !important;\n  background: transparent !important;\n  box-shadow: none !important;\n  border: 0 !important;\n  display: block !important;\n  color: black !important;\n  padding: 8px 0 0 8px !important;\n  height: 100% !important;\n"], ["\n  font-weight: 400 !important;\n  margin: 0 !important;\n  font-size: 14px !important;\n  line-height: normal !important;\n  vertical-align: baseline !important;\n  background: transparent !important;\n  box-shadow: none !important;\n  border: 0 !important;\n  display: block !important;\n  color: black !important;\n  padding: 8px 0 0 8px !important;\n  height: 100% !important;\n"])));
 var templateObject_1$F;
 
-var StyledTextArea = styled.textarea(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  resize: none;\n\n  margin: 0;\n  background: transparent;\n  font-size: 14px;\n  font-family: inherit;\n  border: 0;\n  padding: 8px 0 0 8px;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  outline: none;\n\n  /* Bootstrap Fixes */\n  ", "\n"], ["\n  resize: none;\n\n  margin: 0;\n  background: transparent;\n  font-size: 14px;\n  font-family: inherit;\n  border: 0;\n  padding: 8px 0 0 8px;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  outline: none;\n\n  /* Bootstrap Fixes */\n  ", "\n"])), function (_a) {
+var inputTextHTMLTextAreaBootstrapFixes = css(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  font-weight: 400 !important;\n  margin: 0 !important;\n  font-size: 14px !important;\n  line-height: normal !important;\n  vertical-align: baseline !important;\n  background: transparent !important;\n  box-shadow: none !important;\n  border: 0 !important;\n  display: block !important;\n  color: black !important;\n  padding: 8px 0 0 8px !important;\n  height: 100% !important;\n"], ["\n  font-weight: 400 !important;\n  margin: 0 !important;\n  font-size: 14px !important;\n  line-height: normal !important;\n  vertical-align: baseline !important;\n  background: transparent !important;\n  box-shadow: none !important;\n  border: 0 !important;\n  display: block !important;\n  color: black !important;\n  padding: 8px 0 0 8px !important;\n  height: 100% !important;\n"])));
+var templateObject_1$G;
+
+var StyledTextArea = styled.textarea(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  resize: none;\n\n  margin: 0;\n  background: transparent;\n  font-size: 14px;\n  font-family: inherit;\n  border: 0;\n  padding: 8px 0 0 8px;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  outline: none;\n\n  /* Bootstrap Fixes */\n  ", "\n"], ["\n  resize: none;\n\n  margin: 0;\n  background: transparent;\n  font-size: 14px;\n  font-family: inherit;\n  border: 0;\n  padding: 8px 0 0 8px;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  outline: none;\n\n  /* Bootstrap Fixes */\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[200];
 }, inputTextHTMLTextAreaBootstrapFixes);
-var templateObject_1$G;
+var templateObject_1$H;
 
 var getTextAreaStyles = function (_a) {
     var theme = _a.theme, isDisabled = _a.isDisabled, _b = _a.status, status = _b === void 0 ? 'normal' : _b;
@@ -1806,7 +1817,7 @@ var TextAreaElement = function (_a) {
             React.createElement(StyledTextArea, { ref: ref, autoFocus: autoFocus, value: actualValue, placeholder: placeholder, disabled: isDisabled, name: name, onChange: handleChange, onFocus: onFocus, onBlur: handleBlur, onKeyPress: onKeyPress, onKeyDown: onKeyDown, onKeyUp: onKeyUp }),
             (showCounter || maxLength) && React.createElement(CharCounter, { length: actualValue.length, maxLength: maxLength }))));
 };
-var FlexWrapper = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-flow: column;\n  height: 100%;\n"])));
+var FlexWrapper = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-flow: column;\n  height: 100%;\n"])));
 var Wrapper$e = styled.div.attrs(getTextAreaStyles)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  ", ";\n\n  resize: ", ";\n  overflow: hidden;\n\n  min-height: 3em;\n\n  height: ", ";\n"], ["\n  ", ";\n\n  resize: ", ";\n  overflow: hidden;\n\n  min-height: 3em;\n\n  height: ", ";\n"])), boxedInputWrapperStyle, function (_a) {
     var isResizable = _a.isResizable;
     return (isResizable ? 'vertical' : 'none');
@@ -1814,7 +1825,7 @@ var Wrapper$e = styled.div.attrs(getTextAreaStyles)(templateObject_2$f || (templ
     var initialHeight = _a.initialHeight;
     return initialHeight;
 });
-var templateObject_1$H, templateObject_2$f;
+var templateObject_1$I, templateObject_2$f;
 
 var TextArea = function (props) {
     var label = props.label, className = props.className, inputProps = __rest(props, ["label", "className"]);
@@ -1936,7 +1947,7 @@ var ItemElement = function (props) {
         title ? React.createElement(Title$1, null, title) : React.createElement(Placeholder$1, null, placeholder),
         action && React.createElement(RightElement, null, action)));
 };
-var Title$1 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  flex-grow: 1;\n"], ["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  flex-grow: 1;\n"])));
+var Title$1 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  flex-grow: 1;\n"], ["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  flex-grow: 1;\n"])));
 var Placeholder$1 = styled(Title$1)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[500];
@@ -1964,7 +1975,7 @@ var SingleElement = styled.div(templateObject_7$3 || (templateObject_7$3 = __mak
     return showActionOnHover
         ? css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n          ", " {\n            display: none;\n          }\n\n          &:focus {\n            ", " {\n              display: inherit;\n            }\n          }\n        "], ["\n          ", " {\n            display: none;\n          }\n\n          &:focus {\n            ", " {\n              display: inherit;\n            }\n          }\n        "])), RightElement, RightElement) : css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject([""], [""])));
 });
-var templateObject_1$I, templateObject_2$g, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$3, templateObject_7$3;
+var templateObject_1$J, templateObject_2$g, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$3, templateObject_7$3;
 
 var TitleElement = function (props) {
     var noResults = props.noResults, title = props.title;
@@ -1976,7 +1987,7 @@ var TitleElementWrapper = styled.div(templateObject_2$h || (templateObject_2$h =
     ";\n  height: 32px;\n  padding-left: 8px;\n  line-height: 32px;\n  font-size: 11px;\n\n  color: ", ";\n  font-weight: 500;\n  cursor: initial;\n"])), function (_a) {
     var noResults = _a.noResults, theme = _a.theme;
     return noResults === true
-        ? css(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n          background-color: ", ";\n        "], ["\n          background-color: ", ";\n        "])), theme.palette.grey[50]) : undefined;
+        ? css(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n          background-color: ", ";\n        "], ["\n          background-color: ", ";\n        "])), theme.palette.grey[50]) : undefined;
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[700];
@@ -1985,7 +1996,7 @@ var NoResultsWrapper = styled.span(templateObject_3$a || (templateObject_3$a = _
     var theme = _a.theme;
     return theme.palette.grey[700];
 });
-var templateObject_1$J, templateObject_2$h, templateObject_3$a;
+var templateObject_1$K, templateObject_2$h, templateObject_3$a;
 
 var GroupElement = function (_a) {
     var index = _a.index, items = _a.items, title = _a.title, rest = __rest(_a, ["index", "items", "title"]);
@@ -2041,22 +2052,22 @@ var GroupedList = function (props) {
         return (React.createElement(GroupElement, __assign({ key: index }, group, { mouseBlockedProps: mouseBlockedProps, navigable: navigable, index: oldI, wrapperRef: wrapperRef, placeholder: placeholder })));
     })));
 };
-var Wrapper$f = styled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var templateObject_1$K;
+var Wrapper$f = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+var templateObject_1$L;
 
 var Label$2 = styled.span(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n  display: inline-block;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px;\n  text-align: left;\n  margin-left: 8px;\n  vertical-align: top;\n  cursor: pointer;\n  ", "\n"], ["\n  display: inline-block;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px;\n  text-align: left;\n  margin-left: 8px;\n  vertical-align: top;\n  cursor: pointer;\n  ",
     "\n"])), function (_a) {
     var isDisabled = _a.isDisabled, palette = _a.theme.palette;
-    return isDisabled && css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n      color: ", ";\n      cursor: not-allowed;\n    "], ["\n      color: ", ";\n      cursor: not-allowed;\n    "])), palette.grey[500]);
+    return isDisabled && css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n      color: ", ";\n      cursor: not-allowed;\n    "], ["\n      color: ", ";\n      cursor: not-allowed;\n    "])), palette.grey[500]);
 });
-var templateObject_1$L, templateObject_2$i;
+var templateObject_1$M, templateObject_2$i;
 
 var Radio = styled.span(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  display: inline-block;\n  border-radius: 8px;\n  width: 16px;\n  height: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  ", "\n  ", "\n  ", "\n"], ["\n  display: inline-block;\n  border-radius: 8px;\n  width: 16px;\n  height: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  ",
     "\n  ",
     "\n  ",
     "\n"])), function (_a) {
     var theme = _a.theme;
-    return css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "], ["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), theme.palette.white[100], theme.palette.grey[500]);
+    return css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "], ["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), theme.palette.white[100], theme.palette.grey[500]);
 }, function (_a) {
     var isChecked = _a.isChecked, theme = _a.theme;
     return isChecked && css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n      border: 5px solid ", ";\n    "], ["\n      border: 5px solid ", ";\n    "])), theme.palette.blue[500]);
@@ -2065,7 +2076,7 @@ var Radio = styled.span(templateObject_5$4 || (templateObject_5$4 = __makeTempla
     return isDisabled && css(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n      cursor: not-allowed;\n      ", "\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n      cursor: not-allowed;\n      ",
         "\n    "])), theme.palette.grey[100], theme.palette.grey[100], isChecked && css(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n        background-color: ", ";\n        border-color: ", ";\n      "], ["\n        background-color: ", ";\n        border-color: ", ";\n      "])), theme.palette.white[100], theme.palette.grey['50']));
 });
-var templateObject_1$M, templateObject_2$j, templateObject_3$b, templateObject_4$6, templateObject_5$4;
+var templateObject_1$N, templateObject_2$j, templateObject_3$b, templateObject_4$6, templateObject_5$4;
 
 var WrapperRadioButton = function (props) {
     var isChecked = props.isChecked, isDisabled = props.isDisabled, label = props.label;
@@ -2075,12 +2086,12 @@ var WrapperRadioButton = function (props) {
 };
 var Wrapper$g = styled(WrapperRadioButton)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  & + & {\n    margin-top: ", "px;\n  }\n  ", "\n"], ["\n  & + & {\n    margin-top: ", "px;\n  }\n  ",
     "\n"])), function (props) { return (props.optionsSpacing ? props.optionsSpacing : 0); }, function (props) {
-    return props.inline && css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n      display: inline-block;\n      vertical-align: top;\n      &:not(:first-child) {\n        margin-left: 25px;\n      }\n    "], ["\n      display: inline-block;\n      vertical-align: top;\n      &:not(:first-child) {\n        margin-left: 25px;\n      }\n    "])));
+    return props.inline && css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n      display: inline-block;\n      vertical-align: top;\n      &:not(:first-child) {\n        margin-left: 25px;\n      }\n    "], ["\n      display: inline-block;\n      vertical-align: top;\n      &:not(:first-child) {\n        margin-left: 25px;\n      }\n    "])));
 });
 var RadioButton = function (props) {
     return React.createElement(Wrapper$g, __assign({}, props));
 };
-var templateObject_1$N, templateObject_2$k;
+var templateObject_1$O, templateObject_2$k;
 
 var RadioButtonGroup = function (props) { return (React.createElement("div", { style: props.style }, props.options.map(function (o) { return (React.createElement(RadioButton, { key: o.key, label: o.label, onClick: function () {
         if (props.onClick) {
@@ -2091,7 +2102,7 @@ var RadioButtonGroup = function (props) { return (React.createElement("div", { s
 var colorSetter = function (type, theme) {
     switch (type) {
         case 'standard': {
-            return css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.grey[100], theme.palette.black[100]);
+            return css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.grey[100], theme.palette.black[100]);
         }
         case 'info': {
             return css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.blue[50], theme.palette.blue[500]);
@@ -2136,7 +2147,7 @@ var StyledCloseIcon = styled(Icon)(templateObject_16 || (templateObject_16 = __m
     var palette = _a.theme.palette;
     return palette.blue[700];
 });
-var templateObject_1$O, templateObject_2$l, templateObject_3$c, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$2, templateObject_9$1, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+var templateObject_1$P, templateObject_2$l, templateObject_3$c, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$2, templateObject_9$1, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
 
 var defaultCloseIcon = {
     icon: faTimes,
@@ -2160,7 +2171,7 @@ var InlineMessage = function (props) {
 
 var renderTrigger = function () { return (React.createElement(IconWrapper, { tabIndex: 0 },
     React.createElement(Icon, { icon: faEllipsisH, fixedWidth: true }))); };
-var IconWrapper = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var IconWrapper = styled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var triggerStyles = {
     margin: 'auto',
     width: '100%',
@@ -2173,16 +2184,16 @@ var SidebarItemDropdown = function (_a) {
     var className = _a.className, content = _a.content, _b = _a.forceOpen, forceOpen = _b === void 0 ? false : _b;
     return (React.createElement(Dropdown, { triggerStyles: triggerStyles, className: className, placement: 'right-start', renderTrigger: renderTrigger, content: content, forceOpen: forceOpen }));
 };
-var templateObject_1$P;
+var templateObject_1$Q;
 
-var SidebarItemCaret = styled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n  transition: transform 250ms ease;\n  transform: ", ";\n\n  visibility: ", ";\n"], ["\n  transition: transform 250ms ease;\n  transform: ", ";\n\n  visibility: ", ";\n"])), function (_a) {
+var SidebarItemCaret = styled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  transition: transform 250ms ease;\n  transform: ", ";\n\n  visibility: ", ";\n"], ["\n  transition: transform 250ms ease;\n  transform: ", ";\n\n  visibility: ", ";\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? 'rotate(90deg)' : 'rotate(0deg)');
 }, function (_a) {
     var isVisible = _a.isVisible;
     return (isVisible ? 'visible' : 'hidden');
 });
-var templateObject_1$Q;
+var templateObject_1$R;
 
 var getSidebarItemStyles = function (_a) {
     var isActive = _a.isActive, isDisabled = _a.isDisabled, theme = _a.theme;
@@ -2193,20 +2204,26 @@ var getSidebarItemStyles = function (_a) {
 var sidebarItemHeight = 44;
 var SidebarItem = function (props) {
     var _a;
-    var _b = props.caretVisible, caretVisible = _b === void 0 ? false : _b, className = props.className, dropdownContent = props.dropdownContent, icon = props.icon, _c = props.isActive, isActive = _c === void 0 ? false : _c, _d = props.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = props.isHidden, isHidden = _e === void 0 ? false : _e, _f = props.isOpen, isOpen = _f === void 0 ? false : _f, onClick = props.onClick, title = props.title, forceOpenDropdown = props.forceOpenDropdown, customProps = props.customProps;
+    var _b = props.caretVisible, caretVisible = _b === void 0 ? false : _b, className = props.className, dropdownContent = props.dropdownContent, icon = props.icon, _c = props.isActive, isActive = _c === void 0 ? false : _c, _d = props.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = props.isHidden, isHidden = _e === void 0 ? false : _e, _f = props.isOpen, isOpen = _f === void 0 ? false : _f, onClick = props.onClick, title = props.title, forceOpenDropdown = props.forceOpenDropdown, customProps = props.customProps, href = props.href;
+    var handleClick = useCallback(function (e) {
+        if (onClick && ((isMacOs && !e.metaKey) || (!isMacOs && !e.ctrlKey))) {
+            e.preventDefault();
+            onClick(e);
+        }
+    }, [onClick]);
     if (isHidden) {
         return null;
     }
     var content = ((_a = customProps === null || customProps === void 0 ? void 0 : customProps.renderContent) === null || _a === void 0 ? void 0 : _a.call(customProps, props)) || title;
-    return (React.createElement(SidebarItemWrapper, { customColor: customProps === null || customProps === void 0 ? void 0 : customProps.color, isActive: isActive, isDisabled: isDisabled, className: className, onClick: onClick },
+    return (React.createElement(SidebarItemWrapper, { href: href, customColor: customProps === null || customProps === void 0 ? void 0 : customProps.color, isActive: isActive, isDisabled: isDisabled, className: className, onClick: handleClick },
         React.createElement(SidebarItemCaret, { isOpen: isOpen, isVisible: caretVisible },
             React.createElement(Icon, { icon: faCaretRight })),
         icon ? React.createElement(Icon, __assign({}, icon, { fixedWidth: true })) : React.createElement(NoIcon, { icon: faCircle, fixedWidth: true }),
         React.createElement(Title$2, null, content),
         !isDisabled && dropdownContent && React.createElement(Dropdown$1, { content: dropdownContent, forceOpen: forceOpenDropdown })));
 };
-var Dropdown$1 = styled(SidebarItemDropdown)(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n  width: 1.5em;\n  height: 1.5em;\n\n  border-radius: 2px;\n"], ["\n  width: 1.5em;\n  height: 1.5em;\n\n  border-radius: 2px;\n"])));
-var SidebarItemWrapper = styled.div.attrs(getSidebarItemStyles)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  height: ", "px;\n  padding: 0 8px;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 8px;\n\n  cursor: pointer;\n\n  transition: background-color 250ms ease;\n\n  color: ", ";\n  background-color: ", ";\n\n  ", " {\n    display: none;\n  }\n\n  &:hover,\n  &:focus-within {\n    color: ", ";\n    background-color: ", ";\n\n    ", " {\n      display: inherit;\n\n      &:hover {\n        background: ", ";\n      }\n\n      &:focus-within {\n        background: ", ";\n      }\n    }\n  }\n"], ["\n  height: ", "px;\n  padding: 0 8px;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 8px;\n\n  cursor: pointer;\n\n  transition: background-color 250ms ease;\n\n  color: ", ";\n  background-color: ", ";\n\n  ", " {\n    display: none;\n  }\n\n  &:hover,\n  &:focus-within {\n    color: ", ";\n    background-color: ", ";\n\n    ", " {\n      display: inherit;\n\n      &:hover {\n        background: ", ";\n      }\n\n      &:focus-within {\n        background: ", ";\n      }\n    }\n  }\n"])), sidebarItemHeight, function (_a) {
+var Dropdown$1 = styled(SidebarItemDropdown)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  width: 1.5em;\n  height: 1.5em;\n\n  border-radius: 2px;\n"], ["\n  width: 1.5em;\n  height: 1.5em;\n\n  border-radius: 2px;\n"])));
+var SidebarItemWrapper = styled.a.attrs(getSidebarItemStyles)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  height: ", "px;\n  padding: 0 8px;\n  text-decoration: none;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 8px;\n\n  cursor: pointer;\n\n  transition: background-color 250ms ease;\n\n  color: ", ";\n  background-color: ", ";\n\n  ", " {\n    display: none;\n  }\n\n  &:hover,\n  &:focus-within {\n    text-decoration: none;\n    color: ", ";\n    background-color: ", ";\n\n    ", " {\n      display: inherit;\n\n      &:hover {\n        background: ", ";\n      }\n\n      &:focus-within {\n        background: ", ";\n      }\n    }\n  }\n"], ["\n  height: ", "px;\n  padding: 0 8px;\n  text-decoration: none;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 8px;\n\n  cursor: pointer;\n\n  transition: background-color 250ms ease;\n\n  color: ", ";\n  background-color: ", ";\n\n  ", " {\n    display: none;\n  }\n\n  &:hover,\n  &:focus-within {\n    text-decoration: none;\n    color: ", ";\n    background-color: ", ";\n\n    ", " {\n      display: inherit;\n\n      &:hover {\n        background: ", ";\n      }\n\n      &:focus-within {\n        background: ", ";\n      }\n    }\n  }\n"])), sidebarItemHeight, function (_a) {
     var color = _a.color, customColor = _a.customColor;
     return customColor || color;
 }, function (_a) {
@@ -2227,7 +2244,7 @@ var SidebarItemWrapper = styled.div.attrs(getSidebarItemStyles)(templateObject_2
 });
 var Title$2 = styled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  flex-grow: 1;\n\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  flex-grow: 1;\n\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
 var NoIcon = styled(Icon)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  visibility: hidden;\n"], ["\n  visibility: hidden;\n"])));
-var templateObject_1$R, templateObject_2$m, templateObject_3$d, templateObject_4$8;
+var templateObject_1$S, templateObject_2$m, templateObject_3$d, templateObject_4$8;
 
 var sidebarItemPalette = {
     normal: {
@@ -2261,14 +2278,14 @@ var getMicroTagStyles = function (_a) {
     return theme.components.microTag[type];
 };
 
-var MicroTagBody = styled.div.attrs(getMicroTagStyles)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-block;\n  padding: 0 4px;\n  border-radius: 4px;\n  text-transform: uppercase;\n\n  color: ", ";\n  background-color: ", ";\n"], ["\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-block;\n  padding: 0 4px;\n  border-radius: 4px;\n  text-transform: uppercase;\n\n  color: ", ";\n  background-color: ", ";\n"])), function (_a) {
+var MicroTagBody = styled.div.attrs(getMicroTagStyles)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-block;\n  padding: 0 4px;\n  border-radius: 4px;\n  text-transform: uppercase;\n\n  color: ", ";\n  background-color: ", ";\n"], ["\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-block;\n  padding: 0 4px;\n  border-radius: 4px;\n  text-transform: uppercase;\n\n  color: ", ";\n  background-color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 }, function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 });
-var templateObject_1$S;
+var templateObject_1$T;
 
 var MicroTag = function (_a) {
     var text = _a.text, type = _a.type;
@@ -2311,7 +2328,7 @@ var StepItem = function (_a) {
         React.createElement(Circle, null, content),
         React.createElement(Text$2, null, text)));
 };
-var Circle = styled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  border-radius: 50%;\n\n  width: 2em;\n  height: 2em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  border-radius: 50%;\n\n  width: 2em;\n  height: 2em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+var Circle = styled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  border-radius: 50%;\n\n  width: 2em;\n  height: 2em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  border-radius: 50%;\n\n  width: 2em;\n  height: 2em;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 var Text$2 = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject([""], [""])));
 var Wrapper$h = styled.div.attrs(getStepItemStyles)(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  ", " {\n    color: ", ";\n    background: ", ";\n  }\n\n  ", " {\n    color: ", ";\n  }\n\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6em;\n"], ["\n  ", " {\n    color: ", ";\n    background: ", ";\n  }\n\n  ", " {\n    color: ", ";\n  }\n\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6em;\n"])), Circle, function (_a) {
     var circleTextColor = _a.circleTextColor;
@@ -2323,10 +2340,10 @@ var Wrapper$h = styled.div.attrs(getStepItemStyles)(templateObject_3$e || (templ
     var color = _a.color;
     return color;
 });
-var templateObject_1$T, templateObject_2$n, templateObject_3$e;
+var templateObject_1$U, templateObject_2$n, templateObject_3$e;
 
-var StepperDivider = styled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  width: 2.5em;\n  height: 0.1em;\n  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(51, 51, 51, 0.16) 50%, rgba(0, 0, 0, 0) 100%);\n"], ["\n  width: 2.5em;\n  height: 0.1em;\n  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(51, 51, 51, 0.16) 50%, rgba(0, 0, 0, 0) 100%);\n"])));
-var templateObject_1$U;
+var StepperDivider = styled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n  width: 2.5em;\n  height: 0.1em;\n  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(51, 51, 51, 0.16) 50%, rgba(0, 0, 0, 0) 100%);\n"], ["\n  width: 2.5em;\n  height: 0.1em;\n  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(51, 51, 51, 0.16) 50%, rgba(0, 0, 0, 0) 100%);\n"])));
+var templateObject_1$V;
 
 var getItemStatus = function (itemStep, currentStep) {
     if (itemStep < currentStep) {
@@ -2357,8 +2374,8 @@ var Stepper = function (_a) {
     }, [steps, currentStep]);
     return React.createElement(Wrapper$i, null, mappedSteps);
 };
-var Wrapper$i = styled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  gap: 0.6em;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  gap: 0.6em;\n"])));
-var templateObject_1$V;
+var Wrapper$i = styled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  gap: 0.6em;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  gap: 0.6em;\n"])));
+var templateObject_1$W;
 
 var stepperPalette = {
     item: {
@@ -2385,7 +2402,7 @@ var getTagColors = function (_a) {
     return theme.components.tag[tagStyle][type];
 };
 
-var LeftIcon$2 = styled(Icon)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject([""], [""])));
+var LeftIcon$2 = styled(Icon)(templateObject_1$X || (templateObject_1$X = __makeTemplateObject([""], [""])));
 var RightIcon$1 = styled(Icon)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject([""], [""])));
 var Text$3 = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject([""], [""])));
 var StyledTag = styled.div.attrs(getTagColors)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: row;\n  border: 4px;\n  align-items: center;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  text-align: center;\n  border-radius: 4px;\n  padding: 3px 8px;\n  color: ", ";\n  background-color: ", ";\n\n  ", " + ", " {\n    padding-left: 4px;\n  }\n\n  ", " + ", " {\n    padding-right: 12px;\n  }\n"], ["\n  display: inline-flex;\n  flex-direction: row;\n  border: 4px;\n  align-items: center;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  text-align: center;\n  border-radius: 4px;\n  padding: 3px 8px;\n  color: ", ";\n  background-color: ", ";\n\n  ", " + ", " {\n    padding-left: 4px;\n  }\n\n  ", " + ", " {\n    padding-right: 12px;\n  }\n"])), function (_a) {
@@ -2395,7 +2412,7 @@ var StyledTag = styled.div.attrs(getTagColors)(templateObject_4$9 || (templateOb
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
 }, LeftIcon$2, Text$3, Text$3, RightIcon$1);
-var templateObject_1$W, templateObject_2$o, templateObject_3$f, templateObject_4$9;
+var templateObject_1$X, templateObject_2$o, templateObject_3$f, templateObject_4$9;
 
 var Tag = function (_a) {
     var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, tagStyle = _a.tagStyle, text = _a.text, type = _a.type, className = _a.className;
@@ -2474,29 +2491,29 @@ var tagPalette = {
     },
 };
 
-var Arrow = styled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n    clip-path: polygon(100% 0, 0% 100%, 100% 100%);\n  }\n"], ["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n    clip-path: polygon(100% 0, 0% 100%, 100% 100%);\n  }\n"])), function (_a) {
+var Arrow = styled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n    clip-path: polygon(100% 0, 0% 100%, 100% 100%);\n  }\n"], ["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    transform: rotate(45deg);\n    width: 10px;\n    height: 10px;\n    background-color: ", ";\n    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);\n    clip-path: polygon(100% 0, 0% 100%, 100% 100%);\n  }\n"])), function (_a) {
     var theme = _a.theme, type = _a.type;
     return theme.components.tooltip[type].background;
 });
 var arrowStyle = css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  &[data-popper-placement^='top'] > ", " {\n    bottom: -5px;\n    &:after {\n      border-bottom-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='bottom'] > ", " {\n    top: -5px;\n    &:after {\n      border-top-left-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='left'] > ", " {\n    right: -5px;\n    &:after {\n      border-top-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='right'] > ", " {\n    left: -5px;\n    &:after {\n      border-bottom-left-radius: 3px;\n    }\n  }\n"], ["\n  &[data-popper-placement^='top'] > ", " {\n    bottom: -5px;\n    &:after {\n      border-bottom-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='bottom'] > ", " {\n    top: -5px;\n    &:after {\n      border-top-left-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='left'] > ", " {\n    right: -5px;\n    &:after {\n      border-top-right-radius: 3px;\n    }\n  }\n\n  &[data-popper-placement^='right'] > ", " {\n    left: -5px;\n    &:after {\n      border-bottom-left-radius: 3px;\n    }\n  }\n"])), Arrow, Arrow, Arrow, Arrow);
-var templateObject_1$X, templateObject_2$p;
+var templateObject_1$Y, templateObject_2$p;
 
 var getMessageStyles = function (_a) {
     var theme = _a.theme, type = _a.type;
     return theme.components.tooltip[type];
 };
-var Message = styled.div.attrs(getMessageStyles)(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  z-index: 9;\n\n  font-size: 14px;\n\n  padding: 4px 8px;\n  border-radius: 3px;\n\n  box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 1);\n\n  color: ", ";\n  background: ", ";\n"], ["\n  z-index: 9;\n\n  font-size: 14px;\n\n  padding: 4px 8px;\n  border-radius: 3px;\n\n  box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 1);\n\n  color: ", ";\n  background: ", ";\n"])), function (_a) {
+var Message = styled.div.attrs(getMessageStyles)(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n  z-index: 9;\n\n  font-size: 14px;\n\n  padding: 4px 8px;\n  border-radius: 3px;\n\n  box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 1);\n\n  color: ", ";\n  background: ", ";\n"], ["\n  z-index: 9;\n\n  font-size: 14px;\n\n  padding: 4px 8px;\n  border-radius: 3px;\n\n  box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 1);\n\n  color: ", ";\n  background: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 }, function (_a) {
     var background = _a.background;
     return background;
 });
-var templateObject_1$Y;
-
-var TooltipContainer = styled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n  ", ";\n\n  max-width: min(calc(100vw - 5%), 300px);\n"], ["\n  ", ";\n\n  max-width: min(calc(100vw - 5%), 300px);\n"])), arrowStyle);
 var templateObject_1$Z;
 
+var TooltipContainer = styled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n  ", ";\n\n  max-width: min(calc(100vw - 5%), 300px);\n"], ["\n  ", ";\n\n  max-width: min(calc(100vw - 5%), 300px);\n"])), arrowStyle);
+var templateObject_1$_;
+
 var Tooltip = function (_a) {
     var message = _a.message, placement = _a.placement, className = _a.className, children = _a.children, type = _a.type, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
     var wrapperRef = useRef(null);
@@ -2550,9 +2567,9 @@ var Tooltip = function (_a) {
                     React.createElement(Arrow, { type: type, ref: setArrowRef, style: styles.arrow }),
                     React.createElement(Message, { type: type, style: styles.offset }, message))))));
 };
-var Wrapper$j = styled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var Wrapper$j = styled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var BodyAnimationWrapper$1 = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  &.enter {\n    opacity: 0;\n    margin-top: -10px;\n  }\n\n  &.enter-active {\n    opacity: 1;\n    margin-top: 0;\n    transition: margin-top 200ms, opacity 200ms;\n  }\n\n  &.exit {\n    opacity: 1;\n    margin-top: 0;\n  }\n\n  &.exit-active {\n    opacity: 0;\n    margin-top: -10px;\n    transition: margin-top 200ms, opacity 200ms;\n  }\n"], ["\n  &.enter {\n    opacity: 0;\n    margin-top: -10px;\n  }\n\n  &.enter-active {\n    opacity: 1;\n    margin-top: 0;\n    transition: margin-top 200ms, opacity 200ms;\n  }\n\n  &.exit {\n    opacity: 1;\n    margin-top: 0;\n  }\n\n  &.exit-active {\n    opacity: 0;\n    margin-top: -10px;\n    transition: margin-top 200ms, opacity 200ms;\n  }\n"])));
-var templateObject_1$_, templateObject_2$q;
+var templateObject_1$$, templateObject_2$q;
 
 var tooltipPalette = {
     light: {
@@ -2587,8 +2604,8 @@ var defaultTheme = {
     components: components,
 };
 
-var ModalAnimation = createGlobalStyle(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n  .ReactModal__Overlay {\n    opacity: 0;\n    transition: all 200ms ease-in-out;\n  }\n  \n  .ReactModal__Overlay--after-open {\n    opacity: 1;\n  }\n  \n  .ReactModal__Overlay--before-close {\n    opacity: 0;\n  }\n  \n  .ReactModal__Overlay--after-open .ReactModal__Content {\n    :not(.fic-modal) {\n        opacity: 1;\n        transform: translate(-50%, -50%);\n       }\n  }\n  \n  .ReactModal__Overlay--before-close .ReactModal__Content {\n    opacity: 0;\n    transform: translate(-50%, 0%);\n  }\n"], ["\n  .ReactModal__Overlay {\n    opacity: 0;\n    transition: all 200ms ease-in-out;\n  }\n  \n  .ReactModal__Overlay--after-open {\n    opacity: 1;\n  }\n  \n  .ReactModal__Overlay--before-close {\n    opacity: 0;\n  }\n  \n  .ReactModal__Overlay--after-open .ReactModal__Content {\n    :not(.fic-modal) {\n        opacity: 1;\n        transform: translate(-50%, -50%);\n       }\n  }\n  \n  .ReactModal__Overlay--before-close .ReactModal__Content {\n    opacity: 0;\n    transform: translate(-50%, 0%);\n  }\n"])));
-var templateObject_1$$;
+var ModalAnimation = createGlobalStyle(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n  .ReactModal__Overlay {\n    opacity: 0;\n    transition: all 200ms ease-in-out;\n  }\n  \n  .ReactModal__Overlay--after-open {\n    opacity: 1;\n  }\n  \n  .ReactModal__Overlay--before-close {\n    opacity: 0;\n  }\n  \n  .ReactModal__Overlay--after-open .ReactModal__Content {\n    :not(.fic-modal) {\n        opacity: 1;\n        transform: translate(-50%, -50%);\n       }\n  }\n  \n  .ReactModal__Overlay--before-close .ReactModal__Content {\n    opacity: 0;\n    transform: translate(-50%, 0%);\n  }\n"], ["\n  .ReactModal__Overlay {\n    opacity: 0;\n    transition: all 200ms ease-in-out;\n  }\n  \n  .ReactModal__Overlay--after-open {\n    opacity: 1;\n  }\n  \n  .ReactModal__Overlay--before-close {\n    opacity: 0;\n  }\n  \n  .ReactModal__Overlay--after-open .ReactModal__Content {\n    :not(.fic-modal) {\n        opacity: 1;\n        transform: translate(-50%, -50%);\n       }\n  }\n  \n  .ReactModal__Overlay--before-close .ReactModal__Content {\n    opacity: 0;\n    transform: translate(-50%, 0%);\n  }\n"])));
+var templateObject_1$10;
 
 var styledModalBoxWidth = function (isSmall, isFullscreen) {
     if (isFullscreen) {
@@ -2602,7 +2619,7 @@ var styledModalBoxWidth = function (isSmall, isFullscreen) {
 
 var headerFooterHeight = '80px';
 var closeTimeoutMS = 200;
-var StyledReactModalContainer = styled(ReactModal)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  outline: none;\n  opacity: 0;\n  transform: translate(-50%, -100%);\n  transition: all ", "ms ease-in-out;\n"], ["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  outline: none;\n  opacity: 0;\n  transform: translate(-50%, -100%);\n  transition: all ", "ms ease-in-out;\n"])), closeTimeoutMS);
+var StyledReactModalContainer = styled(ReactModal)(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  outline: none;\n  opacity: 0;\n  transform: translate(-50%, -100%);\n  transition: all ", "ms ease-in-out;\n"], ["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  right: auto;\n  bottom: auto;\n  outline: none;\n  opacity: 0;\n  transform: translate(-50%, -100%);\n  transition: all ", "ms ease-in-out;\n"])), closeTimeoutMS);
 var StyledModalBox = styled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  overflow: auto;\n  background: rgb(255, 255, 255);\n  padding: 0;\n  ", "\n\n  box-shadow: ", ";\n\n  border: ", ";\n  border-radius: ", "px;\n  width: ", "vw;\n\n  @media screen and (min-width: 992px) {\n    width: ", ";\n  }\n"], ["\n  overflow: auto;\n  background: rgb(255, 255, 255);\n  padding: 0;\n  ",
     "\n\n  box-shadow: ",
     ";\n\n  border: ", ";\n  border-radius: ", "px;\n  width: ", "vw;\n\n  @media screen and (min-width: 992px) {\n    width: ", ";\n  }\n"])), function (_a) {
@@ -2654,7 +2671,7 @@ var TopAttachment = styled.div(templateObject_14$1 || (templateObject_14$1 = __m
 });
 var BottomAttachment = styled.div(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n  width: auto;\n  margin-top: 24px;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n"], ["\n  width: auto;\n  margin-top: 24px;\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n"])));
 var StyledIcon$6 = styled(Icon)(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n  font-size: 24px;\n  font-weight: 500;\n"], ["\n  font-size: 24px;\n  font-weight: 500;\n"])));
-var templateObject_1$10, templateObject_2$r, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1;
+var templateObject_1$11, templateObject_2$r, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1;
 
 var closeTimeoutMS$1 = 200;
 var modalStyle = {
@@ -2744,7 +2761,7 @@ var ModalSearchable = function (props) {
         React.createElement(ClearButton, { visible: !!value, onClick: clearInput }, "Cancella")));
     return (React.createElement(Modal, __assign({ className: className, header: function () { return Header; } }, props), children));
 };
-var ClearButton = styled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n  white-space: nowrap;\n  cursor: pointer;\n  padding-right: 10px;\n  border-right: 1px solid ", ";\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n  display: ", ";\n"], ["\n  white-space: nowrap;\n  cursor: pointer;\n  padding-right: 10px;\n  border-right: 1px solid ", ";\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n  display: ", ";\n"])), function (_a) {
+var ClearButton = styled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n  white-space: nowrap;\n  cursor: pointer;\n  padding-right: 10px;\n  border-right: 1px solid ", ";\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n  display: ", ";\n"], ["\n  white-space: nowrap;\n  cursor: pointer;\n  padding-right: 10px;\n  border-right: 1px solid ", ";\n  color: ", ";\n  &:hover {\n    color: ", ";\n  }\n  display: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[200];
 }, function (_a) {
@@ -2764,14 +2781,14 @@ var WrapperInput = styled.div(templateObject_2$s || (templateObject_2$s = __make
     var theme = _a.theme;
     return theme.palette.grey[50];
 });
-var templateObject_1$11, templateObject_2$s;
+var templateObject_1$12, templateObject_2$s;
 
-var CustomSizeModal = styled(Modal)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n  width: 432px;\n  max-width: 90vw;\n"], ["\n  width: 432px;\n  max-width: 90vw;\n"])));
+var CustomSizeModal = styled(Modal)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  width: 432px;\n  max-width: 90vw;\n"], ["\n  width: 432px;\n  max-width: 90vw;\n"])));
 var TitleContent = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  margin-top: 8px;\n  line-height: 24px;\n  font-weight: 500;\n  font-size: 16px;\n  font-style: normal;\n  color: #000000;\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  margin-top: 8px;\n  line-height: 24px;\n  font-weight: 500;\n  font-size: 16px;\n  font-style: normal;\n  color: #000000;\n"])));
 var BodyContent = styled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n  margin-top: 8px;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: normal;\n  font-style: normal;\n  line-height: 21px;\n  color: #5e6c84;\n"], ["\n  margin-top: 8px;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: normal;\n  font-style: normal;\n  line-height: 21px;\n  color: #5e6c84;\n"])));
 var Question = styled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n  font-size: 14px;\n  font-style: normal;\n  line-height: 21px;\n  font-weight: 500;\n  color: #091e42;\n"], ["\n  font-size: 14px;\n  font-style: normal;\n  line-height: 21px;\n  font-weight: 500;\n  color: #091e42;\n"])));
 var Buttons = styled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n  margin-top: 24px;\n  margin-bottom: 8px;\n  display: flex;\n  flex-direction: row;\n  line-height: 21px;\n  justify-content: flex-end;\n"], ["\n  margin-top: 24px;\n  margin-bottom: 8px;\n  display: flex;\n  flex-direction: row;\n  line-height: 21px;\n  justify-content: flex-end;\n"])));
-var templateObject_1$12, templateObject_2$t, templateObject_3$h, templateObject_4$b, templateObject_5$7;
+var templateObject_1$13, templateObject_2$t, templateObject_3$h, templateObject_4$b, templateObject_5$7;
 
 var typeMap = {
     error: 'error',
@@ -2810,10 +2827,10 @@ var ConfirmationModal = function (props) {
                     props.onAction();
                 } }))));
 };
-var StyledButton = styled(Button)(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n  margin-left: 16px;\n"], ["\n  margin-left: 16px;\n"])));
-var templateObject_1$13;
+var StyledButton = styled(Button)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n  margin-left: 16px;\n"], ["\n  margin-left: 16px;\n"])));
+var templateObject_1$14;
 
-var StyledWrapper = styled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n  width: 90vw;\n  margin: 0 auto;\n  text-align: center;\n  @media screen and (min-width: 768px) {\n    width: 376px;\n  }\n  .icon {\n    background-color: ", ";\n    width: 176px;\n    height: 176px;\n    border-radius: 50%;\n    color: ", ";\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 76px;\n  }\n  h5 {\n    margin-top: 2rem;\n    margin-bottom: 0;\n    font-weight: 500;\n    font-size: 20px;\n    line-height: 30px;\n    color: ", ";\n  }\n  p {\n    margin-top: 0.5rem;\n    margin-bottom: 1.5rem;\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 21px;\n    color: ", ";\n  }\n"], ["\n  width: 90vw;\n  margin: 0 auto;\n  text-align: center;\n  @media screen and (min-width: 768px) {\n    width: 376px;\n  }\n  .icon {\n    background-color: ", ";\n    width: 176px;\n    height: 176px;\n    border-radius: 50%;\n    color: ", ";\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 76px;\n  }\n  h5 {\n    margin-top: 2rem;\n    margin-bottom: 0;\n    font-weight: 500;\n    font-size: 20px;\n    line-height: 30px;\n    color: ", ";\n  }\n  p {\n    margin-top: 0.5rem;\n    margin-bottom: 1.5rem;\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 21px;\n    color: ", ";\n  }\n"])), function (_a) {
+var StyledWrapper = styled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n  width: 90vw;\n  margin: 0 auto;\n  text-align: center;\n  @media screen and (min-width: 768px) {\n    width: 376px;\n  }\n  .icon {\n    background-color: ", ";\n    width: 176px;\n    height: 176px;\n    border-radius: 50%;\n    color: ", ";\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 76px;\n  }\n  h5 {\n    margin-top: 2rem;\n    margin-bottom: 0;\n    font-weight: 500;\n    font-size: 20px;\n    line-height: 30px;\n    color: ", ";\n  }\n  p {\n    margin-top: 0.5rem;\n    margin-bottom: 1.5rem;\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 21px;\n    color: ", ";\n  }\n"], ["\n  width: 90vw;\n  margin: 0 auto;\n  text-align: center;\n  @media screen and (min-width: 768px) {\n    width: 376px;\n  }\n  .icon {\n    background-color: ", ";\n    width: 176px;\n    height: 176px;\n    border-radius: 50%;\n    color: ", ";\n    margin: 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 76px;\n  }\n  h5 {\n    margin-top: 2rem;\n    margin-bottom: 0;\n    font-weight: 500;\n    font-size: 20px;\n    line-height: 30px;\n    color: ", ";\n  }\n  p {\n    margin-top: 0.5rem;\n    margin-bottom: 1.5rem;\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 21px;\n    color: ", ";\n  }\n"])), function (_a) {
     var palette = _a.theme.palette;
     return palette.red[50];
 }, function (_a) {
@@ -2838,14 +2855,14 @@ var PageEmptySet = function (_a) {
         text && React.createElement("p", null, text),
         button));
 };
-var templateObject_1$14;
+var templateObject_1$15;
 
 var StyledWrapper$1 = styled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
     "\n"])), function (_a) {
     var palette = _a.theme.palette;
-    return css(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n    .pagination {\n      display: flex;\n      justify-content: center;\n      width: 100%;\n      margin-top: 2rem;\n    }\n\n    .pagination__element {\n      padding: 0.5rem;\n      font-size: 14px;\n      line-height: 24px;\n      color: ", ";\n      cursor: pointer;\n      box-sizing: content-box;\n\n      &.deactivated {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &.selected {\n        color: ", ";\n        background-color: ", ";\n        font-weight: 500;\n        border-radius: 4px;\n        height: 24px;\n        width: 24px;\n        text-align: center;\n      }\n    }\n  "], ["\n    .pagination {\n      display: flex;\n      justify-content: center;\n      width: 100%;\n      margin-top: 2rem;\n    }\n\n    .pagination__element {\n      padding: 0.5rem;\n      font-size: 14px;\n      line-height: 24px;\n      color: ", ";\n      cursor: pointer;\n      box-sizing: content-box;\n\n      &.deactivated {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &.selected {\n        color: ", ";\n        background-color: ", ";\n        font-weight: 500;\n        border-radius: 4px;\n        height: 24px;\n        width: 24px;\n        text-align: center;\n      }\n    }\n  "])), palette.grey[700], palette.white[100], palette.grey[700]);
+    return css(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n    .pagination {\n      display: flex;\n      justify-content: center;\n      width: 100%;\n      margin-top: 2rem;\n    }\n\n    .pagination__element {\n      padding: 0.5rem;\n      font-size: 14px;\n      line-height: 24px;\n      color: ", ";\n      cursor: pointer;\n      box-sizing: content-box;\n\n      &.deactivated {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &.selected {\n        color: ", ";\n        background-color: ", ";\n        font-weight: 500;\n        border-radius: 4px;\n        height: 24px;\n        width: 24px;\n        text-align: center;\n      }\n    }\n  "], ["\n    .pagination {\n      display: flex;\n      justify-content: center;\n      width: 100%;\n      margin-top: 2rem;\n    }\n\n    .pagination__element {\n      padding: 0.5rem;\n      font-size: 14px;\n      line-height: 24px;\n      color: ", ";\n      cursor: pointer;\n      box-sizing: content-box;\n\n      &.deactivated {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &.selected {\n        color: ", ";\n        background-color: ", ";\n        font-weight: 500;\n        border-radius: 4px;\n        height: 24px;\n        width: 24px;\n        text-align: center;\n      }\n    }\n  "])), palette.grey[700], palette.white[100], palette.grey[700]);
 });
-var templateObject_1$15, templateObject_2$u;
+var templateObject_1$16, templateObject_2$u;
 
 var PaginationComponent = function (props) {
     var numberOfPages = Math.ceil(props.listSize / props.pageSize);
@@ -2886,9 +2903,9 @@ var Pagination = function (props) { return (React.createElement(StyledWrapper$1,
 var StyledProgressbarWrapper = styled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
     "\n"])), function (_a) {
     var color = _a.color, percentage = _a.percentage, palette = _a.theme.palette;
-    return css(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n    .progression__container {\n      height: ", ";\n      background-color: ", ";\n      position: relative;\n      border-radius: 100px;\n    }\n    .progression__bar {\n      position: absolute;\n      height: 100%;\n      z-index: 1;\n      border-radius: 100px;\n      transition: width 0.35s ease-in-out;\n\n      background-color: ", ";\n      width: ", "%;\n    }\n  "], ["\n    .progression__container {\n      height: ", ";\n      background-color: ", ";\n      position: relative;\n      border-radius: 100px;\n    }\n    .progression__bar {\n      position: absolute;\n      height: 100%;\n      z-index: 1;\n      border-radius: 100px;\n      transition: width 0.35s ease-in-out;\n\n      background-color: ", ";\n      width: ", "%;\n    }\n  "])), spacing.s, palette.grey[100], palette[color ? color : 'blue'][500], percentage);
+    return css(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n    .progression__container {\n      height: ", ";\n      background-color: ", ";\n      position: relative;\n      border-radius: 100px;\n    }\n    .progression__bar {\n      position: absolute;\n      height: 100%;\n      z-index: 1;\n      border-radius: 100px;\n      transition: width 0.35s ease-in-out;\n\n      background-color: ", ";\n      width: ", "%;\n    }\n  "], ["\n    .progression__container {\n      height: ", ";\n      background-color: ", ";\n      position: relative;\n      border-radius: 100px;\n    }\n    .progression__bar {\n      position: absolute;\n      height: 100%;\n      z-index: 1;\n      border-radius: 100px;\n      transition: width 0.35s ease-in-out;\n\n      background-color: ", ";\n      width: ", "%;\n    }\n  "])), spacing.s, palette.grey[100], palette[color ? color : 'blue'][500], percentage);
 });
-var templateObject_1$16, templateObject_2$v;
+var templateObject_1$17, templateObject_2$v;
 
 var UnstyledProgressbar = /** @class */ (function (_super) {
     __extends(UnstyledProgressbar, _super);
@@ -2906,7 +2923,7 @@ var UnstyledProgressbar = /** @class */ (function (_super) {
 var Progressbar = function (props) { return (React.createElement(StyledProgressbarWrapper, __assign({}, props),
     React.createElement(UnstyledProgressbar, __assign({}, props)))); };
 
-var linearBackground = function () { return css(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  .linear-background {\n    *,\n    ::after,\n    ::before {\n      box-sizing: border-box;\n    }\n\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n    margin-bottom: 0;\n    background-color: ", ";\n    border-radius: 4px;\n    padding: 8px;\n\n    &::before {\n      content: ' ';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 50%;\n      z-index: 1;\n      width: 500%;\n      margin-left: -250%;\n      animation: phAnimation 2s linear infinite;\n      background: linear-gradient(\n        to right,\n        ", " 46%,\n        ", " 50%,\n        ", " 54%\n      );\n    }\n\n    > * {\n      flex: 1 1 auto;\n      display: flex;\n      flex-flow: column;\n      padding-right: (8px / 2);\n      padding-left: (8px / 2);\n    }\n\n    @keyframes phAnimation {\n      0% {\n        transform: translate3d(-30%, 0, 0);\n      }\n      100% {\n        transform: translate3d(30%, 0, 0);\n      }\n    }\n  }\n"], ["\n  .linear-background {\n    *,\n    ::after,\n    ::before {\n      box-sizing: border-box;\n    }\n\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n    margin-bottom: 0;\n    background-color: ", ";\n    border-radius: 4px;\n    padding: 8px;\n\n    &::before {\n      content: ' ';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 50%;\n      z-index: 1;\n      width: 500%;\n      margin-left: -250%;\n      animation: phAnimation 2s linear infinite;\n      background: linear-gradient(\n        to right,\n        ", " 46%,\n        ", " 50%,\n        ", " 54%\n      );\n    }\n\n    > * {\n      flex: 1 1 auto;\n      display: flex;\n      flex-flow: column;\n      padding-right: (8px / 2);\n      padding-left: (8px / 2);\n    }\n\n    @keyframes phAnimation {\n      0% {\n        transform: translate3d(-30%, 0, 0);\n      }\n      100% {\n        transform: translate3d(30%, 0, 0);\n      }\n    }\n  }\n"])), function (_a) {
+var linearBackground = function () { return css(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n  .linear-background {\n    *,\n    ::after,\n    ::before {\n      box-sizing: border-box;\n    }\n\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n    margin-bottom: 0;\n    background-color: ", ";\n    border-radius: 4px;\n    padding: 8px;\n\n    &::before {\n      content: ' ';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 50%;\n      z-index: 1;\n      width: 500%;\n      margin-left: -250%;\n      animation: phAnimation 2s linear infinite;\n      background: linear-gradient(\n        to right,\n        ", " 46%,\n        ", " 50%,\n        ", " 54%\n      );\n    }\n\n    > * {\n      flex: 1 1 auto;\n      display: flex;\n      flex-flow: column;\n      padding-right: (8px / 2);\n      padding-left: (8px / 2);\n    }\n\n    @keyframes phAnimation {\n      0% {\n        transform: translate3d(-30%, 0, 0);\n      }\n      100% {\n        transform: translate3d(30%, 0, 0);\n      }\n    }\n  }\n"], ["\n  .linear-background {\n    *,\n    ::after,\n    ::before {\n      box-sizing: border-box;\n    }\n\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n    margin-bottom: 0;\n    background-color: ", ";\n    border-radius: 4px;\n    padding: 8px;\n\n    &::before {\n      content: ' ';\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 50%;\n      z-index: 1;\n      width: 500%;\n      margin-left: -250%;\n      animation: phAnimation 2s linear infinite;\n      background: linear-gradient(\n        to right,\n        ", " 46%,\n        ", " 50%,\n        ", " 54%\n      );\n    }\n\n    > * {\n      flex: 1 1 auto;\n      display: flex;\n      flex-flow: column;\n      padding-right: (8px / 2);\n      padding-left: (8px / 2);\n    }\n\n    @keyframes phAnimation {\n      0% {\n        transform: translate3d(-30%, 0, 0);\n      }\n      100% {\n        transform: translate3d(30%, 0, 0);\n      }\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[100];
 }, function (_a) {
@@ -2919,7 +2936,7 @@ var linearBackground = function () { return css(templateObject_1$17 || (template
     var theme = _a.theme;
     return theme.palette.grey[100];
 }); };
-var templateObject_1$17;
+var templateObject_1$18;
 
 var tabletLandscape = 991;
 var responsiveThresholds = {
@@ -2992,7 +3009,7 @@ var typeMap$1 = {
     desc: faSortDown,
     default: faSort,
 };
-var StyledWrapper$2 = styled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n  margin-left: 0.5rem;\n"], ["\n  margin-left: 0.5rem;\n"])));
+var StyledWrapper$2 = styled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n  margin-left: 0.5rem;\n"], ["\n  margin-left: 0.5rem;\n"])));
 var StyledIcon$7 = styled(Icon)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
 var SortIcon = function (props) {
     var filter = _.find(props.propertiesFilter, ['id', props.property]);
@@ -3025,7 +3042,7 @@ var SortIcon = function (props) {
                 props.handleSortOnProperty(props.property, nextType);
             } })));
 };
-var templateObject_1$18, templateObject_2$w;
+var templateObject_1$19, templateObject_2$w;
 
 var ellipsisIcon = {
     icon: faEllipsisH,
@@ -3052,21 +3069,21 @@ var HeadDesktop = function (_a) {
                 React.createElement(Icon, __assign({}, ellipsisIcon))))));
 };
 
-var Row = styled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject([""], [""])));
+var Row = styled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject([""], [""])));
 var ListMobile = function (_a) {
     var data = _a.data, isLoading = _a.isLoading, listSize = _a.listSize, renderMobileRow = _a.renderMobileRow;
     return (React.createElement("div", null, listSize && !isLoading
         ? data.map(function (o, i) { return React.createElement(Row, { key: i }, renderMobileRow ? renderMobileRow(o) : undefined); })
         : undefined));
 };
-var templateObject_1$19;
+var templateObject_1$1a;
 
 var ActionLink = styled.a(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n  margin-right: 1rem;\n  cursor: pointer;\n  user-select: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ", "\n"], ["\n  margin-right: 1rem;\n  cursor: pointer;\n  user-select: none;\n  &:hover {\n    text-decoration: underline;\n  }\n  ",
-    "\n"])), function (props) { return css(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), props.color); });
-var templateObject_1$1a, templateObject_2$x;
+    "\n"])), function (props) { return css(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), props.color); });
+var templateObject_1$1b, templateObject_2$x;
 
-var ActionsContainer = styled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
-var templateObject_1$1b;
+var ActionsContainer = styled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var templateObject_1$1c;
 
 var StyledWrapper$3 = styled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 32px;\n  background-color: ", ";\n  box-shadow: 0px 1px 2px rgba(51, 51, 51, 0.24), 0px 1px 3px rgba(51, 51, 51, 0.12);\n  border-radius: 4px;\n  min-width: 200px;\n  max-width: calc(100% - 2rem);\n  padding: 0.5rem 1rem;\n  z-index: 999;\n  display: none;\n  ", "\n\n  .link_container {\n    margin: 0.5rem 0;\n  }\n"], ["\n  position: absolute;\n  right: 0;\n  top: 32px;\n  background-color: ", ";\n  box-shadow: 0px 1px 2px rgba(51, 51, 51, 0.24), 0px 1px 3px rgba(51, 51, 51, 0.12);\n  border-radius: 4px;\n  min-width: 200px;\n  max-width: calc(100% - 2rem);\n  padding: 0.5rem 1rem;\n  z-index: 999;\n  display: none;\n  ",
     "\n\n  .link_container {\n    margin: 0.5rem 0;\n  }\n"])), function (_a) {
@@ -3074,7 +3091,7 @@ var StyledWrapper$3 = styled.div(templateObject_2$y || (templateObject_2$y = __m
     return palette.white[100];
 }, function (props) {
     if (props.active) {
-        return css(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n        display: block;\n      "], ["\n        display: block;\n      "])));
+        return css(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n        display: block;\n      "], ["\n        display: block;\n      "])));
     }
     return undefined;
 });
@@ -3091,24 +3108,24 @@ var ActionsPopUp = function (props) { return (React.createElement(StyledWrapper$
             a.action(props.element, props.selectedRows);
             props.handlePopUpVisibility(undefined);
         }, color: a.color }, a.label))); }))); };
-var templateObject_1$1c, templateObject_2$y, templateObject_3$i, templateObject_4$c;
+var templateObject_1$1d, templateObject_2$y, templateObject_3$i, templateObject_4$c;
 
 var StyledWrapper$4 = styled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  justify-content: center;\n  border-radius: 4px;\n\n  ", "\n"], ["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  width: 32px;\n  height: 32px;\n  justify-content: center;\n  border-radius: 4px;\n\n  ",
     "\n"])), function (_a) {
     var active = _a.active, palette = _a.theme.palette;
     return css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  "], ["\n    ",
-        "\n    &:hover {\n      background-color: ", ";\n    }\n  "])), active && css(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), palette.blue[50], palette.blue[500]), palette.blue[50]);
+        "\n    &:hover {\n      background-color: ", ";\n    }\n  "])), active && css(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), palette.blue[50], palette.blue[500]), palette.blue[50]);
 });
 var ActionsPopUpButton = function (props) { return (React.createElement(StyledWrapper$4, { active: props.active, onClick: function () { return props.handlePopUpVisibility(props.rowId); } },
     React.createElement(Icon, { icon: faEllipsisH }))); };
-var templateObject_1$1d, templateObject_2$z, templateObject_3$j;
+var templateObject_1$1e, templateObject_2$z, templateObject_3$j;
 
 var ActionsPopUpUnderlay = styled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: transparent;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: none;\n  ", "\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: transparent;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: none;\n  ",
     "\n"])), function (_a) {
     var active = _a.active;
-    return active && css(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n      display: block;\n    "], ["\n      display: block;\n    "])));
+    return active && css(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n      display: block;\n    "], ["\n      display: block;\n    "])));
 });
-var templateObject_1$1e, templateObject_2$A;
+var templateObject_1$1f, templateObject_2$A;
 
 var RowDesktop = function (_a) {
     var actions = _a.actions, controlledProperties = _a.controlledProperties, currentActionsPopUp = _a.currentActionsPopUp, disableSelection = _a.disableSelection, element = _a.element, handlePopUpVisibility = _a.handlePopUpVisibility, handleSelection = _a.handleSelection, index = _a.index, selectedList = _a.selectedList;
@@ -3143,9 +3160,9 @@ var StyledWrapper$5 = styled.div(templateObject_3$k || (templateObject_3$k = __m
     "\n"])), function (_a) {
     var show = _a.show, palette = _a.theme.palette;
     return css(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.14);\n    top: 0;\n    left: 0;\n    display: none;\n    ", "\n    .link {\n      color: ", ";\n      cursor: pointer;\n    }\n    .modal__container {\n      background-color: ", ";\n      width: 424px;\n      box-shadow: 0px 16px 24px rgba(23, 43, 77, 0.24), 0px 0px 0px rgba(9, 30, 66, 0.08);\n      border-radius: 8px;\n      background-color: ", ";\n    }\n    .modal__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      background: ", ";\n      border-top-left-radius: 8px;\n      border-top-right-radius: 8px;\n      padding: 0 1.5rem;\n      font-size: 20px;\n      line-height: 30px;\n      p {\n        cursor: pointer;\n      }\n    }\n    .modal__body {\n      padding: 1rem 1.5rem;\n      position: relative;\n      .draggable_element {\n        display: flex;\n        align-items: center;\n        &:hover,\n        &:active {\n          .icon {\n            visibility: visible;\n            color: ", ";\n          }\n        }\n      }\n      .draggable__handle {\n        width: 30px;\n        .icon {\n          display: block;\n          visibility: hidden;\n        }\n      }\n      .draggable__checkbox {\n        margin-bottom: 6px;\n      }\n    }\n    .modal__footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 1.5rem 1.5rem;\n      border-top: 1px solid ", ";\n      font-size: 14px;\n      line-height: 21px;\n      .buttons__container {\n        a {\n          &:first-child {\n            margin-right: 1rem;\n          }\n        }\n      }\n    }\n  "], ["\n    position: fixed;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.14);\n    top: 0;\n    left: 0;\n    display: none;\n    ",
-        "\n    .link {\n      color: ", ";\n      cursor: pointer;\n    }\n    .modal__container {\n      background-color: ", ";\n      width: 424px;\n      box-shadow: 0px 16px 24px rgba(23, 43, 77, 0.24), 0px 0px 0px rgba(9, 30, 66, 0.08);\n      border-radius: 8px;\n      background-color: ", ";\n    }\n    .modal__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      background: ", ";\n      border-top-left-radius: 8px;\n      border-top-right-radius: 8px;\n      padding: 0 1.5rem;\n      font-size: 20px;\n      line-height: 30px;\n      p {\n        cursor: pointer;\n      }\n    }\n    .modal__body {\n      padding: 1rem 1.5rem;\n      position: relative;\n      .draggable_element {\n        display: flex;\n        align-items: center;\n        &:hover,\n        &:active {\n          .icon {\n            visibility: visible;\n            color: ", ";\n          }\n        }\n      }\n      .draggable__handle {\n        width: 30px;\n        .icon {\n          display: block;\n          visibility: hidden;\n        }\n      }\n      .draggable__checkbox {\n        margin-bottom: 6px;\n      }\n    }\n    .modal__footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 1.5rem 1.5rem;\n      border-top: 1px solid ", ";\n      font-size: 14px;\n      line-height: 21px;\n      .buttons__container {\n        a {\n          &:first-child {\n            margin-right: 1rem;\n          }\n        }\n      }\n    }\n  "])), show && css(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "], ["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))), palette.blue[500], palette.white[100], palette.white[100], palette.grey[50], palette.grey[150], palette.grey[100]);
+        "\n    .link {\n      color: ", ";\n      cursor: pointer;\n    }\n    .modal__container {\n      background-color: ", ";\n      width: 424px;\n      box-shadow: 0px 16px 24px rgba(23, 43, 77, 0.24), 0px 0px 0px rgba(9, 30, 66, 0.08);\n      border-radius: 8px;\n      background-color: ", ";\n    }\n    .modal__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      background: ", ";\n      border-top-left-radius: 8px;\n      border-top-right-radius: 8px;\n      padding: 0 1.5rem;\n      font-size: 20px;\n      line-height: 30px;\n      p {\n        cursor: pointer;\n      }\n    }\n    .modal__body {\n      padding: 1rem 1.5rem;\n      position: relative;\n      .draggable_element {\n        display: flex;\n        align-items: center;\n        &:hover,\n        &:active {\n          .icon {\n            visibility: visible;\n            color: ", ";\n          }\n        }\n      }\n      .draggable__handle {\n        width: 30px;\n        .icon {\n          display: block;\n          visibility: hidden;\n        }\n      }\n      .draggable__checkbox {\n        margin-bottom: 6px;\n      }\n    }\n    .modal__footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 1.5rem 1.5rem;\n      border-top: 1px solid ", ";\n      font-size: 14px;\n      line-height: 21px;\n      .buttons__container {\n        a {\n          &:first-child {\n            margin-right: 1rem;\n          }\n        }\n      }\n    }\n  "])), show && css(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "], ["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))), palette.blue[500], palette.white[100], palette.white[100], palette.grey[50], palette.grey[150], palette.grey[100]);
 });
-var templateObject_1$1f, templateObject_2$B, templateObject_3$k;
+var templateObject_1$1g, templateObject_2$B, templateObject_3$k;
 
 var getItemStyle = function (snapshot, draggableStyle) {
     return __assign({ userSelect: 'none', padding: '0.5rem 0 0.5rem 0', outline: "none" }, draggableStyle);
@@ -3243,7 +3260,7 @@ var CustomizationsModal = /** @class */ (function (_super) {
     return CustomizationsModal;
 }(Component));
 
-var LoadingTableRow = styled.tr(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n  height: 49px;\n"], ["\n  height: 49px;\n"])));
+var LoadingTableRow = styled.tr(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n  height: 49px;\n"], ["\n  height: 49px;\n"])));
 var LoadingContent = function (props) {
     // Loading elments for the table
     var renderElements = function () {
@@ -3263,7 +3280,7 @@ var LoadingContent = function (props) {
     };
     return React.createElement(React.Fragment, null, renderElements());
 };
-var templateObject_1$1g;
+var templateObject_1$1h;
 
 var Pagination$1 = function (props) {
     var managedCurrentPage = props.currentPage;
@@ -3430,7 +3447,7 @@ var StyledTableWrapper = styled(UnstyledTable)(templateObject_7$6 || (templateOb
         "\n        z-index: 3;\n        border-bottom: 2px solid ", ";\n        background-color: ", ";\n        color: ", ";\n        font-weight: 500;\n        border-right: 2px solid ", ";\n\n        ",
         "\n        &:last-child {\n          cursor: pointer;\n          color: ", ";\n        }\n        &:last-child,\n        &:nth-last-child(2) {\n          width: 1px;\n          padding: 0 1rem;\n        }\n\n        div {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n        }\n      }\n    }\n\n    tbody {\n      tr {\n        &.selected {\n          background-color: ", ";\n          &:hover {\n            background-color: ", ";\n          }\n        }\n        ",
         "\n        ",
-        "\n      }\n    }\n  "])), isHeaderFixed && css(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n          position: sticky;\n          top: 0;\n        "], ["\n          position: sticky;\n          top: 0;\n        "]))), palette.grey[200], palette.grey[50], palette.grey[500], palette.grey[100], !disableSelection && css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n          &:first-child {\n            width: 20px;\n            border-right: 0;\n          }\n        "], ["\n          &:first-child {\n            width: 20px;\n            border-right: 0;\n          }\n        "]))), palette.black, palette.yellow[50], palette.yellow[100], !isLoading && css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n          &:hover {\n            background-color: ", ";\n          }\n        "], ["\n          &:hover {\n            background-color: ", ";\n          }\n        "])), palette.grey[100]), !disableSelection && css(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n          &:first-child {\n            width: 20px;\n          }\n        "], ["\n          &:first-child {\n            width: 20px;\n          }\n        "]))));
+        "\n      }\n    }\n  "])), isHeaderFixed && css(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n          position: sticky;\n          top: 0;\n        "], ["\n          position: sticky;\n          top: 0;\n        "]))), palette.grey[200], palette.grey[50], palette.grey[500], palette.grey[100], !disableSelection && css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n          &:first-child {\n            width: 20px;\n            border-right: 0;\n          }\n        "], ["\n          &:first-child {\n            width: 20px;\n            border-right: 0;\n          }\n        "]))), palette.black, palette.yellow[50], palette.yellow[100], !isLoading && css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n          &:hover {\n            background-color: ", ";\n          }\n        "], ["\n          &:hover {\n            background-color: ", ";\n          }\n        "])), palette.grey[100]), !disableSelection && css(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n          &:first-child {\n            width: 20px;\n          }\n        "], ["\n          &:first-child {\n            width: 20px;\n          }\n        "]))));
 }, function (_a) {
     var palette = _a.theme.palette;
     return palette.blue[500];
@@ -3438,11 +3455,11 @@ var StyledTableWrapper = styled(UnstyledTable)(templateObject_7$6 || (templateOb
     var palette = _a.theme.palette;
     return css(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n    .pagination__element {\n      padding: 0.5rem;\n      font-size: 14px;\n      line-height: 24px;\n      color: ", ";\n      cursor: pointer;\n      box-sizing: content-box;\n\n      &.deactivated {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &.selected {\n        color: ", ";\n        background-color: ", ";\n        font-weight: 500;\n        border-radius: 4px;\n        height: 24px;\n        width: 24px;\n        text-align: center;\n      }\n    }\n    /* Loading animation */\n    ", "\n  "], ["\n    .pagination__element {\n      padding: 0.5rem;\n      font-size: 14px;\n      line-height: 24px;\n      color: ", ";\n      cursor: pointer;\n      box-sizing: content-box;\n\n      &.deactivated {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &.selected {\n        color: ", ";\n        background-color: ", ";\n        font-weight: 500;\n        border-radius: 4px;\n        height: 24px;\n        width: 24px;\n        text-align: center;\n      }\n    }\n    /* Loading animation */\n    ", "\n  "])), palette.grey[700], palette.white[100], palette.grey[700], linearBackground());
 }, spacing.xxxl);
-var templateObject_1$1h, templateObject_2$C, templateObject_3$l, templateObject_4$d, templateObject_5$8, templateObject_6$6, templateObject_7$6;
+var templateObject_1$1i, templateObject_2$C, templateObject_3$l, templateObject_4$d, templateObject_5$8, templateObject_6$6, templateObject_7$6;
 
 var Table = function (props) { return React.createElement(StyledTableWrapper, __assign({}, props)); };
 
-var ActiveTag = styled.span(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n  background: ", ";\n  width: 100%;\n  height: 4px;\n  margin-top: 6px;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  background: ", ";\n  width: 100%;\n  height: 4px;\n  margin-top: 6px;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
+var ActiveTag = styled.span(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n  background: ", ";\n  width: 100%;\n  height: 4px;\n  margin-top: 6px;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  background: ", ";\n  width: 100%;\n  height: 4px;\n  margin-top: 6px;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
     var active = _a.active, theme = _a.theme;
     return (active ? theme.palette.primary[500] : 'transparent');
 }, function (_a) {
@@ -3452,16 +3469,16 @@ var ActiveTag = styled.span(templateObject_1$1i || (templateObject_1$1i = __make
     var active = _a.active, theme = _a.theme;
     return (active ? theme.palette.primary[500] : theme.palette.grey[900]);
 });
-var templateObject_1$1i;
+var templateObject_1$1j;
 
-var Tab = styled.span(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n  font-family: 'Inter UI', sans-serif;\n  font-style: normal;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n\n  align-items: center;\n  display: flex;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  font-family: 'Inter UI', sans-serif;\n  font-style: normal;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n\n  align-items: center;\n  display: flex;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
+var Tab = styled.span(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n  font-family: 'Inter UI', sans-serif;\n  font-style: normal;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n\n  align-items: center;\n  display: flex;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  font-family: 'Inter UI', sans-serif;\n  font-style: normal;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n\n  align-items: center;\n  display: flex;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
     var active = _a.active, theme = _a.theme;
     return (active ? theme.palette.primary[500] : theme.palette.grey[500]);
 }, function (_a) {
     var active = _a.active, theme = _a.theme;
     return (active ? theme.palette.primary[500] : theme.palette.grey[900]);
 });
-var templateObject_1$1j;
+var templateObject_1$1k;
 
 var Item$1 = function (_a) {
     var active = _a.active, handleClick = _a.handleClick, tabRef = _a.tabRef, text = _a.text;
@@ -3469,13 +3486,13 @@ var Item$1 = function (_a) {
         React.createElement(Tab, { active: active }, text),
         React.createElement(ActiveTag, { active: active })));
 };
-var ItemWrapper = styled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n  cursor: pointer;\n  flex-shrink: 0;\n  position: relative;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n"], ["\n  cursor: pointer;\n  flex-shrink: 0;\n  position: relative;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n"])));
-var templateObject_1$1k;
+var ItemWrapper = styled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n  cursor: pointer;\n  flex-shrink: 0;\n  position: relative;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n"], ["\n  cursor: pointer;\n  flex-shrink: 0;\n  position: relative;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n"])));
+var templateObject_1$1l;
 
 var TabsWrapper = styled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 31px;\n  alignment-baseline: baseline;\n  display: flex;\n  white-space: nowrap;\n  margin-top: 3px;\n  width: 100%;\n\n  ", ";\n\n  & > *:first-child {\n    padding-left: ", "px;\n  }\n\n  & > *:last-child {\n    padding-right: ", "px;\n  }\n\n  & > * + * {\n    margin-left: ", "px;\n  }\n"], ["\n  box-sizing: border-box;\n  height: 31px;\n  alignment-baseline: baseline;\n  display: flex;\n  white-space: nowrap;\n  margin-top: 3px;\n  width: 100%;\n\n  ",
     ";\n\n  & > *:first-child {\n    padding-left: ", "px;\n  }\n\n  & > *:last-child {\n    padding-right: ", "px;\n  }\n\n  & > * + * {\n    margin-left: ", "px;\n  }\n"])), function (_a) {
     var hidden = _a.hidden;
-    return hidden && css(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n      visibility: hidden;\n      position: absolute;\n    "], ["\n      visibility: hidden;\n      position: absolute;\n    "])));
+    return hidden && css(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n      visibility: hidden;\n      position: absolute;\n    "], ["\n      visibility: hidden;\n      position: absolute;\n    "])));
 }, function (_a) {
     var lateralPadding = _a.lateralPadding;
     return lateralPadding;
@@ -3487,7 +3504,7 @@ var TabsWrapper = styled.div(templateObject_2$D || (templateObject_2$D = __makeT
     return distance;
 });
 var ScrollableTabsWrapper = styled(TabsWrapper)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n"], ["\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
-var templateObject_1$1l, templateObject_2$D, templateObject_3$m;
+var templateObject_1$1m, templateObject_2$D, templateObject_3$m;
 
 var useResizedWidth = function () {
     var _a = useMeasure(), elementsWrapperRef = _a[0], wrapperTmpWidth = _a[1].width;
@@ -3520,8 +3537,8 @@ var TabsDropdownTrigger = function (_a) {
     var active = _a.active;
     return (React.createElement(Item$1, { active: active, text: React.createElement(DropdownIcon, { icon: faEllipsisH$1, fixedWidth: true }) }));
 };
-var DropdownIcon = styled(Icon)(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n  height: 21px;\n"], ["\n  height: 21px;\n"])));
-var templateObject_1$1m;
+var DropdownIcon = styled(Icon)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n  height: 21px;\n"], ["\n  height: 21px;\n"])));
+var templateObject_1$1n;
 
 var TabsDropdown = function (_a) {
     var active = _a.active, tabs = _a.tabs;
@@ -3535,8 +3552,8 @@ var TabsDropdown = function (_a) {
     }))); }, [tabs]);
     return React.createElement(Dropdown$2, { placement: 'bottom-end', fullWidth: true, renderTrigger: renderTrigger, renderContent: renderContent });
 };
-var Dropdown$2 = styled(Dropdown)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-var templateObject_1$1n;
+var Dropdown$2 = styled(Dropdown)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+var templateObject_1$1o;
 
 var DropdownTabs = function (_a) {
     var className = _a.className, _b = _a.distance, distance = _b === void 0 ? 15 : _b, _c = _a.lateralPadding, lateralPadding = _c === void 0 ? 23 : _c, tabs = _a.tabs;
@@ -3570,8 +3587,8 @@ var DropdownTabs = function (_a) {
             dropdownVisible && React.createElement(TabsDropdown, { active: dropdownActive, tabs: dropdownItems }))));
 };
 // Remove scrollbar on ScrollableWrapper used until real DropdownTabs is loaded
-var StyledScrollableWrapper = styled(ScrollableTabsWrapper)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
-var templateObject_1$1o;
+var StyledScrollableWrapper = styled(ScrollableTabsWrapper)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
+var templateObject_1$1p;
 
 var ScrollableTabs = function (_a) {
     var className = _a.className, _b = _a.distance, distance = _b === void 0 ? 15 : _b, _c = _a.lateralPadding, lateralPadding = _c === void 0 ? 23 : _c, tabs = _a.tabs;
@@ -3579,25 +3596,6 @@ var ScrollableTabs = function (_a) {
     return (React.createElement(ScrollableTabsWrapper, { className: className, distance: distance, lateralPadding: lateralPadding }, tabsItems));
 };
 
-var TextButton = function (_a) {
-    var _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, onClick = _a.onClick, text = _a.text, rest = __rest(_a, ["isDisabled", "onClick", "text"]);
-    var callback = useCallback(function () {
-        !isDisabled && onClick();
-    }, [isDisabled, onClick]);
-    return (React.createElement(Wrapper$l, __assign({ isDisabled: isDisabled, onClick: callback }, rest), text));
-};
-var getColorIntensity = function (color) { return (color === 'white' ? 100 : 500); };
-var enabledCss = function (theme, color) { return css(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n  &:hover {\n    text-decoration: underline;\n  }\n"], ["\n  color: ", ";\n  cursor: pointer;\n  &:hover {\n    text-decoration: underline;\n  }\n"])), theme.palette[color !== null && color !== void 0 ? color : 'primary'][getColorIntensity(color)]); };
-var disabledCss = css(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n  color: ", ";\n  cursor: default;\n  text-decoration: none;\n"], ["\n  color: ", ";\n  cursor: default;\n  text-decoration: none;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[500];
-});
-var Wrapper$l = styled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
-    var color = _a.color, isDisabled = _a.isDisabled, theme = _a.theme;
-    return (isDisabled ? disabledCss : enabledCss(theme, color));
-});
-var templateObject_1$1p, templateObject_2$E, templateObject_3$n;
-
 var ThemeProvider = function (_a) {
     var children = _a.children, theme = _a.theme;
     return (React.createElement(ThemeProvider$1, { theme: theme },
@@ -3611,13 +3609,13 @@ var StyledTip = styled.div(templateObject_1$1q || (templateObject_1$1q = __makeT
     var palette = _a.theme.palette;
     return palette.primary[400];
 });
-var StyledLeftIcon = styled.span(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  margin-right: 8px;\n  font-size: 20px;\n"], ["\n  margin-right: 8px;\n  font-size: 20px;\n"])));
-var StyledText = styled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 21px;\n  white-space: nowrap;\n"], ["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 21px;\n  white-space: nowrap;\n"])));
+var StyledLeftIcon = styled.span(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n  margin-right: 8px;\n  font-size: 20px;\n"], ["\n  margin-right: 8px;\n  font-size: 20px;\n"])));
+var StyledText = styled.span(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 21px;\n  white-space: nowrap;\n"], ["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 21px;\n  white-space: nowrap;\n"])));
 var StyledCloseIcon$1 = styled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  margin-left: 32px;\n  line-height: 20px;\n  & :hover {\n    cursor: pointer;\n    color: ", ";\n  }\n"], ["\n  margin-left: 32px;\n  line-height: 20px;\n  & :hover {\n    cursor: pointer;\n    color: ", ";\n  }\n"])), function (_a) {
     var palette = _a.theme.palette;
     return palette.white[100];
 });
-var templateObject_1$1q, templateObject_2$F, templateObject_3$o, templateObject_4$e;
+var templateObject_1$1q, templateObject_2$E, templateObject_3$n, templateObject_4$e;
 
 var defaultCloseIcon$1 = {
     icon: faTimes,
@@ -3643,13 +3641,13 @@ var ShortcutTip = function (props) {
 };
 
 var StyledIconDiv = styled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  margin-left: 16px;\n  margin-top: 16px;\n  text-align: center;\n"], ["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  margin-left: 16px;\n  margin-top: 16px;\n  text-align: center;\n"])));
-var StyledIcon$8 = styled(Icon)(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n  vertical-align: sub;\n"], ["\n  vertical-align: sub;\n"])));
-var StyledTitle$1 = styled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: inline-block;\n  height: 24px;\n  margin-left: 8px;\n  margin-right: 16px;\n  margin-top: 16px;\n  font-weight: 500;\n  width: 256px;\n"], ["\n  display: inline-block;\n  height: 24px;\n  margin-left: 8px;\n  margin-right: 16px;\n  margin-top: 16px;\n  font-weight: 500;\n  width: 256px;\n"])));
+var StyledIcon$8 = styled(Icon)(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n  vertical-align: sub;\n"], ["\n  vertical-align: sub;\n"])));
+var StyledTitle$1 = styled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  display: inline-block;\n  height: 24px;\n  margin-left: 8px;\n  margin-right: 16px;\n  margin-top: 16px;\n  font-weight: 500;\n  width: 256px;\n"], ["\n  display: inline-block;\n  height: 24px;\n  margin-left: 8px;\n  margin-right: 16px;\n  margin-top: 16px;\n  font-weight: 500;\n  width: 256px;\n"])));
 var StyledContent$1 = styled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n  display: block;\n  margin: 4px 16px 16px 48px;\n  line-height: 21px;\n  font-weight: 400;\n  word-break: break-word;\n  overflow: hidden;\n  text-overflow: clip;\n"], ["\n  display: block;\n  margin: 4px 16px 16px 48px;\n  line-height: 21px;\n  font-weight: 400;\n  word-break: break-word;\n  overflow: hidden;\n  text-overflow: clip;\n"])));
 var StyledAction = styled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n  display: inline-block;\n  height: 21px;\n  float: right;\n  margin-right: -1px;\n  cursor: pointer;\n"], ["\n  display: inline-block;\n  height: 21px;\n  float: right;\n  margin-right: -1px;\n  cursor: pointer;\n"])));
 var StyledToast = styled.div(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  min-height: 56px;\n  line-height: 24px;\n  font-size: 14px;\n  user-select: none;\n"], ["\n  min-height: 56px;\n  line-height: 24px;\n  font-size: 14px;\n  user-select: none;\n"])));
 var StyledActionLabel = styled.label(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var templateObject_1$1r, templateObject_2$G, templateObject_3$p, templateObject_4$f, templateObject_5$9, templateObject_6$7, templateObject_7$7;
+var templateObject_1$1r, templateObject_2$F, templateObject_3$o, templateObject_4$f, templateObject_5$9, templateObject_6$7, templateObject_7$7;
 
 var typeMap$2 = {
     standard: 'dark',
@@ -3715,4 +3713,4 @@ var Toast = {
     standard: standard,
 };
 
-export { Accordion, AsyncCreatableSelect, AsyncSelect, Avatar, Badge, Banner, Button, Checkbox, Chip, ConfirmationModal, CreatableSelect, Drawer, Dropdown, DropdownTabs, GroupedList, Icon, IconBackground, IconButton, InlineMessage, InputHelper, InputText, MicroTag, Modal, ModalBody, ModalSearchable, PageEmptySet, Pagination, Progressbar, RadioButton, RadioButtonGroup, ScrollableTabs, Select, ShortcutTip, SidebarItem, Stepper, Table, Tag, TextArea, TextButton, ThemeProvider, Tip, Toast, Tooltip, WithBadge, sidebarItemHeight, useCheckboxValue };
+export { Accordion, AsyncCreatableSelect, AsyncSelect, Avatar, Badge, Banner, Button, Checkbox, Chip, ConfirmationModal, CreatableSelect, Drawer, Dropdown, DropdownTabs, GroupedList, Icon, IconBackground, IconButton, InlineMessage, InputHelper, InputText, MicroTag, Modal, ModalBody, ModalSearchable, PageEmptySet, Pagination, Progressbar, RadioButton, RadioButtonGroup, ScrollableTabs, Select, ShortcutTip, SidebarItem, Stepper, Table, Tag, TextArea, ThemeProvider, Tip, Toast, Tooltip, WithBadge, sidebarItemHeight, useCheckboxValue, useSelectMultiValues, useSelectValue };