@taikai/rocket-kit 3.0.2 → 3.0.4

package/dist/rocket-kit.esm.js

@@ -223,7 +223,7 @@ const AvatarImage = props => {
 
 const useColor = value => {
   // @ts-ignore
-  const color = colors == null ? void 0 : colors[value];
+  const color = colors[value];
   const c = value.split(/([0-9]+)/).filter(Boolean);
   const tint = c[0];
   const hue = parseFloat(c[1]);
@@ -232,8 +232,8 @@ const useColor = value => {
     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 hoverColor = colors[indexCurrentHue > -1 ? tint + colorHues[indexHoverHue] : tint];
+    return hoverColor ?? colors.black;
   };
   const hover = getHoverColor(tint, hue);
   return {
@@ -245,16 +245,7 @@ const useColor = value => {
 const ButtonWrapper = /*#__PURE__*/_styled.button.withConfig({
   displayName: "styles__ButtonWrapper",
   componentId: "sc-baestp-0"
-})(["--bg:", ";--txt:", ";--hover:", ";margin:0;border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;outline:none;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}&:disabled{cursor:inherit;opacity:0.5;&:hover{background-color:", ";pointer-events:none;}}> *:not(:last-child){margin-left:", ";margin-right:", ";}.spinner{order:", ";border-top-color:", ";}span{position:relative;font-size:", ";font-weight:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => {
-  var _props$color;
-  return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
-}, props => {
-  var _props$color2, _props$txtColor;
-  return props.variant === 'outline' && !props.txtColor ? useColor((_props$color2 = props.color) != null ? _props$color2 : 'black').color : useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'white').color;
-}, props => {
-  var _props$color3;
-  return props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor((_props$color3 = props.color) != null ? _props$color3 : 'black').hover;
-}, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? rem('80px') : rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? 1 : 2, props => props.variant === 'solid' ? '' : 'var(--button)', /*#__PURE__*/rem(typography.defaultSize), typography.medium, /*#__PURE__*/rem(typography.defaultSize), props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
+})(["--bg:", ";--txt:", ";--hover:", ";margin:0;border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;outline:none;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}&:disabled{cursor:inherit;opacity:0.5;&:hover{background-color:", ";pointer-events:none;}}> *:not(:last-child){margin-left:", ";margin-right:", ";}.spinner{order:", ";border-top-color:", ";}span{position:relative;font-size:", ";font-weight:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => useColor(props.color ?? 'black').color, props => props.variant === 'outline' && !props.txtColor ? useColor(props.color ?? 'black').color : useColor(props.txtColor ?? 'white').color, props => props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor(props.color ?? 'black').hover, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? rem('80px') : rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? 1 : 2, props => props.variant === 'solid' ? '' : 'var(--button)', /*#__PURE__*/rem(typography.defaultSize), typography.medium, /*#__PURE__*/rem(typography.defaultSize), props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
 
 const Button = props => {
   const {
@@ -398,16 +389,7 @@ const ButtonDropdown = props => {
 const ButtonLinkStyle = /*#__PURE__*/_styled.a.withConfig({
   displayName: "styles__ButtonLinkStyle",
   componentId: "sc-clge7v-0"
-})(["--bg:", ";--txt:", ";--hover:", ";border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}> *:not(:last-child){margin-left:", ";margin-right:", ";}span{position:relative;font-size:", ";font-weight:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => {
-  var _props$color;
-  return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
-}, props => {
-  var _props$color2, _props$txtColor;
-  return props.variant === 'outline' && !props.txtColor ? useColor((_props$color2 = props.color) != null ? _props$color2 : 'black').color : useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'white').color;
-}, props => {
-  var _props$color3;
-  return props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor((_props$color3 = props.color) != null ? _props$color3 : 'black').hover;
-}, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? rem('80px') : rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, /*#__PURE__*/rem(typography.defaultSize), typography.medium, /*#__PURE__*/rem(typography.defaultSize), props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
+})(["--bg:", ";--txt:", ";--hover:", ";border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}> *:not(:last-child){margin-left:", ";margin-right:", ";}span{position:relative;font-size:", ";font-weight:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => useColor(props.color ?? 'black').color, props => props.variant === 'outline' && !props.txtColor ? useColor(props.color ?? 'black').color : useColor(props.txtColor ?? 'white').color, props => props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor(props.color ?? 'black').hover, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? rem('80px') : rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, /*#__PURE__*/rem(typography.defaultSize), typography.medium, /*#__PURE__*/rem(typography.defaultSize), props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
 
 const ButtonLink = props => {
   const {
@@ -599,6 +581,7 @@ const icons = {
   google: 'M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16c-8.836 0-16-7.163-16-16s7.163-16 16-16zM16 6.095c-5.471-0.001-9.906 4.434-9.905 9.905-0.002 1.639 0.404 3.252 1.181 4.694 1.673 3.103 4.952 5.212 8.724 5.212 2.256 0.003 4.444-0.767 6.2-2.181h0c1.779-1.427 3.011-3.425 3.488-5.656 0.142-0.667 0.216-1.36 0.216-2.068 0-0.633-0.059-1.251-0.173-1.851h-9.514v3.918h5.296c-0.477 1.266-1.373 2.33-2.541 3.014-1.821 1.064-4.072 1.073-5.902 0.024s-2.959-2.997-2.96-5.107c-0.001-0.651 0.107-1.297 0.318-1.913 0.584-1.696 1.909-3.034 3.599-3.634s3.562-0.398 5.085 0.55l3.209-2.627c-1.716-1.424-3.919-2.28-6.322-2.28z',
   dribbble: 'M16 32c-8.835-0.006-15.994-7.169-15.994-16.004 0-6.586 3.978-12.243 9.663-14.699l0.104-0.040c1.838-0.798 3.979-1.262 6.228-1.262 8.839 0 16.004 7.165 16.004 16.004 0 6.59-3.983 12.249-9.672 14.703l-0.104 0.040c-1.829 0.795-3.959 1.257-6.197 1.257-0.011 0-0.022 0-0.033-0h0.002zM16 7.467c-0.608 0-1.202 0.063-1.774 0.183l0.056-0.010c-0.611 0.126-1.148 0.297-1.658 0.517l0.055-0.021c-0.557 0.238-1.033 0.501-1.48 0.806l0.029-0.019c-0.915 0.622-1.681 1.386-2.285 2.271l-0.019 0.029c-0.596 0.869-1.042 1.892-1.275 2.993l-0.010 0.056c-0.11 0.516-0.173 1.108-0.173 1.715s0.063 1.2 0.183 1.771l-0.010-0.056c0.243 1.157 0.689 2.179 1.304 3.078l-0.019-0.029c0.928 1.36 2.202 2.421 3.698 3.067l0.055 0.021c0.981 0.423 2.122 0.67 3.322 0.67s2.341-0.246 3.377-0.691l-0.056 0.021c0.557-0.238 1.033-0.501 1.479-0.805l-0.030 0.019c0.472-0.322 0.885-0.664 1.264-1.040l-0 0c0.377-0.378 0.719-0.79 1.022-1.232l0.019-0.030c0.287-0.416 0.55-0.892 0.766-1.393l0.021-0.054c0.425-0.979 0.672-2.119 0.672-3.317s-0.247-2.338-0.694-3.372l0.021 0.055c-0.236-0.555-0.5-1.031-0.805-1.476l0.018 0.028c-0.321-0.471-0.664-0.884-1.041-1.261l0 0c-0.378-0.376-0.791-0.717-1.232-1.019l-0.030-0.019c-0.87-0.597-1.895-1.043-2.998-1.274l-0.055-0.010c-0.517-0.11-1.11-0.174-1.718-0.174h-0z M16 23.265c-0.004 0-0.009 0-0.014 0-1.692 0-3.248-0.58-4.481-1.552l0.015 0.012c0.36-0.678 0.792-1.26 1.297-1.769l-0.001 0.001c1.201-1.234 2.684-2.187 4.346-2.754l0.078-0.023c0.016-0.006 0.032-0.011 0.048-0.016 0.63 1.567 1.169 3.421 1.528 5.338l0.029 0.187c-0.835 0.365-1.809 0.577-2.832 0.577-0.005 0-0.010 0-0.015 0h0.001zM20.072 22.024v0c-0.373-1.997-0.864-3.741-1.491-5.418l0.073 0.221c0.448-0.075 0.965-0.118 1.491-0.118 0.009 0 0.019 0 0.028 0h-0.001c0.009-0 0.019-0 0.029-0 1.067 0 2.098 0.159 3.069 0.453l-0.075-0.020c-0.341 2.042-1.488 3.766-3.097 4.864l-0.025 0.016zM10.58 20.851v0c-1.158-1.281-1.867-2.987-1.867-4.859 0-0.001 0-0.003 0-0.004v0c0-0.051 0-0.106 0.004-0.172l0.002-0.060c0.026 0 0.12 0.003 0.263 0.003 2.578-0.019 5.061-0.397 7.409-1.087l-0.19 0.048c0.219 0.428 0.416 0.844 0.591 1.236l-0.027 0.008c-0.076 0.022-0.17 0.049-0.26 0.079-1.753 0.607-3.243 1.591-4.43 2.862l-0.006 0.006c-0.554 0.569-1.046 1.204-1.461 1.891l-0.026 0.047zM23.284 15.914v0l-0.007-0.002c-1.017-0.209-2.187-0.331-3.385-0.334h-0.003c-0.011-0-0.024-0-0.037-0-0.579 0-1.149 0.036-1.709 0.106l0.067-0.007c-0.049-0.12-0.096-0.228-0.158-0.377-0.143-0.334-0.301-0.68-0.484-1.056 2.853-1.164 4.012-2.81 4.060-2.88 1.016 1.228 1.638 2.813 1.657 4.543l0 0.004zM8.991 14.489h-0.122c0.495-2.263 1.986-4.102 3.979-5.064l0.044-0.019 0.005 0.006c0.879 1.19 1.772 2.557 2.588 3.974l0.113 0.213c-1.975 0.539-4.247 0.862-6.59 0.889l-0.016 0zM17.007 13.16v0c-0.904-1.631-1.802-3.013-2.784-4.328l0.071 0.099-0.011-0.014c0.516-0.129 1.108-0.204 1.717-0.204h0c0.001 0 0.003 0 0.004 0 1.847 0 3.533 0.688 4.816 1.822l-0.008-0.007c-0.112 0.166-1.168 1.646-3.805 2.634z',
   microsoft: 'M4.8 4.8h10.73v10.73h-10.73zM16.47 4.8h10.73v10.73h-10.73zM4.8 16.47h10.73v10.73h-10.73zM16.47 16.47h10.73v10.73h-10.73z',
+  x: 'M22.901 5h3.68l-8.04 9.19L28 26.693h-7.406l-5.8-7.584-6.638 7.584H4.474l8.6-9.83L4 5h7.594l5.243 6.932L22.901 5zM21.61 24.491h2.039L10.486 7.087H8.298L21.61 24.491z',
   'twitter-n': 'M26.169 10.782c0.016 0.227 0.016 0.455 0.016 0.682 0 6.936-5.28 14.928-14.928 14.928-0.011 0-0.025 0-0.039 0-2.979 0-5.752-0.878-8.076-2.39l0.057 0.035c0.356 0.041 0.769 0.065 1.187 0.065 0.028 0 0.056-0 0.085-0l-0.004 0c0.008 0 0.018 0 0.028 0 2.457 0 4.718-0.844 6.507-2.257l-0.022 0.017c-2.286-0.043-4.212-1.539-4.895-3.601l-0.011-0.037c0.297 0.049 0.64 0.078 0.989 0.080h0.002c0.491-0.001 0.967-0.066 1.42-0.187l-0.039 0.009c-2.417-0.502-4.207-2.613-4.207-5.143 0-0.003 0-0.005 0-0.008v0-0.065c0.683 0.388 1.495 0.631 2.361 0.665l0.010 0c-1.418-0.956-2.339-2.556-2.339-4.371 0-0.975 0.266-1.888 0.728-2.671l-0.013 0.024c2.6 3.182 6.445 5.262 10.782 5.489l0.037 0.002c-0.080-0.36-0.127-0.774-0.13-1.198v-0.002c0.004-2.898 2.354-5.246 5.252-5.246 1.508 0 2.868 0.636 3.826 1.654l0.003 0.003c1.255-0.247 2.371-0.687 3.376-1.293l-0.046 0.026c-0.406 1.233-1.222 2.239-2.283 2.878l-0.024 0.013c1.12-0.131 2.141-0.418 3.088-0.84l-0.067 0.027c-0.732 1.057-1.603 1.954-2.6 2.691l-0.031 0.022z',
   'facebook-n': 'M21.613 17.6l0.711-4.633h-4.446v-3.006c0-1.267 0.621-2.503 2.612-2.503h2.021v-3.945c-1.066-0.181-2.306-0.295-3.569-0.313l-0.018-0c-3.661 0-6.054 2.219-6.054 6.236v3.531h-4.070v4.633h4.070v11.2h5.009v-11.2z',
   'instagram-n': 'M16.003 9.437c-3.623 0-6.56 2.937-6.56 6.56s2.937 6.56 6.56 6.56c3.623 0 6.56-2.937 6.56-6.56v0c0-0.002 0-0.005 0-0.008 0-3.619-2.933-6.552-6.552-6.552-0.003 0-0.006 0-0.008 0h0zM16.003 20.267c-0 0-0.001 0-0.001 0-2.357 0-4.267-1.91-4.267-4.267s1.911-4.267 4.267-4.267c2.357 0 4.267 1.911 4.267 4.267v0c-0.004 2.355-1.912 4.263-4.266 4.267h-0zM24.364 9.168c-0 0.845-0.685 1.53-1.53 1.53s-1.53-0.685-1.53-1.53 0.685-1.53 1.53-1.53v0c0.001 0 0.002 0 0.003 0 0.843 0 1.527 0.684 1.527 1.527 0 0.001 0 0.003 0 0.004v-0zM28.71 10.722c0.001-0.047 0.002-0.102 0.002-0.157 0-2.016-0.788-3.849-2.072-5.206l0.003 0.004c-1.361-1.282-3.199-2.069-5.222-2.069-0.049 0-0.097 0-0.145 0.001l0.007-0c-2.113-0.12-8.446-0.12-10.56 0-0.044-0.001-0.096-0.001-0.148-0.001-2.018 0-3.853 0.785-5.215 2.067l0.004-0.004c-1.281 1.357-2.069 3.193-2.069 5.212 0 0.052 0.001 0.104 0.002 0.156l-0-0.008c-0.12 2.114-0.12 8.449 0 10.56-0.001 0.047-0.002 0.102-0.002 0.157 0 2.016 0.788 3.849 2.072 5.206l-0.003-0.004c1.362 1.282 3.202 2.069 5.226 2.069 0.047 0 0.095-0 0.142-0.001l-0.007 0c2.113 0.12 8.446 0.12 10.56 0 0.047 0.001 0.102 0.002 0.158 0.002 2.016 0 3.849-0.788 5.206-2.073l-0.003 0.003c1.281-1.361 2.068-3.2 2.068-5.223 0-0.048-0-0.097-0.001-0.145l0 0.007c0.119-2.111 0.119-8.441 0-10.554zM25.98 23.546c-0.449 1.116-1.316 1.985-2.404 2.423l-0.029 0.010c-1.685 0.668-5.68 0.514-7.544 0.514s-5.863 0.148-7.543-0.514c-1.116-0.449-1.984-1.317-2.422-2.405l-0.010-0.029c-0.668-1.685-0.514-5.68-0.514-7.546s-0.149-5.866 0.514-7.546c0.449-1.116 1.317-1.984 2.404-2.422l0.029-0.010c1.685-0.668 5.68-0.514 7.544-0.514s5.866-0.149 7.544 0.514c1.116 0.449 1.983 1.317 2.422 2.404l0.010 0.029c0.668 1.685 0.514 5.68 0.514 7.546s0.154 5.866-0.514 7.546z',
@@ -970,13 +953,7 @@ const Spinner = props => {
 const TagWrapper = /*#__PURE__*/_styled.span.withConfig({
   displayName: "styles__TagWrapper",
   componentId: "sc-1ghratr-0"
-})(["--bg:", ";--txt:", ";display:inline-block;border:", " solid var(--bg);border-radius:", ";background-color:", ";padding:", " ", ";font-size:", ";font-weight:", ";text-transform:uppercase;letter-spacing:", ";line-height:1;color:", ";white-space:nowrap;"], props => {
-  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)');
+})(["--bg:", ";--txt:", ";display:inline-block;border:", " solid var(--bg);border-radius:", ";background-color:", ";padding:", " ", ";font-size:", ";font-weight:", ";text-transform:uppercase;letter-spacing:", ";line-height:1;color:", ";white-space:nowrap;"], props => useColor(props.color ?? 'black').color, props => useColor(props.txtColor ?? 'black').color, /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('4px'), props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('8px'), /*#__PURE__*/rem('12px'), typography.medium, /*#__PURE__*/rem('1px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)');
 
 const Tag = props => {
   const {
@@ -1000,13 +977,7 @@ const Tag = props => {
 const TagWrapper$1 = /*#__PURE__*/_styled.div.withConfig({
   displayName: "styles__TagWrapper",
   componentId: "sc-db57da-0"
-})(["--bg:", ";--valueColor:", ";display:flex;border:", " solid var(--bg);border-radius:", ";line-height:1;max-width:100%;width:max-content;overflow:hidden;span{display:inline-block;padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:", ";&.label{flex:1;color:var(--bg);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-transform:uppercase;}&.value{background-color:var(--bg);color:var(--valueColor);}}&:not(:first-child){margin-left:", ";}"], props => {
-  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'));
+})(["--bg:", ";--valueColor:", ";display:flex;border:", " solid var(--bg);border-radius:", ";line-height:1;max-width:100%;width:max-content;overflow:hidden;span{display:inline-block;padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:", ";&.label{flex:1;color:var(--bg);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-transform:uppercase;}&.value{background-color:var(--bg);color:var(--valueColor);}}&:not(:first-child){margin-left:", ";}"], props => useColor(props.color ?? 'black').color, props => useColor(props.valueColor ?? 'black').color, /*#__PURE__*/rem('2px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('3px'), /*#__PURE__*/rem('8px'), /*#__PURE__*/rem('12px'), typography.medium, /*#__PURE__*/rem('1px'), /*#__PURE__*/rem('5px'));
 
 const TagNumber = props => {
   const {
@@ -1146,6 +1117,21 @@ const Select = props => {
   }) : null);
 };
 
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 const SelectWrapper = _styled.div`
   .select {
     &-interactive {
@@ -1297,7 +1283,6 @@ const {
   Option
 } = components;
 const FormatGroupLabel = props => {
-  var _props$options;
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -1307,10 +1292,10 @@ const FormatGroupLabel = props => {
   }, /*#__PURE__*/React.createElement(SelectGroupLabel, {
     className: "selective-options-group-label"
   }, props.label), /*#__PURE__*/React.createElement(Tag, {
-    value: `${(_props$options = props.options) == null ? void 0 : _props$options.length}`
+    value: `${props.options.length}`
   }));
 };
-const CustomSelectOption = (props, commonProps) => /*#__PURE__*/React.createElement(Option, Object.assign({}, props, commonProps), props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
+const CustomSelectOption = (props, commonProps) => /*#__PURE__*/React.createElement(Option, _extends({}, props, commonProps), props.data.icon ? /*#__PURE__*/React.createElement(Icon, {
   icon: props.data.icon
 }) : props.data.customImage ? /*#__PURE__*/React.createElement("img", {
   src: props.data.customImage,
@@ -1338,7 +1323,7 @@ const SelectInteractive = ({
   onInputChange = () => {},
   ...rest
 }) => {
-  return /*#__PURE__*/React.createElement(SelectWrapper, Object.assign({}, rest), /*#__PURE__*/React.createElement(Select$1, {
+  return /*#__PURE__*/React.createElement(SelectWrapper, rest, /*#__PURE__*/React.createElement(Select$1, {
     name: name,
     value: value,
     isMulti: multi,
@@ -1348,16 +1333,17 @@ const SelectInteractive = ({
     isSearchable: search,
     classNamePrefix: "select",
     placeholder: placeholder,
-    className: "select-interactive",
+    className: "select-interactive"
     // @ts-ignore
-    onChange: e => onChange(e != null ? e : []),
+    ,
+    onChange: e => onChange(e ?? []),
     defaultMenuIsOpen: false,
     onInputChange: onInputChange,
     components: {
       Option: CustomSelectOption,
       SingleValue: CustomSelectValue
     },
-    formatGroupLabel: s => formatGroupLabel ? FormatGroupLabel == null ? void 0 : FormatGroupLabel(s) : undefined
+    formatGroupLabel: s => formatGroupLabel ? FormatGroupLabel(s) : undefined
   }), error ? /*#__PURE__*/React.createElement(ErrorField, {
     error: error
   }) : null);
@@ -2093,7 +2079,7 @@ const Toggle = ({
   useEffect(() => {
     setState(checked);
   }, [checked]);
-  return /*#__PURE__*/React.createElement(Switcher, Object.assign({
+  return /*#__PURE__*/React.createElement(Switcher, _extends({
     disabled: disabled,
     role: "radiogroup",
     "aria-label": "toggle switcher"
@@ -2294,7 +2280,7 @@ const ActionMenuList = props => {
   }) => /*#__PURE__*/React.createElement("li", {
     key: id,
     "data-testid": 'li-action-menu',
-    className: type != null ? type : undefined
+    className: type ?? undefined
   }, /*#__PURE__*/React.createElement("a", {
     href: url,
     onClick: e => {
@@ -2764,7 +2750,7 @@ const TableDnD = props => {
       "data-testid": colDataTestId ? `th-${colDataTestId}` : null
     }, value)))), /*#__PURE__*/React.createElement(Droppable, {
       droppableId: "droppable"
-    }, (provided, snapshot) => /*#__PURE__*/React.createElement("tbody", Object.assign({}, provided.droppableProps, {
+    }, (provided, snapshot) => /*#__PURE__*/React.createElement("tbody", _extends({}, provided.droppableProps, {
       ref: provided.innerRef,
       style: getListStyle(snapshot.isDraggingOver)
     }), validValues.map((row, index) =>
@@ -2774,7 +2760,7 @@ const TableDnD = props => {
       key: `${index}`,
       draggableId: `${index}`,
       index: index
-    }, (provided, snapshot) => /*#__PURE__*/React.createElement(TableRow, Object.assign({
+    }, (provided, snapshot) => /*#__PURE__*/React.createElement(TableRow, _extends({
       ref: provided.innerRef,
       key: row.id,
       "data-testid": `row-${dataTestId}`,
@@ -2782,7 +2768,7 @@ const TableDnD = props => {
       style: getItemStyle(snapshot.isDragging, provided.draggableProps.style)
     }, provided.draggableProps), /*#__PURE__*/React.createElement("td", {
       className: "thin drag-handle"
-    }, /*#__PURE__*/React.createElement("div", Object.assign({}, provided.dragHandleProps), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement("div", provided.dragHandleProps, /*#__PURE__*/React.createElement(Icon, {
       icon: "drag-handle"
     }))), columns.map(({
       id = '',
@@ -3109,7 +3095,7 @@ const Error = props => {
   }, variant === 'default' ? /*#__PURE__*/React.createElement(Icon, {
     icon: "warning",
     fill: "hsl(354, 83%, 64%)"
-  }) : /*#__PURE__*/React.createElement("span", null, "\u00AF\\\\_(\u30C4)_/\u00AF"), value && /*#__PURE__*/React.createElement("span", null, value));
+  }) : /*#__PURE__*/React.createElement("span", null, "\xAF\\\\_(\u30C4)_/\xAF"), value && /*#__PURE__*/React.createElement("span", null, value));
 };
 
 const Wrapper$b = _styled.div`
@@ -5348,27 +5334,56 @@ const FieldWidthButton = props => {
     name,
     placeholder,
     value,
+    onChange,
     dataTestId,
     buttonIcon,
     buttonValue,
     buttonAction,
-    buttonDisabled
+    buttonDisabled,
+    disabled = true,
+    clearFieldAfterSubmit = false
   } = props;
+  const [loading, setLoading] = useState(false);
+  const [fieldValue, setFieldValue] = useState(value ?? null);
+  const handleOnClickAction = async () => {
+    if ((buttonAction === null || buttonAction === void 0 ? void 0 : buttonAction.constructor.name) !== 'AsyncFunction') {
+      buttonAction === null || buttonAction === void 0 ? void 0 : buttonAction(fieldValue);
+    } else {
+      setLoading(true);
+      await (buttonAction === null || buttonAction === void 0 ? void 0 : buttonAction(fieldValue));
+      setLoading(false);
+    }
+    clearFieldAfterSubmit && setFieldValue('');
+  };
   return /*#__PURE__*/React.createElement(Wrapper$e, null, label && /*#__PURE__*/React.createElement(Label, {
     value: label
   }), /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(TextField, {
     type: type,
     name: name,
-    value: value,
+    disabled: disabled,
     placeholder: placeholder,
     dataTestId: dataTestId,
-    disabled: true
+    value: fieldValue ?? undefined,
+    onChange: e => {
+      e.preventDefault();
+      if (e.target.value === '' || e.target.value === ' ') {
+        setFieldValue(null);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+      } else {
+        setFieldValue(e.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+      }
+    }
   }), /*#__PURE__*/React.createElement(Button, {
     color: "purple100",
+    loading: loading,
     icon: buttonIcon,
     value: buttonValue,
-    action: buttonAction,
-    disabled: buttonDisabled
+    disabled: buttonDisabled,
+    action: e => {
+      e.preventDefault();
+      handleOnClickAction();
+    }
   })));
 };