@taikai/rocket-kit 2.0.2 → 3.0.0-beta.2

package/dist/rocket-kit.esm.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import Avatar from 'boring-avatars';
-import _styled, { keyframes, css } from 'styled-components';
+import _styled, { css, keyframes } from 'styled-components';
 import { darken, lighten, rem, transparentize, rgba, timingFunctions } from 'polished';
 import Select$1, { components } from 'react-select';
 import { Carousel } from 'react-responsive-carousel';
@@ -13,6 +13,150 @@ 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',
+  grey200: '#C7C8D1',
+  grey300: '#ABACBA',
+  grey400: '#8F91A3',
+  grey500: '#73758C',
+  grey600: '#5C5E70',
+  grey700: '#454654',
+  grey800: '#2E2F38',
+  grey850: '#23232A',
+  grey900: '#17171C',
+  grey950: '#0C0C0E',
+  // BLUE
+  blue50: '#ECEDFC',
+  blue100: '#D9DCFA',
+  blue150: '#C6CAF7',
+  blue200: '#B3B9F4',
+  blue300: '#8E96EF',
+  blue400: '#6873E9',
+  blue500: '#4250E4',
+  blue600: '#3540B6',
+  blue700: '#283089',
+  blue800: '#1A205B',
+  blue850: '#141844',
+  blue900: '#0D102E',
+  blue950: '#070817',
+  // PURPLE
+  purple50: '#ECEAF6',
+  purple100: '#D9D4ED',
+  purple150: '#C7BFE4',
+  purple200: '#B4A9DB',
+  purple300: '#8E7FCA',
+  purple400: '#6954B8',
+  purple500: '#4329A6',
+  purple600: '#362185',
+  purple700: '#281964',
+  purple800: '#1B1042',
+  purple850: '#140C32',
+  purple900: '#0D0821',
+  purple950: '#070411',
+  // RED
+  red50: '#FDEEEE',
+  red100: '#FBDDDD',
+  red150: '#F9CDCD',
+  red200: '#F7BCBC',
+  red300: '#F39A9A',
+  red400: '#EF7979',
+  red500: '#EB5757',
+  red600: '#BC4646',
+  red700: '#8D3434',
+  red800: '#5E2323',
+  red850: '#471A1A',
+  red900: '#2F1111',
+  red950: '#180909',
+  // ORACLE
+  oracle50: '#F4F0FD',
+  oracle100: '#EAE1FB',
+  oracle150: '#DFD2FA',
+  oracle200: '#D5C3F8',
+  oracle300: '#C0A5F4',
+  oracle400: '#AB87F1',
+  oracle500: '#9669ED',
+  oracle600: '#7854BE',
+  oracle700: '#5A3F8E',
+  oracle800: '#3C2A5F',
+  oracle850: '#2D2047',
+  oracle900: '#1E152F',
+  oracle950: '#0F0B18',
+  // GREEN
+  green50: '#EBFCF7',
+  green100: '#D7F9EF',
+  green150: '#C2F6E6',
+  green200: '#AEF3DE',
+  green300: '#86ECCE',
+  green400: '#5DE6BD',
+  green500: '#35E0AD',
+  green600: '#2AB38A',
+  green700: '#208668',
+  green800: '#155A45',
+  green850: '#104334',
+  green900: '#0B2D23',
+  green950: '#051611',
+  // ORANGE
+  orange50: '#FFF0EA',
+  orange100: '#FFE1D5',
+  orange150: '#FFD2C0',
+  orange200: '#FFC3AB',
+  orange300: '#FFA680',
+  orange400: '#FF8856',
+  orange500: '#FF6A2C',
+  orange600: '#CC5523',
+  orange700: '#99401A',
+  orange800: '#662A12',
+  orange850: '#4D200D',
+  orange900: '#331509',
+  orange950: '#1A0B04',
+  // YELLOW
+  yellow50: '#FFFBEC',
+  yellow100: '#FFF7DA',
+  yellow150: '#FFF3C7',
+  yellow200: '#FFEFB5',
+  yellow300: '#FFE690',
+  yellow400: '#FFDE6B',
+  yellow500: '#FFD646',
+  yellow600: '#CCAB38',
+  yellow700: '#99802A',
+  yellow800: '#66561C',
+  yellow850: '#4D4015',
+  yellow900: '#332B0E',
+  yellow950: '#1A1507',
+  // PALE BLUE
+  paleBlue50: '#F3F9FD',
+  paleBlue100: '#E7F4FB',
+  paleBlue150: '#DBEEF9',
+  paleBlue200: '#CFE9F7',
+  paleBlue300: '#B7DDF4',
+  paleBlue400: '#9FD2F0',
+  paleBlue500: '#87C7EC',
+  paleBlue600: '#6C9FBD',
+  paleBlue700: '#51778E',
+  paleBlue800: '#36505E',
+  paleBlue850: '#293C47',
+  paleBlue900: '#1B282F',
+  paleBlue950: '#0E1418',
+  // PALE ORANGE
+  paleOrange50: '#FDF4EC',
+  paleOrange100: '#FCE9D9',
+  paleOrange150: '#FADEC6',
+  paleOrange200: '#F8D3B3',
+  paleOrange300: '#F5BE8C',
+  paleOrange400: '#F1A866',
+  paleOrange500: '#EE9240',
+  paleOrange600: '#BE7533',
+  paleOrange700: '#8F5826',
+  paleOrange800: '#5F3A1A',
+  paleOrange850: '#472C13',
+  paleOrange900: '#301D0D',
+  paleOrange950: '#180F06',
+  // OLD
   normal: '#000000',
   light: '#ffffff',
   blue: '#4250e4',
@@ -22,7 +166,6 @@ const colors = {
   red: '#ef5766',
   lightRed: /*#__PURE__*/lighten(0.25, '#ef5766'),
   darkRed: /*#__PURE__*/darken(0.19, '#ef5766'),
-  purple: '#4329a6',
   lightPurple: /*#__PURE__*/lighten(0.4, '#4329a6'),
   darkPurple: /*#__PURE__*/darken(0.15, '#4329a6'),
   green: '#56cad7',
@@ -32,10 +175,25 @@ const colors = {
   lightGrey: '#c4c7d3',
   darkGrey: /*#__PURE__*/darken(0.1, '#939393')
 };
-const fontWeight = {
+const colorHues = [50, 100, 150, 200, 300, 400, 500, 600, 700, 800, 850, 900, 950];
+const typography = {
+  defaultFont: `"Space Grotesk", Verdana, Arial, Helvetica, sans-serif`,
+  defaultSize: '16px',
   regular: 400,
   medium: 500,
-  bold: 700
+  bold: 700,
+  letterSpacing: /*#__PURE__*/rem('1px')
+};
+const button = {
+  height: /*#__PURE__*/rem('42px'),
+  borderWidth: /*#__PURE__*/rem('1px'),
+  borderRadius: /*#__PURE__*/rem('8px'),
+  padding: /*#__PURE__*/rem('28px'),
+  iconSpacing: /*#__PURE__*/rem('8px'),
+  iconSize: /*#__PURE__*/rem('16px')
+};
+const misc = {
+  transitionDuration: '0.3s'
 };
 
 const {
@@ -74,193 +232,96 @@ const AvatarImage = props => {
   }));
 };
 
-const useMouseMoveEffect = props => {
-  const {
-    querySelector = ''
-  } = props;
-  useEffect(() => {
-    if (!document) return;
-    const element = document.querySelector(querySelector);
-    if (!element) return;
-    element.addEventListener('mousemove', event => {
-      var _ref, _ref2;
-
-      const target = event.target;
-      const x = (_ref = event.pageX - (target == null ? void 0 : target.offsetLeft)) != null ? _ref : 0;
-      const y = (_ref2 = event.pageY - (target == null ? void 0 : target.offsetTop)) != null ? _ref2 : 0;
-      element.style.setProperty('--x', `${x}px`);
-      element.style.setProperty('--y', `${y}px`);
-    });
-  }, [querySelector]);
-};
+const useColor = value => {
+  // @ts-ignore
+  const color = colors == null ? void 0 : colors[value];
+  const c = value.split(/([0-9]+)/).filter(Boolean);
+  const tint = c[0];
+  const hue = parseFloat(c[1]);
 
-const size = {
-  xs: '360px',
-  s: '700px',
-  m: '900px',
-  l: '1280px',
-  xl: '1600px'
-};
-const device = {
-  xs: `(min-width: ${size.xs})`,
-  s: `(min-width: ${size.s})`,
-  m: `(min-width: ${size.m})`,
-  l: `(min-width: ${size.l})`,
-  xl: `(min-width: ${size.xl})`,
-  touch: `(hover: none) and (pointer: coarse)`,
-  mouse: '(min-width: 538px) and (min-height: 720px)'
+  const getHoverColor = (tint, hue) => {
+    const indexCurrentHue = colorHues.indexOf(hue);
+    const indexIsLast = indexCurrentHue === colorHues.length - 1;
+    const indexHoverHue = indexIsLast ? indexCurrentHue - 1 : indexCurrentHue + 1; // @ts-ignore
+
+    const hoverColor = colors == null ? void 0 : colors[indexCurrentHue > -1 ? tint + colorHues[indexHoverHue] : tint];
+    return hoverColor != null ? hoverColor : colors.black;
+  };
+
+  const hover = getHoverColor(tint, hue);
+  return {
+    color,
+    hover
+  };
 };
 
-const {
-  normal,
-  light,
-  grey: grey$1,
-  lightGrey,
-  darkGrey,
-  green,
-  darkGreen,
-  orange,
-  darkOrange,
-  red,
-  darkRed,
-  purple,
-  darkPurple,
-  blue,
-  darkBlue
-} = colors;
-const {
-  bold,
-  medium
-} = fontWeight;
-const pulseKeyframes = keyframes`
-  0% {
-    box-shadow: 0 0 ${/*#__PURE__*/rem('10px')} 0 rgba(40, 40, 40, 0.3);
-  }
-  50% {
-    box-shadow: 0 0 ${/*#__PURE__*/rem('10px')} 0 rgba(40, 40, 40, 0);
-  }
-  100% {
-    box-shadow: 0 0 ${/*#__PURE__*/rem('10px')} 0 rgba(40, 40, 40, 0.3);
-  }
-`;
 const ButtonWrapper = /*#__PURE__*/_styled.button.withConfig({
   displayName: "styles__ButtonWrapper",
   componentId: "baestp-0"
-})(["--button:", ";--txt:", ";--hover:", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " border-width:", ";border-style:solid;border-color:var(--button);border-radius:", ";background-color:", ";width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";text-transform:uppercase;white-space:nowrap;transition-duration:0.3s;cursor:pointer;@media ", "{min-width:", ";}&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}&:disabled{cursor:inherit;opacity:0.5;&:hover{pointer-events:none;}}> *:not(:last-child){margin-left:", ";margin-right:", ";}.spinner{border-top-color:", ";}span{position:relative;font-size:0.75rem;font-weight:", ";letter-spacing:1px;color:", ";pointer-events:none;transition-duration:0.3s;order:", ";}svg{order:", ";width:auto;min-width:", ";height:", ";fill:", ";transition:0.3s;}", ""], green, light, darkGreen, props => props.color === 'green' && css`
-      --button: ${green};
-      --hover: ${darkGreen};
-    `, props => props.color === 'orange' && css`
-      --button: ${orange};
-      --hover: ${darkOrange};
-    `, props => props.color === 'red' && css`
-      --button: ${red};
-      --hover: ${darkRed};
-    `, props => props.color === 'grey' && css`
-      --button: ${grey$1};
-      --hover: ${darkGrey};
-    `, props => props.color === 'blue' && css`
-      --button: ${blue};
-      --hover: ${darkBlue};
-    `, props => props.color === 'purple' && css`
-      --button: ${purple};
-      --hover: ${darkPurple};
-    `, props => props.color === 'white' && css`
-      --button: ${light};
-      --txt: ${normal};
-      --hover: ${lightGrey};
-    `, props => props.color === 'dark' && css`
-      --button: ${normal};
-      --hover: ${darkGrey};
-    `, props => props.color === 'pulse' && css`
-      --button: ${red};
-      --hover: ${darkRed};
-      animation: ${pulseKeyframes} 1s infinite;
-    `, props => props.color === 'magic' && css`
-      --button: ${light};
-      --hover: ${lightGrey};
-    `, props => props.variant === 'outline' ? '3px' : 0, props => props.variant === 'text' ? 0 : '999px', props => props.variant === 'solid' ? 'var(--button)' : 'transparent', props => props.value ? props.circle ? rem('32px') : 'min-content' : rem('32px'), /*#__PURE__*/rem('32px'), props => props.value ? props.circle ? 0 : `0 ${rem('20px')}` : 0, device.l, props => props.value ? rem('100px') : rem('32px'), props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? '5px' : 0, props => props.iconPosition === 'left' ? '5px' : 0, props => props.variant === 'solid' ? '' : 'var(--button)', medium, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.color === 'magic' && css`
-      position: relative;
-      background-image: linear-gradient(to bottom right, #ef5867, #5031a8);
-      height: ${rem('60px')};
-      padding: 0 ${rem('40px')};
-      overflow: hidden;
-
-      span {
-        font-size: 1rem;
-        font-weight: ${bold};
-      }
+})(["--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:", ";text-transform:uppercase;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{border-top-color:", ";}span{position:relative;font-size:", ";font-weight:", ";letter-spacing:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => {
+  var _props$color;
 
-      &:before {
-        --size: 0;
+  return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
+}, props => {
+  var _props$txtColor;
 
-        content: '';
-        position: absolute;
-        left: var(--x);
-        top: var(--y);
-        width: var(--size);
-        height: var(--size);
-        background: radial-gradient(circle closest-side, #5031a8, transparent);
-        -webkit-transform: translate(-50%, -50%);
-        transform: translate(-50%, -50%);
-        -webkit-transition: width 0.2s ease, height 0.2s ease;
-        transition: width 0.2s ease, height 0.2s ease;
-      }
+  return useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'black').color;
+}, props => {
+  var _props$color2;
 
-      &:hover:before {
-        --size: ${rem('200px')};
-      }
-    `);
+  return props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor((_props$color2 = props.color) != null ? _props$color2 : 'black').hover;
+}, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? rem('80px') : rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, props => props.variant === 'solid' ? '' : 'var(--button)', /*#__PURE__*/rem(typography.defaultSize), typography.medium, typography.letterSpacing, /*#__PURE__*/rem(typography.defaultSize), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
 
 const Button = props => {
   const {
     variant = 'solid',
-    circle = false,
-    color = 'green',
-    value = '',
+    rounded = false,
+    color = 'purple500',
+    txtColor = 'white',
+    type,
     className = 'button',
-    querySelector = '.button',
-    ariaLabel,
+    style,
     action = () => {},
-    disabled = false,
-    loading = false,
-    dataTestId,
-    eventId,
-    icon = '',
+    value = '',
     iconPosition = 'left',
-    style,
-    type
+    icon = '',
+    loading = false,
+    dataTestId = '',
+    eventId = '',
+    ariaLabel,
+    ariaHidden = false,
+    disabled = false
   } = props;
-  useMouseMoveEffect({
-    querySelector
-  });
   return /*#__PURE__*/React.createElement(ButtonWrapper, {
     variant: variant,
+    rounded: rounded,
     color: color,
-    circle: circle,
+    txtColor: txtColor,
+    type: type,
     className: className,
-    value: value,
-    "aria-label": ariaLabel,
+    style: style,
     onClick: action,
-    disabled: disabled || loading,
+    value: value,
+    iconPosition: iconPosition,
     "data-testid": dataTestId,
     "data-event": eventId,
-    style: style,
-    type: type,
-    iconPosition: iconPosition
+    "aria-label": ariaLabel,
+    "aria-hidden": ariaHidden,
+    disabled: disabled || loading
   }, loading ? /*#__PURE__*/React.createElement(Spinner, null) : icon ? /*#__PURE__*/React.createElement(Icon, {
     icon: icon
   }) : null, value && /*#__PURE__*/React.createElement("span", null, value));
 };
 
 const {
-  normal: normal$1,
-  light: light$1,
-  lightGrey: lightGrey$1
+  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$1, /*#__PURE__*/rem('4px'), light$1, /*#__PURE__*/rem('200px'), /*#__PURE__*/rem('250px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$1), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$1), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$1), /*#__PURE__*/rem('45px'), props => props.visibleActions, /*#__PURE__*/rem('1280px'), /*#__PURE__*/rem('45px'), lightGrey$1, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('20px'), normal$1);
+})(["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);
 
 function useVisible(initialIsVisible) {
   const [isVisible, setIsVisible] = useState(initialIsVisible);
@@ -289,15 +350,20 @@ function useVisible(initialIsVisible) {
 
 const ButtonDropdown = props => {
   const {
-    className = 'button-dropdown',
     variant = 'solid',
-    color = 'green',
+    rounded = false,
+    color = 'purple500',
+    txtColor = 'white',
+    className = 'button-dropdown',
+    style,
+    actions = [],
     value = '',
-    icon = 'keyboardDown',
+    icon = 'add',
+    dataTestId = 'action-button-dropdown',
+    eventId = '',
     ariaLabel = '',
-    actions = [],
+    ariaHidden = false,
     data = null,
-    dataTestId = 'action-button-dropdown',
     startsOpen = false,
     disabled = false
   } = props;
@@ -313,20 +379,25 @@ const ButtonDropdown = props => {
   if (visibleActions.length === 0) return /*#__PURE__*/React.createElement(React.Fragment, null);
   return /*#__PURE__*/React.createElement(ActionsMenuStyle, {
     className: className,
+    style: style,
     visibleActions: visibleActions.length,
     ref: ref
   }, /*#__PURE__*/React.createElement(Button, {
     variant: variant,
+    rounded: rounded,
     color: color,
-    value: value,
-    icon: icon,
-    iconPosition: "right",
-    ariaLabel: ariaLabel,
+    txtColor: txtColor,
     action: evt => {
       evt.preventDefault();
       setIsVisible(!isVisible);
     },
-    dataTestId: dataTestId,
+    value: value,
+    iconPosition: "right",
+    icon: icon,
+    "data-testid": dataTestId,
+    "data-event": eventId,
+    ariaLabel: ariaLabel,
+    "aria-hidden": ariaHidden,
     disabled: disabled
   }), /*#__PURE__*/React.createElement("ul", {
     "data-testid": 'ul-action-menu',
@@ -348,111 +419,42 @@ const ButtonDropdown = props => {
   }, /*#__PURE__*/React.createElement("span", null, value))))));
 };
 
-const {
-  normal: normal$2,
-  light: light$2,
-  grey: grey$2,
-  lightGrey: lightGrey$2,
-  darkGrey: darkGrey$1,
-  green: green$1,
-  darkGreen: darkGreen$1,
-  orange: orange$1,
-  darkOrange: darkOrange$1,
-  red: red$1,
-  darkRed: darkRed$1,
-  purple: purple$1,
-  darkPurple: darkPurple$1,
-  blue: blue$1,
-  darkBlue: darkBlue$1
-} = colors;
-const {
-  bold: bold$1,
-  medium: medium$1
-} = fontWeight;
 const ButtonLinkStyle = /*#__PURE__*/_styled.a.withConfig({
   displayName: "styles__ButtonLinkStyle",
   componentId: "clge7v-0"
-})(["--button:", ";--txt:", ";--hover:", ";", " ", " ", " ", " ", " ", " ", " ", " ", " ", " border-width:", ";border-style:solid;border-color:var(--button);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";text-transform:uppercase;white-space:nowrap;text-decoration:none;transition-duration:0.3s;cursor:pointer;@media ", "{min-width:", ";}&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}> *:not(:last-child){margin-left:", ";margin-right:", ";}span{position:relative;font-size:0.75rem;font-weight:", ";letter-spacing:1px;color:", ";pointer-events:none;transition-duration:0.3s;order:", ";}svg{order:", ";width:auto;min-width:", ";height:", ";fill:", ";transition:0.3s;}", ""], green$1, light$2, darkGreen$1, props => props.color === 'green' && css`
-      --button: ${green$1};
-      --hover: ${darkGreen$1};
-    `, props => props.color === 'orange' && css`
-      --button: ${orange$1};
-      --hover: ${darkOrange$1};
-    `, props => props.color === 'red' && css`
-      --button: ${red$1};
-      --hover: ${darkRed$1};
-    `, props => props.color === 'grey' && css`
-      --button: ${grey$2};
-      --hover: ${darkGrey$1};
-    `, props => props.color === 'purple' && css`
-      --button: ${purple$1};
-      --hover: ${darkPurple$1};
-    `, props => props.color === 'white' && css`
-      --button: ${light$2};
-      --txt: ${normal$2};
-      --hover: ${lightGrey$2};
-    `, props => props.color === 'dark' && css`
-      --button: ${normal$2};
-      --hover: ${darkGrey$1};
-    `, props => props.color === 'blue' && css`
-      --button: ${blue$1};
-      --hover: ${darkBlue$1};
-    `, props => props.color === 'pulse' && css`
-      --button: ${red$1};
-      --hover: ${darkRed$1};
-      animation: ${pulseKeyframes} 1s infinite;
-    `, props => props.color === 'magic' && css`
-      --button: ${light$2};
-      --hover: ${lightGrey$2};
-    `, props => props.variant === 'outline' ? '3px' : 0, props => props.variant === 'text' ? 0 : '999px', props => props.variant === 'solid' ? 'var(--button)' : 'transparent', props => props.value ? rem('80px') : rem('32px'), /*#__PURE__*/rem('32px'), props => props.value ? `0 ${rem('20px')}` : 0, device.l, props => props.value ? rem('100px') : rem('32px'), props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? '5px' : 0, props => props.iconPosition === 'left' ? '5px' : 0, medium$1, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, /*#__PURE__*/rem('20px'), /*#__PURE__*/rem('20px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--button)', props => props.color === 'magic' && css`
-      position: relative;
-      background-image: linear-gradient(to bottom right, #ef5867, #5031a8);
-      height: ${rem('60px')};
-      padding: 0 ${rem('40px')};
-      overflow: hidden;
-
-      span {
-        font-size: 1rem;
-        font-weight: ${bold$1};
-      }
+})(["--bg:", ";--txt:", ";--hover:", ";border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";text-transform:uppercase;white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}> *:not(:last-child){margin-left:", ";margin-right:", ";}span{position:relative;font-size:", ";font-weight:", ";letter-spacing:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => {
+  var _props$color;
 
-      &:before {
-        --size: 0;
+  return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
+}, props => {
+  var _props$txtColor;
 
-        content: '';
-        position: absolute;
-        left: var(--x);
-        top: var(--y);
-        width: var(--size);
-        height: var(--size);
-        background: radial-gradient(circle closest-side, #5031a8, transparent);
-        -webkit-transform: translate(-50%, -50%);
-        transform: translate(-50%, -50%);
-        -webkit-transition: width 0.2s ease, height 0.2s ease;
-        transition: width 0.2s ease, height 0.2s ease;
-      }
+  return useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'black').color;
+}, props => {
+  var _props$color2;
 
-      &:hover:before {
-        --size: ${rem('200px')};
-      }
-    `);
+  return props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor((_props$color2 = props.color) != null ? _props$color2 : 'black').hover;
+}, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? rem('80px') : rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, /*#__PURE__*/rem(typography.defaultSize), typography.medium, typography.letterSpacing, /*#__PURE__*/rem(typography.defaultSize), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
 
 const ButtonLink = props => {
   const {
     variant = 'solid',
-    color = 'green',
-    querySelector = '.button-link',
+    rounded = false,
+    color = 'purple500',
+    txtColor = 'white',
     className = 'button-link',
+    style,
+    action = () => {},
     url,
     blank = false,
-    icon = '',
-    iconPosition = 'left',
+    rel = undefined,
     value = '',
-    action = () => {},
+    iconPosition = 'left',
+    icon = '',
     dataTestId = '',
     eventId = '',
-    style,
-    rel = undefined
+    ariaLabel = '',
+    ariaHidden = false
   } = props;
 
   const getRelationshipAttributes = () => {
@@ -460,41 +462,42 @@ const ButtonLink = props => {
     return blank ? 'noopener noreferrer' : '';
   };
 
-  useMouseMoveEffect({
-    querySelector
-  });
   return /*#__PURE__*/React.createElement(ButtonLinkStyle, {
     variant: variant,
+    rounded: rounded,
     color: color,
+    txtColor: txtColor,
     className: `button ${className}`,
+    style: style,
+    onClick: action,
     href: url,
     target: blank ? '_blank' : '',
+    rel: getRelationshipAttributes(),
     value: value,
-    onClick: action,
+    iconPosition: iconPosition,
     "data-testid": dataTestId,
     "data-event": eventId,
-    style: style,
-    iconPosition: iconPosition,
-    rel: getRelationshipAttributes()
+    "aria-label": ariaLabel,
+    "aria-hidden": ariaHidden
   }, icon && /*#__PURE__*/React.createElement(Icon, {
     icon: icon
   }), value && /*#__PURE__*/React.createElement("span", null, value));
 };
 
 const {
-  normal: normal$3,
-  light: light$3,
-  green: green$2,
-  darkGreen: darkGreen$2,
-  red: red$2,
-  darkRed: darkRed$2,
-  grey: grey$3,
-  lightGrey: lightGrey$3
+  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: "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$2 : normal$3, props => props.disabled ? grey$3 : props.error ? red$2 : null, props => props.error ? red$2 : 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 ? darkRed : normal$1, props => props.disabled ? grey$1 : props.error ? red : null, props => props.error ? red : null);
 const CheckboxLabel = /*#__PURE__*/_styled.span.withConfig({
   displayName: "styles__CheckboxLabel",
   componentId: "w5t014-1"
@@ -502,11 +505,11 @@ const CheckboxLabel = /*#__PURE__*/_styled.span.withConfig({
 const CheckboxInput = /*#__PURE__*/_styled.input.withConfig({
   displayName: "styles__CheckboxInput",
   componentId: "w5t014-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){border-color:", ";&:checked ~ span{border-color:", ";}}"], props => props.error ? red$2 : green$2, props => props.error ? darkRed$2 : darkGreen$2, lightGrey$3, grey$3, lightGrey$3, light$3, props => props.error ? darkRed$2 : darkGreen$2, props => props.error ? darkRed$2 : darkGreen$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);
 const Checkmark = /*#__PURE__*/_styled.span.withConfig({
   displayName: "styles__Checkmark",
   componentId: "w5t014-3"
-})(["position:absolute;top:0;left:0;border:", " solid ", ";border-radius:100%;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('2px'), props => props.error ? red$2 : grey$3, /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('9px'), light$3, /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('3px'));
+})(["position:absolute;top:0;left:0;border:", " solid ", ";border-radius:100%;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('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'));
 
 const Checkbox = props => {
   const {
@@ -540,16 +543,16 @@ const Checkbox = props => {
 };
 
 const {
-  light: light$4,
-  green: green$3,
-  darkGreen: darkGreen$3,
-  grey: grey$4,
-  lightGrey: lightGrey$4
+  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: "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$4 : props.checked ? darkGreen$3 : grey$4, /*#__PURE__*/rem('6px'), props => props.disabled ? lightGrey$4 : props.checked ? green$3 : light$4, /*#__PURE__*/rem('50px'), props => props.disabled ? 'auto' : 'pointer', grey$4, props => props.disabled ? lightGrey$4 : props.checked ? green$3 : lightGrey$4, props => props.disabled ? grey$4 : props.checked ? light$4 : 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: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);
 const CheckboxLabel$1 = /*#__PURE__*/_styled.span.withConfig({
   displayName: "styles__CheckboxLabel",
   componentId: "itly0z-1"
@@ -557,11 +560,11 @@ const CheckboxLabel$1 = /*#__PURE__*/_styled.span.withConfig({
 const CheckboxInput$1 = /*#__PURE__*/_styled.input.withConfig({
   displayName: "styles__CheckboxInput",
   componentId: "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$4, light$4, grey$4, grey$4, grey$4, lightGrey$4, light$4);
+})(["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);
 const Checkmark$1 = /*#__PURE__*/_styled.span.withConfig({
   displayName: "styles__Checkmark",
   componentId: "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$4, light$4, /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('9px'), props => props.disabled ? light$4 : green$3, /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('3px'));
+})(["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'));
 
 const CheckboxButton = props => {
   const {
@@ -767,19 +770,20 @@ const icons = {
   "moonbeam": 'M21.142 5.645c2.964 1.257 4.94 4.356 4.715 7.499-5.299 0-10.598 0.045-15.896-0.045 0-2.111 0.718-4.266 2.245-5.748 2.245-2.29 5.972-3.009 8.936-1.706z M20.917 25.852c0.314 0 0.584 0.18 0.584 0.404s-0.27 0.404-0.584 0.404h-8.532c-0.314 0-0.584-0.18-0.584-0.404s0.269-0.404 0.584-0.404h8.532z M10.544 26.661c0.322 0 0.584-0.261 0.584-0.584s-0.261-0.584-0.584-0.584c-0.322 0-0.584 0.261-0.584 0.584s0.261 0.584 0.584 0.584z M15.663 24.505c0.322 0 0.584-0.261 0.584-0.584s-0.261-0.584-0.584-0.584c-0.322 0-0.584 0.261-0.584 0.584s0.261 0.584 0.584 0.584z M25.677 23.338c0.314 0 0.584 0.269 0.584 0.584s-0.269 0.584-0.584 0.584h-8.352c-0.314 0-0.584-0.269-0.584-0.584s0.27-0.584 0.584-0.584h8.352z M4.706 22.35c0.322 0 0.584-0.261 0.584-0.584s-0.261-0.584-0.584-0.584c-0.322 0-0.584 0.261-0.584 0.584s0.261 0.584 0.584 0.584z M13.014 21.182c0.314 0 0.584 0.27 0.584 0.584s-0.27 0.584-0.584 0.584h-6.87c-0.314 0-0.584-0.27-0.584-0.584s0.269-0.584 0.584-0.584h6.87z M28.416 21.182c0.314 0 0.584 0.27 0.584 0.584s-0.269 0.584-0.584 0.584h-13.651c-0.314 0-0.584-0.27-0.584-0.584s0.269-0.584 0.584-0.584h13.651z M25.857 19.027c0.314 0 0.584 0.27 0.584 0.584s-0.269 0.584-0.584 0.584h-16.75c-0.314 0-0.584-0.27-0.584-0.584s0.269-0.584 0.584-0.584h16.75z M7.266 20.195c0.322 0 0.584-0.261 0.584-0.584s-0.261-0.584-0.584-0.584c-0.322 0-0.584 0.261-0.584 0.584s0.261 0.584 0.584 0.584z M22.354 16.916c0.314 0 0.584 0.269 0.584 0.584s-0.269 0.584-0.584 0.584h-16.75c-0.314 0-0.584-0.269-0.584-0.584s0.269-0.584 0.584-0.584h16.75z M3.584 18.084c0.322 0 0.584-0.261 0.584-0.584s-0.261-0.584-0.584-0.584c-0.322 0-0.584 0.261-0.584 0.584s0.261 0.584 0.584 0.584z M7.266 15.929c0.322 0 0.584-0.261 0.584-0.584s-0.261-0.584-0.584-0.584c-0.322 0-0.584 0.261-0.584 0.584s0.261 0.584 0.584 0.584z M27.473 14.761c0.314 0 0.584 0.27 0.584 0.584s-0.269 0.584-0.584 0.584h-18.231c-0.314 0-0.584-0.27-0.584-0.584s0.269-0.584 0.584-0.584h18.231z',
   "solidity": 'M20.535 3l4.177 7.429h-8.357l-4.177 7.427-4.177-7.427 4.177-7.429h8.357zM16.398 21.571l4.177-7.427 4.18 7.427-4.18 7.429h-8.357l-4.177-7.429h8.357z',
   "metamask": 'M27.043 16.037l1.128-1.32c0.006-0.012 0.008-0.025 0.008-0.038s-0.003-0.026-0.008-0.038c-0.001-0.013-0.005-0.025-0.012-0.036s-0.016-0.020-0.027-0.026l-0.415-0.299 0.722-0.66c0.005-0.012 0.008-0.025 0.008-0.038s-0.003-0.026-0.008-0.038c-0.001-0.014-0.005-0.027-0.012-0.039s-0.016-0.022-0.027-0.030l-0.514-0.399 0.706-0.537c0.011-0.009 0.021-0.021 0.027-0.034s0.010-0.028 0.011-0.042c0.002-0.015-0.001-0.031-0.008-0.044s-0.018-0.025-0.031-0.033l-0.484-0.376 0.837-4.053v-0.046l-1.274-3.838c-0.011-0.020-0.029-0.035-0.050-0.043s-0.044-0.009-0.066-0.003v0l-8.183 3.071h-6.778l-8.168-3.071h-0.077c-0.022 0.015-0.038 0.037-0.046 0.061l-1.274 3.838c-0.004 0.015-0.004 0.031 0 0.046l0.852 4.053-0.507 0.376c-0.012 0.009-0.022 0.020-0.029 0.034s-0.010 0.028-0.010 0.043c0.001 0.015 0.005 0.029 0.011 0.043s0.016 0.025 0.027 0.034l0.722 0.537-0.514 0.407c-0.011 0.008-0.020 0.018-0.027 0.030s-0.011 0.025-0.011 0.039c-0.007 0.025-0.007 0.052 0 0.077l0.714 0.66-0.415 0.299c-0.017 0.018-0.030 0.038-0.038 0.062-0.008 0.025-0.008 0.052 0 0.077l1.136 1.32-1.75 5.42c-0.004 0.009-0.005 0.018-0.005 0.027s0.002 0.018 0.005 0.027l1.635 5.588c0.003 0.012 0.008 0.024 0.015 0.034s0.017 0.019 0.027 0.025c0.011 0.006 0.023 0.011 0.035 0.012s0.025 0.001 0.037-0.003l5.688-1.535 1.090 0.89 2.303 1.535h4l2.303-1.574 1.067-0.875 5.696 1.535c0.025 0.007 0.053 0.004 0.076-0.009s0.040-0.035 0.047-0.060l1.643-5.588v-0.054l-1.812-5.42zM11.060 19.314c-0.018-0.008-0.034-0.020-0.045-0.037s-0.017-0.036-0.017-0.055c0-0.020 0.006-0.039 0.017-0.055s0.027-0.029 0.045-0.037l2.011-0.921c0.023-0.009 0.047-0.009 0.070 0s0.041 0.025 0.053 0.046l0.837 1.75c0.010 0.013 0.015 0.029 0.015 0.046s-0.005 0.033-0.015 0.046c-0.007 0.014-0.018 0.026-0.032 0.034s-0.029 0.012-0.045 0.012l-2.894-0.829zM18.222 26.146c-0.016 0.009-0.035 0.015-0.054 0.015s-0.037-0.005-0.054-0.015l-0.238-0.192h-3.746l-0.223 0.192c-0.020 0.008-0.042 0.008-0.061 0h-0.046c-0.017-0.011-0.031-0.025-0.040-0.043s-0.014-0.037-0.014-0.057l0.276-2.226c0.008-0.025 0.025-0.046 0.046-0.061l0.476-0.338c0.008-0.004 0.018-0.005 0.027-0.005s0.018 0.002 0.027 0.005h2.863l0.484 0.33c0.010 0.027 0.010 0.057 0 0.084v0l0.276 2.211c0.007 0.016 0.010 0.034 0.008 0.051s-0.007 0.034-0.016 0.049h0.008zM20.971 19.307l-2.863 0.844h-0.061c-0.009-0.025-0.009-0.052 0-0.077-0.003-0.018-0.003-0.036 0-0.054l0.837-1.758c0.014-0.021 0.034-0.037 0.058-0.045s0.049-0.009 0.073-0.001l2.019 0.921c0.019 0.008 0.034 0.023 0.044 0.041s0.013 0.039 0.010 0.059c-0.007 0.025-0.024 0.047-0.047 0.060s-0.050 0.016-0.076 0.009h0.008z',
-  "launch": 'M19.1153 6C18.4467 6 17.9048 6.54196 17.9048 7.2105C17.9048 7.87905 18.4467 8.42101 19.1153 8.42101H21.8671L13.4974 16.7907C13.0247 17.2634 13.0247 18.0299 13.4974 18.5026C13.9701 18.9753 14.7366 18.9753 15.2093 18.5026L23.579 10.1329V12.8847C23.579 13.5533 24.121 14.0952 24.7895 14.0952C25.458 14.0952 26 13.5533 26 12.8847V7.2105C26 6.54196 25.458 6 24.7895 6H19.1153Z M9.14146 8.16167C8.8816 8.16167 8.63239 8.26489 8.44864 8.44864C8.26489 8.63239 8.16167 8.8816 8.16167 9.14146V22.8585C8.16167 23.1184 8.26489 23.3676 8.44864 23.5514C8.63239 23.7351 8.8816 23.8383 9.14146 23.8383H22.8585C23.1184 23.8383 23.3676 23.7351 23.5514 23.5514C23.7351 23.3676 23.8383 23.1184 23.8383 22.8585V19.055C23.8383 18.5139 24.277 18.0752 24.8181 18.0752C25.3592 18.0752 25.7979 18.5139 25.7979 19.055V22.8585C25.7979 23.6381 25.4882 24.3858 24.937 24.937C24.3858 25.4882 23.6381 25.7979 22.8585 25.7979H9.14146C8.36189 25.7979 7.61424 25.4882 7.06301 24.937C6.51177 24.3858 6.20208 23.6381 6.20208 22.8585V9.14146C6.20208 8.36189 6.51177 7.61425 7.06301 7.06301C7.61425 6.51177 8.36189 6.20208 9.14146 6.20208H12.945C13.4861 6.20208 13.9248 6.64075 13.9248 7.18187C13.9248 7.723 13.4861 8.16167 12.945 8.16167H9.14146Z M6.92011 6.92011C7.50925 6.33097 8.30829 6 9.14146 6H12.945C13.5977 6 14.1268 6.52914 14.1268 7.18187C14.1268 7.83461 13.5977 8.36375 12.945 8.36375H9.14146C8.9352 8.36375 8.73738 8.44569 8.59153 8.59153C8.44568 8.73738 8.36375 8.9352 8.36375 9.14146V22.8585C8.36375 23.0648 8.44568 23.2626 8.59153 23.4085C8.73738 23.5543 8.9352 23.6363 9.14146 23.6363H22.8585C23.0648 23.6363 23.2626 23.5543 23.4085 23.4085C23.5543 23.2626 23.6363 23.0648 23.6363 22.8585V19.055C23.6363 18.4023 24.1654 17.8732 24.8181 17.8732C25.4709 17.8732 26 18.4023 26 19.055V22.8585C26 23.6917 25.669 24.4908 25.0799 25.0799C24.4908 25.669 23.6917 26 22.8585 26H9.14146C8.30829 26 7.50925 25.669 6.92011 25.0799C6.33097 24.4907 6 23.6917 6 22.8585V9.14146C6 8.30829 6.33097 7.50925 6.92011 6.92011ZM9.14146 6.40416C8.41548 6.40416 7.71924 6.69256 7.2059 7.2059C6.69256 7.71924 6.40416 8.41548 6.40416 9.14146V22.8585C6.40416 23.5845 6.69256 24.2808 7.2059 24.7941C7.71924 25.3074 8.41548 25.5958 9.14146 25.5958H22.8585C23.5845 25.5958 24.2808 25.3074 24.7941 24.7941C25.3074 24.2808 25.5958 23.5845 25.5958 22.8585V19.055C25.5958 18.6255 25.2476 18.2773 24.8181 18.2773C24.3886 18.2773 24.0404 18.6255 24.0404 19.055V22.8585C24.0404 23.172 23.9159 23.4726 23.6943 23.6943C23.4726 23.9159 23.172 24.0404 22.8585 24.0404H9.14146C8.82801 24.0404 8.52739 23.9159 8.30575 23.6943C8.0841 23.4726 7.95958 23.172 7.95958 22.8585V9.14146C7.95958 8.828 8.0841 8.52739 8.30575 8.30575C8.52739 8.0841 8.828 7.95958 9.14146 7.95958H12.945C13.3745 7.95958 13.7227 7.61139 13.7227 7.18187C13.7227 6.75236 13.3745 6.40416 12.945 6.40416H9.14146Z'
+  "launch": 'M19.1153 6C18.4467 6 17.9048 6.54196 17.9048 7.2105C17.9048 7.87905 18.4467 8.42101 19.1153 8.42101H21.8671L13.4974 16.7907C13.0247 17.2634 13.0247 18.0299 13.4974 18.5026C13.9701 18.9753 14.7366 18.9753 15.2093 18.5026L23.579 10.1329V12.8847C23.579 13.5533 24.121 14.0952 24.7895 14.0952C25.458 14.0952 26 13.5533 26 12.8847V7.2105C26 6.54196 25.458 6 24.7895 6H19.1153Z M9.14146 8.16167C8.8816 8.16167 8.63239 8.26489 8.44864 8.44864C8.26489 8.63239 8.16167 8.8816 8.16167 9.14146V22.8585C8.16167 23.1184 8.26489 23.3676 8.44864 23.5514C8.63239 23.7351 8.8816 23.8383 9.14146 23.8383H22.8585C23.1184 23.8383 23.3676 23.7351 23.5514 23.5514C23.7351 23.3676 23.8383 23.1184 23.8383 22.8585V19.055C23.8383 18.5139 24.277 18.0752 24.8181 18.0752C25.3592 18.0752 25.7979 18.5139 25.7979 19.055V22.8585C25.7979 23.6381 25.4882 24.3858 24.937 24.937C24.3858 25.4882 23.6381 25.7979 22.8585 25.7979H9.14146C8.36189 25.7979 7.61424 25.4882 7.06301 24.937C6.51177 24.3858 6.20208 23.6381 6.20208 22.8585V9.14146C6.20208 8.36189 6.51177 7.61425 7.06301 7.06301C7.61425 6.51177 8.36189 6.20208 9.14146 6.20208H12.945C13.4861 6.20208 13.9248 6.64075 13.9248 7.18187C13.9248 7.723 13.4861 8.16167 12.945 8.16167H9.14146Z M6.92011 6.92011C7.50925 6.33097 8.30829 6 9.14146 6H12.945C13.5977 6 14.1268 6.52914 14.1268 7.18187C14.1268 7.83461 13.5977 8.36375 12.945 8.36375H9.14146C8.9352 8.36375 8.73738 8.44569 8.59153 8.59153C8.44568 8.73738 8.36375 8.9352 8.36375 9.14146V22.8585C8.36375 23.0648 8.44568 23.2626 8.59153 23.4085C8.73738 23.5543 8.9352 23.6363 9.14146 23.6363H22.8585C23.0648 23.6363 23.2626 23.5543 23.4085 23.4085C23.5543 23.2626 23.6363 23.0648 23.6363 22.8585V19.055C23.6363 18.4023 24.1654 17.8732 24.8181 17.8732C25.4709 17.8732 26 18.4023 26 19.055V22.8585C26 23.6917 25.669 24.4908 25.0799 25.0799C24.4908 25.669 23.6917 26 22.8585 26H9.14146C8.30829 26 7.50925 25.669 6.92011 25.0799C6.33097 24.4907 6 23.6917 6 22.8585V9.14146C6 8.30829 6.33097 7.50925 6.92011 6.92011ZM9.14146 6.40416C8.41548 6.40416 7.71924 6.69256 7.2059 7.2059C6.69256 7.71924 6.40416 8.41548 6.40416 9.14146V22.8585C6.40416 23.5845 6.69256 24.2808 7.2059 24.7941C7.71924 25.3074 8.41548 25.5958 9.14146 25.5958H22.8585C23.5845 25.5958 24.2808 25.3074 24.7941 24.7941C25.3074 24.2808 25.5958 23.5845 25.5958 22.8585V19.055C25.5958 18.6255 25.2476 18.2773 24.8181 18.2773C24.3886 18.2773 24.0404 18.6255 24.0404 19.055V22.8585C24.0404 23.172 23.9159 23.4726 23.6943 23.6943C23.4726 23.9159 23.172 24.0404 22.8585 24.0404H9.14146C8.82801 24.0404 8.52739 23.9159 8.30575 23.6943C8.0841 23.4726 7.95958 23.172 7.95958 22.8585V9.14146C7.95958 8.828 8.0841 8.52739 8.30575 8.30575C8.52739 8.0841 8.828 7.95958 9.14146 7.95958H12.945C13.3745 7.95958 13.7227 7.61139 13.7227 7.18187C13.7227 6.75236 13.3745 6.40416 12.945 6.40416H9.14146Z',
+  "arrow-external": "M6 6v5.663h9.542L6.666 21.796v4.183h4.628l9.222-10.917V26H26V6H6z"
 };
 
 const {
-  grey: grey$5,
-  lightGrey: lightGrey$5,
-  red: red$3,
-  purple: purple$2
+  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$3 : grey$5, props => props.minimal ? 0 : '6px', props => props.minimal ? rem('40px') : rem('50px'), props => props.minimal ? 0 : rem('10px'), purple$2, lightGrey$5, grey$5, red$3, props => props.error ? red$3 : grey$5, grey$5, grey$5, grey$5, props => props.icon && css`
+})(["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;
@@ -793,11 +797,11 @@ const TextFieldInputStyle = /*#__PURE__*/_styled.input.withConfig({
     `);
 
 const {
-  light: light$5,
-  grey: grey$6,
-  lightGrey: lightGrey$6,
-  red: red$4,
-  purple: purple$3
+  light: light$3,
+  grey: grey$4,
+  lightGrey: lightGrey$4,
+  red: red$2,
+  purple500: purple500$1
 } = colors;
 const Wrapper$1 = _styled.div`
   position: relative;
@@ -805,7 +809,7 @@ const Wrapper$1 = _styled.div`
 const TextAreaStyle = _styled.textarea`
   border-width: ${props => props.minimal ? `0 0 ${rem('1px')} 0` : rem('1px')};
   border-style: solid;
-  border-color: ${props => props.error ? red$4 : grey$6};
+  border-color: ${props => props.error ? red$2 : grey$4};
   border-radius: ${props => props.minimal ? 0 : '6px'};
   width: 100%;
   height: ${props => props.height || rem('100px')};
@@ -818,17 +822,17 @@ const TextAreaStyle = _styled.textarea`
   resize: none;
 
   &:focus {
-    border-color: ${purple$3};
+    border-color: ${purple500$1};
     outline: none;
   }
 
   &:disabled {
-    background-color: ${lightGrey$6};
-    color: ${grey$6};
+    background-color: ${lightGrey$4};
+    color: ${grey$4};
   }
 
   &:invalid {
-    border-color: ${red$4};
+    border-color: ${red$2};
     outline: none;
     box-shadow: none;
     -webkit-box-shadow: none;
@@ -836,21 +840,21 @@ const TextAreaStyle = _styled.textarea`
   }
 
   &:required {
-    border-color: ${props => props.error ? red$4 : grey$6};
+    border-color: ${props => props.error ? red$2 : grey$4};
   }
 
   &::placeholder {
-    color: ${grey$6};
+    color: ${grey$4};
     opacity: 1;
   }
 
   &:-ms-input-placeholder {
-    color: ${grey$6};
+    color: ${grey$4};
     opacity: 1;
   }
 
   &::-ms-input-placeholder {
-    color: ${grey$6};
+    color: ${grey$4};
     opacity: 1;
   }
 `;
@@ -858,28 +862,28 @@ 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$5)};
+  background-color: ${/*#__PURE__*/transparentize(0.15, light$3)};
   padding: 0 ${/*#__PURE__*/rem('5px')};
 
   span {
     font-size: 0.75rem;
-    color: ${grey$6};
+    color: ${grey$4};
 
     &.negative {
-      color: ${red$4};
+      color: ${red$2};
     }
   }
 `;
 
 const {
-  normal: normal$4,
-  grey: grey$7,
-  lightGrey: lightGrey$7,
-  red: red$5,
-  purple: purple$4
+  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$5 : grey$7};
+  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>");
   background-position: calc(100% - 15px) center;
@@ -894,24 +898,24 @@ const SelectStyle = _styled.select`
   transition-duration: 0.3s;
 
   &:hover {
-    border-color: ${purple$4};
+    border-color: ${purple500$2};
   }
 
   &:-moz-focusring {
     color: transparent;
-    text-shadow: 0 0 0 ${normal$4};
+    text-shadow: 0 0 0 ${normal$2};
   }
 
   &:disabled {
-    background-color: ${lightGrey$7};
-    color: ${grey$7};
+    background-color: ${lightGrey$5};
+    color: ${grey$5};
     pointer-events: none;
   }
 
   ${props => props.minimal && css`
       border: 0;
       border-bottom: ${rem('1px')} solid
-        ${props => props.error ? red$5 : grey$7};
+        ${props => props.error ? red$3 : grey$5};
       border-radius: 0;
       background-position: 100% center;
       height: ${rem('40px')};
@@ -919,19 +923,19 @@ const SelectStyle = _styled.select`
 
       &:disabled {
         background-color: transparent;
-        color: ${grey$7};
+        color: ${grey$5};
       }
     `}
 `;
 
 const {
-  green: green$4,
-  red: red$6
+  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$4 : red$6, TextFieldInputStyle, TextAreaStyle, SelectStyle, /*#__PURE__*/rem('5px'));
+})(["display:block;font-size:0.7rem;color:", ";", " + &,", " + &,", " + &{margin-top:", ";}"], props => props.color === 'success' ? green$2 : red$4, TextFieldInputStyle, TextAreaStyle, SelectStyle, /*#__PURE__*/rem('5px'));
 
 const ErrorField = props => {
   const {
@@ -967,18 +971,18 @@ const Icon = props => {
 };
 
 const {
-  grey: grey$8
+  grey: grey$6
 } = colors;
 const {
-  bold: bold$2
-} = fontWeight;
+  bold
+} = typography;
 const LabelStyle = /*#__PURE__*/_styled.label.withConfig({
   displayName: "styles__LabelStyle",
   componentId: "pbv9we-0"
-})(["display:flex;align-items:center;font-size:0.75rem;font-weight:", ";color:", ";text-transform:uppercase;svg{width:auto;height:", ";}"], bold$2, grey$8, /*#__PURE__*/rem('15px'));
+})(["display:flex;align-items:center;font-size:0.75rem;font-weight:", ";color:", ";text-transform:uppercase;svg{width:auto;height:", ";}"], bold, grey$6, /*#__PURE__*/rem('15px'));
 
 const {
-  grey: grey$9
+  grey: grey$7
 } = colors;
 
 const Label = props => {
@@ -993,12 +997,12 @@ const Label = props => {
     style: style
   }, value, kai ? /*#__PURE__*/React.createElement(Icon, {
     icon: "kai",
-    fill: grey$9
+    fill: grey$7
   }) : null);
 };
 
 const {
-  light: light$6
+  light: light$4
 } = colors;
 const rotation = keyframes`
   from {
@@ -1011,15 +1015,15 @@ const rotation = keyframes`
 const Loading = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__Loading",
   componentId: "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$6, 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 || light$4, props => props.size || rem('20px'), props => props.size || rem('20px'), rotation);
 
 const {
-  grey: grey$a
+  grey: grey$8
 } = colors;
 
 const Spinner = props => {
   const {
-    fill = grey$a,
+    fill = grey$8,
     size = '20px',
     className = 'spinner',
     style
@@ -1032,48 +1036,24 @@ const Spinner = props => {
   });
 };
 
-const {
-  normal: normal$5,
-  light: light$7,
-  grey: grey$b,
-  green: green$5,
-  orange: orange$2,
-  red: red$7
-} = colors;
-const {
-  bold: bold$3
-} = fontWeight;
 const TagWrapper = /*#__PURE__*/_styled.span.withConfig({
   displayName: "styles__TagWrapper",
   componentId: "sc-1ghratr-0"
-})(["display:inline-block;border:", " solid ", ";border-radius:", ";background-color:", ";max-width:", ";padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:0.1em;line-height:1;color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;", " ", " ", " ", " ", " ", ""], /*#__PURE__*/rem('2px'), grey$b, /*#__PURE__*/rem('3px'), grey$b, /*#__PURE__*/rem('150px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('8px'), /*#__PURE__*/rem('12px'), bold$3, light$7, props => props.color === 'green' && css`
-      border-color: ${green$5};
-      background-color: ${green$5};
-      color: ${props.variant === 'solid' ? light$7 : green$5};
-    `, props => props.color === 'orange' && css`
-      border-color: ${orange$2};
-      background-color: ${orange$2};
-      color: ${props.variant === 'solid' ? light$7 : orange$2};
-    `, props => props.color === 'red' && css`
-      border-color: ${red$7};
-      background-color: ${red$7};
-      color: ${props.variant === 'solid' ? light$7 : red$7};
-    `, props => props.color === 'grey' && css`
-      border-color: ${grey$b};
-      background-color: ${grey$b};
-      color: ${props.variant === 'solid' ? light$7 : grey$b};
-    `, props => props.color === 'light' && css`
-      border-color: ${light$7};
-      background-color: ${light$7};
-      color: ${props.variant === 'solid' ? normal$5 : light$7};
-    `, props => props.variant === 'outline' && css`
-      background-color: transparent;
-    `);
+})(["--bg:", ";--txt:", ";display:inline-block;border:", " solid var(--bg);border-radius:", ";background-color:", ";padding:", " ", ";font-size:", ";font-weight:", ";text-transform:uppercase;letter-spacing:", ";line-height:1;color:", ";white-space:nowrap;"], props => {
+  var _props$color;
+
+  return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
+}, props => {
+  var _props$txtColor;
+
+  return useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'black').color;
+}, /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('4px'), props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('8px'), /*#__PURE__*/rem('12px'), typography.medium, /*#__PURE__*/rem('1px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)');
 
 const Tag = props => {
   const {
     variant = 'solid',
-    color = 'grey',
+    color = 'purple500',
+    txtColor = 'white',
     value,
     className = 'tag',
     style
@@ -1082,34 +1062,39 @@ const Tag = props => {
     className: className,
     variant: variant,
     color: color,
+    txtColor: txtColor,
     style: style,
     title: value
   }, value);
 };
 
-const {
-  grey: grey$c,
-  light: light$8
-} = colors;
-const {
-  bold: bold$4
-} = fontWeight;
 const TagWrapper$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__TagWrapper",
   componentId: "db57da-0"
-})(["display:flex;border:", " solid ", ";border-radius:", ";line-height:1;max-width:100%;width:max-content;overflow:hidden;span{display:inline-block;padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:0.1em;&.label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-transform:uppercase;}&.value{background-color:", ";font-weight:", ";color:", ";}}&:not(:first-child){margin-left:", ";}"], /*#__PURE__*/rem('2px'), grey$c, /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('8px'), /*#__PURE__*/rem('12px'), bold$4, grey$c, bold$4, light$8, /*#__PURE__*/rem('5px'));
+})(["--bg:", ";--valueColor:", ";display:flex;border:", " solid var(--bg);border-radius:", ";line-height:1;max-width:100%;width:max-content;overflow:hidden;span{display:inline-block;padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:", ";&.label{flex:1;color:var(--bg);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-transform:uppercase;}&.value{background-color:var(--bg);color:var(--valueColor);}}&:not(:first-child){margin-left:", ";}"], props => {
+  var _props$color;
+
+  return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
+}, props => {
+  var _props$valueColor;
+
+  return useColor((_props$valueColor = props.valueColor) != null ? _props$valueColor : 'black').color;
+}, /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('8px'), /*#__PURE__*/rem('12px'), typography.medium, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('5px'));
 
 const TagNumber = props => {
   const {
-    label,
-    value,
     className = 'tag-number',
-    style
+    style,
+    color = 'purple500',
+    valueColor = 'white',
+    label,
+    value
   } = props;
   return /*#__PURE__*/React.createElement(TagWrapper$1, {
     className: className,
     style: style,
-    title: label
+    color: color,
+    valueColor: valueColor
   }, /*#__PURE__*/React.createElement("span", {
     className: "label"
   }, label), /*#__PURE__*/React.createElement("span", {
@@ -1243,11 +1228,11 @@ const Select = props => {
 };
 
 const {
-  normal: normal$6,
-  light: light$9,
-  grey: grey$d,
-  lightGrey: lightGrey$8,
-  purple: purple$5,
+  normal: normal$3,
+  light: light$5,
+  grey: grey$9,
+  lightGrey: lightGrey$6,
+  purple500: purple500$3,
   lightPurple
 } = colors;
 const SelectWrapper = _styled.div`
@@ -1257,16 +1242,16 @@ const SelectWrapper = _styled.div`
     }
 
     &__control {
-      border-color: ${grey$d};
+      border-color: ${grey$9};
       min-height: ${/*#__PURE__*/rem('50px')};
       transition-duration: 0.3s;
 
       &:hover {
-        border-color: ${purple$5};
+        border-color: ${purple500$3};
       }
 
       &--is-focused {
-        border-color: ${purple$5};
+        border-color: ${purple500$3};
         box-shadow: none;
       }
     }
@@ -1277,15 +1262,15 @@ const SelectWrapper = _styled.div`
     }
 
     &__placeholder {
-      color: ${grey$d};
+      color: ${grey$9};
     }
 
     &__input {
-      color: ${normal$6};
+      color: ${normal$3};
     }
 
     &__single-value {
-      color: ${normal$6};
+      color: ${normal$3};
     }
 
     &__indicator {
@@ -1305,7 +1290,7 @@ const SelectWrapper = _styled.div`
       }
 
       &-separator {
-        background-color: ${grey$d};
+        background-color: ${grey$9};
       }
     }
 
@@ -1313,18 +1298,18 @@ const SelectWrapper = _styled.div`
       transition-duration: 0.3s;
 
       &:hover {
-        background-color: ${purple$5};
-        color: ${light$9};
+        background-color: ${purple500$3};
+        color: ${light$5};
       }
 
       &--is-focused {
-        background-color: ${purple$5};
-        color: ${light$9};
+        background-color: ${purple500$3};
+        color: ${light$5};
       }
 
       &--is-selected {
         background-color: ${lightPurple};
-        color: ${normal$6};
+        color: ${normal$3};
       }
     }
   }
@@ -1352,14 +1337,14 @@ const SelectWrapper = _styled.div`
 
   .select__option--is-selected {
     svg {
-      fill: ${normal$6};
+      fill: ${normal$3};
       transition-duration: 0.3s;
     }
   }
 
   .select__option--is-focused {
     svg {
-      fill: ${light$9};
+      fill: ${light$5};
       transition-duration: 0.3s;
     }
   }
@@ -1370,12 +1355,12 @@ const SelectWrapper = _styled.div`
 `;
 const SelectGroupLabel = _styled.span`
   font-size: ${/*#__PURE__*/rem('12px')};
-  color: ${lightGrey$8};
+  color: ${lightGrey$6};
 
   + .tag {
-    border-color: ${lightGrey$8};
-    background-color: ${lightGrey$8};
-    color: ${grey$d};
+    border-color: ${lightGrey$6};
+    background-color: ${lightGrey$6};
+    color: ${grey$9};
   }
 `;
 
@@ -1446,16 +1431,16 @@ const SelectInteractive = ({
 };
 
 const {
-  normal: normal$7,
-  grey: grey$e,
-  lightGrey: lightGrey$9,
-  red: red$8,
+  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-style: solid;
-  border-color: ${props => props.error ? red$8 : grey$e};
+  border-color: ${props => props.error ? red$5 : grey$a};
   border-radius: ${/*#__PURE__*/rem('6px')};
   display: flex;
   overflow: hidden;
@@ -1463,7 +1448,7 @@ const Wrapper$2 = _styled.div`
   input {
     flex: 1;
     border: 0;
-    color: ${props => props.error ? red$8 : normal$7};
+    color: ${props => props.error ? red$5 : normal$4};
 
     &:disabled {
       margin: 0;
@@ -1478,10 +1463,10 @@ 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-style: solid;
-  border-color: ${props => props.error ? red$8 : grey$e};
-  background-color: ${props => props.error ? lightRed : lightGrey$9};
+  border-color: ${props => props.error ? red$5 : grey$a};
+  background-color: ${props => props.error ? lightRed : lightGrey$7};
   padding: 0 ${/*#__PURE__*/rem('15px')};
-  color: ${props => props.error ? red$8 : grey$e};
+  color: ${props => props.error ? red$5 : grey$a};
   line-height: ${/*#__PURE__*/rem('48px')};
   vertical-align: center;
   overflow: hidden;
@@ -1555,8 +1540,25 @@ const TruncateLine = props => {
   }, /*#__PURE__*/React.createElement("span", null, value));
 };
 
+const size = {
+  xs: '360px',
+  s: '700px',
+  m: '900px',
+  l: '1280px',
+  xl: '1600px'
+};
+const device = {
+  xs: `(min-width: ${size.xs})`,
+  s: `(min-width: ${size.s})`,
+  m: `(min-width: ${size.m})`,
+  l: `(min-width: ${size.l})`,
+  xl: `(min-width: ${size.xl})`,
+  touch: `(hover: none) and (pointer: coarse)`,
+  mouse: '(min-width: 538px) and (min-height: 720px)'
+};
+
 const {
-  light: light$a
+  light: light$6
 } = colors;
 const Wrapper$3 = _styled.div`
   position: relative;
@@ -1810,7 +1812,7 @@ const Wrapper$3 = _styled.div`
     svg {
       width: ${/*#__PURE__*/rem('36px')};
       height: ${/*#__PURE__*/rem('36px')};
-      fill: ${light$a};
+      fill: ${light$6};
     }
 
     &.next {
@@ -1821,7 +1823,7 @@ const Wrapper$3 = _styled.div`
       opacity: 1;
 
       svg {
-        fill: ${light$a};
+        fill: ${light$6};
       }
     }
 
@@ -1846,7 +1848,7 @@ const Wrapper$3 = _styled.div`
       position: relative;
       display: inline-block;
       border-radius: 999px;
-      background-color: ${light$a};
+      background-color: ${light$6};
       width: ${/*#__PURE__*/rem('15px')};
       height: ${/*#__PURE__*/rem('15px')};
       opacity: 0.25;
@@ -1980,12 +1982,12 @@ const VideoPlayer = props => {
 };
 
 const {
-  lightGrey: lightGrey$a,
-  green: green$6
+  lightGrey: lightGrey$8,
+  green: green$3
 } = colors;
 const {
-  bold: bold$5
-} = fontWeight;
+  bold: bold$1
+} = typography;
 const Wrapper$5 = _styled.div`
   display: flex;
   align-items: center;
@@ -1993,13 +1995,13 @@ const Wrapper$5 = _styled.div`
 const Bar = _styled.div`
   flex: 1;
   border-radius: 999px;
-  background-color: ${lightGrey$a};
+  background-color: ${lightGrey$8};
   height: ${/*#__PURE__*/rem('10px')};
   overflow: hidden;
 `;
 const Progress = _styled.div`
   border-radius: 999px;
-  background-color: ${green$6};
+  background-color: ${green$3};
   height: 100%;
   width: ${props => props.progress ? `${props.progress}%` : 0};
   transition-duration: 2s;
@@ -2007,7 +2009,7 @@ const Progress = _styled.div`
 const Value = _styled.div`
   margin-left: ${/*#__PURE__*/rem('5px')};
   font-size: 0.75rem;
-  font-weight: ${bold$5};
+  font-weight: ${bold$1};
 `;
 
 const ProgressBar = props => {
@@ -2021,9 +2023,9 @@ const ProgressBar = props => {
 };
 
 const {
-  light: light$b,
-  green: green$7,
-  lightGrey: lightGrey$b
+  light: light$7,
+  green: green$4,
+  lightGrey: lightGrey$9
 } = colors;
 const Switcher = _styled.fieldset`
   margin: 0;
@@ -2049,7 +2051,7 @@ const Switcher = _styled.fieldset`
       width: ${/*#__PURE__*/rem('40px')};
       height: ${/*#__PURE__*/rem('24px')};
       border-radius: 999px;
-      border: 2px solid ${light$b};
+      border: 2px solid ${light$7};
       position: relative;
       opacity: ${props => props.disabled ? '0.5' : '1'};
 
@@ -2074,7 +2076,7 @@ const Switcher = _styled.fieldset`
         }
 
         &.switch-on:checked ~ .bg {
-          background-color: ${green$7};
+          background-color: ${green$4};
         }
 
         &.switch-off:checked ~ .switcher {
@@ -2082,7 +2084,7 @@ const Switcher = _styled.fieldset`
         }
 
         &.switch-off:checked ~ .bg {
-          background-color: ${lightGrey$b};
+          background-color: ${lightGrey$9};
         }
       }
 
@@ -2095,7 +2097,7 @@ const Switcher = _styled.fieldset`
         width: ${/*#__PURE__*/rem('16px')};
         height: ${/*#__PURE__*/rem('16px')};
         border-radius: 50%;
-        background-color: ${light$b};
+        background-color: ${light$7};
         transition: all 0.3s ease-out;
         z-index: 2;
       }
@@ -2110,7 +2112,7 @@ const Switcher = _styled.fieldset`
         border-radius: 999px;
         background-color: transparent;
         transition: all 0.3s ease-out;
-        background-color: ${lightGrey$b};
+        background-color: ${lightGrey$9};
       }
     }
   }
@@ -2198,14 +2200,14 @@ const Toggle = ({
 };
 
 const {
-  red: red$9,
-  grey: grey$f,
-  lightGrey: lightGrey$c,
-  darkGrey: darkGrey$2,
-  green: green$8,
-  darkGreen: darkGreen$4,
-  light: light$c,
-  normal: normal$8
+  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 {
@@ -2221,9 +2223,9 @@ const Wrapper$6 = _styled.div`
     margin-bottom: 0 !important;
     border-width: ${props => props.minimal ? `0 0 ${rem('1px')} 0` : rem('1px')};
     border-style: solid;
-    border-color: ${props => props.error ? red$9 : grey$f};
+    border-color: ${props => props.error ? red$6 : grey$b};
     border-radius: ${props => props.minimal ? 0 : rem('6px')};
-    background-color: ${props => props.disabled ? lightGrey$c : 'transparent'};
+    background-color: ${props => props.disabled ? lightGrey$a : 'transparent'};
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -2243,34 +2245,34 @@ const Wrapper$6 = _styled.div`
         flex: 1;
         display: block;
         padding: ${props => props.minimal ? 0 : `0 ${rem('10px')}`};
-        color: ${props => props.disabled ? grey$f : normal$8};
+        color: ${props => props.disabled ? grey$b : normal$5};
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
 
       &.button {
-        border-left: ${props => props.minimal ? 0 : `${rem('1px')} solid ${grey$f}`};
-        background-color: ${props => props.minimal ? 'transparent' : props.disabled ? lightGrey$c : green$8};
+        border-left: ${props => props.minimal ? 0 : `${rem('1px')} solid ${grey$b}`};
+        background-color: ${props => props.minimal ? 'transparent' : props.disabled ? lightGrey$a : green$5};
         height: 100%;
         padding: ${props => props.minimal ? `0 ${rem('5px')} 0 ${rem('20px')}` : `0 ${rem('20px')}`};
-        color: ${props => props.disabled ? grey$f : props.minimal ? darkGrey$2 : light$c};
+        color: ${props => props.disabled ? grey$b : props.minimal ? darkGrey : light$8};
         transition-duration: 0.3s;
 
         svg {
           margin-right: ${/*#__PURE__*/rem('8px')};
           width: auto;
           height: ${/*#__PURE__*/rem('24px')};
-          fill: ${props => props.disabled ? grey$f : props.minimal ? darkGrey$2 : light$c};
+          fill: ${props => props.disabled ? grey$b : props.minimal ? darkGrey : light$8};
           transition-duration: 0.3s;
         }
 
         &:hover {
-          background-color: ${props => props.minimal ? 'transparent' : darkGreen$4};
-          color: ${props => props.minimal ? darkGreen$4 : light$c};
+          background-color: ${props => props.minimal ? 'transparent' : darkGreen$2};
+          color: ${props => props.minimal ? darkGreen$2 : light$8};
 
           svg {
-            fill: ${props => props.disabled ? grey$f : props.minimal ? darkGreen$4 : light$c};
+            fill: ${props => props.disabled ? grey$b : props.minimal ? darkGreen$2 : light$8};
           }
         }
       }
@@ -2332,10 +2334,10 @@ const FilePicker = props => {
 };
 
 const {
-  normal: normal$9,
-  light: light$d,
-  lightGrey: lightGrey$d,
-  red: red$a
+  normal: normal$6,
+  light: light$9,
+  lightGrey: lightGrey$b,
+  red: red$7
 } = colors;
 const ActionsMenuStyle$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ActionsMenuStyle",
@@ -2344,11 +2346,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$d, /*#__PURE__*/rem('4px'), light$d, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('200px'), /*#__PURE__*/rem('250px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$9), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$9), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$9), props => props.rowIndex != undefined && css`
+})(["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`
       --margin: ${`calc(${rem('45px')} + ${rem('50px')} * ${props.rowIndex} + ${rem('42px')})`};
       top: var(--margin);
       right: ${rem('5px')};
-    `, /*#__PURE__*/rem('45px'), lightGrey$d, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('1px'), lightGrey$d, red$a, lightGrey$d, /*#__PURE__*/rem('20px'), normal$9);
+    `, /*#__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);
 
 const ActionMenuList = props => {
   const {
@@ -2421,13 +2423,13 @@ const ActionsMenu = props => {
 };
 
 const {
-  light: light$e,
-  grey: grey$g
+  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$g, /*#__PURE__*/rem('6px'), light$e, /*#__PURE__*/rem('15px'), device.l, /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('5px'));
+})(["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"
@@ -2458,12 +2460,12 @@ const CardValue = props => {
 };
 
 const {
-  grey: grey$h,
-  light: light$f
+  grey: grey$d,
+  light: light$b
 } = colors;
 const {
-  bold: bold$6
-} = fontWeight;
+  bold: bold$2
+} = typography;
 const EmptyTableWrapper = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__EmptyTableWrapper",
   componentId: "sc-1dgsb9l-0"
@@ -2471,15 +2473,15 @@ 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$h, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), bold$6, grey$h, /*#__PURE__*/rem('15px'), bold$6, grey$h, 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: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$2, grey$d, /*#__PURE__*/rem('15px'), bold$2, grey$d, 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$h, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'));
+})(["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'));
 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$h, /*#__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'), /*#__PURE__*/rem('1px'), grey$d, /*#__PURE__*/rem('15px'), device.s, device.m, device.l);
 const EmptyTableCellText = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__EmptyTableCellText",
   componentId: "sc-1dgsb9l-4"
@@ -2487,7 +2489,7 @@ const EmptyTableCellText = /*#__PURE__*/_styled.div.withConfig({
 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$f, 0), /*#__PURE__*/rgba(light$f, 1), /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), grey$h);
+})(["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);
 
 const EmptyTable = props => {
   let rows = [];
@@ -2547,31 +2549,31 @@ const ModalFooter = props => {
 };
 
 const {
-  green: green$9,
+  green: green$6,
   lightGreen,
-  darkGreen: darkGreen$5,
-  grey: grey$i,
-  lightGrey: lightGrey$e,
-  darkGrey: darkGrey$3,
-  red: red$b,
+  darkGreen: darkGreen$3,
+  grey: grey$e,
+  lightGrey: lightGrey$c,
+  darkGrey: darkGrey$1,
+  red: red$8,
   lightRed: lightRed$1,
-  darkRed: darkRed$3
+  darkRed: darkRed$1
 } = colors;
 const Wrapper$7 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "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$i, lightGrey$e, darkGrey$3, props => props.color === 'grey' && css`
-      --default: ${grey$i};
-      --light: ${lightGrey$e};
-      --dark: ${darkGrey$3};
+})(["--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};
     `, props => props.color === 'green' && css`
-      --default: ${green$9};
+      --default: ${green$6};
       --light: ${lightGreen};
-      --dark: ${darkGreen$5};
+      --dark: ${darkGreen$3};
     `, props => props.color === 'red' && css`
-      --default: ${red$b};
+      --default: ${red$8};
       --light: ${lightRed$1};
-      --dark: ${darkRed$3};
+      --dark: ${darkRed$1};
     `, /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('15px'), props => props.buttonValue && css`
       button {
         margin: ${rem('30px')} 0 0 0;
@@ -2630,14 +2632,14 @@ function hasValue(value) {
 }
 
 const {
-  normal: normal$a,
-  light: light$g,
-  grey: grey$j,
-  lightGrey: lightGrey$f
+  normal: normal$7,
+  light: light$c,
+  grey: grey$f,
+  lightGrey: lightGrey$d
 } = colors;
 const {
-  bold: bold$7
-} = fontWeight;
+  bold: bold$3
+} = typography;
 const TableWrapper = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__TableWrapper",
   componentId: "vmoy3z-0"
@@ -2645,21 +2647,46 @@ const TableWrapper = /*#__PURE__*/_styled.div.withConfig({
 const OverflowWrapper = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__OverflowWrapper",
   componentId: "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$g, light$g, /*#__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:#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'));
 const Table = /*#__PURE__*/_styled.table.withConfig({
   displayName: "styles__Table",
   componentId: "vmoy3z-2"
-})(["width:100%;border-width:", ";border-style:solid;border-color:", ";border-radius:", ";border-spacing:0;white-space:nowrap;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.menu{button{opacity:1;}}}@media ", "{display:table-row;}}td{border-top:", " solid ", ";height:inherit;min-height:", ";padding:", ";display:flex;justify-content:flex-end;> 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$j, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('1px'), grey$j, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('-1px'), /*#__PURE__*/rem('1px'), device.s, bold$7, grey$j, lightGrey$f, device.s, /*#__PURE__*/rem('1px'), grey$j, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), normal$a, grey$j, /*#__PURE__*/rem('15px'), bold$7, /*#__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$j, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('40px'));
+})(["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;}}&.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.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;", "}&.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 ", ";> 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;}}}}}"], 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$3, 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$3, props => props.loadingState && css`
+            width: ${rem('75px')};
+            height: ${rem('15px')};
+            background: #f6f7f8;
+            background-image: -webkit-linear-gradient(
+              left,
+              #f6f7f8 0%,
+              #edeef1 20%,
+              #f6f7f8 40%,
+              #f6f7f8 100%
+            );
+            background-repeat: no-repeat;
+            background-size: ${rem('800px')} 100%;
+            animation-fill-mode: forwards;
+            animation-name: placeholderSkeleton;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+            animation-duration: 1.5s;
+          `, /*#__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$f, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('40px'));
+const SkeletonCell = /*#__PURE__*/_styled.div.withConfig({
+  displayName: "styles__SkeletonCell",
+  componentId: "vmoy3z-3"
+})(["@keyframes placeholderSkeleton{0%{background-position:", " 0;}100%{background-position:", " 0;}}width:100%;height:", " !important;background:#f6f7f8;background-image:-webkit-linear-gradient( left,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100% );background-repeat:no-repeat;background-size:", " 100%;animation-fill-mode:forwards;animation-name:placeholderSkeleton;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:1.5s;"], /*#__PURE__*/rem('-800px'), /*#__PURE__*/rem('800px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('800px'));
 
 const Table$1 = props => {
   const {
-    border = false,
+    border = true,
     options,
     values = [],
     actions = [],
     dataTestId = 'table-test-id',
     menuDataTestId = 'table-action-menu',
     actionMenuTestId = 'icon-button',
+    loading = false,
+    loadingColumns = 4,
+    loadingRows = 20,
     showEmpty = false,
     emptyValue = 'No Data',
     className = 'table',
@@ -2679,6 +2706,9 @@ const Table$1 = props => {
   const hasActionMenu = actions.length > 0;
   const validValues = values.filter(hasValue);
   const hasValues = Array.isArray(values) && values.length > 0;
+  const headSkeleton = /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement(SkeletonCell, null));
+  const cellSkeleton = /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(SkeletonCell, null));
+  const columnsSkeleton = columns.length > 0 ? columns.length : loadingColumns;
 
   if (showEmpty && !hasValues) {
     const columnHeaders = columns.map(column => column.value);
@@ -2693,8 +2723,11 @@ const Table$1 = props => {
     border: border,
     "data-testid": dataTestId,
     className: className,
-    style: style
-  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, columns.map(({
+    style: style,
+    loadingState: loading
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, loading && !columns ? Array.from({
+    length: loadingColumns
+  }, () => headSkeleton) : columns.map(({
     id = '',
     className = '',
     value = '',
@@ -2703,7 +2736,11 @@ const Table$1 = props => {
     key: id,
     className: className,
     "data-testid": colDataTestId ? `th-${colDataTestId}` : null
-  }, value)), hasActionMenu && /*#__PURE__*/React.createElement("th", null))), /*#__PURE__*/React.createElement("tbody", null, validValues.map((row, index) => /*#__PURE__*/React.createElement("tr", {
+  }, value)), !loading && hasActionMenu && /*#__PURE__*/React.createElement("th", null))), /*#__PURE__*/React.createElement("tbody", null, loading ? Array.from({
+    length: loadingRows
+  }, () => /*#__PURE__*/React.createElement("tr", null, Array.from({
+    length: columnsSkeleton
+  }, () => cellSkeleton))) : validValues.map((row, index) => /*#__PURE__*/React.createElement("tr", {
     key: row.id,
     "data-testid": `row-${dataTestId}`
   }, columns.map(({
@@ -2749,24 +2786,24 @@ const Table$1 = props => {
 };
 
 const {
-  normal: normal$b,
-  grey: grey$k,
-  lightGrey: lightGrey$g
+  normal: normal$8,
+  grey: grey$g,
+  lightGrey: lightGrey$e
 } = colors;
 const {
-  bold: bold$8
-} = fontWeight;
+  bold: bold$4
+} = 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$k, /*#__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$k, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('15px'), device.s, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('-1px'), /*#__PURE__*/rem('1px'), device.s, bold$8, grey$k, lightGrey$g, grey$k, device.s, /*#__PURE__*/rem('1px'), grey$k, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), grey$k, /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), normal$b, grey$k, /*#__PURE__*/rem('15px'), bold$8, /*#__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$k, /*#__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-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$4, 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$4, /*#__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'));
 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$h
+  light: light$d
 } = colors;
 
 const TableDnD = props => {
@@ -2821,12 +2858,12 @@ const TableDnD = props => {
 
   const getItemStyle = (isDragging, draggableStyle) => ({
     userSelect: 'none',
-    background: isDragging ? light$h : 'transparent',
+    background: isDragging ? light$d : 'transparent',
     ...draggableStyle
   });
 
   const getListStyle = isDraggingOver => ({
-    background: isDraggingOver ? light$h : 'transparent'
+    background: isDraggingOver ? light$d : 'transparent'
   });
 
   return (
@@ -2925,14 +2962,14 @@ const TableDnD = props => {
 };
 
 const {
-  normal: normal$c,
-  grey: grey$l,
-  red: red$c
+  normal: normal$9,
+  grey: grey$h,
+  red: red$9
 } = colors;
 const Wrapper$8 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "mbja2a-0"
-})(["display:inline-block;> label{margin-bottom:", ";color:", ";span{color:", ";}}&:not(:last-child){margin-bottom:", ";}"], /*#__PURE__*/rem('5px'), props => props.error ? red$c : grey$l, props => props.error ? red$c : normal$c, /*#__PURE__*/rem('15px'));
+})(["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'));
 
 const FormGroup = props => {
   const {
@@ -2950,14 +2987,14 @@ const FormGroup = props => {
 };
 
 const {
-  grey: grey$m,
-  lightGrey: lightGrey$h,
+  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$m, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('50px'), lightGrey$h);
+})(["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);
 const Input = /*#__PURE__*/_styled.input.withConfig({
   displayName: "styles__Input",
   componentId: "sc-124afcu-1"
@@ -2965,7 +3002,7 @@ const Input = /*#__PURE__*/_styled.input.withConfig({
 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$h, /*#__PURE__*/rem('1px'), grey$m, /*#__PURE__*/rem('1px'), grey$m, /*#__PURE__*/rem('20px'), grey$m, lightGrey$h);
+})(["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);
 
 const NumberInputSpinner = props => {
   const {
@@ -3031,10 +3068,10 @@ const NumberInputSpinner = props => {
 };
 
 const {
-  green: green$a,
-  grey: grey$n,
-  lightGrey: lightGrey$i,
-  light: light$i
+  green: green$7,
+  grey: grey$j,
+  lightGrey: lightGrey$g,
+  light: light$e
 } = colors;
 const Steps = /*#__PURE__*/_styled.ul.withConfig({
   displayName: "styles__Steps",
@@ -3043,7 +3080,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$a : lightGrey$i, /*#__PURE__*/rem('22px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('-15px'), /*#__PURE__*/rem('18px'), props => props.active ? green$a : lightGrey$i, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), props => props.active ? green$a : lightGrey$i, props => props.active ? light$i : grey$n, 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: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);
 
 const WizardSteps = props => {
   const {
@@ -3064,13 +3101,13 @@ const WizardSteps = props => {
 };
 
 const {
-  light: light$j,
-  green: green$b,
-  darkGreen: darkGreen$6,
-  red: red$d,
-  darkRed: darkRed$4,
-  orange: orange$3,
-  darkOrange: darkOrange$2
+  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);
@@ -3078,14 +3115,14 @@ const Wrapper$a = _styled.div`
   position: fixed;
   top: ${/*#__PURE__*/rem('15px')};
   right: 0;
-  border: ${/*#__PURE__*/rem('2px')} solid ${darkGreen$6};
+  border: ${/*#__PURE__*/rem('2px')} solid ${darkGreen$4};
   border-radius: ${/*#__PURE__*/rem('6px')};
-  background-color: ${green$b};
+  background-color: ${green$8};
   width: ${/*#__PURE__*/rem('300px')};
   max-height: min-content;
   display: flex;
   padding: ${/*#__PURE__*/rem('15px')};
-  color: ${light$j};
+  color: ${light$f};
   -moz-box-shadow: var(--shadow);
   -webkit-box-shadow: var(--shadow);
   box-shadow: var(--shadow);
@@ -3096,7 +3133,7 @@ const Wrapper$a = _styled.div`
     background-color: transparent;
 
     svg {
-      fill: ${darkGreen$6};
+      fill: ${darkGreen$4};
     }
   }
 
@@ -3118,23 +3155,23 @@ const Wrapper$a = _styled.div`
   }
 
   ${props => props.variant === 'orange' && css`
-      border: ${rem('2px')} solid ${darkOrange$2};
-      background-color: ${orange$3};
+      border: ${rem('2px')} solid ${darkOrange};
+      background-color: ${orange};
 
       button {
         svg {
-          fill: ${darkOrange$2};
+          fill: ${darkOrange};
         }
       }
     `}
 
   ${props => props.variant === 'red' && css`
-      border: ${rem('2px')} solid ${darkRed$4};
-      background-color: ${red$d};
+      border: ${rem('2px')} solid ${darkRed$2};
+      background-color: ${red$a};
 
       button {
         svg {
-          fill: ${darkRed$4};
+          fill: ${darkRed$2};
         }
       }
     `}
@@ -3174,14 +3211,14 @@ const AlertNotification = props => {
 };
 
 const {
-  normal: normal$d,
-  light: light$k,
-  blue: blue$2,
-  lightGrey: lightGrey$j
+  normal: normal$a,
+  light: light$g,
+  blue,
+  lightGrey: lightGrey$h
 } = colors;
 const {
-  bold: bold$9
-} = fontWeight;
+  bold: bold$5
+} = typography;
 const PaginationWrapper = _styled.div`
   --size: ${/*#__PURE__*/rem('30px')};
 
@@ -3222,18 +3259,18 @@ const PaginationWrapper = _styled.div`
         display: flex;
         justify-content: center;
         align-items: center;
-        color: ${normal$d};
-        font-weight: ${bold$9};
+        color: ${normal$a};
+        font-weight: ${bold$5};
         text-decoration: none;
 
         &:hover {
-          color: ${blue$2};
+          color: ${blue};
         }
 
         svg {
           width: ${/*#__PURE__*/rem('18px')};
           height: auto;
-          fill: ${blue$2};
+          fill: ${blue};
         }
       }
 
@@ -3241,18 +3278,18 @@ const PaginationWrapper = _styled.div`
         pointer-events: none;
 
         a {
-          background-color: ${blue$2};
-          color: ${light$k};
+          background-color: ${blue};
+          color: ${light$g};
         }
       }
     }
 
     &.dark {
       a {
-        color: ${lightGrey$j};
+        color: ${lightGrey$h};
 
         &:hover {
-          color: ${light$k};
+          color: ${light$g};
         }
       }
     }
@@ -3311,12 +3348,12 @@ const PaginationControl = props => {
 };
 
 const {
-  normal: normal$e,
-  green: green$c
+  normal: normal$b,
+  green: green$9
 } = colors;
 const {
-  bold: bold$a
-} = fontWeight;
+  bold: bold$6
+} = typography;
 const Wrapper$b = _styled.div`
   min-height: ${props => props.variant === 'default' ? '50vh' : 'inherit'};
   display: flex;
@@ -3333,15 +3370,15 @@ const Wrapper$b = _styled.div`
 
   > span {
     margin-top: ${/*#__PURE__*/rem('15px')};
-    font-weight: ${bold$a};
-    color: ${normal$e};
+    font-weight: ${bold$6};
+    color: ${normal$b};
 
     a {
-      color: ${normal$e};
+      color: ${normal$b};
       transition-duration: 0.3s;
 
       &:hover {
-        color: ${green$c};
+        color: ${green$9};
       }
     }
   }
@@ -3361,12 +3398,12 @@ const Error = props => {
 };
 
 const {
-  normal: normal$f,
-  green: green$d
+  normal: normal$c,
+  green: green$a
 } = colors;
 const {
-  bold: bold$b
-} = fontWeight;
+  bold: bold$7
+} = typography;
 const Wrapper$c = _styled.div`
   min-height: 50vh;
   display: flex;
@@ -3383,15 +3420,15 @@ const Wrapper$c = _styled.div`
 
   > div {
     margin-top: ${/*#__PURE__*/rem('15px')};
-    font-weight: ${bold$b};
-    color: ${normal$f};
+    font-weight: ${bold$7};
+    color: ${normal$c};
 
     a {
-      color: ${normal$f};
+      color: ${normal$c};
       transition-duration: 0.3s;
 
       &:hover {
-        color: ${green$d};
+        color: ${green$a};
       }
     }
   }
@@ -5359,12 +5396,12 @@ const DataWarning = props => {
 };
 
 const {
-  normal: normal$g,
-  green: green$e,
-  darkGreen: darkGreen$7,
-  grey: grey$o,
-  lightGrey: lightGrey$k,
-  red: red$e
+  normal: normal$d,
+  green: green$b,
+  darkGreen: darkGreen$5,
+  grey: grey$k,
+  lightGrey: lightGrey$i,
+  red: red$b
 } = colors;
 const Wrapper$d = _styled.ul`
   display: flex;
@@ -5387,11 +5424,11 @@ const Wrapper$d = _styled.ul`
   }
 
   input[type='radio']:checked ~ .check {
-    border-color: ${darkGreen$7};
+    border-color: ${darkGreen$5};
   }
 
   input[type='radio']:checked ~ .check::before {
-    background-color: ${green$e};
+    background-color: ${green$b};
   }
 
   & + span {
@@ -5414,7 +5451,7 @@ const Item = _styled.li`
     padding-left: calc(var(--size) + 5px);
     line-height: var(--size);
     vertical-align: middle;
-    color: ${props => props.error ? red$e : null};
+    color: ${props => props.error ? red$b : null};
     cursor: pointer;
     z-index: 1;
   }
@@ -5422,7 +5459,7 @@ const Item = _styled.li`
   .check {
     position: absolute;
     top: 0;
-    border: ${/*#__PURE__*/rem('2px')} solid ${props => props.error ? red$e : grey$o};
+    border: ${/*#__PURE__*/rem('2px')} solid ${props => props.error ? red$b : grey$k};
     border-radius: 100%;
     width: var(--size);
     height: var(--size);
@@ -5441,21 +5478,21 @@ const Item = _styled.li`
   }
 
   &:hover .check {
-    border-color: ${normal$g};
+    border-color: ${normal$d};
   }
 
   ${props => props.disabled && css`
       label {
-        color: ${grey$o};
+        color: ${grey$k};
       }
 
       input[type='radio'] ~ .check,
       input[type='radio']:checked ~ .check {
-        border-color: ${lightGrey$k};
+        border-color: ${lightGrey$i};
       }
 
       input[type='radio']:checked ~ .check::before {
-        background-color: ${lightGrey$k};
+        background-color: ${lightGrey$i};
       }
 
       &:hover {
@@ -5561,10 +5598,10 @@ const Wrapper$f = _styled.div`
   }
 `;
 const {
-  grey: grey$p,
-  darkGrey: darkGrey$4,
-  light: light$l,
-  purple: purple$6
+  grey: grey$l,
+  darkGrey: darkGrey$2,
+  light: light$h,
+  purple500: purple500$4
 } = colors;
 const Field = _styled.div`
   display: flex;
@@ -5578,7 +5615,7 @@ const Field = _styled.div`
       outline: none;
 
       + button {
-        background-color: ${purple$6};
+        background-color: ${purple500$4};
       }
     }
   }
@@ -5591,7 +5628,7 @@ const Field = _styled.div`
   button {
     border: 0;
     border-radius: 0 ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')} 0;
-    background-color: ${grey$p};
+    background-color: ${grey$l};
     min-width: ${/*#__PURE__*/rem('50px')};
     height: ${/*#__PURE__*/rem('50px')};
     display: flex;
@@ -5607,12 +5644,12 @@ const Field = _styled.div`
       width: auto;
       min-width: ${/*#__PURE__*/rem('20px')};
       height: ${/*#__PURE__*/rem('20px')};
-      fill: ${light$l};
+      fill: ${light$h};
       transition: 0.3s;
     }
 
     &:hover {
-      background-color: ${darkGrey$4};
+      background-color: ${darkGrey$2};
     }
 
     &:disabled {
@@ -5620,7 +5657,7 @@ const Field = _styled.div`
       opacity: 0.5;
 
       &:hover {
-        background-color: ${grey$p};
+        background-color: ${grey$l};
         pointer-events: none;
       }
     }
@@ -5666,23 +5703,23 @@ const FieldWidthButton = props => {
 };
 
 const {
-  normal: normal$h,
-  purple: purple$7,
-  grey: grey$q,
-  lightGrey: lightGrey$l,
-  light: light$m
+  normal: normal$e,
+  purple500: purple500$5,
+  grey: grey$m,
+  lightGrey: lightGrey$j,
+  light: light$i
 } = colors;
 const {
-  bold: bold$c
-} = fontWeight;
+  bold: bold$8
+} = typography;
 const Wrapper$g = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "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$h, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('24px'), /*#__PURE__*/rem('24px'), grey$q, props => props.customColor ? props.customColor : purple$7, props => props.customColor ? props.customColor : purple$7, bold$c, props => props.customColor ? props.customColor : purple$7);
+})(["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$8, props => props.customColor ? props.customColor : purple500$5);
 const More = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__More",
   componentId: "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$l, /*#__PURE__*/rem('4px'), light$m, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), lightGrey$l, normal$h, normal$h, /*#__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: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'));
 
 const HorizontalNav = props => {
   const [showMore, setShowMore] = useState(false);
@@ -5759,11 +5796,11 @@ const HorizontalNav = props => {
 };
 
 const {
-  light: light$n
+  light: light$j
 } = colors;
 const {
-  bold: bold$d
-} = fontWeight;
+  bold: bold$9
+} = typography;
 const ModalOverlay = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalOverlay",
   componentId: "sc-16r6vcc-0"
@@ -5775,11 +5812,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$n, /*#__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: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'));
 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;background-color:", ";z-index:1;&:hover{background-color:", ";}@media ", "{display:inherit;}}"], /*#__PURE__*/rem('30px'), bold$d, /*#__PURE__*/rem('-18px'), /*#__PURE__*/rem('-18px'), light$n, light$n, device.s);
+})(["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$9, /*#__PURE__*/rem('-14px'), /*#__PURE__*/rem('-14px'), /*#__PURE__*/rem('2px'), colors.grey200, /*#__PURE__*/rem('28px'), /*#__PURE__*/rem('28px'), device.s);
 
 const Modal = props => {
   const {
@@ -5818,11 +5855,12 @@ const Modal = props => {
     zIndex: zIndex,
     className: "modal"
   }, /*#__PURE__*/React.createElement(ModalHeader, null, title && /*#__PURE__*/React.createElement("h2", null, title), /*#__PURE__*/React.createElement(Button, {
-    variant: "outline",
-    color: "grey",
+    color: "white",
+    txtColor: "grey200",
     icon: "cross",
     ariaLabel: "Close",
-    action: hide
+    action: hide,
+    rounded: true
   })), children, footer && /*#__PURE__*/React.createElement(ModalFooter, {
     closeAction: hide,
     closeValue: closeValue
@@ -5830,11 +5868,11 @@ const Modal = props => {
 };
 
 const {
-  light: light$o
+  light: light$k
 } = colors;
 const {
-  bold: bold$e
-} = fontWeight;
+  bold: bold$a
+} = typography;
 const slideInLeft = keyframes`
   from {
     transform: translateX(100%);
@@ -5855,11 +5893,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$o, /*#__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:", ";}"], light$k, /*#__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$e);
+})(["top:0;h2{margin:0 0 ", " 0;font-size:2rem;font-weight:", ";}"], /*#__PURE__*/rem('30px'), bold$a);
 const ModalContent = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalContent",
   componentId: "sc-46huls-4"
@@ -5910,7 +5948,7 @@ const ModalDrawer = props => {
 };
 
 const {
-  lightGrey: lightGrey$m
+  lightGrey: lightGrey$k
 } = colors;
 const Wrapper$h = _styled.div`
   div {
@@ -5973,7 +6011,7 @@ const Wrapper$h = _styled.div`
 
   .card {
     position: relative;
-    border: ${/*#__PURE__*/rem('2px')} solid ${lightGrey$m};
+    border: ${/*#__PURE__*/rem('2px')} solid ${lightGrey$k};
     border-radius: ${/*#__PURE__*/rem('6px')};
     width: ${/*#__PURE__*/rem('300px')};
     overflow: hidden;
@@ -5988,7 +6026,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$m};
+      border: ${/*#__PURE__*/rem('1px')} solid ${lightGrey$k};
       border-radius: 999px;
     }
 
@@ -6007,25 +6045,6 @@ const Wrapper$h = _styled.div`
     }
   }
 `;
-const Table$3 = _styled.div`
-  --columns: ${props => props.columnsNumber};
-
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-columns: repeat(var(--columns), 1fr);
-  grid-gap: ${/*#__PURE__*/rem('15px')};
-  padding: ${/*#__PURE__*/rem('15px')};
-
-  .header {
-    width: 50%;
-    height: ${/*#__PURE__*/rem('15px')};
-  }
-
-  .cell {
-    width: 100%;
-    height: ${/*#__PURE__*/rem('15px')};
-  }
-`;
 const Grid = _styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, ${/*#__PURE__*/rem('300px')});
@@ -6038,15 +6057,10 @@ const LoadingState = props => {
     type = 'text',
     lines = 3,
     cardsNumber = 4,
-    header = true,
-    columnsNumber = 4,
-    rowsNumber = 3,
     center = true
   } = props;
   let paragraphs = [];
   let cards = [];
-  let tableHeader = [];
-  let columns = [];
   let loadingType;
 
   for (let i = 0; i < lines; i++) {
@@ -6077,20 +6091,6 @@ const LoadingState = props => {
     })));
   }
 
-  for (let i = 0; i < columnsNumber; i++) {
-    tableHeader.push( /*#__PURE__*/React.createElement("div", {
-      key: i,
-      className: "header"
-    }));
-  }
-
-  for (let i = 0; i < columnsNumber * rowsNumber; i++) {
-    columns.push( /*#__PURE__*/React.createElement("div", {
-      key: i,
-      className: "cell"
-    }));
-  }
-
   switch (type) {
     case 'text':
       loadingType = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -6106,13 +6106,6 @@ const LoadingState = props => {
       }, cards);
       break;
 
-    case 'table':
-      loadingType = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Table$3, {
-        className: "table",
-        columnsNumber: columnsNumber
-      }, header && tableHeader, columns));
-      break;
-
     case 'value':
       loadingType = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "value"
@@ -6133,26 +6126,26 @@ const LoadingState = props => {
 };
 
 const {
-  normal: normal$i,
-  grey: grey$r,
-  lightGrey: lightGrey$n,
-  light: light$p
+  normal: normal$f,
+  grey: grey$n,
+  lightGrey: lightGrey$l,
+  light: light$l
 } = colors;
 const Wrapper$i = _styled.div`
   .tab {
-    border-color: ${lightGrey$n};
+    border-color: ${lightGrey$l};
 
     &[aria-selected='true'] {
       border-bottom: 0;
     }
 
     &[aria-selected='false'] {
-      background-color: ${lightGrey$n};
-      color: ${grey$r};
+      background-color: ${lightGrey$l};
+      color: ${grey$n};
       transition-duration: 0.3s;
 
       &:hover {
-        color: ${normal$i};
+        color: ${normal$f};
       }
     }
 
@@ -6167,8 +6160,8 @@ const Wrapper$i = _styled.div`
 
   .panel {
     border-radius: 0 ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')};
-    border-color: ${lightGrey$n};
-    background-color: ${light$p};
+    border-color: ${lightGrey$l};
+    background-color: ${light$l};
     padding: ${/*#__PURE__*/rem('30px')};
   }
 
@@ -6188,7 +6181,7 @@ const Wrapper$i = _styled.div`
   .RRT__tab {
     background: #eee;
     border-style: solid;
-    border-color: ${/*#__PURE__*/lighten(0.25, grey$r)};
+    border-color: ${/*#__PURE__*/lighten(0.25, grey$n)};
     border-width: ${/*#__PURE__*/rem('1px')} ${/*#__PURE__*/rem('1px')} ${/*#__PURE__*/rem('1px')} 0;
     cursor: pointer;
     z-index: 1;
@@ -6198,7 +6191,7 @@ const Wrapper$i = _styled.div`
 
   .RRT__tab:focus {
     outline: 0;
-    background-color: ${/*#__PURE__*/lighten(0.25, grey$r)};
+    background-color: ${/*#__PURE__*/lighten(0.25, grey$n)};
   }
 
   .RRT__accordion .RRT__tab {
@@ -6210,12 +6203,12 @@ const Wrapper$i = _styled.div`
   }
 
   .RRT__tab--selected {
-    background: ${light$p};
-    border-color: ${/*#__PURE__*/lighten(0.25, grey$r)} ${/*#__PURE__*/lighten(0.25, grey$r)} ${light$p};
+    background: ${light$l};
+    border-color: ${/*#__PURE__*/lighten(0.25, grey$n)} ${/*#__PURE__*/lighten(0.25, grey$n)} ${light$l};
   }
 
   .RRT__tab--selected:focus {
-    background-color: ${light$p};
+    background-color: ${light$l};
   }
 
   .RRT__tab--disabled {
@@ -6245,7 +6238,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$r)};
+    border: ${/*#__PURE__*/rem('1px')} solid ${/*#__PURE__*/lighten(0.25, grey$n)};
   }
 
   .RRT__panel--hidden {
@@ -6257,8 +6250,8 @@ const Wrapper$i = _styled.div`
   }
 
   .RRT__showmore {
-    background: ${lightGrey$n};
-    border: ${/*#__PURE__*/rem('1px')} solid ${/*#__PURE__*/lighten(0.25, grey$r)};
+    background: ${lightGrey$l};
+    border: ${/*#__PURE__*/rem('1px')} solid ${/*#__PURE__*/lighten(0.25, grey$n)};
     border-radius: 0 ${/*#__PURE__*/rem('6px')} 0 0;
     cursor: pointer;
     z-index: 1;
@@ -6268,7 +6261,7 @@ const Wrapper$i = _styled.div`
   }
 
   .RRT__showmore--selected {
-    background: ${light$p};
+    background: ${light$l};
     border-bottom: none;
   }
 
@@ -6279,7 +6272,7 @@ const Wrapper$i = _styled.div`
   }
 
   .RRT__showmore-label--selected {
-    background-color: ${/*#__PURE__*/lighten(0.25, grey$r)};
+    background-color: ${/*#__PURE__*/lighten(0.25, grey$n)};
   }
 
   .RRT__showmore-list {