@rango-dev/ui 0.1.13 → 0.1.14-next.2

package/dist/ui.cjs.development.js

@@ -16,6 +16,7 @@ var walletsShared = require('@rango-dev/wallets-shared');
 var RadixSwitch = require('@radix-ui/react-switch');
 var RadioGroup = require('@radix-ui/react-radio-group');
 var reactColor = require('react-color');
+var rgbHex = _interopDefault(require('rgb-hex'));
 var copy = _interopDefault(require('copy-to-clipboard'));
 
 function _extends() {
@@ -62,14 +63,16 @@ var theme = {
     primary700: '#396216',
     primary800: '#26420F',
     primary900: '#132107',
-    neutrals200: '#FAFAFA',
-    neutrals300: '#EAEAEA',
-    neutrals400: '#999999',
-    neutrals500: '#888888',
-    neutrals600: '#666666',
-    neutrals700: '#444444',
-    neutrals800: '#333333',
-    neutrals900: '#111111',
+    surface: '#fff',
+    neutral100: '#f3f3f3',
+    neutral200: '#FAFAFA',
+    neutral300: '#EAEAEA',
+    neutral400: '#999999',
+    neutral500: '#888888',
+    neutral600: '#666666',
+    neutral700: '#444444',
+    neutral800: '#333333',
+    neutral900: '#111111',
     background: '#fff',
     foreground: '#000',
     success: '#0070F3',
@@ -183,14 +186,16 @@ var _typedCreateStiches = /*#__PURE__*/typedCreateStiches({
 var lightTheme = /*#__PURE__*/createTheme({});
 var darkTheme = /*#__PURE__*/createTheme({
   colors: {
-    neutrals200: '#111111',
-    neutrals300: '#333333',
-    neutrals400: '#444444',
-    neutrals500: '#666666',
-    neutrals600: '#888888',
-    neutrals700: '#999999',
-    neutrals800: '#EAEAEA',
-    neutrals900: '#FAFAFA',
+    surface: '#000',
+    neutral900: '#f3f3f3',
+    neutral800: '#FAFAFA',
+    neutral700: '#EAEAEA',
+    neutral600: '#999999',
+    neutral500: '#888888',
+    neutral400: '#666666',
+    neutral300: '#444444',
+    neutral200: '#333333',
+    neutral100: '#111111',
     foreground: '#fff',
     background: '#000'
   },
@@ -229,7 +234,7 @@ var SvgWithStrokeColor = /*#__PURE__*/styled('svg', {
     },
     disabled: {
       "true": {
-        stroke: '$neutrals400'
+        stroke: '$neutral400'
       }
     }
   }
@@ -263,7 +268,7 @@ var SvgWithFillColor = /*#__PURE__*/styled('svg', {
     },
     disabled: {
       "true": {
-        stroke: '$neutrals400'
+        stroke: '$neutral400'
       }
     }
   }
@@ -1646,7 +1651,7 @@ var ChainLogo = /*#__PURE__*/styled('div', {
   padding: '$2',
   borderRadius: '50%',
   backgroundColor: '$background',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
   img: {
     width: '100%',
     display: 'block'
@@ -1691,7 +1696,7 @@ var Detail = /*#__PURE__*/styled('div', {
   }
 });
 var SubTitle = /*#__PURE__*/styled(Typography, {
-  color: '$neutrals600',
+  color: '$neutral600',
   display: 'block',
   paddingLeft: '$8'
 });
@@ -1725,14 +1730,14 @@ function StepDetail(props) {
   }, amount), !amount && estimatedAmount && React__default.createElement(Typography, {
     noWrap: true,
     variant: direction === 'vertical' ? 'body2' : 'title',
-    color: '$neutrals600'
+    color: '$neutral600'
   }, estimatedAmount), "\xA0", React__default.createElement(Typography, {
     variant: direction === 'vertical' ? 'body2' : 'title',
     noWrap: true
   }, symbol), React__default.createElement(SubTitle, {
     noWrap: true,
     variant: "caption",
-    color: "$neutrals800"
+    color: "$neutral800"
   }, "on ", blockchain)));
 }
 
@@ -1746,7 +1751,7 @@ var waveSquares = /*#__PURE__*/keyframes({
 });
 var SkeletonContainer = /*#__PURE__*/styled('div', {
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   background: "linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%)",
   backgroundSize: '800px 100px',
   animation: waveSquares + " 2s infinite ease-out",
@@ -1809,7 +1814,7 @@ var spin = /*#__PURE__*/keyframes({
 var SpinnerContainer = /*#__PURE__*/styled('div', {
   borderRadius: '50%',
   position: 'relative',
-  border: "2px solid $neutrals300",
+  border: "2px solid $neutral100",
   borderRight: "2px solid",
   animation: spin + " 1.5s linear infinite",
   margin: "0px $8",
@@ -1892,7 +1897,7 @@ var TooltipContent = /*#__PURE__*/styled(RadixTooltip.Content, {
         color: '$white'
       },
       gray: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         color: '$black'
       },
       black: {
@@ -1922,7 +1927,7 @@ var TooltipArrow = /*#__PURE__*/styled(RadixTooltip.Arrow, {
         fill: '$success'
       },
       gray: {
-        fill: '$neutrals300'
+        fill: '$neutral100'
       },
       black: {
         fill: '$black'
@@ -1987,11 +1992,12 @@ function Image(props) {
 
 var Container = /*#__PURE__*/styled('div', {
   borderRadius: '$5',
-  border: '1px solid $neutrals300',
+  border: '1px solid $neutral100',
   display: 'flex',
   alignItems: 'center',
   minHeight: 126,
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  backgroundColor: '$surface'
 });
 var ErrorMsg = /*#__PURE__*/styled(Typography, {
   color: '$error'
@@ -2019,7 +2025,7 @@ var Line = /*#__PURE__*/styled('div', {
 });
 var HR = /*#__PURE__*/styled('hr', {
   width: '100%',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
   margin: '$8 0'
 });
 var RelativeContainer = /*#__PURE__*/styled('div', {
@@ -2060,7 +2066,7 @@ var pulse = /*#__PURE__*/keyframes({
   }
 });
 var GasContainer = /*#__PURE__*/styled('div', {
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   borderRadius: '5px',
   margin: '$4',
   display: 'flex',
@@ -2212,41 +2218,41 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
     },
     variant: {
       contained: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         color: '$foreground',
         border: 0,
         '&:hover': {
-          backgroundColor: '$neutrals200'
+          backgroundColor: '$neutral200'
         },
         '&:disabled': {
-          background: '$neutrals400'
+          background: '$neutral400'
         },
         '&:disabled:hover': {
-          background: '$neutrals400',
+          background: '$neutral400',
           transform: 'unset'
         }
       },
       outlined: {
-        backgroundColor: '$background',
+        backgroundColor: '$surface',
         border: 1,
         borderStyle: 'solid',
-        borderColor: '$neutrals400',
+        borderColor: '$neutral400',
         color: '$foreground',
         '&:hover': {
-          borderColor: '$neutrals600'
+          borderColor: '$neutral600'
         },
         '&:disabled': {
-          borderColor: '$neutrals300',
-          color: '$neutrals400'
+          borderColor: '$neutral400',
+          color: '$neutral400'
         }
       },
       ghost: (_ghost = {
         color: '$foreground',
         '&:hover': {
-          backgroundColor: '$neutrals200'
+          backgroundColor: '$neutral200'
         },
         '&:disabled': {
-          color: '$neutrals400 !important'
+          color: '$neutral400'
         },
         background: 'transparent',
         border: 0
@@ -2289,19 +2295,19 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
     type: 'primary',
     variant: 'outlined',
     css: {
-      color: '$primary !important',
+      color: '$primary',
       borderColor: '$primary',
       '&:hover': {
-        color: '$primary700 !important',
-        borderColor: '$primary700 !important'
+        color: '$primary700',
+        borderColor: '$primary700'
       },
       '&:visited': {
-        color: '$primary900 !important',
-        borderColor: '$primary900 !important'
+        color: '$primary900',
+        borderColor: '$primary900'
       },
       '&:focus': {
-        color: '$primary600 !important',
-        borderColor: '$primary600 !important'
+        color: '$primary600',
+        borderColor: '$primary600'
       }
     }
   }, {
@@ -2327,7 +2333,7 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
       $$color: '$colors$background'
     }, _css["." + darkTheme + " &"] = {
       $$color: '$colors$foreground'
-    }, _css.color = '$$color !important', _css['&:hover'] = {
+    }, _css.color = '$$color', _css['&:hover'] = {
       background: '$error300'
     }, _css['&:visited'] = {
       background: '$error700'
@@ -2338,19 +2344,19 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
     type: 'error',
     variant: 'outlined',
     css: {
-      color: '$error !important',
+      color: '$error',
       borderColor: '$error',
       '&:hover': {
-        color: '$error300 !important',
-        borderColor: '$error300 !important'
+        color: '$error300',
+        borderColor: '$error300'
       },
       '&:visited': {
-        color: '$error700 !important',
-        borderColor: '$error700 !important'
+        color: '$error700',
+        borderColor: '$error700'
       },
       '&:focus': {
-        color: '$error700 !important',
-        borderColor: '$error700 !important'
+        color: '$error700',
+        borderColor: '$error700'
       }
     }
   }, {
@@ -2376,7 +2382,7 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
       $$color: '$colors$background'
     }, _css2["." + darkTheme + " &"] = {
       $$color: '$colors$foreground'
-    }, _css2.color = '$$color !important', _css2['&:hover'] = {
+    }, _css2.color = '$$color', _css2['&:hover'] = {
       background: '$warning300'
     }, _css2['&:visited'] = {
       background: '$warning700'
@@ -2387,19 +2393,19 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
     type: 'warning',
     variant: 'outlined',
     css: {
-      color: '$warning !important',
+      color: '$warning',
       borderColor: '$warning',
       '&:hover': {
-        color: '$warning300 !important',
-        borderColor: '$warning300 !important'
+        color: '$warning300',
+        borderColor: '$warning300'
       },
       '&:visited': {
-        color: '$warning700 !important',
-        borderColor: '$warning700 !important'
+        color: '$warning700',
+        borderColor: '$warning700'
       },
       '&:focus': {
-        color: '$warning700 !important',
-        borderColor: '$warning700 !important'
+        color: '$warning700',
+        borderColor: '$warning700'
       }
     }
   }, {
@@ -2425,7 +2431,7 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
       $$color: '$colors$background'
     }, _css3["." + darkTheme + " &"] = {
       $$color: '$colors$foreground'
-    }, _css3.color = '$$color !important', _css3['&:hover'] = {
+    }, _css3.color = '$$color', _css3['&:hover'] = {
       background: '$success300'
     }, _css3['&:visited'] = {
       background: '$success700'
@@ -2436,19 +2442,19 @@ var ButtonContainer = /*#__PURE__*/styled('button', {
     type: 'success',
     variant: 'outlined',
     css: {
-      color: '$success !important',
+      color: '$success',
       borderColor: '$success',
       '&:hover': {
-        color: '$success300 !important',
-        borderColor: '$success300 !important'
+        color: '$success300',
+        borderColor: '$success300'
       },
       '&:visited': {
-        color: '$success700 !important',
-        borderColor: '$success700 !important'
+        color: '$success700',
+        borderColor: '$success700'
       },
       '&:focus': {
-        color: '$success700 !important',
-        borderColor: '$success700 !important'
+        color: '$success700',
+        borderColor: '$success700'
       }
     }
   }, {
@@ -2645,10 +2651,10 @@ function Header(props) {
 
 var _excluded$G = ["label", "prefix", "suffix", "children", "size", "style"];
 var InputContainer = /*#__PURE__*/styled('div', {
-  backgroundColor: '$background',
+  backgroundColor: '$surface',
   padding: '1px',
   boxSizing: 'border-box',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
   borderRadius: '$5',
   height: '$48',
   display: 'flex',
@@ -2685,7 +2691,7 @@ var InputContainer = /*#__PURE__*/styled('div', {
     },
     disabled: {
       "true": {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         cursor: 'not-allowed',
         filter: 'grayscale(100%)'
       }
@@ -2834,6 +2840,71 @@ function limitDecimalPlaces(numberString, maxDecimalPlaces) {
     return roundedNumber.toString();
   }
 }
+var hexToRgb = function hexToRgb(hex) {
+  return function (value) {
+    return value.length === 3 ? value.split('').map(function (c) {
+      return parseInt(c.repeat(2), 16);
+    }) : (value.match(/.{1,2}/g) || []).map(function (v) {
+      return parseInt(v, 16);
+    });
+  }(hex.replace('#', ''));
+};
+var isHexTooDark = function isHexTooDark(hexColor) {
+  return function (_ref) {
+    var r = _ref[0],
+      g = _ref[1],
+      b = _ref[2];
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b < 40;
+  }(hexToRgb(hexColor));
+};
+var isHexTooLight = function isHexTooLight(hexColor) {
+  return function (_ref2) {
+    var r = _ref2[0],
+      g = _ref2[1],
+      b = _ref2[2];
+    return (r * 299 + g * 587 + b * 114) / 1000 > 155;
+  }(hexToRgb(hexColor));
+};
+var colorShade = function colorShade(col, amt) {
+  col = col.replace(/^#/, '');
+  if (col.length === 3) col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
+  var _col$match = col.match(/.{2}/g),
+    r = _col$match[0],
+    g = _col$match[1],
+    b = _col$match[2];
+  var _ref3 = [parseInt(r, 16) + amt, parseInt(g, 16) + amt, parseInt(b, 16) + amt];
+  r = _ref3[0];
+  g = _ref3[1];
+  b = _ref3[2];
+  r = Math.max(Math.min(255, r), 0).toString(16);
+  g = Math.max(Math.min(255, g), 0).toString(16);
+  b = Math.max(Math.min(255, b), 0).toString(16);
+  var rr = (r.length < 2 ? '0' : '') + r;
+  var gg = (g.length < 2 ? '0' : '') + g;
+  var bb = (b.length < 2 ? '0' : '') + b;
+  return "#" + rr + gg + bb;
+};
+var generateRangeColors = function generateRangeColors(name, mode, color) {
+  var _colors;
+  var colors = (_colors = {}, _colors[name] = color, _colors);
+  if (color) {
+    var c = color;
+    if (isHexTooDark(color) || mode === 'dark') {
+      for (var i = 1; i < 10; i++) {
+        var _extends2;
+        colors = _extends({}, colors, (_extends2 = {}, _extends2[name + i * 100] = name === 'neutral' ? colorShade(c, i * 15) : colorShade(color, i * 5), _extends2));
+      }
+    }
+    if (isHexTooLight(color) || mode === 'light') {
+      for (var _i = 1; _i < 10; _i++) {
+        var _extends3;
+        c = colorShade(c, -(_i * 5));
+        colors = _extends({}, colors, (_extends3 = {}, _extends3[name + _i * 100] = name === 'neutral' ? colorShade(c, -(_i * 5)) : colorShade(color, -(_i * 5)), _extends3));
+      }
+    }
+  }
+  return colors;
+};
 
 var SpacerContainer = /*#__PURE__*/styled('div', {
   variants: {
@@ -2952,8 +3023,8 @@ var MainContainer = /*#__PURE__*/styled('div', {
   width: '100%',
   padding: '$16',
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
-  color: '$neutrals800',
+  backgroundColor: '$neutral100',
+  color: '$neutral800',
   '.main': {
     display: 'flex',
     alignItems: 'center'
@@ -3138,7 +3209,7 @@ function TokenItem(props) {
     variant: "body1"
   }, token.symbol), React__default.createElement(Typography, {
     variant: "caption",
-    color: "neutrals600"
+    color: "neutral600"
   }, token.name))));
 }
 
@@ -3356,7 +3427,7 @@ var ChipCointainer = /*#__PURE__*/styled('div', {
         color: '$background'
       },
       "false": {
-        backgroundColor: '$background'
+        backgroundColor: '$surface'
       }
     }
   }
@@ -3549,8 +3620,8 @@ var StyledSwitchRoot = /*#__PURE__*/styled(RadixSwitch.Root, {
   borderStyle: 'solid',
   width: '42px',
   height: '22px',
-  backgroundColor: '$neutrals600',
-  borderColor: '$neutrals600',
+  backgroundColor: '$neutral600',
+  borderColor: '$neutral600',
   borderRadius: '99999px',
   position: 'relative',
   padding: '0',
@@ -3669,7 +3740,7 @@ function LiquiditySourceList(props) {
     variant: "h5"
   }, "Bridges"), React__default.createElement(Typography, {
     variant: "body1",
-    color: "neutrals800"
+    color: "neutral800"
   }, totalSelectedBridges === totalBridges ? totalBridges : totalSelectedBridges + " / " + totalBridges)), React__default.createElement(Spacer, {
     size: 12,
     direction: "vertical"
@@ -3689,7 +3760,7 @@ function LiquiditySourceList(props) {
     variant: "h5"
   }, "Exchanges"), React__default.createElement(Typography, {
     variant: "body1",
-    color: "neutrals800"
+    color: "neutral800"
   }, totalSelectedExchanges === totalExchanges ? totalExchanges : totalSelectedExchanges + " / " + totalExchanges)), React__default.createElement(Spacer, {
     size: 12,
     direction: "vertical"
@@ -3776,7 +3847,7 @@ var Circle = /*#__PURE__*/styled('div', {
   width: 12,
   height: 12,
   borderRadius: 6,
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
   position: 'absolute',
   top: 12,
   right: 12,
@@ -3786,7 +3857,7 @@ var Circle = /*#__PURE__*/styled('div', {
         borderColor: '$success'
       },
       "false": {
-        borderColor: '$neutrals400'
+        borderColor: '$neutral400'
       }
     }
   }
@@ -3802,7 +3873,7 @@ var SolidCircle = /*#__PURE__*/styled('div', {
         backgroundColor: '$success'
       },
       "false": {
-        backgroundColor: '$neutrals400'
+        backgroundColor: '$neutral400'
       }
     }
   }
@@ -3827,8 +3898,8 @@ var Container$1 = /*#__PURE__*/styled('div', {
         color: '$success'
       },
       "false": {
-        borderColor: '$neutrals400',
-        color: '$neutrals400'
+        borderColor: '$neutral400',
+        color: '$neutral400'
       }
     }
   }
@@ -3901,9 +3972,9 @@ var StyledItem = /*#__PURE__*/styled(RadioGroup.Item, {
   borderRadius: '100%',
   cursor: 'pointer',
   backgroundColor: '$background',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
   '&:hover': {
-    borderColor: '$neutrals600'
+    borderColor: '$neutral600'
   }
 });
 var Container$2 = /*#__PURE__*/styled('div', {
@@ -3958,7 +4029,7 @@ function Radio(props) {
 
 var BaseContainer = /*#__PURE__*/styled('div', {
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   padding: '$16'
 });
 var Title = /*#__PURE__*/styled(Typography, {
@@ -4012,7 +4083,8 @@ function Settings(props) {
     onThemeChange = props.onThemeChange,
     toggleInfiniteApprove = props.toggleInfiniteApprove,
     infiniteApprove = props.infiniteApprove,
-    loadingStatus = props.loadingStatus;
+    loadingStatus = props.loadingStatus,
+    singleTheme = props.singleTheme;
   var _useState = React.useState(props.selectedSlippage),
     selectedSlippage = _useState[0],
     setSelectedSlippage = _useState[1];
@@ -4054,7 +4126,7 @@ function Settings(props) {
       width: '128px',
       flexGrow: 'initial'
     }
-  }))), React__default.createElement(ThemesContainer, null, React__default.createElement(Title, {
+  }))), !singleTheme && React__default.createElement(ThemesContainer, null, React__default.createElement(Title, {
     variant: "body2"
   }, "Theme"), React__default.createElement(Radio, {
     value: selectedTheme,
@@ -4087,7 +4159,7 @@ function Settings(props) {
     loading: loadingStatus === 'loading',
     suffix: React__default.createElement(LiquiditySourceNumber, null, loadingStatus === 'success' && React__default.createElement(Typography, {
       variant: "body2",
-      color: "neutrals800"
+      color: "neutral800"
     }, liquiditySources.length !== selectedLiquiditySources.length ? selectedLiquiditySources.length + " / " + liquiditySources.length : liquiditySources.length), loadingStatus === 'failed' && React__default.createElement(Typography, {
       variant: "body2",
       color: "$error500"
@@ -4123,14 +4195,14 @@ var MainContainer$2 = /*#__PURE__*/styled('div', {
       height: '$8'
     },
     '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutrals400',
+      backgroundColor: '$neutral400',
       borderRadius: '$10'
     },
     '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: '$neutrals500'
+      backgroundColor: '$neutral500'
     },
     '&::-webkit-scrollbar-track': {
-      backgroundColor: '$neutrals300'
+      backgroundColor: '$neutral100'
     }
   },
   variants: {
@@ -4165,7 +4237,7 @@ var TokenContainer = /*#__PURE__*/styled('div', {
     fontWeight: 'bold'
   },
   '& .estimated': {
-    color: '$neutrals600'
+    color: '$neutral600'
   }
 });
 var TokenImage = /*#__PURE__*/styled('div', {
@@ -4185,7 +4257,7 @@ var TokenImage = /*#__PURE__*/styled('div', {
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '$background',
-    border: '1px solid $neutrals400'
+    border: '1px solid $neutral400'
   }
 });
 function Token(props) {
@@ -4221,7 +4293,7 @@ var Container$3 = /*#__PURE__*/styled('div', {
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: '$16 0',
-  borderBottom: '1px solid $neutrals300',
+  borderBottom: '1px solid $neutral100',
   '& > .info': {
     display: 'flex',
     alignItems: 'center'
@@ -4296,7 +4368,7 @@ var Container$4 = /*#__PURE__*/styled('div', {
   position: 'relative'
 });
 var Color = /*#__PURE__*/styled('div', {
-  border: '1px solid $neutrals300',
+  border: '1px solid $neutral100',
   borderRadius: '$5',
   width: '$32',
   height: '$32'
@@ -4338,7 +4410,8 @@ function ColorPicker(_ref) {
   var color = _ref.color,
     onChangeColor = _ref.onChangeColor,
     label = _ref.label,
-    place = _ref.place;
+    place = _ref.place,
+    placeholder = _ref.placeholder;
   var _useState = React.useState(false),
     displayColorPicker = _useState[0],
     setDisplayColorPicker = _useState[1];
@@ -4354,12 +4427,20 @@ function ColorPicker(_ref) {
     fullWidth: true,
     align: "start",
     size: "large",
+    suffix: color && React__default.createElement("div", {
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onChangeColor(undefined);
+      }
+    }, React__default.createElement(CloseIcon, {
+      size: 20
+    })),
     onClick: function onClick() {
       return setDisplayColorPicker(function (prev) {
         return !prev;
       });
     }
-  }, color), displayColorPicker && React__default.createElement(Popover, {
+  }, color || placeholder), displayColorPicker && React__default.createElement(Popover, {
     place: place
   }, React__default.createElement(Cover, {
     onClick: function onClick() {
@@ -4367,7 +4448,10 @@ function ColorPicker(_ref) {
     }
   }), React__default.createElement(reactColor.ChromePicker, {
     color: color,
-    onChange: onChangeColor
+    onChange: function onChange(c) {
+      var color = '#' + rgbHex(c.rgb.r, c.rgb.g, c.rgb.b, c.rgb.a);
+      onChangeColor(color);
+    }
   })));
 }
 
@@ -4469,7 +4553,7 @@ var MainContainer$3 = /*#__PURE__*/styled('div', {
 var Section = /*#__PURE__*/styled('div', {
   paddingBottom: '$32',
   marginBottom: '$32',
-  borderBottom: '1px solid $neutrals400'
+  borderBottom: '1px solid $neutral400'
 });
 var Footer$1 = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4489,14 +4573,14 @@ var Container$5 = /*#__PURE__*/styled('div', {
     alignItems: 'center'
   },
   '.num': {
-    backgroundColor: '$neutrals300',
+    backgroundColor: '$neutral100',
     display: 'inline-flex',
     width: '24px',
     height: '24px',
-    color: '$neutrals800',
+    color: '$neutral800',
     borderRadius: '50%',
     fontSize: '$14',
-    border: '1px solid $neutrals400',
+    border: '1px solid $neutral400',
     justifyContent: 'center',
     alignItems: 'center'
   }
@@ -4609,7 +4693,7 @@ function SwapsGroup(props) {
       key: index
     }, React__default.createElement(Group, null, React__default.createElement(Typography, {
       variant: "body2",
-      color: "neutrals600",
+      color: "neutral600",
       className: "group-title"
     }, group.title), group.swaps.map(function (swap) {
       return React__default.createElement(React__default.Fragment, {
@@ -4743,7 +4827,7 @@ var SwapperContainer$1 = /*#__PURE__*/styled('div', {
 });
 var FeeContainer = /*#__PURE__*/styled('div', {
   paddingLeft: '$16',
-  color: '$neutrals800'
+  color: '$neutral800'
 });
 var Fee = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4775,7 +4859,7 @@ var SwapInfoContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
   flexDirection: 'column',
   paddingBottom: '$16',
-  borderBottom: '1px solid $neutrals300'
+  borderBottom: '1px solid $neutral100'
 });
 var InternalDetailsContainer = /*#__PURE__*/styled('div', {
   display: 'flex',
@@ -4809,12 +4893,12 @@ var Row$2 = /*#__PURE__*/styled('div', {
   fontSize: '$14',
   padding: '$8 0',
   '.name': {
-    color: '$neutrals600'
+    color: '$neutral600'
   },
   '.value': {
     display: 'flex',
     alignItems: 'center',
-    color: '$neutrals800',
+    color: '$neutral800',
     justifyContent: 'flex-end'
   },
   '.status': {
@@ -4839,7 +4923,7 @@ var RequestId = /*#__PURE__*/styled('div', {
 });
 var ExtraDetails = /*#__PURE__*/styled('div', {
   padding: '0',
-  color: '$neutrals600',
+  color: '$neutral600',
   fontSize: '$10'
 });
 var SwapFlowContainer = /*#__PURE__*/styled('div', {
@@ -5086,6 +5170,7 @@ exports.WarningIcon = WarningIcon;
 exports.createTheme = createTheme;
 exports.css = css;
 exports.darkTheme = darkTheme;
+exports.generateRangeColors = generateRangeColors;
 exports.globalCss = globalCss;
 exports.keyframes = keyframes;
 exports.lightTheme = lightTheme;