@taikai/rocket-kit 2.0.0-beta.9 → 2.0.2

package/dist/rocket-kit.esm.js

@@ -16,6 +16,7 @@ const colors = {
   normal: '#000000',
   light: '#ffffff',
   blue: '#4250e4',
+  darkBlue: '#1825AD',
   orange: '#ff6a2c',
   darkOrange: /*#__PURE__*/darken(0.2, '#ff6a2c'),
   red: '#ef5766',
@@ -123,10 +124,13 @@ const {
   red,
   darkRed,
   purple,
-  darkPurple
+  darkPurple,
+  blue,
+  darkBlue
 } = colors;
 const {
-  bold
+  bold,
+  medium
 } = fontWeight;
 const pulseKeyframes = keyframes`
   0% {
@@ -142,7 +146,7 @@ const pulseKeyframes = keyframes`
 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:", ";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:", ";--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`
@@ -154,6 +158,9 @@ const ButtonWrapper = /*#__PURE__*/_styled.button.withConfig({
     `, 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};
@@ -171,7 +178,7 @@ const ButtonWrapper = /*#__PURE__*/_styled.button.withConfig({
     `, 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('36px') : 'min-content' : rem('36px'), /*#__PURE__*/rem('36px'), props => props.value ? props.circle ? 0 : `0 ${rem('20px')}` : 0, device.l, props => props.value ? rem('100px') : rem('36px'), 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)', bold, 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`
+    `, 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')};
@@ -354,15 +361,18 @@ const {
   red: red$1,
   darkRed: darkRed$1,
   purple: purple$1,
-  darkPurple: darkPurple$1
+  darkPurple: darkPurple$1,
+  blue: blue$1,
+  darkBlue: darkBlue$1
 } = colors;
 const {
-  bold: bold$1
+  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:", ";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:", ";--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`
@@ -384,6 +394,9 @@ const ButtonLinkStyle = /*#__PURE__*/_styled.a.withConfig({
     `, 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};
@@ -391,7 +404,7 @@ const ButtonLinkStyle = /*#__PURE__*/_styled.a.withConfig({
     `, 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('36px'), /*#__PURE__*/rem('36px'), props => props.value ? `0 ${rem('20px')}` : 0, device.l, props => props.value ? rem('100px') : rem('36px'), 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, bold$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`
+    `, 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')};
@@ -753,7 +766,8 @@ const icons = {
   "ledger": 'M3 21.0526V27.4139H12.6806V26.0048H4.4172V21.0526H3ZM3 5.00808V11.3532H4.4172V6.40912H12.6887V5L3 5.00808Z M29 21.0526V27.4139H19.3167V26.0048H27.5882V21.0526H29ZM29 5.00808V11.3532H27.5882V6.40912H19.3167V5L29 5.00808Z M14.1841 11.3612H12.7749V21.0445H19.1362V19.7728H14.1841V11.3612Z',
   "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'
+  "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'
 };
 
 const {
@@ -1019,16 +1033,20 @@ 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:999px;background-color:", ";max-width:", ";padding:", " ", ";font-size:0.85rem;color:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&:not(:first-child){margin-left:", ";}", " ", " ", " ", " ", ""], /*#__PURE__*/rem('2px'), grey$b, grey$b, /*#__PURE__*/rem('150px'), /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('10px'), light$7, /*#__PURE__*/rem('5px'), props => props.color === 'green' && css`
+})(["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};
@@ -1044,6 +1062,10 @@ const TagWrapper = /*#__PURE__*/_styled.span.withConfig({
       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;
     `);
@@ -1070,12 +1092,12 @@ const {
   light: light$8
 } = colors;
 const {
-  bold: bold$3
+  bold: bold$4
 } = fontWeight;
 const TagWrapper$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__TagWrapper",
   componentId: "db57da-0"
-})(["display:flex;border:", " solid ", ";border-radius:", ";font-size:0.85rem;max-width:100%;width:max-content;overflow:hidden;span{display:inline-block;padding:", " ", ";&.label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}&.value{background-color:", ";font-weight:", ";color:", ";}}&:not(:first-child){margin-left:", ";}"], /*#__PURE__*/rem('2px'), grey$c, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('10px'), grey$c, bold$3, light$8, /*#__PURE__*/rem('5px'));
+})(["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'));
 
 const TagNumber = props => {
   const {
@@ -1221,9 +1243,10 @@ const Select = props => {
 };
 
 const {
-  normal: normal$5,
+  normal: normal$6,
   light: light$9,
   grey: grey$d,
+  lightGrey: lightGrey$8,
   purple: purple$5,
   lightPurple
 } = colors;
@@ -1258,11 +1281,11 @@ const SelectWrapper = _styled.div`
     }
 
     &__input {
-      color: ${normal$5};
+      color: ${normal$6};
     }
 
     &__single-value {
-      color: ${normal$5};
+      color: ${normal$6};
     }
 
     &__indicator {
@@ -1301,7 +1324,7 @@ const SelectWrapper = _styled.div`
 
       &--is-selected {
         background-color: ${lightPurple};
-        color: ${normal$5};
+        color: ${normal$6};
       }
     }
   }
@@ -1329,7 +1352,7 @@ const SelectWrapper = _styled.div`
 
   .select__option--is-selected {
     svg {
-      fill: ${normal$5};
+      fill: ${normal$6};
       transition-duration: 0.3s;
     }
   }
@@ -1340,64 +1363,92 @@ const SelectWrapper = _styled.div`
       transition-duration: 0.3s;
     }
   }
-`;
-
-const SelectInteractive = props => {
-  const {
-    name,
-    multi = false,
-    search = true,
-    placeholder,
-    options,
-    value,
-    clear = true,
-    onChange = () => {},
-    onInputChange = () => {},
-    error,
-    disabled = false,
-    dataTestId
-  } = props;
-  const {
-    Option
-  } = components;
 
-  const CustomSelectOption = (props, commonProps) => /*#__PURE__*/React.createElement(Option, Object.assign({}, props, commonProps), props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
-    icon: props.data.icon
-  }) : props.data.customImage ? props.data.customImage : null, props.data.label);
+  .select__option--is-disabled {
+    pointer-events: none;
+  }
+`;
+const SelectGroupLabel = _styled.span`
+  font-size: ${/*#__PURE__*/rem('12px')};
+  color: ${lightGrey$8};
 
-  const CustomSelectValue = props => /*#__PURE__*/React.createElement("div", null, props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
-    icon: props.data.icon
-  }) : props.data.customImage ? props.data.customImage : null, props.data.label);
+  + .tag {
+    border-color: ${lightGrey$8};
+    background-color: ${lightGrey$8};
+    color: ${grey$d};
+  }
+`;
 
-  return /*#__PURE__*/React.createElement(SelectWrapper, {
-    "data-testid": dataTestId
-  }, /*#__PURE__*/React.createElement(Select$1, {
-    className: "select-interactive",
-    classNamePrefix: "select",
+const {
+  Option
+} = components;
+const FormatGroupLabel = ({
+  label,
+  options
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React.createElement(SelectGroupLabel, {
+    className: "selective-options-group-label"
+  }, label), /*#__PURE__*/React.createElement(Tag, {
+    value: `${options == null ? void 0 : options.length}`
+  }));
+};
+const CustomSelectOption = (props, commonProps) => /*#__PURE__*/React.createElement(Option, Object.assign({}, props, commonProps), props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
+  icon: props.data.icon
+}) : props.data.customImage ? props.data.customImage : null, props.data.label);
+const CustomSelectValue = props => /*#__PURE__*/React.createElement("div", null, props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
+  icon: props.data.icon
+}) : props.data.customImage ? props.data.customImage : null, props.data.label);
+
+const SelectInteractive = ({
+  name,
+  multi = false,
+  search = true,
+  placeholder,
+  options,
+  value,
+  clear = true,
+  error,
+  disabled = false,
+  formatGroupLabel = true,
+  onChange = () => {},
+  onInputChange = () => {},
+  ...rest
+}) => {
+  return /*#__PURE__*/React.createElement(SelectWrapper, Object.assign({}, rest), /*#__PURE__*/React.createElement(Select$1, {
     name: name,
+    value: value,
     isMulti: multi,
-    isSearchable: search,
-    isDisabled: disabled,
-    placeholder: placeholder,
     options: options,
-    value: value,
     isClearable: clear,
-    onChange: onChange,
+    isDisabled: disabled,
+    isSearchable: search,
+    classNamePrefix: "select",
+    placeholder: placeholder,
+    className: "select-interactive",
+    // @ts-ignore
+    onChange: e => onChange(e != null ? e : []),
     defaultMenuIsOpen: false,
     onInputChange: onInputChange,
     components: {
       Option: CustomSelectOption,
       SingleValue: CustomSelectValue
-    }
+    },
+    formatGroupLabel: s => formatGroupLabel ? FormatGroupLabel == null ? void 0 : FormatGroupLabel(s) : undefined
   }), error ? /*#__PURE__*/React.createElement(ErrorField, {
     error: error
   }) : null);
 };
 
 const {
-  normal: normal$6,
+  normal: normal$7,
   grey: grey$e,
-  lightGrey: lightGrey$8,
+  lightGrey: lightGrey$9,
   red: red$8,
   lightRed
 } = colors;
@@ -1412,7 +1463,12 @@ const Wrapper$2 = _styled.div`
   input {
     flex: 1;
     border: 0;
-    color: ${props => props.error ? red$8 : normal$6};
+    color: ${props => props.error ? red$8 : normal$7};
+
+    &:disabled {
+      margin: 0;
+      border-radius: 0;
+    }
   }
 
   & + span {
@@ -1423,7 +1479,7 @@ 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$8};
+  background-color: ${props => props.error ? lightRed : lightGrey$9};
   padding: 0 ${/*#__PURE__*/rem('15px')};
   color: ${props => props.error ? red$8 : grey$e};
   line-height: ${/*#__PURE__*/rem('48px')};
@@ -1924,11 +1980,11 @@ const VideoPlayer = props => {
 };
 
 const {
-  lightGrey: lightGrey$9,
+  lightGrey: lightGrey$a,
   green: green$6
 } = colors;
 const {
-  bold: bold$4
+  bold: bold$5
 } = fontWeight;
 const Wrapper$5 = _styled.div`
   display: flex;
@@ -1937,7 +1993,7 @@ const Wrapper$5 = _styled.div`
 const Bar = _styled.div`
   flex: 1;
   border-radius: 999px;
-  background-color: ${lightGrey$9};
+  background-color: ${lightGrey$a};
   height: ${/*#__PURE__*/rem('10px')};
   overflow: hidden;
 `;
@@ -1951,7 +2007,7 @@ const Progress = _styled.div`
 const Value = _styled.div`
   margin-left: ${/*#__PURE__*/rem('5px')};
   font-size: 0.75rem;
-  font-weight: ${bold$4};
+  font-weight: ${bold$5};
 `;
 
 const ProgressBar = props => {
@@ -1967,7 +2023,7 @@ const ProgressBar = props => {
 const {
   light: light$b,
   green: green$7,
-  lightGrey: lightGrey$a
+  lightGrey: lightGrey$b
 } = colors;
 const Switcher = _styled.fieldset`
   margin: 0;
@@ -2026,7 +2082,7 @@ const Switcher = _styled.fieldset`
         }
 
         &.switch-off:checked ~ .bg {
-          background-color: ${lightGrey$a};
+          background-color: ${lightGrey$b};
         }
       }
 
@@ -2054,7 +2110,7 @@ const Switcher = _styled.fieldset`
         border-radius: 999px;
         background-color: transparent;
         transition: all 0.3s ease-out;
-        background-color: ${lightGrey$a};
+        background-color: ${lightGrey$b};
       }
     }
   }
@@ -2144,12 +2200,12 @@ const Toggle = ({
 const {
   red: red$9,
   grey: grey$f,
-  lightGrey: lightGrey$b,
+  lightGrey: lightGrey$c,
   darkGrey: darkGrey$2,
   green: green$8,
   darkGreen: darkGreen$4,
   light: light$c,
-  normal: normal$7
+  normal: normal$8
 } = colors;
 const Wrapper$6 = _styled.div`
   input {
@@ -2167,7 +2223,7 @@ const Wrapper$6 = _styled.div`
     border-style: solid;
     border-color: ${props => props.error ? red$9 : grey$f};
     border-radius: ${props => props.minimal ? 0 : rem('6px')};
-    background-color: ${props => props.disabled ? lightGrey$b : 'transparent'};
+    background-color: ${props => props.disabled ? lightGrey$c : 'transparent'};
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -2187,7 +2243,7 @@ const Wrapper$6 = _styled.div`
         flex: 1;
         display: block;
         padding: ${props => props.minimal ? 0 : `0 ${rem('10px')}`};
-        color: ${props => props.disabled ? grey$f : normal$7};
+        color: ${props => props.disabled ? grey$f : normal$8};
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -2195,7 +2251,7 @@ const Wrapper$6 = _styled.div`
 
       &.button {
         border-left: ${props => props.minimal ? 0 : `${rem('1px')} solid ${grey$f}`};
-        background-color: ${props => props.minimal ? 'transparent' : props.disabled ? lightGrey$b : green$8};
+        background-color: ${props => props.minimal ? 'transparent' : props.disabled ? lightGrey$c : green$8};
         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};
@@ -2276,9 +2332,9 @@ const FilePicker = props => {
 };
 
 const {
-  normal: normal$8,
+  normal: normal$9,
   light: light$d,
-  lightGrey: lightGrey$c,
+  lightGrey: lightGrey$d,
   red: red$a
 } = colors;
 const ActionsMenuStyle$1 = /*#__PURE__*/_styled.div.withConfig({
@@ -2288,11 +2344,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$c, /*#__PURE__*/rem('4px'), light$d, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('200px'), /*#__PURE__*/rem('250px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$8), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$8), /*#__PURE__*/rem('15px'), /*#__PURE__*/lighten(0.7, normal$8), 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$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`
       --margin: ${`calc(${rem('45px')} + ${rem('50px')} * ${props.rowIndex} + ${rem('42px')})`};
       top: var(--margin);
       right: ${rem('5px')};
-    `, /*#__PURE__*/rem('45px'), lightGrey$c, /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('4px'), /*#__PURE__*/rem('1px'), lightGrey$c, red$a, lightGrey$c, /*#__PURE__*/rem('20px'), normal$8);
+    `, /*#__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);
 
 const ActionMenuList = props => {
   const {
@@ -2406,7 +2462,7 @@ const {
   light: light$f
 } = colors;
 const {
-  bold: bold$5
+  bold: bold$6
 } = fontWeight;
 const EmptyTableWrapper = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__EmptyTableWrapper",
@@ -2415,7 +2471,7 @@ 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$5, grey$h, /*#__PURE__*/rem('15px'), bold$5, 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$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);
 const EmptyTableBody = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__EmptyTableBody",
   componentId: "sc-1dgsb9l-2"
@@ -2495,7 +2551,7 @@ const {
   lightGreen,
   darkGreen: darkGreen$5,
   grey: grey$i,
-  lightGrey: lightGrey$d,
+  lightGrey: lightGrey$e,
   darkGrey: darkGrey$3,
   red: red$b,
   lightRed: lightRed$1,
@@ -2504,9 +2560,9 @@ const {
 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$d, darkGrey$3, props => props.color === 'grey' && css`
+})(["--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$d};
+      --light: ${lightGrey$e};
       --dark: ${darkGrey$3};
     `, props => props.color === 'green' && css`
       --default: ${green$9};
@@ -2574,13 +2630,13 @@ function hasValue(value) {
 }
 
 const {
-  normal: normal$9,
+  normal: normal$a,
   light: light$g,
   grey: grey$j,
-  lightGrey: lightGrey$e
+  lightGrey: lightGrey$f
 } = colors;
 const {
-  bold: bold$6
+  bold: bold$7
 } = fontWeight;
 const TableWrapper = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__TableWrapper",
@@ -2593,7 +2649,7 @@ const OverflowWrapper = /*#__PURE__*/_styled.div.withConfig({
 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$6, grey$j, lightGrey$e, device.s, /*#__PURE__*/rem('1px'), grey$j, /*#__PURE__*/rem('50px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('100px'), /*#__PURE__*/rem('30px'), /*#__PURE__*/rem('30px'), normal$9, grey$j, /*#__PURE__*/rem('15px'), bold$6, /*#__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:", ";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'));
 
 const Table$1 = props => {
   const {
@@ -2693,17 +2749,17 @@ const Table$1 = props => {
 };
 
 const {
-  normal: normal$a,
+  normal: normal$b,
   grey: grey$k,
-  lightGrey: lightGrey$f
+  lightGrey: lightGrey$g
 } = colors;
 const {
-  bold: bold$7
+  bold: bold$8
 } = fontWeight;
 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$7, grey$k, lightGrey$f, 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$a, grey$k, /*#__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$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$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'));
 const TableRow = /*#__PURE__*/_styled.tr.withConfig({
   displayName: "styles__TableRow",
   componentId: "sc-1p618q0-1"
@@ -2869,14 +2925,14 @@ const TableDnD = props => {
 };
 
 const {
-  normal: normal$b,
+  normal: normal$c,
   grey: grey$l,
   red: red$c
 } = 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$b, /*#__PURE__*/rem('15px'));
+})(["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'));
 
 const FormGroup = props => {
   const {
@@ -2895,13 +2951,13 @@ const FormGroup = props => {
 
 const {
   grey: grey$m,
-  lightGrey: lightGrey$g,
+  lightGrey: lightGrey$h,
   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$g);
+})(["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);
 const Input = /*#__PURE__*/_styled.input.withConfig({
   displayName: "styles__Input",
   componentId: "sc-124afcu-1"
@@ -2909,7 +2965,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$g, /*#__PURE__*/rem('1px'), grey$m, /*#__PURE__*/rem('1px'), grey$m, /*#__PURE__*/rem('20px'), grey$m, lightGrey$g);
+})(["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);
 
 const NumberInputSpinner = props => {
   const {
@@ -2977,7 +3033,7 @@ const NumberInputSpinner = props => {
 const {
   green: green$a,
   grey: grey$n,
-  lightGrey: lightGrey$h,
+  lightGrey: lightGrey$i,
   light: light$i
 } = colors;
 const Steps = /*#__PURE__*/_styled.ul.withConfig({
@@ -2987,7 +3043,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$h, /*#__PURE__*/rem('22px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('-15px'), /*#__PURE__*/rem('18px'), props => props.active ? green$a : lightGrey$h, /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), /*#__PURE__*/rem('6px'), props => props.active ? green$a : lightGrey$h, 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$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);
 
 const WizardSteps = props => {
   const {
@@ -3118,13 +3174,13 @@ const AlertNotification = props => {
 };
 
 const {
-  normal: normal$c,
+  normal: normal$d,
   light: light$k,
-  blue,
-  lightGrey: lightGrey$i
+  blue: blue$2,
+  lightGrey: lightGrey$j
 } = colors;
 const {
-  bold: bold$8
+  bold: bold$9
 } = fontWeight;
 const PaginationWrapper = _styled.div`
   --size: ${/*#__PURE__*/rem('30px')};
@@ -3166,18 +3222,18 @@ const PaginationWrapper = _styled.div`
         display: flex;
         justify-content: center;
         align-items: center;
-        color: ${normal$c};
-        font-weight: ${bold$8};
+        color: ${normal$d};
+        font-weight: ${bold$9};
         text-decoration: none;
 
         &:hover {
-          color: ${blue};
+          color: ${blue$2};
         }
 
         svg {
           width: ${/*#__PURE__*/rem('18px')};
           height: auto;
-          fill: ${blue};
+          fill: ${blue$2};
         }
       }
 
@@ -3185,7 +3241,7 @@ const PaginationWrapper = _styled.div`
         pointer-events: none;
 
         a {
-          background-color: ${blue};
+          background-color: ${blue$2};
           color: ${light$k};
         }
       }
@@ -3193,7 +3249,7 @@ const PaginationWrapper = _styled.div`
 
     &.dark {
       a {
-        color: ${lightGrey$i};
+        color: ${lightGrey$j};
 
         &:hover {
           color: ${light$k};
@@ -3255,11 +3311,11 @@ const PaginationControl = props => {
 };
 
 const {
-  normal: normal$d,
+  normal: normal$e,
   green: green$c
 } = colors;
 const {
-  bold: bold$9
+  bold: bold$a
 } = fontWeight;
 const Wrapper$b = _styled.div`
   min-height: ${props => props.variant === 'default' ? '50vh' : 'inherit'};
@@ -3277,11 +3333,11 @@ const Wrapper$b = _styled.div`
 
   > span {
     margin-top: ${/*#__PURE__*/rem('15px')};
-    font-weight: ${bold$9};
-    color: ${normal$d};
+    font-weight: ${bold$a};
+    color: ${normal$e};
 
     a {
-      color: ${normal$d};
+      color: ${normal$e};
       transition-duration: 0.3s;
 
       &:hover {
@@ -3305,11 +3361,11 @@ const Error = props => {
 };
 
 const {
-  normal: normal$e,
+  normal: normal$f,
   green: green$d
 } = colors;
 const {
-  bold: bold$a
+  bold: bold$b
 } = fontWeight;
 const Wrapper$c = _styled.div`
   min-height: 50vh;
@@ -3327,11 +3383,11 @@ const Wrapper$c = _styled.div`
 
   > div {
     margin-top: ${/*#__PURE__*/rem('15px')};
-    font-weight: ${bold$a};
-    color: ${normal$e};
+    font-weight: ${bold$b};
+    color: ${normal$f};
 
     a {
-      color: ${normal$e};
+      color: ${normal$f};
       transition-duration: 0.3s;
 
       &:hover {
@@ -5303,11 +5359,11 @@ const DataWarning = props => {
 };
 
 const {
-  normal: normal$f,
+  normal: normal$g,
   green: green$e,
   darkGreen: darkGreen$7,
   grey: grey$o,
-  lightGrey: lightGrey$j,
+  lightGrey: lightGrey$k,
   red: red$e
 } = colors;
 const Wrapper$d = _styled.ul`
@@ -5385,7 +5441,7 @@ const Item = _styled.li`
   }
 
   &:hover .check {
-    border-color: ${normal$f};
+    border-color: ${normal$g};
   }
 
   ${props => props.disabled && css`
@@ -5395,11 +5451,11 @@ const Item = _styled.li`
 
       input[type='radio'] ~ .check,
       input[type='radio']:checked ~ .check {
-        border-color: ${lightGrey$j};
+        border-color: ${lightGrey$k};
       }
 
       input[type='radio']:checked ~ .check::before {
-        background-color: ${lightGrey$j};
+        background-color: ${lightGrey$k};
       }
 
       &:hover {
@@ -5610,23 +5666,23 @@ const FieldWidthButton = props => {
 };
 
 const {
-  normal: normal$g,
+  normal: normal$h,
   purple: purple$7,
   grey: grey$q,
-  lightGrey: lightGrey$k,
+  lightGrey: lightGrey$l,
   light: light$m
 } = colors;
 const {
-  bold: bold$b
+  bold: bold$c
 } = fontWeight;
 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$g, /*#__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$b, 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$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);
 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$k, /*#__PURE__*/rem('4px'), light$m, /*#__PURE__*/rem('5px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), /*#__PURE__*/rem('15px'), lightGrey$k, normal$g, normal$g, /*#__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$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'));
 
 const HorizontalNav = props => {
   const [showMore, setShowMore] = useState(false);
@@ -5706,7 +5762,7 @@ const {
   light: light$n
 } = colors;
 const {
-  bold: bold$c
+  bold: bold$d
 } = fontWeight;
 const ModalOverlay = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalOverlay",
@@ -5723,7 +5779,7 @@ const ModalContainer = /*#__PURE__*/_styled.div.withConfig({
 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$c, /*#__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;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);
 
 const Modal = props => {
   const {
@@ -5777,15 +5833,15 @@ const {
   light: light$o
 } = colors;
 const {
-  bold: bold$d
+  bold: bold$e
 } = fontWeight;
 const slideInLeft = keyframes`
   from {
-    transform: translate3d(100%, 0, 0);
+    transform: translateX(100%);
   }
 
   to {
-    transform: translate3d(0, 0, 0);
+    transform: translateX(0);
   }
 `;
 const ModalOverlay$1 = /*#__PURE__*/_styled.div.withConfig({
@@ -5799,11 +5855,11 @@ const ModalWrapper$1 = /*#__PURE__*/_styled.div.withConfig({
 const ModalContainer$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalContainer",
   componentId: "sc-46huls-2"
-})(["position:absolute;right:0;background:", ";width:100%;min-height:100vh;display:flex;flex-direction:column;padding:", ";word-wrap:break-word;animation-timing-function:", ";animation-duration:1s;animation-fill-mode:forwards;transform:translate3d(100%,0,0);animation-name:", ";@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$o, /*#__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$d);
+})(["top:0;h2{margin:0 0 ", " 0;font-size:2rem;font-weight:", ";}"], /*#__PURE__*/rem('30px'), bold$e);
 const ModalContent = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__ModalContent",
   componentId: "sc-46huls-4"
@@ -5820,6 +5876,23 @@ const ModalDrawer = props => {
     footerHidden = false,
     zIndex = 10
   } = props;
+  useEffect(() => {
+    const fixViewport = () => {
+      let vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+    };
+
+    fixViewport();
+
+    if (typeof window !== 'undefined') {
+      let vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', `${vh}px`);
+      window.addEventListener('resize', fixViewport);
+      return () => window.removeEventListener('resize', fixViewport);
+    }
+
+    return;
+  }, []);
   return isShowing ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalOverlay$1, {
     zIndex: zIndex
   }), /*#__PURE__*/React.createElement(ModalWrapper$1, {
@@ -5837,7 +5910,7 @@ const ModalDrawer = props => {
 };
 
 const {
-  lightGrey: lightGrey$l
+  lightGrey: lightGrey$m
 } = colors;
 const Wrapper$h = _styled.div`
   div {
@@ -5900,7 +5973,7 @@ const Wrapper$h = _styled.div`
 
   .card {
     position: relative;
-    border: ${/*#__PURE__*/rem('2px')} solid ${lightGrey$l};
+    border: ${/*#__PURE__*/rem('2px')} solid ${lightGrey$m};
     border-radius: ${/*#__PURE__*/rem('6px')};
     width: ${/*#__PURE__*/rem('300px')};
     overflow: hidden;
@@ -5915,7 +5988,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$l};
+      border: ${/*#__PURE__*/rem('1px')} solid ${lightGrey$m};
       border-radius: 999px;
     }
 
@@ -6060,26 +6133,26 @@ const LoadingState = props => {
 };
 
 const {
-  normal: normal$h,
+  normal: normal$i,
   grey: grey$r,
-  lightGrey: lightGrey$m,
+  lightGrey: lightGrey$n,
   light: light$p
 } = colors;
 const Wrapper$i = _styled.div`
   .tab {
-    border-color: ${lightGrey$m};
+    border-color: ${lightGrey$n};
 
     &[aria-selected='true'] {
       border-bottom: 0;
     }
 
     &[aria-selected='false'] {
-      background-color: ${lightGrey$m};
+      background-color: ${lightGrey$n};
       color: ${grey$r};
       transition-duration: 0.3s;
 
       &:hover {
-        color: ${normal$h};
+        color: ${normal$i};
       }
     }
 
@@ -6094,7 +6167,7 @@ const Wrapper$i = _styled.div`
 
   .panel {
     border-radius: 0 ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')} ${/*#__PURE__*/rem('6px')};
-    border-color: ${lightGrey$m};
+    border-color: ${lightGrey$n};
     background-color: ${light$p};
     padding: ${/*#__PURE__*/rem('30px')};
   }
@@ -6184,7 +6257,7 @@ const Wrapper$i = _styled.div`
   }
 
   .RRT__showmore {
-    background: ${lightGrey$m};
+    background: ${lightGrey$n};
     border: ${/*#__PURE__*/rem('1px')} solid ${/*#__PURE__*/lighten(0.25, grey$r)};
     border-radius: 0 ${/*#__PURE__*/rem('6px')} 0 0;
     cursor: pointer;