@fattureincloud/fic-design-system 0.3.18 → 0.3.22

package/dist/index.esm.js

@@ -1,17 +1,18 @@
-import { faChevronDown, faTimes, faCheck, faMinus, faExclamationTriangle, faTimesCircle, faCheckCircle, faEllipsisH, faCaretRight, faInfoCircle, faSortUp, faSortDown, faSort, faEquals, faInfoSquare } from '@fortawesome/pro-solid-svg-icons';
-import React, { useCallback, Component, useRef, useEffect, useState, useMemo, useContext } from 'react';
-import styled, { css, createGlobalStyle, ThemeContext, ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import { faChevronDown, faTimes, faCheck, faMinus, faExclamationTriangle, faTimesCircle, faCheckCircle, faCaretDown, faEllipsisH, faCaretRight, faInfoCircle, faSortUp, faSortDown, faSort, faEquals, faInfoSquare } from '@fortawesome/pro-solid-svg-icons';
+import React, { useMemo, Component, useCallback, useRef, useEffect, useState } from 'react';
+import styled, { css, useTheme, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircleNotch, faCircle } from '@fortawesome/pro-regular-svg-icons';
 import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
 import { useClickAway, useMeasure, useDebounce } from 'react-use';
+import ReactSelect, { components as components$1 } from 'react-select';
+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 ReactModal from 'react-modal';
 import range from 'lodash/range';
-import ReactSelect from 'react-select';
-import AsyncSelect from 'react-select/async';
-import CreatableSelect from 'react-select/creatable';
 import _ from 'lodash';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { faRocket } from '@fortawesome/pro-duotone-svg-icons';
@@ -305,12 +306,12 @@ var getIconStyles = function (_a) {
 
 var Icon = function (_a) {
     var onClick = _a.onClick, isDisabled = _a.isDisabled, props = __rest(_a, ["onClick", "isDisabled"]);
-    var handleClick = useCallback(function (e) { return !isDisabled && (onClick === null || onClick === void 0 ? void 0 : onClick(e)); }, [isDisabled, onClick]);
+    var handleClick = useMemo(function () { return (isDisabled || !onClick ? undefined : function (e) { return onClick(e); }); }, [isDisabled, onClick]);
     return React.createElement(StyledIcon, __assign({}, props, { onClick: handleClick }));
 };
 var StyledIcon = styled(FontAwesomeIcon).attrs(getIconStyles)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  cursor: ", ";\n  color: ", ";\n  --fa-secondary-color: ", ";\n"], ["\n  cursor: ", ";\n  color: ", ";\n  --fa-secondary-color: ", ";\n"])), function (_a) {
-    var onClick = _a.onClick, isDisabled = _a.isDisabled;
-    return (!isDisabled && onClick ? 'pointer' : 'inherit');
+    var onClick = _a.onClick;
+    return (onClick ? 'pointer' : 'inherit');
 }, function (_a) {
     var primary = _a.primary;
     return primary;
@@ -335,10 +336,7 @@ var iconPalette = {
     fuchsia: getColoredIcon('fuchsia'),
     indigo: getColoredIcon('indigo'),
     pink: getColoredIcon('pink'),
-    grey: {
-        primary: defaultPalette.grey[500],
-        secondary: defaultPalette.grey[200],
-    },
+    grey: getColoredIcon('grey'),
     white: {
         primary: defaultPalette.white[100],
         secondary: defaultPalette.white[48],
@@ -534,11 +532,9 @@ var getButtonStyles = function (_a) {
     var actualSize = size || defaultSize;
     var actualColor = isDisabled ? 'disabled' : color || defaultColor;
     var border = actualType === 'primary' ? '1px solid rgba(9, 30, 66, 0.16)' : '';
-    var textDecoration = type === 'text' && !isDisabled ? 'underline' : '';
     var cursor = isDisabled ? 'default' : 'pointer';
     var buttonParts = theme.components.button[actualType][actualColor];
     return __assign({ height: heightMap[actualSize], border: border,
-        textDecoration: textDecoration,
         cursor: cursor }, buttonParts);
 };
 
@@ -551,7 +547,7 @@ var Content$1 = styled.div(templateObject_6 || (templateObject_6 = __makeTemplat
     var isLoading = _a.isLoading;
     return (isLoading ? 0 : 1);
 });
-var WrapperStyle = css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 4px;\n  user-select: none;\n  position: relative;\n  text-align: center;\n\n  width: ", ";\n\n  font-weight: 500;\n\n  cursor: ", ";\n  border: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n\n  ", " + * {\n    margin-left: 8px;\n  }\n\n  ", " + * {\n    margin-left: 8px;\n  }\n\n  color: ", ";\n  background-color: ", ";\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    ", " {\n      text-decoration: ", ";\n    }\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  padding: 0 12px;\n\n  display: inline-block;\n"], ["\n  border-radius: 4px;\n  user-select: none;\n  position: relative;\n  text-align: center;\n\n  width: ", ";\n\n  font-weight: 500;\n\n  cursor: ", ";\n  border: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n\n  ", " + * {\n    margin-left: 8px;\n  }\n\n  ", " + * {\n    margin-left: 8px;\n  }\n\n  color: ", ";\n  background-color: ", ";\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n    ", " {\n      text-decoration: ", ";\n    }\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  padding: 0 12px;\n\n  display: inline-block;\n"])), function (_a) {
+var WrapperStyle = css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: 4px;\n  user-select: none;\n  position: relative;\n  text-align: center;\n\n  width: ", ";\n\n  font-weight: 500;\n\n  cursor: ", ";\n  border: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n\n  ", " + * {\n    margin-left: 8px;\n  }\n\n  ", " + * {\n    margin-left: 8px;\n  }\n\n  color: ", ";\n  background-color: ", ";\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  padding: 0 12px;\n\n  display: inline-block;\n"], ["\n  border-radius: 4px;\n  user-select: none;\n  position: relative;\n  text-align: center;\n\n  width: ", ";\n\n  font-weight: 500;\n\n  cursor: ", ";\n  border: ", ";\n\n  ", " {\n    height: ", "px;\n  }\n\n  ", " + * {\n    margin-left: 8px;\n  }\n\n  ", " + * {\n    margin-left: 8px;\n  }\n\n  color: ", ";\n  background-color: ", ";\n\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  padding: 0 12px;\n\n  display: inline-block;\n"])), function (_a) {
     var fullWidth = _a.fullWidth;
     return (fullWidth ? '100%' : 'initial');
 }, function (_a) {
@@ -575,9 +571,6 @@ var WrapperStyle = css(templateObject_7 || (templateObject_7 = __makeTemplateObj
 }, function (_a) {
     var hover = _a.hover;
     return hover;
-}, Text$1, function (_a) {
-    var textDecoration = _a.textDecoration;
-    return textDecoration;
 }, function (_a) {
     var active = _a.active;
     return active;
@@ -589,14 +582,13 @@ var templateObject_1$7, templateObject_2$1, templateObject_3$1, templateObject_4
 var Button = function (_a) {
     var className = _a.className, color = _a.color, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, href = _a.href, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, onClick = _a.onClick, size = _a.size, target = _a.target, text = _a.text, type = _a.type;
     var debounceClick = useDebounceClick({ onClick: onClick, manualLock: isLoading || isDisabled });
-    var isTextButton = type === 'text';
     var showLoading = !isDisabled && isLoading;
-    var Wrapper = href ? HrefWrapper : OnClickWrapper;
+    var Wrapper = useCallback(function (props) { return (href ? React.createElement(HrefWrapper, __assign({}, props)) : React.createElement(OnClickWrapper, __assign({}, props))); }, [href]);
     return (React.createElement(Wrapper, { className: className, size: size, color: color, onClick: debounceClick, href: href, type: type, isDisabled: isDisabled, fullWidth: fullWidth, target: target },
         React.createElement(Content$1, { isLoading: showLoading },
-            !isTextButton && iconLeft && React.createElement(LeftIcon, __assign({}, iconLeft)),
+            iconLeft && React.createElement(LeftIcon, __assign({}, iconLeft)),
             text && React.createElement(Text$1, null, text),
-            !isTextButton && iconRight && React.createElement(RightIcon, __assign({}, iconRight))),
+            iconRight && React.createElement(RightIcon, __assign({}, iconRight))),
         showLoading && React.createElement(ButtonSpinner, null)));
 };
 
@@ -692,36 +684,36 @@ var buttonPalette = {
     text: {
         blue: {
             normal: 'transparent',
-            hover: 'transparent',
-            active: 'transparent',
+            hover: defaultPalette.blue[50],
+            active: defaultPalette.blue[100],
             text: defaultPalette.blue[500],
             textHover: defaultPalette.blue[500],
         },
         red: {
             normal: 'transparent',
-            hover: 'transparent',
-            active: 'transparent',
+            hover: defaultPalette.red[50],
+            active: defaultPalette.red[100],
             text: defaultPalette.red[500],
             textHover: defaultPalette.red[500],
         },
         green: {
             normal: 'transparent',
-            hover: 'transparent',
-            active: 'transparent',
+            hover: defaultPalette.green[50],
+            active: defaultPalette.green[100],
             text: defaultPalette.green[500],
             textHover: defaultPalette.green[500],
         },
         grey: {
             normal: 'transparent',
-            hover: 'transparent',
-            active: 'transparent',
+            hover: defaultPalette.grey[50],
+            active: defaultPalette.grey[100],
             text: defaultPalette.grey[500],
             textHover: defaultPalette.grey[500],
         },
         yellow: {
             normal: 'transparent',
-            hover: 'transparent',
-            active: 'transparent',
+            hover: defaultPalette.yellow[50],
+            active: defaultPalette.yellow[100],
             text: defaultPalette.yellow[500],
             textHover: defaultPalette.yellow[500],
         },
@@ -1171,8 +1163,8 @@ var DefaultTrigger = function (_a) {
 };
 
 var DropdownImpl = function (props) {
-    var alignRight = props.alignRight, className = props.className, content = props.content, fullWidth = props.fullWidth, maxWidth = props.maxWidth, _a = props.minWidthAsTrigger, minWidthAsTrigger = _a === void 0 ? false : _a, placement = props.placement, renderContent = props.renderContent, renderTrigger = props.renderTrigger, triggerStyles = props.triggerStyles, title = props.title, _b = props.forceOpen, forceOpen = _b === void 0 ? false : _b;
-    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var className = props.className, content = props.content, fullWidth = props.fullWidth, maxWidth = props.maxWidth, _a = props.minWidthAsTrigger, minWidthAsTrigger = _a === void 0 ? false : _a, _b = props.placement, placement = _b === void 0 ? 'bottom-start' : _b, renderContent = props.renderContent, renderTrigger = props.renderTrigger, triggerStyles = props.triggerStyles, title = props.title, _c = props.forceOpen, forceOpen = _c === void 0 ? false : _c;
+    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
     var toggleDropdown = useCallback(function (e) {
         setIsOpen(function (isOpen) { return !isOpen; });
         e.stopPropagation();
@@ -1186,11 +1178,9 @@ var DropdownImpl = function (props) {
     useClickAway(wrapperRef, function () { return closeDropdown(); });
     var popperRef = useRef(null);
     var buttonRef = useRef(null);
-    var _d = useState(null), arrowRef = _d[0], setArrowRef = _d[1];
-    // alignRight left for compatibility
-    var popperPlacement = placement ? placement : alignRight ? 'bottom-end' : 'bottom-start';
-    var _e = usePopper(buttonRef.current, popperRef.current, {
-        placement: popperPlacement,
+    var _e = useState(null), arrowRef = _e[0], setArrowRef = _e[1];
+    var _f = usePopper(buttonRef.current, popperRef.current, {
+        placement: placement,
         strategy: 'fixed',
         modifiers: useMemo(function () { return [
             {
@@ -1222,7 +1212,7 @@ var DropdownImpl = function (props) {
                 },
             },
         ]; }, [minWidthAsTrigger, arrowRef]),
-    }), attributes = _e.attributes, styles = _e.styles;
+    }), attributes = _f.attributes, styles = _f.styles;
     return (React.createElement(Wrapper$3, { className: className, ref: wrapperRef },
         React.createElement("div", { style: triggerStyles, ref: buttonRef, onClick: toggleDropdown },
             title && React.createElement(DefaultTrigger, { title: title }),
@@ -1364,7 +1354,7 @@ var InputHelper = function (_a) {
         message));
 };
 var StyledIcon$4 = styled(Icon)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  margin-top: 2px;\n"], ["\n  margin-top: 2px;\n"])));
-var Wrapper$4 = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n\n  width: 100%;\n  padding: 4px 8px;\n\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n\n  font-size: 12px;\n  line-height: 18px;\n\n  ", " {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n\n  width: 100%;\n  padding: 4px 8px;\n\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n\n  font-size: 12px;\n  line-height: 18px;\n\n  ", " {\n    color: ", ";\n  }\n"])), function (_a) {
+var Wrapper$4 = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n\n  padding: 4px 8px;\n\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n\n  font-size: 12px;\n  line-height: 18px;\n\n  ", " {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  background: ", ";\n  border-radius: 4px;\n\n  padding: 4px 8px;\n\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n\n  font-size: 12px;\n  line-height: 18px;\n\n  ", " {\n    color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme, status = _a.status;
     return theme.components.inputHelper[status].color;
 }, function (_a) {
@@ -1399,6 +1389,12 @@ var inputHelperPalette = {
     },
 };
 
+var ComplexInputWrapper = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 6px;\n  flex: 1;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 6px;\n  flex: 1;\n"])));
+var templateObject_1$o;
+
+var inputTextHTMLLabelBootstrapFixes = css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  cursor: default !important;\n  font-weight: 400 !important;\n  display: block !important;\n  margin-bottom: 0 !important;\n"], ["\n  cursor: default !important;\n  font-weight: 400 !important;\n  display: block !important;\n  margin-bottom: 0 !important;\n"])));
+var templateObject_1$p;
+
 var Label$1 = function (_a) {
     var label = _a.label, isDisabled = _a.isDisabled, required = _a.required;
     if (!label) {
@@ -1406,18 +1402,18 @@ var Label$1 = function (_a) {
     }
     return (React.createElement(Wrapper$5, { isDisabled: isDisabled, required: required }, label));
 };
-var requiredCss = css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  &:after {\n    color: ", ";\n    content: '*';\n    display: inline;\n  }\n"], ["\n  &:after {\n    color: ", ";\n    content: '*';\n    display: inline;\n  }\n"])), function (_a) {
+var requiredCss = css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  &:after {\n    color: ", ";\n    content: '*';\n    display: inline;\n  }\n"], ["\n  &:after {\n    color: ", ";\n    content: '*';\n    display: inline;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.red[500];
 });
-var Wrapper$5 = styled.label(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  font-size: 12px;\n  line-height: 18px;\n\n  color: ", ";\n  ", "\n"], ["\n  font-size: 12px;\n  line-height: 18px;\n\n  color: ", ";\n  ", "\n"])), function (_a) {
+var Wrapper$5 = styled.label(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n  font-size: 12px;\n  line-height: 18px;\n\n  color: ", ";\n  ", "\n\n  /* Bootstrap Fixes */\n  ", "\n"], ["\n  font-size: 12px;\n  line-height: 18px;\n\n  color: ", ";\n  ", "\n\n  /* Bootstrap Fixes */\n  ", "\n"])), function (_a) {
     var palette = _a.theme.palette, isDisabled = _a.isDisabled;
     return (isDisabled ? palette.grey[300] : palette.black[100]);
 }, function (_a) {
     var required = _a.required;
     return required && requiredCss;
-});
-var templateObject_1$o, templateObject_2$a;
+}, inputTextHTMLLabelBootstrapFixes);
+var templateObject_1$q, templateObject_2$a;
 
 var boxedInputWrapperStyle = css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n\n  border-radius: 4px;\n\n  transition: box-shadow 0.3s ease-in-out;\n\n  &:focus-within {\n    ", "\n  }\n"], ["\n  background: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n\n  border-radius: 4px;\n\n  transition: box-shadow 0.3s ease-in-out;\n\n  &:focus-within {\n    ",
     "\n  }\n"])), function (_a) {
@@ -1432,9 +1428,9 @@ var boxedInputWrapperStyle = css(templateObject_3$8 || (templateObject_3$8 = __m
 }, function (_a) {
     var status = _a.status, normalFocused = _a.normalFocused, borderColor = _a.borderColor;
     return status === 'normal'
-        ? css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n            box-shadow: 0 0 0 3px ", ";\n            border-color: ", ";\n          "], ["\n            box-shadow: 0 0 0 3px ", ";\n            border-color: ", ";\n          "])), normalFocused.borderColor + '85', normalFocused.borderColor) : css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n            box-shadow: 0 0 0 3px ", ";\n          "], ["\n            box-shadow: 0 0 0 3px ", ";\n          "])), borderColor + '85');
+        ? css(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n            box-shadow: 0 0 0 3px ", ";\n            border-color: ", ";\n          "], ["\n            box-shadow: 0 0 0 3px ", ";\n            border-color: ", ";\n          "])), normalFocused.borderColor + '85', normalFocused.borderColor) : css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n            box-shadow: 0 0 0 3px ", ";\n          "], ["\n            box-shadow: 0 0 0 3px ", ";\n          "])), borderColor + '85');
 });
-var templateObject_1$p, templateObject_2$b, templateObject_3$8;
+var templateObject_1$r, templateObject_2$b, templateObject_3$8;
 
 var warningIcon = {
     icon: faExclamationTriangle,
@@ -1462,20 +1458,30 @@ var StatusIcon = function (_a) {
     }
     return React.createElement(StyledIcon$5, __assign({}, icon, { status: status }));
 };
-var StyledIcon$5 = styled(Icon)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+var StyledIcon$5 = styled(Icon)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme, status = _a.status;
     return theme.components.inputText[status].iconColor;
 });
-var templateObject_1$q;
+var templateObject_1$s;
 
-var StyledInput = styled.input(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  background: transparent;\n  font-size: 14px;\n  font-family: inherit;\n\n  height: ", "px;\n\n  border: 0;\n  width: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  outline: none;\n"], ["\n  background: transparent;\n  font-size: 14px;\n  font-family: inherit;\n\n  height: ", "px;\n\n  border: 0;\n  width: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  outline: none;\n"])), function (_a) {
+var inputTextHTMLInputBootstrapFixes = css(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  font-weight: 400 !important;\n  line-height: normal !important;\n  vertical-align: baseline !important;\n  background: transparent !important;\n  font-size: 14px !important;\n  box-shadow: none !important;\n  border: 0 !important;\n  display: block !important;\n  height: ", "px !important;\n  padding: 1px 2px !important;\n  margin: 0 !important;\n  color: black !important;\n"], ["\n  font-weight: 400 !important;\n  line-height: normal !important;\n  vertical-align: baseline !important;\n  background: transparent !important;\n  font-size: 14px !important;\n  box-shadow: none !important;\n  border: 0 !important;\n  display: block !important;\n  height: ", "px !important;\n  padding: 1px 2px !important;\n  margin: 0 !important;\n  color: black !important;\n"])), function (_a) {
+    var inputSize = _a.inputSize;
+    return (inputSize === 'large' ? 40 : 30);
+});
+var templateObject_1$t;
+
+var StyledInput = styled.input(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  background: transparent;\n  font-size: 14px;\n  font-family: inherit;\n\n  height: ", "px;\n\n  border: 0;\n  width: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  ", "\n\n  outline: none;\n\n  /* Bootstrap Fixes */\n  ", "\n"], ["\n  background: transparent;\n  font-size: 14px;\n  font-family: inherit;\n\n  height: ", "px;\n\n  border: 0;\n  width: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  ",
+    "\n\n  outline: none;\n\n  /* Bootstrap Fixes */\n  ", "\n"])), function (_a) {
     var inputSize = _a.inputSize;
     return (inputSize === 'large' ? 40 : 30);
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[200];
-});
-var templateObject_1$r;
+}, function (_a) {
+    var type = _a.type;
+    return type === 'password' && css(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n      letter-spacing: 1px;\n    "], ["\n      letter-spacing: 1px;\n    "])));
+}, inputTextHTMLInputBootstrapFixes);
+var templateObject_1$u, templateObject_2$c;
 
 var getInputTextStyles = function (_a) {
     var theme = _a.theme, isDisabled = _a.isDisabled, _b = _a.status, status = _b === void 0 ? 'normal' : _b;
@@ -1503,23 +1509,21 @@ var InputElement = function (_a) {
         React.createElement(StatusIcon, { status: status }),
         actionIcon && React.createElement(InputIcon, __assign({}, actionIcon, { isDisabled: isDisabled }))));
 };
-var Wrapper$6 = styled.div.attrs(getInputTextStyles)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  ", ";\n\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  gap: 8px;\n  padding: 0 8px;\n"], ["\n  ", ";\n\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  gap: 8px;\n  padding: 0 8px;\n"])), boxedInputWrapperStyle);
-var InputIcon = styled(Icon)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  color: ", ";\n  font-size: 14px;\n"], ["\n  color: ", ";\n  font-size: 14px;\n"])), function (_a) {
+var Wrapper$6 = styled.div.attrs(getInputTextStyles)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  ", ";\n\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  gap: 8px;\n  padding: 0 8px;\n"], ["\n  ", ";\n\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  gap: 8px;\n  padding: 0 8px;\n"])), boxedInputWrapperStyle);
+var InputIcon = styled(Icon)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  color: ", ";\n  font-size: 14px;\n"], ["\n  color: ", ";\n  font-size: 14px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.black[100];
 });
-var templateObject_1$s, templateObject_2$c;
+var templateObject_1$v, templateObject_2$d;
 
 var InputText = function (props) {
     var label = props.label, className = props.className, inputProps = __rest(props, ["label", "className"]);
     var isDisabled = props.isDisabled, required = props.required, helper = props.helper;
-    return (React.createElement(Wrapper$7, { className: className },
+    return (React.createElement(ComplexInputWrapper, { className: className },
         React.createElement(Label$1, { label: label, isDisabled: isDisabled, required: required }),
         React.createElement(InputElement, __assign({}, inputProps)),
         helper && React.createElement(InputHelper, __assign({}, helper))));
-};
-var Wrapper$7 = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 6px;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 6px;\n"])));
-var templateObject_1$t;
+};
 
 var inputTextPalette = {
     normal: {
@@ -1559,11 +1563,230 @@ var inputTextPalette = {
     },
 };
 
-var StyledTextArea = styled.textarea(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  resize: none;\n\n  background: transparent;\n  font-size: 14px;\n  font-family: inherit;\n\n  border: 0;\n  padding: 8px;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  outline: none;\n"], ["\n  resize: none;\n\n  background: transparent;\n  font-size: 14px;\n  font-family: inherit;\n\n  border: 0;\n  padding: 8px;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  outline: none;\n"])), function (_a) {
+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]);
+    return React.createElement(CaretIcon, { icon: faTimes$1, onClick: onClick });
+};
+var CaretIcon = styled(Icon)(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  margin: 0.5em;\n"], ["\n  margin: 0.5em;\n"])));
+var templateObject_1$w;
+
+var Control = function (_a) {
+    var onMouseDown = _a.innerProps.onMouseDown, children = _a.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;
+
+var DropdownIndicator = function (_a) {
+    var selectProps = _a.selectProps;
+    return (React.createElement(Wrapper$8, { isRotated: selectProps.menuIsOpen },
+        React.createElement(Icon, { icon: faCaretDown })));
+};
+var Wrapper$8 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  margin: 0.5em;\n\n  transition: transform 250ms ease;\n  transform: rotate(", "deg);\n"], ["\n  margin: 0.5em;\n\n  transition: transform 250ms ease;\n  transform: rotate(", "deg);\n"])), function (_a) {
+    var isRotated = _a.isRotated;
+    return (isRotated ? 180 : 0);
+});
+var templateObject_1$y;
+
+var FooterActions = function (_a) {
+    var actions = _a.actions, triggerClose = _a.triggerClose;
+    var mappedActions = useMemo(function () {
+        return actions.map(function (_a, id) {
+            var onClick = _a.onClick, closeOnClick = _a.closeOnClick, rest = __rest(_a, ["onClick", "closeOnClick"]);
+            return (React.createElement(FooterItem, __assign({ key: id, onClick: function (e) {
+                    e.stopPropagation();
+                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+                    closeOnClick && triggerClose();
+                } }, rest)));
+        });
+    }, [actions]);
+    return React.createElement(Wrapper$9, null, mappedActions);
+};
+var Wrapper$9 = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n"], ["\n  border-top: 1px solid ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[100];
+});
+var FooterItem = styled(Item)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  padding: 5px 10px;\n"], ["\n  padding: 5px 10px;\n"])));
+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 === 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(components$1.MenuList, __assign({}, rest),
+            children,
+            footerActions && React.createElement(FooterActions, { actions: footerActions, triggerClose: triggerClose }))));
+};
+var Wrapper$a = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject([""], [""])));
+var templateObject_1$A;
+
+var Option = function (_a) {
+    var onClick = _a.innerProps.onClick, _b = _a.data, label = _b.label, icon = _b.icon;
+    return (React.createElement(Wrapper$b, { onClick: onClick },
+        icon && React.createElement(Icon, __assign({}, icon)),
+        React.createElement("div", null, label)));
+};
+var Wrapper$b = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  height: 32px;\n\n  cursor: pointer;\n\n  font-size: 14px;\n\n  display: flex;\n  align-items: center;\n  gap: 6px;\n\n  padding: 0 10px;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  height: 32px;\n\n  cursor: pointer;\n\n  font-size: 14px;\n\n  display: flex;\n  align-items: center;\n  gap: 6px;\n\n  padding: 0 10px;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[100];
+});
+var templateObject_1$B;
+
+var Placeholder = function (_a) {
+    var children = _a.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;
     return theme.palette.grey[200];
 });
-var templateObject_1$u;
+var templateObject_1$C;
+
+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;
+    var actualStatus = isDisabled ? 'disabled' : status;
+    var styles = theme.components.select[actualStatus];
+    return __assign(__assign({}, styles), { normalFocused: theme.components.select['normalFocused'] });
+};
+
+var useSelectThemeStyles = function (_a) {
+    var status = _a.status, isDisabled = _a.isDisabled;
+    var theme = useTheme();
+    var color = getSelectStyles({ theme: theme, status: status, isDisabled: isDisabled }).color;
+    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 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);
+}, selectBootstrapFixes);
+var templateObject_1$E;
+
+var SelectsWrapper = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    var label = rest.label, isDisabled = rest.isDisabled, required = rest.required, helper = rest.helper, _b = rest.status, status = _b === void 0 ? 'normal' : _b, inputSize = rest.inputSize;
+    return (React.createElement(ComplexInputWrapper, null,
+        React.createElement(Label$1, { label: label, isDisabled: isDisabled, required: required }),
+        React.createElement(SelectWrapper, { isDisabled: isDisabled, status: status, inputSize: inputSize }, children),
+        helper && React.createElement(InputHelper, __assign({}, helper))));
+};
+var Select = function (props) {
+    var _a = props.status, status = _a === void 0 ? 'normal' : _a, components = props.components;
+    var styles = useSelectThemeStyles({ status: status });
+    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 = 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 = 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 = 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 = {
+    normal: {
+        background: defaultPalette.white[100],
+        color: defaultPalette.black[100],
+        iconColor: defaultPalette.black[100],
+        borderColor: defaultPalette.grey[500],
+    },
+    normalFocused: {
+        background: defaultPalette.white[100],
+        color: defaultPalette.black[100],
+        iconColor: defaultPalette.black[100],
+        borderColor: defaultPalette.blue[300],
+    },
+    success: {
+        background: defaultPalette.green[50],
+        color: defaultPalette.black[100],
+        iconColor: defaultPalette.green[900],
+        borderColor: defaultPalette.green[300],
+    },
+    warning: {
+        background: defaultPalette.yellow[50],
+        color: defaultPalette.black[100],
+        iconColor: defaultPalette.yellow[900],
+        borderColor: defaultPalette.yellow[300],
+    },
+    error: {
+        background: defaultPalette.red[50],
+        color: defaultPalette.black[100],
+        iconColor: defaultPalette.red[900],
+        borderColor: defaultPalette.red[300],
+    },
+    disabled: {
+        background: defaultPalette.grey[100],
+        color: defaultPalette.black[16],
+        iconColor: defaultPalette.black[16],
+        borderColor: 'transparent',
+    },
+};
+
+var CharCounter = function (_a) {
+    var length = _a.length, maxLength = _a.maxLength;
+    return (React.createElement(Wrapper$d, null,
+        length,
+        maxLength && "/" + maxLength));
+};
+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$F;
+
+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$H;
 
 var getTextAreaStyles = function (_a) {
     var theme = _a.theme, isDisabled = _a.isDisabled, _b = _a.status, status = _b === void 0 ? 'normal' : _b;
@@ -1573,37 +1796,44 @@ var getTextAreaStyles = function (_a) {
 };
 
 var TextAreaElement = function (_a) {
-    var autoFocus = _a.autoFocus, onBlur = _a.onBlur, onChange = _a.onChange, _b = _a.value, value = _b === void 0 ? '' : _b, placeholder = _a.placeholder, isDisabled = _a.isDisabled, name = _a.name, onKeyPress = _a.onKeyPress, _c = _a.status, status = _c === void 0 ? 'normal' : _c, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onFocus = _a.onFocus, className = _a.className, setValue = _a.setValue, _d = _a.initialHeight, initialHeight = _d === void 0 ? '10rem' : _d;
+    var autoFocus = _a.autoFocus, onBlur = _a.onBlur, onChange = _a.onChange, _b = _a.value, value = _b === void 0 ? '' : _b, placeholder = _a.placeholder, isDisabled = _a.isDisabled, name = _a.name, onKeyPress = _a.onKeyPress, _c = _a.status, status = _c === void 0 ? 'normal' : _c, onKeyDown = _a.onKeyDown, onKeyUp = _a.onKeyUp, onFocus = _a.onFocus, className = _a.className, setValue = _a.setValue, _d = _a.initialHeight, initialHeight = _d === void 0 ? '10rem' : _d, maxLength = _a.maxLength, _e = _a.isResizable, isResizable = _e === void 0 ? false : _e, _f = _a.showCounter, showCounter = _f === void 0 ? false : _f;
     var ref = useRef(null);
     var onClick = useCallback(function () { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus(); }, []);
     var actualValue = (value === null || value === void 0 ? void 0 : value.toString()) || '';
     var handleChange = useCallback(function (e) {
-        setValue === null || setValue === void 0 ? void 0 : setValue(e.currentTarget.value);
+        setValue === null || setValue === void 0 ? void 0 : setValue(e.currentTarget.value.slice(0, maxLength || Infinity));
         onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }, [onChange, setValue]);
+    }, [maxLength, onChange, setValue]);
+    useEffect(function () {
+        setValue === null || setValue === void 0 ? void 0 : setValue(value === null || value === void 0 ? void 0 : value.slice(0, maxLength || Infinity));
+    }, [maxLength, setValue, value]);
     var handleBlur = useCallback(function (e) {
         setValue === null || setValue === void 0 ? void 0 : setValue(e.target.value.trim());
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
     }, [onBlur, setValue]);
-    return (React.createElement(Wrapper$8, { onClick: onClick, isDisabled: isDisabled, status: status, className: className, initialHeight: initialHeight },
-        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 })));
+    return (React.createElement(Wrapper$e, { onClick: onClick, isDisabled: isDisabled, status: status, className: className, initialHeight: initialHeight, isResizable: isResizable },
+        React.createElement(FlexWrapper, null,
+            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 Wrapper$8 = styled.div.attrs(getTextAreaStyles)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  ", ";\n\n  resize: vertical;\n  overflow: hidden;\n\n  height: ", ";\n"], ["\n  ", ";\n\n  resize: vertical;\n  overflow: hidden;\n\n  height: ", ";\n"])), boxedInputWrapperStyle, function (_a) {
+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');
+}, function (_a) {
     var initialHeight = _a.initialHeight;
     return initialHeight;
 });
-var templateObject_1$v;
+var templateObject_1$I, templateObject_2$f;
 
 var TextArea = function (props) {
-    var label = props.label, inputProps = __rest(props, ["label"]);
+    var label = props.label, className = props.className, inputProps = __rest(props, ["label", "className"]);
     var isDisabled = props.isDisabled, required = props.required, helper = props.helper;
-    return (React.createElement(Wrapper$9, null,
+    return (React.createElement(ComplexInputWrapper, { className: className },
         React.createElement(Label$1, { label: label, isDisabled: isDisabled, required: required }),
         React.createElement(TextAreaElement, __assign({}, inputProps)),
         helper && React.createElement(InputHelper, __assign({}, helper))));
-};
-var Wrapper$9 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 6px;\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 6px;\n"])));
-var templateObject_1$w;
+};
 
 var textAreaPalette = {
     normal: {
@@ -1713,11 +1943,11 @@ var ItemElement = function (props) {
             removeEventListener('keydown', handleKeyDown);
         }, showActionOnHover: showActionOnHover, "data-grouped-list-item": index },
         icon && React.createElement(LeftIcon$1, __assign({}, icon, { fixedWidth: true })),
-        title ? React.createElement(Title$1, null, title) : React.createElement(Placeholder, null, placeholder),
+        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$x || (templateObject_1$x = __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 = styled(Title$1)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+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];
 });
@@ -1744,7 +1974,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$x, templateObject_2$d, 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;
@@ -1752,11 +1982,11 @@ var TitleElement = function (props) {
         title.toUpperCase(),
         noResults && React.createElement(NoResultsWrapper, null, "(nessun risultato)")));
 };
-var TitleElementWrapper = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  &:not(:first-child) {\n    margin-top: 16px;\n  }\n\n  margin-bottom: 1px;\n  ", ";\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"], ["\n  &:not(:first-child) {\n    margin-top: 16px;\n  }\n\n  margin-bottom: 1px;\n  ",
+var TitleElementWrapper = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  &:not(:first-child) {\n    margin-top: 16px;\n  }\n\n  margin-bottom: 1px;\n  ", ";\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"], ["\n  &:not(:first-child) {\n    margin-top: 16px;\n  }\n\n  margin-bottom: 1px;\n  ",
     ";\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$y || (templateObject_1$y = __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];
@@ -1765,7 +1995,7 @@ var NoResultsWrapper = styled.span(templateObject_3$a || (templateObject_3$a = _
     var theme = _a.theme;
     return theme.palette.grey[700];
 });
-var templateObject_1$y, templateObject_2$e, 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"]);
@@ -1815,37 +2045,37 @@ var GroupedList = function (props) {
     }); }, [mouseBlocked, setMouseBlocked]);
     var wrapperRef = useRef(null);
     var i = 1;
-    return (React.createElement(Wrapper$a, { style: wrapperStyle, ref: wrapperRef, className: className }, groups.map(function (group, index) {
+    return (React.createElement(Wrapper$f, { style: wrapperStyle, ref: wrapperRef, className: className }, groups.map(function (group, index) {
         var oldI = i;
         i += group.items.length;
         return (React.createElement(GroupElement, __assign({ key: index }, group, { mouseBlockedProps: mouseBlockedProps, navigable: navigable, index: oldI, wrapperRef: wrapperRef, placeholder: placeholder })));
     })));
 };
-var Wrapper$a = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var templateObject_1$z;
+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$f || (templateObject_2$f = __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  ",
+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$A || (templateObject_1$A = __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$A, templateObject_2$f;
+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$B || (templateObject_1$B = __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$g || (templateObject_2$g = __makeTemplateObject(["\n      border: 5px solid ", ";\n    "], ["\n      border: 5px solid ", ";\n    "])), theme.palette.blue[500]);
+    return isChecked && css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n      border: 5px solid ", ";\n    "], ["\n      border: 5px solid ", ";\n    "])), theme.palette.blue[500]);
 }, function (_a) {
     var isChecked = _a.isChecked, isDisabled = _a.isDisabled, theme = _a.theme;
     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$B, templateObject_2$g, 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;
@@ -1853,14 +2083,14 @@ var WrapperRadioButton = function (props) {
         React.createElement(Radio, { isChecked: props.isChecked, isDisabled: props.isDisabled }),
         React.createElement(Label$2, { isDisabled: props.isDisabled }, props.label)))));
 };
-var Wrapper$b = styled(WrapperRadioButton)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n  & + & {\n    margin-top: ", "px;\n  }\n  ", "\n"], ["\n  & + & {\n    margin-top: ", "px;\n  }\n  ",
+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$C || (templateObject_1$C = __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$b, __assign({}, props));
+    return React.createElement(Wrapper$g, __assign({}, props));
 };
-var templateObject_1$C, templateObject_2$h;
+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) {
@@ -1871,10 +2101,10 @@ var RadioButtonGroup = function (props) { return (React.createElement("div", { s
 var colorSetter = function (type, theme) {
     switch (type) {
         case 'standard': {
-            return css(templateObject_1$D || (templateObject_1$D = __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$i || (templateObject_2$i = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.blue[50], theme.palette.blue[500]);
+            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]);
         }
         case 'error': {
             return css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.red[50], theme.palette.red[500]);
@@ -1916,7 +2146,7 @@ var StyledCloseIcon = styled(Icon)(templateObject_16 || (templateObject_16 = __m
     var palette = _a.theme.palette;
     return palette.blue[700];
 });
-var templateObject_1$D, templateObject_2$i, 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,
@@ -1940,24 +2170,29 @@ 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$E || (templateObject_1$E = __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%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
 };
 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$E;
+var templateObject_1$Q;
 
-var SidebarItemCaret = styled.div(templateObject_1$F || (templateObject_1$F = __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$F;
+var templateObject_1$R;
 
 var getSidebarItemStyles = function (_a) {
     var isActive = _a.isActive, isDisabled = _a.isDisabled, theme = _a.theme;
@@ -1966,22 +2201,24 @@ var getSidebarItemStyles = function (_a) {
 };
 
 var sidebarItemHeight = 44;
-var SidebarItem = function (_a) {
-    var _b = _a.caretVisible, caretVisible = _b === void 0 ? false : _b, className = _a.className, dropdownContent = _a.dropdownContent, icon = _a.icon, _c = _a.isActive, isActive = _c === void 0 ? false : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isHidden, isHidden = _e === void 0 ? false : _e, _f = _a.isOpen, isOpen = _f === void 0 ? false : _f, onClick = _a.onClick, title = _a.title, forceOpenDropdown = _a.forceOpenDropdown;
+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;
     if (isHidden) {
         return null;
     }
-    return (React.createElement(SidebarItemWrapper, { isActive: isActive, isDisabled: isDisabled, className: className, onClick: onClick },
+    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 },
         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, title),
+        React.createElement(Title$2, null, content),
         !isDisabled && dropdownContent && React.createElement(Dropdown$1, { content: dropdownContent, forceOpen: forceOpenDropdown })));
 };
-var Dropdown$1 = styled(SidebarItemDropdown)(templateObject_1$G || (templateObject_1$G = __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$j || (templateObject_2$j = __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 color = _a.color;
-    return color;
+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.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 color = _a.color, customColor = _a.customColor;
+    return customColor || color;
 }, function (_a) {
     var background = _a.background;
     return background;
@@ -2000,7 +2237,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$G, templateObject_2$j, templateObject_3$d, templateObject_4$8;
+var templateObject_1$S, templateObject_2$m, templateObject_3$d, templateObject_4$8;
 
 var sidebarItemPalette = {
     normal: {
@@ -2034,14 +2271,14 @@ var getMicroTagStyles = function (_a) {
     return theme.components.microTag[type];
 };
 
-var MicroTagBody = styled.div.attrs(getMicroTagStyles)(templateObject_1$H || (templateObject_1$H = __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$H;
+var templateObject_1$T;
 
 var MicroTag = function (_a) {
     var text = _a.text, type = _a.type;
@@ -2080,13 +2317,13 @@ var checkIcon = React.createElement(Icon, { icon: faCheck, fixedWidth: true });
 var StepItem = function (_a) {
     var _b = _a.text, text = _b === void 0 ? '' : _b, number = _a.number, status = _a.status;
     var content = status === 'completed' ? checkIcon : number + 1;
-    return (React.createElement(Wrapper$c, { status: status },
+    return (React.createElement(Wrapper$h, { status: status },
         React.createElement(Circle, null, content),
         React.createElement(Text$2, null, text)));
 };
-var Circle = styled.div(templateObject_1$I || (templateObject_1$I = __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$k || (templateObject_2$k = __makeTemplateObject([""], [""])));
-var Wrapper$c = 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 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;
     return circleTextColor;
 }, function (_a) {
@@ -2096,10 +2333,10 @@ var Wrapper$c = styled.div.attrs(getStepItemStyles)(templateObject_3$e || (templ
     var color = _a.color;
     return color;
 });
-var templateObject_1$I, templateObject_2$k, templateObject_3$e;
+var templateObject_1$U, templateObject_2$n, templateObject_3$e;
 
-var StepperDivider = styled.div(templateObject_1$J || (templateObject_1$J = __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$J;
+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) {
@@ -2128,10 +2365,10 @@ var Stepper = function (_a) {
             }
         }, []);
     }, [steps, currentStep]);
-    return React.createElement(Wrapper$d, null, mappedSteps);
+    return React.createElement(Wrapper$i, null, mappedSteps);
 };
-var Wrapper$d = styled.div(templateObject_1$K || (templateObject_1$K = __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$K;
+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: {
@@ -2158,8 +2395,8 @@ var getTagColors = function (_a) {
     return theme.components.tag[tagStyle][type];
 };
 
-var LeftIcon$2 = styled(Icon)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject([""], [""])));
-var RightIcon$1 = styled(Icon)(templateObject_2$l || (templateObject_2$l = __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) {
     var color = _a.color;
@@ -2168,7 +2405,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$L, templateObject_2$l, 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;
@@ -2247,28 +2484,28 @@ var tagPalette = {
     },
 };
 
-var Arrow = styled.div(templateObject_1$M || (templateObject_1$M = __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$m || (templateObject_2$m = __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$M, templateObject_2$m;
+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$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$N || (templateObject_1$N = __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$N;
+var templateObject_1$Z;
 
-var TooltipContainer = styled.div(templateObject_1$O || (templateObject_1$O = __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$O;
+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;
@@ -2315,7 +2552,7 @@ var Tooltip = function (_a) {
             },
         ]; }, [arrowRef]),
     }), attributes = _d.attributes, styles = _d.styles;
-    return (React.createElement(Wrapper$e, { className: className, ref: wrapperRef },
+    return (React.createElement(Wrapper$j, { className: className, ref: wrapperRef },
         React.createElement("div", { ref: buttonRef, onClick: show, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave }, children),
         React.createElement(CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
             React.createElement(BodyAnimationWrapper$1, null,
@@ -2323,9 +2560,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$e = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var BodyAnimationWrapper$1 = styled.div(templateObject_2$n || (templateObject_2$n = __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$P, templateObject_2$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 tooltipPalette = {
     light: {
@@ -2353,14 +2590,15 @@ var components = {
     inputText: inputTextPalette,
     textArea: textAreaPalette,
     inputHelper: inputHelperPalette,
+    select: selectPalette,
 };
 var defaultTheme = {
     palette: defaultPalette,
     components: components,
 };
 
-var ModalAnimation = createGlobalStyle(templateObject_1$Q || (templateObject_1$Q = __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$Q;
+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) {
@@ -2374,13 +2612,13 @@ var styledModalBoxWidth = function (isSmall, isFullscreen) {
 
 var headerFooterHeight = '80px';
 var closeTimeoutMS = 200;
-var StyledReactModalContainer = styled(ReactModal)(templateObject_1$R || (templateObject_1$R = __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) {
     var fullScreenHeight = _a.fullScreenHeight, isFullscreen = _a.isFullscreen;
     return isFullscreen
-        ? css(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n          height: ", "px;\n        "], ["\n          height: ", "px;\n        "])), fullScreenHeight) : css(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n          min-height: 200px;\n        "], ["\n          min-height: 200px;\n        "])));
+        ? css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n          height: ", "px;\n        "], ["\n          height: ", "px;\n        "])), fullScreenHeight) : css(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n          min-height: 200px;\n        "], ["\n          min-height: 200px;\n        "])));
 }, function (props) {
     return props.isFullscreen ? 'none' : 'rgba(23, 43, 77, 0.24) 0px 16px 24px, rgba(9, 30, 66, 0.08) 0px 0px 0px';
 }, function (props) { return (props.isFullscreen ? 0 : '1px solid rgb(204, 204, 204)'); }, function (props) { return (props.isFullscreen ? 0 : 8); }, function (props) { return (props.isFullscreen ? 100 : 96); }, function (_a) {
@@ -2419,14 +2657,14 @@ var ModalFooter = styled.div(templateObject_12$1 || (templateObject_12$1 = __mak
     var palette = _a.theme.palette;
     return palette.grey[100];
 });
-var Wrapper$f = styled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject([""], [""])));
+var Wrapper$k = styled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject([""], [""])));
 var TopAttachment = styled.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  top: ", ";\n"], ["\n  position: absolute;\n  width: 100%;\n  top: ", ";\n"])), function (_a) {
     var height = _a.height;
     return height && -(height + 16) + "px";
 });
 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$R, templateObject_2$o, 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 = {
@@ -2516,7 +2754,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$S || (templateObject_1$S = __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) {
@@ -2529,21 +2767,21 @@ var ClearButton = styled.div(templateObject_1$S || (templateObject_1$S = __makeT
     var visible = _a.visible;
     return (visible ? 'inherit' : 'none');
 });
-var WrapperInput = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  caret-color: ", ";\n  input[type='text'].inputSearchable:focus {\n    outline: none !important;\n    box-shadow: none !important;\n  }\n\n  > input {\n    width: 100%;\n    margin-left: 4px;\n    background-color: ", " !important;\n    border: none;\n    font-size: 20px !important;\n    top: 6px;\n    outline: none;\n    box-shadow: none;\n  }\n\n  > input,\n  input::-webkit-input-placeholder {\n    font-size: 20px;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  caret-color: ", ";\n  input[type='text'].inputSearchable:focus {\n    outline: none !important;\n    box-shadow: none !important;\n  }\n\n  > input {\n    width: 100%;\n    margin-left: 4px;\n    background-color: ", " !important;\n    border: none;\n    font-size: 20px !important;\n    top: 6px;\n    outline: none;\n    box-shadow: none;\n  }\n\n  > input,\n  input::-webkit-input-placeholder {\n    font-size: 20px;\n  }\n"])), function (_a) {
+var WrapperInput = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  caret-color: ", ";\n  input[type='text'].inputSearchable:focus {\n    outline: none !important;\n    box-shadow: none !important;\n  }\n\n  > input {\n    width: 100%;\n    margin-left: 4px;\n    background-color: ", " !important;\n    border: none;\n    font-size: 20px !important;\n    top: 6px;\n    outline: none;\n    box-shadow: none;\n  }\n\n  > input,\n  input::-webkit-input-placeholder {\n    font-size: 20px;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  caret-color: ", ";\n  input[type='text'].inputSearchable:focus {\n    outline: none !important;\n    box-shadow: none !important;\n  }\n\n  > input {\n    width: 100%;\n    margin-left: 4px;\n    background-color: ", " !important;\n    border: none;\n    font-size: 20px !important;\n    top: 6px;\n    outline: none;\n    box-shadow: none;\n  }\n\n  > input,\n  input::-webkit-input-placeholder {\n    font-size: 20px;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.blue[300];
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[50];
 });
-var templateObject_1$S, templateObject_2$p;
+var templateObject_1$12, templateObject_2$s;
 
-var CustomSizeModal = styled(Modal)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  width: 432px;\n  max-width: 90vw;\n"], ["\n  width: 432px;\n  max-width: 90vw;\n"])));
-var TitleContent = styled.div(templateObject_2$q || (templateObject_2$q = __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 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$T, templateObject_2$q, 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',
@@ -2582,10 +2820,10 @@ var ConfirmationModal = function (props) {
                     props.onAction();
                 } }))));
 };
-var StyledButton = styled(Button)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  margin-left: 16px;\n"], ["\n  margin-left: 16px;\n"])));
-var templateObject_1$U;
+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$V || (templateObject_1$V = __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) {
@@ -2610,14 +2848,14 @@ var PageEmptySet = function (_a) {
         text && React.createElement("p", null, text),
         button));
 };
-var templateObject_1$V;
+var templateObject_1$15;
 
-var StyledWrapper$1 = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
+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$W || (templateObject_1$W = __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$W, templateObject_2$r;
+var templateObject_1$16, templateObject_2$u;
 
 var PaginationComponent = function (props) {
     var numberOfPages = Math.ceil(props.listSize / props.pageSize);
@@ -2655,12 +2893,12 @@ var PaginationComponent = function (props) {
 var Pagination = function (props) { return (React.createElement(StyledWrapper$1, null,
     React.createElement(PaginationComponent, __assign({}, props)))); };
 
-var StyledProgressbarWrapper = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
+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$X || (templateObject_1$X = __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$X, templateObject_2$s;
+var templateObject_1$17, templateObject_2$v;
 
 var UnstyledProgressbar = /** @class */ (function (_super) {
     __extends(UnstyledProgressbar, _super);
@@ -2678,92 +2916,7 @@ var UnstyledProgressbar = /** @class */ (function (_super) {
 var Progressbar = function (props) { return (React.createElement(StyledProgressbarWrapper, __assign({}, props),
     React.createElement(UnstyledProgressbar, __assign({}, props)))); };
 
-var elevations = {
-    first: '0px 1px 2px 0px rgba(51, 51, 51, 0.24)',
-    second: '0px 2px 4px rgba(51, 51, 51, 0.12), 0px 3px 6px rgba(51, 51, 51, 0.15)',
-    third: '0px 3px 6px 0px rgba(51, 51, 51, 0.1)',
-    fourth: '0px 5px 10px 0px rgba(51, 51, 51, 0.05)',
-    fifth: '0px 20px 40px 0px rgba(51, 51, 51, 0.2)',
-};
-
-var styles = {
-    fontSize: {
-        medium: '14px',
-        large: '14px',
-    },
-    minHeight: {
-        medium: '30px',
-        large: '38px',
-    },
-};
-var indicatorSeparator = function (baseStyle) { return (__assign(__assign({}, baseStyle), { display: 'none' })); };
-var singleValue = function (baseStyle) { return (__assign(__assign({}, baseStyle), { top: '45%' })); };
-var clearIndicator = function (baseStyle) { return (__assign(__assign({}, baseStyle), { padding: '5px' })); };
-var dropdownIndicator = function (baseStyle) { return (__assign(__assign({}, baseStyle), { border: 'none', padding: '5px' })); };
-var multiValue = function (baseStyle) { return (__assign(__assign({}, baseStyle), { borderRadius: '100px' })); };
-var menu = function (baseStyle) { return (__assign(__assign({}, baseStyle), { boxShadow: elevations.second, borderRadius: '4px', fontSize: '14px', lineHeight: '21px' })); };
-
-var useCustomSelectStyle = function (size) {
-    if (size === void 0) { size = 'medium'; }
-    var themeContext = useContext(ThemeContext);
-    var container = useCallback(function (baseStyle) { return (__assign(__assign({}, baseStyle), { outline: 'none', fontSize: styles.fontSize[size], height: styles.minHeight[size], minHeight: styles.minHeight[size] })); }, [size]);
-    var valueContainer = useCallback(function (baseStyle) { return (__assign(__assign({}, baseStyle), { height: styles.minHeight[size], minHeight: styles.minHeight[size] })); }, [size]);
-    var control = useCallback(function (baseStyle, state) {
-        if (state.isFocused) {
-            return __assign(__assign({}, baseStyle), { border: "1px solid " + themeContext.palette.blue[300], boxShadow: "0 0 0 2px " + themeContext.palette.blue[100], outline: 'none', height: styles.minHeight[size], minHeight: styles.minHeight[size] });
-        }
-        else {
-            return __assign(__assign({}, baseStyle), { outline: 'none', height: styles.minHeight[size], minHeight: styles.minHeight[size] });
-        }
-    }, [size, themeContext]);
-    return useMemo(function () { return ({
-        indicatorSeparator: indicatorSeparator,
-        container: container,
-        valueContainer: valueContainer,
-        singleValue: singleValue,
-        control: control,
-        clearIndicator: clearIndicator,
-        dropdownIndicator: dropdownIndicator,
-        multiValue: multiValue,
-        menu: menu,
-    }); }, [container, control, valueContainer]);
-};
-
-var ReactSelectWrapper = function (props) {
-    var getRef = props.getRef, inputChange = props.inputChange, isClearable = props.isClearable, isMulti = props.isMulti, size = props.size;
-    var styles = useCustomSelectStyle(size);
-    return (React.createElement(ReactSelect, __assign({}, props, { isMulti: isMulti, backspaceRemoves: true, deleteRemoves: false, autosize: false, noOptionsMessage: function () { return 'Nessuna corrispondenza trovata'; }, styles: styles, isClearable: isClearable, onInputChange: inputChange, ref: getRef })));
-};
-var StyledWrapper$2 = styled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n  .label {\n    font-size: 14px;\n    line-height: 21px;\n    margin-bottom: 4px;\n    display: block;\n    color: ", ";\n  }\n"], ["\n  .label {\n    font-size: 14px;\n    line-height: 21px;\n    margin-bottom: 4px;\n    display: block;\n    color: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.black[100];
-});
-var Select = function (props) {
-    var label = props.label;
-    var theme = props.theme, rest = __rest(props, ["theme"]);
-    return (React.createElement(StyledWrapper$2, __assign({}, rest),
-        label ? React.createElement("label", { className: 'label' }, label) : null,
-        React.createElement(ReactSelectWrapper, __assign({}, props))));
-};
-var SelectCreatable = function (props) {
-    var isClearable = props.isClearable, isMulti = props.isMulti, label = props.label, size = props.size;
-    var theme = props.theme, rest = __rest(props, ["theme"]);
-    var styles = useCustomSelectStyle(size);
-    return (React.createElement(StyledWrapper$2, __assign({}, rest),
-        label ? React.createElement("label", { className: 'label' }, label) : null,
-        React.createElement(CreatableSelect, __assign({}, props, { isMulti: isMulti, backspaceRemoves: true, deleteRemoves: true, autosize: false, noOptionsMessage: function () { return 'Nessuna corrispondenza trovata'; }, styles: styles, isClearable: isClearable }))));
-};
-var SelectAsync = function (props) {
-    var isClearable = props.isClearable, label = props.label, size = props.size;
-    var theme = props.theme, rest = __rest(props, ["theme"]);
-    var styles = useCustomSelectStyle(size);
-    return (React.createElement(StyledWrapper$2, __assign({}, rest),
-        label ? React.createElement("label", { className: 'label' }, label) : null,
-        React.createElement(AsyncSelect, __assign({}, props, { backspaceRemoves: true, deleteRemoves: true, autosize: false, noOptionsMessage: function () { return 'Nessuna corrispondenza trovata'; }, styles: styles, isClearable: isClearable }))));
-};
-var templateObject_1$Y;
-
-var linearBackground = function () { return css(templateObject_1$Z || (templateObject_1$Z = __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) {
@@ -2776,7 +2929,7 @@ var linearBackground = function () { return css(templateObject_1$Z || (templateO
     var theme = _a.theme;
     return theme.palette.grey[100];
 }); };
-var templateObject_1$Z;
+var templateObject_1$18;
 
 var tabletLandscape = 991;
 var responsiveThresholds = {
@@ -2849,8 +3002,8 @@ var typeMap$1 = {
     desc: faSortDown,
     default: faSort,
 };
-var StyledWrapper$3 = styled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n  margin-left: 0.5rem;\n"], ["\n  margin-left: 0.5rem;\n"])));
-var StyledIcon$7 = styled(Icon)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\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]);
     var type = '';
@@ -2877,12 +3030,12 @@ var SortIcon = function (props) {
             nextType = 'desc';
         }
     }
-    return (React.createElement(StyledWrapper$3, null,
+    return (React.createElement(StyledWrapper$2, null,
         React.createElement(StyledIcon$7, { icon: typeMap$1[type], onClick: function () {
                 props.handleSortOnProperty(props.property, nextType);
             } })));
 };
-var templateObject_1$_, templateObject_2$t;
+var templateObject_1$19, templateObject_2$w;
 
 var ellipsisIcon = {
     icon: faEllipsisH,
@@ -2909,29 +3062,29 @@ var HeadDesktop = function (_a) {
                 React.createElement(Icon, __assign({}, ellipsisIcon))))));
 };
 
-var Row = styled.div(templateObject_1$$ || (templateObject_1$$ = __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$$;
+var templateObject_1$1a;
 
-var ActionLink = styled.a(templateObject_2$u || (templateObject_2$u = __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$10 || (templateObject_1$10 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), props.color); });
-var templateObject_1$10, templateObject_2$u;
+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$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$11 || (templateObject_1$11 = __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$11;
+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$4 = styled.div(templateObject_2$v || (templateObject_2$v = __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  ",
+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) {
     var palette = _a.theme.palette;
     return palette.white[100];
 }, function (props) {
     if (props.active) {
-        return css(templateObject_1$12 || (templateObject_1$12 = __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;
 });
@@ -2942,30 +3095,30 @@ var Action = styled.p(templateObject_4$c || (templateObject_4$c = __makeTemplate
     }
     return undefined;
 });
-var ActionsPopUp = function (props) { return (React.createElement(StyledWrapper$4, { active: props.active }, props.actions.map(function (a, ai) { return (React.createElement("div", { key: ai, className: 'link_container' },
+var ActionsPopUp = function (props) { return (React.createElement(StyledWrapper$3, { active: props.active }, props.actions.map(function (a, ai) { return (React.createElement("div", { key: ai, className: 'link_container' },
     React.createElement(Action, { className: 'action', key: ai, onClick: function (e) {
             e.preventDefault();
             a.action(props.element, props.selectedRows);
             props.handlePopUpVisibility(undefined);
         }, color: a.color }, a.label))); }))); };
-var templateObject_1$12, templateObject_2$v, templateObject_3$i, templateObject_4$c;
+var templateObject_1$1d, templateObject_2$y, templateObject_3$i, templateObject_4$c;
 
-var StyledWrapper$5 = 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  ",
+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$w || (templateObject_2$w = __makeTemplateObject(["\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  "], ["\n    ",
-        "\n    &:hover {\n      background-color: ", ";\n    }\n  "])), active && css(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), palette.blue[50], palette.blue[500]), palette.blue[50]);
+    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$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$5, { active: props.active, onClick: function () { return props.handlePopUpVisibility(props.rowId); } },
+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$13, templateObject_2$w, templateObject_3$j;
+var templateObject_1$1e, templateObject_2$z, templateObject_3$j;
 
-var ActionsPopUpUnderlay = styled.div(templateObject_2$x || (templateObject_2$x = __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  ",
+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$14 || (templateObject_1$14 = __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$14, templateObject_2$x;
+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;
@@ -2996,13 +3149,13 @@ var RowDesktop = function (_a) {
         React.createElement("td", null)));
 };
 
-var StyledWrapper$6 = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
+var StyledWrapper$5 = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
     "\n"])), function (_a) {
     var show = _a.show, palette = _a.theme.palette;
-    return css(templateObject_2$y || (templateObject_2$y = __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$15 || (templateObject_1$15 = __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]);
+    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$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$15, templateObject_2$y, 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);
@@ -3075,7 +3228,7 @@ var CustomizationsModal = /** @class */ (function (_super) {
         var _this = this;
         var _a = this.props, close = _a.close, modifyControlledPropertiesHandler = _a.modifyControlledPropertiesHandler, properties = _a.properties, show = _a.show, title = _a.title;
         var localProperties = this.state.localProperties;
-        return (React.createElement(StyledWrapper$6, { show: show },
+        return (React.createElement(StyledWrapper$5, { show: show },
             React.createElement("div", { className: 'modal__container' },
                 React.createElement("div", { className: 'modal__header' },
                     React.createElement("div", null, title),
@@ -3100,7 +3253,7 @@ var CustomizationsModal = /** @class */ (function (_super) {
     return CustomizationsModal;
 }(Component));
 
-var LoadingTableRow = styled.tr(templateObject_1$16 || (templateObject_1$16 = __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 () {
@@ -3120,7 +3273,7 @@ var LoadingContent = function (props) {
     };
     return React.createElement(React.Fragment, null, renderElements());
 };
-var templateObject_1$16;
+var templateObject_1$1h;
 
 var Pagination$1 = function (props) {
     var managedCurrentPage = props.currentPage;
@@ -3287,7 +3440,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$17 || (templateObject_1$17 = __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$z || (templateObject_2$z = __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];
@@ -3295,11 +3448,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$17, templateObject_2$z, 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$18 || (templateObject_1$18 = __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) {
@@ -3309,30 +3462,30 @@ var ActiveTag = styled.span(templateObject_1$18 || (templateObject_1$18 = __make
     var active = _a.active, theme = _a.theme;
     return (active ? theme.palette.primary[500] : theme.palette.grey[900]);
 });
-var templateObject_1$18;
+var templateObject_1$1j;
 
-var Tab = styled.span(templateObject_1$19 || (templateObject_1$19 = __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$19;
+var templateObject_1$1k;
 
 var Item$1 = function (_a) {
     var active = _a.active, handleClick = _a.handleClick, tabRef = _a.tabRef, text = _a.text;
-    return (React.createElement(ItemWrapper, { ref: tabRef, onClick: handleClick },
+    return (React.createElement(ItemWrapper, { ref: tabRef === null || tabRef === void 0 ? void 0 : tabRef(), onClick: handleClick },
         React.createElement(Tab, { active: active }, text),
         React.createElement(ActiveTag, { active: active })));
 };
-var ItemWrapper = styled.div(templateObject_1$1a || (templateObject_1$1a = __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$1a;
+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$A || (templateObject_2$A = __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  ",
+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$1b || (templateObject_1$1b = __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;
@@ -3344,7 +3497,7 @@ var TabsWrapper = styled.div(templateObject_2$A || (templateObject_2$A = __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$1b, templateObject_2$A, 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;
@@ -3377,8 +3530,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$1c || (templateObject_1$1c = __makeTemplateObject(["\n  height: 21px;\n"], ["\n  height: 21px;\n"])));
-var templateObject_1$1c;
+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;
@@ -3390,16 +3543,23 @@ var TabsDropdown = function (_a) {
                 closeDropdown();
             } }));
     }))); }, [tabs]);
-    return React.createElement(Dropdown$2, { alignRight: true, fullWidth: true, renderTrigger: renderTrigger, renderContent: renderContent });
+    return React.createElement(Dropdown$2, { placement: 'bottom-end', fullWidth: true, renderTrigger: renderTrigger, renderContent: renderContent });
 };
-var Dropdown$2 = styled(Dropdown)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-var templateObject_1$1d;
+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;
     var _d = useResizedWidth(), elementsWrapperRef = _d.elementsWrapperRef, wrapperWidth = _d.wrapperWidth;
+    var _e = useState(0), refresh = _e[1];
     var tabsLength = tabs.length;
     var tabsRefs = useMemo(function () { return Array.from(Array(tabsLength), function () { return React.createRef(); }); }, [tabsLength]);
+    var cbRef = useMemo(function () {
+        return tabsRefs.map(function (ref) { return function () {
+            refresh(function (n) { return n + 1; });
+            return ref;
+        }; });
+    }, [tabsRefs]);
     var visibleCount = useTabItemsCount({
         distance: distance,
         tabsLength: tabsLength,
@@ -3407,7 +3567,7 @@ var DropdownTabs = function (_a) {
         tabsRefs: tabsRefs,
         lateralPadding: lateralPadding,
     }).visibleCount;
-    var tabsItems = useMemo(function () { return tabs.map(function (attrs, i) { return React.createElement(Item$1, __assign({ key: i, tabRef: tabsRefs[i] }, attrs)); }); }, [tabs, tabsRefs]);
+    var tabsItems = useMemo(function () { return tabs.map(function (attrs, i) { return React.createElement(Item$1, __assign({ key: i, tabRef: cbRef[i] }, attrs)); }); }, [tabs, tabsRefs]);
     var visibleItems = useMemo(function () { return tabs.slice(0, visibleCount).map(function (attrs, i) { return React.createElement(Item$1, __assign({ key: i }, attrs)); }); }, [tabs, visibleCount]);
     var dropdownItems = useMemo(function () { return tabs.slice(visibleCount); }, [tabs, visibleCount]);
     var dropdownVisible = dropdownItems.length !== 0;
@@ -3420,8 +3580,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$1e || (templateObject_1$1e = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
-var templateObject_1$1e;
+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;
@@ -3429,45 +3589,26 @@ 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$g, __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$1f || (templateObject_1$1f = __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$B || (templateObject_2$B = __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$g = 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$1f, templateObject_2$B, templateObject_3$n;
-
 var ThemeProvider = function (_a) {
     var children = _a.children, theme = _a.theme;
     return (React.createElement(ThemeProvider$1, { theme: theme },
         React.createElement(React.Fragment, null, children)));
 };
 
-var StyledTip = styled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 100px;\n"], ["\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 100px;\n"])), function (_a) {
+var StyledTip = styled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 100px;\n"], ["\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 100px;\n"])), function (_a) {
     var palette = _a.theme.palette;
     return palette.white[100];
 }, function (_a) {
     var palette = _a.theme.palette;
     return palette.primary[400];
 });
-var StyledLeftIcon = styled.span(templateObject_2$C || (templateObject_2$C = __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$1g, templateObject_2$C, templateObject_3$o, templateObject_4$e;
+var templateObject_1$1q, templateObject_2$E, templateObject_3$n, templateObject_4$e;
 
 var defaultCloseIcon$1 = {
     icon: faTimes,
@@ -3492,14 +3633,14 @@ var ShortcutTip = function (props) {
             React.createElement("b", null, shortcut)), leftIcon: rocketIcon }, rest)));
 };
 
-var StyledIconDiv = styled.div(templateObject_1$1h || (templateObject_1$1h = __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$D || (templateObject_2$D = __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 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$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$1h, templateObject_2$D, 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',
@@ -3551,8 +3692,8 @@ var ToastContainer = styled(ToastContainer$1).attrs({
     closeOnClick: false,
     draggable: false,
     rtl: false,
-})(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n  &.Toastify__toast-container {\n    z-index: 20000;\n    -webkit-transform: translate3d(0, 0, 9999px);\n    position: fixed;\n    padding: 0px;\n    width: 320px;\n    box-sizing: border-box;\n    color: #fff;\n  }\n  &.Toastify__toast-container--top-left {\n    top: 1em;\n    left: 1em;\n  }\n  &.Toastify__toast-container--top-center {\n    top: 1em;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  &.Toastify__toast-container--top-right {\n    top: 1em;\n    right: 1em;\n  }\n  &.Toastify__toast-container--bottom-left {\n    bottom: 1em;\n    left: 1em;\n  }\n  &.Toastify__toast-container--bottom-center {\n    bottom: 1em;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  &.Toastify__toast-container--bottom-right {\n    bottom: 1em;\n    right: 1em;\n  }\n\n  @media only screen and (max-width: 480px) {\n    &.Toastify__toast-container {\n      width: 100vw;\n      padding: 0;\n      left: 0;\n      margin: 0;\n    }\n    &.Toastify__toast-container--top-left,\n    &.Toastify__toast-container--top-center,\n    &.Toastify__toast-container--top-right {\n      top: 0;\n      transform: translateX(0);\n    }\n    &.Toastify__toast-container--bottom-left,\n    &.Toastify__toast-container--bottom-center,\n    &.Toastify__toast-container--bottom-right {\n      bottom: 0;\n      transform: translateX(0);\n    }\n    &.Toastify__toast-container--rtl {\n      right: 0;\n      left: initial;\n    }\n  }\n  .Toastify__toast {\n    position: relative;\n    min-height: 56px;\n    box-sizing: border-box;\n    margin-bottom: 1rem;\n    border-radius: 1px;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-pack: justify;\n    justify-content: space-between;\n    max-height: 800px;\n    overflow: hidden;\n    cursor: pointer;\n    direction: ltr;\n  }\n  .Toastify__toast--rtl {\n    direction: rtl;\n  }\n  .Toastify__toast--dark {\n    background: #091e42;\n    border-radius: 4px;\n  }\n  .Toastify__toast--default {\n    background: #fff;\n    color: #aaa;\n  }\n  .Toastify__toast--info {\n    background: #0052cc;\n    border-radius: 4px;\n  }\n  .Toastify__toast--success {\n    background: #00875a;\n    border-radius: 4px;\n  }\n  .Toastify__toast--warning {\n    background: #ff991f;\n    border-radius: 4px;\n  }\n  .Toastify__toast--error {\n    background: #de350b;\n    border-radius: 4px;\n  }\n  .Toastify__toast-body {\n    margin: auto 0;\n    -ms-flex: 1 1 auto;\n    flex: 1 1 auto;\n  }\n\n  @media only screen and (max-width: 480px) {\n    .Toastify__toast {\n      margin-bottom: 0;\n    }\n  }\n  .Toastify__close-button {\n    color: #fff;\n    background: transparent;\n    outline: none;\n    border: none;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0.7;\n    transition: 0.3s ease;\n    -ms-flex-item-align: start;\n    align-self: flex-start;\n  }\n  .Toastify__close-button--default {\n    color: #000;\n    opacity: 0.3;\n  }\n  .Toastify__close-button > svg {\n    fill: currentColor;\n    height: 16px;\n    width: 14px;\n  }\n  .Toastify__close-button:hover,\n  .Toastify__close-button:focus {\n    opacity: 1;\n  }\n\n  @keyframes Toastify__trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\n  .Toastify__progress-bar {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 5px;\n    z-index: 20000;\n    opacity: 0.7;\n    background-color: rgba(255, 255, 255, 0.7);\n    transform-origin: left;\n  }\n  .Toastify__progress-bar--animated {\n    animation: Toastify__trackProgress linear 1 forwards;\n  }\n  .Toastify__progress-bar--controlled {\n    transition: transform 0.2s;\n  }\n  .Toastify__progress-bar--rtl {\n    right: 0;\n    left: initial;\n    transform-origin: right;\n  }\n  .Toastify__progress-bar--default {\n    background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);\n  }\n  .Toastify__progress-bar--dark {\n    background: #bb86fc;\n  }\n  @keyframes Toastify__bounceInRight {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    from {\n      opacity: 0;\n      transform: translate3d(3000px, 0, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(-25px, 0, 0);\n    }\n    75% {\n      transform: translate3d(10px, 0, 0);\n    }\n    90% {\n      transform: translate3d(-5px, 0, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutRight {\n    20% {\n      opacity: 1;\n      transform: translate3d(-20px, 0, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(2000px, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceInLeft {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    0% {\n      opacity: 0;\n      transform: translate3d(-3000px, 0, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(25px, 0, 0);\n    }\n    75% {\n      transform: translate3d(-10px, 0, 0);\n    }\n    90% {\n      transform: translate3d(5px, 0, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutLeft {\n    20% {\n      opacity: 1;\n      transform: translate3d(20px, 0, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(-2000px, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceInUp {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    from {\n      opacity: 0;\n      transform: translate3d(0, 3000px, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(0, -20px, 0);\n    }\n    75% {\n      transform: translate3d(0, 10px, 0);\n    }\n    90% {\n      transform: translate3d(0, -5px, 0);\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceOutUp {\n    20% {\n      transform: translate3d(0, -10px, 0);\n    }\n    40%,\n    45% {\n      opacity: 1;\n      transform: translate3d(0, 20px, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(0, -2000px, 0);\n    }\n  }\n  @keyframes Toastify__bounceInDown {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    0% {\n      opacity: 0;\n      transform: translate3d(0, -3000px, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(0, 25px, 0);\n    }\n    75% {\n      transform: translate3d(0, -10px, 0);\n    }\n    90% {\n      transform: translate3d(0, 5px, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutDown {\n    20% {\n      transform: translate3d(0, 10px, 0);\n    }\n    40%,\n    45% {\n      opacity: 1;\n      transform: translate3d(0, -20px, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(0, 2000px, 0);\n    }\n  }\n  .Toastify__bounce-enter--top-left,\n  .Toastify__bounce-enter--bottom-left {\n    animation-name: Toastify__bounceInLeft;\n  }\n  .Toastify__bounce-enter--top-right,\n  .Toastify__bounce-enter--bottom-right {\n    animation-name: Toastify__bounceInRight;\n  }\n  .Toastify__bounce-enter--top-center {\n    animation-name: Toastify__bounceInDown;\n  }\n  .Toastify__bounce-enter--bottom-center {\n    animation-name: Toastify__bounceInUp;\n  }\n\n  .Toastify__bounce-exit--top-left,\n  .Toastify__bounce-exit--bottom-left {\n    animation-name: Toastify__bounceOutLeft;\n  }\n  .Toastify__bounce-exit--top-right,\n  .Toastify__bounce-exit--bottom-right {\n    animation-name: Toastify__bounceOutRight;\n  }\n  .Toastify__bounce-exit--top-center {\n    animation-name: Toastify__bounceOutUp;\n  }\n  .Toastify__bounce-exit--bottom-center {\n    animation-name: Toastify__bounceOutDown;\n  }\n\n  @keyframes Toastify__zoomIn {\n    from {\n      opacity: 0;\n      transform: scale3d(0.3, 0.3, 0.3);\n    }\n    50% {\n      opacity: 1;\n    }\n  }\n  @keyframes Toastify__zoomOut {\n    from {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0;\n      transform: scale3d(0.3, 0.3, 0.3);\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  .Toastify__zoom-enter {\n    animation-name: Toastify__zoomIn;\n  }\n\n  .Toastify__zoom-exit {\n    animation-name: Toastify__zoomOut;\n  }\n\n  @keyframes Toastify__flipIn {\n    from {\n      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n      animation-timing-function: ease-in;\n      opacity: 0;\n    }\n    40% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n      animation-timing-function: ease-in;\n    }\n    60% {\n      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n      opacity: 1;\n    }\n    80% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n    }\n    to {\n      transform: perspective(400px);\n    }\n  }\n  @keyframes Toastify__flipOut {\n    from {\n      transform: perspective(400px);\n    }\n    30% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n      opacity: 1;\n    }\n    to {\n      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n      opacity: 0;\n    }\n  }\n  .Toastify__flip-enter {\n    animation-name: Toastify__flipIn;\n  }\n\n  .Toastify__flip-exit {\n    animation-name: Toastify__flipOut;\n  }\n\n  @keyframes Toastify__slideInRight {\n    from {\n      transform: translate3d(110%, 0, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInLeft {\n    from {\n      transform: translate3d(-110%, 0, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInUp {\n    from {\n      transform: translate3d(0, 110%, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInDown {\n    from {\n      transform: translate3d(0, -110%, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutRight {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(110%, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutLeft {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(-110%, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutDown {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(0, 500px, 0);\n    }\n  }\n  @keyframes Toastify__slideOutUp {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(0, -500px, 0);\n    }\n  }\n  .Toastify__slide-enter--top-left,\n  .Toastify__slide-enter--bottom-left {\n    animation-name: Toastify__slideInLeft;\n  }\n  .Toastify__slide-enter--top-right,\n  .Toastify__slide-enter--bottom-right {\n    animation-name: Toastify__slideInRight;\n  }\n  .Toastify__slide-enter--top-center {\n    animation-name: Toastify__slideInDown;\n  }\n  .Toastify__slide-enter--bottom-center {\n    animation-name: Toastify__slideInUp;\n  }\n\n  .Toastify__slide-exit--top-left,\n  .Toastify__slide-exit--bottom-left {\n    animation-name: Toastify__slideOutLeft;\n  }\n  .Toastify__slide-exit--top-right,\n  .Toastify__slide-exit--bottom-right {\n    animation-name: Toastify__slideOutRight;\n  }\n  .Toastify__slide-exit--top-center {\n    animation-name: Toastify__slideOutUp;\n  }\n  .Toastify__slide-exit--bottom-center {\n    animation-name: Toastify__slideOutDown;\n  }\n\n  /*# sourceMappingURL=ReactToastify.css.map */\n"], ["\n  &.Toastify__toast-container {\n    z-index: 20000;\n    -webkit-transform: translate3d(0, 0, 9999px);\n    position: fixed;\n    padding: 0px;\n    width: 320px;\n    box-sizing: border-box;\n    color: #fff;\n  }\n  &.Toastify__toast-container--top-left {\n    top: 1em;\n    left: 1em;\n  }\n  &.Toastify__toast-container--top-center {\n    top: 1em;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  &.Toastify__toast-container--top-right {\n    top: 1em;\n    right: 1em;\n  }\n  &.Toastify__toast-container--bottom-left {\n    bottom: 1em;\n    left: 1em;\n  }\n  &.Toastify__toast-container--bottom-center {\n    bottom: 1em;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  &.Toastify__toast-container--bottom-right {\n    bottom: 1em;\n    right: 1em;\n  }\n\n  @media only screen and (max-width: 480px) {\n    &.Toastify__toast-container {\n      width: 100vw;\n      padding: 0;\n      left: 0;\n      margin: 0;\n    }\n    &.Toastify__toast-container--top-left,\n    &.Toastify__toast-container--top-center,\n    &.Toastify__toast-container--top-right {\n      top: 0;\n      transform: translateX(0);\n    }\n    &.Toastify__toast-container--bottom-left,\n    &.Toastify__toast-container--bottom-center,\n    &.Toastify__toast-container--bottom-right {\n      bottom: 0;\n      transform: translateX(0);\n    }\n    &.Toastify__toast-container--rtl {\n      right: 0;\n      left: initial;\n    }\n  }\n  .Toastify__toast {\n    position: relative;\n    min-height: 56px;\n    box-sizing: border-box;\n    margin-bottom: 1rem;\n    border-radius: 1px;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-pack: justify;\n    justify-content: space-between;\n    max-height: 800px;\n    overflow: hidden;\n    cursor: pointer;\n    direction: ltr;\n  }\n  .Toastify__toast--rtl {\n    direction: rtl;\n  }\n  .Toastify__toast--dark {\n    background: #091e42;\n    border-radius: 4px;\n  }\n  .Toastify__toast--default {\n    background: #fff;\n    color: #aaa;\n  }\n  .Toastify__toast--info {\n    background: #0052cc;\n    border-radius: 4px;\n  }\n  .Toastify__toast--success {\n    background: #00875a;\n    border-radius: 4px;\n  }\n  .Toastify__toast--warning {\n    background: #ff991f;\n    border-radius: 4px;\n  }\n  .Toastify__toast--error {\n    background: #de350b;\n    border-radius: 4px;\n  }\n  .Toastify__toast-body {\n    margin: auto 0;\n    -ms-flex: 1 1 auto;\n    flex: 1 1 auto;\n  }\n\n  @media only screen and (max-width: 480px) {\n    .Toastify__toast {\n      margin-bottom: 0;\n    }\n  }\n  .Toastify__close-button {\n    color: #fff;\n    background: transparent;\n    outline: none;\n    border: none;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0.7;\n    transition: 0.3s ease;\n    -ms-flex-item-align: start;\n    align-self: flex-start;\n  }\n  .Toastify__close-button--default {\n    color: #000;\n    opacity: 0.3;\n  }\n  .Toastify__close-button > svg {\n    fill: currentColor;\n    height: 16px;\n    width: 14px;\n  }\n  .Toastify__close-button:hover,\n  .Toastify__close-button:focus {\n    opacity: 1;\n  }\n\n  @keyframes Toastify__trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\n  .Toastify__progress-bar {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 5px;\n    z-index: 20000;\n    opacity: 0.7;\n    background-color: rgba(255, 255, 255, 0.7);\n    transform-origin: left;\n  }\n  .Toastify__progress-bar--animated {\n    animation: Toastify__trackProgress linear 1 forwards;\n  }\n  .Toastify__progress-bar--controlled {\n    transition: transform 0.2s;\n  }\n  .Toastify__progress-bar--rtl {\n    right: 0;\n    left: initial;\n    transform-origin: right;\n  }\n  .Toastify__progress-bar--default {\n    background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);\n  }\n  .Toastify__progress-bar--dark {\n    background: #bb86fc;\n  }\n  @keyframes Toastify__bounceInRight {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    from {\n      opacity: 0;\n      transform: translate3d(3000px, 0, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(-25px, 0, 0);\n    }\n    75% {\n      transform: translate3d(10px, 0, 0);\n    }\n    90% {\n      transform: translate3d(-5px, 0, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutRight {\n    20% {\n      opacity: 1;\n      transform: translate3d(-20px, 0, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(2000px, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceInLeft {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    0% {\n      opacity: 0;\n      transform: translate3d(-3000px, 0, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(25px, 0, 0);\n    }\n    75% {\n      transform: translate3d(-10px, 0, 0);\n    }\n    90% {\n      transform: translate3d(5px, 0, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutLeft {\n    20% {\n      opacity: 1;\n      transform: translate3d(20px, 0, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(-2000px, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceInUp {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    from {\n      opacity: 0;\n      transform: translate3d(0, 3000px, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(0, -20px, 0);\n    }\n    75% {\n      transform: translate3d(0, 10px, 0);\n    }\n    90% {\n      transform: translate3d(0, -5px, 0);\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceOutUp {\n    20% {\n      transform: translate3d(0, -10px, 0);\n    }\n    40%,\n    45% {\n      opacity: 1;\n      transform: translate3d(0, 20px, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(0, -2000px, 0);\n    }\n  }\n  @keyframes Toastify__bounceInDown {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    0% {\n      opacity: 0;\n      transform: translate3d(0, -3000px, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(0, 25px, 0);\n    }\n    75% {\n      transform: translate3d(0, -10px, 0);\n    }\n    90% {\n      transform: translate3d(0, 5px, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutDown {\n    20% {\n      transform: translate3d(0, 10px, 0);\n    }\n    40%,\n    45% {\n      opacity: 1;\n      transform: translate3d(0, -20px, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(0, 2000px, 0);\n    }\n  }\n  .Toastify__bounce-enter--top-left,\n  .Toastify__bounce-enter--bottom-left {\n    animation-name: Toastify__bounceInLeft;\n  }\n  .Toastify__bounce-enter--top-right,\n  .Toastify__bounce-enter--bottom-right {\n    animation-name: Toastify__bounceInRight;\n  }\n  .Toastify__bounce-enter--top-center {\n    animation-name: Toastify__bounceInDown;\n  }\n  .Toastify__bounce-enter--bottom-center {\n    animation-name: Toastify__bounceInUp;\n  }\n\n  .Toastify__bounce-exit--top-left,\n  .Toastify__bounce-exit--bottom-left {\n    animation-name: Toastify__bounceOutLeft;\n  }\n  .Toastify__bounce-exit--top-right,\n  .Toastify__bounce-exit--bottom-right {\n    animation-name: Toastify__bounceOutRight;\n  }\n  .Toastify__bounce-exit--top-center {\n    animation-name: Toastify__bounceOutUp;\n  }\n  .Toastify__bounce-exit--bottom-center {\n    animation-name: Toastify__bounceOutDown;\n  }\n\n  @keyframes Toastify__zoomIn {\n    from {\n      opacity: 0;\n      transform: scale3d(0.3, 0.3, 0.3);\n    }\n    50% {\n      opacity: 1;\n    }\n  }\n  @keyframes Toastify__zoomOut {\n    from {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0;\n      transform: scale3d(0.3, 0.3, 0.3);\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  .Toastify__zoom-enter {\n    animation-name: Toastify__zoomIn;\n  }\n\n  .Toastify__zoom-exit {\n    animation-name: Toastify__zoomOut;\n  }\n\n  @keyframes Toastify__flipIn {\n    from {\n      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n      animation-timing-function: ease-in;\n      opacity: 0;\n    }\n    40% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n      animation-timing-function: ease-in;\n    }\n    60% {\n      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n      opacity: 1;\n    }\n    80% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n    }\n    to {\n      transform: perspective(400px);\n    }\n  }\n  @keyframes Toastify__flipOut {\n    from {\n      transform: perspective(400px);\n    }\n    30% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n      opacity: 1;\n    }\n    to {\n      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n      opacity: 0;\n    }\n  }\n  .Toastify__flip-enter {\n    animation-name: Toastify__flipIn;\n  }\n\n  .Toastify__flip-exit {\n    animation-name: Toastify__flipOut;\n  }\n\n  @keyframes Toastify__slideInRight {\n    from {\n      transform: translate3d(110%, 0, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInLeft {\n    from {\n      transform: translate3d(-110%, 0, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInUp {\n    from {\n      transform: translate3d(0, 110%, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInDown {\n    from {\n      transform: translate3d(0, -110%, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutRight {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(110%, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutLeft {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(-110%, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutDown {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(0, 500px, 0);\n    }\n  }\n  @keyframes Toastify__slideOutUp {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(0, -500px, 0);\n    }\n  }\n  .Toastify__slide-enter--top-left,\n  .Toastify__slide-enter--bottom-left {\n    animation-name: Toastify__slideInLeft;\n  }\n  .Toastify__slide-enter--top-right,\n  .Toastify__slide-enter--bottom-right {\n    animation-name: Toastify__slideInRight;\n  }\n  .Toastify__slide-enter--top-center {\n    animation-name: Toastify__slideInDown;\n  }\n  .Toastify__slide-enter--bottom-center {\n    animation-name: Toastify__slideInUp;\n  }\n\n  .Toastify__slide-exit--top-left,\n  .Toastify__slide-exit--bottom-left {\n    animation-name: Toastify__slideOutLeft;\n  }\n  .Toastify__slide-exit--top-right,\n  .Toastify__slide-exit--bottom-right {\n    animation-name: Toastify__slideOutRight;\n  }\n  .Toastify__slide-exit--top-center {\n    animation-name: Toastify__slideOutUp;\n  }\n  .Toastify__slide-exit--bottom-center {\n    animation-name: Toastify__slideOutDown;\n  }\n\n  /*# sourceMappingURL=ReactToastify.css.map */\n"])));
-var templateObject_1$1i;
+})(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n  &.Toastify__toast-container {\n    z-index: 20000;\n    -webkit-transform: translate3d(0, 0, 9999px);\n    position: fixed;\n    padding: 0px;\n    width: 320px;\n    box-sizing: border-box;\n    color: #fff;\n  }\n  &.Toastify__toast-container--top-left {\n    top: 1em;\n    left: 1em;\n  }\n  &.Toastify__toast-container--top-center {\n    top: 1em;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  &.Toastify__toast-container--top-right {\n    top: 1em;\n    right: 1em;\n  }\n  &.Toastify__toast-container--bottom-left {\n    bottom: 1em;\n    left: 1em;\n  }\n  &.Toastify__toast-container--bottom-center {\n    bottom: 1em;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  &.Toastify__toast-container--bottom-right {\n    bottom: 1em;\n    right: 1em;\n  }\n\n  @media only screen and (max-width: 480px) {\n    &.Toastify__toast-container {\n      width: 100vw;\n      padding: 0;\n      left: 0;\n      margin: 0;\n    }\n    &.Toastify__toast-container--top-left,\n    &.Toastify__toast-container--top-center,\n    &.Toastify__toast-container--top-right {\n      top: 0;\n      transform: translateX(0);\n    }\n    &.Toastify__toast-container--bottom-left,\n    &.Toastify__toast-container--bottom-center,\n    &.Toastify__toast-container--bottom-right {\n      bottom: 0;\n      transform: translateX(0);\n    }\n    &.Toastify__toast-container--rtl {\n      right: 0;\n      left: initial;\n    }\n  }\n  .Toastify__toast {\n    position: relative;\n    min-height: 56px;\n    box-sizing: border-box;\n    margin-bottom: 1rem;\n    border-radius: 1px;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-pack: justify;\n    justify-content: space-between;\n    max-height: 800px;\n    overflow: hidden;\n    cursor: pointer;\n    direction: ltr;\n  }\n  .Toastify__toast--rtl {\n    direction: rtl;\n  }\n  .Toastify__toast--dark {\n    background: #091e42;\n    border-radius: 4px;\n  }\n  .Toastify__toast--default {\n    background: #fff;\n    color: #aaa;\n  }\n  .Toastify__toast--info {\n    background: #0052cc;\n    border-radius: 4px;\n  }\n  .Toastify__toast--success {\n    background: #00875a;\n    border-radius: 4px;\n  }\n  .Toastify__toast--warning {\n    background: #ff991f;\n    border-radius: 4px;\n  }\n  .Toastify__toast--error {\n    background: #de350b;\n    border-radius: 4px;\n  }\n  .Toastify__toast-body {\n    margin: auto 0;\n    -ms-flex: 1 1 auto;\n    flex: 1 1 auto;\n  }\n\n  @media only screen and (max-width: 480px) {\n    .Toastify__toast {\n      margin-bottom: 0;\n    }\n  }\n  .Toastify__close-button {\n    color: #fff;\n    background: transparent;\n    outline: none;\n    border: none;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0.7;\n    transition: 0.3s ease;\n    -ms-flex-item-align: start;\n    align-self: flex-start;\n  }\n  .Toastify__close-button--default {\n    color: #000;\n    opacity: 0.3;\n  }\n  .Toastify__close-button > svg {\n    fill: currentColor;\n    height: 16px;\n    width: 14px;\n  }\n  .Toastify__close-button:hover,\n  .Toastify__close-button:focus {\n    opacity: 1;\n  }\n\n  @keyframes Toastify__trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\n  .Toastify__progress-bar {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 5px;\n    z-index: 20000;\n    opacity: 0.7;\n    background-color: rgba(255, 255, 255, 0.7);\n    transform-origin: left;\n  }\n  .Toastify__progress-bar--animated {\n    animation: Toastify__trackProgress linear 1 forwards;\n  }\n  .Toastify__progress-bar--controlled {\n    transition: transform 0.2s;\n  }\n  .Toastify__progress-bar--rtl {\n    right: 0;\n    left: initial;\n    transform-origin: right;\n  }\n  .Toastify__progress-bar--default {\n    background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);\n  }\n  .Toastify__progress-bar--dark {\n    background: #bb86fc;\n  }\n  @keyframes Toastify__bounceInRight {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    from {\n      opacity: 0;\n      transform: translate3d(3000px, 0, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(-25px, 0, 0);\n    }\n    75% {\n      transform: translate3d(10px, 0, 0);\n    }\n    90% {\n      transform: translate3d(-5px, 0, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutRight {\n    20% {\n      opacity: 1;\n      transform: translate3d(-20px, 0, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(2000px, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceInLeft {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    0% {\n      opacity: 0;\n      transform: translate3d(-3000px, 0, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(25px, 0, 0);\n    }\n    75% {\n      transform: translate3d(-10px, 0, 0);\n    }\n    90% {\n      transform: translate3d(5px, 0, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutLeft {\n    20% {\n      opacity: 1;\n      transform: translate3d(20px, 0, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(-2000px, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceInUp {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    from {\n      opacity: 0;\n      transform: translate3d(0, 3000px, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(0, -20px, 0);\n    }\n    75% {\n      transform: translate3d(0, 10px, 0);\n    }\n    90% {\n      transform: translate3d(0, -5px, 0);\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceOutUp {\n    20% {\n      transform: translate3d(0, -10px, 0);\n    }\n    40%,\n    45% {\n      opacity: 1;\n      transform: translate3d(0, 20px, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(0, -2000px, 0);\n    }\n  }\n  @keyframes Toastify__bounceInDown {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    0% {\n      opacity: 0;\n      transform: translate3d(0, -3000px, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(0, 25px, 0);\n    }\n    75% {\n      transform: translate3d(0, -10px, 0);\n    }\n    90% {\n      transform: translate3d(0, 5px, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutDown {\n    20% {\n      transform: translate3d(0, 10px, 0);\n    }\n    40%,\n    45% {\n      opacity: 1;\n      transform: translate3d(0, -20px, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(0, 2000px, 0);\n    }\n  }\n  .Toastify__bounce-enter--top-left,\n  .Toastify__bounce-enter--bottom-left {\n    animation-name: Toastify__bounceInLeft;\n  }\n  .Toastify__bounce-enter--top-right,\n  .Toastify__bounce-enter--bottom-right {\n    animation-name: Toastify__bounceInRight;\n  }\n  .Toastify__bounce-enter--top-center {\n    animation-name: Toastify__bounceInDown;\n  }\n  .Toastify__bounce-enter--bottom-center {\n    animation-name: Toastify__bounceInUp;\n  }\n\n  .Toastify__bounce-exit--top-left,\n  .Toastify__bounce-exit--bottom-left {\n    animation-name: Toastify__bounceOutLeft;\n  }\n  .Toastify__bounce-exit--top-right,\n  .Toastify__bounce-exit--bottom-right {\n    animation-name: Toastify__bounceOutRight;\n  }\n  .Toastify__bounce-exit--top-center {\n    animation-name: Toastify__bounceOutUp;\n  }\n  .Toastify__bounce-exit--bottom-center {\n    animation-name: Toastify__bounceOutDown;\n  }\n\n  @keyframes Toastify__zoomIn {\n    from {\n      opacity: 0;\n      transform: scale3d(0.3, 0.3, 0.3);\n    }\n    50% {\n      opacity: 1;\n    }\n  }\n  @keyframes Toastify__zoomOut {\n    from {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0;\n      transform: scale3d(0.3, 0.3, 0.3);\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  .Toastify__zoom-enter {\n    animation-name: Toastify__zoomIn;\n  }\n\n  .Toastify__zoom-exit {\n    animation-name: Toastify__zoomOut;\n  }\n\n  @keyframes Toastify__flipIn {\n    from {\n      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n      animation-timing-function: ease-in;\n      opacity: 0;\n    }\n    40% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n      animation-timing-function: ease-in;\n    }\n    60% {\n      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n      opacity: 1;\n    }\n    80% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n    }\n    to {\n      transform: perspective(400px);\n    }\n  }\n  @keyframes Toastify__flipOut {\n    from {\n      transform: perspective(400px);\n    }\n    30% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n      opacity: 1;\n    }\n    to {\n      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n      opacity: 0;\n    }\n  }\n  .Toastify__flip-enter {\n    animation-name: Toastify__flipIn;\n  }\n\n  .Toastify__flip-exit {\n    animation-name: Toastify__flipOut;\n  }\n\n  @keyframes Toastify__slideInRight {\n    from {\n      transform: translate3d(110%, 0, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInLeft {\n    from {\n      transform: translate3d(-110%, 0, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInUp {\n    from {\n      transform: translate3d(0, 110%, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInDown {\n    from {\n      transform: translate3d(0, -110%, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutRight {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(110%, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutLeft {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(-110%, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutDown {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(0, 500px, 0);\n    }\n  }\n  @keyframes Toastify__slideOutUp {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(0, -500px, 0);\n    }\n  }\n  .Toastify__slide-enter--top-left,\n  .Toastify__slide-enter--bottom-left {\n    animation-name: Toastify__slideInLeft;\n  }\n  .Toastify__slide-enter--top-right,\n  .Toastify__slide-enter--bottom-right {\n    animation-name: Toastify__slideInRight;\n  }\n  .Toastify__slide-enter--top-center {\n    animation-name: Toastify__slideInDown;\n  }\n  .Toastify__slide-enter--bottom-center {\n    animation-name: Toastify__slideInUp;\n  }\n\n  .Toastify__slide-exit--top-left,\n  .Toastify__slide-exit--bottom-left {\n    animation-name: Toastify__slideOutLeft;\n  }\n  .Toastify__slide-exit--top-right,\n  .Toastify__slide-exit--bottom-right {\n    animation-name: Toastify__slideOutRight;\n  }\n  .Toastify__slide-exit--top-center {\n    animation-name: Toastify__slideOutUp;\n  }\n  .Toastify__slide-exit--bottom-center {\n    animation-name: Toastify__slideOutDown;\n  }\n\n  /*# sourceMappingURL=ReactToastify.css.map */\n"], ["\n  &.Toastify__toast-container {\n    z-index: 20000;\n    -webkit-transform: translate3d(0, 0, 9999px);\n    position: fixed;\n    padding: 0px;\n    width: 320px;\n    box-sizing: border-box;\n    color: #fff;\n  }\n  &.Toastify__toast-container--top-left {\n    top: 1em;\n    left: 1em;\n  }\n  &.Toastify__toast-container--top-center {\n    top: 1em;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  &.Toastify__toast-container--top-right {\n    top: 1em;\n    right: 1em;\n  }\n  &.Toastify__toast-container--bottom-left {\n    bottom: 1em;\n    left: 1em;\n  }\n  &.Toastify__toast-container--bottom-center {\n    bottom: 1em;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  &.Toastify__toast-container--bottom-right {\n    bottom: 1em;\n    right: 1em;\n  }\n\n  @media only screen and (max-width: 480px) {\n    &.Toastify__toast-container {\n      width: 100vw;\n      padding: 0;\n      left: 0;\n      margin: 0;\n    }\n    &.Toastify__toast-container--top-left,\n    &.Toastify__toast-container--top-center,\n    &.Toastify__toast-container--top-right {\n      top: 0;\n      transform: translateX(0);\n    }\n    &.Toastify__toast-container--bottom-left,\n    &.Toastify__toast-container--bottom-center,\n    &.Toastify__toast-container--bottom-right {\n      bottom: 0;\n      transform: translateX(0);\n    }\n    &.Toastify__toast-container--rtl {\n      right: 0;\n      left: initial;\n    }\n  }\n  .Toastify__toast {\n    position: relative;\n    min-height: 56px;\n    box-sizing: border-box;\n    margin-bottom: 1rem;\n    border-radius: 1px;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-pack: justify;\n    justify-content: space-between;\n    max-height: 800px;\n    overflow: hidden;\n    cursor: pointer;\n    direction: ltr;\n  }\n  .Toastify__toast--rtl {\n    direction: rtl;\n  }\n  .Toastify__toast--dark {\n    background: #091e42;\n    border-radius: 4px;\n  }\n  .Toastify__toast--default {\n    background: #fff;\n    color: #aaa;\n  }\n  .Toastify__toast--info {\n    background: #0052cc;\n    border-radius: 4px;\n  }\n  .Toastify__toast--success {\n    background: #00875a;\n    border-radius: 4px;\n  }\n  .Toastify__toast--warning {\n    background: #ff991f;\n    border-radius: 4px;\n  }\n  .Toastify__toast--error {\n    background: #de350b;\n    border-radius: 4px;\n  }\n  .Toastify__toast-body {\n    margin: auto 0;\n    -ms-flex: 1 1 auto;\n    flex: 1 1 auto;\n  }\n\n  @media only screen and (max-width: 480px) {\n    .Toastify__toast {\n      margin-bottom: 0;\n    }\n  }\n  .Toastify__close-button {\n    color: #fff;\n    background: transparent;\n    outline: none;\n    border: none;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0.7;\n    transition: 0.3s ease;\n    -ms-flex-item-align: start;\n    align-self: flex-start;\n  }\n  .Toastify__close-button--default {\n    color: #000;\n    opacity: 0.3;\n  }\n  .Toastify__close-button > svg {\n    fill: currentColor;\n    height: 16px;\n    width: 14px;\n  }\n  .Toastify__close-button:hover,\n  .Toastify__close-button:focus {\n    opacity: 1;\n  }\n\n  @keyframes Toastify__trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\n    }\n  }\n  .Toastify__progress-bar {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 5px;\n    z-index: 20000;\n    opacity: 0.7;\n    background-color: rgba(255, 255, 255, 0.7);\n    transform-origin: left;\n  }\n  .Toastify__progress-bar--animated {\n    animation: Toastify__trackProgress linear 1 forwards;\n  }\n  .Toastify__progress-bar--controlled {\n    transition: transform 0.2s;\n  }\n  .Toastify__progress-bar--rtl {\n    right: 0;\n    left: initial;\n    transform-origin: right;\n  }\n  .Toastify__progress-bar--default {\n    background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);\n  }\n  .Toastify__progress-bar--dark {\n    background: #bb86fc;\n  }\n  @keyframes Toastify__bounceInRight {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    from {\n      opacity: 0;\n      transform: translate3d(3000px, 0, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(-25px, 0, 0);\n    }\n    75% {\n      transform: translate3d(10px, 0, 0);\n    }\n    90% {\n      transform: translate3d(-5px, 0, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutRight {\n    20% {\n      opacity: 1;\n      transform: translate3d(-20px, 0, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(2000px, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceInLeft {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    0% {\n      opacity: 0;\n      transform: translate3d(-3000px, 0, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(25px, 0, 0);\n    }\n    75% {\n      transform: translate3d(-10px, 0, 0);\n    }\n    90% {\n      transform: translate3d(5px, 0, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutLeft {\n    20% {\n      opacity: 1;\n      transform: translate3d(20px, 0, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(-2000px, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceInUp {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    from {\n      opacity: 0;\n      transform: translate3d(0, 3000px, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(0, -20px, 0);\n    }\n    75% {\n      transform: translate3d(0, 10px, 0);\n    }\n    90% {\n      transform: translate3d(0, -5px, 0);\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__bounceOutUp {\n    20% {\n      transform: translate3d(0, -10px, 0);\n    }\n    40%,\n    45% {\n      opacity: 1;\n      transform: translate3d(0, 20px, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(0, -2000px, 0);\n    }\n  }\n  @keyframes Toastify__bounceInDown {\n    from,\n    60%,\n    75%,\n    90%,\n    to {\n      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n    }\n    0% {\n      opacity: 0;\n      transform: translate3d(0, -3000px, 0);\n    }\n    60% {\n      opacity: 1;\n      transform: translate3d(0, 25px, 0);\n    }\n    75% {\n      transform: translate3d(0, -10px, 0);\n    }\n    90% {\n      transform: translate3d(0, 5px, 0);\n    }\n    to {\n      transform: none;\n    }\n  }\n  @keyframes Toastify__bounceOutDown {\n    20% {\n      transform: translate3d(0, 10px, 0);\n    }\n    40%,\n    45% {\n      opacity: 1;\n      transform: translate3d(0, -20px, 0);\n    }\n    to {\n      opacity: 0;\n      transform: translate3d(0, 2000px, 0);\n    }\n  }\n  .Toastify__bounce-enter--top-left,\n  .Toastify__bounce-enter--bottom-left {\n    animation-name: Toastify__bounceInLeft;\n  }\n  .Toastify__bounce-enter--top-right,\n  .Toastify__bounce-enter--bottom-right {\n    animation-name: Toastify__bounceInRight;\n  }\n  .Toastify__bounce-enter--top-center {\n    animation-name: Toastify__bounceInDown;\n  }\n  .Toastify__bounce-enter--bottom-center {\n    animation-name: Toastify__bounceInUp;\n  }\n\n  .Toastify__bounce-exit--top-left,\n  .Toastify__bounce-exit--bottom-left {\n    animation-name: Toastify__bounceOutLeft;\n  }\n  .Toastify__bounce-exit--top-right,\n  .Toastify__bounce-exit--bottom-right {\n    animation-name: Toastify__bounceOutRight;\n  }\n  .Toastify__bounce-exit--top-center {\n    animation-name: Toastify__bounceOutUp;\n  }\n  .Toastify__bounce-exit--bottom-center {\n    animation-name: Toastify__bounceOutDown;\n  }\n\n  @keyframes Toastify__zoomIn {\n    from {\n      opacity: 0;\n      transform: scale3d(0.3, 0.3, 0.3);\n    }\n    50% {\n      opacity: 1;\n    }\n  }\n  @keyframes Toastify__zoomOut {\n    from {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0;\n      transform: scale3d(0.3, 0.3, 0.3);\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  .Toastify__zoom-enter {\n    animation-name: Toastify__zoomIn;\n  }\n\n  .Toastify__zoom-exit {\n    animation-name: Toastify__zoomOut;\n  }\n\n  @keyframes Toastify__flipIn {\n    from {\n      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n      animation-timing-function: ease-in;\n      opacity: 0;\n    }\n    40% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n      animation-timing-function: ease-in;\n    }\n    60% {\n      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);\n      opacity: 1;\n    }\n    80% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);\n    }\n    to {\n      transform: perspective(400px);\n    }\n  }\n  @keyframes Toastify__flipOut {\n    from {\n      transform: perspective(400px);\n    }\n    30% {\n      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);\n      opacity: 1;\n    }\n    to {\n      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);\n      opacity: 0;\n    }\n  }\n  .Toastify__flip-enter {\n    animation-name: Toastify__flipIn;\n  }\n\n  .Toastify__flip-exit {\n    animation-name: Toastify__flipOut;\n  }\n\n  @keyframes Toastify__slideInRight {\n    from {\n      transform: translate3d(110%, 0, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInLeft {\n    from {\n      transform: translate3d(-110%, 0, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInUp {\n    from {\n      transform: translate3d(0, 110%, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideInDown {\n    from {\n      transform: translate3d(0, -110%, 0);\n      visibility: visible;\n    }\n    to {\n      transform: translate3d(0, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutRight {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(110%, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutLeft {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(-110%, 0, 0);\n    }\n  }\n  @keyframes Toastify__slideOutDown {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(0, 500px, 0);\n    }\n  }\n  @keyframes Toastify__slideOutUp {\n    from {\n      transform: translate3d(0, 0, 0);\n    }\n    to {\n      visibility: hidden;\n      transform: translate3d(0, -500px, 0);\n    }\n  }\n  .Toastify__slide-enter--top-left,\n  .Toastify__slide-enter--bottom-left {\n    animation-name: Toastify__slideInLeft;\n  }\n  .Toastify__slide-enter--top-right,\n  .Toastify__slide-enter--bottom-right {\n    animation-name: Toastify__slideInRight;\n  }\n  .Toastify__slide-enter--top-center {\n    animation-name: Toastify__slideInDown;\n  }\n  .Toastify__slide-enter--bottom-center {\n    animation-name: Toastify__slideInUp;\n  }\n\n  .Toastify__slide-exit--top-left,\n  .Toastify__slide-exit--bottom-left {\n    animation-name: Toastify__slideOutLeft;\n  }\n  .Toastify__slide-exit--top-right,\n  .Toastify__slide-exit--bottom-right {\n    animation-name: Toastify__slideOutRight;\n  }\n  .Toastify__slide-exit--top-center {\n    animation-name: Toastify__slideOutUp;\n  }\n  .Toastify__slide-exit--bottom-center {\n    animation-name: Toastify__slideOutDown;\n  }\n\n  /*# sourceMappingURL=ReactToastify.css.map */\n"])));
+var templateObject_1$1s;
 
 var Toast = {
     Container: ToastContainer,
@@ -3565,4 +3706,4 @@ var Toast = {
     standard: standard,
 };
 
-export { Accordion, Avatar, Badge, Banner, Button, Checkbox, Chip, ConfirmationModal, Drawer, Dropdown, DropdownTabs, GroupedList, Icon, IconBackground, IconButton, InlineMessage, InputHelper, InputText, MicroTag, Modal, ModalBody, ModalSearchable, PageEmptySet, Pagination, Progressbar, RadioButton, RadioButtonGroup, ScrollableTabs, Select, SelectAsync, SelectCreatable, 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 };