@rango-dev/ui 0.1.10-next.87 → 0.1.10-next.90

package/dist/ui.esm.js

@@ -1307,7 +1307,7 @@ CopyIcon.toString = function () {
   return '._icon';
 };
 
-var _excluded$A = ["children"];
+var _excluded$A = ["children", "className"];
 var TypographyContainer = /*#__PURE__*/styled('span', {
   margin: 0,
   color: '$foreground',
@@ -1475,9 +1475,10 @@ var TypographyContainer = /*#__PURE__*/styled('span', {
 });
 function Typography(_ref) {
   var children = _ref.children,
+    className = _ref.className,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return React__default.createElement(TypographyContainer, Object.assign({
-    className: "_typography"
+    className: "_typography _text " + className
   }, props), children);
 }
 Typography.toString = function () {
@@ -2218,7 +2219,8 @@ function Button(_ref) {
     align: align,
     ml: !!prefix,
     mr: !!suffix && !loading,
-    flexContent: flexContent
+    flexContent: flexContent,
+    className: "_text"
   }, children), loading && React__default.createElement(Spinner, {
     size: 16,
     color: props.type
@@ -2228,7 +2230,7 @@ function Button(_ref) {
 var FilledCircle = /*#__PURE__*/styled('span', {
   width: '10px',
   height: '10px',
-  backgroundColor: '$primary500',
+  backgroundColor: '$primary',
   borderRadius: '99999px'
 });
 
@@ -2297,7 +2299,7 @@ var InputContainer = /*#__PURE__*/styled('div', {
   color: '$foreground',
   transition: 'border-color ease .3s',
   '&:focus-within': {
-    borderColor: '$primary500'
+    borderColor: '$primary'
   },
   variants: {
     size: {
@@ -2340,7 +2342,7 @@ var InputContainer = /*#__PURE__*/styled('div', {
   }
 });
 var Input = /*#__PURE__*/styled('input', {
-  color: '$text',
+  color: '$foreground',
   paddingLeft: '$16',
   paddingRight: '$16',
   flexGrow: 1,
@@ -2359,6 +2361,7 @@ var Input = /*#__PURE__*/styled('input', {
 var Label = /*#__PURE__*/styled('label', {
   display: 'inline-block',
   fontSize: '$14',
+  color: '$foreground',
   marginBottom: '$4'
 });
 var TextField = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
@@ -2368,15 +2371,20 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     size = props.size,
     style = props.style,
     inputAttributes = _objectWithoutPropertiesLoose(props, _excluded$C);
-  return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({}, inputAttributes.id && {
+  return React__default.createElement(React__default.Fragment, null, label && React__default.createElement(Label, Object.assign({
+    className: "_text"
+  }, inputAttributes.id && {
     htmlFor: inputAttributes.id
   }), label), React__default.createElement(InputContainer, {
     disabled: inputAttributes.disabled,
     prefix: !!prefix,
     suffix: !!suffix,
     size: size,
-    style: style
-  }, prefix || null, React__default.createElement(Input, Object.assign({}, inputAttributes, {
+    style: style,
+    className: "_text"
+  }, prefix || null, React__default.createElement(Input, Object.assign({
+    className: "_text"
+  }, inputAttributes, {
     spellCheck: false,
     ref: ref
   })), suffix || null));
@@ -2566,7 +2574,7 @@ var CheckboxRoot = /*#__PURE__*/styled(Root, {
   width: 20,
   padding: 0,
   height: 20,
-  border: '1px solid',
+  border: '1px solid $foreground',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -2574,7 +2582,7 @@ var CheckboxRoot = /*#__PURE__*/styled(Root, {
   backgroundColor: '$neutral-100'
 });
 var Label$1 = /*#__PURE__*/styled('label', {
-  color: '$text',
+  color: '$foreground',
   fontSize: '$m',
   marginLeft: '$8'
 });
@@ -2587,8 +2595,9 @@ function Checkbox(_ref) {
   }, props), React__default.createElement(Indicator, null, React__default.createElement(CheckIcon, {
     size: 20
   }))), React__default.createElement(Label$1, {
+    className: "_text",
     htmlFor: id
-  }, label, " "));
+  }, label));
 }
 
 var ChipCointainer = /*#__PURE__*/styled('div', {
@@ -2673,6 +2682,9 @@ function Modal(props) {
   var handleBackDropClick = function handleBackDropClick(event) {
     if (event.target === event.currentTarget) onClose();
   };
+  useEffect(function () {
+    if (open) document.body.style.overflow = 'hidden';else document.body.style.overflow = 'unset';
+  }, [open]);
   return React__default.createElement(React__default.Fragment, null, open && createPortal(React__default.createElement(BackDrop, {
     onClick: handleBackDropClick
   }, React__default.createElement(ModalContainer, {
@@ -2696,7 +2708,6 @@ var WalletState;
 })(WalletState || (WalletState = {}));
 
 var StateIconContainer = /*#__PURE__*/styled('span', {
-  width: '$28',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center'
@@ -2895,7 +2906,7 @@ var StyledSwitchThumb = /*#__PURE__*/styled(Thumb, {
   willChange: 'transform',
   '&[data-state="checked"]': {
     transform: 'translateX(20px)',
-    backgroundColor: '$primary500'
+    backgroundColor: '$primary'
   }
 });
 function Switch(props) {
@@ -3213,17 +3224,18 @@ var StyledIndicator = /*#__PURE__*/styled(Indicator$1, {
 });
 var Label$2 = /*#__PURE__*/styled('label', {
   paddingLeft: '$8',
-  cursor: 'pointer'
+  cursor: 'pointer',
+  color: '$foreground'
 });
 function Radio(props) {
-  var defaultValue = props.defaultValue,
+  var value = props.value,
     onChange = props.onChange,
     _props$direction = props.direction,
     direction = _props$direction === void 0 ? 'vertical' : _props$direction,
     style = props.style;
   return React__default.createElement(Container$3, null, React__default.createElement(StyledRoot, {
     onValueChange: onChange,
-    defaultValue: defaultValue,
+    value: value,
     direction: direction,
     style: style
   }, props.options.map(function (option, index) {
@@ -3233,6 +3245,7 @@ function Radio(props) {
       value: option.value,
       id: option.value
     }, React__default.createElement(StyledIndicator, null)), React__default.createElement(Label$2, {
+      className: "_text",
       htmlFor: option.value
     }, React__default.createElement(Typography, {
       variant: "body2"
@@ -3332,7 +3345,7 @@ function Settings(props) {
   }))), React__default.createElement(ThemesContainer, null, React__default.createElement(Title, {
     variant: "body2"
   }, "Theme"), React__default.createElement(Radio, {
-    defaultValue: selectedTheme,
+    value: selectedTheme,
     options: [{
       value: 'dark',
       label: 'Dark'
@@ -3834,6 +3847,12 @@ var Popover = /*#__PURE__*/styled('div', {
     }
   }
 });
+var Label$3 = /*#__PURE__*/styled('label', {
+  display: 'inline-block',
+  fontSize: '$14',
+  marginBottom: '$4',
+  color: '$foreground'
+});
 function ColorPicker(_ref) {
   var color = _ref.color,
     onChangeColor = _ref.onChangeColor,
@@ -3842,9 +3861,8 @@ function ColorPicker(_ref) {
   var _useState = useState(false),
     displayColorPicker = _useState[0],
     setDisplayColorPicker = _useState[1];
-  return React__default.createElement(Container$5, null, React__default.createElement(Typography, {
-    mb: 4,
-    variant: "body2"
+  return React__default.createElement(Container$5, null, React__default.createElement(Label$3, {
+    className: "_text"
   }, label), React__default.createElement(Button, {
     variant: "outlined",
     prefix: React__default.createElement(Color, {
@@ -4051,15 +4069,19 @@ function ConfirmSwap(props) {
       onClick: onRefresh
     })
   }, React__default.createElement(MainContainer$2, null, React__default.createElement("div", null, extraMessages || null, React__default.createElement(Alerts, null, errors == null ? void 0 : errors.map(function (error, index) {
-    return React__default.createElement(Alert, {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
+      direction: "vertical"
+    }), React__default.createElement(Alert, {
       type: "error",
       key: index
-    }, error);
+    }, error));
   }), warnings == null ? void 0 : warnings.map(function (warning, index) {
-    return React__default.createElement(Alert, {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement(Spacer, {
+      direction: "vertical"
+    }), React__default.createElement(Alert, {
       type: "warning",
       key: index
-    }, warning);
+    }, warning));
   }))), React__default.createElement(BestRouteContainer$1, null, bestRoute == null ? void 0 : (_bestRoute$result = bestRoute.result) == null ? void 0 : _bestRoute$result.swaps.map(function (swap, index) {
     var _bestRoute$result2;
     return React__default.createElement(Fragment, {
@@ -4079,7 +4101,7 @@ function ConfirmSwap(props) {
     }, swap.swapperType, " from ", swap.from.symbol, " to", ' ', swap.to.symbol, " via ", swap.swapperId, ' '), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
       ml: 4,
       variant: "caption"
-    }, parseFloat(swap.fee[0].amount).toFixed(6), " estimated gas fee")))), React__default.createElement(Line$2, null), index + 1 === ((_bestRoute$result2 = bestRoute.result) == null ? void 0 : _bestRoute$result2.swaps.length) && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
+    }, "$", swap.feeInUsd, " estimated gas fee")))), React__default.createElement(Line$2, null), index + 1 === ((_bestRoute$result2 = bestRoute.result) == null ? void 0 : _bestRoute$result2.swaps.length) && React__default.createElement(ArrowDown, null), React__default.createElement(StepDetail, {
       logo: swap.to.logo,
       symbol: swap.to.symbol,
       chainLogo: swap.to.blockchainLogo,
@@ -4113,8 +4135,8 @@ function ConfirmWallets(props) {
     handleConnectChain = props.handleConnectChain,
     fromAmount = props.fromAmount,
     toAmount = props.toAmount;
-  var firstStep = (_swap$result = swap.result) == null ? void 0 : _swap$result.swaps[0];
-  var lastStep = (_swap$result2 = swap.result) == null ? void 0 : _swap$result2.swaps[((_swap$result3 = swap.result) == null ? void 0 : _swap$result3.swaps.length) - 1];
+  var firstStep = swap == null ? void 0 : (_swap$result = swap.result) == null ? void 0 : _swap$result.swaps[0];
+  var lastStep = swap == null ? void 0 : (_swap$result2 = swap.result) == null ? void 0 : _swap$result2.swaps[((_swap$result3 = swap.result) == null ? void 0 : _swap$result3.swaps.length) - 1];
   return React__default.createElement(SecondaryPage, {
     textField: false,
     title: "Confirm Swap",
@@ -4357,7 +4379,7 @@ function SwapHistory(props) {
     }, step.swapperType, " from ", step.fromSymbol, " to ", step.toSymbol, "via ", step.swapperId), React__default.createElement(Fee, null, React__default.createElement(GasIcon, null), React__default.createElement(Typography, {
       ml: 4,
       variant: "caption"
-    }, step.feeInUsd, " estimated gas fee")))), React__default.createElement("div", {
+    }, "$", step.feeInUsd, " estimated gas fee")))), React__default.createElement("div", {
       style: {
         display: 'flex'
       }