@taikai/rocket-kit 3.0.0 → 3.0.2

package/dist/rocket-kit.esm.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useMemo } from 'react';
 import Avatar from 'boring-avatars';
 import _styled, { css, keyframes } from 'styled-components';
-import { darken, lighten, rem, transparentize, rgba, timingFunctions } from 'polished';
+import { rem, rgba, transparentize, timingFunctions } from 'polished';
 import Select$1, { components } from 'react-select';
 import { Carousel } from 'react-responsive-carousel';
 import ReactPlayer from 'react-player';
@@ -13,10 +13,8 @@ import ReactDOM from 'react-dom';
 import Tabs from 'react-responsive-tabs';
 
 const colors = {
-  // NEUTRALS
   black: '#000000',
   white: '#ffffff',
-  // GREY
   grey50: '#F1F1F3',
   grey100: '#E3E3E8',
   grey150: '#D5D6DC',
@@ -30,7 +28,6 @@ const colors = {
   grey850: '#23232A',
   grey900: '#17171C',
   grey950: '#0C0C0E',
-  // BLUE
   blue50: '#ECEDFC',
   blue100: '#D9DCFA',
   blue150: '#C6CAF7',
@@ -44,7 +41,6 @@ const colors = {
   blue850: '#141844',
   blue900: '#0D102E',
   blue950: '#070817',
-  // PURPLE
   purple50: '#ECEAF6',
   purple100: '#D9D4ED',
   purple150: '#C7BFE4',
@@ -58,7 +54,6 @@ const colors = {
   purple850: '#140C32',
   purple900: '#0D0821',
   purple950: '#070411',
-  // RED
   red50: '#FDEEEE',
   red100: '#FBDDDD',
   red150: '#F9CDCD',
@@ -72,7 +67,6 @@ const colors = {
   red850: '#471A1A',
   red900: '#2F1111',
   red950: '#180909',
-  // ORACLE
   oracle50: '#F4F0FD',
   oracle100: '#EAE1FB',
   oracle150: '#DFD2FA',
@@ -86,7 +80,6 @@ const colors = {
   oracle850: '#2D2047',
   oracle900: '#1E152F',
   oracle950: '#0F0B18',
-  // GREEN
   green50: '#EBFCF7',
   green100: '#D7F9EF',
   green150: '#C2F6E6',
@@ -100,7 +93,6 @@ const colors = {
   green850: '#104334',
   green900: '#0B2D23',
   green950: '#051611',
-  // ORANGE
   orange50: '#FFF0EA',
   orange100: '#FFE1D5',
   orange150: '#FFD2C0',
@@ -114,7 +106,6 @@ const colors = {
   orange850: '#4D200D',
   orange900: '#331509',
   orange950: '#1A0B04',
-  // YELLOW
   yellow50: '#FFFBEC',
   yellow100: '#FFF7DA',
   yellow150: '#FFF3C7',
@@ -128,7 +119,6 @@ const colors = {
   yellow850: '#4D4015',
   yellow900: '#332B0E',
   yellow950: '#1A1507',
-  // PALE BLUE
   paleBlue50: '#F3F9FD',
   paleBlue100: '#E7F4FB',
   paleBlue150: '#DBEEF9',
@@ -142,7 +132,6 @@ const colors = {
   paleBlue850: '#293C47',
   paleBlue900: '#1B282F',
   paleBlue950: '#0E1418',
-  // PALE ORANGE
   paleOrange50: '#FDF4EC',
   paleOrange100: '#FCE9D9',
   paleOrange150: '#FADEC6',
@@ -155,25 +144,7 @@ const colors = {
   paleOrange800: '#5F3A1A',
   paleOrange850: '#472C13',
   paleOrange900: '#301D0D',
-  paleOrange950: '#180F06',
-  // OLD
-  normal: '#000000',
-  light: '#ffffff',
-  blue: '#4250e4',
-  darkBlue: '#1825AD',
-  orange: '#ff6a2c',
-  darkOrange: /*#__PURE__*/darken(0.2, '#ff6a2c'),
-  red: '#ef5766',
-  lightRed: /*#__PURE__*/lighten(0.25, '#ef5766'),
-  darkRed: /*#__PURE__*/darken(0.19, '#ef5766'),
-  lightPurple: /*#__PURE__*/lighten(0.4, '#4329a6'),
-  darkPurple: /*#__PURE__*/darken(0.15, '#4329a6'),
-  green: '#56cad7',
-  lightGreen: /*#__PURE__*/lighten(0.3, '#56cad7'),
-  darkGreen: /*#__PURE__*/darken(0.15, '#56cad7'),
-  grey: '#939393',
-  lightGrey: '#c4c7d3',
-  darkGrey: /*#__PURE__*/darken(0.1, '#939393')
+  paleOrange950: '#180F06'
 };
 const colorHues = [50, 100, 150, 200, 300, 400, 500, 600, 700, 800, 850, 900, 950];
 const typography = {
@@ -197,14 +168,30 @@ const button = {
 const misc = {
   transitionDuration: '0.3s'
 };
+const field = {
+  borderWidth: /*#__PURE__*/rem('1px'),
+  borderRadius: /*#__PURE__*/rem('8px'),
+  borderColor: colors.purple100,
+  hoverBorderColor: colors.purple150,
+  backgroundColor: colors.white,
+  boxShadow: /*#__PURE__*/rgba(colors.black, 0.15),
+  color: colors.black,
+  activeBorderColor: colors.purple500,
+  activeColor: colors.purple500,
+  successBackgroundColor: colors.green500,
+  successBorderColor: colors.green600,
+  errorBorderColor: colors.red500,
+  errorBackgroundColor: colors.red300,
+  disabledBackgroundColor: colors.grey100,
+  disabledColor: colors.grey300,
+  height: /*#__PURE__*/rem('50px'),
+  placeholderColor: colors.grey200
+};
 
-const {
-  grey
-} = colors;
 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'), grey, props => props.square ? 0 : '999px', props => props.size, props => props.size);
+})(["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 AvatarImage = props => {
   const {
@@ -258,7 +245,7 @@ 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;&: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 => {
+})(["--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 => {
   var _props$color;
   return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
 }, props => {
@@ -310,15 +297,10 @@ const Button = props => {
   }) : null, value && /*#__PURE__*/React.createElement("span", null, value));
 };
 
-const {
-  normal,
-  light,
-  lightGrey
-} = colors;
 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:0.25s;&.isOpen{opacity:1;height:calc(", " * ", " + 2px);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'), lightGrey, /*#__PURE__*/rem('4px'), light, /*#__PURE__*/rem('200px'), /*#__PURE__*/rem('250px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal), /*#__PURE__*/rem('45px'), props => props.visibleActions, /*#__PURE__*/rem('1280px'), /*#__PURE__*/rem('45px'), lightGrey, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('20px'), normal);
+})(["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);
 
 function useVisible(initialIsVisible) {
   const [isVisible, setIsVisible] = useState(initialIsVisible);
@@ -473,20 +455,10 @@ const ButtonLink = props => {
   }), value && /*#__PURE__*/React.createElement("span", null, value));
 };
 
-const {
-  normal: normal$1,
-  light: light$1,
-  green,
-  darkGreen,
-  red,
-  darkRed,
-  grey: grey$1,
-  lightGrey: lightGrey$1
-} = colors;
 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 ? darkRed : normal$1, props => props.disabled ? grey$1 : props.error ? red : null, props => props.error ? red : null);
+})(["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"
@@ -494,11 +466,11 @@ const CheckboxLabel = /*#__PURE__*/_styled.span.withConfig({
 const CheckboxInput = /*#__PURE__*/_styled.input.withConfig({
   displayName: "styles__CheckboxInput",
   componentId: "sc-w5t014-2"
-})(["position:absolute;left:0;opacity:0;cursor:pointer;&:checked:not(:disabled)[aria-checked='true'] ~ span{background-color:", ";border-color:", ";&:after{display:block;}}&:checked:disabled[aria-checked='true'] ~ span{border-color:transparent;background-color:", ";color:", ";&:after{display:block;}}&:not(:checked):disabled ~ span{border-color:", ";background-color:", ";}&:hover:not(:disabled){border-color:", ";&:checked ~ span{border-color:", ";}}"], props => props.error ? red : green, props => props.error ? darkRed : darkGreen, lightGrey$1, grey$1, lightGrey$1, light$1, props => props.error ? darkRed : darkGreen, props => props.error ? darkRed : darkGreen);
+})(["position:absolute;left:0;opacity:0;cursor:pointer;&:checked:not(:disabled)[aria-checked='true'] ~ span{background-color:", ";border-color:", ";&:after{display:block;}}&:checked:disabled[aria-checked='true'] ~ span{border-color:transparent;background-color:", ";color:", ";&:after{display:block;}}&:not(:checked):disabled ~ span{border-color:", ";background-color:", ";}&:hover:not(:disabled){border-color:", ";&:checked ~ span{border-color:", ";}}"], props => props.error ? field.errorBackgroundColor : field.successBackgroundColor, props => props.error ? field.errorBorderColor : field.successBorderColor, field.disabledBackgroundColor, field.disabledColor, field.disabledBackgroundColor, field.backgroundColor, props => props.error ? field.errorBorderColor : field.activeBorderColor, props => props.error ? field.errorBorderColor : field.successBorderColor);
 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:0.3s;&: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 ? red : grey$1, /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('9px'), light$1, /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('3px'), props => props.error ? red : green, props => props.error ? darkRed : darkGreen, grey$1, lightGrey$1, lightGrey$1, light$1, props => props.error ? darkRed : darkGreen, props => props.error ? darkRed : darkGreen);
+})(["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 Checkbox = ({
   label,
@@ -553,17 +525,10 @@ const Checkbox = ({
   }));
 };
 
-const {
-  light: light$2,
-  green: green$1,
-  darkGreen: darkGreen$1,
-  grey: grey$2,
-  lightGrey: lightGrey$2
-} = colors;
 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:0.3s;&:hover input:not(:disabled) ~ span{border-color:", ";}&:hover{background-color:", ";}span{color:", ";transition-duration:0.3s;}"], /*#__PURE__*/rem('3px'), props => props.disabled ? grey$2 : props.checked ? darkGreen$1 : grey$2, /*#__PURE__*/rem('6px'), props => props.disabled ? lightGrey$2 : props.checked ? green$1 : light$2, /*#__PURE__*/rem('50px'), props => props.disabled ? 'auto' : 'pointer', grey$2, props => props.disabled ? lightGrey$2 : props.checked ? green$1 : lightGrey$2, props => props.disabled ? grey$2 : props.checked ? light$2 : null);
+})(["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"
@@ -571,11 +536,11 @@ const CheckboxLabel$1 = /*#__PURE__*/_styled.span.withConfig({
 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{border-color:transparent;background-color:", ";color:", ";&:after{display:block;}}&:not(:checked):disabled ~ span{border-color:", ";background-color:", ";}&:hover:not(:disabled){&:checked ~ span{border-color:", ";}}"], light$2, light$2, grey$2, grey$2, grey$2, lightGrey$2, light$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:0.3s;&: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'), grey$2, light$2, /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('9px'), props => props.disabled ? light$2 : green$1, /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('3px'));
+})(["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 CheckboxButton = props => {
   const {
@@ -787,65 +752,53 @@ const icons = {
   mint: 'M21.102 2a1 1 0 011 1v2h2a1 1 0 010 2h-2v2a1 1 0 01-2 0V7h-2a1 1 0 110-2h2V3a1 1 0 011-1zM16.44 22.938l-2.4 6.512a1 1 0 01-1.874 0l-2.4-6.512a1.012 1.012 0 00-.6-.6l-6.513-2.4a1 1 0 010-1.875l6.513-2.4a1.013 1.013 0 00.6-.6l2.4-6.513a1 1 0 011.875 0l2.4 6.512a1.012 1.012 0 00.6.6l6.512 2.4a1 1 0 010 1.875l-6.512 2.4a1.012 1.012 0 00-.6.6zM27.102 9a1 1 0 011 1v1h1a1 1 0 010 2h-1v1a1 1 0 01-2 0v-1h-1a1 1 0 110-2h1v-1a1 1 0 011-1z'
 };
 
-const {
-  grey: grey$3,
-  lightGrey: lightGrey$3,
-  red: red$1,
-  purple500
-} = colors;
 const TextFieldInputStyle = /*#__PURE__*/_styled.input.withConfig({
   displayName: "styles__TextFieldInputStyle",
   componentId: "sc-1hxcxbo-0"
-})(["border-width:", ";border-style:solid;border-color:", ";border-radius:", ";height:", ";padding:", ";font-family:inherit;font-size:1rem;transition-duration:0.3s;&:focus{border-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";}&:invalid{border-color:", ";outline:none;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;}&:required{border-color:", ";}&::placeholder{color:", ";opacity:1;}&:-ms-input-placeholder{color:", ";opacity:1;}&::-ms-input-placeholder{color:", ";opacity:1;}", ""], props => props.minimal ? `0 0 ${rem('1px')} 0` : rem('1px'), props => props.error ? red$1 : grey$3, props => props.minimal ? 0 : '6px', props => props.minimal ? rem('40px') : rem('50px'), props => props.minimal ? 0 : rem('10px'), purple500, lightGrey$3, grey$3, red$1, props => props.error ? red$1 : grey$3, grey$3, grey$3, grey$3, props => props.icon && css`
-      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path style="fill:hsl(0, 0%, 58%)" d=${JSON.stringify(icons[props.icon])} /></svg>');
-      padding-left: ${props.minimal ? '40px' : '50px'};
-      background-repeat: no-repeat;
-      background-size: ${rem('30px')} ${rem('30px')};
-      background-position: ${props.minimal ? 0 : '10px'} 50%;
+})(["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`
+      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')};
 
       &:focus {
-        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
-        <path style="fill:hsl(252, 60%, 41%)" d=${JSON.stringify(icons[props.icon])} /></svg>');
+        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 {
-  light: light$3,
-  grey: grey$4,
-  lightGrey: lightGrey$4,
-  red: red$2,
-  purple500: purple500$1
-} = colors;
 const Wrapper$1 = _styled.div`
   position: relative;
 `;
 const TextAreaStyle = _styled.textarea`
-  border-width: ${props => props.minimal ? `0 0 ${rem('1px')} 0` : rem('1px')};
+  border-width: ${field.borderWidth};
   border-style: solid;
-  border-color: ${props => props.error ? red$2 : grey$4};
-  border-radius: ${props => props.minimal ? 0 : '6px'};
+  border-color: ${props => props.error ? field.errorBorderColor : field.borderColor};
+  border-radius: ${field.borderRadius};
   width: 100%;
   height: ${props => props.height || rem('100px')};
-  min-height: rem('40px');
-  padding: ${props => props.minimal ? 0 : rem('10px')};
+  min-height: ${field.height};
+  padding: ${/*#__PURE__*/rem('10px')};
   font-family: inherit;
-  font-size: 1rem;
+  font-size: ${/*#__PURE__*/rem('16px')};
   word-break: break-word;
-  transition-duration: 0.3s;
+  transition-duration: ${misc.transitionDuration};
   resize: none;
 
+  &:hover {
+    border-color: ${field.hoverBorderColor};
+  }
+
   &:focus {
-    border-color: ${purple500$1};
+    border-color: ${field.activeColor};
     outline: none;
   }
 
   &:disabled {
-    background-color: ${lightGrey$4};
-    color: ${grey$4};
+    background-color: ${field.disabledBackgroundColor};
+    color: ${field.disabledColor};
   }
 
   &:invalid {
-    border-color: ${red$2};
+    border-color: ${field.errorBorderColor};
     outline: none;
     box-shadow: none;
     -webkit-box-shadow: none;
@@ -853,102 +806,81 @@ const TextAreaStyle = _styled.textarea`
   }
 
   &:required {
-    border-color: ${props => props.error ? red$2 : grey$4};
+    border-color: ${props => props.error ? field.errorBorderColor : field.borderColor};
   }
 
   &::placeholder {
-    color: ${grey$4};
+    color: ${field.placeholderColor};
     opacity: 1;
   }
 
   &:-ms-input-placeholder {
-    color: ${grey$4};
+    color: ${field.placeholderColor};
     opacity: 1;
   }
 
   &::-ms-input-placeholder {
-    color: ${grey$4};
+    color: ${field.placeholderColor};
     opacity: 1;
   }
 `;
 const Count = _styled.div`
   position: absolute;
-  top: ${props => props.minimal ? 0 : rem('5px')};
-  right: ${props => props.minimal ? 0 : rem('10px')};
-  background-color: ${/*#__PURE__*/transparentize(0.15, light$3)};
+  top: ${/*#__PURE__*/rem('5px')};
+  right: ${/*#__PURE__*/rem('10px')};
+  background-color: ${/*#__PURE__*/transparentize(0.15, colors.white)};
   padding: 0 ${/*#__PURE__*/rem('5px')};
 
   span {
-    font-size: 0.75rem;
-    color: ${grey$4};
+    font-size: ${typography.fontSizeXs};
+    color: ${field.borderColor};
 
     &.negative {
-      color: ${red$2};
+      color: ${field.errorBorderColor};
     }
   }
 `;
 
-const {
-  normal: normal$2,
-  grey: grey$5,
-  lightGrey: lightGrey$5,
-  red: red$3,
-  purple500: purple500$2
-} = colors;
 const SelectStyle = _styled.select`
-  border: ${/*#__PURE__*/rem('1px')} solid ${props => props.error ? red$3 : grey$5};
-  border-radius: ${/*#__PURE__*/rem('6px')};
-  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 fill='hsl(0, 0%, 85%)' d='M10.827 12.387l5.173 5.173 5.173-5.173c0.52-0.52 1.36-0.52 1.88 0v0c0.52 0.52 0.52 1.36 0 1.88l-6.12 6.12c-0.52 0.52-1.36 0.52-1.88 0l-6.12-6.12c-0.52-0.52-0.52-1.36 0-1.88v0c0.52-0.507 1.373-0.52 1.893 0z'></path></svg>");
+  border: ${field.borderWidth} solid
+    ${props => props.error ? field.errorBorderColor : field.borderColor};
+  border-radius: ${field.borderRadius};
+  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 fill='rgb(217,212,237)' d='M10.827 12.387l5.173 5.173 5.173-5.173c0.52-0.52 1.36-0.52 1.88 0v0c0.52 0.52 0.52 1.36 0 1.88l-6.12 6.12c-0.52 0.52-1.36 0.52-1.88 0l-6.12-6.12c-0.52-0.52-0.52-1.36 0-1.88v0c0.52-0.507 1.373-0.52 1.893 0z'></path></svg>");
   background-position: calc(100% - 15px) center;
   background-repeat: no-repeat;
   background-size: ${/*#__PURE__*/rem('30px')};
   background-color: transparent;
-  height: ${/*#__PURE__*/rem('50px')};
+  height: ${field.height};
   padding: 0 ${/*#__PURE__*/rem('65px')} 0 ${/*#__PURE__*/rem('15px')};
-  font-size: 1rem;
+  font-size: ${typography.defaultSize};
   appearance: none;
   cursor: pointer;
-  transition-duration: 0.3s;
+  transition-duration: ${misc.transitionDuration};
 
   &:hover {
-    border-color: ${purple500$2};
+    border-color: ${field.hoverBorderColor};
   }
 
   &:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 ${normal$2};
+    text-shadow: 0 0 0 ${colors.black};
+  }
+
+  &:focus {
+    outline: none;
   }
 
   &:disabled {
-    background-color: ${lightGrey$5};
-    color: ${grey$5};
+    background-color: ${field.disabledBackgroundColor};
+    color: ${field.disabledColor};
     pointer-events: none;
   }
-
-  ${props => props.minimal && css`
-      border: 0;
-      border-bottom: ${rem('1px')} solid
-        ${props => props.error ? red$3 : grey$5};
-      border-radius: 0;
-      background-position: 100% center;
-      height: ${rem('40px')};
-      padding: 0 ${rem('35px')} 0 0;
-
-      &:disabled {
-        background-color: transparent;
-        color: ${grey$5};
-      }
-    `}
 `;
 
-const {
-  green: green$2,
-  red: red$4
-} = colors;
 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' ? green$2 : red$4, TextFieldInputStyle, TextAreaStyle, SelectStyle, /*#__PURE__*/rem('5px'));
+})(["display:block;font-size:0.7rem;color:", ";", " + &,", " + &,", " + &{margin-top:", ";}"], props => props.color === 'success' ? field.successBorderColor : field.errorBorderColor, TextFieldInputStyle, TextAreaStyle, SelectStyle, /*#__PURE__*/rem('5px'));
 
 const ErrorField = props => {
   const {
@@ -983,17 +915,11 @@ const Icon = props => {
   }));
 };
 
-const {
-  grey: grey$6
-} = colors;
 const LabelStyle = /*#__PURE__*/_styled.label.withConfig({
   displayName: "styles__LabelStyle",
   componentId: "sc-pbv9we-0"
-})(["display:flex;align-items:center;font-size:", ";font-weight:", ";color:", ";text-transform:uppercase;svg{margin-left:", ";width:auto;height:", ";}"], typography.fontSizeXs, typography.semiBold, grey$6, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('16px'));
+})(["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 {
-  grey: grey$7
-} = colors;
 const Label = props => {
   const {
     value,
@@ -1006,16 +932,13 @@ const Label = props => {
     style: style
   }, value, currency === 'tkai' && /*#__PURE__*/React.createElement(Icon, {
     icon: "tkai",
-    fill: grey$7
+    fill: colors.grey200
   }), currency === 'vkai' && /*#__PURE__*/React.createElement(Icon, {
     icon: "vkai",
-    fill: grey$7
+    fill: colors.grey200
   }));
 };
 
-const {
-  light: light$4
-} = colors;
 const rotation = keyframes`
   from {
       transform: rotate(0deg);
@@ -1027,14 +950,11 @@ const rotation = keyframes`
 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 || light$4, props => props.size || rem('20px'), props => props.size || rem('20px'), rotation);
+})(["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 {
-  grey: grey$8
-} = colors;
 const Spinner = props => {
   const {
-    fill = grey$8,
+    fill = colors.grey200,
     size = '20px',
     className = 'spinner',
     style
@@ -1112,7 +1032,6 @@ const TagNumber = props => {
 const TextField = props => {
   const {
     type = 'text',
-    minimal = true,
     icon,
     name,
     value,
@@ -1130,7 +1049,6 @@ const TextField = props => {
     required = false
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextFieldInputStyle, {
-    minimal: minimal,
     icon: icon,
     type: type,
     name: name,
@@ -1154,7 +1072,6 @@ const TextField = props => {
 
 const TextArea = props => {
   const {
-    minimal = true,
     className = 'text-area',
     style,
     height,
@@ -1174,7 +1091,6 @@ const TextArea = props => {
   return /*#__PURE__*/React.createElement(Wrapper$1, {
     className: "text-field"
   }, /*#__PURE__*/React.createElement(TextAreaStyle, {
-    minimal: minimal,
     className: className,
     style: style,
     height: height,
@@ -1189,9 +1105,7 @@ const TextArea = props => {
     error: error,
     required: required,
     "data-testid": dataTestId
-  }), charactersCount != undefined && /*#__PURE__*/React.createElement(Count, {
-    minimal: minimal
-  }, /*#__PURE__*/React.createElement("span", {
+  }), charactersCount != undefined && /*#__PURE__*/React.createElement(Count, null, /*#__PURE__*/React.createElement("span", {
     className: charactersCount < 0 ? 'negative' : ''
   }, charactersCount)), error ? /*#__PURE__*/React.createElement(ErrorField, {
     error: error
@@ -1200,7 +1114,6 @@ const TextArea = props => {
 
 const Select = props => {
   const {
-    minimal = false,
     placeholder,
     options,
     defaultValue,
@@ -1216,7 +1129,6 @@ const Select = props => {
     value: value.value
   }, value.name));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectStyle, {
-    minimal: minimal,
     name: name,
     defaultValue: defaultValue,
     value: value,
@@ -1234,14 +1146,6 @@ const Select = props => {
   }) : null);
 };
 
-const {
-  normal: normal$3,
-  light: light$5,
-  grey: grey$9,
-  lightGrey: lightGrey$6,
-  purple500: purple500$3,
-  lightPurple
-} = colors;
 const SelectWrapper = _styled.div`
   .select {
     &-interactive {
@@ -1249,36 +1153,35 @@ const SelectWrapper = _styled.div`
     }
 
     &__control {
-      border-color: ${grey$9};
-      min-height: ${/*#__PURE__*/rem('50px')};
-      transition-duration: 0.3s;
+      border-color: ${field.borderColor};
+      border-radius: ${field.borderRadius};
+      min-height: ${field.height};
+      transition-duration: ${misc.transitionDuration};
 
       &:hover {
-        border-color: ${purple500$3};
+        border-color: ${field.hoverBorderColor};
       }
 
       &--is-focused {
-        border-color: ${purple500$3};
+        border-color: ${field.activeBorderColor};
         box-shadow: none;
       }
     }
 
     &__value-container {
-      display: flex;
-      align-items: center;
       padding: 0 ${/*#__PURE__*/rem('15px')};
     }
 
     &__placeholder {
-      color: ${grey$9};
+      color: ${field.placeholderColor};
     }
 
     &__input {
-      color: ${normal$3};
+      color: ${field.color};
     }
 
     &__single-value {
-      color: ${normal$3};
+      color: ${field.color};
     }
 
     &__indicator {
@@ -1293,31 +1196,35 @@ const SelectWrapper = _styled.div`
         height: ${/*#__PURE__*/rem('22px')};
 
         path {
-          fill: hsl(0, 0%, 85%);
+          fill: ${field.borderColor};
         }
       }
 
       &-separator {
-        background-color: ${grey$9};
+        background-color: ${field.borderColor};
       }
     }
 
     &__option {
-      transition-duration: 0.3s;
+      transition-duration: ${misc.transitionDuration};
 
       &:hover {
-        background-color: ${purple500$3};
-        color: ${light$5};
+        background-color: ${field.hoverBorderColor};
+        color: ${field.color};
+
+        svg {
+          fill: ${field.color};
+        }
       }
 
       &--is-focused {
-        background-color: ${purple500$3};
-        color: ${light$5};
+        background-color: ${field.activeBorderColor};
+        color: ${colors.white};
       }
 
       &--is-selected {
-        background-color: ${lightPurple};
-        color: ${normal$3};
+        background-color: ${field.activeBorderColor} !important;
+        color: ${colors.white} !important;
       }
     }
   }
@@ -1343,21 +1250,21 @@ const SelectWrapper = _styled.div`
       margin: 0 ${/*#__PURE__*/rem('5px')} 0 0;
       width: ${/*#__PURE__*/rem('20px')};
       height: auto;
-      transition-duration: 0.3s;
+      transition-duration: ${misc.transitionDuration};
     }
   }
 
   .select__option--is-selected {
     svg {
-      fill: ${normal$3};
-      transition-duration: 0.3s;
+      fill: ${colors.white} !important;
+      transition-duration: ${misc.transitionDuration};
     }
   }
 
   .select__option--is-focused {
     svg {
-      fill: ${light$5};
-      transition-duration: 0.3s;
+      fill: ${colors.white};
+      transition-duration: ${misc.transitionDuration};
     }
   }
 
@@ -1366,15 +1273,25 @@ const SelectWrapper = _styled.div`
   }
 `;
 const SelectGroupLabel = _styled.span`
-  font-size: ${/*#__PURE__*/rem('12px')};
-  color: ${lightGrey$6};
+  font-size: ${typography.fontSizeXs};
+  color: ${field.placeholderColor};
 
   + .tag {
-    border-color: ${lightGrey$6};
-    background-color: ${lightGrey$6};
-    color: ${grey$9};
+    border-color: ${field.borderColor};
+    background-color: ${field.borderColor};
+    color: ${field.activeBorderColor};
   }
 `;
+const SingleValue = _styled.div`
+  grid-area: 1 / 1 / 2 / 3;
+  margin-left: ${/*#__PURE__*/rem('2px')};
+  margin-right: ${/*#__PURE__*/rem('2px')};
+  max-width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  box-sizing: border-box;
+`;
 
 const {
   Option
@@ -1399,7 +1316,7 @@ const CustomSelectOption = (props, commonProps) => /*#__PURE__*/React.createElem
   src: props.data.customImage,
   alt: props.data.label
 }) : null, props.data.label);
-const CustomSelectValue = props => /*#__PURE__*/React.createElement("div", null, props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
+const CustomSelectValue = props => /*#__PURE__*/React.createElement(SingleValue, null, props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
   icon: props.data.icon
 }) : props.data.customImage ? /*#__PURE__*/React.createElement("img", {
   src: props.data.customImage,
@@ -1446,25 +1363,37 @@ const SelectInteractive = ({
   }) : null);
 };
 
-const {
-  normal: normal$4,
-  grey: grey$a,
-  lightGrey: lightGrey$7,
-  red: red$5,
-  lightRed
-} = colors;
 const Wrapper$2 = _styled.div`
-  border-width: ${/*#__PURE__*/rem('1px')};
+  border-width: ${field.borderWidth};
   border-style: solid;
-  border-color: ${props => props.error ? red$5 : grey$a};
-  border-radius: ${/*#__PURE__*/rem('6px')};
+  border-color: ${props => props.error ? field.errorBorderColor : field.borderColor};
+  border-radius: ${field.borderRadius};
   display: flex;
+  transition-duration: ${misc.transitionDuration};
   overflow: hidden;
 
+  &:hover {
+    border-color: ${field.hoverBorderColor};
+  }
+
+  &:has(input:focus) {
+    border-color: ${field.activeBorderColor};
+  }
+
+  &:has(input:disabled) {
+    background-color: ${field.disabledBackgroundColor};
+    color: ${field.disabledColor};
+
+    > div {
+      background-color: ${field.disabledBackgroundColor};
+      color: ${field.disabledColor};
+    }
+  }
+
   input {
     flex: 1;
     border: 0;
-    color: ${props => props.error ? red$5 : normal$4};
+    color: ${props => props.error ? field.errorBorderColor : field.color};
 
     &:disabled {
       margin: 0;
@@ -1477,12 +1406,12 @@ const Wrapper$2 = _styled.div`
   }
 `;
 const Appendix = _styled.div`
-  border-width: ${props => props.position === 'left' ? `0 ${rem('1px')} 0 0` : `0 0 0 ${rem('1px')}`};
+  border-width: ${props => props.position === 'left' ? `0 ${field.borderWidth} 0 0` : `0 0 0 ${field.borderWidth}`};
   border-style: solid;
-  border-color: ${props => props.error ? red$5 : grey$a};
-  background-color: ${props => props.error ? lightRed : lightGrey$7};
+  border-color: ${props => props.error ? field.errorBorderColor : field.borderColor};
+  background-color: ${props => props.error ? field.errorBackgroundColor : field.borderColor};
   padding: 0 ${/*#__PURE__*/rem('15px')};
-  color: ${props => props.error ? red$5 : grey$a};
+  color: ${props => props.error ? field.errorBorderColor : field.color};
   line-height: ${/*#__PURE__*/rem('48px')};
   vertical-align: center;
   overflow: hidden;
@@ -1516,7 +1445,6 @@ const TextFieldAppendix = props => {
     error: error,
     position: "left"
   }, /*#__PURE__*/React.createElement("span", null, prepend)), /*#__PURE__*/React.createElement(TextField, {
-    minimal: false,
     type: type,
     name: name,
     value: value,
@@ -1573,9 +1501,6 @@ const device = {
   mouse: '(min-width: 538px) and (min-height: 720px)'
 };
 
-const {
-  light: light$6
-} = colors;
 const Wrapper$3 = _styled.div`
   position: relative;
 
@@ -1623,7 +1548,7 @@ const Wrapper$3 = _styled.div`
   }
 
   .carousel .control-prev.control-arrow:before {
-    border-right: ${/*#__PURE__*/rem('8px')} solid #fff;
+    border-right: ${/*#__PURE__*/rem('8px')} solid ${colors.white};
   }
 
   .carousel .control-next.control-arrow {
@@ -1631,7 +1556,7 @@ const Wrapper$3 = _styled.div`
   }
 
   .carousel .control-next.control-arrow:before {
-    border-left: ${/*#__PURE__*/rem('8px')} solid #fff;
+    border-left: ${/*#__PURE__*/rem('8px')} solid ${colors.white};
   }
 
   .carousel-root {
@@ -1699,7 +1624,7 @@ const Wrapper$3 = _styled.div`
     margin-right: ${/*#__PURE__*/rem('6px')};
     white-space: nowrap;
     overflow: hidden;
-    border: ${/*#__PURE__*/rem('3px')} solid #fff;
+    border: ${/*#__PURE__*/rem('3px')} solid ${colors.white};
     padding: ${/*#__PURE__*/rem('2px')};
   }
 
@@ -1725,7 +1650,7 @@ const Wrapper$3 = _styled.div`
 
   .carousel.carousel-slider .control-arrow {
     top: 0;
-    color: #fff;
+    color: ${colors.white};
     font-size: ${/*#__PURE__*/rem('26px')};
     bottom: 0;
     margin-top: 0;
@@ -1814,7 +1739,7 @@ const Wrapper$3 = _styled.div`
     padding: ${/*#__PURE__*/rem('5px')};
     font-size: ${/*#__PURE__*/rem('10px')};
     text-shadow: ${/*#__PURE__*/rem('1px')} ${/*#__PURE__*/rem('1px')} ${/*#__PURE__*/rem('1px')} rgba(0, 0, 0, 0.9);
-    color: #fff;
+    color: ${colors.white};
   }
 
   > div > div > button {
@@ -1828,7 +1753,7 @@ const Wrapper$3 = _styled.div`
     svg {
       width: ${/*#__PURE__*/rem('36px')};
       height: ${/*#__PURE__*/rem('36px')};
-      fill: ${light$6};
+      fill: ${colors.white};
     }
 
     &.next {
@@ -1839,7 +1764,7 @@ const Wrapper$3 = _styled.div`
       opacity: 1;
 
       svg {
-        fill: ${light$6};
+        fill: ${colors.white};
       }
     }
 
@@ -1864,7 +1789,7 @@ const Wrapper$3 = _styled.div`
       position: relative;
       display: inline-block;
       border-radius: 999px;
-      background-color: ${light$6};
+      background-color: ${colors.white};
       width: ${/*#__PURE__*/rem('15px')};
       height: ${/*#__PURE__*/rem('15px')};
       opacity: 0.25;
@@ -1978,7 +1903,9 @@ const VideoPlayer = props => {
     controls = false,
     width = '100%',
     height = '100%',
-    onEnded
+    onEnded,
+    onReady,
+    onError
   } = props;
   return /*#__PURE__*/React.createElement(Wrapper$4, null, /*#__PURE__*/React.createElement(ReactPlayer, {
     style: {
@@ -1992,39 +1919,38 @@ const VideoPlayer = props => {
     controls: controls,
     width: width,
     height: height,
-    onEnded: onEnded
+    onEnded: onEnded,
+    onReady: onReady,
+    onError: onError
   }));
 };
 
-const {
-  lightGrey: lightGrey$8,
-  green: green$3
-} = colors;
-const {
-  bold
-} = typography;
 const Wrapper$5 = _styled.div`
   display: flex;
   align-items: center;
 `;
 const Bar = _styled.div`
   flex: 1;
+  border: ${/*#__PURE__*/rem('1px')} solid ${colors.purple100};
   border-radius: 999px;
-  background-color: ${lightGrey$8};
+  background-color: ${colors.grey50};
   height: ${/*#__PURE__*/rem('10px')};
   overflow: hidden;
 `;
 const Progress = _styled.div`
   border-radius: 999px;
-  background-color: ${green$3};
+  background-color: ${colors.purple500};
   height: 100%;
   width: ${props => props.progress ? `${props.progress}%` : 0};
   transition-duration: 2s;
 `;
 const Value = _styled.div`
   margin-left: ${/*#__PURE__*/rem('5px')};
-  font-size: 0.75rem;
-  font-weight: ${bold};
+  font-size: ${typography.fontSizeXs};
+  font-weight: ${typography.regular};
+  color: ${colors.purple400};
+  letter-spacing: ${/*#__PURE__*/rem('1px')};
+  text-transform: uppercase;
 `;
 
 const ProgressBar = props => {
@@ -2037,11 +1963,6 @@ const ProgressBar = props => {
   })), value && /*#__PURE__*/React.createElement(Value, null, value));
 };
 
-const {
-  light: light$7,
-  green: green$4,
-  lightGrey: lightGrey$9
-} = colors;
 const Switcher = _styled.fieldset`
   margin: 0;
   border: none;
@@ -2064,9 +1985,9 @@ const Switcher = _styled.fieldset`
       display: inline-block;
       vertical-align: middle;
       width: ${/*#__PURE__*/rem('40px')};
-      height: ${/*#__PURE__*/rem('24px')};
+      height: ${/*#__PURE__*/rem('25px')};
       border-radius: 999px;
-      border: 2px solid ${light$7};
+      border: ${field.borderWidth} solid ${field.borderColor};
       position: relative;
       opacity: ${props => props.disabled ? '0.5' : '1'};
 
@@ -2078,7 +1999,7 @@ const Switcher = _styled.fieldset`
 
       input[type='radio'] {
         display: inline-block;
-        margin: 0 ${/*#__PURE__*/rem('-2px')} 0 0;
+        margin: 0 ${/*#__PURE__*/rem('-3px')} 0 0;
         width: 50%;
         height: 100%;
         opacity: 0;
@@ -2091,7 +2012,7 @@ const Switcher = _styled.fieldset`
         }
 
         &.switch-on:checked ~ .bg {
-          background-color: ${green$4};
+          background-color: ${colors.green500};
         }
 
         &.switch-off:checked ~ .switcher {
@@ -2099,21 +2020,21 @@ const Switcher = _styled.fieldset`
         }
 
         &.switch-off:checked ~ .bg {
-          background-color: ${lightGrey$9};
+          background-color: ${colors.grey100};
         }
       }
 
       .switcher {
         display: block;
         position: absolute;
-        top: ${/*#__PURE__*/rem('2px')};
-        left: ${/*#__PURE__*/rem('2px')};
+        top: ${/*#__PURE__*/rem('3px')};
+        left: ${/*#__PURE__*/rem('3px')};
         right: 100%;
         width: ${/*#__PURE__*/rem('16px')};
         height: ${/*#__PURE__*/rem('16px')};
         border-radius: 50%;
-        background-color: ${light$7};
-        transition: all 0.3s ease-out;
+        background-color: ${colors.white};
+        transition: all ${misc.transitionDuration} ease-out;
         z-index: 2;
       }
 
@@ -2126,8 +2047,8 @@ const Switcher = _styled.fieldset`
         z-index: 0;
         border-radius: 999px;
         background-color: transparent;
-        transition: all 0.3s ease-out;
-        background-color: ${lightGrey$9};
+        transition: all ${misc.transitionDuration} ease-out;
+        background-color: ${colors.grey200};
       }
     }
   }
@@ -2212,16 +2133,6 @@ const Toggle = ({
   }, labelRight)));
 };
 
-const {
-  red: red$6,
-  grey: grey$b,
-  lightGrey: lightGrey$a,
-  darkGrey,
-  green: green$5,
-  darkGreen: darkGreen$2,
-  light: light$8,
-  normal: normal$5
-} = colors;
 const Wrapper$6 = _styled.div`
   input {
     width: 0.1px;
@@ -2234,20 +2145,21 @@ const Wrapper$6 = _styled.div`
 
   label {
     margin-bottom: 0 !important;
-    border-width: ${props => props.minimal ? `0 0 ${rem('1px')} 0` : rem('1px')};
+    border-width: ${field.borderWidth};
     border-style: solid;
-    border-color: ${props => props.error ? red$6 : grey$b};
-    border-radius: ${props => props.minimal ? 0 : rem('6px')};
-    background-color: ${props => props.disabled ? lightGrey$a : 'transparent'};
+    border-color: ${props => props.error ? field.errorBorderColor : field.borderColor};
+    border-radius: ${field.borderRadius};
+    background-color: ${props => props.disabled ? field.disabledBackgroundColor : 'transparent'};
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    height: ${/*#__PURE__*/rem('50px')};
+    height: ${field.height};
     -webkit-appearance: none;
     outline: none;
     cursor: ${props => props.disabled ? 'default' : 'pointer'};
     pointer-events: ${props => props.disabled ? 'none' : ''};
+    transition-duration: ${misc.transitionDuration};
     overflow: hidden;
 
     span {
@@ -2257,45 +2169,47 @@ const Wrapper$6 = _styled.div`
       &.file-name {
         flex: 1;
         display: block;
-        padding: ${props => props.minimal ? 0 : `0 ${rem('10px')}`};
-        color: ${props => props.disabled ? grey$b : normal$5};
+        padding: ${`0 ${/*#__PURE__*/rem('10px')}`};
+        color: ${props => props.disabled ? field.disabledColor : field.color};
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
 
       &.button {
-        border-left: ${props => props.minimal ? 0 : `${rem('1px')} solid ${grey$b}`};
-        background-color: ${props => props.minimal ? 'transparent' : props.disabled ? lightGrey$a : green$5};
+        border-left: ${props => `${field.borderWidth} solid ${props.error ? field.errorBorderColor : field.borderColor}`};
+        background-color: ${props => props.disabled ? field.disabledBackgroundColor : props.error ? field.errorBackgroundColor : field.borderColor};
         height: 100%;
-        padding: ${props => props.minimal ? `0 ${rem('5px')} 0 ${rem('20px')}` : `0 ${rem('20px')}`};
-        color: ${props => props.disabled ? grey$b : props.minimal ? darkGrey : light$8};
-        transition-duration: 0.3s;
+        padding: ${`0 ${/*#__PURE__*/rem('20px')}`};
+        color: ${props => props.disabled ? field.disabledColor : props.error ? field.errorBorderColor : field.activeColor};
+        transition-duration: ${misc.transitionDuration};
 
         svg {
           margin-right: ${/*#__PURE__*/rem('8px')};
           width: auto;
           height: ${/*#__PURE__*/rem('24px')};
-          fill: ${props => props.disabled ? grey$b : props.minimal ? darkGrey : light$8};
-          transition-duration: 0.3s;
+          fill: ${props => props.disabled ? field.disabledColor : props.error ? field.errorBorderColor : field.activeColor};
+          transition-duration: ${misc.transitionDuration};
         }
 
         &:hover {
-          background-color: ${props => props.minimal ? 'transparent' : darkGreen$2};
-          color: ${props => props.minimal ? darkGreen$2 : light$8};
-
-          svg {
-            fill: ${props => props.disabled ? grey$b : props.minimal ? darkGreen$2 : light$8};
-          }
+          background-color: ${field.hoverBorderColor};
         }
       }
     }
+
+    &:hover {
+      border-color: ${field.hoverBorderColor};
+
+      span.button {
+        background-color: ${field.hoverBorderColor};
+      }
+    }
   }
 `;
 
 const FilePicker = props => {
   const {
-    minimal = false,
     name,
     accept,
     multiple = false,
@@ -2318,7 +2232,6 @@ const FilePicker = props => {
   };
   return /*#__PURE__*/React.createElement(Wrapper$6, {
     disabled: disabled,
-    minimal: minimal,
     error: !!error
   }, /*#__PURE__*/React.createElement("input", {
     id: name,
@@ -2344,12 +2257,6 @@ const FilePicker = props => {
   }));
 };
 
-const {
-  normal: normal$6,
-  light: light$9,
-  lightGrey: lightGrey$b,
-  red: red$7
-} = colors;
 const ActionsMenuStyle$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ActionsMenuStyle",
   componentId: "sc-1peafop-0"
@@ -2357,11 +2264,11 @@ const ActionsMenuStyle$1 = /*#__PURE__*/_styled.div.withConfig({
 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:0 0 ", " 0 ", ";-webkit-box-shadow:0 0 ", " 0 ", ";box-shadow:0 0 ", " 0 ", ";z-index:1;", " 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 ", " ", ";}&.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;}}}"], /*#__PURE__*/rem('1px'), lightGrey$b, /*#__PURE__*/rem('4px'), light$9, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('200px'), /*#__PURE__*/rem('250px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$6), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$6), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$6), props => props.rowIndex != undefined && css`
+})(["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`
       --margin: ${`calc(${rem('45px')} + ${rem('50px')} * ${props.rowIndex} + ${rem('42px')})`};
       top: var(--margin);
       right: ${rem('5px')};
-    `, /*#__PURE__*/rem('45px'), lightGrey$b, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('1px'), lightGrey$b, red$7, lightGrey$b, /*#__PURE__*/rem('20px'), normal$6);
+    `, /*#__PURE__*/rem('45px'), field.hoverBorderColor, field.borderWidth, field.borderColor, field.errorBorderColor, field.disabledColor, /*#__PURE__*/rem('20px'), field.color);
 
 const ActionMenuList = props => {
   const {
@@ -2432,18 +2339,10 @@ const ActionsMenu = props => {
   }) : null);
 };
 
-const {
-  light: light$a,
-  grey: grey$c
-} = colors;
 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;@media ", "{padding:", ";}> span{display:block;margin-top:", ";font-size:2rem;font-weight:var(--bold,700);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], /*#__PURE__*/rem('1px'), grey$c, /*#__PURE__*/rem('6px'), light$a, /*#__PURE__*/rem('15px'), device.l, /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('5px'));
-const CardValueButtonWrapper = /*#__PURE__*/_styled.div.withConfig({
-  displayName: "styles__CardValueButtonWrapper",
-  componentId: "sc-1ki7jdk-1"
-})(["right:0;margin-top:", ";display:flex;flex-direction:column-reverse;flex-grow:2;align-self:flex-end;"], /*#__PURE__*/rem('20px'));
+})(["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 CardValue = props => {
   const {
@@ -2462,20 +2361,14 @@ const CardValue = props => {
   }, /*#__PURE__*/React.createElement(Label, {
     value: label,
     currency: currency
-  }), /*#__PURE__*/React.createElement("span", null, value), description && /*#__PURE__*/React.createElement("p", null, description), buttonValue && onClick && /*#__PURE__*/React.createElement(CardValueButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
-    color: "grey",
+  }), /*#__PURE__*/React.createElement("span", null, value), description && /*#__PURE__*/React.createElement("p", null, description), buttonValue && onClick && /*#__PURE__*/React.createElement(Button, {
+    color: "grey150",
+    txtColor: "grey500",
     value: buttonValue,
     action: onClick
-  })));
+  }));
 };
 
-const {
-  grey: grey$d,
-  light: light$b
-} = colors;
-const {
-  bold: bold$1
-} = typography;
 const EmptyTableWrapper = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__EmptyTableWrapper",
   componentId: "sc-1dgsb9l-0"
@@ -2483,23 +2376,23 @@ const EmptyTableWrapper = /*#__PURE__*/_styled.div.withConfig({
 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:0.85rem;font-weight:", ";color:", ";text-transform:uppercase;> div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none;flex:1;padding:0 ", ";font-size:0.85rem;font-weight:", ";color:", ";text-transform:uppercase;&: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 ? rem('1px') : `0 0 ${rem('1px')} 0`, grey$d, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), bold$1, grey$d, /*#__PURE__*/rem('15px'), bold$1, grey$d, device.s, device.m, device.l);
+})(["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 ${rem('1px')} ${rem('1px')} ${rem('1px')}` : 0, grey$d, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'));
+})(["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'), /*#__PURE__*/rem('1px'), grey$d, /*#__PURE__*/rem('15px'), device.s, device.m, device.l);
+})(["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:#edeef1;width:100%;height:", ";"], /*#__PURE__*/rem('15px'));
+})(["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(light$b, 0), /*#__PURE__*/rgba(light$b, 1), /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), grey$d);
+})(["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 EmptyTable = props => {
   let rows = [];
@@ -2555,53 +2448,42 @@ const ModalFooter = props => {
   }), children);
 };
 
-const {
-  green: green$6,
-  lightGreen,
-  darkGreen: darkGreen$3,
-  grey: grey$e,
-  lightGrey: lightGrey$c,
-  darkGrey: darkGrey$1,
-  red: red$8,
-  lightRed: lightRed$1,
-  darkRed: darkRed$1
-} = colors;
 const Wrapper$7 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-d2fn4g-0"
-})(["--default:", ";--light:", ";--dark:", ";", " ", " ", " border-width:", ";border-style:solid;border-color:var(--default);border-radius:", ";background-color:var(--light);padding:", ";div{&:first-child{flex:1;}p{margin:0;}}", ""], grey$e, lightGrey$c, darkGrey$1, props => props.color === 'grey' && css`
-      --default: ${grey$e};
-      --light: ${lightGrey$c};
-      --dark: ${darkGrey$1};
+})(["--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`
+      --borderColor: ${field.borderColor};
+      --backgroundColor: ${colors.purple50};
+      --dark: ${colors.purple400};
     `, props => props.color === 'green' && css`
-      --default: ${green$6};
-      --light: ${lightGreen};
-      --dark: ${darkGreen$3};
+      --borderColor: ${field.successBorderColor};
+      --backgroundColor: ${field.successBackgroundColor};
+      --dark: ${colors.green900};
     `, props => props.color === 'red' && css`
-      --default: ${red$8};
-      --light: ${lightRed$1};
-      --dark: ${darkRed$1};
-    `, /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('15px'), props => props.buttonValue && css`
+      --borderColor: ${field.errorBorderColor};
+      --backgroundColor: ${field.errorBackgroundColor};
+      --dark: ${colors.red800};
+    `, field.borderWidth, field.borderRadius, /*#__PURE__*/rem('15px'), props => props.buttonValue && css`
       button {
         margin: ${rem('30px')} 0 0 0;
         border: 0;
-        border-radius: ${rem('6px')};
-        background-color: var(--default);
+        border-radius: ${field.borderRadius};
+        background-color: var(--borderColor);
         height: ${rem('36px')};
         display: flex;
         justify-content: center;
         align-items: center;
         padding: ${rem('20px')};
-        font-size: 0.75rem;
-        font-weight: bold;
-        text-transform: uppercase;
-        color: hsl(0, 0%, 100%);
+        font-size: ${typography.fontSizeSm};
+        font-weight: ${typography.medium};
+        color: var(--dark);
         white-space: nowrap;
-        transition-duration: 0.3s;
+        transition-duration: ${misc.transitionDuration};
         cursor: pointer;
 
         &:hover {
           background-color: var(--dark);
+          color: ${colors.white};
         }
       }
 
@@ -2638,15 +2520,6 @@ function hasValue(value) {
   return value !== undefined && value !== null;
 }
 
-const {
-  normal: normal$7,
-  light: light$c,
-  grey: grey$f,
-  lightGrey: lightGrey$d
-} = colors;
-const {
-  bold: bold$2
-} = typography;
 const TableWrapper = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__TableWrapper",
   componentId: "sc-vmoy3z-0"
@@ -2654,11 +2527,11 @@ const TableWrapper = /*#__PURE__*/_styled.div.withConfig({
 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:#fff;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, /*#__PURE__*/rem('6px'), light$c, light$c, /*#__PURE__*/rem('40px'), /*#__PURE__*/rem('40px'), /*#__PURE__*/rem('14px'), /*#__PURE__*/rem('14px'));
+})(["@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: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-transform:uppercase;text-align:left;}}tbody{tr{display:block;transition-duration:0.3s;&: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:0.3s;}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;}}}}}"], grey$f, /*#__PURE__*/rem('6px'), device.s, props => props.border ? rem('1px') : '0', /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('1px'), grey$f, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('-1px'), /*#__PURE__*/rem('1px'), device.s, bold$2, grey$f, props => props.loadingState ? 'transparent' : lightGrey$d, device.s, /*#__PURE__*/rem('1px'), grey$f, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), normal$7, grey$f, /*#__PURE__*/rem('15px'), bold$2, props => props.loadingState && css`
+})(["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`
             width: ${rem('75px')};
             height: ${rem('15px')};
             background: #f6f7f8;
@@ -2676,7 +2549,7 @@ 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'), /*#__PURE__*/rem('36px'), /*#__PURE__*/rem('-170px'), device.s, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('1px'), grey$f, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('40px'));
+          `, /*#__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"
@@ -2773,7 +2646,7 @@ const Table$1 = props => {
     ref: ref
   }, /*#__PURE__*/React.createElement(Button, {
     variant: "text",
-    color: "grey",
+    color: "grey500",
     icon: "menuVert",
     action: evt => {
       evt.preventDefault();
@@ -2793,26 +2666,15 @@ const Table$1 = props => {
   })));
 };
 
-const {
-  normal: normal$8,
-  grey: grey$g,
-  lightGrey: lightGrey$e
-} = colors;
-const {
-  bold: bold$3
-} = typography;
 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-transform:uppercase;text-align:left;}}tbody{tr{display:block;transition-duration:0.3s;&: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:0.3s;}}> 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:0.3s;}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 ? '1px' : '0', grey$g, /*#__PURE__*/rem('6px'), props => props.layout, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('1px'), grey$g, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('-1px'), /*#__PURE__*/rem('1px'), device.s, bold$3, grey$g, lightGrey$e, grey$g, device.s, /*#__PURE__*/rem('1px'), grey$g, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), grey$g, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), normal$8, grey$g, /*#__PURE__*/rem('15px'), bold$3, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('36px'), /*#__PURE__*/rem('-170px'), device.s, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('1px'), grey$g, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('40px'));
+})(["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);
 
-const {
-  light: light$d
-} = colors;
 const TableDnD = props => {
   const {
     border = false,
@@ -2862,11 +2724,11 @@ const TableDnD = props => {
   };
   const getItemStyle = (isDragging, draggableStyle) => ({
     userSelect: 'none',
-    background: isDragging ? light$d : 'transparent',
+    background: isDragging ? colors.white : 'transparent',
     ...draggableStyle
   });
   const getListStyle = isDraggingOver => ({
-    background: isDraggingOver ? light$d : 'transparent'
+    background: isDraggingOver ? colors.white : 'transparent'
   });
   return (
     /*#__PURE__*/
@@ -2944,7 +2806,7 @@ const TableDnD = props => {
       ref: ref
     }, /*#__PURE__*/React.createElement(Button, {
       variant: "text",
-      color: "grey",
+      color: "grey500",
       icon: "menuVert",
       action: evt => {
         evt.preventDefault();
@@ -2962,15 +2824,10 @@ const TableDnD = props => {
   );
 };
 
-const {
-  normal: normal$9,
-  grey: grey$h,
-  red: red$9
-} = colors;
 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 ? red$9 : grey$h, props => props.error ? red$9 : normal$9, /*#__PURE__*/rem('15px'));
+})(["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 FormGroup = props => {
   const {
@@ -2987,23 +2844,18 @@ const FormGroup = props => {
   }), children);
 };
 
-const {
-  grey: grey$i,
-  lightGrey: lightGrey$f,
-  lightRed: lightRed$2
-} = colors;
 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{opacity:0.25;}&:hover{pointer-events:none;}}}"], /*#__PURE__*/rem('1px'), grey$i, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), lightGrey$f);
+})(["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:1rem;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', /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('10px'), lightRed$2);
+})(["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:0.3s;&.remove-button{border-right:", " solid ", ";}&.add-button{border-left:", " solid ", ";}svg{width:auto;height:", ";fill:", ";}&:hover{background-color:", ";}"], /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('50px'), lightGrey$f, /*#__PURE__*/rem('1px'), grey$i, /*#__PURE__*/rem('1px'), grey$i, /*#__PURE__*/rem('20px'), grey$i, lightGrey$f);
+})(["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 NumberInputSpinner = props => {
   const {
@@ -3064,12 +2916,6 @@ const NumberInputSpinner = props => {
   })));
 };
 
-const {
-  green: green$7,
-  grey: grey$j,
-  lightGrey: lightGrey$g,
-  light: light$e
-} = colors;
 const Steps = /*#__PURE__*/_styled.ul.withConfig({
   displayName: "styles__Steps",
   componentId: "sc-1s2dhfy-0"
@@ -3077,7 +2923,7 @@ const Steps = /*#__PURE__*/_styled.ul.withConfig({
 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:0.75rem;color:", ";@media ", "{width:100%;font-size:1rem;font-weight:700;}}}"], /*#__PURE__*/rem('44px'), /*#__PURE__*/rem('18px'), props => props.active ? green$7 : lightGrey$g, /*#__PURE__*/rem('22px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('-15px'), /*#__PURE__*/rem('18px'), props => props.active ? green$7 : lightGrey$g, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), props => props.active ? green$7 : lightGrey$g, props => props.active ? light$e : grey$j, device.s);
+})(["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 WizardSteps = props => {
   const {
@@ -3097,125 +2943,6 @@ const WizardSteps = props => {
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, step.value))))));
 };
 
-const {
-  light: light$f,
-  green: green$8,
-  darkGreen: darkGreen$4,
-  red: red$a,
-  darkRed: darkRed$2,
-  orange,
-  darkOrange
-} = colors;
-const Wrapper$a = _styled.div`
-  --shadow: 0 0 ${/*#__PURE__*/rem('25px')} 0 rgba(40, 40, 40, 0.2);
-
-  position: fixed;
-  top: ${/*#__PURE__*/rem('15px')};
-  right: 0;
-  border: ${/*#__PURE__*/rem('2px')} solid ${darkGreen$4};
-  border-radius: ${/*#__PURE__*/rem('6px')};
-  background-color: ${green$8};
-  width: ${/*#__PURE__*/rem('300px')};
-  max-height: min-content;
-  display: flex;
-  padding: ${/*#__PURE__*/rem('15px')};
-  color: ${light$f};
-  -moz-box-shadow: var(--shadow);
-  -webkit-box-shadow: var(--shadow);
-  box-shadow: var(--shadow);
-  z-index: 999;
-  opacity: 0;
-
-  button {
-    background-color: transparent;
-
-    svg {
-      fill: ${darkGreen$4};
-    }
-  }
-
-  &.open {
-    animation-name: slide-in;
-    animation-duration: 0.5s;
-    animation-fill-mode: forwards;
-  }
-
-  @keyframes slide-in {
-    0% {
-      right: 0;
-      opacity: 0;
-    }
-    100% {
-      right: ${/*#__PURE__*/rem('15px')};
-      opacity: 1;
-    }
-  }
-
-  ${props => props.variant === 'orange' && css`
-      border: ${rem('2px')} solid ${darkOrange};
-      background-color: ${orange};
-
-      button {
-        svg {
-          fill: ${darkOrange};
-        }
-      }
-    `}
-
-  ${props => props.variant === 'red' && css`
-      border: ${rem('2px')} solid ${darkRed$2};
-      background-color: ${red$a};
-
-      button {
-        svg {
-          fill: ${darkRed$2};
-        }
-      }
-    `}
-
-  span {
-    flex: 1;
-    margin-right: ${/*#__PURE__*/rem('5px')};
-    font-size: 0.85rem;
-  }
-
-  button {
-    position: absolute;
-    top: ${/*#__PURE__*/rem('4px')};
-    right: ${/*#__PURE__*/rem('4px')};
-    margin: 0 !important;
-    width: ${/*#__PURE__*/rem('20px')};
-    height: ${/*#__PURE__*/rem('20px')};
-  }
-`;
-
-const AlertNotification = props => {
-  const {
-    className = 'alert-notification',
-    variant = 'success',
-    closeAction = () => {},
-    value,
-    children
-  } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$a, {
-    className: className,
-    variant: variant
-  }, /*#__PURE__*/React.createElement("div", null, value ? /*#__PURE__*/React.createElement("span", null, value) : children), /*#__PURE__*/React.createElement(Button, {
-    variant: "text",
-    icon: "cross",
-    action: closeAction
-  }));
-};
-
-const {
-  normal: normal$a,
-  light: light$g,
-  blue,
-  lightGrey: lightGrey$h
-} = colors;
-const {
-  bold: bold$4
-} = typography;
 const PaginationWrapper = _styled.div`
   --size: ${/*#__PURE__*/rem('30px')};
 
@@ -3234,10 +2961,10 @@ const PaginationWrapper = _styled.div`
 
       &.previous,
       &.next {
-        transition-duration: 0.3s;
+        transition-duration: ${misc.transitionDuration};
 
         a svg {
-          transition-duration: 0.3s;
+          transition-duration: ${misc.transitionDuration};
         }
       }
 
@@ -3245,29 +2972,29 @@ const PaginationWrapper = _styled.div`
       .break {
         min-width: var(--size);
         height: var(--size);
-        transition-duration: 0.3s;
+        transition-duration: ${misc.transitionDuration};
       }
 
       a {
-        border-radius: ${/*#__PURE__*/rem('8px')};
+        border-radius: ${field.borderRadius};
         min-width: var(--size);
         height: var(--size);
         padding: 0 ${/*#__PURE__*/rem('5px')};
         display: flex;
         justify-content: center;
         align-items: center;
-        color: ${normal$a};
-        font-weight: ${bold$4};
+        color: ${colors.black};
+        font-weight: ${typography.semiBold};
         text-decoration: none;
 
         &:hover {
-          color: ${blue};
+          color: ${colors.blue500};
         }
 
         svg {
           width: ${/*#__PURE__*/rem('18px')};
           height: auto;
-          fill: ${blue};
+          fill: ${colors.blue500};
         }
       }
 
@@ -3275,18 +3002,18 @@ const PaginationWrapper = _styled.div`
         pointer-events: none;
 
         a {
-          background-color: ${blue};
-          color: ${light$g};
+          background-color: ${colors.blue500};
+          color: ${colors.white};
         }
       }
     }
 
     &.dark {
       a {
-        color: ${lightGrey$h};
+        color: ${colors.white};
 
         &:hover {
-          color: ${light$g};
+          color: ${colors.white};
         }
       }
     }
@@ -3342,14 +3069,7 @@ const PaginationControl = props => {
   }));
 };
 
-const {
-  normal: normal$b,
-  green: green$9
-} = colors;
-const {
-  bold: bold$5
-} = typography;
-const Wrapper$b = _styled.div`
+const Wrapper$a = _styled.div`
   min-height: ${props => props.variant === 'default' ? '50vh' : 'inherit'};
   display: flex;
   flex-direction: column;
@@ -3365,16 +3085,16 @@ const Wrapper$b = _styled.div`
 
   > span {
     margin-top: ${/*#__PURE__*/rem('15px')};
-    font-weight: ${bold$5};
-    color: ${normal$b};
+    font-weight: ${typography.semiBold};
+    color: ${colors.black};
 
     a {
-      color: ${normal$b};
-      transition-duration: 0.3s;
+      color: ${colors.black};
+      transition-duration: ${misc.transitionDuration};
+    }
 
-      &:hover {
-        color: ${green$9};
-      }
+    &:hover {
+      color: ${colors.purple500};
     }
   }
 `;
@@ -3384,7 +3104,7 @@ const Error = props => {
     variant = 'default',
     value
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$b, {
+  return /*#__PURE__*/React.createElement(Wrapper$a, {
     variant: variant
   }, variant === 'default' ? /*#__PURE__*/React.createElement(Icon, {
     icon: "warning",
@@ -3392,14 +3112,7 @@ const Error = props => {
   }) : /*#__PURE__*/React.createElement("span", null, "\u00AF\\\\_(\u30C4)_/\u00AF"), value && /*#__PURE__*/React.createElement("span", null, value));
 };
 
-const {
-  normal: normal$c,
-  green: green$a
-} = colors;
-const {
-  bold: bold$6
-} = typography;
-const Wrapper$c = _styled.div`
+const Wrapper$b = _styled.div`
   min-height: 50vh;
   display: flex;
   flex-direction: column;
@@ -3415,15 +3128,15 @@ const Wrapper$c = _styled.div`
 
   > div {
     margin-top: ${/*#__PURE__*/rem('15px')};
-    font-weight: ${bold$6};
-    color: ${normal$c};
+    font-weight: ${typography.semiBold};
+    color: ${colors.black};
 
     a {
-      color: ${normal$c};
-      transition-duration: 0.3s;
+      color: ${colors.black};
+      transition-duration: ${misc.transitionDuration};
 
       &:hover {
-        color: ${green$a};
+        color: ${colors.purple500};
       }
     }
   }
@@ -5381,20 +5094,12 @@ const DataWarning = props => {
     default:
       icon = /*#__PURE__*/React.createElement(IconLoginOnly, null);
   }
-  return /*#__PURE__*/React.createElement(Wrapper$c, {
+  return /*#__PURE__*/React.createElement(Wrapper$b, {
     type: type
   }, icon, /*#__PURE__*/React.createElement("div", null, children));
 };
 
-const {
-  normal: normal$d,
-  green: green$b,
-  darkGreen: darkGreen$5,
-  grey: grey$k,
-  lightGrey: lightGrey$i,
-  red: red$b
-} = colors;
-const Wrapper$d = _styled.ul`
+const Wrapper$c = _styled.ul`
   display: flex;
   flex-direction: ${props => props.type === 'column' ? 'column' : 'row'};
   position: relative;
@@ -5415,11 +5120,11 @@ const Wrapper$d = _styled.ul`
   }
 
   input[type='radio']:checked ~ .check {
-    border-color: ${darkGreen$5};
+    border-color: ${field.successBorderColor};
   }
 
   input[type='radio']:checked ~ .check::before {
-    background-color: ${green$b};
+    background-color: ${field.successBackgroundColor};
   }
 
   & + span {
@@ -5442,7 +5147,7 @@ const Item = _styled.li`
     padding-left: calc(var(--size) + 5px);
     line-height: var(--size);
     vertical-align: middle;
-    color: ${props => props.error ? red$b : null};
+    color: ${props => props.error ? field.errorBorderColor : null};
     cursor: pointer;
     z-index: 1;
   }
@@ -5450,11 +5155,12 @@ const Item = _styled.li`
   .check {
     position: absolute;
     top: 0;
-    border: ${/*#__PURE__*/rem('2px')} solid ${props => props.error ? red$b : grey$k};
+    border: ${/*#__PURE__*/rem('2px')} solid
+      ${props => props.error ? field.errorBorderColor : field.borderColor};
     border-radius: 100%;
     width: var(--size);
     height: var(--size);
-    transition-duration: 0.3s;
+    transition-duration: ${misc.transitionDuration};
     display: flex;
     justify-content: center;
     align-items: center;
@@ -5469,21 +5175,21 @@ const Item = _styled.li`
   }
 
   &:hover .check {
-    border-color: ${normal$d};
+    border-color: ${field.hoverBorderColor};
   }
 
   ${props => props.disabled && css`
       label {
-        color: ${grey$k};
+        color: ${field.disabledColor};
       }
 
       input[type='radio'] ~ .check,
       input[type='radio']:checked ~ .check {
-        border-color: ${lightGrey$i};
+        border-color: ${field.disabledColor};
       }
 
       input[type='radio']:checked ~ .check::before {
-        background-color: ${lightGrey$i};
+        background-color: ${field.disabledBackgroundColor};
       }
 
       &:hover {
@@ -5508,7 +5214,7 @@ const RadioGroup = props => {
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     className: className
-  }, /*#__PURE__*/React.createElement(Wrapper$d, {
+  }, /*#__PURE__*/React.createElement(Wrapper$c, {
     type: type,
     group: group,
     error: error,
@@ -5533,7 +5239,7 @@ const RadioGroup = props => {
   }) : null);
 };
 
-const Wrapper$e = _styled.ul`
+const Wrapper$d = _styled.ul`
   display: flex;
   flex-direction: ${props => props.type === 'column' ? 'column' : 'row'};
   position: relative;
@@ -5566,7 +5272,7 @@ const CheckboxGroup = props => {
     error,
     disabled
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$e, {
+  return /*#__PURE__*/React.createElement(Wrapper$d, {
     type: type,
     error: error
   }, children ? children : options && Array.isArray(options) ? options.map((value, index) => /*#__PURE__*/React.createElement("li", {
@@ -5583,32 +5289,23 @@ const CheckboxGroup = props => {
   }) : null);
 };
 
-const Wrapper$f = _styled.div`
+const Wrapper$e = _styled.div`
   label {
     margin-bottom: ${/*#__PURE__*/rem('5px')};
   }
 `;
-const {
-  grey: grey$l,
-  darkGrey: darkGrey$2,
-  light: light$h,
-  purple500: purple500$4
-} = colors;
 const Field = _styled.div`
   display: flex;
   flex-wrap: wrap;
 
   input {
     flex: 1;
-    margin-right: 0;
-    border-radius: ${/*#__PURE__*/rem('6px')} 0 0 ${/*#__PURE__*/rem('6px')};
+    margin-right: ${/*#__PURE__*/rem('-1px')};
+    border-radius: ${field.borderRadius} 0 0 ${field.borderRadius};
 
-    &:focus {
-      outline: none;
-
-      + button {
-        background-color: ${purple500$4};
-      }
+    &:disabled {
+      background-color: ${field.backgroundColor};
+      color: ${field.color};
     }
   }
 
@@ -5619,38 +5316,27 @@ const Field = _styled.div`
 
   button {
     border: 0;
-    border-radius: 0 ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')} 0;
-    background-color: ${grey$l};
+    border-radius: 0 ${field.borderRadius} ${field.borderRadius} 0;
     min-width: ${/*#__PURE__*/rem('50px')};
-    height: ${/*#__PURE__*/rem('50px')};
+    height: ${field.height};
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 ${/*#__PURE__*/rem('20px')};
     white-space: nowrap;
-    transition-duration: 0.3s;
+    transition-duration: ${misc.transitionDuration};
     cursor: pointer;
 
-    svg {
-      width: auto;
-      min-width: ${/*#__PURE__*/rem('20px')};
-      height: ${/*#__PURE__*/rem('20px')};
-      fill: ${light$h};
-      transition: 0.3s;
+    span {
+      color: ${field.activeColor};
     }
 
-    &:hover {
-      background-color: ${darkGrey$2};
+    svg {
+      fill: ${field.activeColor};
     }
 
     &:disabled {
-      cursor: inherit;
-      opacity: 0.5;
-
-      &:hover {
-        background-color: ${grey$l};
-        pointer-events: none;
-      }
+      border: ${field.borderWidth} solid ${field.borderColor} !important;
     }
   }
 `;
@@ -5662,30 +5348,23 @@ const FieldWidthButton = props => {
     name,
     placeholder,
     value,
-    onChange,
-    disabled = false,
-    error = '',
     dataTestId,
-    required = false,
     buttonIcon,
     buttonValue,
     buttonAction,
     buttonDisabled
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$f, null, label && /*#__PURE__*/React.createElement(Label, {
+  return /*#__PURE__*/React.createElement(Wrapper$e, null, label && /*#__PURE__*/React.createElement(Label, {
     value: label
   }), /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(TextField, {
-    minimal: false,
     type: type,
     name: name,
     value: value,
-    onChange: onChange,
     placeholder: placeholder,
-    disabled: disabled,
-    error: error,
     dataTestId: dataTestId,
-    required: required
+    disabled: true
   }), /*#__PURE__*/React.createElement(Button, {
+    color: "purple100",
     icon: buttonIcon,
     value: buttonValue,
     action: buttonAction,
@@ -5693,24 +5372,14 @@ const FieldWidthButton = props => {
   })));
 };
 
-const {
-  normal: normal$e,
-  purple500: purple500$5,
-  grey: grey$m,
-  lightGrey: lightGrey$j,
-  light: light$i
-} = colors;
-const {
-  bold: bold$7
-} = typography;
-const Wrapper$g = /*#__PURE__*/_styled.div.withConfig({
+const Wrapper$f = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-znznmm-0"
-})(["display:flex;align-items:center;ul.menu{width:0;animation:showAnimation 1s forwards;animation-delay:0.5s;overflow:hidden;}@keyframes showAnimation{0%{width:0%;}100%{width:100%;}}ul{margin:0;max-width:max-content;padding:0;&.menu{display:flex;li:not(:last-child){margin-right:", ";}}li{position:relative;list-style:none;a{display:flex;align-items:center;padding:", ";color:", ";text-transform:capitalize;text-decoration:none;white-space:nowrap;transition-duration:0.3s;svg{margin-right:", ";width:auto;height:", ";min-width:", ";fill:", ";transition-duration:0.3s;}&:hover{color:", ";svg{fill:", ";}}}&.active{font-weight:", ";a{pointer-events:none;svg{fill:", ";}}}}}"], /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('10px'), normal$e, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), grey$m, props => props.customColor ? props.customColor : purple500$5, props => props.customColor ? props.customColor : purple500$5, bold$7, props => props.customColor ? props.customColor : purple500$5);
+})(["display:flex;align-items:center;ul.menu{width:0;animation:showAnimation 1s forwards;animation-delay:0.5s;overflow:hidden;}@keyframes showAnimation{0%{width:0%;}100%{width:100%;}}ul{margin:0;max-width:max-content;padding:0;&.menu{display:flex;li:not(:last-child){margin-right:", ";}}li{position:relative;list-style:none;a{display:flex;align-items:center;padding:", ";color:", ";text-transform:capitalize;text-decoration:none;white-space:nowrap;transition-duration:", ";svg{margin-right:", ";width:auto;height:", ";min-width:", ";fill:", ";transition-duration:", ";}&:hover{color:", ";svg{fill:", ";}}}&.active{font-weight:", ";a{color:", ";pointer-events:none;svg{fill:", ";}}}}}"], /*#__PURE__*/rem('10px'), /*#__PURE__*/rem('10px'), colors.black, misc.transitionDuration, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), colors.grey200, misc.transitionDuration, props => props.customColor ? props.customColor : colors.purple500, props => props.customColor ? props.customColor : colors.purple500, typography.medium, props => props.customColor ? props.customColor : colors.purple500, props => props.customColor ? props.customColor : colors.purple500);
 const More = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__More",
   componentId: "sc-znznmm-1"
-})(["position:relative;display:none;&.hide{display:initial;}ul{position:absolute;right:0;border:", " solid ", ";border-radius:", ";background-color:", ";margin-top:", ";padding:0;-moz-box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);-webkit-box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);z-index:1;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;&.more{display:none;}&.is-open{display:inherit;}li{list-style:none;transition-duration:0.3s;&:hover{background-color:", ";cursor:pointer;a{color:", ";svg{fill:", ";}}}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border-radius:0 0 ", " ", ";}a{width:100%;height:100%;padding:", ";}}}"], /*#__PURE__*/rem('1px'), lightGrey$j, /*#__PURE__*/rem('4px'), light$i, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), lightGrey$j, normal$e, normal$e, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('15px'));
+})(["position:relative;display:none;&.hide{display:initial;}ul{position:absolute;right:0;border:", " solid ", ";border-radius:", ";background-color:", ";margin-top:", ";padding:0;-moz-box-shadow:", ";-webkit-box-shadow:", ";box-shadow:", ";z-index:1;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;&.more{display:none;}&.is-open{display:inherit;}li{list-style:none;transition-duration:", ";&:hover{background-color:", ";cursor:pointer;a{color:", ";svg{fill:", ";}}}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border-radius:0 0 ", " ", ";}a{width:100%;height:100%;padding:", ";}}}"], field.borderWidth, field.borderColor, field.borderRadius, field.backgroundColor, /*#__PURE__*/rem('5px'), field.boxShadow, field.boxShadow, field.boxShadow, misc.transitionDuration, field.borderColor, colors.black, colors.black, field.borderRadius, field.borderRadius, field.borderRadius, field.borderRadius, /*#__PURE__*/rem('15px'));
 
 const HorizontalNav = props => {
   const [showMore, setShowMore] = useState(false);
@@ -5756,7 +5425,7 @@ const HorizontalNav = props => {
     }
     return;
   }, [ref]);
-  return /*#__PURE__*/React.createElement(Wrapper$g, {
+  return /*#__PURE__*/React.createElement(Wrapper$f, {
     ref: ref,
     className: className,
     customColor: customColor
@@ -5778,16 +5447,10 @@ const HorizontalNav = props => {
   })));
 };
 
-const {
-  light: light$j
-} = colors;
-const {
-  bold: bold$8
-} = typography;
 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(0, 0, 0, 0.8), props => props.zIndex ? props.zIndex : 10);
+})(["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"
@@ -5795,11 +5458,11 @@ const ModalWrapper = /*#__PURE__*/_styled.div.withConfig({
 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:0.3s;@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);}}"], light$j, /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('860px'), /*#__PURE__*/rem('1px'));
+})(["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:2rem;font-weight:", ";}button{display:none;position:absolute;top:0;right:0;margin:", " ", " 0 0;border:", " solid ", ";min-width:", ";height:", ";z-index:1;@media ", "{display:inherit;}}"], /*#__PURE__*/rem('30px'), bold$8, /*#__PURE__*/rem('-14px'), /*#__PURE__*/rem('-14px'), /*#__PURE__*/rem('2px'), colors.grey200, /*#__PURE__*/rem('28px'), /*#__PURE__*/rem('28px'), device.s);
+})(["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 Modal = props => {
   const {
@@ -5850,12 +5513,6 @@ const Modal = props => {
   })))), document.body) : /*#__PURE__*/React.createElement(React.Fragment, null);
 };
 
-const {
-  light: light$k
-} = colors;
-const {
-  bold: bold$9
-} = typography;
 const slideInLeft = keyframes`
   from {
     transform: translateX(100%);
@@ -5868,7 +5525,7 @@ const slideInLeft = keyframes`
 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(0, 0, 0, 0.8), props => props.zIndex ? props.zIndex : 10);
+})(["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"
@@ -5876,11 +5533,11 @@ const ModalWrapper$1 = /*#__PURE__*/_styled.div.withConfig({
 const ModalContainer$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalContainer",
   componentId: "sc-46huls-2"
-})(["position:fixed;right:0;background:", ";width:100%;height:100vh;height:calc(var(--vh,1vh) * 100);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:", ";overflow-y:auto;@media ", "{max-width:", ";padding:", ";}"], light$k, /*#__PURE__*/rem('15px'), /*#__PURE__*/timingFunctions('easeOutQuint'), slideInLeft, device.s, /*#__PURE__*/rem('400px'), /*#__PURE__*/rem('30px'));
+})(["position:fixed;right:0;background:", ";width:100%;height:100vh;height:calc(var(--vh,1vh) * 100);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:", ";overflow-y:auto;@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:2rem;font-weight:", ";}"], /*#__PURE__*/rem('30px'), bold$9);
+})(["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"
@@ -5937,10 +5594,7 @@ const ModalDrawer = props => {
   }))))), document.body) : /*#__PURE__*/React.createElement(React.Fragment, null);
 };
 
-const {
-  lightGrey: lightGrey$k
-} = colors;
-const Wrapper$h = _styled.div`
+const Wrapper$g = _styled.div`
   div {
     width: 100%;
     height: 100%;
@@ -6001,7 +5655,7 @@ const Wrapper$h = _styled.div`
 
   .card {
     position: relative;
-    border: ${/*#__PURE__*/rem('2px')} solid ${lightGrey$k};
+    border: ${/*#__PURE__*/rem('2px')} solid ${colors.grey50};
     border-radius: ${/*#__PURE__*/rem('6px')};
     width: ${/*#__PURE__*/rem('300px')};
     overflow: hidden;
@@ -6016,7 +5670,7 @@ const Wrapper$h = _styled.div`
       margin: ${/*#__PURE__*/rem('-45px')} 0 0 ${/*#__PURE__*/rem('20px')};
       width: ${/*#__PURE__*/rem('90px')};
       height: ${/*#__PURE__*/rem('90px')};
-      border: ${/*#__PURE__*/rem('1px')} solid ${lightGrey$k};
+      border: ${/*#__PURE__*/rem('1px')} solid ${colors.grey50};
       border-radius: 999px;
     }
 
@@ -6103,48 +5757,43 @@ const LoadingState = props => {
         className: "subtitle"
       }), paragraphs));
   }
-  return /*#__PURE__*/React.createElement(Wrapper$h, {
+  return /*#__PURE__*/React.createElement(Wrapper$g, {
     type: type
   }, loadingType);
 };
 
-const {
-  normal: normal$f,
-  grey: grey$n,
-  lightGrey: lightGrey$l,
-  light: light$l
-} = colors;
-const Wrapper$i = _styled.div`
+const Wrapper$h = _styled.div`
   .tab {
-    border-color: ${lightGrey$l};
+    border-color: ${field.borderColor};
 
     &[aria-selected='true'] {
       border-bottom: 0;
     }
 
     &[aria-selected='false'] {
-      background-color: ${lightGrey$l};
-      color: ${grey$n};
-      transition-duration: 0.3s;
+      background-color: ${field.borderColor};
+      color: ${colors.black};
+      transition-duration: ${misc.transitionDuration};
 
       &:hover {
-        color: ${normal$f};
+        color: ${colors.black};
       }
     }
 
     &:first-child {
-      border-top-left-radius: ${/*#__PURE__*/rem('6px')};
+      border-top-left-radius: ${field.borderRadius};
     }
 
     &:last-child {
-      border-top-right-radius: ${/*#__PURE__*/rem('6px')};
+      border-top-right-radius: ${field.borderRadius};
     }
   }
 
   .panel {
-    border-radius: 0 ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')};
-    border-color: ${lightGrey$l};
-    background-color: ${light$l};
+    // prettier-ignore
+    border-radius: 0 ${field.borderRadius} ${field.borderRadius} ${field.borderRadius};
+    border-color: ${field.borderColor};
+    background-color: ${colors.white};
     padding: ${/*#__PURE__*/rem('30px')};
   }
 
@@ -6164,8 +5813,8 @@ const Wrapper$i = _styled.div`
   .RRT__tab {
     background: #eee;
     border-style: solid;
-    border-color: ${/*#__PURE__*/lighten(0.25, grey$n)};
-    border-width: ${/*#__PURE__*/rem('1px')} ${/*#__PURE__*/rem('1px')} ${/*#__PURE__*/rem('1px')} 0;
+    border-color: ${field.borderColor};
+    border-width: ${field.borderWidth} ${field.borderWidth} ${field.borderWidth} 0;
     cursor: pointer;
     z-index: 1;
     white-space: nowrap;
@@ -6174,24 +5823,24 @@ const Wrapper$i = _styled.div`
 
   .RRT__tab:focus {
     outline: 0;
-    background-color: ${/*#__PURE__*/lighten(0.25, grey$n)};
+    background-color: ${field.borderColor};
   }
 
   .RRT__accordion .RRT__tab {
-    border-left-width: ${/*#__PURE__*/rem('1px')};
+    border-left-width: ${field.borderWidth};
   }
 
   .RRT__tab--first {
-    border-left-width: ${/*#__PURE__*/rem('1px')};
+    border-left-width: ${field.borderWidth};
   }
 
   .RRT__tab--selected {
-    background: ${light$l};
-    border-color: ${/*#__PURE__*/lighten(0.25, grey$n)} ${/*#__PURE__*/lighten(0.25, grey$n)} ${light$l};
+    background: ${colors.white};
+    border-color: ${field.borderColor} ${field.borderColor} ${colors.white};
   }
 
   .RRT__tab--selected:focus {
-    background-color: ${light$l};
+    background-color: ${colors.white};
   }
 
   .RRT__tab--disabled {
@@ -6221,7 +5870,7 @@ const Wrapper$i = _styled.div`
   .RRT__panel {
     margin-top: ${/*#__PURE__*/rem('-1px')};
     padding: 1em;
-    border: ${/*#__PURE__*/rem('1px')} solid ${/*#__PURE__*/lighten(0.25, grey$n)};
+    border: ${/*#__PURE__*/rem('1px')} solid ${field.borderColor};
   }
 
   .RRT__panel--hidden {
@@ -6233,9 +5882,9 @@ const Wrapper$i = _styled.div`
   }
 
   .RRT__showmore {
-    background: ${lightGrey$l};
-    border: ${/*#__PURE__*/rem('1px')} solid ${/*#__PURE__*/lighten(0.25, grey$n)};
-    border-radius: 0 ${/*#__PURE__*/rem('6px')} 0 0;
+    background: ${field.borderColor};
+    border: ${/*#__PURE__*/rem('1px')} solid ${field.borderColor};
+    border-radius: 0 ${field.borderRadius} 0 0;
     cursor: pointer;
     z-index: 1;
     white-space: nowrap;
@@ -6244,7 +5893,7 @@ const Wrapper$i = _styled.div`
   }
 
   .RRT__showmore--selected {
-    background: ${light$l};
+    background: ${colors.white};
     border-bottom: none;
   }
 
@@ -6255,7 +5904,7 @@ const Wrapper$i = _styled.div`
   }
 
   .RRT__showmore-label--selected {
-    background-color: ${/*#__PURE__*/lighten(0.25, grey$n)};
+    background-color: ${field.borderColor};
   }
 
   .RRT__showmore-list {
@@ -6291,7 +5940,7 @@ const TabsPanel = props => {
       getContent: () => tab.renderer
     }));
   };
-  return /*#__PURE__*/React.createElement(Wrapper$i, null, /*#__PURE__*/React.createElement(Tabs, {
+  return /*#__PURE__*/React.createElement(Wrapper$h, null, /*#__PURE__*/React.createElement(Tabs, {
     transform: false,
     unmountOnExit: unmountOnExit,
     selectedTabKey: selectedTabKey,
@@ -6301,7 +5950,7 @@ const TabsPanel = props => {
   }));
 };
 
-const Wrapper$j = _styled.div`
+const Wrapper$i = _styled.div`
   display: flex;
   flex-direction: column;
 `;
@@ -6321,7 +5970,7 @@ const TabsPanel$1 = props => {
     className = 'grid-container',
     children
   } = props;
-  return /*#__PURE__*/React.createElement(Wrapper$j, {
+  return /*#__PURE__*/React.createElement(Wrapper$i, {
     className: className
   }, children);
 };
@@ -6348,5 +5997,5 @@ const GridCol$1 = props => {
   }, children);
 };
 
-export { ActionsMenu, AlertNotification, AvatarImage, Button, ButtonDropdown, ButtonLink, CardValue, Checkbox, CheckboxButton, CheckboxGroup, DataWarning, EmptyTable, Error, ErrorField, FieldWidthButton, FilePicker, FormGroup, GridCol$1 as GridCol, TabsPanel$1 as GridContainer, GridRow$1 as GridRow, HorizontalNav, Icon, Label, LoadingState, Modal, ModalDrawer, ModalFooter, NoteCard, NumberInputSpinner, PaginationControl, ProgressBar, RadioGroup, Select, SelectInteractive, Slideshow, Spinner, Table$1 as Table, TableDnD, TabsPanel, Tag, TagNumber, TextArea, TextField, TextFieldAppendix, Toggle, TruncateLine, VideoPlayer, WizardSteps };
+export { ActionsMenu, AvatarImage, Button, ButtonDropdown, ButtonLink, CardValue, Checkbox, CheckboxButton, CheckboxGroup, DataWarning, EmptyTable, Error, ErrorField, FieldWidthButton, FilePicker, FormGroup, GridCol$1 as GridCol, TabsPanel$1 as GridContainer, GridRow$1 as GridRow, HorizontalNav, Icon, Label, LoadingState, Modal, ModalDrawer, ModalFooter, NoteCard, NumberInputSpinner, PaginationControl, ProgressBar, RadioGroup, Select, SelectInteractive, Slideshow, Spinner, Table$1 as Table, TableDnD, TabsPanel, Tag, TagNumber, TextArea, TextField, TextFieldAppendix, Toggle, TruncateLine, VideoPlayer, WizardSteps };
 //# sourceMappingURL=rocket-kit.esm.js.map