@fattureincloud/fic-design-system 0.3.16 → 0.3.17-1845

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { faChevronDown, faTimes, faCheck, faMinus, faEllipsisH, faCaretRight, faExclamationTriangle, faInfoCircle, faCheckCircle, faSortUp, faSortDown, faSort, faEquals, faInfoSquare } from '@fortawesome/pro-solid-svg-icons';
-import React, { Component, useCallback, useRef, useEffect, useState, useMemo, useContext, Fragment } from 'react';
+import React, { Component, useCallback, useRef, useEffect, useState, useMemo, useContext } from 'react';
 import styled, { css, createGlobalStyle, ThemeContext, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCircleNotch, faCircle } from '@fortawesome/pro-regular-svg-icons';
@@ -1785,8 +1785,8 @@ var triggerStyles = {
     margin: 'auto',
 };
 var SidebarItemDropdown = function (_a) {
-    var className = _a.className, content = _a.content;
-    return (React.createElement(Dropdown, { triggerStyles: triggerStyles, className: className, placement: 'right-start', renderTrigger: renderTrigger, content: content }));
+    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$y;
 
@@ -1806,22 +1806,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;
+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),
-        !isDisabled && dropdownContent && React.createElement(Dropdown$1, { content: dropdownContent })));
+        React.createElement(Title$2, null, content),
+        !isDisabled && dropdownContent && React.createElement(Dropdown$1, { content: dropdownContent, forceOpen: forceOpenDropdown })));
 };
 var Dropdown$1 = styled(SidebarItemDropdown)(templateObject_1$A || (templateObject_1$A = __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$i || (templateObject_2$i = __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 color = _a.color, customColor = _a.customColor;
+    return customColor || color;
 }, function (_a) {
     var background = _a.background;
     return background;
@@ -1911,28 +1913,110 @@ var microTagPalette = {
     },
 };
 
+var getStepItemStyles = function (_a) {
+    var theme = _a.theme, status = _a.status;
+    return theme.components.stepper.item[status];
+};
+
+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$6, { status: status },
+        React.createElement(Circle, null, content),
+        React.createElement(Text$2, null, text)));
+};
+var Circle = styled.div(templateObject_1$C || (templateObject_1$C = __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$j || (templateObject_2$j = __makeTemplateObject([""], [""])));
+var Wrapper$6 = styled.div.attrs(getStepItemStyles)(templateObject_3$f || (templateObject_3$f = __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) {
+    var circleBackground = _a.circleBackground;
+    return circleBackground;
+}, Text$2, function (_a) {
+    var color = _a.color;
+    return color;
+});
+var templateObject_1$C, templateObject_2$j, templateObject_3$f;
+
+var StepperDivider = styled.div(templateObject_1$D || (templateObject_1$D = __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$D;
+
+var getItemStatus = function (itemStep, currentStep) {
+    if (itemStep < currentStep) {
+        return 'completed';
+    }
+    else if (itemStep === currentStep) {
+        return 'active';
+    }
+    else {
+        return 'normal';
+    }
+};
+
+var Stepper = function (_a) {
+    var steps = _a.steps, currentStep = _a.currentStep;
+    var mappedSteps = useMemo(function () {
+        return steps.reduce(function (r, step, i) {
+            if (i === 0) {
+                return [React.createElement(StepItem, { key: i, number: i, status: getItemStatus(i, currentStep), text: step })];
+            }
+            else {
+                return __spreadArrays(r, [
+                    React.createElement(StepperDivider, { key: "divider_" + i }),
+                    React.createElement(StepItem, { key: i, number: i, status: getItemStatus(i, currentStep), text: step }),
+                ]);
+            }
+        }, []);
+    }, [steps, currentStep]);
+    return React.createElement(Wrapper$7, null, mappedSteps);
+};
+var Wrapper$7 = styled.div(templateObject_1$E || (templateObject_1$E = __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$E;
+
+var stepperPalette = {
+    item: {
+        normal: {
+            color: defaultPalette.grey[500],
+            circleBackground: defaultPalette.grey[500],
+            circleTextColor: defaultPalette.white[100],
+        },
+        active: {
+            color: defaultPalette.blue[500],
+            circleBackground: defaultPalette.blue[500],
+            circleTextColor: defaultPalette.white[100],
+        },
+        completed: {
+            color: defaultPalette.grey[500],
+            circleBackground: defaultPalette.green[500],
+            circleTextColor: defaultPalette.white[100],
+        },
+    },
+};
+
 var getTagColors = function (_a) {
     var tagStyle = _a.tagStyle, theme = _a.theme, type = _a.type;
     return theme.components.tag[tagStyle][type];
 };
 
-var LeftIcon$2 = styled(Icon)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject([""], [""])));
-var RightIcon$1 = styled(Icon)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject([""], [""])));
-var Text$2 = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject([""], [""])));
+var LeftIcon$2 = styled(Icon)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject([""], [""])));
+var RightIcon$1 = styled(Icon)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject([""], [""])));
+var Text$3 = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject([""], [""])));
 var StyledTag = styled.div.attrs(getTagColors)(templateObject_4$b || (templateObject_4$b = __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;
     return color;
 }, function (_a) {
     var backgroundColor = _a.backgroundColor;
     return backgroundColor;
-}, LeftIcon$2, Text$2, Text$2, RightIcon$1);
-var templateObject_1$C, templateObject_2$j, templateObject_3$f, templateObject_4$b;
+}, LeftIcon$2, Text$3, Text$3, RightIcon$1);
+var templateObject_1$F, templateObject_2$k, templateObject_3$g, templateObject_4$b;
 
 var Tag = function (_a) {
     var leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, tagStyle = _a.tagStyle, text = _a.text, type = _a.type, className = _a.className;
     return (React.createElement(StyledTag, { className: className, type: type, tagStyle: tagStyle },
         leftIcon && React.createElement(LeftIcon$2, __assign({}, leftIcon)),
-        React.createElement(Text$2, null, text),
+        React.createElement(Text$3, null, text),
         rightIcon && React.createElement(RightIcon$1, __assign({}, rightIcon))));
 };
 
@@ -2005,28 +2089,28 @@ var tagPalette = {
     },
 };
 
-var Arrow = styled.div(templateObject_1$D || (templateObject_1$D = __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$G || (templateObject_1$G = __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$k || (templateObject_2$k = __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$D, templateObject_2$k;
+var arrowStyle = css(templateObject_2$l || (templateObject_2$l = __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$G, templateObject_2$l;
 
 var getMessageStyles = function (_a) {
     var theme = _a.theme, type = _a.type;
     return theme.components.tooltip[type];
 };
-var Message = styled.div.attrs(getMessageStyles)(templateObject_1$E || (templateObject_1$E = __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$H || (templateObject_1$H = __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$E;
+var templateObject_1$H;
 
-var TooltipContainer = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), arrowStyle);
-var templateObject_1$F;
+var TooltipContainer = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), arrowStyle);
+var templateObject_1$I;
 
 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;
@@ -2063,7 +2147,7 @@ var Tooltip = function (_a) {
             },
         ]; }, [arrowRef]),
     }), attributes = _d.attributes, styles = _d.styles;
-    return (React.createElement(Wrapper$6, { className: className, ref: wrapperRef },
+    return (React.createElement(Wrapper$8, { className: className, ref: wrapperRef },
         React.createElement("div", { ref: buttonRef, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave }, children),
         React.createElement(CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
             React.createElement(BodyAnimationWrapper$1, null,
@@ -2071,9 +2155,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$6 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var BodyAnimationWrapper$1 = styled.div(templateObject_2$l || (templateObject_2$l = __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$G, templateObject_2$l;
+var Wrapper$8 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var BodyAnimationWrapper$1 = styled.div(templateObject_2$m || (templateObject_2$m = __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$J, templateObject_2$m;
 
 var tooltipPalette = {
     light: {
@@ -2097,14 +2181,15 @@ var components = {
     iconBackground: iconBackgroundPalette,
     dropdown: dropdownPalette,
     sidebarItem: sidebarItemPalette,
+    stepper: stepperPalette,
 };
 var defaultTheme = {
     palette: defaultPalette,
     components: components,
 };
 
-var ModalAnimation = createGlobalStyle(templateObject_1$H || (templateObject_1$H = __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$H;
+var ModalAnimation = createGlobalStyle(templateObject_1$K || (templateObject_1$K = __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$K;
 
 var styledModalBoxWidth = function (isSmall, isFullscreen) {
     if (isFullscreen) {
@@ -2118,13 +2203,13 @@ var styledModalBoxWidth = function (isSmall, isFullscreen) {
 
 var headerFooterHeight = '80px';
 var closeTimeoutMS = 200;
-var StyledReactModalContainer = styled(ReactModal)(templateObject_1$I || (templateObject_1$I = __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$L || (templateObject_1$L = __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$c || (templateObject_4$c = __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$m || (templateObject_2$m = __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$n || (templateObject_2$n = __makeTemplateObject(["\n          height: ", "px;\n        "], ["\n          height: ", "px;\n        "])), fullScreenHeight) : css(templateObject_3$h || (templateObject_3$h = __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) {
@@ -2163,14 +2248,14 @@ var ModalFooter = styled.div(templateObject_12$1 || (templateObject_12$1 = __mak
     var palette = _a.theme.palette;
     return palette.grey[100];
 });
-var Wrapper$7 = styled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject([""], [""])));
+var Wrapper$9 = 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$3 = 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$I, templateObject_2$m, templateObject_3$g, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1;
+var templateObject_1$L, templateObject_2$n, templateObject_3$h, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1;
 
 var closeTimeoutMS$1 = 200;
 var modalStyle = {
@@ -2260,7 +2345,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$J || (templateObject_1$J = __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$M || (templateObject_1$M = __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) {
@@ -2273,21 +2358,21 @@ var ClearButton = styled.div(templateObject_1$J || (templateObject_1$J = __makeT
     var visible = _a.visible;
     return (visible ? 'inherit' : 'none');
 });
-var WrapperInput = styled.div(templateObject_2$n || (templateObject_2$n = __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$o || (templateObject_2$o = __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$J, templateObject_2$n;
+var templateObject_1$M, templateObject_2$o;
 
-var CustomSizeModal = styled(Modal)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  width: 432px;\n  max-width: 90vw;\n"], ["\n  width: 432px;\n  max-width: 90vw;\n"])));
-var TitleContent = styled.div(templateObject_2$o || (templateObject_2$o = __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 CustomSizeModal = styled(Modal)(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  width: 432px;\n  max-width: 90vw;\n"], ["\n  width: 432px;\n  max-width: 90vw;\n"])));
+var TitleContent = styled.div(templateObject_2$p || (templateObject_2$p = __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$i || (templateObject_3$i = __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$d || (templateObject_4$d = __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$9 || (templateObject_5$9 = __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$K, templateObject_2$o, templateObject_3$h, templateObject_4$d, templateObject_5$9;
+var templateObject_1$N, templateObject_2$p, templateObject_3$i, templateObject_4$d, templateObject_5$9;
 
 var typeMap = {
     error: 'error',
@@ -2326,10 +2411,10 @@ var ConfirmationModal = function (props) {
                     props.onAction();
                 } }))));
 };
-var StyledButton = styled(Button)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  margin-left: 16px;\n"], ["\n  margin-left: 16px;\n"])));
-var templateObject_1$L;
+var StyledButton = styled(Button)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  margin-left: 16px;\n"], ["\n  margin-left: 16px;\n"])));
+var templateObject_1$O;
 
-var StyledWrapper$1 = styled.div(templateObject_1$M || (templateObject_1$M = __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$1 = styled.div(templateObject_1$P || (templateObject_1$P = __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) {
@@ -2354,14 +2439,14 @@ var PageEmptySet = function (_a) {
         text && React.createElement("p", null, text),
         button));
 };
-var templateObject_1$M;
+var templateObject_1$P;
 
-var StyledWrapper$2 = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
+var StyledWrapper$2 = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
     "\n"])), function (_a) {
     var palette = _a.theme.palette;
-    return css(templateObject_1$N || (templateObject_1$N = __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$Q || (templateObject_1$Q = __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$N, templateObject_2$p;
+var templateObject_1$Q, templateObject_2$q;
 
 var PaginationComponent = function (props) {
     var numberOfPages = Math.ceil(props.listSize / props.pageSize);
@@ -2399,12 +2484,12 @@ var PaginationComponent = function (props) {
 var Pagination = function (props) { return (React.createElement(StyledWrapper$2, null,
     React.createElement(PaginationComponent, __assign({}, props)))); };
 
-var StyledProgressbarWrapper = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
+var StyledProgressbarWrapper = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
     "\n"])), function (_a) {
     var color = _a.color, percentage = _a.percentage, palette = _a.theme.palette;
-    return css(templateObject_1$O || (templateObject_1$O = __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$R || (templateObject_1$R = __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$O, templateObject_2$q;
+var templateObject_1$R, templateObject_2$r;
 
 var UnstyledProgressbar = /** @class */ (function (_super) {
     __extends(UnstyledProgressbar, _super);
@@ -2478,7 +2563,7 @@ var ReactSelectWrapper = function (props) {
     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$3 = styled.div(templateObject_1$P || (templateObject_1$P = __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 StyledWrapper$3 = styled.div(templateObject_1$S || (templateObject_1$S = __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];
 });
@@ -2505,37 +2590,9 @@ var SelectAsync = function (props) {
         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$P;
+var templateObject_1$S;
 
-var SingleStep = function (props) { return (React.createElement("div", { className: 'stepBar__single_step' },
-    React.createElement("div", { className: "stepBar__single_step__number " + props.type }, props.number),
-    React.createElement("div", { className: "stepBar__single_step__title " + props.type }, props.title))); };
-
-var StyledStepBarWrapper = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
-    "\n"])), function (_a) {
-    var palette = _a.theme.palette;
-    return css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n    .stepBar {\n      display: flex;\n      width: 100%;\n      align-items: center;\n    }\n\n    .stepBar__single_step {\n      display: flex;\n      align-items: center;\n    }\n\n    .stepBar__single_step__number {\n      width: 24px;\n      height: 24px;\n      border-radius: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: 18px;\n      background-color: ", ";\n      color: ", ";\n\n      &.current {\n        background-color: ", ";\n      }\n\n      &.completed {\n        background-color: ", ";\n      }\n    }\n\n    .stepBar__single_step__title {\n      margin-left: ", ";\n      font-weight: normal;\n      font-size: 14px;\n      line-height: 21px;\n      color: ", ";\n\n      &.current {\n        font-weight: 600;\n        color: ", ";\n      }\n    }\n\n    .stepBar__step_divider {\n      background: ", ";\n      width: 32px;\n      height: 3px;\n      margin: 0 ", ";\n    }\n  "], ["\n    .stepBar {\n      display: flex;\n      width: 100%;\n      align-items: center;\n    }\n\n    .stepBar__single_step {\n      display: flex;\n      align-items: center;\n    }\n\n    .stepBar__single_step__number {\n      width: 24px;\n      height: 24px;\n      border-radius: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-weight: 500;\n      font-size: 14px;\n      line-height: 18px;\n      background-color: ", ";\n      color: ", ";\n\n      &.current {\n        background-color: ", ";\n      }\n\n      &.completed {\n        background-color: ", ";\n      }\n    }\n\n    .stepBar__single_step__title {\n      margin-left: ", ";\n      font-weight: normal;\n      font-size: 14px;\n      line-height: 21px;\n      color: ", ";\n\n      &.current {\n        font-weight: 600;\n        color: ", ";\n      }\n    }\n\n    .stepBar__step_divider {\n      background: ", ";\n      width: 32px;\n      height: 3px;\n      margin: 0 ", ";\n    }\n  "])), palette.grey[500], palette.white[100], palette.blue[500], palette.green[500], spacing.xs, palette.grey[500], palette.blue[500], palette.grey[100], spacing.s);
-});
-var templateObject_1$Q, templateObject_2$r;
-
-var UnstyledStepBar = /** @class */ (function (_super) {
-    __extends(UnstyledStepBar, _super);
-    function UnstyledStepBar() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    UnstyledStepBar.prototype.render = function () {
-        var stepList = this.props.stepList;
-        return (React.createElement("div", { className: 'stepBar' }, stepList.map(function (o, i) { return (React.createElement(Fragment, { key: i },
-            React.createElement(SingleStep, __assign({}, o)),
-            " ",
-            i !== stepList.length - 1 ? React.createElement("div", { className: 'stepBar__step_divider' }) : null)); })));
-    };
-    return UnstyledStepBar;
-}(Component));
-var StepBar = function (props) { return (React.createElement(StyledStepBarWrapper, __assign({}, props),
-    React.createElement(UnstyledStepBar, __assign({}, props)))); };
-
-var linearBackground = function () { return css(templateObject_1$R || (templateObject_1$R = __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$T || (templateObject_1$T = __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) {
@@ -2548,7 +2605,7 @@ var linearBackground = function () { return css(templateObject_1$R || (templateO
     var theme = _a.theme;
     return theme.palette.grey[100];
 }); };
-var templateObject_1$R;
+var templateObject_1$T;
 
 var tabletLandscape = 991;
 var responsiveThresholds = {
@@ -2621,7 +2678,7 @@ var typeMap$1 = {
     desc: faSortDown,
     default: faSort,
 };
-var StyledWrapper$4 = styled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n  margin-left: 0.5rem;\n"], ["\n  margin-left: 0.5rem;\n"])));
+var StyledWrapper$4 = styled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n  margin-left: 0.5rem;\n"], ["\n  margin-left: 0.5rem;\n"])));
 var StyledIcon$4 = styled(Icon)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
 var SortIcon = function (props) {
     var filter = _.find(props.propertiesFilter, ['id', props.property]);
@@ -2654,7 +2711,7 @@ var SortIcon = function (props) {
                 props.handleSortOnProperty(props.property, nextType);
             } })));
 };
-var templateObject_1$S, templateObject_2$s;
+var templateObject_1$U, templateObject_2$s;
 
 var ellipsisIcon = {
     icon: faEllipsisH,
@@ -2681,21 +2738,21 @@ var HeadDesktop = function (_a) {
                 React.createElement(Icon, __assign({}, ellipsisIcon))))));
 };
 
-var Row = styled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject([""], [""])));
+var Row = styled.div(templateObject_1$V || (templateObject_1$V = __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$T;
+var templateObject_1$V;
 
 var ActionLink = styled.a(templateObject_2$t || (templateObject_2$t = __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$U || (templateObject_1$U = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), props.color); });
-var templateObject_1$U, templateObject_2$t;
+    "\n"])), function (props) { return css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), props.color); });
+var templateObject_1$W, templateObject_2$t;
 
-var ActionsContainer = styled.div(templateObject_1$V || (templateObject_1$V = __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$V;
+var ActionsContainer = styled.div(templateObject_1$X || (templateObject_1$X = __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$X;
 
 var StyledWrapper$5 = styled.div(templateObject_2$u || (templateObject_2$u = __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) {
@@ -2703,14 +2760,14 @@ var StyledWrapper$5 = styled.div(templateObject_2$u || (templateObject_2$u = __m
     return palette.white[100];
 }, function (props) {
     if (props.active) {
-        return css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n        display: block;\n      "], ["\n        display: block;\n      "])));
+        return css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n        display: block;\n      "], ["\n        display: block;\n      "])));
     }
     return undefined;
 });
 var Action = styled.p(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n  cursor: pointer;\n  user-select: none;\n  ", "\n"], ["\n  cursor: pointer;\n  user-select: none;\n  ",
     "\n"])), function (props) {
     if (props.color) {
-        return css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), props.color);
+        return css(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n        color: ", ";\n      "], ["\n        color: ", ";\n      "])), props.color);
     }
     return undefined;
 });
@@ -2720,24 +2777,24 @@ var ActionsPopUp = function (props) { return (React.createElement(StyledWrapper$
             a.action(props.element, props.selectedRows);
             props.handlePopUpVisibility(undefined);
         }, color: a.color }, a.label))); }))); };
-var templateObject_1$W, templateObject_2$u, templateObject_3$i, templateObject_4$e;
+var templateObject_1$Y, templateObject_2$u, templateObject_3$j, templateObject_4$e;
 
-var StyledWrapper$6 = 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$6 = styled.div(templateObject_3$k || (templateObject_3$k = __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$v || (templateObject_2$v = __makeTemplateObject(["\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  "], ["\n    ",
-        "\n    &:hover {\n      background-color: ", ";\n    }\n  "])), active && css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), palette.blue[50], palette.blue[500]), palette.blue[50]);
+        "\n    &:hover {\n      background-color: ", ";\n    }\n  "])), active && css(templateObject_1$Z || (templateObject_1$Z = __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$6, { active: props.active, onClick: function () { return props.handlePopUpVisibility(props.rowId); } },
     React.createElement(Icon, { icon: faEllipsisH }))); };
-var templateObject_1$X, templateObject_2$v, templateObject_3$j;
+var templateObject_1$Z, templateObject_2$v, templateObject_3$k;
 
 var ActionsPopUpUnderlay = styled.div(templateObject_2$w || (templateObject_2$w = __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$Y || (templateObject_1$Y = __makeTemplateObject(["\n      display: block;\n    "], ["\n      display: block;\n    "])));
+    return active && css(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n      display: block;\n    "], ["\n      display: block;\n    "])));
 });
-var templateObject_1$Y, templateObject_2$w;
+var templateObject_1$_, templateObject_2$w;
 
 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;
@@ -2768,13 +2825,13 @@ var RowDesktop = function (_a) {
         React.createElement("td", null)));
 };
 
-var StyledWrapper$7 = styled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
+var StyledWrapper$7 = styled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
     "\n"])), function (_a) {
     var show = _a.show, palette = _a.theme.palette;
     return css(templateObject_2$x || (templateObject_2$x = __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$Z || (templateObject_1$Z = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "], ["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))), palette.blue[500], palette.white[100], palette.white[100], palette.grey[50], palette.grey[150], palette.grey[100]);
+        "\n    .link {\n      color: ", ";\n      cursor: pointer;\n    }\n    .modal__container {\n      background-color: ", ";\n      width: 424px;\n      box-shadow: 0px 16px 24px rgba(23, 43, 77, 0.24), 0px 0px 0px rgba(9, 30, 66, 0.08);\n      border-radius: 8px;\n      background-color: ", ";\n    }\n    .modal__header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      background: ", ";\n      border-top-left-radius: 8px;\n      border-top-right-radius: 8px;\n      padding: 0 1.5rem;\n      font-size: 20px;\n      line-height: 30px;\n      p {\n        cursor: pointer;\n      }\n    }\n    .modal__body {\n      padding: 1rem 1.5rem;\n      position: relative;\n      .draggable_element {\n        display: flex;\n        align-items: center;\n        &:hover,\n        &:active {\n          .icon {\n            visibility: visible;\n            color: ", ";\n          }\n        }\n      }\n      .draggable__handle {\n        width: 30px;\n        .icon {\n          display: block;\n          visibility: hidden;\n        }\n      }\n      .draggable__checkbox {\n        margin-bottom: 6px;\n      }\n    }\n    .modal__footer {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 1.5rem 1.5rem;\n      border-top: 1px solid ", ";\n      font-size: 14px;\n      line-height: 21px;\n      .buttons__container {\n        a {\n          &:first-child {\n            margin-right: 1rem;\n          }\n        }\n      }\n    }\n  "])), show && css(templateObject_1$$ || (templateObject_1$$ = __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$Z, templateObject_2$x, templateObject_3$k;
+var templateObject_1$$, templateObject_2$x, templateObject_3$l;
 
 var getItemStyle = function (snapshot, draggableStyle) {
     return __assign({ userSelect: 'none', padding: '0.5rem 0 0.5rem 0', outline: "none" }, draggableStyle);
@@ -2872,7 +2929,7 @@ var CustomizationsModal = /** @class */ (function (_super) {
     return CustomizationsModal;
 }(Component));
 
-var LoadingTableRow = styled.tr(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n  height: 49px;\n"], ["\n  height: 49px;\n"])));
+var LoadingTableRow = styled.tr(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n  height: 49px;\n"], ["\n  height: 49px;\n"])));
 var LoadingContent = function (props) {
     // Loading elments for the table
     var renderElements = function () {
@@ -2892,7 +2949,7 @@ var LoadingContent = function (props) {
     };
     return React.createElement(React.Fragment, null, renderElements());
 };
-var templateObject_1$_;
+var templateObject_1$10;
 
 var Pagination$1 = function (props) {
     var managedCurrentPage = props.currentPage;
@@ -3059,7 +3116,7 @@ var StyledTableWrapper = styled(UnstyledTable)(templateObject_7$8 || (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$$ || (templateObject_1$$ = __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$y || (templateObject_2$y = __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$f || (templateObject_4$f = __makeTemplateObject(["\n          &:first-child {\n            width: 20px;\n          }\n        "], ["\n          &:first-child {\n            width: 20px;\n          }\n        "]))));
+        "\n      }\n    }\n  "])), isHeaderFixed && css(templateObject_1$11 || (templateObject_1$11 = __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$y || (templateObject_2$y = __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$m || (templateObject_3$m = __makeTemplateObject(["\n          &:hover {\n            background-color: ", ";\n          }\n        "], ["\n          &:hover {\n            background-color: ", ";\n          }\n        "])), palette.grey[100]), !disableSelection && css(templateObject_4$f || (templateObject_4$f = __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];
@@ -3067,11 +3124,11 @@ var StyledTableWrapper = styled(UnstyledTable)(templateObject_7$8 || (templateOb
     var palette = _a.theme.palette;
     return css(templateObject_6$8 || (templateObject_6$8 = __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$$, templateObject_2$y, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$8;
+var templateObject_1$11, templateObject_2$y, templateObject_3$m, templateObject_4$f, templateObject_5$a, templateObject_6$8, templateObject_7$8;
 
 var Table = function (props) { return React.createElement(StyledTableWrapper, __assign({}, props)); };
 
-var ActiveTag = styled.span(templateObject_1$10 || (templateObject_1$10 = __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$12 || (templateObject_1$12 = __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) {
@@ -3081,16 +3138,16 @@ var ActiveTag = styled.span(templateObject_1$10 || (templateObject_1$10 = __make
     var active = _a.active, theme = _a.theme;
     return (active ? theme.palette.primary[500] : theme.palette.grey[900]);
 });
-var templateObject_1$10;
+var templateObject_1$12;
 
-var Tab = styled.span(templateObject_1$11 || (templateObject_1$11 = __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$13 || (templateObject_1$13 = __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$11;
+var templateObject_1$13;
 
 var Item$1 = function (_a) {
     var active = _a.active, handleClick = _a.handleClick, tabRef = _a.tabRef, text = _a.text;
@@ -3098,13 +3155,13 @@ var Item$1 = function (_a) {
         React.createElement(Tab, { active: active }, text),
         React.createElement(ActiveTag, { active: active })));
 };
-var ItemWrapper = styled.div(templateObject_1$12 || (templateObject_1$12 = __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$12;
+var ItemWrapper = styled.div(templateObject_1$14 || (templateObject_1$14 = __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$14;
 
 var TabsWrapper = styled.div(templateObject_2$z || (templateObject_2$z = __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$13 || (templateObject_1$13 = __makeTemplateObject(["\n      visibility: hidden;\n      position: absolute;\n    "], ["\n      visibility: hidden;\n      position: absolute;\n    "])));
+    return hidden && css(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n      visibility: hidden;\n      position: absolute;\n    "], ["\n      visibility: hidden;\n      position: absolute;\n    "])));
 }, function (_a) {
     var lateralPadding = _a.lateralPadding;
     return lateralPadding;
@@ -3115,8 +3172,8 @@ var TabsWrapper = styled.div(templateObject_2$z || (templateObject_2$z = __makeT
     var distance = _a.distance;
     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$13, templateObject_2$z, templateObject_3$m;
+var ScrollableTabsWrapper = styled(TabsWrapper)(templateObject_3$n || (templateObject_3$n = __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$15, templateObject_2$z, templateObject_3$n;
 
 var useResizedWidth = function () {
     var _a = useMeasure(), elementsWrapperRef = _a[0], wrapperTmpWidth = _a[1].width;
@@ -3149,8 +3206,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$14 || (templateObject_1$14 = __makeTemplateObject(["\n  height: 21px;\n"], ["\n  height: 21px;\n"])));
-var templateObject_1$14;
+var DropdownIcon = styled(Icon)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n  height: 21px;\n"], ["\n  height: 21px;\n"])));
+var templateObject_1$16;
 
 var TabsDropdown = function (_a) {
     var active = _a.active, tabs = _a.tabs;
@@ -3164,8 +3221,8 @@ var TabsDropdown = function (_a) {
     }))); }, [tabs]);
     return React.createElement(Dropdown$2, { alignRight: true, fullWidth: true, renderTrigger: renderTrigger, renderContent: renderContent });
 };
-var Dropdown$2 = styled(Dropdown)(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-var templateObject_1$15;
+var Dropdown$2 = styled(Dropdown)(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
+var templateObject_1$17;
 
 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;
@@ -3192,8 +3249,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$16 || (templateObject_1$16 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
-var templateObject_1$16;
+var StyledScrollableWrapper = styled(ScrollableTabsWrapper)(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
+var templateObject_1$18;
 
 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;
@@ -3206,19 +3263,19 @@ var TextButton = function (_a) {
     var callback = useCallback(function () {
         !isDisabled && onClick();
     }, [isDisabled, onClick]);
-    return (React.createElement(Wrapper$8, __assign({ isDisabled: isDisabled, onClick: callback }, rest), text));
+    return (React.createElement(Wrapper$a, __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$17 || (templateObject_1$17 = __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 enabledCss = function (theme, color) { return css(templateObject_1$19 || (templateObject_1$19 = __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$A || (templateObject_2$A = __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$8 = styled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+var Wrapper$a = styled.div(templateObject_3$o || (templateObject_3$o = __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$17, templateObject_2$A, templateObject_3$n;
+var templateObject_1$19, templateObject_2$A, templateObject_3$o;
 
 var ThemeProvider = function (_a) {
     var children = _a.children, theme = _a.theme;
@@ -3226,7 +3283,7 @@ var ThemeProvider = function (_a) {
         React.createElement(React.Fragment, null, children)));
 };
 
-var StyledTip = styled.div(templateObject_1$18 || (templateObject_1$18 = __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$1a || (templateObject_1$1a = __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) {
@@ -3234,12 +3291,12 @@ var StyledTip = styled.div(templateObject_1$18 || (templateObject_1$18 = __makeT
     return palette.primary[400];
 });
 var StyledLeftIcon = styled.span(templateObject_2$B || (templateObject_2$B = __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 StyledText = styled.span(templateObject_3$p || (templateObject_3$p = __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$g || (templateObject_4$g = __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$18, templateObject_2$B, templateObject_3$o, templateObject_4$g;
+var templateObject_1$1a, templateObject_2$B, templateObject_3$p, templateObject_4$g;
 
 var defaultCloseIcon$1 = {
     icon: faTimes,
@@ -3264,14 +3321,14 @@ var ShortcutTip = function (props) {
             React.createElement("b", null, shortcut)), leftIcon: rocketIcon }, rest)));
 };
 
-var StyledIconDiv = styled.div(templateObject_1$19 || (templateObject_1$19 = __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 StyledIconDiv = styled.div(templateObject_1$1b || (templateObject_1$1b = __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$5 = styled(Icon)(templateObject_2$C || (templateObject_2$C = __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 StyledTitle$1 = styled.div(templateObject_3$q || (templateObject_3$q = __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$h || (templateObject_4$h = __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$b || (templateObject_5$b = __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$9 || (templateObject_6$9 = __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$9 || (templateObject_7$9 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var templateObject_1$19, templateObject_2$C, templateObject_3$p, templateObject_4$h, templateObject_5$b, templateObject_6$9, templateObject_7$9;
+var templateObject_1$1b, templateObject_2$C, templateObject_3$q, templateObject_4$h, templateObject_5$b, templateObject_6$9, templateObject_7$9;
 
 var typeMap$2 = {
     standard: 'dark',
@@ -3323,8 +3380,8 @@ var ToastContainer = styled(ToastContainer$1).attrs({
     closeOnClick: false,
     draggable: false,
     rtl: false,
-})(templateObject_1$1a || (templateObject_1$1a = __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$1a;
+})(templateObject_1$1c || (templateObject_1$1c = __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$1c;
 
 var Toast = {
     Container: ToastContainer,
@@ -3337,4 +3394,4 @@ var Toast = {
     standard: standard,
 };
 
-export { Accordion, Avatar, Badge, Banner, Button, Checkbox, Chip, ConfirmationModal, Drawer, Dropdown, DropdownTabs, EInputErrorTypes, EInputSize, EInputTags, EInputTypes, GroupedList, Icon, IconBackground, IconButton, InlineMessage, InputText, MicroTag, Modal, ModalBody, ModalSearchable, PageEmptySet, Pagination, Progressbar, RadioButton, RadioButtonGroup, ScrollableTabs, Select, SelectAsync, SelectCreatable, ShortcutTip, SidebarItem, StepBar, Table, Tag, TextButton, ThemeProvider, Tip, Toast, Tooltip, WithBadge, sidebarItemHeight, useCheckboxValue };
+export { Accordion, Avatar, Badge, Banner, Button, Checkbox, Chip, ConfirmationModal, Drawer, Dropdown, DropdownTabs, EInputErrorTypes, EInputSize, EInputTags, EInputTypes, GroupedList, Icon, IconBackground, IconButton, InlineMessage, InputText, MicroTag, Modal, ModalBody, ModalSearchable, PageEmptySet, Pagination, Progressbar, RadioButton, RadioButtonGroup, ScrollableTabs, Select, SelectAsync, SelectCreatable, ShortcutTip, SidebarItem, Stepper, Table, Tag, TextButton, ThemeProvider, Tip, Toast, Tooltip, WithBadge, sidebarItemHeight, useCheckboxValue };