@coinswap-app/uikit 1.0.7 → 1.0.9

package/dist/index.cjs.js

@@ -497,7 +497,7 @@ var getButtonVariantProp$3 = function getButtonVariantProp(prop) {
 };
 var StyledButton$2 = styledComponents.styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['$fullWidth', '$isLoading', '$white'].includes(prop);
+    return !['$fullWidth', '$isLoading', '$white', 'variant'].includes(prop);
   }
 })(_templateObject$29 || (_templateObject$29 = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 10px;\n  color: ", ";\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 600;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: background-color 0.2s;\n  opacity: ", ";\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:focus:not(:active) {\n    box-shadow: 0 0 0 1px ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), getButtonVariantProp$3("background"), getButtonVariantProp$3("border"), function (_ref4) {
   var $white = _ref4.$white;
@@ -522,7 +522,7 @@ var StyledButton$2 = styledComponents.styled.button.withConfig({
 }, getButtonVariantProp$3("backgroundActive"), getButtonVariantProp$3("boxShadowActive"), getDisabledStyles$3, removePointerEvents$3, styledSystem.space);
 
 var _excluded$12 = ["startIcon", "style", "endIcon", "children", "external", "$isLoading", "disabled", "$white", "$fullWidth", "fullWidth", "isLoading", "white"];
-var Button$1 = /*#__PURE__*/React.forwardRef(function (_ref) {
+var Button$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var startIcon = _ref.startIcon,
     style = _ref.style,
     endIcon = _ref.endIcon,
@@ -543,7 +543,9 @@ var Button$1 = /*#__PURE__*/React.forwardRef(function (_ref) {
   var $white = $whiteProp || whiteProp;
   var $fullWidth = $fullWidthProp || fullWidthProp;
   var isDisabled = $isLoading || disabled;
-  return /*#__PURE__*/jsxRuntime.jsxs(StyledButton$2, _objectSpread2(_objectSpread2(_objectSpread2({}, internalProps), props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledButton$2, _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: ref
+  }, internalProps), props), {}, {
     $isLoading: $isLoading,
     disabled: isDisabled,
     style: style,
@@ -8434,7 +8436,7 @@ var Heading = styledComponents.styled(Text).attrs(function (_ref) {
   var _ref$as = _ref.as,
     as = _ref$as === void 0 ? tags.H2 : _ref$as;
   return {
-    bold: true,
+    $bold: true,
     as: as
   };
 })(_templateObject$1$ || (_templateObject$1$ = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: 600;\n  line-height: 1.1;\n\n  ", " {\n    font-size: ", ";\n  }\n"])), function (_ref2) {
@@ -8933,7 +8935,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(StyledLink$1, _objectSpread2(_objectSpread2({
     ref: ref,
     as: "a",
-    bold: true,
+    $bold: true,
     color: color
   }, internalProps), props));
 });
@@ -9458,7 +9460,11 @@ var Breadcrumbs = function Breadcrumbs(_ref4) {
 };
 
 var _templateObject$1S;
-var StyledButtonMenu = styledComponents.styled.div(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border-radius: 16px;\n  display: inline-flex;\n  @media (max-width: 500px) {\n    width: 100%;\n    justify-content: space-around;\n  }\n"])));
+var StyledButtonMenu = styledComponents.styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'variant';
+  }
+})(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border-radius: 16px;\n  display: inline-flex;\n  @media (max-width: 500px) {\n    width: 100%;\n    justify-content: space-around;\n  }\n"])));
 
 var ButtonMenu = function ButtonMenu(_ref) {
   var _ref$activeIndex = _ref.activeIndex,
@@ -9515,7 +9521,11 @@ var getButtonVariantProp$2 = function getButtonVariantProp(prop) {
     return theme.button[variant][prop];
   };
 };
-var StyledButton$1 = styledComponents.styled.button(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 700;\n  color: white;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: all 0.5s;\n\n  .dot {\n    margin-top: 10px;\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    display: inline-block;\n    background-color: ", ";\n  }\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref4) {
+var StyledButton$1 = styledComponents.styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['variant', 'isLoading', 'fullWidth', 'lined', 'active', 'isActive'].includes(prop);
+  }
+})(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 700;\n  color: white;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: all 0.5s;\n\n  .dot {\n    margin-top: 10px;\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    display: inline-block;\n    background-color: ", ";\n  }\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref4) {
   var fullWidth = _ref4.fullWidth;
   return fullWidth ? "100%" : "max-content";
 }, function (_ref5) {
@@ -9555,16 +9565,14 @@ var Button = function Button(_ref) {
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    lined = _ref.lined,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    _ref.lined;
+    var props = _objectWithoutProperties(_ref, _excluded$m);
   var internalProps = external ? getExternalLinkProps() : {};
   var isDisabled = isLoading || disabled;
   return /*#__PURE__*/jsxRuntime.jsxs(StyledButton$1, _objectSpread2(_objectSpread2(_objectSpread2({}, internalProps), props), {}, {
-    isLoading: isLoading,
     disabled: isDisabled,
     style: style,
-    lined: lined,
     children: [/*#__PURE__*/React.isValidElement(startIcon) && /*#__PURE__*/React.cloneElement(startIcon, {
       mr: "0.5rem"
     }), children, /*#__PURE__*/React.isValidElement(endIcon) && /*#__PURE__*/React.cloneElement(endIcon, {
@@ -9600,13 +9608,14 @@ var StyledTag = styledComponents.styled.div(_templateObject$1Q || (_templateObje
   return getColor(variant, theme);
 }, getThemeTextColor, getThemeTextColor);
 
-var _excluded$l = ["isActive", "size", "variant", "as", "children", "tag", "hide"];
+var _excluded$l = ["isActive", "size", "variant", "as", "children", "tag", "hide"],
+  _excluded2$1 = ["isActive"];
 var _templateObject$1P, _templateObject2$Z, _templateObject3$L;
 var ButtonBody = styledComponents.styled.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n"])));
 var ButtonTag = styledComponents.styled(StyledTag)(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteral(["\n  margin-left: 7px;\n  font-weight: bold;\n  font-size: 11px;\n  padding: 1px 5px;\n  height: unset;\n  border-width: 1px;\n"])));
 var InactiveButton$1 = styledComponents.styled(Button).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'colorKey';
+    return prop !== 'colorKey' && prop !== 'isActive';
   }
 })(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteral(["\n  background-color: transparent;\n  color: #535459;\n  .dot {\n    background-color: transparent;\n  }\n\n  &:hover:not(:disabled):not(:active) {\n    background-color: transparent;\n  }\n"])));
 var ButtonMenuItem = function ButtonMenuItem(_ref) {
@@ -9621,13 +9630,16 @@ var ButtonMenuItem = function ButtonMenuItem(_ref) {
     tag = _ref.tag,
     hide = _ref.hide,
     props = _objectWithoutProperties(_ref, _excluded$l);
+  // Remove isActive from props to prevent it from being passed to DOM
+  props.isActive;
+    var buttonProps = _objectWithoutProperties(props, _excluded2$1);
   if (!isActive) {
     return /*#__PURE__*/jsxRuntime.jsx(InactiveButton$1, _objectSpread2(_objectSpread2({
       forwardedAs: as,
       size: size,
       variant: "tertiary",
       colorKey: variant === variants$2.PRIMARY ? "primary" : "textSubtle"
-    }, props), {}, {
+    }, buttonProps), {}, {
       style: {
         display: hide ? "none" : "flex"
       },
@@ -9643,7 +9655,7 @@ var ButtonMenuItem = function ButtonMenuItem(_ref) {
     as: as,
     size: size,
     variant: variant
-  }, props), {}, {
+  }, buttonProps), {}, {
     style: {
       display: hide ? "none" : "flex"
     },

package/dist/index.esm.js

@@ -475,7 +475,7 @@ var getButtonVariantProp$3 = function getButtonVariantProp(prop) {
 };
 var StyledButton$2 = styled.button.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return !['$fullWidth', '$isLoading', '$white'].includes(prop);
+    return !['$fullWidth', '$isLoading', '$white', 'variant'].includes(prop);
   }
 })(_templateObject$29 || (_templateObject$29 = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: 10px;\n  color: ", ";\n  cursor: pointer;\n  display: inline-flex;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 600;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: background-color 0.2s;\n  opacity: ", ";\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:focus:not(:active) {\n    box-shadow: 0 0 0 1px ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), getButtonVariantProp$3("background"), getButtonVariantProp$3("border"), function (_ref4) {
   var $white = _ref4.$white;
@@ -500,7 +500,7 @@ var StyledButton$2 = styled.button.withConfig({
 }, getButtonVariantProp$3("backgroundActive"), getButtonVariantProp$3("boxShadowActive"), getDisabledStyles$3, removePointerEvents$3, space);
 
 var _excluded$12 = ["startIcon", "style", "endIcon", "children", "external", "$isLoading", "disabled", "$white", "$fullWidth", "fullWidth", "isLoading", "white"];
-var Button$1 = /*#__PURE__*/React__default.forwardRef(function (_ref) {
+var Button$1 = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var startIcon = _ref.startIcon,
     style = _ref.style,
     endIcon = _ref.endIcon,
@@ -521,7 +521,9 @@ var Button$1 = /*#__PURE__*/React__default.forwardRef(function (_ref) {
   var $white = $whiteProp || whiteProp;
   var $fullWidth = $fullWidthProp || fullWidthProp;
   var isDisabled = $isLoading || disabled;
-  return /*#__PURE__*/jsxs(StyledButton$2, _objectSpread2(_objectSpread2(_objectSpread2({}, internalProps), props), {}, {
+  return /*#__PURE__*/jsxs(StyledButton$2, _objectSpread2(_objectSpread2(_objectSpread2({
+    ref: ref
+  }, internalProps), props), {}, {
     $isLoading: $isLoading,
     disabled: isDisabled,
     style: style,
@@ -8412,7 +8414,7 @@ var Heading = styled(Text).attrs(function (_ref) {
   var _ref$as = _ref.as,
     as = _ref$as === void 0 ? tags.H2 : _ref$as;
   return {
-    bold: true,
+    $bold: true,
     as: as
   };
 })(_templateObject$1$ || (_templateObject$1$ = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: 600;\n  line-height: 1.1;\n\n  ", " {\n    font-size: ", ";\n  }\n"])), function (_ref2) {
@@ -8911,7 +8913,7 @@ var Link = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/jsx(StyledLink$1, _objectSpread2(_objectSpread2({
     ref: ref,
     as: "a",
-    bold: true,
+    $bold: true,
     color: color
   }, internalProps), props));
 });
@@ -9436,7 +9438,11 @@ var Breadcrumbs = function Breadcrumbs(_ref4) {
 };
 
 var _templateObject$1S;
-var StyledButtonMenu = styled.div(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border-radius: 16px;\n  display: inline-flex;\n  @media (max-width: 500px) {\n    width: 100%;\n    justify-content: space-around;\n  }\n"])));
+var StyledButtonMenu = styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return prop !== 'variant';
+  }
+})(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border-radius: 16px;\n  display: inline-flex;\n  @media (max-width: 500px) {\n    width: 100%;\n    justify-content: space-around;\n  }\n"])));
 
 var ButtonMenu = function ButtonMenu(_ref) {
   var _ref$activeIndex = _ref.activeIndex,
@@ -9493,7 +9499,11 @@ var getButtonVariantProp$2 = function getButtonVariantProp(prop) {
     return theme.button[variant][prop];
   };
 };
-var StyledButton$1 = styled.button(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 700;\n  color: white;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: all 0.5s;\n\n  .dot {\n    margin-top: 10px;\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    display: inline-block;\n    background-color: ", ";\n  }\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref4) {
+var StyledButton$1 = styled.button.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !['variant', 'isLoading', 'fullWidth', 'lined', 'active', 'isActive'].includes(prop);
+  }
+})(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteral(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  font-family: inherit;\n  font-size: 16px;\n  font-weight: 700;\n  color: white;\n  /* max-content instead of auto for Safari fix */\n  width: ", ";\n  height: ", ";\n  line-height: 1;\n  letter-spacing: 0.03em;\n  justify-content: center;\n  outline: 0;\n  padding: ", ";\n  transition: all 0.5s;\n\n  .dot {\n    margin-top: 10px;\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    display: inline-block;\n    background-color: ", ";\n  }\n\n  &:hover:not(:disabled):not(.button--disabled):not(:active) {\n    border-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref4) {
   var fullWidth = _ref4.fullWidth;
   return fullWidth ? "100%" : "max-content";
 }, function (_ref5) {
@@ -9533,16 +9543,14 @@ var Button = function Button(_ref) {
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    lined = _ref.lined,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    _ref.lined;
+    var props = _objectWithoutProperties(_ref, _excluded$m);
   var internalProps = external ? getExternalLinkProps() : {};
   var isDisabled = isLoading || disabled;
   return /*#__PURE__*/jsxs(StyledButton$1, _objectSpread2(_objectSpread2(_objectSpread2({}, internalProps), props), {}, {
-    isLoading: isLoading,
     disabled: isDisabled,
     style: style,
-    lined: lined,
     children: [/*#__PURE__*/React__default.isValidElement(startIcon) && /*#__PURE__*/React__default.cloneElement(startIcon, {
       mr: "0.5rem"
     }), children, /*#__PURE__*/React__default.isValidElement(endIcon) && /*#__PURE__*/React__default.cloneElement(endIcon, {
@@ -9578,13 +9586,14 @@ var StyledTag = styled.div(_templateObject$1Q || (_templateObject$1Q = _taggedTe
   return getColor(variant, theme);
 }, getThemeTextColor, getThemeTextColor);
 
-var _excluded$l = ["isActive", "size", "variant", "as", "children", "tag", "hide"];
+var _excluded$l = ["isActive", "size", "variant", "as", "children", "tag", "hide"],
+  _excluded2$1 = ["isActive"];
 var _templateObject$1P, _templateObject2$Z, _templateObject3$L;
 var ButtonBody = styled.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n"])));
 var ButtonTag = styled(StyledTag)(_templateObject2$Z || (_templateObject2$Z = _taggedTemplateLiteral(["\n  margin-left: 7px;\n  font-weight: bold;\n  font-size: 11px;\n  padding: 1px 5px;\n  height: unset;\n  border-width: 1px;\n"])));
 var InactiveButton$1 = styled(Button).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
-    return prop !== 'colorKey';
+    return prop !== 'colorKey' && prop !== 'isActive';
   }
 })(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteral(["\n  background-color: transparent;\n  color: #535459;\n  .dot {\n    background-color: transparent;\n  }\n\n  &:hover:not(:disabled):not(:active) {\n    background-color: transparent;\n  }\n"])));
 var ButtonMenuItem = function ButtonMenuItem(_ref) {
@@ -9599,13 +9608,16 @@ var ButtonMenuItem = function ButtonMenuItem(_ref) {
     tag = _ref.tag,
     hide = _ref.hide,
     props = _objectWithoutProperties(_ref, _excluded$l);
+  // Remove isActive from props to prevent it from being passed to DOM
+  props.isActive;
+    var buttonProps = _objectWithoutProperties(props, _excluded2$1);
   if (!isActive) {
     return /*#__PURE__*/jsx(InactiveButton$1, _objectSpread2(_objectSpread2({
       forwardedAs: as,
       size: size,
       variant: "tertiary",
       colorKey: variant === variants$2.PRIMARY ? "primary" : "textSubtle"
-    }, props), {}, {
+    }, buttonProps), {}, {
       style: {
         display: hide ? "none" : "flex"
       },
@@ -9621,7 +9633,7 @@ var ButtonMenuItem = function ButtonMenuItem(_ref) {
     as: as,
     size: size,
     variant: variant
-  }, props), {}, {
+  }, buttonProps), {}, {
     style: {
       display: hide ? "none" : "flex"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinswap-app/uikit",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Set of UI components for CoinSwap projects",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",