@fattureincloud/fic-design-system 0.3.15-alpha.0 → 0.3.17-1845

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+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';
 import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
@@ -81,6 +81,218 @@ function __makeTemplateObject(cooked, raw) {
     return cooked;
 }
 
+var iconSizeMap = {
+    xs: '.75em',
+    sm: '.875em',
+    lg: '1.33em',
+    '1x': '1em',
+    '2x': '2em',
+    '3x': '3em',
+    '4x': '4em',
+    '5x': '5em',
+    '6x': '6em',
+    '7x': '7em',
+    '8x': '8em',
+    '9x': '9em',
+    '10x': '10em',
+};
+
+var IconBackground = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return React.createElement(Wrapper, __assign({}, rest), children);
+};
+var circleBackgroundScaleFactor = 1.5;
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n\n  min-width: calc(", " * ", ");\n  min-height: calc(", " * ", ");\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  background-color: ",
+    ";\n  border-radius: 50%;\n\n  min-width: calc(", " * ", ");\n  min-height: calc(", " * ", ");\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
+    var theme = _a.theme, color = _a.color, backgroundColor = _a.backgroundColor;
+    return backgroundColor || theme.components.iconBackground[color] || 'transparent';
+}, circleBackgroundScaleFactor, function (_a) {
+    var size = _a.size;
+    return iconSizeMap[size];
+}, circleBackgroundScaleFactor, function (_a) {
+    var size = _a.size;
+    return iconSizeMap[size];
+});
+var templateObject_1;
+
+var black = {
+    8: 'rgba(51, 51, 51, 0.08)',
+    16: 'rgba(51, 51, 51, 0.16)',
+    48: 'rgba(51, 51, 51, 0.48)',
+    80: 'rgba(51, 51, 51, 0.8)',
+    100: '#333333',
+};
+
+var blue = {
+    900: '#0028AD',
+    800: '#0038B9',
+    700: '#0041C0',
+    600: '#004BC7',
+    500: '#0052CC',
+    400: '#266CD4',
+    300: '#4D86DB',
+    200: '#80A9E6',
+    100: '#B3CBF0',
+    50: '#E0EAF9',
+};
+
+var cyan = {
+    900: '#066552',
+    800: '#088C72',
+    700: '#0AA989',
+    600: '#0BC09C',
+    500: '#0DD5AD',
+    400: '#4DE0C2',
+    300: '#7DE8D3',
+    200: '#A4EFE0',
+    100: '#C6F5EB',
+    50: '#E4FAF5',
+};
+
+var fuchsia = {
+    900: '#500663',
+    800: '#71088B',
+    700: '#880AA8',
+    600: '#9C0BC0',
+    500: '#AD0DD5',
+    400: '#CB67E4',
+    300: '#DB94EC',
+    200: '#E6B6F2',
+    100: '#EFD2F7',
+    50: '#F7E9FB',
+};
+
+var green = {
+    900: '#00572E',
+    800: '#006A3F',
+    700: '#007448',
+    600: '#007F52',
+    500: '#00875A',
+    400: '#269973',
+    300: '#4DAB8C',
+    200: '#80C3AD',
+    100: '#B3DBCE',
+    50: '#E0F1EB',
+};
+
+var grey = {
+    900: '#091E42',
+    800: '#253858',
+    700: '#505F79',
+    600: '#5E6C84',
+    500: '#6B778C',
+    400: '#7A869A',
+    300: '#A5ADBA',
+    200: '#C1C7D0',
+    100: '#EBECF0',
+    50: '#FAFBFC',
+};
+
+var indigo = {
+    900: '#05175E',
+    800: '#082188',
+    700: '#0A29A6',
+    600: '#0B2FBF',
+    500: '#0D35D5',
+    400: '#637CE3',
+    300: '#90A3EB',
+    200: '#B3BFF1',
+    100: '#D0D7F6',
+    50: '#E8ECFB',
+};
+
+var orange = {
+    900: '#783722',
+    800: '#A74D2F',
+    700: '#CA5D39',
+    600: '#E66A42',
+    500: '#FF7649',
+    400: '#FF9978',
+    300: '#FFB49B',
+    200: '#FFCAB9',
+    100: '#FFDED3',
+    50: '#FFEFEA',
+};
+
+var pink = {
+    900: '#640648',
+    800: '#8C0864',
+    700: '#A80A79',
+    600: '#C00B8A',
+    500: '#D50D99',
+    400: '#E569BF',
+    300: '#EC96D2',
+    200: '#F2B7E0',
+    100: '#F7D2EC',
+    50: '#FBEAF6',
+};
+
+var red = {
+    900: '#C81603',
+    800: '#D12206',
+    700: '#D52808',
+    600: '#DA300A',
+    500: '#DE350B',
+    400: '#E35330',
+    300: '#E87254',
+    200: '#EF9A85',
+    100: '#F5C2B6',
+    50: '#FBE7E2',
+};
+
+var white = {
+    8: 'rgba(255, 255, 255, 0.08)',
+    16: 'rgba(255, 255, 255, 0.16)',
+    48: 'rgba(255, 255, 255, 0.48)',
+    80: 'rgba(255, 255, 255, 0.8)',
+    100: '#FFFFFF',
+};
+
+var yellow = {
+    900: '#FF6B0A',
+    800: '#FF7C12',
+    700: '#FF8617',
+    600: '#FF911B',
+    500: '#FF991F',
+    400: '#FFA841',
+    300: '#FFB862',
+    200: '#FFCC8F',
+    100: '#FFE0BC',
+    50: '#FFF3E4',
+};
+
+var defaultPalette = {
+    black: black,
+    white: white,
+    grey: grey,
+    blue: blue,
+    indigo: indigo,
+    yellow: yellow,
+    orange: orange,
+    red: red,
+    green: green,
+    fuchsia: fuchsia,
+    pink: pink,
+    cyan: cyan,
+    primary: blue,
+};
+
+var iconBackgroundPalette = {
+    blue: defaultPalette.blue[50],
+    indigo: defaultPalette.indigo[50],
+    yellow: defaultPalette.yellow[50],
+    orange: defaultPalette.orange[50],
+    red: defaultPalette.red[50],
+    green: defaultPalette.green[50],
+    fuchsia: defaultPalette.fuchsia[50],
+    pink: defaultPalette.pink[50],
+    cyan: defaultPalette.cyan[50],
+    primary: defaultPalette.primary[50],
+    grey: defaultPalette.grey[100],
+    white: defaultPalette.white[16],
+    black: defaultPalette.black[16],
+};
+
 var getIconStyles = function (_a) {
     var theme = _a.theme, color = _a.color;
     return color
@@ -91,7 +303,7 @@ var getIconStyles = function (_a) {
         };
 };
 
-var Icon = styled(FontAwesomeIcon).attrs(getIconStyles)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: ", ";\n  color: ", ";\n  --fa-secondary-color: ", ";\n"], ["\n  cursor: ", ";\n  color: ", ";\n  --fa-secondary-color: ", ";\n"])), function (_a) {
+var Icon = styled(FontAwesomeIcon).attrs(getIconStyles)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  cursor: ", ";\n  color: ", ";\n  --fa-secondary-color: ", ";\n"], ["\n  cursor: ", ";\n  color: ", ";\n  --fa-secondary-color: ", ";\n"])), function (_a) {
     var onClick = _a.onClick;
     return (onClick ? 'pointer' : 'inherit');
 }, function (_a) {
@@ -101,7 +313,36 @@ var Icon = styled(FontAwesomeIcon).attrs(getIconStyles)(templateObject_1 || (tem
     var secondary = _a.secondary;
     return secondary;
 });
-var templateObject_1;
+var templateObject_1$1;
+
+var getColoredIcon = function (color) { return ({
+    primary: defaultPalette[color][500],
+    secondary: defaultPalette[color][200],
+}); };
+var iconPalette = {
+    blue: getColoredIcon('blue'),
+    red: getColoredIcon('red'),
+    green: getColoredIcon('green'),
+    yellow: getColoredIcon('yellow'),
+    orange: getColoredIcon('orange'),
+    primary: getColoredIcon('primary'),
+    cyan: getColoredIcon('cyan'),
+    fuchsia: getColoredIcon('fuchsia'),
+    indigo: getColoredIcon('indigo'),
+    pink: getColoredIcon('pink'),
+    grey: {
+        primary: defaultPalette.grey[500],
+        secondary: defaultPalette.grey[200],
+    },
+    white: {
+        primary: defaultPalette.white[100],
+        secondary: defaultPalette.white[48],
+    },
+    black: {
+        primary: defaultPalette.black[100],
+        secondary: defaultPalette.black[48],
+    },
+};
 
 var spacing = {
     xxs: '4px',
@@ -114,7 +355,7 @@ var spacing = {
     xxxl: '64px',
 };
 
-var StyledAccordionWrapper = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  color: ", ";\n  .header {\n    border-top: 1px solid ", ";\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: ", ";\n    .header__element {\n      padding: 0 ", ";\n      &:hover {\n        &.pointer {\n          cursor: pointer;\n        }\n      }\n    }\n\n    .action_icon {\n      cursor: pointer;\n      display: none;\n      width: ", ";\n      height: ", ";\n      &.visibile {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      &:hover {\n        background: ", ";\n        border-radius: 4px;\n      }\n    }\n\n    .chevron {\n    }\n    .chevron__closed {\n      transform: rotate(-90deg);\n    }\n\n    .title {\n      flex: 1;\n      padding: 0;\n      user-select: none;\n      p {\n        margin: 0;\n        font-size: 20px;\n        line-height: 30px;\n      }\n    }\n  }\n\n  .body {\n    padding: 0 ", ";\n    height: auto;\n\n    &.closed {\n      overflow: hidden;\n      height: 0;\n    }\n  }\n"], ["\n  color: ", ";\n  .header {\n    border-top: 1px solid ", ";\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: ", ";\n    .header__element {\n      padding: 0 ", ";\n      &:hover {\n        &.pointer {\n          cursor: pointer;\n        }\n      }\n    }\n\n    .action_icon {\n      cursor: pointer;\n      display: none;\n      width: ", ";\n      height: ", ";\n      &.visibile {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      &:hover {\n        background: ", ";\n        border-radius: 4px;\n      }\n    }\n\n    .chevron {\n    }\n    .chevron__closed {\n      transform: rotate(-90deg);\n    }\n\n    .title {\n      flex: 1;\n      padding: 0;\n      user-select: none;\n      p {\n        margin: 0;\n        font-size: 20px;\n        line-height: 30px;\n      }\n    }\n  }\n\n  .body {\n    padding: 0 ", ";\n    height: auto;\n\n    &.closed {\n      overflow: hidden;\n      height: 0;\n    }\n  }\n"])), function (_a) {
+var StyledAccordionWrapper = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  color: ", ";\n  .header {\n    border-top: 1px solid ", ";\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: ", ";\n    .header__element {\n      padding: 0 ", ";\n      &:hover {\n        &.pointer {\n          cursor: pointer;\n        }\n      }\n    }\n\n    .action_icon {\n      cursor: pointer;\n      display: none;\n      width: ", ";\n      height: ", ";\n      &.visibile {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      &:hover {\n        background: ", ";\n        border-radius: 4px;\n      }\n    }\n\n    .chevron {\n    }\n    .chevron__closed {\n      transform: rotate(-90deg);\n    }\n\n    .title {\n      flex: 1;\n      padding: 0;\n      user-select: none;\n      p {\n        margin: 0;\n        font-size: 20px;\n        line-height: 30px;\n      }\n    }\n  }\n\n  .body {\n    padding: 0 ", ";\n    height: auto;\n\n    &.closed {\n      overflow: hidden;\n      height: 0;\n    }\n  }\n"], ["\n  color: ", ";\n  .header {\n    border-top: 1px solid ", ";\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: ", ";\n    .header__element {\n      padding: 0 ", ";\n      &:hover {\n        &.pointer {\n          cursor: pointer;\n        }\n      }\n    }\n\n    .action_icon {\n      cursor: pointer;\n      display: none;\n      width: ", ";\n      height: ", ";\n      &.visibile {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n      &:hover {\n        background: ", ";\n        border-radius: 4px;\n      }\n    }\n\n    .chevron {\n    }\n    .chevron__closed {\n      transform: rotate(-90deg);\n    }\n\n    .title {\n      flex: 1;\n      padding: 0;\n      user-select: none;\n      p {\n        margin: 0;\n        font-size: 20px;\n        line-height: 30px;\n      }\n    }\n  }\n\n  .body {\n    padding: 0 ", ";\n    height: auto;\n\n    &.closed {\n      overflow: hidden;\n      height: 0;\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.black[100];
 }, function (_a) {
@@ -124,7 +365,7 @@ var StyledAccordionWrapper = styled.div(templateObject_1$1 || (templateObject_1$
     var theme = _a.theme;
     return theme.palette.grey[100];
 }, spacing.l);
-var templateObject_1$1;
+var templateObject_1$2;
 
 var UnstyledAccordion = /** @class */ (function (_super) {
     __extends(UnstyledAccordion, _super);
@@ -176,13 +417,13 @@ var getBackGroundImageStyle = function (_a) {
 var BaseAvatar = function (props) { return React.createElement("span", { className: props.className }); };
 var Avatar = styled(BaseAvatar).attrs(function (props) { return ({
     initials: props.initials ? (['m', 'l'].includes(props.size) ? props.initials.slice(0, 2) : props.initials[0]) : '',
-}); })(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-box-pack: center;\n  height: ", "px;\n  width: ", "px;\n  line-height: 0;\n  border-radius: 100%;\n  -webkit-box-align: center;\n  background-size: cover;\n  color: white;\n  background-color: ", ";\n  ", "\n\n  &:after {\n    content: '", "';\n    line-height: 40px;\n    font-weight: 500;\n    font-style: normal;\n    font-size: ", "px;\n    text-transform: uppercase;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-box-pack: center;\n  height: ", "px;\n  width: ", "px;\n  line-height: 0;\n  border-radius: 100%;\n  -webkit-box-align: center;\n  background-size: cover;\n  color: white;\n  background-color: ", ";\n  ", "\n\n  &:after {\n    content: '", "';\n    line-height: 40px;\n    font-weight: 500;\n    font-style: normal;\n    font-size: ", "px;\n    text-transform: uppercase;\n  }\n"])), function (props) { return avatarSizes[props.size || 'm']; }, function (props) { return avatarSizes[props.size || 'm']; }, function (_a) {
+}); })(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-box-pack: center;\n  height: ", "px;\n  width: ", "px;\n  line-height: 0;\n  border-radius: 100%;\n  -webkit-box-align: center;\n  background-size: cover;\n  color: white;\n  background-color: ", ";\n  ", "\n\n  &:after {\n    content: '", "';\n    line-height: 40px;\n    font-weight: 500;\n    font-style: normal;\n    font-size: ", "px;\n    text-transform: uppercase;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  -webkit-box-pack: center;\n  height: ", "px;\n  width: ", "px;\n  line-height: 0;\n  border-radius: 100%;\n  -webkit-box-align: center;\n  background-size: cover;\n  color: white;\n  background-color: ", ";\n  ", "\n\n  &:after {\n    content: '", "';\n    line-height: 40px;\n    font-weight: 500;\n    font-style: normal;\n    font-size: ", "px;\n    text-transform: uppercase;\n  }\n"])), function (props) { return avatarSizes[props.size || 'm']; }, function (props) { return avatarSizes[props.size || 'm']; }, function (_a) {
     var theme = _a.theme;
     return theme.palette.primary[500];
 }, function (props) { return getBackGroundImageStyle(props); }, function (props) { return (props.image ? '' : props.initials); }, function (props) { return textSizes[props.size || 'm']; });
-var templateObject_1$2;
+var templateObject_1$3;
 
-var Body = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-flex;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  border-radius: 4px;\n  margin: 3px 0;\n  max-height: 24px;\n\n  padding-left: ", ";\n  padding-right: ", ";\n\n  color: ", ";\n  background-color: ", ";\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-flex;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  border-radius: 4px;\n  margin: 3px 0;\n  max-height: 24px;\n\n  padding-left: ", ";\n  padding-right: ", ";\n\n  color: ", ";\n  background-color: ", ";\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+var Body = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-flex;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  border-radius: 4px;\n  margin: 3px 0;\n  max-height: 24px;\n\n  padding-left: ", ";\n  padding-right: ", ";\n\n  color: ", ";\n  background-color: ", ";\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-flex;\n  -webkit-box-align: center;\n  -ms-flex-align: center;\n  align-items: center;\n  border-radius: 4px;\n  margin: 3px 0;\n  max-height: 24px;\n\n  padding-left: ", ";\n  padding-right: ", ";\n\n  color: ", ";\n  background-color: ", ";\n\n  &.red {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.green {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
     var imageUrl = _a.imageUrl, leftIcon = _a.leftIcon;
     return (leftIcon || imageUrl ? '8px' : '0');
 }, function (_a) {
@@ -207,7 +448,7 @@ var Body = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplate
     var theme = _a.theme;
     return theme.palette.green[900];
 });
-var templateObject_1$3;
+var templateObject_1$4;
 
 var Badge = function (props) {
     var color = props.color, handleRightIconClick = props.handleRightIconClick, imageUrl = props.imageUrl, leftIcon = props.leftIcon, rightIcon = props.rightIcon, text = props.text;
@@ -217,8 +458,8 @@ var Badge = function (props) {
         React.createElement(Text, null, text),
         rightIcon && React.createElement(Icon, __assign({}, rightIcon, { onClick: handleRightIconClick }))));
 };
-var Text = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  padding: ", " ", ";\n"], ["\n  padding: ", " ", ";\n"])), spacing.xxs, spacing.xs);
-var templateObject_1$4;
+var Text = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  padding: ", " ", ";\n"], ["\n  padding: ", " ", ";\n"])), spacing.xxs, spacing.xs);
+var templateObject_1$5;
 
 var mapColors = function (theme, color) {
     switch (color) {
@@ -245,20 +486,19 @@ var mapColors = function (theme, color) {
 
 var Banner = function (_a) {
     var color = _a.color, content = _a.content, icon = _a.icon, onClose = _a.onClose;
-    return (React.createElement(Wrapper, { color: color },
-        React.createElement("div", null,
-            icon && React.createElement(StyledIcon, __assign({}, icon)),
-            content),
+    return (React.createElement(Wrapper$1, { color: color },
+        icon && React.createElement(Icon, __assign({}, icon)),
+        React.createElement(Content, null, content),
         onClose && React.createElement(Icon, { icon: faTimes, color: 'grey', onClick: onClose })));
 };
-var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  padding: 10px 20px 10px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  ",
-    "\n  padding: 10px 20px 10px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])), function (_a) {
+var Wrapper$1 = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  padding: 10px 20px 10px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 10px;\n"], ["\n  ",
+    "\n  padding: 10px 20px 10px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 10px;\n"])), function (_a) {
     var color = _a.color, theme = _a.theme;
     var _b = mapColors(theme, color), bgColor = _b.bgColor, textColor = _b.textColor;
-    return css(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), bgColor, textColor);
+    return css(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), bgColor, textColor);
 });
-var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 20px;\n"], ["\n  margin-right: 20px;\n"])));
-var templateObject_1$5, templateObject_2, templateObject_3;
+var Content = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+var templateObject_1$6, templateObject_2, templateObject_3;
 
 var useDebounceClick = function (_a) {
     var _b = _a.manualLock, manualLock = _b === void 0 ? false : _b, onClick = _a.onClick, _c = _a.timeMs, timeMs = _c === void 0 ? 250 : _c;
@@ -297,12 +537,12 @@ var getButtonStyles = function (_a) {
         cursor: cursor }, buttonParts);
 };
 
-var StyledIcon$1 = styled(Icon)(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
-var LeftIcon = styled(StyledIcon$1)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject([""], [""])));
-var RightIcon = styled(StyledIcon$1)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject([""], [""])));
+var StyledIcon = styled(Icon)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
+var LeftIcon = styled(StyledIcon)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject([""], [""])));
+var RightIcon = styled(StyledIcon)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject([""], [""])));
 var ButtonSpinner = styled(Spinner)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n"], ["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n"])));
 var Text$1 = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-block;\n  line-height: initial;\n"], ["\n  display: inline-block;\n  line-height: initial;\n"])));
-var Content = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  opacity: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  opacity: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+var Content$1 = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  opacity: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  opacity: ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
     var isLoading = _a.isLoading;
     return (isLoading ? 0 : 1);
 });
@@ -315,7 +555,7 @@ var WrapperStyle = css(templateObject_7 || (templateObject_7 = __makeTemplateObj
 }, function (_a) {
     var border = _a.border;
     return border;
-}, Content, function (_a) {
+}, Content$1, function (_a) {
     var height = _a.height;
     return height;
 }, LeftIcon, Text$1, function (_a) {
@@ -339,7 +579,7 @@ var WrapperStyle = css(templateObject_7 || (templateObject_7 = __makeTemplateObj
 });
 var HrefWrapper = styled.a.attrs(getButtonStyles)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", ";\n\n  text-decoration: none;\n"], ["\n  ", ";\n\n  text-decoration: none;\n"])), WrapperStyle);
 var OnClickWrapper = styled.div.attrs(getButtonStyles)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), WrapperStyle);
-var templateObject_1$6, templateObject_2$1, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+var templateObject_1$7, templateObject_2$1, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
 var Button = function (_a) {
     var className = _a.className, color = _a.color, _b = _a.fullWidth, fullWidth = _b === void 0 ? false : _b, href = _a.href, iconLeft = _a.iconLeft, iconRight = _a.iconRight, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, onClick = _a.onClick, size = _a.size, target = _a.target, text = _a.text, type = _a.type;
@@ -348,28 +588,166 @@ var Button = function (_a) {
     var showLoading = !isDisabled && isLoading;
     var Wrapper = href ? HrefWrapper : OnClickWrapper;
     return (React.createElement(Wrapper, { className: className, size: size, color: color, onClick: debounceClick, href: href, type: type, isDisabled: isDisabled, fullWidth: fullWidth, target: target },
-        React.createElement(Content, { isLoading: showLoading },
+        React.createElement(Content$1, { isLoading: showLoading },
             !isTextButton && iconLeft && React.createElement(LeftIcon, __assign({}, iconLeft)),
             text && React.createElement(Text$1, null, text),
             !isTextButton && iconRight && React.createElement(RightIcon, __assign({}, iconRight))),
         showLoading && React.createElement(ButtonSpinner, null)));
 };
 
-var getIconButtonColors = function (_a) {
-    var color = _a.color, isDisabled = _a.isDisabled, theme = _a.theme, type = _a.type;
-    var _b = theme.components.iconButton, defaultColor = _b.defaultColor, defaultType = _b.defaultType;
-    var actualColor = isDisabled ? 'disabled' : color || defaultColor;
-    var actualType = type || defaultType;
-    return theme.components.iconButton[actualType][actualColor];
+var buttonPalette = {
+    primary: {
+        blue: {
+            normal: defaultPalette.blue[500],
+            hover: defaultPalette.blue[700],
+            active: defaultPalette.blue[900],
+            text: defaultPalette.white[100],
+            textHover: defaultPalette.grey[100],
+        },
+        red: {
+            normal: defaultPalette.red[500],
+            hover: defaultPalette.red[700],
+            active: defaultPalette.red[900],
+            text: defaultPalette.white[100],
+            textHover: defaultPalette.grey[100],
+        },
+        green: {
+            normal: defaultPalette.green[500],
+            hover: defaultPalette.green[700],
+            active: defaultPalette.green[900],
+            text: defaultPalette.white[100],
+            textHover: defaultPalette.grey[100],
+        },
+        grey: {
+            normal: defaultPalette.white[100],
+            hover: defaultPalette.grey[100],
+            active: defaultPalette.grey[200],
+            text: defaultPalette.black[100],
+            textHover: defaultPalette.black[100],
+        },
+        yellow: {
+            normal: defaultPalette.yellow[500],
+            hover: defaultPalette.yellow[700],
+            active: defaultPalette.yellow[900],
+            text: defaultPalette.white[100],
+            textHover: defaultPalette.grey[100],
+        },
+        disabled: {
+            normal: defaultPalette.grey[50],
+            hover: defaultPalette.grey[50],
+            active: defaultPalette.grey[50],
+            text: defaultPalette.grey[200],
+            textHover: defaultPalette.grey[200],
+        },
+    },
+    secondary: {
+        blue: {
+            normal: defaultPalette.blue[50],
+            hover: defaultPalette.blue[100],
+            active: defaultPalette.blue[200],
+            text: defaultPalette.blue[900],
+            textHover: defaultPalette.blue[900],
+        },
+        red: {
+            normal: defaultPalette.red[50],
+            hover: defaultPalette.red[100],
+            active: defaultPalette.red[200],
+            text: defaultPalette.red[900],
+            textHover: defaultPalette.red[900],
+        },
+        green: {
+            normal: defaultPalette.green[50],
+            hover: defaultPalette.green[100],
+            active: defaultPalette.green[200],
+            text: defaultPalette.green[900],
+            textHover: defaultPalette.green[900],
+        },
+        yellow: {
+            normal: defaultPalette.yellow[50],
+            hover: defaultPalette.yellow[100],
+            active: defaultPalette.yellow[200],
+            text: defaultPalette.yellow[900],
+            textHover: defaultPalette.yellow[900],
+        },
+        grey: {
+            normal: defaultPalette.grey[50],
+            hover: defaultPalette.grey[100],
+            active: defaultPalette.grey[200],
+            text: defaultPalette.black[100],
+            textHover: defaultPalette.black[100],
+        },
+        disabled: {
+            normal: defaultPalette.grey[50],
+            hover: defaultPalette.grey[50],
+            active: defaultPalette.grey[50],
+            text: defaultPalette.grey[200],
+            textHover: defaultPalette.grey[200],
+        },
+    },
+    text: {
+        blue: {
+            normal: 'transparent',
+            hover: 'transparent',
+            active: 'transparent',
+            text: defaultPalette.blue[500],
+            textHover: defaultPalette.blue[500],
+        },
+        red: {
+            normal: 'transparent',
+            hover: 'transparent',
+            active: 'transparent',
+            text: defaultPalette.red[500],
+            textHover: defaultPalette.red[500],
+        },
+        green: {
+            normal: 'transparent',
+            hover: 'transparent',
+            active: 'transparent',
+            text: defaultPalette.green[500],
+            textHover: defaultPalette.green[500],
+        },
+        grey: {
+            normal: 'transparent',
+            hover: 'transparent',
+            active: 'transparent',
+            text: defaultPalette.grey[500],
+            textHover: defaultPalette.grey[500],
+        },
+        yellow: {
+            normal: 'transparent',
+            hover: 'transparent',
+            active: 'transparent',
+            text: defaultPalette.yellow[500],
+            textHover: defaultPalette.yellow[500],
+        },
+        disabled: {
+            normal: 'transparent',
+            hover: 'transparent',
+            active: 'transparent',
+            text: defaultPalette.grey[200],
+            textHover: defaultPalette.grey[200],
+        },
+    },
+    defaultType: 'primary',
+    defaultColor: 'blue',
+    defaultSize: 'medium',
+};
+
+var getIconButtonColors = function (_a) {
+    var color = _a.color, isDisabled = _a.isDisabled, theme = _a.theme, type = _a.type;
+    var _b = theme.components.iconButton, defaultColor = _b.defaultColor, defaultType = _b.defaultType;
+    var actualColor = isDisabled ? 'disabled' : color || defaultColor;
+    var actualType = type || defaultType;
+    return theme.components.iconButton[actualType][actualColor];
 };
 
 var IconButton = function (_a) {
     var className = _a.className, color = _a.color, icon = _a.icon, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, onClick = _a.onClick, type = _a.type;
     var handleClick = useDebounceClick({ onClick: onClick, manualLock: isDisabled });
-    return (React.createElement(Wrapper$1, { color: color, className: className, type: type, onClick: handleClick, isDisabled: isDisabled },
+    return (React.createElement(Wrapper$2, { color: color, className: className, type: type, onClick: handleClick, isDisabled: isDisabled },
         React.createElement(Icon, __assign({}, icon))));
 };
-var Wrapper$1 = styled.div.attrs(getIconButtonColors)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  display: inline-flex;\n  font-size: 20px;\n  text-decoration: none;\n  padding: 0 8px;\n  height: 32px;\n  align-items: center;\n\n  cursor: ", ";\n  color: ", ";\n\n  :hover {\n    color: ", ";\n    text-decoration: none;\n  }\n"], ["\n  display: inline-flex;\n  font-size: 20px;\n  text-decoration: none;\n  padding: 0 8px;\n  height: 32px;\n  align-items: center;\n\n  cursor: ", ";\n  color: ", ";\n\n  :hover {\n    color: ", ";\n    text-decoration: none;\n  }\n"])), function (_a) {
+var Wrapper$2 = styled.div.attrs(getIconButtonColors)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  display: inline-flex;\n  font-size: 20px;\n  text-decoration: none;\n  padding: 0 8px;\n  height: 32px;\n  align-items: center;\n\n  cursor: ", ";\n  color: ", ";\n\n  :hover {\n    color: ", ";\n    text-decoration: none;\n  }\n"], ["\n  display: inline-flex;\n  font-size: 20px;\n  text-decoration: none;\n  padding: 0 8px;\n  height: 32px;\n  align-items: center;\n\n  cursor: ", ";\n  color: ", ";\n\n  :hover {\n    color: ", ";\n    text-decoration: none;\n  }\n"])), function (_a) {
     var isDisabled = _a.isDisabled;
     return (isDisabled ? 'default' : 'pointer');
 }, function (_a) {
@@ -379,7 +757,56 @@ var Wrapper$1 = styled.div.attrs(getIconButtonColors)(templateObject_1$7 || (tem
     var hover = _a.hover;
     return hover;
 });
-var templateObject_1$7;
+var templateObject_1$8;
+
+var iconButtonPalette = {
+    primary: {
+        blue: {
+            normal: defaultPalette.blue[200],
+            hover: defaultPalette.blue[500],
+        },
+        red: {
+            normal: defaultPalette.red[200],
+            hover: defaultPalette.red[500],
+        },
+        green: {
+            normal: defaultPalette.green[200],
+            hover: defaultPalette.green[500],
+        },
+        yellow: {
+            normal: defaultPalette.yellow[200],
+            hover: defaultPalette.yellow[500],
+        },
+        disabled: {
+            normal: defaultPalette.grey[200],
+            hover: defaultPalette.grey[200],
+        },
+    },
+    secondary: {
+        blue: {
+            normal: defaultPalette.blue[200],
+            hover: defaultPalette.white[100],
+        },
+        red: {
+            normal: defaultPalette.red[200],
+            hover: defaultPalette.white[100],
+        },
+        green: {
+            normal: defaultPalette.green[200],
+            hover: defaultPalette.white[100],
+        },
+        yellow: {
+            normal: defaultPalette.yellow[200],
+            hover: defaultPalette.white[100],
+        },
+        disabled: {
+            normal: defaultPalette.grey[200],
+            hover: defaultPalette.grey[200],
+        },
+    },
+    defaultType: 'primary',
+    defaultColor: 'blue',
+};
 
 var getInputStyle = function (_a) {
     var theme = _a.theme, value = _a.value, isDisabled = _a.isDisabled, large = _a.large, hasError = _a.hasError;
@@ -417,7 +844,7 @@ var convertToStatus = function (value) {
     return typeof value === 'boolean' ? (value ? 'checked' : 'unchecked') : value;
 };
 
-var Input = styled.span.attrs(getInputStyle)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  border-radius: 4px;\n  font-size: 10px;\n  text-align: center;\n\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  cursor: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  opacity: ", ";\n"], ["\n  border-radius: 4px;\n  font-size: 10px;\n  text-align: center;\n\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  cursor: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  opacity: ", ";\n"])), function (_a) {
+var Input = styled.span.attrs(getInputStyle)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  border-radius: 4px;\n  font-size: 10px;\n  text-align: center;\n\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  cursor: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  opacity: ", ";\n"], ["\n  border-radius: 4px;\n  font-size: 10px;\n  text-align: center;\n\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  color: ", ";\n  border: ", ";\n  cursor: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  opacity: ", ";\n"])), function (_a) {
     var width = _a.width;
     return width;
 }, function (_a) {
@@ -439,9 +866,9 @@ var Input = styled.span.attrs(getInputStyle)(templateObject_1$8 || (templateObje
     var opacity = _a.opacity;
     return opacity;
 });
-var templateObject_1$8;
+var templateObject_1$9;
 
-var Label = styled.span.attrs(getLabelStyle)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  flex: 1;\n  text-align: left;\n  font-size: ", ";\n  cursor: ", ";\n  color: ", ";\n  opacity: ", ";\n"], ["\n  flex: 1;\n  text-align: left;\n  font-size: ", ";\n  cursor: ", ";\n  color: ", ";\n  opacity: ", ";\n"])), function (_a) {
+var Label = styled.span.attrs(getLabelStyle)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  flex: 1;\n  text-align: left;\n  font-size: ", ";\n  cursor: ", ";\n  color: ", ";\n  opacity: ", ";\n"], ["\n  flex: 1;\n  text-align: left;\n  font-size: ", ";\n  cursor: ", ";\n  color: ", ";\n  opacity: ", ";\n"])), function (_a) {
     var fontSize = _a.fontSize;
     return fontSize;
 }, function (_a) {
@@ -454,7 +881,7 @@ var Label = styled.span.attrs(getLabelStyle)(templateObject_1$9 || (templateObje
     var opacity = _a.opacity;
     return opacity;
 });
-var templateObject_1$9;
+var templateObject_1$a;
 
 var CheckboxImpl = function (_a) {
     var isDisabled = _a.isDisabled, className = _a.className, onClick = _a.onClick, large = _a.large, text = _a.text, value = _a.value, error = _a.error, onChange = _a.onChange;
@@ -485,13 +912,50 @@ var CheckboxImpl = function (_a) {
         React.createElement(HiddenInput, { ref: ref, type: 'checkbox', value: value, onClick: handleClick, onChange: onChange, disabled: isDisabled }),
         React.createElement(Label, { large: large, isDisabled: isDisabled, hasError: !!error }, text)));
 };
-var ClickableWrapper = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n"], ["\n  display: flex;\n  gap: 8px;\n"])));
+var ClickableWrapper = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n  display: flex;\n  gap: 8px;\n"], ["\n  display: flex;\n  gap: 8px;\n"])));
 var HiddenInput = styled.input(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
 var Checkbox = function (_a) {
     var value = _a.value, rest = __rest(_a, ["value"]);
     return (React.createElement(CheckboxImpl, __assign({}, rest, { value: convertToStatus(value) })));
 };
-var templateObject_1$a, templateObject_2$2;
+var templateObject_1$b, templateObject_2$2;
+
+var normalChecked = {
+    tickColor: defaultPalette.white[100],
+    backgroundColor: defaultPalette.blue[500],
+    borderColor: defaultPalette.blue[500],
+};
+var errorChecked = {
+    tickColor: defaultPalette.white[100],
+    backgroundColor: defaultPalette.red[500],
+    borderColor: defaultPalette.red[500],
+};
+var checkboxPalette = {
+    input: {
+        normal: {
+            checked: normalChecked,
+            indeterminate: normalChecked,
+            unchecked: {
+                tickColor: defaultPalette.white[100],
+                backgroundColor: 'transparent',
+                borderColor: defaultPalette.grey[500],
+            },
+        },
+        error: {
+            checked: errorChecked,
+            indeterminate: errorChecked,
+            unchecked: {
+                tickColor: defaultPalette.white[100],
+                backgroundColor: 'transparent',
+                borderColor: defaultPalette.red[500],
+            },
+        },
+    },
+    label: {
+        normal: defaultPalette.black[100],
+        error: defaultPalette.red[500],
+    },
+};
 
 var useCheckboxValue = function (initialValue) {
     if (initialValue === void 0) { initialValue = 'unchecked'; }
@@ -515,7 +979,7 @@ var StyledChipWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = _
     "\n\n  ",
     "\n"])), spacing.xs, function (_a) {
     var palette = _a.theme.palette;
-    return css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n  "], ["\n    background-color: ", ";\n    color: ", ";\n  "])), palette.grey[100], palette.black[100]);
+    return css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n  "], ["\n    background-color: ", ";\n    color: ", ";\n  "])), palette.grey[100], palette.black[100]);
 }, function (_a) {
     var statusEdit = _a.statusEdit, palette = _a.theme.palette;
     if (statusEdit) {
@@ -523,8 +987,8 @@ var StyledChipWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = _
     }
     return undefined;
 });
-var StyledIcon$2 = styled(Icon)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  cursor: pointer;\n  margin-left: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  cursor: pointer;\n  margin-left: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n"])), spacing.xs);
-var templateObject_1$b, templateObject_2$3, templateObject_3$2, templateObject_4$1;
+var StyledIcon$1 = styled(Icon)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  cursor: pointer;\n  margin-left: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  cursor: pointer;\n  margin-left: ", ";\n  &:hover {\n    cursor: pointer;\n  }\n"])), spacing.xs);
+var templateObject_1$c, templateObject_2$3, templateObject_3$2, templateObject_4$1;
 
 var UnstyledChip = /** @class */ (function (_super) {
     __extends(UnstyledChip, _super);
@@ -537,7 +1001,7 @@ var UnstyledChip = /** @class */ (function (_super) {
             text,
             ' ',
             statusEdit ? (React.createElement("div", null,
-                React.createElement(StyledIcon$2, { icon: faTimes, onClick: function () {
+                React.createElement(StyledIcon$1, { icon: faTimes, onClick: function () {
                         closeAction ? closeAction() : null;
                     } }))) : null));
     };
@@ -548,20 +1012,20 @@ var Chip = function (props) { return (React.createElement(StyledChipWrapper, __a
 
 var showHandler = function (show) {
     return show
-        ? css(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n        transform: translateX(0);\n      "], ["\n        transform: translateX(0);\n      "]))) : undefined;
+        ? css(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n        transform: translateX(0);\n      "], ["\n        transform: translateX(0);\n      "]))) : undefined;
 };
-var templateObject_1$c;
+var templateObject_1$d;
 
 var StyledDrawerWrapper = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
     "\n"])), function (_a) {
     var show = _a.show, palette = _a.theme.palette;
-    return css(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n    .drawer {\n      position: fixed;\n      right: 0;\n      top: 0;\n      height: 100vh;\n      width: 500px;\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 0 0 8px;\n      transform: translateX(110%);\n      transition: transform 0.4s ease-in-out;\n      z-index: 5;\n      background-color: ", ";\n      display: flex;\n      flex-direction: column;\n\n      ", "\n\n      .drawer__header {\n        padding-right: calc(", " + ", ");\n        padding-left: ", ";\n        display: flex;\n        align-items: center;\n        background-color: ", ";\n        border-bottom: 1px solid ", ";\n\n        .drawer__header__title {\n          font-weight: 500;\n          font-size: 20px;\n          line-height: 30px;\n          display: flex;\n          align-items: center;\n          height: calc(", " + ", ");\n        }\n\n        .drawer__header__actions {\n          position: absolute;\n          right: ", ";\n          top: ", ";\n          font-size: 24px;\n        }\n      }\n\n      .drawer__body {\n        height: 100%;\n        overflow-y: scroll;\n      }\n\n      .drawer__footer {\n        height: 80px;\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n        padding: 0 ", ";\n        border-top: 1px solid ", ";\n      }\n    }\n  "], ["\n    .drawer {\n      position: fixed;\n      right: 0;\n      top: 0;\n      height: 100vh;\n      width: 500px;\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 0 0 8px;\n      transform: translateX(110%);\n      transition: transform 0.4s ease-in-out;\n      z-index: 5;\n      background-color: ", ";\n      display: flex;\n      flex-direction: column;\n\n      ", "\n\n      .drawer__header {\n        padding-right: calc(", " + ", ");\n        padding-left: ", ";\n        display: flex;\n        align-items: center;\n        background-color: ", ";\n        border-bottom: 1px solid ", ";\n\n        .drawer__header__title {\n          font-weight: 500;\n          font-size: 20px;\n          line-height: 30px;\n          display: flex;\n          align-items: center;\n          height: calc(", " + ", ");\n        }\n\n        .drawer__header__actions {\n          position: absolute;\n          right: ", ";\n          top: ", ";\n          font-size: 24px;\n        }\n      }\n\n      .drawer__body {\n        height: 100%;\n        overflow-y: scroll;\n      }\n\n      .drawer__footer {\n        height: 80px;\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n        padding: 0 ", ";\n        border-top: 1px solid ", ";\n      }\n    }\n  "])), palette.white[100], showHandler(show), spacing.xxxl, spacing.m, spacing.l, palette.grey[50], palette.grey[100], spacing.xxxl, spacing.m, spacing.l, spacing.l, spacing.l, palette.grey[100]);
+    return css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n    .drawer {\n      position: fixed;\n      right: 0;\n      top: 0;\n      height: 100vh;\n      width: 500px;\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 0 0 8px;\n      transform: translateX(110%);\n      transition: transform 0.4s ease-in-out;\n      z-index: 5;\n      background-color: ", ";\n      display: flex;\n      flex-direction: column;\n\n      ", "\n\n      .drawer__header {\n        padding-right: calc(", " + ", ");\n        padding-left: ", ";\n        display: flex;\n        align-items: center;\n        background-color: ", ";\n        border-bottom: 1px solid ", ";\n\n        .drawer__header__title {\n          font-weight: 500;\n          font-size: 20px;\n          line-height: 30px;\n          display: flex;\n          align-items: center;\n          height: calc(", " + ", ");\n        }\n\n        .drawer__header__actions {\n          position: absolute;\n          right: ", ";\n          top: ", ";\n          font-size: 24px;\n        }\n      }\n\n      .drawer__body {\n        height: 100%;\n        overflow-y: scroll;\n      }\n\n      .drawer__footer {\n        height: 80px;\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n        padding: 0 ", ";\n        border-top: 1px solid ", ";\n      }\n    }\n  "], ["\n    .drawer {\n      position: fixed;\n      right: 0;\n      top: 0;\n      height: 100vh;\n      width: 500px;\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 0 0 8px;\n      transform: translateX(110%);\n      transition: transform 0.4s ease-in-out;\n      z-index: 5;\n      background-color: ", ";\n      display: flex;\n      flex-direction: column;\n\n      ", "\n\n      .drawer__header {\n        padding-right: calc(", " + ", ");\n        padding-left: ", ";\n        display: flex;\n        align-items: center;\n        background-color: ", ";\n        border-bottom: 1px solid ", ";\n\n        .drawer__header__title {\n          font-weight: 500;\n          font-size: 20px;\n          line-height: 30px;\n          display: flex;\n          align-items: center;\n          height: calc(", " + ", ");\n        }\n\n        .drawer__header__actions {\n          position: absolute;\n          right: ", ";\n          top: ", ";\n          font-size: 24px;\n        }\n      }\n\n      .drawer__body {\n        height: 100%;\n        overflow-y: scroll;\n      }\n\n      .drawer__footer {\n        height: 80px;\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n        padding: 0 ", ";\n        border-top: 1px solid ", ";\n      }\n    }\n  "])), palette.white[100], showHandler(show), spacing.xxxl, spacing.m, spacing.l, palette.grey[50], palette.grey[100], spacing.xxxl, spacing.m, spacing.l, spacing.l, spacing.l, palette.grey[100]);
 });
-var StyledIcon$3 = styled(Icon)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n    cursor: pointer;\n    &:hover {\n    color: ", ";\n"], ["\n    cursor: pointer;\n    &:hover {\n    color: ", ";\n"])), function (_a) {
+var StyledIcon$2 = styled(Icon)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n    cursor: pointer;\n    &:hover {\n    color: ", ";\n"], ["\n    cursor: pointer;\n    &:hover {\n    color: ", ";\n"])), function (_a) {
     var palette = _a.theme.palette;
     return palette.grey[800];
 });
-var templateObject_1$d, templateObject_2$4, templateObject_3$3;
+var templateObject_1$e, templateObject_2$4, templateObject_3$3;
 
 var UnstyledDrawer = /** @class */ (function (_super) {
     __extends(UnstyledDrawer, _super);
@@ -577,7 +1041,7 @@ var UnstyledDrawer = /** @class */ (function (_super) {
                 renderHeader ? renderHeader() : React.createElement("div", { className: 'drawer__header__title' }, title),
                 React.createElement("div", { className: 'drawer__header__actions' },
                     React.createElement("span", { onClick: actionClose },
-                        React.createElement(StyledIcon$3, { icon: faTimes })))),
+                        React.createElement(StyledIcon$2, { icon: faTimes })))),
             React.createElement("div", { className: 'drawer__body' }, this.props.children),
             renderFooter ? React.createElement("div", { className: 'drawer__footer' }, renderFooter()) : null));
     };
@@ -602,11 +1066,11 @@ var getDropdownItemStyles = function (_a) {
     };
 };
 
-var ShortcutText = styled.span(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  background-color: transparent;\n  color: ", ";\n  padding: 0 2px 0 2px;\n  white-space: nowrap;\n  font-size: 12px;\n"], ["\n  background-color: transparent;\n  color: ", ";\n  padding: 0 2px 0 2px;\n  white-space: nowrap;\n  font-size: 12px;\n"])), function (_a) {
+var ShortcutText = styled.span(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  background-color: transparent;\n  color: ", ";\n  padding: 0 2px 0 2px;\n  white-space: nowrap;\n  font-size: 12px;\n"], ["\n  background-color: transparent;\n  color: ", ";\n  padding: 0 2px 0 2px;\n  white-space: nowrap;\n  font-size: 12px;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[500];
 });
-var templateObject_1$e;
+var templateObject_1$f;
 
 var Item = function (_a) {
     var active = _a.active, className = _a.className, icon = _a.icon, onClick = _a.onClick, shortcut = _a.shortcut, text = _a.text, isDisabled = _a.isDisabled, rest = __rest(_a, ["active", "className", "icon", "onClick", "shortcut", "text", "isDisabled"]);
@@ -617,7 +1081,7 @@ var Item = function (_a) {
             React.createElement(TextWrapper, null, text),
             shortcut && React.createElement(ShortcutText, null, shortcut))));
 };
-var hasActionCss = css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
+var hasActionCss = css(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[100];
 });
@@ -639,21 +1103,21 @@ var StyledItem = styled.div.attrs(getDropdownItemStyles)(templateObject_2$5 || (
 });
 var InnerWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  & > * {\n    display: inline;\n  }\n\n  & > svg {\n    margin-right: 10px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  & > * {\n    display: inline;\n  }\n\n  & > svg {\n    margin-right: 10px;\n  }\n"])));
 var TextWrapper = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1 1 auto;\n"], ["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1 1 auto;\n"])));
-var templateObject_1$f, templateObject_2$5, templateObject_3$4, templateObject_4$2;
+var templateObject_1$g, templateObject_2$5, templateObject_3$4, templateObject_4$2;
 
-var StyledDiv = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n  margin: 8px 0 8px 0;\n  display: block;\n  height: 1px;\n  border: 0;\n  border-top: 1px solid ", ";\n  padding: 0;\n  cursor: initial;\n"], ["\n  margin: 8px 0 8px 0;\n  display: block;\n  height: 1px;\n  border: 0;\n  border-top: 1px solid ", ";\n  padding: 0;\n  cursor: initial;\n"])), function (_a) {
+var StyledDiv = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  margin: 8px 0 8px 0;\n  display: block;\n  height: 1px;\n  border: 0;\n  border-top: 1px solid ", ";\n  padding: 0;\n  cursor: initial;\n"], ["\n  margin: 8px 0 8px 0;\n  display: block;\n  height: 1px;\n  border: 0;\n  border-top: 1px solid ", ";\n  padding: 0;\n  cursor: initial;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[100];
 });
 var Separator = function () { return React.createElement(StyledDiv, null); };
-var templateObject_1$g;
+var templateObject_1$h;
 
 var Title = function (props) { return React.createElement(StyledTitle, null, props.text); };
-var StyledTitle = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  cursor: initial;\n  text-align: left;\n  padding: 4px 16px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  text-transform: uppercase;\n  color: ", ";\n"], ["\n  cursor: initial;\n  text-align: left;\n  padding: 4px 16px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  text-transform: uppercase;\n  color: ", ";\n"])), function (_a) {
+var StyledTitle = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  cursor: initial;\n  text-align: left;\n  padding: 4px 16px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  text-transform: uppercase;\n  color: ", ";\n"], ["\n  cursor: initial;\n  text-align: left;\n  padding: 4px 16px;\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 18px;\n  text-transform: uppercase;\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[700];
 });
-var templateObject_1$h;
+var templateObject_1$i;
 
 var UserListItem = function (props) {
     var avatarSize = props.avatarSize, img = props.img, noText = props.noText, onClick = props.onClick, placeholder = props.placeholder, renderText = props.renderText, text = props.text;
@@ -673,13 +1137,13 @@ var UserListItem = function (props) {
 var UserListWrapper = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n  ", ";\n\n  display: flex;\n  padding: 4px 16px;\n  align-items: center;\n"], ["\n  ",
     ";\n\n  display: flex;\n  padding: 4px 16px;\n  align-items: center;\n"])), function (_a) {
     var clickable = _a.clickable;
-    return clickable && css(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n      &:hover {\n        background-color: ", ";\n        cursor: pointer;\n      }\n    "], ["\n      &:hover {\n        background-color: ", ";\n        cursor: pointer;\n      }\n    "])), function (_a) {
+    return clickable && css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n      &:hover {\n        background-color: ", ";\n        cursor: pointer;\n      }\n    "], ["\n      &:hover {\n        background-color: ", ";\n        cursor: pointer;\n      }\n    "])), function (_a) {
         var theme = _a.theme;
         return theme.palette.grey[100];
     });
 });
 var NameWrapper = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  width: 50px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  vertical-align: middle;\n  flex-grow: 1;\n  padding-left: 10px;\n"], ["\n  width: 50px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  vertical-align: middle;\n  flex-grow: 1;\n  padding-left: 10px;\n"])));
-var templateObject_1$i, templateObject_2$6, templateObject_3$5;
+var templateObject_1$j, templateObject_2$6, templateObject_3$5;
 
 var DefaultDropdown = function (_a) {
     var closeDropdown = _a.closeDropdown, content = _a.content, fullWidth = _a.fullWidth, maxWidth = _a.maxWidth;
@@ -702,20 +1166,22 @@ var DefaultTrigger = function (_a) {
 };
 
 var DropdownImpl = function (props) {
-    var alignRight = props.alignRight, className = props.className, content = props.content, fullWidth = props.fullWidth, maxWidth = props.maxWidth, _a = props.minWidthAsTrigger, minWidthAsTrigger = _a === void 0 ? false : _a, placement = props.placement, renderContent = props.renderContent, renderTrigger = props.renderTrigger, triggerStyles = props.triggerStyles, title = props.title, _b = props.keepOpen, keepOpen = _b === void 0 ? true : _b;
+    var alignRight = props.alignRight, className = props.className, content = props.content, fullWidth = props.fullWidth, maxWidth = props.maxWidth, _a = props.minWidthAsTrigger, minWidthAsTrigger = _a === void 0 ? false : _a, placement = props.placement, renderContent = props.renderContent, renderTrigger = props.renderTrigger, triggerStyles = props.triggerStyles, title = props.title, _b = props.forceOpen, forceOpen = _b === void 0 ? false : _b;
     var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
     var toggleDropdown = useCallback(function (e) {
         setIsOpen(function (isOpen) { return !isOpen; });
         e.stopPropagation();
     }, []);
     var closeDropdown = useCallback(function () { return setIsOpen(false); }, []);
+    useEffect(function () {
+        setIsOpen(forceOpen);
+    }, [forceOpen]);
     // Close Dropdown on click outside
     var wrapperRef = useRef(null);
     useClickAway(wrapperRef, function () { return closeDropdown(); });
     var popperRef = useRef(null);
     var buttonRef = useRef(null);
     var _d = useState(null), arrowRef = _d[0], setArrowRef = _d[1];
-    var onMouseLeave = useCallback(function () { return !keepOpen && closeDropdown(); }, [closeDropdown, keepOpen]);
     // alignRight left for compatibility
     var popperPlacement = placement ? placement : alignRight ? 'bottom-end' : 'bottom-start';
     var _e = usePopper(buttonRef.current, popperRef.current, {
@@ -752,18 +1218,18 @@ var DropdownImpl = function (props) {
             },
         ]; }, [minWidthAsTrigger, arrowRef]),
     }), attributes = _e.attributes, styles = _e.styles;
-    return (React.createElement(Wrapper$2, { className: className, ref: wrapperRef, onMouseLeave: onMouseLeave },
+    return (React.createElement(Wrapper$3, { className: className, ref: wrapperRef },
         React.createElement("div", { style: triggerStyles, ref: buttonRef, onClick: toggleDropdown },
             title && React.createElement(DefaultTrigger, { title: title }),
             !title && renderTrigger && renderTrigger()),
-        React.createElement(CSSTransition, { in: isOpen, timeout: 200, unmountOnExit: true, appear: true },
+        React.createElement(CSSTransition, { in: forceOpen || isOpen, timeout: 200, unmountOnExit: true, appear: true },
             React.createElement(BodyAnimationWrapper, null,
                 React.createElement(PopperContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
                     React.createElement("div", { ref: setArrowRef, style: styles.arrow }),
                     React.createElement("div", { style: styles.offset }, content ? (React.createElement(DefaultWrapper, { fullWidth: fullWidth, maxWidth: maxWidth },
                         React.createElement(DefaultDropdown, { content: content, fullWidth: fullWidth, maxWidth: maxWidth, closeDropdown: closeDropdown }))) : (React.createElement(CustomWrapper, { maxWidth: maxWidth }, renderContent === null || renderContent === void 0 ? void 0 : renderContent(closeDropdown)))))))));
 };
-var Wrapper$2 = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var Wrapper$3 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var DefaultWrapper = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ",
     ";\n"])), function (_a) {
     var fullWidth = _a.fullWidth, maxWidth = _a.maxWidth;
@@ -783,7 +1249,7 @@ var PopperContainer = styled.div(templateObject_7$1 || (templateObject_7$1 = __m
     return theme.palette.white[100];
 });
 var BodyAnimationWrapper = styled.div(templateObject_8$1 || (templateObject_8$1 = __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$7, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1;
+var templateObject_1$k, templateObject_2$7, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1;
 
 var Dropdown = /** @class */ (function (_super) {
     __extends(Dropdown, _super);
@@ -800,25 +1266,62 @@ var Dropdown = /** @class */ (function (_super) {
     return Dropdown;
 }(Component));
 
-var sizeSetter = function (size) {
-    switch (size) {
-        case 'small':
-            return css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n        height: 16px;\n        min-width: 16px;\n        top: 3px;\n        right: 3px;\n      "], ["\n        height: 16px;\n        min-width: 16px;\n        top: 3px;\n        right: 3px;\n      "])));
-        case 'large':
-            return css(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n        height: 23px;\n        min-width: 23px;\n        top: -1px;\n        right: -1px;\n      "], ["\n        height: 23px;\n        min-width: 23px;\n        top: -1px;\n        right: -1px;\n      "])));
-        case 'medium':
-        default:
-            return css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n        height: 20px;\n        min-width: 20px;\n        top: 1px;\n        right: 1px;\n      "], ["\n        height: 20px;\n        min-width: 20px;\n        top: 1px;\n        right: 1px;\n      "])));
-    }
-};
-var fontSetter = function (size) {
-    switch (size) {
-        case 'small':
-            return css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n        font-size: 12px;\n        line-height: 15px;\n      "], ["\n        font-size: 12px;\n        line-height: 15px;\n      "])));
-        case 'large':
-            return css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n        font-size: 14px;\n        line-height: 20px;\n      "], ["\n        font-size: 14px;\n        line-height: 20px;\n      "])));
-        case 'medium':
-        default:
+var dropdownPalette = {
+    items: {
+        active: {
+            color: defaultPalette.black[100],
+            background: defaultPalette.blue[50],
+            hoverBackground: defaultPalette.grey[100],
+        },
+        notActive: {
+            default: {
+                color: defaultPalette.black[100],
+                background: 'transparent',
+                hoverBackground: defaultPalette.grey[100],
+            },
+            danger: {
+                color: defaultPalette.red[500],
+                background: 'transparent',
+                hoverBackground: defaultPalette.red[50],
+            },
+            success: {
+                color: defaultPalette.green[500],
+                background: 'transparent',
+                hoverBackground: defaultPalette.green[50],
+            },
+            warning: {
+                color: defaultPalette.yellow[500],
+                background: 'transparent',
+                hoverBackground: defaultPalette.yellow[50],
+            },
+            link: {
+                color: defaultPalette.blue[500],
+                background: 'transparent',
+                hoverBackground: defaultPalette.blue[50],
+            },
+        },
+    },
+};
+
+var sizeSetter = function (size) {
+    switch (size) {
+        case 'small':
+            return css(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n        height: 16px;\n        min-width: 16px;\n        top: 3px;\n        right: 3px;\n      "], ["\n        height: 16px;\n        min-width: 16px;\n        top: 3px;\n        right: 3px;\n      "])));
+        case 'large':
+            return css(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n        height: 23px;\n        min-width: 23px;\n        top: -1px;\n        right: -1px;\n      "], ["\n        height: 23px;\n        min-width: 23px;\n        top: -1px;\n        right: -1px;\n      "])));
+        case 'medium':
+        default:
+            return css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n        height: 20px;\n        min-width: 20px;\n        top: 1px;\n        right: 1px;\n      "], ["\n        height: 20px;\n        min-width: 20px;\n        top: 1px;\n        right: 1px;\n      "])));
+    }
+};
+var fontSetter = function (size) {
+    switch (size) {
+        case 'small':
+            return css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n        font-size: 12px;\n        line-height: 15px;\n      "], ["\n        font-size: 12px;\n        line-height: 15px;\n      "])));
+        case 'large':
+            return css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n        font-size: 14px;\n        line-height: 20px;\n      "], ["\n        font-size: 14px;\n        line-height: 20px;\n      "])));
+        case 'medium':
+        default:
             return css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n        font-size: 12px;\n        line-height: 18px;\n      "], ["\n        font-size: 12px;\n        line-height: 18px;\n      "])));
     }
 };
@@ -838,7 +1341,7 @@ var FloatingBadge = styled.span(templateObject_7$2 || (templateObject_7$2 = __ma
     var size = _a.size;
     return fontSetter(size);
 });
-var templateObject_1$k, templateObject_2$8, templateObject_3$7, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7$2;
+var templateObject_1$l, templateObject_2$8, templateObject_3$7, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7$2;
 
 var WithBadge = function (props) {
     var children = props.children, rest = __rest(props, ["children"]);
@@ -846,8 +1349,8 @@ var WithBadge = function (props) {
         children,
         !rest.isDisabled && React.createElement(FloatingBadge, __assign({}, rest))));
 };
-var WithBadgeWrapper = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n"], ["\n  display: inline-block;\n  position: relative;\n"])));
-var templateObject_1$l;
+var WithBadgeWrapper = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n"], ["\n  display: inline-block;\n  position: relative;\n"])));
+var templateObject_1$m;
 
 var ItemElement = function (props) {
     var action = props.action, active = props.active, icon = props.icon, index = props.index, mouseBlockedProps = props.mouseBlockedProps, navigable = props.navigable, onClick = props.onClick, onMouseHover = props.onMouseHover, onMouseOut = props.onMouseOut, placeholder = props.placeholder, showActionOnHover = props.showActionOnHover, title = props.title, wrapperRef = props.wrapperRef;
@@ -927,7 +1430,7 @@ var ItemElement = function (props) {
         title ? React.createElement(Title$1, null, title) : React.createElement(Placeholder, null, placeholder),
         action && React.createElement(RightElement, null, action)));
 };
-var Title$1 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  flex-grow: 1;\n"], ["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  flex-grow: 1;\n"])));
+var Title$1 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  flex-grow: 1;\n"], ["\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  flex-grow: 1;\n"])));
 var Placeholder = styled(Title$1)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[500];
@@ -955,7 +1458,7 @@ var SingleElement = styled.div(templateObject_7$3 || (templateObject_7$3 = __mak
     return showActionOnHover
         ? css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n          ", " {\n            display: none;\n          }\n\n          &:focus {\n            ", " {\n              display: inherit;\n            }\n          }\n        "], ["\n          ", " {\n            display: none;\n          }\n\n          &:focus {\n            ", " {\n              display: inherit;\n            }\n          }\n        "])), RightElement, RightElement) : css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject([""], [""])));
 });
-var templateObject_1$m, templateObject_2$9, templateObject_3$8, templateObject_4$5, templateObject_5$3, templateObject_6$3, templateObject_7$3;
+var templateObject_1$n, templateObject_2$9, templateObject_3$8, templateObject_4$5, templateObject_5$3, templateObject_6$3, templateObject_7$3;
 
 var TitleElement = function (props) {
     var noResults = props.noResults, title = props.title;
@@ -967,7 +1470,7 @@ var TitleElementWrapper = styled.div(templateObject_2$a || (templateObject_2$a =
     ";\n  height: 32px;\n  padding-left: 8px;\n  line-height: 32px;\n  font-size: 11px;\n\n  color: ", ";\n  font-weight: 500;\n  cursor: initial;\n"])), function (_a) {
     var noResults = _a.noResults, theme = _a.theme;
     return noResults === true
-        ? css(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n          background-color: ", ";\n        "], ["\n          background-color: ", ";\n        "])), theme.palette.grey[50]) : undefined;
+        ? css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n          background-color: ", ";\n        "], ["\n          background-color: ", ";\n        "])), theme.palette.grey[50]) : undefined;
 }, function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[700];
@@ -976,7 +1479,7 @@ var NoResultsWrapper = styled.span(templateObject_3$9 || (templateObject_3$9 = _
     var theme = _a.theme;
     return theme.palette.grey[700];
 });
-var templateObject_1$n, templateObject_2$a, templateObject_3$9;
+var templateObject_1$o, templateObject_2$a, templateObject_3$9;
 
 var GroupElement = function (_a) {
     var index = _a.index, items = _a.items, title = _a.title, rest = __rest(_a, ["index", "items", "title"]);
@@ -1026,28 +1529,28 @@ var GroupedList = function (props) {
     }); }, [mouseBlocked, setMouseBlocked]);
     var wrapperRef = useRef(null);
     var i = 1;
-    return (React.createElement(Wrapper$3, { style: wrapperStyle, ref: wrapperRef, className: className }, groups.map(function (group, index) {
+    return (React.createElement(Wrapper$4, { style: wrapperStyle, ref: wrapperRef, className: className }, groups.map(function (group, index) {
         var oldI = i;
         i += group.items.length;
         return (React.createElement(GroupElement, __assign({ key: index }, group, { mouseBlockedProps: mouseBlockedProps, navigable: navigable, index: oldI, wrapperRef: wrapperRef, placeholder: placeholder })));
     })));
 };
-var Wrapper$3 = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var templateObject_1$o;
+var Wrapper$4 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+var templateObject_1$p;
 
 var Label$1 = styled.span(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n  display: inline-block;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px;\n  text-align: left;\n  margin-left: 8px;\n  vertical-align: top;\n  cursor: pointer;\n  ", "\n"], ["\n  display: inline-block;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 16px;\n  text-align: left;\n  margin-left: 8px;\n  vertical-align: top;\n  cursor: pointer;\n  ",
     "\n"])), function (_a) {
     var isDisabled = _a.isDisabled, palette = _a.theme.palette;
-    return isDisabled && css(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n      color: ", ";\n      cursor: not-allowed;\n    "], ["\n      color: ", ";\n      cursor: not-allowed;\n    "])), palette.grey[500]);
+    return isDisabled && css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n      color: ", ";\n      cursor: not-allowed;\n    "], ["\n      color: ", ";\n      cursor: not-allowed;\n    "])), palette.grey[500]);
 });
-var templateObject_1$p, templateObject_2$b;
+var templateObject_1$q, templateObject_2$b;
 
 var Radio = styled.span(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n  display: inline-block;\n  border-radius: 8px;\n  width: 16px;\n  height: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  ", "\n  ", "\n  ", "\n"], ["\n  display: inline-block;\n  border-radius: 8px;\n  width: 16px;\n  height: 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  ",
     "\n  ",
     "\n  ",
     "\n"])), function (_a) {
     var theme = _a.theme;
-    return css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "], ["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), theme.palette.white[100], theme.palette.grey[500]);
+    return css(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "], ["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), theme.palette.white[100], theme.palette.grey[500]);
 }, function (_a) {
     var isChecked = _a.isChecked, theme = _a.theme;
     return isChecked && css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n      border: 5px solid ", ";\n    "], ["\n      border: 5px solid ", ";\n    "])), theme.palette.blue[500]);
@@ -1056,7 +1559,7 @@ var Radio = styled.span(templateObject_5$4 || (templateObject_5$4 = __makeTempla
     return isDisabled && css(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n      background-color: ", ";\n      border-color: ", ";\n      cursor: not-allowed;\n      ", "\n    "], ["\n      background-color: ", ";\n      border-color: ", ";\n      cursor: not-allowed;\n      ",
         "\n    "])), theme.palette.grey[100], theme.palette.grey[100], isChecked && css(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n        background-color: ", ";\n        border-color: ", ";\n      "], ["\n        background-color: ", ";\n        border-color: ", ";\n      "])), theme.palette.white[100], theme.palette.grey['50']));
 });
-var templateObject_1$q, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$4;
+var templateObject_1$r, templateObject_2$c, templateObject_3$a, templateObject_4$6, templateObject_5$4;
 
 var WrapperRadioButton = function (props) {
     var isChecked = props.isChecked, isDisabled = props.isDisabled, label = props.label;
@@ -1064,14 +1567,14 @@ var WrapperRadioButton = function (props) {
         React.createElement(Radio, { isChecked: props.isChecked, isDisabled: props.isDisabled }),
         React.createElement(Label$1, { isDisabled: props.isDisabled }, props.label)))));
 };
-var Wrapper$4 = styled(WrapperRadioButton)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  & + & {\n    margin-top: ", "px;\n  }\n  ", "\n"], ["\n  & + & {\n    margin-top: ", "px;\n  }\n  ",
+var Wrapper$5 = styled(WrapperRadioButton)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  & + & {\n    margin-top: ", "px;\n  }\n  ", "\n"], ["\n  & + & {\n    margin-top: ", "px;\n  }\n  ",
     "\n"])), function (props) { return (props.optionsSpacing ? props.optionsSpacing : 0); }, function (props) {
-    return props.inline && css(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n      display: inline-block;\n      vertical-align: top;\n      &:not(:first-child) {\n        margin-left: 25px;\n      }\n    "], ["\n      display: inline-block;\n      vertical-align: top;\n      &:not(:first-child) {\n        margin-left: 25px;\n      }\n    "])));
+    return props.inline && css(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n      display: inline-block;\n      vertical-align: top;\n      &:not(:first-child) {\n        margin-left: 25px;\n      }\n    "], ["\n      display: inline-block;\n      vertical-align: top;\n      &:not(:first-child) {\n        margin-left: 25px;\n      }\n    "])));
 });
 var RadioButton = function (props) {
-    return React.createElement(Wrapper$4, __assign({}, props));
+    return React.createElement(Wrapper$5, __assign({}, props));
 };
-var templateObject_1$r, templateObject_2$d;
+var templateObject_1$s, templateObject_2$d;
 
 var RadioButtonGroup = function (props) { return (React.createElement("div", { style: props.style }, props.options.map(function (o) { return (React.createElement(RadioButton, { key: o.key, label: o.label, onClick: function () {
         if (props.onClick) {
@@ -1079,342 +1582,130 @@ var RadioButtonGroup = function (props) { return (React.createElement("div", { s
         }
     }, isChecked: props.value === o.key, isDisabled: props.isDisabled, renderOption: props.renderOption, optionsSpacing: props.optionsSpacing, inline: props.inline })); }))); };
 
-var iconSizeMap = {
-    xs: '.75em',
-    sm: '.875em',
-    lg: '1.33em',
-    '1x': '1em',
-    '2x': '2em',
-    '3x': '3em',
-    '4x': '4em',
-    '5x': '5em',
-    '6x': '6em',
-    '7x': '7em',
-    '8x': '8em',
-    '9x': '9em',
-    '10x': '10em',
-};
-
-var IconBackground = function (_a) {
-    var children = _a.children, rest = __rest(_a, ["children"]);
-    return React.createElement(Wrapper$5, __assign({}, rest), children);
+var colorSetter = function (type, theme) {
+    switch (type) {
+        case 'standard': {
+            return css(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.grey[100], theme.palette.black[100]);
+        }
+        case 'info': {
+            return css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.blue[50], theme.palette.blue[500]);
+        }
+        case 'error': {
+            return css(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.red[50], theme.palette.red[500]);
+        }
+        case 'warning': {
+            return css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.yellow[50], theme.palette.yellow[500]);
+        }
+        case 'success': {
+            return css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.green[50], theme.palette.green[500]);
+        }
+        default: {
+            return css(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.grey[100], theme.palette.black[100]);
+        }
+    }
 };
-var circleBackgroundScaleFactor = 1.5;
-var Wrapper$5 = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n\n  min-width: calc(", " * ", ");\n  min-height: calc(", " * ", ");\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  background-color: ",
-    ";\n  border-radius: 50%;\n\n  min-width: calc(", " * ", ");\n  min-height: calc(", " * ", ");\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
-    var theme = _a.theme, color = _a.color, backgroundColor = _a.backgroundColor;
-    return backgroundColor || theme.components.iconBackground[color] || 'transparent';
-}, circleBackgroundScaleFactor, function (_a) {
-    var size = _a.size;
-    return iconSizeMap[size];
-}, circleBackgroundScaleFactor, function (_a) {
-    var size = _a.size;
-    return iconSizeMap[size];
+var StyledIconTitle = styled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  margin-top: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n  margin-bottom: ", ";\n"], ["\n  margin-top: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n  margin-bottom: ", ";\n"])), spacing.xxs);
+var StyledContent = styled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 18px;\n"], ["\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 18px;\n"])));
+var spacingSetter = function (size) {
+    switch (size) {
+        case 'medium':
+            return css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n        padding: ", ";\n      "], ["\n        padding: ", ";\n      "])), spacing.s);
+        case 'large':
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        padding: ", ";\n        ", " {\n          font-size: 16px;\n          line-height: 18px;\n          margin-bottom: ", ";\n        }\n        ", " {\n          font-size: 14px;\n          line-height: 21px;\n        }\n      "], ["\n        padding: ", ";\n        ", " {\n          font-size: 16px;\n          line-height: 18px;\n          margin-bottom: ", ";\n        }\n        ", " {\n          font-size: 14px;\n          line-height: 21px;\n        }\n      "])), spacing.m, StyledIconTitle, spacing.xs, StyledContent);
+        default:
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        padding: ", ";\n      "], ["\n        padding: ", ";\n      "])), spacing.m);
+    }
+};
+var StyledInlineMessageWrapper = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
+    "\n"])), function (_a) {
+    var size = _a.size, theme = _a.theme, type = _a.type;
+    return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    border: 1px solid rgba(51, 51, 51, 0.08);\n    border-radius: 4px;\n    color: ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    display: flex;\n    border: 1px solid rgba(51, 51, 51, 0.08);\n    border-radius: 4px;\n    color: ", ";\n\n    ", "\n\n    ", "\n  "])), theme.palette.black[100], colorSetter(type, theme), spacingSetter(size));
+});
+var StyledIconContent = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  margin-left: ", ";\n  width: 100%;\n"], ["\n  margin-left: ", ";\n  width: 100%;\n"])), function (_a) {
+    var margin = _a.margin;
+    return (margin ? spacing.s : '0px');
+});
+var StyledCloseIconWrapper = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  line-height: 20px;\n"], ["\n  line-height: 20px;\n"])));
+var StyledCloseIcon = styled(Icon)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  cursor: pointer;\n  color: ", ";\n"], ["\n  cursor: pointer;\n  color: ", ";\n"])), function (_a) {
+    var palette = _a.theme.palette;
+    return palette.blue[700];
 });
-var templateObject_1$s;
+var templateObject_1$t, templateObject_2$e, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$2, templateObject_9$1, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
 
-var black = {
-    8: 'rgba(51, 51, 51, 0.08)',
-    16: 'rgba(51, 51, 51, 0.16)',
-    48: 'rgba(51, 51, 51, 0.48)',
-    80: 'rgba(51, 51, 51, 0.8)',
-    100: '#333333',
+var defaultCloseIcon = {
+    icon: faTimes,
+};
+var UnstyledInlineMessage = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var closeIcon = props.closeIcon, content = props.content, icon = props.icon, onClose = props.onClose, renderCloseIcon = props.renderCloseIcon, renderContent = props.renderContent, renderIcon = props.renderIcon, renderTitle = props.renderTitle, title = props.title;
+    var titleComp = renderTitle ? renderTitle() : title;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: (_b = (_a = props === null || props === void 0 ? void 0 : props.componentStyle) === null || _a === void 0 ? void 0 : _a.icon) !== null && _b !== void 0 ? _b : {} }, renderIcon ? renderIcon() : icon ? React.createElement(Icon, __assign({}, icon)) : null),
+        React.createElement(StyledIconContent, { style: (_d = (_c = props === null || props === void 0 ? void 0 : props.componentStyle) === null || _c === void 0 ? void 0 : _c.contentWrapper) !== null && _d !== void 0 ? _d : {}, margin: renderIcon !== undefined || icon !== undefined },
+            titleComp ? React.createElement(StyledIconTitle, { style: (_f = (_e = props === null || props === void 0 ? void 0 : props.componentStyle) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : {} }, titleComp) : null,
+            React.createElement(StyledContent, { style: (_h = (_g = props === null || props === void 0 ? void 0 : props.componentStyle) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : {} }, renderContent ? renderContent() : content)),
+        onClose && (React.createElement(StyledCloseIconWrapper, { onClick: onClose }, renderCloseIcon ? renderCloseIcon() : React.createElement(StyledCloseIcon, __assign({}, (closeIcon || defaultCloseIcon), { fixedWidth: true }))))));
+};
+var InlineMessage = function (props) {
+    var _a, _b;
+    return (React.createElement(StyledInlineMessageWrapper, __assign({}, props, { style: (_b = (_a = props === null || props === void 0 ? void 0 : props.componentStyle) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : {} }),
+        React.createElement(UnstyledInlineMessage, __assign({}, props))));
 };
 
-var blue = {
-    900: '#0028AD',
-    800: '#0038B9',
-    700: '#0041C0',
-    600: '#004BC7',
-    500: '#0052CC',
-    400: '#266CD4',
-    300: '#4D86DB',
-    200: '#80A9E6',
-    100: '#B3CBF0',
-    50: '#E0EAF9',
-};
+var EInputSize;
+(function (EInputSize) {
+    EInputSize["medium"] = "medium";
+    EInputSize["large"] = "large";
+})(EInputSize || (EInputSize = {}));
+var EInputTags;
+(function (EInputTags) {
+    EInputTags["textarea"] = "textarea";
+    EInputTags["input"] = "input";
+})(EInputTags || (EInputTags = {}));
+var EInputTypes;
+(function (EInputTypes) {
+    EInputTypes["password"] = "password";
+    EInputTypes["text"] = "text";
+    EInputTypes["number"] = "number";
+})(EInputTypes || (EInputTypes = {}));
+var EInputErrorTypes;
+(function (EInputErrorTypes) {
+    EInputErrorTypes["generic"] = "generic";
+    EInputErrorTypes["wordcount"] = "wordcount";
+})(EInputErrorTypes || (EInputErrorTypes = {}));
 
-var cyan = {
-    900: '#066552',
-    800: '#088C72',
-    700: '#0AA989',
-    600: '#0BC09C',
-    500: '#0DD5AD',
-    400: '#4DE0C2',
-    300: '#7DE8D3',
-    200: '#A4EFE0',
-    100: '#C6F5EB',
-    50: '#E4FAF5',
-};
+var commonStyle = function (onClick) { return css(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  position: absolute;\n  color: ", ";\n  font-size: 14px;\n\n  ", "\n"], ["\n  position: absolute;\n  color: ", ";\n  font-size: 14px;\n\n  ",
+    "\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[500];
+}, onClick
+    ? css(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n        cursor: pointer;\n      "], ["\n        cursor: pointer;\n      "]))) : undefined); };
+var calcMargin = function (size) {
+    switch (size) {
+        case EInputSize.medium:
+            return css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n        top: 7px;\n      "], ["\n        top: 7px;\n      "])));
+        case EInputSize.large:
+            return css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n        top: 10px;\n      "], ["\n        top: 10px;\n      "])));
+        default:
+            return css(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n        top: 6px;\n      "], ["\n        top: 6px;\n      "])));
+    }
+};
+var IconLeft = styled.span(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  ", "\n  left: 8px;\n  ", "\n"], ["\n  ", "\n  left: 8px;\n  ", "\n"])), function (props) { return commonStyle(props.hasAction); }, function (props) { return calcMargin(props.size); });
+var IconRight = styled.span(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  ", "\n  right: 8px;\n  ", "\n"], ["\n  ", "\n  right: 8px;\n  ", "\n"])), function (props) { return commonStyle(props.hasAction); }, function (props) { return calcMargin(props.size); });
+var templateObject_1$u, templateObject_2$f, templateObject_3$c, templateObject_4$8, templateObject_5$6, templateObject_6$5, templateObject_7$5;
 
-var fuchsia = {
-    900: '#500663',
-    800: '#71088B',
-    700: '#880AA8',
-    600: '#9C0BC0',
-    500: '#AD0DD5',
-    400: '#CB67E4',
-    300: '#DB94EC',
-    200: '#E6B6F2',
-    100: '#EFD2F7',
-    50: '#F7E9FB',
-};
+var ErrorMessage = styled.p(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  margin: 4px 0 0 0;\n"], ["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  margin: 4px 0 0 0;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.red[500];
+});
+var DescriptionMessage = styled.p(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  margin: 4px 0 0 0;\n"], ["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  margin: 4px 0 0 0;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.palette.grey[300];
+});
+var templateObject_1$v, templateObject_2$g;
 
-var green = {
-    900: '#00572E',
-    800: '#006A3F',
-    700: '#007448',
-    600: '#007F52',
-    500: '#00875A',
-    400: '#269973',
-    300: '#4DAB8C',
-    200: '#80C3AD',
-    100: '#B3DBCE',
-    50: '#E0F1EB',
-};
-
-var grey = {
-    900: '#091E42',
-    800: '#253858',
-    700: '#505F79',
-    600: '#5E6C84',
-    500: '#6B778C',
-    400: '#7A869A',
-    300: '#A5ADBA',
-    200: '#C1C7D0',
-    100: '#EBECF0',
-    50: '#FAFBFC',
-};
-
-var indigo = {
-    900: '#05175E',
-    800: '#082188',
-    700: '#0A29A6',
-    600: '#0B2FBF',
-    500: '#0D35D5',
-    400: '#637CE3',
-    300: '#90A3EB',
-    200: '#B3BFF1',
-    100: '#D0D7F6',
-    50: '#E8ECFB',
-};
-
-var orange = {
-    900: '#783722',
-    800: '#A74D2F',
-    700: '#CA5D39',
-    600: '#E66A42',
-    500: '#FF7649',
-    400: '#FF9978',
-    300: '#FFB49B',
-    200: '#FFCAB9',
-    100: '#FFDED3',
-    50: '#FFEFEA',
-};
-
-var pink = {
-    900: '#640648',
-    800: '#8C0864',
-    700: '#A80A79',
-    600: '#C00B8A',
-    500: '#D50D99',
-    400: '#E569BF',
-    300: '#EC96D2',
-    200: '#F2B7E0',
-    100: '#F7D2EC',
-    50: '#FBEAF6',
-};
-
-var red = {
-    900: '#C81603',
-    800: '#D12206',
-    700: '#D52808',
-    600: '#DA300A',
-    500: '#DE350B',
-    400: '#E35330',
-    300: '#E87254',
-    200: '#EF9A85',
-    100: '#F5C2B6',
-    50: '#FBE7E2',
-};
-
-var white = {
-    8: 'rgba(255, 255, 255, 0.08)',
-    16: 'rgba(255, 255, 255, 0.16)',
-    48: 'rgba(255, 255, 255, 0.48)',
-    80: 'rgba(255, 255, 255, 0.8)',
-    100: '#FFFFFF',
-};
-
-var yellow = {
-    900: '#FF6B0A',
-    800: '#FF7C12',
-    700: '#FF8617',
-    600: '#FF911B',
-    500: '#FF991F',
-    400: '#FFA841',
-    300: '#FFB862',
-    200: '#FFCC8F',
-    100: '#FFE0BC',
-    50: '#FFF3E4',
-};
-
-var defaultPalette = {
-    black: black,
-    white: white,
-    grey: grey,
-    blue: blue,
-    indigo: indigo,
-    yellow: yellow,
-    orange: orange,
-    red: red,
-    green: green,
-    fuchsia: fuchsia,
-    pink: pink,
-    cyan: cyan,
-    primary: blue,
-};
-
-var iconBackgroundPalette = {
-    blue: defaultPalette.blue[50],
-    indigo: defaultPalette.indigo[50],
-    yellow: defaultPalette.yellow[50],
-    orange: defaultPalette.orange[50],
-    red: defaultPalette.red[50],
-    green: defaultPalette.green[50],
-    fuchsia: defaultPalette.fuchsia[50],
-    pink: defaultPalette.pink[50],
-    cyan: defaultPalette.cyan[50],
-    primary: defaultPalette.primary[50],
-    grey: defaultPalette.grey[100],
-    white: defaultPalette.white[16],
-    black: defaultPalette.black[16],
-};
-
-var colorSetter = function (type, theme) {
-    switch (type) {
-        case 'standard': {
-            return css(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.grey[100], theme.palette.black[100]);
-        }
-        case 'info': {
-            return css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.blue[50], theme.palette.blue[500]);
-        }
-        case 'error': {
-            return css(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.red[50], theme.palette.red[500]);
-        }
-        case 'warning': {
-            return css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.yellow[50], theme.palette.yellow[500]);
-        }
-        case 'success': {
-            return css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.green[50], theme.palette.green[500]);
-        }
-        default: {
-            return css(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n        background-color: ", ";\n        color: ", ";\n      "], ["\n        background-color: ", ";\n        color: ", ";\n      "])), theme.palette.grey[100], theme.palette.black[100]);
-        }
-    }
-};
-var StyledIconTitle = styled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n  margin-top: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n  margin-bottom: ", ";\n"], ["\n  margin-top: 0;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 21px;\n  margin-bottom: ", ";\n"])), spacing.xxs);
-var StyledContent = styled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 18px;\n"], ["\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 18px;\n"])));
-var spacingSetter = function (size) {
-    switch (size) {
-        case 'medium':
-            return css(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n        padding: ", ";\n      "], ["\n        padding: ", ";\n      "])), spacing.s);
-        case 'large':
-            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        padding: ", ";\n        ", " {\n          font-size: 16px;\n          line-height: 18px;\n          margin-bottom: ", ";\n        }\n        ", " {\n          font-size: 14px;\n          line-height: 21px;\n        }\n      "], ["\n        padding: ", ";\n        ", " {\n          font-size: 16px;\n          line-height: 18px;\n          margin-bottom: ", ";\n        }\n        ", " {\n          font-size: 14px;\n          line-height: 21px;\n        }\n      "])), spacing.m, StyledIconTitle, spacing.xs, StyledContent);
-        default:
-            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        padding: ", ";\n      "], ["\n        padding: ", ";\n      "])), spacing.m);
-    }
-};
-var StyledInlineMessageWrapper = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
-    "\n"])), function (_a) {
-    var size = _a.size, theme = _a.theme, type = _a.type;
-    return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: flex;\n    border: 1px solid rgba(51, 51, 51, 0.08);\n    border-radius: 4px;\n    color: ", ";\n\n    ", "\n\n    ", "\n  "], ["\n    display: flex;\n    border: 1px solid rgba(51, 51, 51, 0.08);\n    border-radius: 4px;\n    color: ", ";\n\n    ", "\n\n    ", "\n  "])), theme.palette.black[100], colorSetter(type, theme), spacingSetter(size));
-});
-var StyledIconContent = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  margin-left: ", ";\n  width: 100%;\n"], ["\n  margin-left: ", ";\n  width: 100%;\n"])), function (_a) {
-    var margin = _a.margin;
-    return (margin ? spacing.s : '0px');
-});
-var StyledCloseIconWrapper = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  line-height: 20px;\n"], ["\n  line-height: 20px;\n"])));
-var StyledCloseIcon = styled(Icon)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  cursor: pointer;\n  color: ", ";\n"], ["\n  cursor: pointer;\n  color: ", ";\n"])), function (_a) {
-    var palette = _a.theme.palette;
-    return palette.blue[700];
-});
-var templateObject_1$t, templateObject_2$e, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$2, templateObject_9$1, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
-
-var defaultCloseIcon = {
-    icon: faTimes,
-};
-var UnstyledInlineMessage = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    var closeIcon = props.closeIcon, content = props.content, icon = props.icon, onClose = props.onClose, renderCloseIcon = props.renderCloseIcon, renderContent = props.renderContent, renderIcon = props.renderIcon, renderTitle = props.renderTitle, title = props.title;
-    var titleComp = renderTitle ? renderTitle() : title;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { style: (_b = (_a = props === null || props === void 0 ? void 0 : props.componentStyle) === null || _a === void 0 ? void 0 : _a.icon) !== null && _b !== void 0 ? _b : {} }, renderIcon ? renderIcon() : icon ? React.createElement(Icon, __assign({}, icon)) : null),
-        React.createElement(StyledIconContent, { style: (_d = (_c = props === null || props === void 0 ? void 0 : props.componentStyle) === null || _c === void 0 ? void 0 : _c.contentWrapper) !== null && _d !== void 0 ? _d : {}, margin: renderIcon !== undefined || icon !== undefined },
-            titleComp ? React.createElement(StyledIconTitle, { style: (_f = (_e = props === null || props === void 0 ? void 0 : props.componentStyle) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : {} }, titleComp) : null,
-            React.createElement(StyledContent, { style: (_h = (_g = props === null || props === void 0 ? void 0 : props.componentStyle) === null || _g === void 0 ? void 0 : _g.content) !== null && _h !== void 0 ? _h : {} }, renderContent ? renderContent() : content)),
-        onClose && (React.createElement(StyledCloseIconWrapper, { onClick: onClose }, renderCloseIcon ? renderCloseIcon() : React.createElement(StyledCloseIcon, __assign({}, (closeIcon || defaultCloseIcon), { fixedWidth: true }))))));
-};
-var InlineMessage = function (props) {
-    var _a, _b;
-    return (React.createElement(StyledInlineMessageWrapper, __assign({}, props, { style: (_b = (_a = props === null || props === void 0 ? void 0 : props.componentStyle) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : {} }),
-        React.createElement(UnstyledInlineMessage, __assign({}, props))));
-};
-
-var EInputSize;
-(function (EInputSize) {
-    EInputSize["medium"] = "medium";
-    EInputSize["large"] = "large";
-})(EInputSize || (EInputSize = {}));
-var EInputTags;
-(function (EInputTags) {
-    EInputTags["textarea"] = "textarea";
-    EInputTags["input"] = "input";
-})(EInputTags || (EInputTags = {}));
-var EInputTypes;
-(function (EInputTypes) {
-    EInputTypes["password"] = "password";
-    EInputTypes["text"] = "text";
-    EInputTypes["number"] = "number";
-})(EInputTypes || (EInputTypes = {}));
-var EInputErrorTypes;
-(function (EInputErrorTypes) {
-    EInputErrorTypes["generic"] = "generic";
-    EInputErrorTypes["wordcount"] = "wordcount";
-})(EInputErrorTypes || (EInputErrorTypes = {}));
-
-var commonStyle = function (onClick) { return css(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  position: absolute;\n  color: ", ";\n  font-size: 14px;\n\n  ", "\n"], ["\n  position: absolute;\n  color: ", ";\n  font-size: 14px;\n\n  ",
-    "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[500];
-}, onClick
-    ? css(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n        cursor: pointer;\n      "], ["\n        cursor: pointer;\n      "]))) : undefined); };
-var calcMargin = function (size) {
-    switch (size) {
-        case EInputSize.medium:
-            return css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n        top: 7px;\n      "], ["\n        top: 7px;\n      "])));
-        case EInputSize.large:
-            return css(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n        top: 10px;\n      "], ["\n        top: 10px;\n      "])));
-        default:
-            return css(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n        top: 6px;\n      "], ["\n        top: 6px;\n      "])));
-    }
-};
-var IconLeft = styled.span(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n  ", "\n  left: 8px;\n  ", "\n"], ["\n  ", "\n  left: 8px;\n  ", "\n"])), function (props) { return commonStyle(props.hasAction); }, function (props) { return calcMargin(props.size); });
-var IconRight = styled.span(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n  ", "\n  right: 8px;\n  ", "\n"], ["\n  ", "\n  right: 8px;\n  ", "\n"])), function (props) { return commonStyle(props.hasAction); }, function (props) { return calcMargin(props.size); });
-var templateObject_1$u, templateObject_2$f, templateObject_3$c, templateObject_4$8, templateObject_5$6, templateObject_6$5, templateObject_7$5;
-
-var ErrorMessage = styled.p(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  margin: 4px 0 0 0;\n"], ["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  margin: 4px 0 0 0;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.red[500];
-});
-var DescriptionMessage = styled.p(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  margin: 4px 0 0 0;\n"], ["\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  margin: 4px 0 0 0;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[300];
-});
-var templateObject_1$v, templateObject_2$g;
-
-var WrapperTextArea = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  position: relative;\n  display: inline;\n"], ["\n  position: relative;\n  display: inline;\n"])));
-var templateObject_1$w;
+var WrapperTextArea = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  position: relative;\n  display: inline;\n"], ["\n  position: relative;\n  display: inline;\n"])));
+var templateObject_1$w;
 
 var StyledWrapper = styled.div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n  display: block;\n  position: relative;\n\n  ", "\n\n  ", "\n  \n\n  .input__wrapper {\n    position: relative;\n    ", "\n    .input__text__textarea {\n      padding: 8px;\n      min-height: 42px;\n      line-height: 22px;\n      font-family: inherit;\n      &::placeholder,\n      &::-moz-placeholder,\n      &::-webkit-input-placeholder {\n        font-family: inherit;\n      }\n    }\n  }\n\n  ", "\n"], ["\n  display: block;\n  position: relative;\n\n  ",
     "\n\n  ",
@@ -1487,73 +1778,52 @@ var InputText = function (props) {
         description && !error ? React.createElement(DescriptionMessage, null, description.message) : null));
 };
 
-var CaretIcon = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  transition: transform 250ms ease;\n  transform: ", ";\n\n  visibility: ", ";\n"], ["\n  transition: transform 250ms ease;\n  transform: ", ";\n\n  visibility: ", ";\n"])), function (_a) {
-    var isOpen = _a.isOpen;
-    return (isOpen ? 'rotate(90deg)' : 'rotate(0deg)');
-}, function (_a) {
-    var isVisible = _a.isVisible;
-    return (isVisible ? 'visible' : 'hidden');
-});
-var templateObject_1$y;
-
 var renderTrigger = function () { return (React.createElement(IconWrapper, { tabIndex: 0 },
     React.createElement(Icon, { icon: faEllipsisH, fixedWidth: true }))); };
-var IconWrapper = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var IconWrapper = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 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;
+
+var SidebarItemCaret = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n  transition: transform 250ms ease;\n  transform: ", ";\n\n  visibility: ", ";\n"], ["\n  transition: transform 250ms ease;\n  transform: ", ";\n\n  visibility: ", ";\n"])), function (_a) {
+    var isOpen = _a.isOpen;
+    return (isOpen ? 'rotate(90deg)' : 'rotate(0deg)');
+}, function (_a) {
+    var isVisible = _a.isVisible;
+    return (isVisible ? 'visible' : 'hidden');
+});
 var templateObject_1$z;
 
-var getDefaultColors = function (palette) { return ({
-    color: palette.black[100],
-    background: 'transparent',
-    hoverColor: palette.black[100],
-    hoverBackground: palette.grey[100],
-    dropdownHover: palette.grey[400],
-    dropdownActive: palette.grey[600],
-}); };
-var getActiveColors = function (palette) { return ({
-    color: palette.white[100],
-    background: palette.blue[500],
-    hoverColor: palette.white[100],
-    hoverBackground: palette.blue[500],
-    dropdownHover: 'rgba(255,255,255,0.16)',
-    dropdownActive: palette.blue[700],
-}); };
-var getDisabledColors = function (palette) { return ({
-    color: palette.grey[300],
-    background: palette.grey[100],
-    hoverColor: palette.grey[300],
-    hoverBackground: palette.grey[100],
-    dropdownHover: 'transparent',
-    dropdownActive: 'transparent',
-}); };
 var getSidebarItemStyles = function (_a) {
-    var isActive = _a.isActive, isDisabled = _a.isDisabled, palette = _a.theme.palette;
-    return isDisabled ? getDisabledColors(palette) : isActive ? getActiveColors(palette) : getDefaultColors(palette);
+    var isActive = _a.isActive, isDisabled = _a.isDisabled, theme = _a.theme;
+    var _b = theme.components.sidebarItem, normal = _b.normal, active = _b.active, disabled = _b.disabled;
+    return isDisabled ? disabled : isActive ? active : normal;
 };
 
-var sidebarItemHeight = 40;
-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 sidebarItemHeight = 44;
+var SidebarItem = function (props) {
+    var _a;
+    var _b = props.caretVisible, caretVisible = _b === void 0 ? false : _b, className = props.className, dropdownContent = props.dropdownContent, icon = props.icon, _c = props.isActive, isActive = _c === void 0 ? false : _c, _d = props.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = props.isHidden, isHidden = _e === void 0 ? false : _e, _f = props.isOpen, isOpen = _f === void 0 ? false : _f, onClick = props.onClick, title = props.title, forceOpenDropdown = props.forceOpenDropdown, customProps = props.customProps;
     if (isHidden) {
         return null;
     }
-    return (React.createElement(SidebarItemWrapper, { isActive: isActive, isDisabled: isDisabled, className: className, onClick: onClick },
-        React.createElement(CaretIcon, { isOpen: isOpen, isVisible: caretVisible },
+    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;
@@ -1568,321 +1838,58 @@ var SidebarItemWrapper = styled.div.attrs(getSidebarItemStyles)(templateObject_2
     return dropdownHover;
 }, function (_a) {
     var dropdownActive = _a.dropdownActive;
-    return dropdownActive;
-});
-var Title$2 = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  flex-grow: 1;\n\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  flex-grow: 1;\n\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
-var NoIcon = styled(Icon)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  visibility: hidden;\n"], ["\n  visibility: hidden;\n"])));
-var templateObject_1$A, templateObject_2$i, templateObject_3$e, templateObject_4$a;
-
-var getMicroTagStyles = function (_a) {
-    var theme = _a.theme, type = _a.type;
-    return theme.components.microTag[type];
-};
-
-var MicroTagBody = styled.div.attrs(getMicroTagStyles)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-block;\n  padding: 0 4px;\n  border-radius: 4px;\n  text-transform: uppercase;\n\n  color: ", ";\n  background-color: ", ";\n"], ["\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-block;\n  padding: 0 4px;\n  border-radius: 4px;\n  text-transform: uppercase;\n\n  color: ", ";\n  background-color: ", ";\n"])), function (_a) {
-    var color = _a.color;
-    return color;
-}, function (_a) {
-    var backgroundColor = _a.backgroundColor;
-    return backgroundColor;
-});
-var templateObject_1$B;
-
-var MicroTag = function (_a) {
-    var text = _a.text, type = _a.type;
-    return React.createElement(MicroTagBody, { type: type }, text);
-};
-
-var buttonPalette = {
-    primary: {
-        blue: {
-            normal: defaultPalette.blue[500],
-            hover: defaultPalette.blue[700],
-            active: defaultPalette.blue[900],
-            text: defaultPalette.white[100],
-            textHover: defaultPalette.grey[100],
-        },
-        red: {
-            normal: defaultPalette.red[500],
-            hover: defaultPalette.red[700],
-            active: defaultPalette.red[900],
-            text: defaultPalette.white[100],
-            textHover: defaultPalette.grey[100],
-        },
-        green: {
-            normal: defaultPalette.green[500],
-            hover: defaultPalette.green[700],
-            active: defaultPalette.green[900],
-            text: defaultPalette.white[100],
-            textHover: defaultPalette.grey[100],
-        },
-        grey: {
-            normal: defaultPalette.white[100],
-            hover: defaultPalette.grey[100],
-            active: defaultPalette.grey[200],
-            text: defaultPalette.black[100],
-            textHover: defaultPalette.black[100],
-        },
-        yellow: {
-            normal: defaultPalette.yellow[500],
-            hover: defaultPalette.yellow[700],
-            active: defaultPalette.yellow[900],
-            text: defaultPalette.white[100],
-            textHover: defaultPalette.grey[100],
-        },
-        disabled: {
-            normal: defaultPalette.grey[50],
-            hover: defaultPalette.grey[50],
-            active: defaultPalette.grey[50],
-            text: defaultPalette.grey[200],
-            textHover: defaultPalette.grey[200],
-        },
-    },
-    secondary: {
-        blue: {
-            normal: defaultPalette.blue[50],
-            hover: defaultPalette.blue[100],
-            active: defaultPalette.blue[200],
-            text: defaultPalette.blue[900],
-            textHover: defaultPalette.blue[900],
-        },
-        red: {
-            normal: defaultPalette.red[50],
-            hover: defaultPalette.red[100],
-            active: defaultPalette.red[200],
-            text: defaultPalette.red[900],
-            textHover: defaultPalette.red[900],
-        },
-        green: {
-            normal: defaultPalette.green[50],
-            hover: defaultPalette.green[100],
-            active: defaultPalette.green[200],
-            text: defaultPalette.green[900],
-            textHover: defaultPalette.green[900],
-        },
-        yellow: {
-            normal: defaultPalette.yellow[50],
-            hover: defaultPalette.yellow[100],
-            active: defaultPalette.yellow[200],
-            text: defaultPalette.yellow[900],
-            textHover: defaultPalette.yellow[900],
-        },
-        grey: {
-            normal: defaultPalette.grey[50],
-            hover: defaultPalette.grey[100],
-            active: defaultPalette.grey[200],
-            text: defaultPalette.black[100],
-            textHover: defaultPalette.black[100],
-        },
-        disabled: {
-            normal: defaultPalette.grey[50],
-            hover: defaultPalette.grey[50],
-            active: defaultPalette.grey[50],
-            text: defaultPalette.grey[200],
-            textHover: defaultPalette.grey[200],
-        },
-    },
-    text: {
-        blue: {
-            normal: 'transparent',
-            hover: 'transparent',
-            active: 'transparent',
-            text: defaultPalette.blue[500],
-            textHover: defaultPalette.blue[500],
-        },
-        red: {
-            normal: 'transparent',
-            hover: 'transparent',
-            active: 'transparent',
-            text: defaultPalette.red[500],
-            textHover: defaultPalette.red[500],
-        },
-        green: {
-            normal: 'transparent',
-            hover: 'transparent',
-            active: 'transparent',
-            text: defaultPalette.green[500],
-            textHover: defaultPalette.green[500],
-        },
-        grey: {
-            normal: 'transparent',
-            hover: 'transparent',
-            active: 'transparent',
-            text: defaultPalette.grey[500],
-            textHover: defaultPalette.grey[500],
-        },
-        yellow: {
-            normal: 'transparent',
-            hover: 'transparent',
-            active: 'transparent',
-            text: defaultPalette.yellow[500],
-            textHover: defaultPalette.yellow[500],
-        },
-        disabled: {
-            normal: 'transparent',
-            hover: 'transparent',
-            active: 'transparent',
-            text: defaultPalette.grey[200],
-            textHover: defaultPalette.grey[200],
-        },
-    },
-    defaultType: 'primary',
-    defaultColor: 'blue',
-    defaultSize: 'medium',
-};
-
-var iconButtonPalette = {
-    primary: {
-        blue: {
-            normal: defaultPalette.blue[200],
-            hover: defaultPalette.blue[500],
-        },
-        red: {
-            normal: defaultPalette.red[200],
-            hover: defaultPalette.red[500],
-        },
-        green: {
-            normal: defaultPalette.green[200],
-            hover: defaultPalette.green[500],
-        },
-        yellow: {
-            normal: defaultPalette.yellow[200],
-            hover: defaultPalette.yellow[500],
-        },
-        disabled: {
-            normal: defaultPalette.grey[200],
-            hover: defaultPalette.grey[200],
-        },
-    },
-    secondary: {
-        blue: {
-            normal: defaultPalette.blue[200],
-            hover: defaultPalette.white[100],
-        },
-        red: {
-            normal: defaultPalette.red[200],
-            hover: defaultPalette.white[100],
-        },
-        green: {
-            normal: defaultPalette.green[200],
-            hover: defaultPalette.white[100],
-        },
-        yellow: {
-            normal: defaultPalette.yellow[200],
-            hover: defaultPalette.white[100],
-        },
-        disabled: {
-            normal: defaultPalette.grey[200],
-            hover: defaultPalette.grey[200],
-        },
-    },
-    defaultType: 'primary',
-    defaultColor: 'blue',
-};
-
-var normalChecked = {
-    tickColor: defaultPalette.white[100],
-    backgroundColor: defaultPalette.blue[500],
-    borderColor: defaultPalette.blue[500],
-};
-var errorChecked = {
-    tickColor: defaultPalette.white[100],
-    backgroundColor: defaultPalette.red[500],
-    borderColor: defaultPalette.red[500],
-};
-var checkboxPalette = {
-    input: {
-        normal: {
-            checked: normalChecked,
-            indeterminate: normalChecked,
-            unchecked: {
-                tickColor: defaultPalette.white[100],
-                backgroundColor: 'transparent',
-                borderColor: defaultPalette.grey[500],
-            },
-        },
-        error: {
-            checked: errorChecked,
-            indeterminate: errorChecked,
-            unchecked: {
-                tickColor: defaultPalette.white[100],
-                backgroundColor: 'transparent',
-                borderColor: defaultPalette.red[500],
-            },
-        },
-    },
-    label: {
-        normal: defaultPalette.black[100],
-        error: defaultPalette.red[500],
-    },
-};
-
-var dropdownPalette = {
-    items: {
-        active: {
-            color: defaultPalette.black[100],
-            background: defaultPalette.blue[50],
-            hoverBackground: defaultPalette.grey[100],
-        },
-        notActive: {
-            default: {
-                color: defaultPalette.black[100],
-                background: 'transparent',
-                hoverBackground: defaultPalette.grey[100],
-            },
-            danger: {
-                color: defaultPalette.red[500],
-                background: 'transparent',
-                hoverBackground: defaultPalette.red[50],
-            },
-            success: {
-                color: defaultPalette.green[500],
-                background: 'transparent',
-                hoverBackground: defaultPalette.green[50],
-            },
-            warning: {
-                color: defaultPalette.yellow[500],
-                background: 'transparent',
-                hoverBackground: defaultPalette.yellow[50],
-            },
-            link: {
-                color: defaultPalette.blue[500],
-                background: 'transparent',
-                hoverBackground: defaultPalette.blue[50],
-            },
-        },
-    },
-};
+    return dropdownActive;
+});
+var Title$2 = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  flex-grow: 1;\n\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  flex-grow: 1;\n\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
+var NoIcon = styled(Icon)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  visibility: hidden;\n"], ["\n  visibility: hidden;\n"])));
+var templateObject_1$A, templateObject_2$i, templateObject_3$e, templateObject_4$a;
 
-var getColoredIcon = function (color) { return ({
-    primary: defaultPalette[color][500],
-    secondary: defaultPalette[color][200],
-}); };
-var iconPalette = {
-    blue: getColoredIcon('blue'),
-    red: getColoredIcon('red'),
-    green: getColoredIcon('green'),
-    yellow: getColoredIcon('yellow'),
-    orange: getColoredIcon('orange'),
-    primary: getColoredIcon('primary'),
-    cyan: getColoredIcon('cyan'),
-    fuchsia: getColoredIcon('fuchsia'),
-    indigo: getColoredIcon('indigo'),
-    pink: getColoredIcon('pink'),
-    grey: {
-        primary: defaultPalette.grey[500],
-        secondary: defaultPalette.grey[200],
+var sidebarItemPalette = {
+    normal: {
+        color: defaultPalette.black[100],
+        background: 'transparent',
+        hoverColor: defaultPalette.black[100],
+        hoverBackground: defaultPalette.grey[100],
+        dropdownHover: defaultPalette.grey[400],
+        dropdownActive: defaultPalette.grey[600],
     },
-    white: {
-        primary: defaultPalette.white[100],
-        secondary: defaultPalette.white[48],
+    active: {
+        color: defaultPalette.white[100],
+        background: defaultPalette.blue[500],
+        hoverColor: defaultPalette.white[100],
+        hoverBackground: defaultPalette.blue[500],
+        dropdownHover: 'rgba(255,255,255,0.16)',
+        dropdownActive: defaultPalette.blue[700],
     },
-    black: {
-        primary: defaultPalette.black[100],
-        secondary: defaultPalette.black[48],
+    disabled: {
+        color: defaultPalette.grey[300],
+        background: defaultPalette.grey[100],
+        hoverColor: defaultPalette.grey[300],
+        hoverBackground: defaultPalette.grey[100],
+        dropdownHover: 'transparent',
+        dropdownActive: 'transparent',
     },
 };
 
+var getMicroTagStyles = function (_a) {
+    var theme = _a.theme, type = _a.type;
+    return theme.components.microTag[type];
+};
+
+var MicroTagBody = styled.div.attrs(getMicroTagStyles)(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-block;\n  padding: 0 4px;\n  border-radius: 4px;\n  text-transform: uppercase;\n\n  color: ", ";\n  background-color: ", ";\n"], ["\n  font-weight: 600;\n  font-size: 12px;\n  line-height: 18px;\n  display: inline-block;\n  padding: 0 4px;\n  border-radius: 4px;\n  text-transform: uppercase;\n\n  color: ", ";\n  background-color: ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+});
+var templateObject_1$B;
+
+var MicroTag = function (_a) {
+    var text = _a.text, type = _a.type;
+    return React.createElement(MicroTagBody, { type: type }, text);
+};
+
 var microTagPalette = {
     error: {
         backgroundColor: defaultPalette.red[50],
@@ -1906,6 +1913,113 @@ 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$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$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$3, null, text),
+        rightIcon && React.createElement(RightIcon$1, __assign({}, rightIcon))));
+};
+
 var tagPalette = {
     full: {
         standard: {
@@ -1975,6 +2089,76 @@ var tagPalette = {
     },
 };
 
+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$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$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$H;
+
+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;
+    var wrapperRef = useRef(null);
+    var popperRef = useRef(null);
+    var buttonRef = useRef(null);
+    var _b = useState(null), arrowRef = _b[0], setArrowRef = _b[1];
+    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var show = useCallback(function () { return setIsOpen(true); }, []);
+    var hide = useCallback(function () { return setIsOpen(false); }, []);
+    var _onMouseEnter = useCallback(function (e) {
+        show();
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+    }, [onMouseEnter, show]);
+    var _onMouseLeave = useCallback(function (e) {
+        hide();
+        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
+    }, [hide, onMouseLeave]);
+    var _d = usePopper(buttonRef.current, popperRef.current, {
+        placement: placement,
+        strategy: 'fixed',
+        modifiers: useMemo(function () { return [
+            {
+                name: 'arrow',
+                options: {
+                    element: arrowRef,
+                },
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 10],
+                },
+            },
+        ]; }, [arrowRef]),
+    }), attributes = _d.attributes, styles = _d.styles;
+    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,
+                React.createElement(TooltipContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
+                    React.createElement(Arrow, { type: type, ref: setArrowRef, style: styles.arrow }),
+                    React.createElement(Message, { type: type, style: styles.offset }, message))))));
+};
+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: {
         color: defaultPalette.black[100],
@@ -1996,14 +2180,16 @@ var components = {
     icon: iconPalette,
     iconBackground: iconBackgroundPalette,
     dropdown: dropdownPalette,
+    sidebarItem: sidebarItemPalette,
+    stepper: stepperPalette,
 };
 var defaultTheme = {
     palette: defaultPalette,
     components: components,
 };
 
-var ModalAnimation = createGlobalStyle(templateObject_1$C || (templateObject_1$C = __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$C;
+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) {
@@ -2017,13 +2203,13 @@ var styledModalBoxWidth = function (isSmall, isFullscreen) {
 
 var headerFooterHeight = '80px';
 var closeTimeoutMS = 200;
-var StyledReactModalContainer = styled(ReactModal)(templateObject_1$D || (templateObject_1$D = __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$b || (templateObject_4$b = __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  ",
+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$j || (templateObject_2$j = __makeTemplateObject(["\n          height: ", "px;\n        "], ["\n          height: ", "px;\n        "])), fullScreenHeight) : css(templateObject_3$f || (templateObject_3$f = __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) {
@@ -2062,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$6 = 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$4 = 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$D, templateObject_2$j, templateObject_3$f, templateObject_4$b, 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 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$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 = {
@@ -2154,12 +2340,12 @@ var ModalSearchable = function (props) {
         handleChangeValue('');
     };
     var Header = (React.createElement(WrapperInput, null,
-        React.createElement(StyledIcon$4, { icon: faSearch, color: 'black' }),
+        React.createElement(StyledIcon$3, { icon: faSearch, color: 'black' }),
         React.createElement("input", { autoFocus: true, className: 'inputSearchable', type: 'text', onChange: handleChange, value: value, placeholder: placeholder }),
         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$E || (templateObject_1$E = __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) {
@@ -2172,21 +2358,21 @@ var ClearButton = styled.div(templateObject_1$E || (templateObject_1$E = __makeT
     var visible = _a.visible;
     return (visible ? 'inherit' : 'none');
 });
-var WrapperInput = styled.div(templateObject_2$k || (templateObject_2$k = __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$E, templateObject_2$k;
+var templateObject_1$M, templateObject_2$o;
 
-var CustomSizeModal = styled(Modal)(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n  width: 432px;\n  max-width: 90vw;\n"], ["\n  width: 432px;\n  max-width: 90vw;\n"])));
-var TitleContent = styled.div(templateObject_2$l || (templateObject_2$l = __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$g || (templateObject_3$g = __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$c || (templateObject_4$c = __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 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$F, templateObject_2$l, templateObject_3$g, templateObject_4$c, templateObject_5$9;
+var templateObject_1$N, templateObject_2$p, templateObject_3$i, templateObject_4$d, templateObject_5$9;
 
 var typeMap = {
     error: 'error',
@@ -2225,10 +2411,10 @@ var ConfirmationModal = function (props) {
                     props.onAction();
                 } }))));
 };
-var StyledButton = styled(Button)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n  margin-left: 16px;\n"], ["\n  margin-left: 16px;\n"])));
-var templateObject_1$G;
+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$H || (templateObject_1$H = __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) {
@@ -2253,14 +2439,14 @@ var PageEmptySet = function (_a) {
         text && React.createElement("p", null, text),
         button));
 };
-var templateObject_1$H;
+var templateObject_1$P;
 
-var StyledWrapper$2 = styled.div(templateObject_2$m || (templateObject_2$m = __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$I || (templateObject_1$I = __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$I, templateObject_2$m;
+var templateObject_1$Q, templateObject_2$q;
 
 var PaginationComponent = function (props) {
     var numberOfPages = Math.ceil(props.listSize / props.pageSize);
@@ -2298,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$n || (templateObject_2$n = __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$J || (templateObject_1$J = __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$J, templateObject_2$n;
+var templateObject_1$R, templateObject_2$r;
 
 var UnstyledProgressbar = /** @class */ (function (_super) {
     __extends(UnstyledProgressbar, _super);
@@ -2377,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$K || (templateObject_1$K = __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];
 });
@@ -2404,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$K;
-
-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$o || (templateObject_2$o = __makeTemplateObject(["\n  ", "\n"], ["\n  ",
-    "\n"])), function (_a) {
-    var palette = _a.theme.palette;
-    return css(templateObject_1$L || (templateObject_1$L = __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$L, templateObject_2$o;
-
-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 templateObject_1$S;
 
-var linearBackground = function () { return css(templateObject_1$M || (templateObject_1$M = __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) {
@@ -2447,7 +2605,7 @@ var linearBackground = function () { return css(templateObject_1$M || (templateO
     var theme = _a.theme;
     return theme.palette.grey[100];
 }); };
-var templateObject_1$M;
+var templateObject_1$T;
 
 var tabletLandscape = 991;
 var responsiveThresholds = {
@@ -2520,8 +2678,8 @@ var typeMap$1 = {
     desc: faSortDown,
     default: faSort,
 };
-var StyledWrapper$4 = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  margin-left: 0.5rem;\n"], ["\n  margin-left: 0.5rem;\n"])));
-var StyledIcon$5 = styled(Icon)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\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]);
     var type = '';
@@ -2549,11 +2707,11 @@ var SortIcon = function (props) {
         }
     }
     return (React.createElement(StyledWrapper$4, null,
-        React.createElement(StyledIcon$5, { icon: typeMap$1[type], onClick: function () {
+        React.createElement(StyledIcon$4, { icon: typeMap$1[type], onClick: function () {
                 props.handleSortOnProperty(props.property, nextType);
             } })));
 };
-var templateObject_1$N, templateObject_2$p;
+var templateObject_1$U, templateObject_2$s;
 
 var ellipsisIcon = {
     icon: faEllipsisH,
@@ -2580,36 +2738,36 @@ var HeadDesktop = function (_a) {
                 React.createElement(Icon, __assign({}, ellipsisIcon))))));
 };
 
-var Row = styled.div(templateObject_1$O || (templateObject_1$O = __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$O;
+var templateObject_1$V;
 
-var ActionLink = styled.a(templateObject_2$q || (templateObject_2$q = __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$P || (templateObject_1$P = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), props.color); });
-var templateObject_1$P, templateObject_2$q;
+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$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$Q || (templateObject_1$Q = __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$Q;
+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$r || (templateObject_2$r = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 32px;\n  background-color: ", ";\n  box-shadow: 0px 1px 2px rgba(51, 51, 51, 0.24), 0px 1px 3px rgba(51, 51, 51, 0.12);\n  border-radius: 4px;\n  min-width: 200px;\n  max-width: calc(100% - 2rem);\n  padding: 0.5rem 1rem;\n  z-index: 999;\n  display: none;\n  ", "\n\n  .link_container {\n    margin: 0.5rem 0;\n  }\n"], ["\n  position: absolute;\n  right: 0;\n  top: 32px;\n  background-color: ", ";\n  box-shadow: 0px 1px 2px rgba(51, 51, 51, 0.24), 0px 1px 3px rgba(51, 51, 51, 0.12);\n  border-radius: 4px;\n  min-width: 200px;\n  max-width: calc(100% - 2rem);\n  padding: 0.5rem 1rem;\n  z-index: 999;\n  display: none;\n  ",
+var StyledWrapper$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) {
     var palette = _a.theme.palette;
     return palette.white[100];
 }, function (props) {
     if (props.active) {
-        return css(templateObject_1$R || (templateObject_1$R = __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$d || (templateObject_4$d = __makeTemplateObject(["\n  cursor: pointer;\n  user-select: none;\n  ", "\n"], ["\n  cursor: pointer;\n  user-select: none;\n  ",
+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$h || (templateObject_3$h = __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;
 });
@@ -2619,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$R, templateObject_2$r, templateObject_3$h, templateObject_4$d;
+var templateObject_1$Y, templateObject_2$u, templateObject_3$j, templateObject_4$e;
 
-var StyledWrapper$6 = styled.div(templateObject_3$i || (templateObject_3$i = __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$s || (templateObject_2$s = __makeTemplateObject(["\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  "], ["\n    ",
-        "\n    &:hover {\n      background-color: ", ";\n    }\n  "])), active && css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      background-color: ", ";\n      color: ", ";\n    "])), palette.blue[50], palette.blue[500]), palette.blue[50]);
+    return css(templateObject_2$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$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$S, templateObject_2$s, templateObject_3$i;
+var templateObject_1$Z, templateObject_2$v, templateObject_3$k;
 
-var ActionsPopUpUnderlay = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: transparent;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: none;\n  ", "\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: transparent;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: none;\n  ",
+var ActionsPopUpUnderlay = styled.div(templateObject_2$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$T || (templateObject_1$T = __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$T, templateObject_2$t;
+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;
@@ -2667,13 +2825,13 @@ var RowDesktop = function (_a) {
         React.createElement("td", null)));
 };
 
-var StyledWrapper$7 = styled.div(templateObject_3$j || (templateObject_3$j = __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$u || (templateObject_2$u = __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$U || (templateObject_1$U = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "], ["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))), palette.blue[500], palette.white[100], palette.white[100], palette.grey[50], palette.grey[150], palette.grey[100]);
+    return css(templateObject_2$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$$ || (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$U, templateObject_2$u, templateObject_3$j;
+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);
@@ -2771,7 +2929,7 @@ var CustomizationsModal = /** @class */ (function (_super) {
     return CustomizationsModal;
 }(Component));
 
-var LoadingTableRow = styled.tr(templateObject_1$V || (templateObject_1$V = __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 () {
@@ -2791,7 +2949,7 @@ var LoadingContent = function (props) {
     };
     return React.createElement(React.Fragment, null, renderElements());
 };
-var templateObject_1$V;
+var templateObject_1$10;
 
 var Pagination$1 = function (props) {
     var managedCurrentPage = props.currentPage;
@@ -2958,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$W || (templateObject_1$W = __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$v || (templateObject_2$v = __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$k || (templateObject_3$k = __makeTemplateObject(["\n          &:hover {\n            background-color: ", ";\n          }\n        "], ["\n          &:hover {\n            background-color: ", ";\n          }\n        "])), palette.grey[100]), !disableSelection && css(templateObject_4$e || (templateObject_4$e = __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];
@@ -2966,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$W, templateObject_2$v, templateObject_3$k, templateObject_4$e, 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$X || (templateObject_1$X = __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) {
@@ -2980,16 +3138,16 @@ var ActiveTag = styled.span(templateObject_1$X || (templateObject_1$X = __makeTe
     var active = _a.active, theme = _a.theme;
     return (active ? theme.palette.primary[500] : theme.palette.grey[900]);
 });
-var templateObject_1$X;
+var templateObject_1$12;
 
-var Tab = styled.span(templateObject_1$Y || (templateObject_1$Y = __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$Y;
+var templateObject_1$13;
 
 var Item$1 = function (_a) {
     var active = _a.active, handleClick = _a.handleClick, tabRef = _a.tabRef, text = _a.text;
@@ -2997,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$Z || (templateObject_1$Z = __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$Z;
+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$w || (templateObject_2$w = __makeTemplateObject(["\n  box-sizing: border-box;\n  height: 31px;\n  alignment-baseline: baseline;\n  display: flex;\n  white-space: nowrap;\n  margin-top: 3px;\n  width: 100%;\n\n  ", ";\n\n  & > *:first-child {\n    padding-left: ", "px;\n  }\n\n  & > *:last-child {\n    padding-right: ", "px;\n  }\n\n  & > * + * {\n    margin-left: ", "px;\n  }\n"], ["\n  box-sizing: border-box;\n  height: 31px;\n  alignment-baseline: baseline;\n  display: flex;\n  white-space: nowrap;\n  margin-top: 3px;\n  width: 100%;\n\n  ",
+var TabsWrapper = styled.div(templateObject_2$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$_ || (templateObject_1$_ = __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;
@@ -3014,8 +3172,8 @@ var TabsWrapper = styled.div(templateObject_2$w || (templateObject_2$w = __makeT
     var distance = _a.distance;
     return distance;
 });
-var ScrollableTabsWrapper = styled(TabsWrapper)(templateObject_3$l || (templateObject_3$l = __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$_, templateObject_2$w, templateObject_3$l;
+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;
@@ -3048,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$$ || (templateObject_1$$ = __makeTemplateObject(["\n  height: 21px;\n"], ["\n  height: 21px;\n"])));
-var templateObject_1$$;
+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;
@@ -3063,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$10 || (templateObject_1$10 = __makeTemplateObject(["\n  display: block;\n"], ["\n  display: block;\n"])));
-var templateObject_1$10;
+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;
@@ -3091,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$11 || (templateObject_1$11 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
-var templateObject_1$11;
+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;
@@ -3100,49 +3258,24 @@ var ScrollableTabs = function (_a) {
     return (React.createElement(ScrollableTabsWrapper, { className: className, distance: distance, lateralPadding: lateralPadding }, tabsItems));
 };
 
-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$12 || (templateObject_1$12 = __makeTemplateObject([""], [""])));
-var RightIcon$1 = styled(Icon)(templateObject_2$x || (templateObject_2$x = __makeTemplateObject([""], [""])));
-var Text$2 = styled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject([""], [""])));
-var StyledTag = styled.div.attrs(getTagColors)(templateObject_4$f || (templateObject_4$f = __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$12, templateObject_2$x, templateObject_3$m, templateObject_4$f;
-
-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),
-        rightIcon && React.createElement(RightIcon$1, __assign({}, rightIcon))));
-};
-
 var TextButton = function (_a) {
     var _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, onClick = _a.onClick, text = _a.text, rest = __rest(_a, ["isDisabled", "onClick", "text"]);
     var callback = useCallback(function () {
         !isDisabled && onClick();
     }, [isDisabled, onClick]);
-    return (React.createElement(Wrapper$7, __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$13 || (templateObject_1$13 = __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$y || (templateObject_2$y = __makeTemplateObject(["\n  color: ", ";\n  cursor: default;\n  text-decoration: none;\n"], ["\n  color: ", ";\n  cursor: default;\n  text-decoration: none;\n"])), function (_a) {
+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$7 = 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$13, templateObject_2$y, templateObject_3$n;
+var templateObject_1$19, templateObject_2$A, templateObject_3$o;
 
 var ThemeProvider = function (_a) {
     var children = _a.children, theme = _a.theme;
@@ -3150,20 +3283,20 @@ var ThemeProvider = function (_a) {
         React.createElement(React.Fragment, null, children)));
 };
 
-var StyledTip = styled.div(templateObject_1$14 || (templateObject_1$14 = __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) {
     var palette = _a.theme.palette;
     return palette.primary[400];
 });
-var StyledLeftIcon = styled.span(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n  margin-right: 8px;\n  font-size: 20px;\n"], ["\n  margin-right: 8px;\n  font-size: 20px;\n"])));
-var StyledText = styled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 21px;\n  white-space: nowrap;\n"], ["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 21px;\n  white-space: nowrap;\n"])));
+var StyledLeftIcon = styled.span(templateObject_2$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$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$14, templateObject_2$z, templateObject_3$o, templateObject_4$g;
+var templateObject_1$1a, templateObject_2$B, templateObject_3$p, templateObject_4$g;
 
 var defaultCloseIcon$1 = {
     icon: faTimes,
@@ -3188,14 +3321,14 @@ var ShortcutTip = function (props) {
             React.createElement("b", null, shortcut)), leftIcon: rocketIcon }, rest)));
 };
 
-var StyledIconDiv = styled.div(templateObject_1$15 || (templateObject_1$15 = __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$6 = styled(Icon)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  vertical-align: sub;\n"], ["\n  vertical-align: sub;\n"])));
-var StyledTitle$1 = styled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n  display: inline-block;\n  height: 24px;\n  margin-left: 8px;\n  margin-right: 16px;\n  margin-top: 16px;\n  font-weight: 500;\n  width: 256px;\n"], ["\n  display: inline-block;\n  height: 24px;\n  margin-left: 8px;\n  margin-right: 16px;\n  margin-top: 16px;\n  font-weight: 500;\n  width: 256px;\n"])));
+var StyledIconDiv = styled.div(templateObject_1$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$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$15, templateObject_2$A, 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',
@@ -3213,7 +3346,7 @@ var iconMap$1 = {
 };
 var ToastContent = function (props) { return (React.createElement(StyledToast, null,
     React.createElement(StyledIconDiv, null,
-        React.createElement(StyledIcon$6, __assign({}, props.icon, { fixedWidth: true }))),
+        React.createElement(StyledIcon$5, __assign({}, props.icon, { fixedWidth: true }))),
     React.createElement(StyledTitle$1, null,
         props.title,
         React.createElement(StyledAction, null,
@@ -3247,8 +3380,8 @@ var ToastContainer = styled(ToastContainer$1).attrs({
     closeOnClick: false,
     draggable: false,
     rtl: false,
-})(templateObject_1$16 || (templateObject_1$16 = __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$16;
+})(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,
@@ -3261,74 +3394,4 @@ var Toast = {
     standard: standard,
 };
 
-var Arrow = styled.div(templateObject_1$17 || (templateObject_1$17 = __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  }\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  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[900];
-});
-var arrowStyle = css(templateObject_2$B || (templateObject_2$B = __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$17, templateObject_2$B;
-
-var getMessageStyles = function (_a) {
-    var theme = _a.theme, type = _a.type;
-    return theme.components.tooltip[type];
-};
-var Message = styled.div.attrs(getMessageStyles)(templateObject_1$18 || (templateObject_1$18 = __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$18;
-
-var TooltipContainer = styled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), arrowStyle);
-var templateObject_1$19;
-
-var Tooltip = function (_a) {
-    var message = _a.message, placement = _a.placement, className = _a.className, children = _a.children, type = _a.type, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave;
-    var wrapperRef = useRef(null);
-    var popperRef = useRef(null);
-    var buttonRef = useRef(null);
-    var _b = useState(null), arrowRef = _b[0], setArrowRef = _b[1];
-    var _c = useState(false), isOpen = _c[0], setIsOpen = _c[1];
-    var show = useCallback(function () { return setIsOpen(true); }, []);
-    var hide = useCallback(function () { return setIsOpen(false); }, []);
-    var _onMouseEnter = useCallback(function (e) {
-        show();
-        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
-    }, [onMouseEnter, show]);
-    var _onMouseLeave = useCallback(function (e) {
-        hide();
-        onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
-    }, [hide, onMouseLeave]);
-    var _d = usePopper(buttonRef.current, popperRef.current, {
-        placement: placement,
-        strategy: 'fixed',
-        modifiers: useMemo(function () { return [
-            {
-                name: 'arrow',
-                options: {
-                    element: arrowRef,
-                },
-            },
-            {
-                name: 'offset',
-                options: {
-                    offset: [0, 10],
-                },
-            },
-        ]; }, [arrowRef]),
-    }), attributes = _d.attributes, styles = _d.styles;
-    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,
-                React.createElement(TooltipContainer, __assign({ ref: popperRef, style: styles.popper }, attributes.popper),
-                    React.createElement(Arrow, { ref: setArrowRef, style: styles.arrow }),
-                    React.createElement(Message, { type: type, style: styles.offset }, message))))));
-};
-var Wrapper$8 = styled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var BodyAnimationWrapper$1 = styled.div(templateObject_2$C || (templateObject_2$C = __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$1a, templateObject_2$C;
-
-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 };