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

package/dist/ui.esm.js

@@ -9,6 +9,7 @@ import { detectInstallLink } from '@rango-dev/wallets-shared';
 import { Root as Root$2, Thumb } from '@radix-ui/react-switch';
 import { Root as Root$3, Item, Indicator as Indicator$1 } from '@radix-ui/react-radio-group';
 import { ChromePicker } from 'react-color';
+import rgbHex from 'rgb-hex';
 import copy from 'copy-to-clipboard';
 
 function _extends() {
@@ -55,14 +56,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',
@@ -176,14 +179,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'
   },
@@ -222,7 +227,7 @@ var SvgWithStrokeColor = /*#__PURE__*/styled('svg', {
     },
     disabled: {
       "true": {
-        stroke: '$neutrals400'
+        stroke: '$neutral400'
       }
     }
   }
@@ -256,7 +261,7 @@ var SvgWithFillColor = /*#__PURE__*/styled('svg', {
     },
     disabled: {
       "true": {
-        stroke: '$neutrals400'
+        stroke: '$neutral400'
       }
     }
   }
@@ -1639,7 +1644,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'
@@ -1684,7 +1689,7 @@ var Detail = /*#__PURE__*/styled('div', {
   }
 });
 var SubTitle = /*#__PURE__*/styled(Typography, {
-  color: '$neutrals600',
+  color: '$neutral600',
   display: 'block',
   paddingLeft: '$8'
 });
@@ -1718,14 +1723,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)));
 }
 
@@ -1739,7 +1744,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",
@@ -1802,7 +1807,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",
@@ -1885,7 +1890,7 @@ var TooltipContent = /*#__PURE__*/styled(Content$1, {
         color: '$white'
       },
       gray: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         color: '$black'
       },
       black: {
@@ -1915,7 +1920,7 @@ var TooltipArrow = /*#__PURE__*/styled(Arrow, {
         fill: '$success'
       },
       gray: {
-        fill: '$neutrals300'
+        fill: '$neutral100'
       },
       black: {
         fill: '$black'
@@ -1980,11 +1985,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'
@@ -2012,7 +2018,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', {
@@ -2053,7 +2059,7 @@ var pulse = /*#__PURE__*/keyframes({
   }
 });
 var GasContainer = /*#__PURE__*/styled('div', {
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   borderRadius: '5px',
   margin: '$4',
   display: 'flex',
@@ -2205,41 +2211,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
@@ -2282,19 +2288,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'
       }
     }
   }, {
@@ -2320,7 +2326,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'
@@ -2331,19 +2337,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'
       }
     }
   }, {
@@ -2369,7 +2375,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'
@@ -2380,19 +2386,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'
       }
     }
   }, {
@@ -2418,7 +2424,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'
@@ -2429,19 +2435,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'
       }
     }
   }, {
@@ -2638,10 +2644,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',
@@ -2678,7 +2684,7 @@ var InputContainer = /*#__PURE__*/styled('div', {
     },
     disabled: {
       "true": {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         cursor: 'not-allowed',
         filter: 'grayscale(100%)'
       }
@@ -2827,6 +2833,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: {
@@ -2945,8 +3016,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'
@@ -3131,7 +3202,7 @@ function TokenItem(props) {
     variant: "body1"
   }, token.symbol), React__default.createElement(Typography, {
     variant: "caption",
-    color: "neutrals600"
+    color: "neutral600"
   }, token.name))));
 }
 
@@ -3349,7 +3420,7 @@ var ChipCointainer = /*#__PURE__*/styled('div', {
         color: '$background'
       },
       "false": {
-        backgroundColor: '$background'
+        backgroundColor: '$surface'
       }
     }
   }
@@ -3543,8 +3614,8 @@ var StyledSwitchRoot = /*#__PURE__*/styled(Root$2, {
   borderStyle: 'solid',
   width: '42px',
   height: '22px',
-  backgroundColor: '$neutrals600',
-  borderColor: '$neutrals600',
+  backgroundColor: '$neutral600',
+  borderColor: '$neutral600',
   borderRadius: '99999px',
   position: 'relative',
   padding: '0',
@@ -3663,7 +3734,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"
@@ -3683,7 +3754,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"
@@ -3770,7 +3841,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,
@@ -3780,7 +3851,7 @@ var Circle = /*#__PURE__*/styled('div', {
         borderColor: '$success'
       },
       "false": {
-        borderColor: '$neutrals400'
+        borderColor: '$neutral400'
       }
     }
   }
@@ -3796,7 +3867,7 @@ var SolidCircle = /*#__PURE__*/styled('div', {
         backgroundColor: '$success'
       },
       "false": {
-        backgroundColor: '$neutrals400'
+        backgroundColor: '$neutral400'
       }
     }
   }
@@ -3821,8 +3892,8 @@ var Container$1 = /*#__PURE__*/styled('div', {
         color: '$success'
       },
       "false": {
-        borderColor: '$neutrals400',
-        color: '$neutrals400'
+        borderColor: '$neutral400',
+        color: '$neutral400'
       }
     }
   }
@@ -3895,9 +3966,9 @@ var StyledItem = /*#__PURE__*/styled(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', {
@@ -3952,7 +4023,7 @@ function Radio(props) {
 
 var BaseContainer = /*#__PURE__*/styled('div', {
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   padding: '$16'
 });
 var Title = /*#__PURE__*/styled(Typography, {
@@ -4006,7 +4077,8 @@ function Settings(props) {
     onThemeChange = props.onThemeChange,
     toggleInfiniteApprove = props.toggleInfiniteApprove,
     infiniteApprove = props.infiniteApprove,
-    loadingStatus = props.loadingStatus;
+    loadingStatus = props.loadingStatus,
+    singleTheme = props.singleTheme;
   var _useState = useState(props.selectedSlippage),
     selectedSlippage = _useState[0],
     setSelectedSlippage = _useState[1];
@@ -4048,7 +4120,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,
@@ -4081,7 +4153,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"
@@ -4117,14 +4189,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: {
@@ -4159,7 +4231,7 @@ var TokenContainer = /*#__PURE__*/styled('div', {
     fontWeight: 'bold'
   },
   '& .estimated': {
-    color: '$neutrals600'
+    color: '$neutral600'
   }
 });
 var TokenImage = /*#__PURE__*/styled('div', {
@@ -4179,7 +4251,7 @@ var TokenImage = /*#__PURE__*/styled('div', {
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '$background',
-    border: '1px solid $neutrals400'
+    border: '1px solid $neutral400'
   }
 });
 function Token(props) {
@@ -4215,7 +4287,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'
@@ -4290,7 +4362,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'
@@ -4332,7 +4404,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 = useState(false),
     displayColorPicker = _useState[0],
     setDisplayColorPicker = _useState[1];
@@ -4348,12 +4421,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() {
@@ -4361,7 +4442,10 @@ function ColorPicker(_ref) {
     }
   }), React__default.createElement(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);
+    }
   })));
 }
 
@@ -4463,7 +4547,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',
@@ -4483,14 +4567,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'
   }
@@ -4603,7 +4687,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, {
@@ -4737,7 +4821,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',
@@ -4769,7 +4853,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',
@@ -4803,12 +4887,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': {
@@ -4833,7 +4917,7 @@ var RequestId = /*#__PURE__*/styled('div', {
 });
 var ExtraDetails = /*#__PURE__*/styled('div', {
   padding: '0',
-  color: '$neutrals600',
+  color: '$neutral600',
   fontSize: '$10'
 });
 var SwapFlowContainer = /*#__PURE__*/styled('div', {
@@ -5001,5 +5085,5 @@ function useCopyToClipboard(resetInterval) {
   return [isCopied, handleCopy];
 }
 
-export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowRightIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, ChevronRightIcon, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DisconnectIcon, Divider, DownloadIcon, Drawer, FilledCircle, GasIcon, Header, History, HistoryIcon, HorizontalSwapIcon, Image, InfoCircleIcon, LiquiditySourcesSelector, LoadingFailedAlert, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, SwapsGroup, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, globalCss, keyframes, lightTheme, styled, useCopyToClipboard };
+export { AddCircleIcon, AddIcon, AddWalletIcon, Alert, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, ArrowRightIcon, BagIcon, BanIcon, BestRoute, BlockchainSelector, Button, CheckCircleIcon, CheckIcon, CheckSquareIcon, CheckWalletIcon, Checkbox, ChevronRightIcon, Chip, CloseIcon, ColorPicker, ConfirmSwap, ConnectWalletsModal, CopyIcon, DeleteCircleIcon, DeleteWalletIcon, DisconnectIcon, Divider, DownloadIcon, Drawer, FilledCircle, GasIcon, Header, History, HistoryIcon, HorizontalSwapIcon, Image, InfoCircleIcon, LiquiditySourcesSelector, LoadingFailedAlert, MinusCircleIcon, Modal, Radio, RetryIcon, RetryLeftIcon, RetryRightIcon, SearchIcon, SearchMinusIcon, SecondaryPage, SelectableWalletList, Settings, SettingsIcon, SignatureIcon, Spacer, Spinner, StepDetail, SwapContainer, SwapDetail, SwapHistory, SwapWalletIcon, SwapsGroup, Switch, TextField, TimeIcon, TokenList, TokenSelector, Tooltip, TrashIcon, TryAgainIcon, Typography, VerticalSwapIcon, Wallet, WalletIcon, WalletState, WarningIcon, createTheme, css, darkTheme, generateRangeColors, globalCss, keyframes, lightTheme, styled, useCopyToClipboard };
 //# sourceMappingURL=ui.esm.js.map