@taikai/rocket-kit 3.0.10-beta.2 → 3.0.10

package/dist/rocket-kit.esm.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useMemo } from 'react';
 import Avatar from 'boring-avatars';
-import _styled, { css, keyframes } from 'styled-components';
+import styled, { css } from 'styled-components';
 import { rem, rgba, transparentize, timingFunctions } from 'polished';
 import Select$1, { components } from 'react-select';
 import { Carousel } from 'react-responsive-carousel';
@@ -189,10 +189,24 @@ const field = {
   placeholderColor: colors.grey200
 };
 
-const Wrapper = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__Wrapper",
-  componentId: "sc-1oawilb-0"
-})(["position:relative;border:", " solid ", ";border-radius:", ";width:", "px;height:", "px;overflow:hidden;z-index:0;> *{width:100%;height:100%;}img{object-fit:cover;}"], /*#__PURE__*/rem('2px'), colors.grey200, props => props.square ? 0 : '999px', props => props.size, props => props.size);
+const Wrapper = styled.div`
+  position: relative;
+  border: ${/*#__PURE__*/rem('2px')} solid ${colors.grey200};
+  border-radius: ${props => props.square ? 0 : '999px'};
+  width: ${props => props.size}px;
+  height: ${props => props.size}px;
+  overflow: hidden;
+  z-index: 0;
+
+  > * {
+    width: 100%;
+    height: 100%;
+  }
+
+  img {
+    object-fit: cover;
+  }
+`;
 
 const AvatarImage = props => {
   const {
@@ -243,10 +257,82 @@ const useColor = value => {
   };
 };
 
-const ButtonWrapper = /*#__PURE__*/_styled.button.withConfig({
-  displayName: "styles__ButtonWrapper",
-  componentId: "sc-baestp-0"
-})(["--bg:", ";--txt:", ";--hover:", ";margin:0;border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;outline:none;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}&:disabled{cursor:inherit;opacity:0.5;&:hover{background-color:", ";pointer-events:none;}}> *:not(:last-child){margin-left:", ";margin-right:", ";}.spinner{order:", ";border-top-color:", ";}span{position:relative;font-size:", ";font-weight:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => useColor(props.color ?? 'black').color, props => props.variant === 'outline' && !props.txtColor ? useColor(props.color ?? 'black').color : useColor(props.txtColor ?? 'white').color, props => props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor(props.color ?? 'black').hover, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? rem('80px') : rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? 1 : 2, props => props.variant === 'solid' ? '' : 'var(--button)', /*#__PURE__*/rem(typography.defaultSize), typography.medium, /*#__PURE__*/rem(typography.defaultSize), props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
+const ButtonWrapper = styled.button`
+  --bg: ${props => useColor(props.color ?? 'black').color};
+  --txt: ${props => props.variant === 'outline' && !props.txtColor ? useColor(props.color ?? 'black').color : useColor(props.txtColor ?? 'white').color};
+  --hover: ${props => props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor(props.color ?? 'black').hover};
+
+  margin: 0;
+  border-width: ${props => props.variant === 'outline' ? button.borderWidth : 0};
+  border-style: solid;
+  border-color: var(--bg);
+  border-radius: ${props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius};
+  background-color: ${props => props.variant === 'solid' ? 'var(--bg)' : 'transparent'};
+  width: min-content;
+  min-width: ${props => props.value ? rem('80px') : rem('42px')};
+  height: ${button.height};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${props => props.value ? `0 ${button.padding}` : 0};
+  white-space: nowrap;
+  text-decoration: none;
+  transition-duration: ${misc.transitionDuration};
+  cursor: pointer;
+  outline: none;
+
+  &:hover {
+    border-color: ${props => props.variant === 'solid' ? '' : 'var(--hover)'};
+    background-color: ${props => props.variant === 'solid' ? 'var(--hover)' : 'transparent'};
+
+    span {
+      color: ${props => props.variant === 'solid' ? '' : 'var(--hover)'};
+    }
+
+    svg {
+      fill: ${props => props.variant === 'solid' ? '' : 'var(--hover)'};
+    }
+  }
+
+  &:disabled {
+    cursor: inherit;
+    opacity: 0.5;
+
+    &:hover {
+      background-color: ${props => props.variant === 'solid' ? 'var(--bg)' : 'transparent'};
+      pointer-events: none;
+    }
+  }
+
+  > *:not(:last-child) {
+    margin-left: ${props => props.iconPosition === 'right' ? button.iconSpacing : 0};
+    margin-right: ${props => props.iconPosition === 'left' ? button.iconSpacing : 0};
+  }
+
+  .spinner {
+    order: ${props => props.iconPosition === 'left' ? 1 : 2};
+    border-top-color: ${props => props.variant === 'solid' ? '' : 'var(--button)'};
+  }
+
+  span {
+    position: relative;
+    font-size: ${/*#__PURE__*/rem(typography.defaultSize)};
+    font-weight: ${typography.medium};
+    line-height: ${/*#__PURE__*/rem(typography.defaultSize)};
+    color: ${props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)'};
+    pointer-events: none;
+    transition-duration: ${misc.transitionDuration};
+    order: ${props => props.iconPosition === 'left' ? 2 : 1};
+  }
+
+  svg {
+    order: ${props => props.iconPosition === 'left' ? 1 : 2};
+    width: ${button.iconSize};
+    height: ${button.iconSize};
+    fill: ${props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)'};
+    transition: ${misc.transitionDuration};
+  }
+`;
 
 const Button = props => {
   const {
@@ -289,10 +375,79 @@ const Button = props => {
   }) : null, value && /*#__PURE__*/React.createElement("span", null, value));
 };
 
-const ActionsMenuStyle = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__ActionsMenuStyle",
-  componentId: "sc-1j5ogfi-0"
-})(["position:relative;ul{position:absolute;opacity:0;top:0;margin:0;border:", " solid ", ";border-radius:", ";background-color:", ";min-width:", ";max-width:", ";height:0;max-height:none;padding:0;-moz-box-shadow:0 0 ", " 0 ", ";-webkit-box-shadow:0 0 ", " 0 ", ";box-shadow:0 0 ", " 0 ", ";overflow-y:hidden;z-index:1;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;transition-duration:", ";&.isOpen{opacity:1;height:calc(", " * ", " + ", ");max-height:", ";}li{list-style:none;min-height:", ";display:flex;transition-duration:0.3s;&:hover{background-color:", ";cursor:pointer;}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border-radius:0 0 ", " ", ";}a{width:100%;display:flex;align-items:center;padding:0 ", ";color:", ";text-decoration:none;white-space:nowrap;span{display:table-cell;overflow:hidden;text-overflow:ellipsis;}}}}"], /*#__PURE__*/rem('1px'), field.borderColor, field.borderRadius, field.backgroundColor, /*#__PURE__*/rem('200px'), /*#__PURE__*/rem('250px'), /*#__PURE__*/rem('15px'), field.boxShadow, /*#__PURE__*/rem('15px'), field.boxShadow, /*#__PURE__*/rem('15px'), field.boxShadow, misc.transitionDuration, /*#__PURE__*/rem('45px'), props => props.visibleActions, /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('1280px'), /*#__PURE__*/rem('45px'), field.borderColor, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('20px'), field.color);
+const ActionsMenuStyle = styled.div`
+  position: relative;
+
+  ul {
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    margin: 0;
+    border: ${/*#__PURE__*/rem('1px')} solid ${field.borderColor};
+    border-radius: ${field.borderRadius};
+    background-color: ${field.backgroundColor};
+    min-width: ${/*#__PURE__*/rem('200px')};
+    max-width: ${/*#__PURE__*/rem('250px')};
+    height: 0;
+    max-height: none;
+    padding: 0;
+    -moz-box-shadow: 0 0 ${/*#__PURE__*/rem('15px')} 0 ${field.boxShadow};
+    -webkit-box-shadow: 0 0 ${/*#__PURE__*/rem('15px')} 0 ${field.boxShadow};
+    box-shadow: 0 0 ${/*#__PURE__*/rem('15px')} 0 ${field.boxShadow};
+    overflow-y: hidden;
+    z-index: 1;
+    -webkit-scrollbar-width: none;
+    -moz-scrollbar-width: none;
+    -ms-scrollbar-width: none;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    transition-duration: ${misc.transitionDuration};
+
+    &.isOpen {
+      opacity: 1;
+      // prettier-ignore
+      height: calc(${/*#__PURE__*/rem('45px')} * ${props => props.visibleActions} + ${/*#__PURE__*/rem('2px')});
+      max-height: ${/*#__PURE__*/rem('1280px')};
+    }
+
+    li {
+      list-style: none;
+      min-height: ${/*#__PURE__*/rem('45px')};
+      display: flex;
+      transition-duration: 0.3s;
+
+      &:hover {
+        background-color: ${field.borderColor};
+        cursor: pointer;
+      }
+
+      &:first-child {
+        border-radius: ${/*#__PURE__*/rem('4px')} ${/*#__PURE__*/rem('4px')} 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 ${/*#__PURE__*/rem('4px')} ${/*#__PURE__*/rem('4px')};
+      }
+
+      a {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        padding: 0 ${/*#__PURE__*/rem('20px')};
+        color: ${field.color};
+        text-decoration: none;
+        white-space: nowrap;
+
+        span {
+          display: table-cell;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+`;
 
 function useVisible(initialIsVisible) {
   const [isVisible, setIsVisible] = useState(initialIsVisible);
@@ -387,10 +542,65 @@ const ButtonDropdown = props => {
   }, /*#__PURE__*/React.createElement("span", null, value))))));
 };
 
-const ButtonLinkStyle = /*#__PURE__*/_styled.a.withConfig({
-  displayName: "styles__ButtonLinkStyle",
-  componentId: "sc-clge7v-0"
-})(["--bg:", ";--txt:", ";--hover:", ";border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}> *:not(:last-child){margin-left:", ";margin-right:", ";}span{position:relative;font-size:", ";font-weight:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => useColor(props.color ?? 'black').color, props => props.variant === 'outline' && !props.txtColor ? useColor(props.color ?? 'black').color : useColor(props.txtColor ?? 'white').color, props => props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor(props.color ?? 'black').hover, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? rem('80px') : rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, /*#__PURE__*/rem(typography.defaultSize), typography.medium, /*#__PURE__*/rem(typography.defaultSize), props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
+const ButtonLinkStyle = styled.a`
+  --bg: ${props => useColor(props.color ?? 'black').color};
+  --txt: ${props => props.variant === 'outline' && !props.txtColor ? useColor(props.color ?? 'black').color : useColor(props.txtColor ?? 'white').color};
+  --hover: ${props => props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor(props.color ?? 'black').hover};
+
+  border-width: ${props => props.variant === 'outline' ? button.borderWidth : 0};
+  border-style: solid;
+  border-color: var(--bg);
+  border-radius: ${props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius};
+  background-color: ${props => props.variant === 'solid' ? 'var(--bg)' : 'transparent'};
+  width: min-content;
+  min-width: ${props => props.value ? rem('80px') : rem('42px')};
+  height: ${button.height};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${props => props.value ? `0 ${button.padding}` : 0};
+  white-space: nowrap;
+  text-decoration: none;
+  transition-duration: ${misc.transitionDuration};
+  cursor: pointer;
+
+  &:hover {
+    border-color: ${props => props.variant === 'solid' ? '' : 'var(--hover)'};
+    background-color: ${props => props.variant === 'solid' ? 'var(--hover)' : 'transparent'};
+
+    span {
+      color: ${props => props.variant === 'solid' ? '' : 'var(--hover)'};
+    }
+
+    svg {
+      fill: ${props => props.variant === 'solid' ? '' : 'var(--hover)'};
+    }
+  }
+
+  > *:not(:last-child) {
+    margin-left: ${props => props.iconPosition === 'right' ? button.iconSpacing : 0};
+    margin-right: ${props => props.iconPosition === 'left' ? button.iconSpacing : 0};
+  }
+
+  span {
+    position: relative;
+    font-size: ${/*#__PURE__*/rem(typography.defaultSize)};
+    font-weight: ${typography.medium};
+    line-height: ${/*#__PURE__*/rem(typography.defaultSize)};
+    color: ${props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)'};
+    pointer-events: none;
+    transition-duration: ${misc.transitionDuration};
+    order: ${props => props.iconPosition === 'left' ? 2 : 1};
+  }
+
+  svg {
+    order: ${props => props.iconPosition === 'left' ? 1 : 2};
+    width: ${button.iconSize};
+    height: ${button.iconSize};
+    fill: ${props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)'};
+    transition: ${misc.transitionDuration};
+  }
+`;
 
 const ButtonLink = props => {
   const {
@@ -438,22 +648,94 @@ const ButtonLink = props => {
   }), value && /*#__PURE__*/React.createElement("span", null, value));
 };
 
-const CheckboxWrapper = /*#__PURE__*/_styled.label.withConfig({
-  displayName: "styles__CheckboxWrapper",
-  componentId: "sc-w5t014-0"
-})(["display:flex;position:relative;padding-left:0;cursor:", ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;&:hover input:not(:disabled) ~ span{border-color:", ";}span{color:", ";border-color:", ";}"], props => props.disabled ? 'auto' : 'pointer', props => props.error ? field.errorBorderColor : field.hoverBorderColor, props => props.disabled ? field.disabledColor : props.error ? field.errorBorderColor : null, props => props.error ? field.errorBorderColor : null);
-const CheckboxLabel = /*#__PURE__*/_styled.span.withConfig({
-  displayName: "styles__CheckboxLabel",
-  componentId: "sc-w5t014-1"
-})(["margin-left:calc(", " + ", ");line-height:", ";"], /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('24px'));
-const CheckboxInput = /*#__PURE__*/_styled.input.withConfig({
-  displayName: "styles__CheckboxInput",
-  componentId: "sc-w5t014-2"
-})(["position:absolute;left:0;opacity:0;cursor:pointer;"]);
-const Checkmark = /*#__PURE__*/_styled.span.withConfig({
-  displayName: "styles__Checkmark",
-  componentId: "sc-w5t014-3"
-})(["position:absolute;top:0;left:0;border:", " solid ", ";border-radius:100%;width:", ";height:", ";transition-duration:", ";&:after{display:block;content:'';position:absolute;display:none;top:", ";left:", ";width:", ";height:", ";border:solid ", ";border-width:0 ", " ", " 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}&.checked.not-disabled{background-color:", ";border-color:", ";&:after{display:block;}}&.checked.disabled{color:", ";border-color:transparent;background-color:", ";&:after{display:block;}}&.not-checked.disabled{border-color:", ";background-color:", ";}&.not-disabled:hover{border-color:", ";&:checked ~ span{border-color:", ";}}"], /*#__PURE__*/rem('2px'), props => props.error ? field.errorBorderColor : field.borderColor, /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), misc.transitionDuration, /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('9px'), colors.white, /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('3px'), props => props.error ? field.errorBackgroundColor : field.successBackgroundColor, props => props.error ? field.errorBorderColor : field.successBorderColor, field.disabledColor, field.disabledBackgroundColor, field.disabledBackgroundColor, colors.white, props => props.error ? field.errorBorderColor : field.successBorderColor, props => props.error ? field.errorBorderColor : field.successBorderColor);
+const CheckboxWrapper = styled.label`
+  display: flex;
+  position: relative;
+  padding-left: 0;
+  cursor: ${props => props.disabled ? 'auto' : 'pointer'};
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &:hover input:not(:disabled) ~ span {
+    border-color: ${props => props.error ? field.errorBorderColor : field.hoverBorderColor};
+  }
+
+  span {
+    color: ${props => props.disabled ? field.disabledColor : props.error ? field.errorBorderColor : null};
+    border-color: ${props => props.error ? field.errorBorderColor : null};
+  }
+`;
+const CheckboxLabel = styled.span`
+  margin-left: calc(${/*#__PURE__*/rem('24px')} + ${/*#__PURE__*/rem('5px')});
+  line-height: ${/*#__PURE__*/rem('24px')};
+`;
+const CheckboxInput = styled.input`
+  position: absolute;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+`;
+const Checkmark = styled.span`
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: ${/*#__PURE__*/rem('2px')} solid
+    ${props => props.error ? field.errorBorderColor : field.borderColor};
+  border-radius: 100%;
+  width: ${/*#__PURE__*/rem('24px')};
+  height: ${/*#__PURE__*/rem('24px')};
+  transition-duration: ${misc.transitionDuration};
+
+  &:after {
+    display: block;
+    content: '';
+    position: absolute;
+    display: none;
+    top: ${/*#__PURE__*/rem('3px')};
+    left: ${/*#__PURE__*/rem('6px')};
+    width: ${/*#__PURE__*/rem('5px')};
+    height: ${/*#__PURE__*/rem('9px')};
+    border: solid ${colors.white};
+    border-width: 0 ${/*#__PURE__*/rem('3px')} ${/*#__PURE__*/rem('3px')} 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+
+  &.checked.not-disabled {
+    background-color: ${props => props.error ? field.errorBackgroundColor : field.successBackgroundColor};
+    border-color: ${props => props.error ? field.errorBorderColor : field.successBorderColor};
+
+    &:after {
+      display: block;
+    }
+  }
+
+  &.checked.disabled {
+    color: ${field.disabledColor};
+    border-color: transparent;
+    background-color: ${field.disabledBackgroundColor};
+
+    &:after {
+      display: block;
+    }
+  }
+
+  &.not-checked.disabled {
+    border-color: ${field.disabledBackgroundColor};
+    background-color: ${colors.white};
+  }
+
+  &.not-disabled:hover {
+    border-color: ${props => props.error ? field.errorBorderColor : field.successBorderColor};
+
+    &:checked ~ span {
+      border-color: ${props => props.error ? field.errorBorderColor : field.successBorderColor};
+    }
+  }
+`;
 
 const Checkbox = ({
   label,
@@ -508,22 +790,101 @@ const Checkbox = ({
   }));
 };
 
-const CheckboxWrapper$1 = /*#__PURE__*/_styled.label.withConfig({
-  displayName: "styles__CheckboxWrapper",
-  componentId: "sc-itly0z-0"
-})(["border:", " solid ", ";border-radius:", ";background-color:", ";height:", ";display:flex;align-items:center;position:relative;cursor:", ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition-duration:", ";&:hover input:not(:disabled) ~ span{border-color:", ";}&:hover{background-color:", ";}span{color:", ";transition-duration:", ";}"], field.borderWidth, props => props.disabled ? field.borderColor : props.checked ? field.successBorderColor : field.borderColor, field.borderRadius, props => props.disabled ? field.disabledBackgroundColor : props.checked ? field.successBackgroundColor : field.backgroundColor, field.height, props => props.disabled ? 'auto' : 'pointer', misc.transitionDuration, field.hoverBorderColor, props => props.disabled ? field.disabledBackgroundColor : props.checked ? field.successBackgroundColor : field.borderColor, props => props.disabled ? field.disabledColor : props.checked ? colors.white : null, misc.transitionDuration);
-const CheckboxLabel$1 = /*#__PURE__*/_styled.span.withConfig({
-  displayName: "styles__CheckboxLabel",
-  componentId: "sc-itly0z-1"
-})(["margin-left:", ";line-height:", ";"], /*#__PURE__*/rem('40px'), /*#__PURE__*/rem('24px'));
-const CheckboxInput$1 = /*#__PURE__*/_styled.input.withConfig({
-  displayName: "styles__CheckboxInput",
-  componentId: "sc-itly0z-2"
-})(["position:absolute;left:0;opacity:0;cursor:pointer;&:checked:not(:disabled) ~ span{background-color:", ";border-color:", ";&:after{display:block;}}&:checked:disabled ~ span{background-color:", ";color:", ";&:after{display:block;border-color:", ";}}&:not(:checked):disabled ~ span{border-color:", ";background-color:", ";}&:hover:not(:disabled){&:checked ~ span{border-color:", ";}}"], colors.white, field.successBorderColor, field.disabledBackgroundColor, field.disabledColor, field.disabledColor, field.disabledBackgroundColor, field.backgroundColor, field.successBorderColor);
-const Checkmark$1 = /*#__PURE__*/_styled.span.withConfig({
-  displayName: "styles__Checkmark",
-  componentId: "sc-itly0z-3"
-})(["position:absolute;left:", ";border:", " solid ", ";border-radius:999px;background-color:", ";width:", ";height:", ";transition-duration:", ";&:after{content:'';position:absolute;display:none;top:", ";left:", ";width:", ";height:", ";border:solid ", ";border-width:0 ", " ", " 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}"], /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('2px'), field.borderColor, colors.white, /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), misc.transitionDuration, /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('9px'), props => props.disabled ? colors.white : field.successBorderColor, /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('3px'));
+const CheckboxWrapper$1 = styled.label`
+  border: ${field.borderWidth} solid
+    ${props => props.disabled ? field.borderColor : props.checked ? field.successBorderColor : field.borderColor};
+  border-radius: ${field.borderRadius};
+  background-color: ${props => props.disabled ? field.disabledBackgroundColor : props.checked ? field.successBackgroundColor : field.backgroundColor};
+  height: ${field.height};
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: ${props => props.disabled ? 'auto' : 'pointer'};
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  transition-duration: ${misc.transitionDuration};
+
+  &:hover input:not(:disabled) ~ span {
+    border-color: ${field.hoverBorderColor};
+  }
+
+  &:hover {
+    background-color: ${props => props.disabled ? field.disabledBackgroundColor : props.checked ? field.successBackgroundColor : field.borderColor};
+  }
+
+  span {
+    color: ${props => props.disabled ? field.disabledColor : props.checked ? colors.white : null};
+    transition-duration: ${misc.transitionDuration};
+  }
+`;
+const CheckboxLabel$1 = styled.span`
+  margin-left: ${/*#__PURE__*/rem('40px')};
+  line-height: ${/*#__PURE__*/rem('24px')};
+`;
+const CheckboxInput$1 = styled.input`
+  position: absolute;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+
+  &:checked:not(:disabled) ~ span {
+    background-color: ${colors.white};
+    border-color: ${field.successBorderColor};
+
+    &:after {
+      display: block;
+    }
+  }
+
+  &:checked:disabled ~ span {
+    background-color: ${field.disabledBackgroundColor};
+    color: ${field.disabledColor};
+
+    &:after {
+      display: block;
+      border-color: ${field.disabledColor};
+    }
+  }
+
+  &:not(:checked):disabled ~ span {
+    border-color: ${field.disabledBackgroundColor};
+    background-color: ${field.backgroundColor};
+  }
+
+  &:hover:not(:disabled) {
+    &:checked ~ span {
+      border-color: ${field.successBorderColor};
+    }
+  }
+`;
+const Checkmark$1 = styled.span`
+  position: absolute;
+  left: ${/*#__PURE__*/rem('10px')};
+  border: ${/*#__PURE__*/rem('2px')} solid ${field.borderColor};
+  border-radius: 999px;
+  background-color: ${colors.white};
+  width: ${/*#__PURE__*/rem('24px')};
+  height: ${/*#__PURE__*/rem('24px')};
+  transition-duration: ${misc.transitionDuration};
+
+  &:after {
+    content: '';
+    position: absolute;
+    display: none;
+    top: ${/*#__PURE__*/rem('3px')};
+    left: ${/*#__PURE__*/rem('6px')};
+    width: ${/*#__PURE__*/rem('5px')};
+    height: ${/*#__PURE__*/rem('9px')};
+    border: solid
+      ${props => props.disabled ? colors.white : field.successBorderColor};
+    border-width: 0 ${/*#__PURE__*/rem('3px')} ${/*#__PURE__*/rem('3px')} 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+`;
 
 const CheckboxButton = props => {
   const {
@@ -738,10 +1099,56 @@ const icons = {
   withdraw: 'M29.8 26.4a3.4 3.4 0 01-3.4 3.4H5.6a3.4 3.4 0 01-3.4-3.4V15.2a3.4 3.4 0 013.4-3.4h3.2a1 1 0 110 2H5.6a1.4 1.4 0 00-1.4 1.4v11.2a1.4 1.4 0 001.4 1.4h20.8a1.4 1.4 0 001.4-1.4V15.2a1.4 1.4 0 00-1.4-1.4h-3.2a1 1 0 110-2h3.2a3.4 3.4 0 013.4 3.4v11.2zM24 25a1 1 0 01-1-1v-5.6a1 1 0 112 0V24a1 1 0 01-1 1zm-8-2a2.2 2.2 0 100-4.4 2.2 2.2 0 000 4.4zm4.2-2.2a4.2 4.2 0 11-8.4 0 4.2 4.2 0 018.4 0zM8 25a1 1 0 01-1-1v-5.6a1 1 0 112 0V24a1 1 0 01-1 1zm8-11.543a1 1 0 01-1-1l.001-6.843-2.513 2.514a1 1 0 11-1.415-1.414l4.221-4.221a1 1 0 011.414 0l4.526 4.525a1 1 0 01-1.415 1.415l-2.818-2.819v6.843a1 1 0 01-1 1z'
 };
 
-const TextFieldInputStyle = /*#__PURE__*/_styled.input.withConfig({
-  displayName: "styles__TextFieldInputStyle",
-  componentId: "sc-1hxcxbo-0"
-})(["border-width:", ";border-style:solid;border-color:", ";border-radius:", ";background-repeat:no-repeat;background-size:", " ", ";background-position:", " 50%;height:", ";padding:", ";font-family:inherit;font-size:", ";transition-property:border-color;transition-duration:", ";&:hover{border-color:", ";}&:focus{border-color:", ";outline:none;}&:disabled{border-color:", ";background-color:", ";color:", ";}&:invalid{border-color:", ";outline:none;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;}&:required{border-color:", ";}&::placeholder,&:-ms-input-placeholder,&::-ms-input-placeholder{color:", ";opacity:1;}", ""], field.borderWidth, props => props.error ? field.errorBorderColor : field.borderColor, field.borderRadius, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('10px'), field.height, /*#__PURE__*/rem('10px'), typography.defaultSize, misc.transitionDuration, field.hoverBorderColor, field.activeBorderColor, field.borderColor, field.disabledBackgroundColor, field.disabledColor, field.errorBorderColor, props => props.error ? field.errorBorderColor : field.borderColor, field.placeholderColor, props => props.icon && css`
+const TextFieldInputStyle = styled.input`
+  border-width: ${field.borderWidth};
+  border-style: solid;
+  border-color: ${props => props.error ? field.errorBorderColor : field.borderColor};
+  border-radius: ${field.borderRadius};
+  background-repeat: no-repeat;
+  background-size: ${/*#__PURE__*/rem('20px')} ${/*#__PURE__*/rem('20px')};
+  background-position: ${/*#__PURE__*/rem('10px')} 50%;
+  height: ${field.height};
+  padding: ${/*#__PURE__*/rem('10px')};
+  font-family: inherit;
+  font-size: ${typography.defaultSize};
+  transition-property: border-color;
+  transition-duration: ${misc.transitionDuration};
+
+  &:hover {
+    border-color: ${field.hoverBorderColor};
+  }
+
+  &:focus {
+    border-color: ${field.activeBorderColor};
+    outline: none;
+  }
+
+  &:disabled {
+    border-color: ${field.borderColor};
+    background-color: ${field.disabledBackgroundColor};
+    color: ${field.disabledColor};
+  }
+
+  &:invalid {
+    border-color: ${field.errorBorderColor};
+    outline: none;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+  }
+
+  &:required {
+    border-color: ${props => props.error ? field.errorBorderColor : field.borderColor};
+  }
+
+  &::placeholder,
+  &:-ms-input-placeholder,
+  &::-ms-input-placeholder {
+    color: ${field.placeholderColor};
+    opacity: 1;
+  }
+
+  ${props => props.icon && css`
       background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32"><path style="fill:${props => props.error ? 'rgb(235,87,87)' : 'rgb(217,212,237)'}" d=${JSON.stringify(icons[props.icon])} /></svg>');
       padding-left: ${rem('40px')};
 
@@ -749,12 +1156,13 @@ const TextFieldInputStyle = /*#__PURE__*/_styled.input.withConfig({
         background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
         <path style="fill:rgb(67,41,166)" d=${JSON.stringify(icons[props.icon])} /></svg>');
       }
-    `);
+    `}
+`;
 
-const Wrapper$1 = _styled.div`
+const Wrapper$1 = styled.div`
   position: relative;
 `;
-const TextAreaStyle = _styled.textarea`
+const TextAreaStyle = styled.textarea`
   border-width: ${field.borderWidth};
   border-style: solid;
   border-color: ${props => props.error ? field.errorBorderColor : field.borderColor};
@@ -810,7 +1218,7 @@ const TextAreaStyle = _styled.textarea`
     opacity: 1;
   }
 `;
-const Count = _styled.div`
+const Count = styled.div`
   position: absolute;
   top: ${/*#__PURE__*/rem('5px')};
   right: ${/*#__PURE__*/rem('10px')};
@@ -827,7 +1235,7 @@ const Count = _styled.div`
   }
 `;
 
-const SelectStyle = _styled.select`
+const SelectStyle = styled.select`
   border: ${field.borderWidth} solid
     ${props => props.error ? field.errorBorderColor : field.borderColor};
   border-radius: ${field.borderRadius};
@@ -863,13 +1271,18 @@ const SelectStyle = _styled.select`
   }
 `;
 
-const ErrorStyle = /*#__PURE__*/_styled.span.withConfig({
-  displayName: "styles__ErrorStyle",
-  componentId: "sc-4e4ecc-0"
-})(["display:block;font-size:0.7rem;color:", ";", " + &,", " + &,", " + &{margin-top:", ";}"], props => props.color === 'success' ? field.successBorderColor : field.errorBorderColor, TextFieldInputStyle, TextAreaStyle, SelectStyle, /*#__PURE__*/rem('5px'));
+const ErrorStyle = styled.span`
+  display: block;
+  font-size: 0.7rem;
+  color: ${props => props.color === 'success' ? field.successBorderColor : field.errorBorderColor};
 
-const ErrorField = props => {
-  const {
+  ${TextFieldInputStyle} + &, ${TextAreaStyle} + &, ${SelectStyle} + & {
+    margin-top: ${/*#__PURE__*/rem('5px')};
+  }
+`;
+
+const ErrorField = props => {
+  const {
     color = 'red',
     error,
     className = 'error-field',
@@ -901,10 +1314,19 @@ const Icon = props => {
   }));
 };
 
-const LabelStyle = /*#__PURE__*/_styled.label.withConfig({
-  displayName: "styles__LabelStyle",
-  componentId: "sc-pbv9we-0"
-})(["display:flex;align-items:center;font-size:", ";font-weight:", ";color:", ";svg{margin-left:", ";width:auto;height:", ";}"], typography.fontSizeXs, typography.semiBold, colors.grey500, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('16px'));
+const LabelStyle = styled.label`
+  display: flex;
+  align-items: center;
+  font-size: ${typography.fontSizeXs};
+  font-weight: ${typography.semiBold};
+  color: ${colors.grey500};
+
+  svg {
+    margin-left: ${/*#__PURE__*/rem('5px')};
+    width: auto;
+    height: ${/*#__PURE__*/rem('16px')};
+  }
+`;
 
 const Label = props => {
   const {
@@ -925,18 +1347,23 @@ const Label = props => {
   }));
 };
 
-const rotation = keyframes`
-  from {
+const Loading = styled.div`
+  @keyframes rotation {
+    from {
       transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
   }
-  to {
-    transform: rotate(360deg);
-  }
+
+  border: ${/*#__PURE__*/rem('5px')} solid hsla(0, 0%, 48%, 0.5);
+  border-top-color: ${props => props.fill || colors.white};
+  border-radius: 50%;
+  width: ${props => props.size || rem('20px')};
+  height: ${props => props.size || rem('20px')};
+  animation: rotation 0.8s ease infinite;
 `;
-const Loading = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__Loading",
-  componentId: "sc-sxnx45-0"
-})(["border:", " solid hsla(0,0%,48%,0.5);border-top-color:", ";border-radius:50%;width:", ";height:", ";animation:", " 0.8s ease infinite;"], /*#__PURE__*/rem('5px'), props => props.fill || colors.white, props => props.size || rem('20px'), props => props.size || rem('20px'), rotation);
 
 const Spinner = props => {
   const {
@@ -953,10 +1380,23 @@ const Spinner = props => {
   });
 };
 
-const TagWrapper = /*#__PURE__*/_styled.span.withConfig({
-  displayName: "styles__TagWrapper",
-  componentId: "sc-1ghratr-0"
-})(["--bg:", ";--txt:", ";display:inline-block;border:", " solid var(--bg);border-radius:", ";background-color:", ";padding:", " ", ";font-size:", ";font-weight:", ";text-transform:uppercase;letter-spacing:", ";line-height:1;color:", ";white-space:nowrap;"], props => useColor(props.color ?? 'black').color, props => useColor(props.txtColor ?? 'black').color, /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('4px'), props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('8px'), /*#__PURE__*/rem('12px'), typography.medium, /*#__PURE__*/rem('1px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)');
+const TagWrapper = styled.span`
+  --bg: ${props => useColor(props.color ?? 'black').color};
+  --txt: ${props => useColor(props.txtColor ?? 'black').color};
+
+  display: inline-block;
+  border: ${/*#__PURE__*/rem('2px')} solid var(--bg);
+  border-radius: ${/*#__PURE__*/rem('4px')};
+  background-color: ${props => props.variant === 'solid' ? 'var(--bg)' : 'transparent'};
+  padding: ${/*#__PURE__*/rem('3px')} ${/*#__PURE__*/rem('8px')};
+  font-size: ${/*#__PURE__*/rem('12px')};
+  font-weight: ${typography.medium};
+  text-transform: uppercase;
+  letter-spacing: ${/*#__PURE__*/rem('1px')};
+  line-height: 1;
+  color: ${props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)'};
+  white-space: nowrap;
+`;
 
 const Tag = props => {
   const {
@@ -977,10 +1417,44 @@ const Tag = props => {
   }, value);
 };
 
-const TagWrapper$1 = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__TagWrapper",
-  componentId: "sc-db57da-0"
-})(["--bg:", ";--valueColor:", ";display:flex;border:", " solid var(--bg);border-radius:", ";line-height:1;max-width:100%;width:max-content;overflow:hidden;span{display:inline-block;padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:", ";&.label{flex:1;color:var(--bg);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-transform:uppercase;}&.value{background-color:var(--bg);color:var(--valueColor);}}&:not(:first-child){margin-left:", ";}"], props => useColor(props.color ?? 'black').color, props => useColor(props.valueColor ?? 'black').color, /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('8px'), /*#__PURE__*/rem('12px'), typography.medium, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('5px'));
+const TagWrapper$1 = styled.div`
+  --bg: ${props => useColor(props.color ?? 'black').color};
+  --valueColor: ${props => useColor(props.valueColor ?? 'black').color};
+
+  display: flex;
+  border: ${/*#__PURE__*/rem('2px')} solid var(--bg);
+  border-radius: ${/*#__PURE__*/rem('3px')};
+  line-height: 1;
+  max-width: 100%;
+  width: max-content;
+  overflow: hidden;
+
+  span {
+    display: inline-block;
+    padding: ${/*#__PURE__*/rem('3px')} ${/*#__PURE__*/rem('8px')};
+    font-size: ${/*#__PURE__*/rem('12px')};
+    font-weight: ${typography.medium};
+    letter-spacing: ${/*#__PURE__*/rem('1px')};
+
+    &.label {
+      flex: 1;
+      color: var(--bg);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      text-transform: uppercase;
+    }
+
+    &.value {
+      background-color: var(--bg);
+      color: var(--valueColor);
+    }
+  }
+
+  &:not(:first-child) {
+    margin-left: ${/*#__PURE__*/rem('5px')};
+  }
+`;
 
 const TagNumber = props => {
   const {
@@ -1135,7 +1609,7 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-const SelectWrapper = _styled.div`
+const SelectWrapper = styled.div`
   .select {
     &-interactive {
       z-index: 3;
@@ -1261,7 +1735,7 @@ const SelectWrapper = _styled.div`
     pointer-events: none;
   }
 `;
-const SelectGroupLabel = _styled.span`
+const SelectGroupLabel = styled.span`
   font-size: ${typography.fontSizeXs};
   color: ${field.placeholderColor};
 
@@ -1271,7 +1745,7 @@ const SelectGroupLabel = _styled.span`
     color: ${field.activeBorderColor};
   }
 `;
-const SingleValue = _styled.div`
+const SingleValue = styled.div`
   grid-area: 1 / 1 / 2 / 3;
   margin-left: ${/*#__PURE__*/rem('2px')};
   margin-right: ${/*#__PURE__*/rem('2px')};
@@ -1325,6 +1799,7 @@ const SelectInteractive = ({
   onChange = () => {},
   onInputChange = () => {},
   dataTestId,
+  filterOption,
   ...rest
 }) => {
   return /*#__PURE__*/React.createElement(SelectWrapper, _extends({
@@ -1349,13 +1824,14 @@ const SelectInteractive = ({
       Option: CustomSelectOption,
       SingleValue: CustomSelectValue
     },
-    formatGroupLabel: s => formatGroupLabel ? FormatGroupLabel(s) : undefined
+    formatGroupLabel: s => formatGroupLabel ? FormatGroupLabel(s) : undefined,
+    filterOption: filterOption
   }), error ? /*#__PURE__*/React.createElement(ErrorField, {
     error: error
   }) : null);
 };
 
-const Wrapper$2 = _styled.div`
+const Wrapper$2 = styled.div`
   border-width: ${field.borderWidth};
   border-style: solid;
   border-color: ${props => props.error ? field.errorBorderColor : field.borderColor};
@@ -1397,7 +1873,7 @@ const Wrapper$2 = _styled.div`
     margin-top: ${props => props.error ? rem('5px') : 0};
   }
 `;
-const Appendix = _styled.div`
+const Appendix = styled.div`
   border-width: ${props => props.position === 'left' ? `0 ${field.borderWidth} 0 0` : `0 0 0 ${field.borderWidth}`};
   border-style: solid;
   border-color: ${props => props.error ? field.errorBorderColor : field.borderColor};
@@ -1457,10 +1933,18 @@ const TextFieldAppendix = props => {
   }) : null);
 };
 
-const TruncateWrapper = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__TruncateWrapper",
-  componentId: "sc-1p4cmvj-0"
-})(["display:table;table-layout:fixed;width:100%;white-space:nowrap;span{display:table-cell;overflow:hidden;text-overflow:ellipsis;}"]);
+const TruncateWrapper = styled.div`
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  white-space: nowrap;
+
+  span {
+    display: table-cell;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
 
 const TruncateLine = props => {
   const {
@@ -1493,7 +1977,7 @@ const device = {
   mouse: '(min-width: 538px) and (min-height: 720px)'
 };
 
-const Wrapper$3 = _styled.div`
+const Wrapper$3 = styled.div`
   position: relative;
 
   .carousel .control-arrow,
@@ -1882,7 +2366,7 @@ const Slideshow = props => {
   }, children));
 };
 
-const Wrapper$4 = _styled.div`
+const Wrapper$4 = styled.div`
   position: relative;
   padding-top: 56.25%;
 `;
@@ -1917,11 +2401,11 @@ const VideoPlayer = props => {
   }));
 };
 
-const Wrapper$5 = _styled.div`
+const Wrapper$5 = styled.div`
   display: flex;
   align-items: center;
 `;
-const Bar = _styled.div`
+const Bar = styled.div`
   flex: 1;
   border: ${/*#__PURE__*/rem('1px')} solid ${colors.purple100};
   border-radius: 999px;
@@ -1929,14 +2413,14 @@ const Bar = _styled.div`
   height: ${/*#__PURE__*/rem('10px')};
   overflow: hidden;
 `;
-const Progress = _styled.div`
+const Progress = styled.div`
   border-radius: 999px;
   background-color: ${colors.purple500};
   height: 100%;
   width: ${props => props.progress ? `${props.progress}%` : 0};
   transition-duration: 2s;
 `;
-const Value = _styled.div`
+const Value = styled.div`
   margin-left: ${/*#__PURE__*/rem('5px')};
   font-size: ${typography.fontSizeXs};
   font-weight: ${typography.regular};
@@ -1955,7 +2439,7 @@ const ProgressBar = props => {
   })), value && /*#__PURE__*/React.createElement(Value, null, value));
 };
 
-const Switcher = _styled.fieldset`
+const Switcher = styled.fieldset`
   margin: 0;
   border: none;
   padding: 0;
@@ -2125,7 +2609,7 @@ const Toggle = ({
   }, labelRight)));
 };
 
-const Wrapper$6 = _styled.div`
+const Wrapper$6 = styled.div`
   input {
     width: 0.1px;
     height: 0.1px;
@@ -2249,18 +2733,81 @@ const FilePicker = props => {
   }));
 };
 
-const ActionsMenuStyle$1 = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__ActionsMenuStyle",
-  componentId: "sc-1peafop-0"
-})(["height:", ";button{margin-top:", ";}"], /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('7px'));
-const List = /*#__PURE__*/_styled.ul.withConfig({
-  displayName: "styles__List",
-  componentId: "sc-1peafop-1"
-})(["position:absolute;border:", " solid ", ";border-radius:", ";background-color:", ";margin-top:", ";min-width:", ";max-width:", ";padding:0;-moz-box-shadow:", ";-webkit-box-shadow:", ";box-shadow:", ";overflow:hidden;z-index:1;", " li{list-style:none;min-height:", ";display:flex;transition-duration:0.3s;&:hover{background-color:", ";cursor:pointer;}&.danger{border-top:", " solid ", ";a{color:", ";}}&.disabled{a{color:", ";pointer-events:none;}&:hover{background-color:transparent;}}a{width:100%;display:flex;align-items:center;padding:0 ", ";color:", ";text-decoration:none;white-space:nowrap;span{display:table-cell;overflow:hidden;text-overflow:ellipsis;}}}"], field.borderWidth, field.borderColor, field.borderRadius, field.backgroundColor, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('200px'), /*#__PURE__*/rem('250px'), field.boxShadow, field.boxShadow, field.boxShadow, props => props.rowIndex != undefined && css`
+const ActionsMenuStyle$1 = styled.div`
+  height: ${/*#__PURE__*/rem('50px')};
+
+  button {
+    margin-top: ${/*#__PURE__*/rem('7px')};
+  }
+`;
+const List = styled.ul`
+  position: absolute;
+  border: ${field.borderWidth} solid ${field.borderColor};
+  border-radius: ${field.borderRadius};
+  background-color: ${field.backgroundColor};
+  margin-top: ${/*#__PURE__*/rem('5px')};
+  min-width: ${/*#__PURE__*/rem('200px')};
+  max-width: ${/*#__PURE__*/rem('250px')};
+  padding: 0;
+  -moz-box-shadow: ${field.boxShadow};
+  -webkit-box-shadow: ${field.boxShadow};
+  box-shadow: ${field.boxShadow};
+  overflow: hidden;
+  z-index: 1;
+
+  ${props => props.rowIndex != undefined && css`
       --margin: ${`calc(${rem('45px')} + ${rem('50px')} * ${props.rowIndex} + ${rem('42px')})`};
       top: var(--margin);
       right: ${rem('5px')};
-    `, /*#__PURE__*/rem('45px'), field.hoverBorderColor, field.borderWidth, field.borderColor, field.errorBorderColor, field.disabledColor, /*#__PURE__*/rem('20px'), field.color);
+    `}
+
+  li {
+    list-style: none;
+    min-height: ${/*#__PURE__*/rem('45px')};
+    display: flex;
+    transition-duration: 0.3s;
+
+    &:hover {
+      background-color: ${field.hoverBorderColor};
+      cursor: pointer;
+    }
+
+    &.danger {
+      border-top: ${field.borderWidth} solid ${field.borderColor};
+
+      a {
+        color: ${field.errorBorderColor};
+      }
+    }
+
+    &.disabled {
+      a {
+        color: ${field.disabledColor};
+        pointer-events: none;
+      }
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    a {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      padding: 0 ${/*#__PURE__*/rem('20px')};
+      color: ${field.color};
+      text-decoration: none;
+      white-space: nowrap;
+
+      span {
+        display: table-cell;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+`;
 
 const ActionMenuList = props => {
   const {
@@ -2331,10 +2878,31 @@ const ActionsMenu = props => {
   }) : null);
 };
 
-const CardValueStyle = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__CardValueStyle",
-  componentId: "sc-1ki7jdk-0"
-})(["border:", " solid ", ";border-radius:", ";background-color:", ";display:flex;flex-direction:column;padding:", ";overflow-x:auto;> span{display:block;margin-top:", ";font-size:", ";font-weight:", ";line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}a,button{margin-top:", ";}"], field.borderWidth, field.borderColor, field.borderRadius, colors.white, /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('32px'), typography.semiBold, /*#__PURE__*/rem('20px'));
+const CardValueStyle = styled.div`
+  border: ${field.borderWidth} solid ${field.borderColor};
+  border-radius: ${field.borderRadius};
+  background-color: ${colors.white};
+  display: flex;
+  flex-direction: column;
+  padding: ${/*#__PURE__*/rem('15px')};
+  overflow-x: auto;
+
+  > span {
+    display: block;
+    margin-top: ${/*#__PURE__*/rem('5px')};
+    font-size: ${/*#__PURE__*/rem('32px')};
+    font-weight: ${typography.semiBold};
+    line-height: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  a,
+  button {
+    margin-top: ${/*#__PURE__*/rem('20px')};
+  }
+`;
 
 const CardValue = props => {
   const {
@@ -2363,30 +2931,118 @@ const CardValue = props => {
   }));
 };
 
-const EmptyTableWrapper = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__EmptyTableWrapper",
-  componentId: "sc-1dgsb9l-0"
-})(["position:relative;"]);
-const EmptyTableHead = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__EmptyTableHead",
-  componentId: "sc-1dgsb9l-1"
-})(["border-width:", ";border-style:solid;border-color:", ";border-radius:", " ", " 0 0;height:", ";display:flex;align-items:center;font-size:", ";font-weight:", ";color:", ";> div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none;flex:1;padding:0 ", ";font-size:", ";font-weight:", ";color:", ";&:first-child,&:nth-child(2){display:initial;}@media ", "{&:nth-child(3){display:initial;}}@media ", "{&:nth-child(4){display:initial;}}@media ", "{display:initial;}}"], props => props.border ? field.borderWidth : `0 0 ${field.borderWidth} 0`, colors.grey200, field.borderRadius, field.borderRadius, /*#__PURE__*/rem('50px'), typography.fontSizeSm, typography.semiBold, colors.grey400, /*#__PURE__*/rem('15px'), typography.fontSizeSm, typography.semiBold, colors.grey400, device.s, device.m, device.l);
-const EmptyTableBody = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__EmptyTableBody",
-  componentId: "sc-1dgsb9l-2"
-})(["border-width:", ";border-style:solid;border-color:", ";border-radius:0 0 ", " ", ";"], props => props.border ? `0 ${field.borderWidth} ${field.borderWidth} ${field.borderWidth}` : 0, colors.grey200, field.borderRadius, field.borderRadius);
-const EmptyTableRow = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__EmptyTableRow",
-  componentId: "sc-1dgsb9l-3"
-})(["height:", ";display:flex;align-items:center;&:not(:last-child){border-bottom:", " solid ", ";}> div{display:none;flex:1;padding:0 ", ";&:first-child,&:nth-child(2){display:inherit;}@media ", "{&:nth-child(3){display:inherit;}}@media ", "{&:nth-child(4){display:inherit;}}@media ", "{display:inherit;}}"], /*#__PURE__*/rem('50px'), field.borderWidth, colors.grey200, /*#__PURE__*/rem('15px'), device.s, device.m, device.l);
-const EmptyTableCellText = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__EmptyTableCellText",
-  componentId: "sc-1dgsb9l-4"
-})(["background-color:", ";width:100%;height:", ";"], colors.grey200, /*#__PURE__*/rem('15px'));
-const EmptyTableOverlay = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__EmptyTableOverlay",
-  componentId: "sc-1dgsb9l-5"
-})(["position:absolute;bottom:0;background-image:linear-gradient( to bottom,", ",", " );width:100%;height:calc(100% - ", ");display:flex;justify-content:center;align-items:flex-end;padding:0 ", " ", " ", ";text-align:center;color:", ";"], /*#__PURE__*/rgba(colors.white, 0), /*#__PURE__*/rgba(colors.white, 1), /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), colors.grey400);
+const EmptyTableWrapper = styled.div`
+  position: relative;
+`;
+const EmptyTableHead = styled.div`
+  border-width: ${props => props.border ? field.borderWidth : `0 0 ${field.borderWidth} 0`};
+  border-style: solid;
+  border-color: ${colors.grey200};
+  border-radius: ${field.borderRadius} ${field.borderRadius} 0 0;
+  height: ${/*#__PURE__*/rem('50px')};
+  display: flex;
+  align-items: center;
+  font-size: ${typography.fontSizeSm};
+  font-weight: ${typography.semiBold};
+  color: ${colors.grey400};
+
+  > div {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: none;
+    flex: 1;
+    padding: 0 ${/*#__PURE__*/rem('15px')};
+    font-size: ${typography.fontSizeSm};
+    font-weight: ${typography.semiBold};
+    color: ${colors.grey400};
+
+    &:first-child,
+    &:nth-child(2) {
+      display: initial;
+    }
+
+    @media ${device.s} {
+      &:nth-child(3) {
+        display: initial;
+      }
+    }
+
+    @media ${device.m} {
+      &:nth-child(4) {
+        display: initial;
+      }
+    }
+
+    @media ${device.l} {
+      display: initial;
+    }
+  }
+`;
+const EmptyTableBody = styled.div`
+  border-width: ${props => props.border ? `0 ${field.borderWidth} ${field.borderWidth} ${field.borderWidth}` : 0};
+  border-style: solid;
+  border-color: ${colors.grey200};
+  border-radius: 0 0 ${field.borderRadius} ${field.borderRadius};
+`;
+const EmptyTableRow = styled.div`
+  height: ${/*#__PURE__*/rem('50px')};
+  display: flex;
+  align-items: center;
+
+  &:not(:last-child) {
+    border-bottom: ${field.borderWidth} solid ${colors.grey200};
+  }
+
+  > div {
+    display: none;
+    flex: 1;
+    padding: 0 ${/*#__PURE__*/rem('15px')};
+
+    &:first-child,
+    &:nth-child(2) {
+      display: inherit;
+    }
+
+    @media ${device.s} {
+      &:nth-child(3) {
+        display: inherit;
+      }
+    }
+
+    @media ${device.m} {
+      &:nth-child(4) {
+        display: inherit;
+      }
+    }
+
+    @media ${device.l} {
+      display: inherit;
+    }
+  }
+`;
+const EmptyTableCellText = styled.div`
+  background-color: ${colors.grey200};
+  width: 100%;
+  height: ${/*#__PURE__*/rem('15px')};
+`;
+const EmptyTableOverlay = styled.div`
+  position: absolute;
+  bottom: 0;
+  background-image: linear-gradient(
+    to bottom,
+    ${/*#__PURE__*/rgba(colors.white, 0)},
+    ${/*#__PURE__*/rgba(colors.white, 1)}
+  );
+  width: 100%;
+  height: calc(100% - ${/*#__PURE__*/rem('50px')});
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 0 ${/*#__PURE__*/rem('15px')} ${/*#__PURE__*/rem('15px')} ${/*#__PURE__*/rem('15px')};
+  text-align: center;
+  color: ${colors.grey400};
+`;
 
 const EmptyTable = props => {
   let rows = [];
@@ -2416,10 +3072,25 @@ const EmptyTable = props => {
   }, rows));
 };
 
-const FooterStyle = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__FooterStyle",
-  componentId: "sc-1xdsng6-0"
-})(["position:relative;margin-top:", ";max-width:100%;display:flex;justify-content:center;> button{min-width:", ";&:not(:last-child){margin-right:", ";}}@media ", "{justify-content:flex-end;}"], /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('5px'), device.s);
+const FooterStyle = styled.div`
+  position: relative;
+  margin-top: ${/*#__PURE__*/rem('50px')};
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+
+  > button {
+    min-width: ${/*#__PURE__*/rem('100px')};
+
+    &:not(:last-child) {
+      margin-right: ${/*#__PURE__*/rem('5px')};
+    }
+  }
+
+  @media ${device.s} {
+    justify-content: flex-end;
+  }
+`;
 
 const ModalFooter = props => {
   const {
@@ -2442,22 +3113,47 @@ const ModalFooter = props => {
   }), children);
 };
 
-const Wrapper$7 = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__Wrapper",
-  componentId: "sc-d2fn4g-0"
-})(["--borderColor:", ";--backgroundColor:", ";--dark:", ";", " ", " ", " border-width:", ";border-style:solid;border-color:var(--borderColor);border-radius:", ";background-color:var(--backgroundColor);padding:", ";div{&:first-child{flex:1;}p{margin:0;}}", ""], field.borderColor, colors.purple50, colors.purple400, props => props.color === 'grey' && css`
+const Wrapper$7 = styled.div`
+  --borderColor: ${field.borderColor};
+  --backgroundColor: ${colors.purple50};
+  --dark: ${colors.purple400};
+
+  ${props => props.color === 'grey' && css`
       --borderColor: ${field.borderColor};
       --backgroundColor: ${colors.purple50};
       --dark: ${colors.purple400};
-    `, props => props.color === 'green' && css`
+    `}
+
+  ${props => props.color === 'green' && css`
       --borderColor: ${field.successBorderColor};
       --backgroundColor: ${field.successBackgroundColor};
       --dark: ${colors.green900};
-    `, props => props.color === 'red' && css`
+    `}
+
+  ${props => props.color === 'red' && css`
       --borderColor: ${field.errorBorderColor};
       --backgroundColor: ${field.errorBackgroundColor};
       --dark: ${colors.red800};
-    `, field.borderWidth, field.borderRadius, /*#__PURE__*/rem('15px'), props => props.buttonValue && css`
+    `}
+
+  border-width: ${field.borderWidth};
+  border-style: solid;
+  border-color: var(--borderColor);
+  border-radius: ${field.borderRadius};
+  background-color: var(--backgroundColor);
+  padding: ${/*#__PURE__*/rem('15px')};
+
+  div {
+    &:first-child {
+      flex: 1;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  ${props => props.buttonValue && css`
       button {
         margin: ${rem('30px')} 0 0 0;
         border: 0;
@@ -2489,7 +3185,8 @@ const Wrapper$7 = /*#__PURE__*/_styled.div.withConfig({
           margin: 0 0 0 ${rem('30px')};
         }
       }
-    `);
+    `}
+`;
 
 const NoteCard = props => {
   const {
@@ -2514,18 +3211,225 @@ function hasValue(value) {
   return value !== undefined && value !== null;
 }
 
-const TableWrapper = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__TableWrapper",
-  componentId: "sc-vmoy3z-0"
-})(["position:relative;"]);
-const OverflowWrapper = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__OverflowWrapper",
-  componentId: "sc-vmoy3z-1"
-})(["@media ", "{display:block;border-radius:", ";background:linear-gradient( to right,", " 30%,rgba(255,255,255,0) ),linear-gradient(to right,rgba(255,255,255,0),", " 70%) 0 100%,radial-gradient( farthest-side at 0% 50%,rgba(0,0,0,0.2),rgba(0,0,0,0) ),radial-gradient( farthest-side at 100% 50%,rgba(0,0,0,0.2),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-color:", ";background-size:", " 100%,", " 100%,", " 100%,", " 100%;background-position:0 0,100%,0 0,100%;background-attachment:local,local,scroll,scroll;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}"], device.s, field.borderRadius, colors.white, colors.white, colors.white, /*#__PURE__*/rem('40px'), /*#__PURE__*/rem('40px'), /*#__PURE__*/rem('14px'), /*#__PURE__*/rem('14px'));
-const Table = /*#__PURE__*/_styled.table.withConfig({
-  displayName: "styles__Table",
-  componentId: "sc-vmoy3z-2"
-})(["width:100%;border-width:0;border-style:solid;border-color:", ";border-radius:", ";border-spacing:0;white-space:nowrap;@media ", "{border-width:", ";}th,td{height:", ";padding:0 ", ";&.center{text-align:center;> div{justify-content:center;}}&.right{text-align:right;> div{justify-content:flex-end;}}&.thin{@media ", "{max-width:min-content;}}&.vkai,&.tkai{text-align:right;> div{justify-content:flex-end;}}&.avatar > div{display:flex;align-items:center;.avatar-img{margin-right:", ";}}}th{font-size:", ";&:first-child{border-top-left-radius:", ";}&:last-child{border-top-right-radius:", ";}}tr{border:", " solid ", ";border-radius:", ";position:relative;&:not(:last-child){margin-bottom:", ";}@media ", "{border:0;}}thead{border:none;clip:rect(0 0 0 0);height:", ";margin:", ";overflow:hidden;padding:0;position:absolute;width:", ";@media ", "{display:contents;font-weight:", ";color:", ";text-align:left;}}tbody{tr{display:block;transition-duration:", ";&:hover{background-color:", ";td.menu{button{opacity:1;}}}@media ", "{display:table-row;}}td{border-top:", " solid ", ";height:inherit;min-height:", ";padding:", ";display:flex;justify-content:flex-end;align-items:center;> div{margin-left:", ";height:100%;display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;text-align:right;> span{display:none;&:first-child,&:last-child{display:inherit;}}}img{min-width:", ";min-height:", ";}a{display:flex;align-items:center;color:", ";text-decoration-color:", ";}&:first-child{border:0;}&:before{position:absolute;left:", ";content:attr(data-label);font-weight:", ";text-transform:capitalize;", "}&.tkai,&.vkai{svg{float:right;margin-left:", ";width:auto;min-width:", ";max-height:", ";}}.avatar-img{display:none;}.tag{margin:0;&:not(:first-child){display:none;}}.button{height:", ";}&.menu{padding:0 ", " 0 0;button{margin-top:", ";transition:", ";}ul{top:", ";margin-left:", ";}}@media ", "{display:table-cell;height:", ";padding:0 ", ";> div{position:relative;margin-left:0;display:flex-start;justify-content:flex-start;text-align:left;> span{display:inherit;}}&:first-child{border-top:", " solid ", ";}&:before{content:'';}&.tkai,&.vkai{max-width:", ";}.avatar-img{display:inherit;}.tag{&:not(:first-child){display:inherit;}&:not(:last-child){margin-right:", ";}}&.menu{width:", ";button{opacity:0;}}}}}"], colors.grey200, field.borderRadius, device.s, props => props.border ? field.borderWidth : 0, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('15px'), typography.fontSizeSm, field.borderRadius, field.borderRadius, field.borderWidth, colors.grey200, field.borderRadius, /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('-1px'), /*#__PURE__*/rem('1px'), device.s, typography.semiBold, colors.grey400, misc.transitionDuration, props => props.loadingState ? 'transparent' : colors.grey50, device.s, field.borderWidth, colors.grey200, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), colors.black, colors.grey400, /*#__PURE__*/rem('15px'), typography.semiBold, props => props.loadingState && css`
+const TableWrapper = styled.div`
+  position: relative;
+`;
+const OverflowWrapper = styled.div`
+  @media ${device.s} {
+    display: block;
+    border-radius: ${field.borderRadius};
+    background:
+      linear-gradient(to right, ${colors.white} 30%, rgba(255, 255, 255, 0)),
+      linear-gradient(to right, rgba(255, 255, 255, 0), ${colors.white} 70%) 0
+        100%,
+      radial-gradient(
+        farthest-side at 0% 50%,
+        rgba(0, 0, 0, 0.2),
+        rgba(0, 0, 0, 0)
+      ),
+      radial-gradient(
+          farthest-side at 100% 50%,
+          rgba(0, 0, 0, 0.2),
+          rgba(0, 0, 0, 0)
+        )
+        0 100%;
+    background-repeat: no-repeat;
+    background-color: ${colors.white};
+    background-size:
+      ${/*#__PURE__*/rem('40px')} 100%,
+      ${/*#__PURE__*/rem('40px')} 100%,
+      ${/*#__PURE__*/rem('14px')} 100%,
+      ${/*#__PURE__*/rem('14px')} 100%;
+    background-position:
+      0 0,
+      100%,
+      0 0,
+      100%;
+    background-attachment: local, local, scroll, scroll;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    -webkit-scrollbar-width: none;
+    -moz-scrollbar-width: none;
+    -ms-scrollbar-width: none;
+    scrollbar-width: none;
+  }
+`;
+const Table = styled.table`
+  width: 100%;
+  border-width: 0;
+  border-style: solid;
+  border-color: ${colors.grey200};
+  border-radius: ${field.borderRadius};
+  border-spacing: 0;
+  white-space: nowrap;
+
+  @media ${device.s} {
+    border-width: ${props => props.border ? field.borderWidth : 0};
+  }
+
+  th,
+  td {
+    height: ${/*#__PURE__*/rem('50px')};
+    padding: 0 ${/*#__PURE__*/rem('15px')};
+
+    &.center {
+      text-align: center;
+
+      > div {
+        justify-content: center;
+      }
+    }
+
+    &.right {
+      text-align: right;
+
+      > div {
+        justify-content: flex-end;
+      }
+    }
+
+    &.thin {
+      @media ${device.s} {
+        max-width: min-content;
+      }
+    }
+
+    &.vkai,
+    &.tkai {
+      text-align: right;
+
+      > div {
+        justify-content: flex-end;
+      }
+    }
+
+    &.avatar > div {
+      display: flex;
+      align-items: center;
+
+      .avatar-img {
+        margin-right: ${/*#__PURE__*/rem('15px')};
+      }
+    }
+  }
+
+  th {
+    font-size: ${typography.fontSizeSm};
+
+    &:first-child {
+      border-top-left-radius: ${field.borderRadius};
+    }
+
+    &:last-child {
+      border-top-right-radius: ${field.borderRadius};
+    }
+  }
+
+  tr {
+    border: ${field.borderWidth} solid ${colors.grey200};
+    border-radius: ${field.borderRadius};
+    position: relative;
+
+    &:not(:last-child) {
+      margin-bottom: ${/*#__PURE__*/rem('15px')};
+    }
+
+    @media ${device.s} {
+      border: 0;
+    }
+  }
+
+  thead {
+    border: none;
+    clip: rect(0 0 0 0);
+    height: ${/*#__PURE__*/rem('1px')};
+    margin: ${/*#__PURE__*/rem('-1px')};
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: ${/*#__PURE__*/rem('1px')};
+
+    @media ${device.s} {
+      display: contents;
+      font-weight: ${typography.semiBold};
+      color: ${colors.grey400};
+      text-align: left;
+    }
+  }
+
+  tbody {
+    tr {
+      display: block;
+      transition-duration: ${misc.transitionDuration};
+
+      &:hover {
+        background-color: ${props => props.loadingState ? 'transparent' : colors.grey50};
+
+        td.menu {
+          button {
+            opacity: 1;
+          }
+        }
+      }
+
+      @media ${device.s} {
+        display: table-row;
+      }
+    }
+
+    td {
+      border-top: ${field.borderWidth} solid ${colors.grey200};
+      height: inherit;
+      min-height: ${/*#__PURE__*/rem('50px')};
+      padding: ${/*#__PURE__*/rem('15px')};
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      > div {
+        margin-left: ${/*#__PURE__*/rem('100px')};
+        height: 100%;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-align: right;
+
+        > span {
+          display: none;
+
+          &:first-child,
+          &:last-child {
+            display: inherit;
+          }
+        }
+      }
+
+      img {
+        min-width: ${/*#__PURE__*/rem('30px')};
+        min-height: ${/*#__PURE__*/rem('30px')};
+      }
+
+      a {
+        display: flex;
+        align-items: center;
+        color: ${colors.black};
+        text-decoration-color: ${colors.grey400};
+      }
+
+      &:first-child {
+        border: 0;
+      }
+
+      &:before {
+        position: absolute;
+        left: ${/*#__PURE__*/rem('15px')};
+        content: attr(data-label);
+        font-weight: ${typography.semiBold};
+        text-transform: capitalize;
+
+        ${props => props.loadingState && css`
             width: ${rem('75px')};
             height: ${rem('15px')};
             background: #f6f7f8;
@@ -2543,11 +3447,133 @@ const Table = /*#__PURE__*/_styled.table.withConfig({
             animation-timing-function: linear;
             animation-iteration-count: infinite;
             animation-duration: 1.5s;
-          `, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('22px'), /*#__PURE__*/rem('22px'), /*#__PURE__*/rem('34px'), /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('5px'), misc.transitionDuration, /*#__PURE__*/rem('36px'), /*#__PURE__*/rem('-170px'), device.s, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), field.borderWidth, colors.grey200, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('40px'));
-const SkeletonCell = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__SkeletonCell",
-  componentId: "sc-vmoy3z-3"
-})(["@keyframes placeholderSkeleton{0%{background-position:", " 0;}100%{background-position:", " 0;}}width:100%;height:", " !important;background:#f6f7f8;background-image:-webkit-linear-gradient( left,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100% );background-repeat:no-repeat;background-size:", " 100%;animation-fill-mode:forwards;animation-name:placeholderSkeleton;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:1.5s;"], /*#__PURE__*/rem('-800px'), /*#__PURE__*/rem('800px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('800px'));
+          `}
+      }
+
+      &.tkai,
+      &.vkai {
+        svg {
+          float: right;
+          margin-left: ${/*#__PURE__*/rem('5px')};
+          width: auto;
+          min-width: ${/*#__PURE__*/rem('22px')};
+          max-height: ${/*#__PURE__*/rem('22px')};
+        }
+      }
+
+      .avatar-img {
+        display: none;
+      }
+
+      .tag {
+        margin: 0;
+
+        &:not(:first-child) {
+          display: none;
+        }
+      }
+
+      .button {
+        height: ${/*#__PURE__*/rem('34px')};
+      }
+
+      &.menu {
+        padding: 0 ${/*#__PURE__*/rem('10px')} 0 0;
+
+        button {
+          margin-top: ${/*#__PURE__*/rem('5px')};
+          transition: ${misc.transitionDuration};
+        }
+
+        ul {
+          top: ${/*#__PURE__*/rem('36px')};
+          margin-left: ${/*#__PURE__*/rem('-170px')};
+        }
+      }
+
+      @media ${device.s} {
+        display: table-cell;
+        height: ${/*#__PURE__*/rem('50px')};
+        padding: 0 ${/*#__PURE__*/rem('15px')};
+
+        > div {
+          position: relative;
+          margin-left: 0;
+          display: flex-start;
+          justify-content: flex-start;
+          text-align: left;
+
+          > span {
+            display: inherit;
+          }
+        }
+
+        &:first-child {
+          border-top: ${field.borderWidth} solid ${colors.grey200};
+        }
+
+        &:before {
+          content: '';
+        }
+
+        &.tkai,
+        &.vkai {
+          max-width: ${/*#__PURE__*/rem('100px')};
+        }
+
+        .avatar-img {
+          display: inherit;
+        }
+
+        .tag {
+          &:not(:first-child) {
+            display: inherit;
+          }
+
+          &:not(:last-child) {
+            margin-right: ${/*#__PURE__*/rem('5px')};
+          }
+        }
+
+        &.menu {
+          width: ${/*#__PURE__*/rem('40px')};
+
+          button {
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+`;
+const SkeletonCell = styled.div`
+  @keyframes placeholderSkeleton {
+    0% {
+      background-position: ${/*#__PURE__*/rem('-800px')} 0;
+    }
+    100% {
+      background-position: ${/*#__PURE__*/rem('800px')} 0;
+    }
+  }
+
+  width: 100%;
+  height: ${/*#__PURE__*/rem('15px')} !important;
+  background: #f6f7f8;
+  background-image: -webkit-linear-gradient(
+    left,
+    #f6f7f8 0%,
+    #edeef1 20%,
+    #f6f7f8 40%,
+    #f6f7f8 100%
+  );
+  background-repeat: no-repeat;
+  background-size: ${/*#__PURE__*/rem('800px')} 100%;
+  animation-fill-mode: forwards;
+  animation-name: placeholderSkeleton;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-duration: 1.5s;
+`;
 
 const Table$1 = props => {
   const {
@@ -2657,17 +3683,298 @@ const Table$1 = props => {
     handleOptionClick: () => {
       setIsVisible(false);
     }
-  })));
-};
+  })));
+};
+
+const Table$2 = styled.table`
+  position: relative;
+  width: 100%;
+  border-width: ${props => props.border ? field.borderWidth : 0};
+  border-style: solid;
+  border-color: ${colors.grey200};
+  border-radius: ${field.borderRadius};
+  border-spacing: 0;
+  white-space: nowrap;
+  table-layout: ${props => props.layout};
+
+  th,
+  td {
+    height: ${/*#__PURE__*/rem('50px')};
+    padding: 0 ${/*#__PURE__*/rem('15px')};
+
+    &.center {
+      text-align: center;
+
+      > div {
+        justify-content: center;
+      }
+    }
+
+    &.right {
+      text-align: right;
+
+      > div {
+        justify-content: flex-end;
+      }
+    }
+
+    &.thin {
+      @media ${device.s} {
+        max-width: min-content;
+      }
+    }
+
+    &.kai {
+      text-align: right;
+
+      > div {
+        justify-content: flex-end;
+      }
+    }
+
+    &.avatar > div {
+      display: flex;
+      align-items: center;
+
+      .avatar-img {
+        margin-right: ${/*#__PURE__*/rem('15px')};
+      }
+    }
+  }
+
+  th {
+    font-size: 0.85rem;
+
+    &:first-child {
+      border-top-left-radius: ${field.borderRadius};
+    }
+
+    &:last-child {
+      border-top-right-radius: ${field.borderRadius};
+    }
+  }
+
+  tr {
+    border: ${field.borderWidth} solid ${colors.grey200};
+    border-radius: ${field.borderRadius};
+    position: relative;
+
+    &:not(:last-child) {
+      margin-bottom: ${/*#__PURE__*/rem('15px')};
+    }
+
+    @media ${device.s} {
+      border: 0;
+    }
+  }
+
+  thead {
+    border: none;
+    clip: rect(0 0 0 0);
+    height: ${/*#__PURE__*/rem('1px')};
+    margin: ${/*#__PURE__*/rem('-1px')};
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: ${/*#__PURE__*/rem('1px')};
+
+    @media ${device.s} {
+      display: contents;
+      font-weight: ${typography.semiBold};
+      color: ${colors.grey400};
+      text-align: left;
+    }
+  }
+
+  tbody {
+    tr {
+      display: block;
+      transition-duration: ${misc.transitionDuration};
+
+      &:hover {
+        background-color: ${colors.grey50};
+
+        td {
+          &.drag-handle {
+            svg {
+              fill: ${colors.grey200};
+            }
+          }
+
+          &.menu {
+            button {
+              opacity: 1;
+            }
+          }
+        }
+      }
+
+      @media ${device.s} {
+        display: table-row;
+      }
+    }
+
+    td {
+      border-top: ${field.borderWidth} solid ${colors.grey200};
+      height: inherit;
+      min-height: ${/*#__PURE__*/rem('50px')};
+      padding: ${/*#__PURE__*/rem('15px')};
+      display: flex;
+      justify-content: flex-end;
+
+      &.drag-handle {
+        > div {
+          width: min-content;
+        }
+
+        svg {
+          width: ${/*#__PURE__*/rem('30px')};
+          height: ${/*#__PURE__*/rem('30px')};
+          fill: ${colors.grey200};
+          transition-duration: ${misc.transitionDuration};
+        }
+      }
+
+      > div {
+        margin-left: ${/*#__PURE__*/rem('100px')};
+        height: 100%;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        flex-wrap: nowrap;
+        text-align: right;
+
+        > span {
+          display: none;
+
+          &:first-child,
+          &:last-child {
+            display: inherit;
+          }
+        }
+      }
+
+      img {
+        min-width: ${/*#__PURE__*/rem('30px')};
+        min-height: ${/*#__PURE__*/rem('30px')};
+      }
+
+      a {
+        display: flex;
+        align-items: center;
+        color: ${colors.black};
+        text-decoration-color: ${colors.grey400};
+      }
+
+      &:first-child {
+        border: 0;
+      }
+
+      &:before {
+        position: absolute;
+        left: ${/*#__PURE__*/rem('15px')};
+        content: attr(data-label);
+        font-weight: ${typography.semiBold};
+        text-transform: capitalize;
+      }
+
+      &.kai {
+        svg {
+          float: right;
+          width: auto;
+          min-width: ${/*#__PURE__*/rem('20px')};
+          max-height: ${/*#__PURE__*/rem('20px')};
+        }
+      }
+
+      .avatar-img {
+        display: none;
+      }
+
+      .tag {
+        margin: 0;
+
+        &:not(:first-child) {
+          display: none;
+        }
+      }
+
+      &.menu {
+        padding: 0 ${/*#__PURE__*/rem('10px')} 0 0;
+
+        button {
+          margin-top: ${/*#__PURE__*/rem('5px')};
+          transition: ${misc.transitionDuration};
+        }
+
+        ul {
+          top: ${/*#__PURE__*/rem('36px')};
+          margin-left: ${/*#__PURE__*/rem('-170px')};
+        }
+      }
+
+      @media ${device.s} {
+        display: table-cell;
+        height: ${/*#__PURE__*/rem('50px')};
+        padding: 0 ${/*#__PURE__*/rem('15px')};
+        align-items: center;
+
+        > div {
+          position: relative;
+          margin-left: 0;
+          display: flex-start;
+          justify-content: flex-start;
+          text-align: left;
 
-const Table$2 = /*#__PURE__*/_styled.table.withConfig({
-  displayName: "styles__Table",
-  componentId: "sc-1p618q0-0"
-})(["position:relative;width:100%;border-width:", ";border-style:solid;border-color:", ";border-radius:", ";border-spacing:0;white-space:nowrap;table-layout:", ";th,td{height:", ";padding:0 ", ";&.center{text-align:center;> div{justify-content:center;}}&.right{text-align:right;> div{justify-content:flex-end;}}&.thin{@media ", "{max-width:min-content;}}&.kai{text-align:right;> div{justify-content:flex-end;}}&.avatar > div{display:flex;align-items:center;.avatar-img{margin-right:", ";}}}th{font-size:0.85rem;&:first-child{border-top-left-radius:", ";}&:last-child{border-top-right-radius:", ";}}tr{border:", " solid ", ";border-radius:", ";position:relative;&:not(:last-child){margin-bottom:", ";}@media ", "{border:0;}}thead{border:none;clip:rect(0 0 0 0);height:", ";margin:", ";overflow:hidden;padding:0;position:absolute;width:", ";@media ", "{display:contents;font-weight:", ";color:", ";text-align:left;}}tbody{tr{display:block;transition-duration:", ";&:hover{background-color:", ";td{&.drag-handle{svg{fill:", ";}}&.menu{button{opacity:1;}}}}@media ", "{display:table-row;}}td{border-top:", " solid ", ";height:inherit;min-height:", ";padding:", ";display:flex;justify-content:flex-end;&.drag-handle{> div{width:min-content;}svg{width:", ";height:", ";fill:", ";transition-duration:", ";}}> div{margin-left:", ";height:100%;display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;text-align:right;> span{display:none;&:first-child,&:last-child{display:inherit;}}}img{min-width:", ";min-height:", ";}a{display:flex;align-items:center;color:", ";text-decoration-color:", ";}&:first-child{border:0;}&:before{position:absolute;left:", ";content:attr(data-label);font-weight:", ";text-transform:capitalize;}&.kai{svg{float:right;width:auto;min-width:", ";max-height:", ";}}.avatar-img{display:none;}.tag{margin:0;&:not(:first-child){display:none;}}&.menu{padding:0 ", " 0 0;button{margin-top:", ";transition:", ";}ul{top:", ";margin-left:", ";}}@media ", "{display:table-cell;height:", ";padding:0 ", ";align-items:center;> div{position:relative;margin-left:0;display:flex-start;justify-content:flex-start;text-align:left;> span{display:inherit;}}&:first-child{border-top:", " solid ", ";}&:before{content:'';}&.kai{max-width:", ";}.avatar-img{display:inherit;}.tag{&:not(:first-child){display:inherit;}&:not(:last-child){margin-right:", ";}}&.menu{width:", ";button{opacity:0;}}}}}"], props => props.border ? field.borderWidth : 0, colors.grey200, field.borderRadius, props => props.layout, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('15px'), field.borderRadius, field.borderRadius, field.borderWidth, colors.grey200, field.borderRadius, /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('-1px'), /*#__PURE__*/rem('1px'), device.s, typography.semiBold, colors.grey400, misc.transitionDuration, colors.grey50, colors.grey200, device.s, field.borderWidth, colors.grey200, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), colors.grey200, misc.transitionDuration, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), colors.black, colors.grey400, /*#__PURE__*/rem('15px'), typography.semiBold, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('5px'), misc.transitionDuration, /*#__PURE__*/rem('36px'), /*#__PURE__*/rem('-170px'), device.s, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), field.borderWidth, colors.grey200, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('40px'));
-const TableRow = /*#__PURE__*/_styled.tr.withConfig({
-  displayName: "styles__TableRow",
-  componentId: "sc-1p618q0-1"
-})(["&[data-rbd-draggable-id='", "']{position:absolute;display:table;width:100%;}"], props => props.draggableId);
+          > span {
+            display: inherit;
+          }
+        }
+
+        &:first-child {
+          border-top: ${field.borderWidth} solid ${colors.grey200};
+        }
+
+        &:before {
+          content: '';
+        }
+
+        &.kai {
+          max-width: ${/*#__PURE__*/rem('100px')};
+        }
+
+        .avatar-img {
+          display: inherit;
+        }
+
+        .tag {
+          &:not(:first-child) {
+            display: inherit;
+          }
+
+          &:not(:last-child) {
+            margin-right: ${/*#__PURE__*/rem('5px')};
+          }
+        }
+
+        &.menu {
+          width: ${/*#__PURE__*/rem('40px')};
+
+          button {
+            opacity: 0;
+          }
+        }
+      }
+    }
+  }
+`;
+const TableRow = styled.tr`
+  &[data-rbd-draggable-id='${props => props.draggableId}'] {
+    position: absolute;
+    display: table;
+    width: 100%;
+  }
+`;
 
 const TableDnD = props => {
   const {
@@ -2818,10 +4125,22 @@ const TableDnD = props => {
   );
 };
 
-const Wrapper$8 = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__Wrapper",
-  componentId: "sc-mbja2a-0"
-})(["display:inline-block;> label{margin-bottom:", ";color:", ";span{color:", ";}}&:not(:last-child){margin-bottom:", ";}"], /*#__PURE__*/rem('5px'), props => props.error ? field.errorBorderColor : colors.grey500, props => props.error ? field.errorBorderColor : field.color, /*#__PURE__*/rem('15px'));
+const Wrapper$8 = styled.div`
+  display: inline-block;
+
+  > label {
+    margin-bottom: ${/*#__PURE__*/rem('5px')};
+    color: ${props => props.error ? field.errorBorderColor : colors.grey500};
+
+    span {
+      color: ${props => props.error ? field.errorBorderColor : field.color};
+    }
+  }
+
+  &:not(:last-child) {
+    margin-bottom: ${/*#__PURE__*/rem('15px')};
+  }
+`;
 
 const FormGroup = props => {
   const {
@@ -2838,18 +4157,81 @@ const FormGroup = props => {
   }), children);
 };
 
-const Wrapper$9 = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__Wrapper",
-  componentId: "sc-124afcu-0"
-})(["border:", " solid ", ";border-radius:", ";max-width:max-content;height:", ";display:flex;overflow:hidden;button,input{&:disabled{cursor:inherit;background-color:", ";svg{fill:", ";}&:hover{pointer-events:none;}}}"], field.borderWidth, field.borderColor, field.borderRadius, field.height, field.disabledBackgroundColor, field.disabledColor);
-const Input = /*#__PURE__*/_styled.input.withConfig({
-  displayName: "styles__Input",
-  componentId: "sc-124afcu-1"
-})(["border:0;width:", ";height:", ";padding:", ";font-family:inherit;font-size:", ";text-align:center;-moz-appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&:focus{outline:none;}&:invalid{box-shadow:none;background-color:", ";}"], props => props.max != null && props.max.toString().length > 5 ? props.max.toString().length * 10 + 20 + 'px' : '70px', field.height, /*#__PURE__*/rem('10px'), typography.defaultSize, field.errorBackgroundColor);
-const Button$1 = /*#__PURE__*/_styled.button.withConfig({
-  displayName: "styles__Button",
-  componentId: "sc-124afcu-2"
-})(["width:", ";height:", ";border:0;background-color:", ";cursor:pointer;transition-duration:", ";&.remove-button{border-right:", " solid ", ";}&.add-button{border-left:", " solid ", ";}svg{width:auto;height:", ";fill:", ";}&:hover{background-color:", ";}"], field.height, field.height, field.borderColor, misc.transitionDuration, field.borderWidth, field.borderColor, field.borderWidth, field.borderColor, /*#__PURE__*/rem('20px'), colors.purple300, field.hoverBorderColor);
+const Wrapper$9 = styled.div`
+  border: ${field.borderWidth} solid ${field.borderColor};
+  border-radius: ${field.borderRadius};
+  max-width: max-content;
+  height: ${field.height};
+  display: flex;
+  overflow: hidden;
+
+  button,
+  input {
+    &:disabled {
+      cursor: inherit;
+      background-color: ${field.disabledBackgroundColor};
+
+      svg {
+        fill: ${field.disabledColor};
+      }
+
+      &:hover {
+        pointer-events: none;
+      }
+    }
+  }
+`;
+const Input = styled.input`
+  border: 0;
+  width: ${props => props.max != null && props.max.toString().length > 5 ? props.max.toString().length * 10 + 20 + 'px' : '70px'};
+  height: ${field.height};
+  padding: ${/*#__PURE__*/rem('10px')};
+  font-family: inherit;
+  font-size: ${typography.defaultSize};
+  text-align: center;
+  -moz-appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:invalid {
+    box-shadow: none;
+    background-color: ${field.errorBackgroundColor};
+  }
+`;
+const Button$1 = styled.button`
+  width: ${field.height};
+  height: ${field.height};
+  border: 0;
+  background-color: ${field.borderColor};
+  cursor: pointer;
+  transition-duration: ${misc.transitionDuration};
+
+  &.remove-button {
+    border-right: ${field.borderWidth} solid ${field.borderColor};
+  }
+
+  &.add-button {
+    border-left: ${field.borderWidth} solid ${field.borderColor};
+  }
+
+  svg {
+    width: auto;
+    height: ${/*#__PURE__*/rem('20px')};
+    fill: ${colors.purple300};
+  }
+
+  &:hover {
+    background-color: ${field.hoverBorderColor};
+  }
+`;
 
 const NumberInputSpinner = props => {
   const {
@@ -2910,14 +4292,91 @@ const NumberInputSpinner = props => {
   })));
 };
 
-const Steps = /*#__PURE__*/_styled.ul.withConfig({
-  displayName: "styles__Steps",
-  componentId: "sc-1s2dhfy-0"
-})(["margin:0;width:100%;padding:0;display:flex;"]);
-const Step = /*#__PURE__*/_styled.li.withConfig({
-  displayName: "styles__Step",
-  componentId: "sc-1s2dhfy-1"
-})(["list-style:none;flex:1;position:relative;height:", ";display:flex;justify-content:center;align-items:center;padding-right:", ";text-align:center;&:before,&:after{content:'';position:absolute;top:0;border:0 solid ", ";border-width:", " ", ";width:0;height:0;}&:before{left:", ";border-left-color:transparent;}&:after{left:calc(100% - ", ");border-color:transparent;border-left-color:", ";}&:first-child:before{border:none;}&:last-child:after{border:none;}&:first-child{overflow:hidden;> div{border-radius:", " 0 0 ", ";}}&:last-child{padding-right:0;> div{border-radius:0 ", " ", " 0;}}> div{background-color:", ";width:100%;height:100%;display:flex;justify-content:center;align-items:center;span{width:min-content;font-size:", ";color:", ";@media ", "{width:100%;font-size:", ";font-weight:", ";}}}"], /*#__PURE__*/rem('44px'), /*#__PURE__*/rem('18px'), props => props.active ? field.successBackgroundColor : field.borderColor, /*#__PURE__*/rem('22px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('-15px'), /*#__PURE__*/rem('18px'), props => props.active ? field.successBackgroundColor : field.borderColor, field.borderRadius, field.borderRadius, field.borderRadius, field.borderRadius, props => props.active ? field.successBackgroundColor : field.borderColor, typography.fontSizeSm, props => props.active ? colors.white : colors.purple300, device.s, typography.defaultSize, typography.semiBold);
+const Steps = styled.ul`
+  margin: 0;
+  width: 100%;
+  padding: 0;
+  display: flex;
+`;
+const Step = styled.li`
+  list-style: none;
+  flex: 1;
+  position: relative;
+  height: ${/*#__PURE__*/rem('44px')};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-right: ${/*#__PURE__*/rem('18px')};
+  text-align: center;
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    border: 0 solid
+      ${props => props.active ? field.successBackgroundColor : field.borderColor};
+    border-width: ${/*#__PURE__*/rem('22px')} ${/*#__PURE__*/rem('15px')};
+    width: 0;
+    height: 0;
+  }
+
+  &:before {
+    left: ${/*#__PURE__*/rem('-15px')};
+    border-left-color: transparent;
+  }
+
+  &:after {
+    left: calc(100% - ${/*#__PURE__*/rem('18px')});
+    border-color: transparent;
+    border-left-color: ${props => props.active ? field.successBackgroundColor : field.borderColor};
+  }
+
+  &:first-child:before {
+    border: none;
+  }
+
+  &:last-child:after {
+    border: none;
+  }
+
+  &:first-child {
+    overflow: hidden;
+
+    > div {
+      border-radius: ${field.borderRadius} 0 0 ${field.borderRadius};
+    }
+  }
+
+  &:last-child {
+    padding-right: 0;
+
+    > div {
+      border-radius: 0 ${field.borderRadius} ${field.borderRadius} 0;
+    }
+  }
+
+  > div {
+    background-color: ${props => props.active ? field.successBackgroundColor : field.borderColor};
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span {
+      width: min-content;
+      font-size: ${typography.fontSizeSm};
+      color: ${props => props.active ? colors.white : colors.purple300};
+
+      @media ${device.s} {
+        width: 100%;
+        font-size: ${typography.defaultSize};
+        font-weight: ${typography.semiBold};
+      }
+    }
+  }
+`;
 
 const WizardSteps = props => {
   const {
@@ -2937,7 +4396,7 @@ const WizardSteps = props => {
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, step.value))))));
 };
 
-const PaginationWrapper = _styled.div`
+const PaginationWrapper = styled.div`
   --size: ${/*#__PURE__*/rem('30px')};
 
   ul.pagination {
@@ -3063,7 +4522,7 @@ const PaginationControl = props => {
   }));
 };
 
-const Wrapper$a = _styled.div`
+const Wrapper$a = styled.div`
   min-height: ${props => props.variant === 'default' ? '50vh' : 'inherit'};
   display: flex;
   flex-direction: column;
@@ -3106,7 +4565,7 @@ const Error = props => {
   }) : /*#__PURE__*/React.createElement("span", null, "\xAF\\\\_(\u30C4)_/\xAF"), value && /*#__PURE__*/React.createElement("span", null, value));
 };
 
-const Wrapper$b = _styled.div`
+const Wrapper$b = styled.div`
   min-height: 50vh;
   display: flex;
   flex-direction: column;
@@ -5093,7 +6552,7 @@ const DataWarning = props => {
   }, icon, /*#__PURE__*/React.createElement("div", null, children));
 };
 
-const Wrapper$c = _styled.ul`
+const Wrapper$c = styled.ul`
   display: flex;
   flex-direction: ${props => props.type === 'column' ? 'column' : 'row'};
   position: relative;
@@ -5125,7 +6584,7 @@ const Wrapper$c = _styled.ul`
     margin-top: ${/*#__PURE__*/rem('10px')};
   }
 `;
-const Item = _styled.li`
+const Item = styled.li`
   --size: ${/*#__PURE__*/rem('24px')};
   display: flex;
   position: relative;
@@ -5233,7 +6692,7 @@ const RadioGroup = props => {
   }) : null);
 };
 
-const Wrapper$d = _styled.ul`
+const Wrapper$d = styled.ul`
   display: flex;
   flex-direction: ${props => props.type === 'column' ? 'column' : 'row'};
   position: relative;
@@ -5287,12 +6746,12 @@ const CheckboxGroup = props => {
   }) : null);
 };
 
-const Wrapper$e = _styled.div`
+const Wrapper$e = styled.div`
   label {
     margin-bottom: ${/*#__PURE__*/rem('5px')};
   }
 `;
-const Field = _styled.div`
+const Field = styled.div`
   display: flex;
   flex-wrap: wrap;
 
@@ -5503,22 +6962,88 @@ function HorizontalNav(props) {
   }));
 }
 
-const ModalOverlay = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__ModalOverlay",
-  componentId: "sc-16r6vcc-0"
-})(["position:fixed;top:0;left:0;background-color:", ";width:100vw;height:100vh;z-index:", ";"], /*#__PURE__*/rgba(colors.black, 0.8), props => props.zIndex ? props.zIndex : 10);
-const ModalWrapper = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__ModalWrapper",
-  componentId: "sc-16r6vcc-1"
-})(["position:fixed;top:0;left:0;width:100%;height:100vh;z-index:", ";overflow-x:hidden;overflow-y:auto;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;@media ", "{display:flex;justify-content:center;align-items:", ";}"], props => props.zIndex + 1, device.s, props => props.modalOverflow ? 'flex-start' : 'center');
-const ModalContainer = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__ModalContainer",
-  componentId: "sc-16r6vcc-2"
-})(["position:relative;background:", ";width:100%;min-height:0;padding:", ";word-wrap:break-word;transition-duration:", ";@media ", "{--spacing:", ";margin:var(--spacing);border-radius:", ";max-width:", ";padding:var(--spacing);&:after{content:'';position:absolute;bottom:calc(var(--spacing) * -1);width:", ";height:var(--spacing);}}"], colors.white, /*#__PURE__*/rem('15px'), misc.transitionDuration, device.s, /*#__PURE__*/rem('30px'), field.borderRadius, /*#__PURE__*/rem('860px'), /*#__PURE__*/rem('1px'));
-const ModalHeader = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__ModalHeader",
-  componentId: "sc-16r6vcc-3"
-})(["display:flex;h2{margin:0 0 ", " 0;font-size:", ";font-weight:", ";}button{display:none;position:absolute;top:0;right:0;margin:", " ", " 0 0;border:", " solid ", ";min-width:", ";height:", ";z-index:1;outline:none;@media ", "{display:inherit;}}"], /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('32px'), typography.semiBold, /*#__PURE__*/rem('-14px'), /*#__PURE__*/rem('-14px'), /*#__PURE__*/rem('2px'), colors.grey200, /*#__PURE__*/rem('28px'), /*#__PURE__*/rem('28px'), device.s);
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: ${/*#__PURE__*/rgba(colors.black, 0.8)};
+  width: 100vw;
+  height: 100vh;
+  z-index: ${props => props.zIndex ? props.zIndex : 10};
+`;
+const ModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: ${props => props.zIndex + 1};
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-scrollbar-width: none;
+  -moz-scrollbar-width: none;
+  -ms-scrollbar-width: none;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  @media ${device.s} {
+    display: flex;
+    justify-content: center;
+    align-items: ${props => props.modalOverflow ? 'flex-start' : 'center'};
+  }
+`;
+const ModalContainer = styled.div`
+  position: relative;
+  background: ${colors.white};
+  width: 100%;
+  min-height: 0;
+  padding: ${/*#__PURE__*/rem('15px')};
+  word-wrap: break-word;
+  transition-duration: ${misc.transitionDuration};
+
+  @media ${device.s} {
+    --spacing: ${/*#__PURE__*/rem('30px')};
+    margin: var(--spacing);
+    border-radius: ${field.borderRadius};
+    max-width: ${/*#__PURE__*/rem('860px')};
+    padding: var(--spacing);
+
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: calc(var(--spacing) * -1);
+      width: ${/*#__PURE__*/rem('1px')};
+      height: var(--spacing);
+    }
+  }
+`;
+const ModalHeader = styled.div`
+  display: flex;
+
+  h2 {
+    margin: 0 0 ${/*#__PURE__*/rem('30px')} 0;
+    font-size: ${/*#__PURE__*/rem('32px')};
+    font-weight: ${typography.semiBold};
+  }
+
+  button {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: ${/*#__PURE__*/rem('-14px')} ${/*#__PURE__*/rem('-14px')} 0 0;
+    border: ${/*#__PURE__*/rem('2px')} solid ${colors.grey200};
+    min-width: ${/*#__PURE__*/rem('28px')};
+    height: ${/*#__PURE__*/rem('28px')};
+    z-index: 1;
+    outline: none;
+
+    @media ${device.s} {
+      display: inherit;
+    }
+  }
+`;
 
 const Modal = props => {
   const {
@@ -5569,35 +7094,72 @@ const Modal = props => {
   })))), document.body)) : /*#__PURE__*/React.createElement(React.Fragment, null);
 };
 
-const slideInLeft = keyframes`
-  from {
-    transform: translateX(100%);
+const ModalOverlay$1 = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: ${/*#__PURE__*/rgba(colors.black, 0.8)};
+  width: 100vw;
+  height: 100vh;
+  z-index: ${props => props.zIndex ? props.zIndex : 10};
+`;
+const ModalWrapper$1 = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: ${props => props.zIndex + 1};
+`;
+const ModalContainer$1 = styled.div`
+  @keyframes slideInLeft {
+    from {
+      transform: translateX(100%);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  margin-left: auto;
+  background: ${colors.white};
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding: ${/*#__PURE__*/rem('15px')};
+  word-wrap: break-word;
+  animation-timing-function: ${/*#__PURE__*/timingFunctions('easeOutQuint')};
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  transform: translateX(100%);
+  animation-name: slideInLeft;
+
+  @media ${device.s} {
+    max-width: ${/*#__PURE__*/rem('400px')};
+    padding: ${/*#__PURE__*/rem('30px')};
+  }
+`;
+const ModalHeader$1 = styled.div`
+  top: 0;
+
+  h2 {
+    margin: 0 0 ${/*#__PURE__*/rem('30px')} 0;
+    font-size: ${/*#__PURE__*/rem('32px')};
+    font-weight: ${typography.semiBold};
   }
+`;
+const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
 
-  to {
-    transform: translateX(0);
+  @media ${device.s} {
+    flex: 1;
   }
 `;
-const ModalOverlay$1 = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__ModalOverlay",
-  componentId: "sc-46huls-0"
-})(["position:fixed;top:0;left:0;background-color:", ";width:100vw;height:100vh;z-index:", ";"], /*#__PURE__*/rgba(colors.black, 0.8), props => props.zIndex ? props.zIndex : 10);
-const ModalWrapper$1 = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__ModalWrapper",
-  componentId: "sc-46huls-1"
-})(["position:fixed;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;z-index:", ";"], props => props.zIndex + 1);
-const ModalContainer$1 = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__ModalContainer",
-  componentId: "sc-46huls-2"
-})(["margin-left:auto;background:", ";width:100%;min-height:100vh;display:flex;flex-direction:column;padding:", ";word-wrap:break-word;animation-timing-function:", ";animation-duration:1s;animation-fill-mode:forwards;transform:translateX(100%);animation-name:", ";@media ", "{max-width:", ";padding:", ";}"], colors.white, /*#__PURE__*/rem('15px'), /*#__PURE__*/timingFunctions('easeOutQuint'), slideInLeft, device.s, /*#__PURE__*/rem('400px'), /*#__PURE__*/rem('30px'));
-const ModalHeader$1 = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__ModalHeader",
-  componentId: "sc-46huls-3"
-})(["top:0;h2{margin:0 0 ", " 0;font-size:", ";font-weight:", ";}"], /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('32px'), typography.semiBold);
-const ModalContent = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__ModalContent",
-  componentId: "sc-46huls-4"
-})(["display:flex;flex-direction:column;@media ", "{flex:1;}"], device.s);
 
 const ModalDrawer = props => {
   const {
@@ -5650,7 +7212,7 @@ const ModalDrawer = props => {
   }))))), document.body)) : /*#__PURE__*/React.createElement(React.Fragment, null);
 };
 
-const Wrapper$f = _styled.div`
+const Wrapper$f = styled.div`
   div {
     width: 100%;
     height: 100%;
@@ -5745,7 +7307,7 @@ const Wrapper$f = _styled.div`
     }
   }
 `;
-const Grid = _styled.div`
+const Grid = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, ${/*#__PURE__*/rem('300px')});
   grid-gap: ${/*#__PURE__*/rem('15px')};
@@ -5818,7 +7380,7 @@ const LoadingState = props => {
   }, loadingType);
 };
 
-const Wrapper$g = _styled.div`
+const Wrapper$g = styled.div`
   .tab {
     border-color: ${field.borderColor};
 
@@ -6006,16 +7568,16 @@ const TabsPanel = props => {
   }));
 };
 
-const Wrapper$h = _styled.div`
+const Wrapper$h = styled.div`
   display: flex;
   flex-direction: column;
 `;
-const GridRow = _styled.div`
+const GridRow = styled.div`
   @media ${device.m} {
     display: flex;
   }
 `;
-const GridCol = _styled.div`
+const GridCol = styled.div`
   @media ${device.m} {
     flex: ${props => props.size};
   }