@semcore/button - npm Package Compare versions

Comparing version 4.2.2 to 4.2.3

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [4.2.3] - 2022-10-26
+
+### Fixed
+
+- Lazy checks for necessity of `aria-label` in non production environment.
+
 ## [4.2.2] - 2022-10-20
@@ -7,0 +13,0 @@

lib/cjs/Button.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -39,8 +41,6 @@
 
-var _reactToText = _interopRequireDefault(require("@semcore/utils/lib/reactToText"));
+var _SpinButton = _interopRequireDefault(require("./SpinButton"));
 
-var _getOriginChildren = _interopRequireDefault(require("@semcore/utils/lib/getOriginChildren"));
+var _hasLabels = _interopRequireDefault(require("@semcore/utils/lib/hasLabels"));
 
-var _SpinButton = _interopRequireDefault(require("./SpinButton"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -63,32 +63,32 @@
 /*__inner_css_start__*/
-":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SButton_1e1mi_gg_ {\n  position: relative;\n  display: inline-block;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  font-family: Inter, sans-serif;\n  line-height: normal;\n  text-decoration: none;\n  text-align: center;\n  vertical-align: middle;\n  border: 1px solid transparent;\n  outline: 0;\n  box-shadow: none;\n  cursor: pointer;\n  box-sizing: border-box;\n  overflow: visible;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  font-weight: 500;\n  color: #6c6e79\n}\n\n.___SButton_1e1mi_gg_::-moz-focus-inner {\n    padding: 0;\n    border: none;\n  }\n\n.___SButton_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_:hover,\n  .___SButton_1e1mi_gg_:focus {\n    outline: 0;\n    text-decoration: none;\n  }\n\n.___SButton_1e1mi_gg_.__disabled_1e1mi_gg_ {\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none; /* Disable link interactions */\n}\n\n.___SButton_1e1mi_gg_.__keyboardFocused_1e1mi_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n  z-index: 1;\n}\n\n.___SButton_1e1mi_gg_._size_m_1e1mi_gg_ {\n  height: 28px;\n  min-width: 28px;\n  border-radius: 6px;\n  font-size: 14px;\n}\n\n.___SButton_1e1mi_gg_._size_l_1e1mi_gg_ {\n  height: 40px;\n  min-width: 40px;\n  border-radius: 6px;\n  font-size: 16px;\n}\n\n.___SButton_1e1mi_gg_._theme_primary-info_1e1mi_gg_ {\n  color: #ffffff;\n  background-color: #008ff8\n}\n\n.___SButton_1e1mi_gg_._theme_primary-info_1e1mi_gg_:hover {\n    background-color: #006dca;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-info_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_primary-info_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: #044792;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-success_1e1mi_gg_ {\n  color: #ffffff;\n  background-color: #009f81\n}\n\n.___SButton_1e1mi_gg_._theme_primary-success_1e1mi_gg_:hover {\n    background-color: #007c65;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-success_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_primary-success_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: #055345;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-warning_1e1mi_gg_ {\n  background-color: #ff642d;\n  color: #ffffff\n}\n\n.___SButton_1e1mi_gg_._theme_primary-warning_1e1mi_gg_:hover {\n    background-color: #c33909;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-warning_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_primary-warning_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: #8b1500;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-danger_1e1mi_gg_ {\n  background-color: #ff4953;\n  color: #ffffff\n}\n\n.___SButton_1e1mi_gg_._theme_primary-danger_1e1mi_gg_:hover {\n    background-color: #d1002f;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-danger_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_primary-danger_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: #8e0016;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-invert_1e1mi_gg_ {\n  background-color: #fff;\n  color: #191b23\n}\n\n.___SButton_1e1mi_gg_._theme_primary-invert_1e1mi_gg_:hover {\n    background-color: #f4f5f9;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-invert_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_primary-invert_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: #e0e1e9;\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-muted_1e1mi_gg_ {\n  color: #6c6e79;\n  border-color: #c4c7cf;\n  background-color: rgba(138, 142, 155, 0.1)\n}\n\n.___SButton_1e1mi_gg_._theme_secondary-muted_1e1mi_gg_:hover {\n    background-color: rgba(138, 142, 155, 0.2);\n    color: #191b23;\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-muted_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_secondary-muted_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(138, 142, 155, 0.3);\n    color: #191b23;\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-info_1e1mi_gg_ {\n  background-color: rgba(0, 143, 248, 0.05);\n  color: #008ff8;\n  border-color: #008ff8\n}\n\n.___SButton_1e1mi_gg_._theme_secondary-info_1e1mi_gg_:hover {\n    background-color: rgba(0, 109, 202, 0.2);\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-info_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_secondary-info_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(0, 109, 202, 0.3);\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-invert_1e1mi_gg_ {\n  background-color: rgba(255, 255, 255, 0.05);\n  color: #fff;\n  border-color: #fff\n}\n\n.___SButton_1e1mi_gg_._theme_secondary-invert_1e1mi_gg_:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-invert_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_secondary-invert_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(255, 255, 255, 0.3);\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-info_1e1mi_gg_ {\n  color: #006dca;\n  background-color: transparent\n}\n\n.___SButton_1e1mi_gg_._theme_tertiary-info_1e1mi_gg_:hover {\n    background-color: rgba(0, 143, 248, 0.2);\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-info_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_tertiary-info_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(0, 143, 248, 0.3);\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-muted_1e1mi_gg_ {\n  color: #6c6e79;\n  background-color: transparent\n}\n\n.___SButton_1e1mi_gg_._theme_tertiary-muted_1e1mi_gg_:hover {\n    background-color: rgba(138, 142, 155, 0.2);\n    color: #191b23;\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-muted_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_tertiary-muted_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(138, 142, 155, 0.3);\n    color: #191b23;\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-invert_1e1mi_gg_ {\n  color: #fff;\n  background-color: transparent\n}\n\n.___SButton_1e1mi_gg_._theme_tertiary-invert_1e1mi_gg_:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-invert_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_tertiary-invert_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(255, 255, 255, 0.3);\n  }\n\n.___SButton_1e1mi_gg_._neighborLocation_right_1e1mi_gg_ {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_ {\n  border-radius: 0;\n  margin-left: -1px\n}\n\n.___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_._theme_primary-info_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_._theme_primary-success_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_._theme_primary-warning_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_._theme_primary-danger_1e1mi_gg_ {\n    border-left-color: rgba(255, 255, 255, 0.5);\n  }\n\n.___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_._theme_primary-invert_1e1mi_gg_ {\n    border-left-color: rgba(0, 0, 0, 0.5);\n  }\n\n.___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_ {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  margin-left: -1px\n}\n\n.___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_._theme_primary-info_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_._theme_primary-success_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_._theme_primary-warning_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_._theme_primary-danger_1e1mi_gg_ {\n    border-left-color: rgba(255, 255, 255, 0.5);\n  }\n\n.___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_._theme_primary-invert_1e1mi_gg_ {\n    border-left-color: rgba(0, 0, 0, 0.5);\n  }\n\n.___SSpin_1e1mi_gg_ {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.___SInner_1e1mi_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.___SInner_1e1mi_gg_.__loading_1e1mi_gg_ {\n  visibility: hidden;\n}\n\n.___SText_1e1mi_gg_ {\n  display: inline-flex;\n}\n\n.___SText_1e1mi_gg_._size_m_1e1mi_gg_ {\n  margin-left: 8px;\n  margin-right: 8px;\n  line-height: 1.42;\n}\n\n.___SText_1e1mi_gg_._size_l_1e1mi_gg_ {\n  margin-left: 12px;\n  margin-right: 12px;\n  line-height: 1.5;\n}\n\n.___SAddon_1e1mi_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.___SAddon_1e1mi_gg_._size_m_1e1mi_gg_:not(:only-child):first-child {\n    margin-left: 8px;\n  }\n\n.___SAddon_1e1mi_gg_._size_m_1e1mi_gg_:not(:only-child):last-child {\n    margin-right: 8px;\n  }\n\n.___SAddon_1e1mi_gg_._size_m_1e1mi_gg_:only-child {\n    margin-left: -4px;\n    margin-right: -4px;\n  }\n\n.___SAddon_1e1mi_gg_._size_l_1e1mi_gg_:not(:only-child):first-child {\n    margin-left: 8px;\n  }\n\n.___SAddon_1e1mi_gg_._size_l_1e1mi_gg_:not(:only-child):last-child {\n    margin-right: 8px;\n  }\n\n.___SAddon_1e1mi_gg_._size_l_1e1mi_gg_:only-child {\n    margin-left: -4px;\n    margin-right: -4px;\n  }\n"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SButton_1dydh_gg_ {\n  position: relative;\n  display: inline-block;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  font-family: Inter, sans-serif;\n  line-height: normal;\n  text-decoration: none;\n  text-align: center;\n  vertical-align: middle;\n  border: 1px solid transparent;\n  outline: 0;\n  box-shadow: none;\n  cursor: pointer;\n  box-sizing: border-box;\n  overflow: visible;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  font-weight: 500;\n  color: #6c6e79\n}\n\n.___SButton_1dydh_gg_::-moz-focus-inner {\n    padding: 0;\n    border: none;\n  }\n\n.___SButton_1dydh_gg_:active,\n  .___SButton_1dydh_gg_:hover,\n  .___SButton_1dydh_gg_:focus {\n    outline: 0;\n    text-decoration: none;\n  }\n\n.___SButton_1dydh_gg_.__disabled_1dydh_gg_ {\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none; /* Disable link interactions */\n}\n\n.___SButton_1dydh_gg_.__keyboardFocused_1dydh_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n  z-index: 1;\n}\n\n.___SButton_1dydh_gg_._size_m_1dydh_gg_ {\n  height: 28px;\n  min-width: 28px;\n  border-radius: 6px;\n  font-size: 14px;\n}\n\n.___SButton_1dydh_gg_._size_l_1dydh_gg_ {\n  height: 40px;\n  min-width: 40px;\n  border-radius: 6px;\n  font-size: 16px;\n}\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_ {\n  color: #ffffff;\n  background-color: #008ff8\n}\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_:hover {\n    background-color: #006dca;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: #044792;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_ {\n  color: #ffffff;\n  background-color: #009f81\n}\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_:hover {\n    background-color: #007c65;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: #055345;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_ {\n  background-color: #ff642d;\n  color: #ffffff\n}\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_:hover {\n    background-color: #c33909;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: #8b1500;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n  background-color: #ff4953;\n  color: #ffffff\n}\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_:hover {\n    background-color: #d1002f;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: #8e0016;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n  background-color: #fff;\n  color: #191b23\n}\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_:hover {\n    background-color: #f4f5f9;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: #e0e1e9;\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_ {\n  color: #6c6e79;\n  border-color: #c4c7cf;\n  background-color: rgba(138, 142, 155, 0.1)\n}\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_:hover {\n    background-color: rgba(138, 142, 155, 0.2);\n    color: #191b23;\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(138, 142, 155, 0.3);\n    color: #191b23;\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_ {\n  background-color: rgba(0, 143, 248, 0.05);\n  color: #008ff8;\n  border-color: #008ff8\n}\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_:hover {\n    background-color: rgba(0, 109, 202, 0.2);\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(0, 109, 202, 0.3);\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_ {\n  background-color: rgba(255, 255, 255, 0.05);\n  color: #fff;\n  border-color: #fff\n}\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(255, 255, 255, 0.3);\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_ {\n  color: #006dca;\n  background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_:hover {\n    background-color: rgba(0, 143, 248, 0.2);\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(0, 143, 248, 0.3);\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_ {\n  color: #6c6e79;\n  background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_:hover {\n    background-color: rgba(138, 142, 155, 0.2);\n    color: #191b23;\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(138, 142, 155, 0.3);\n    color: #191b23;\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_ {\n  color: #fff;\n  background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(255, 255, 255, 0.3);\n  }\n\n.___SButton_1dydh_gg_._neighborLocation_right_1dydh_gg_ {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_ {\n  border-radius: 0;\n  margin-left: -1px\n}\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-info_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-success_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-warning_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n    border-left-color: rgba(255, 255, 255, 0.5);\n  }\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n    border-left-color: rgba(0, 0, 0, 0.5);\n  }\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_ {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  margin-left: -1px\n}\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-info_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-success_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-warning_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n    border-left-color: rgba(255, 255, 255, 0.5);\n  }\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n    border-left-color: rgba(0, 0, 0, 0.5);\n  }\n\n.___SSpin_1dydh_gg_ {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.___SInner_1dydh_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.___SInner_1dydh_gg_.__loading_1dydh_gg_ {\n  visibility: hidden;\n}\n\n.___SText_1dydh_gg_ {\n  display: inline-flex;\n}\n\n.___SText_1dydh_gg_._size_m_1dydh_gg_ {\n  margin-left: 8px;\n  margin-right: 8px;\n  line-height: 1.42;\n}\n\n.___SText_1dydh_gg_._size_l_1dydh_gg_ {\n  margin-left: 12px;\n  margin-right: 12px;\n  line-height: 1.5;\n}\n\n.___SAddon_1dydh_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:not(:only-child):first-child {\n    margin-left: 8px;\n  }\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:not(:only-child):last-child {\n    margin-right: 8px;\n  }\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:only-child {\n    margin-left: -4px;\n    margin-right: -4px;\n  }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:not(:only-child):first-child {\n    margin-left: 8px;\n  }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:not(:only-child):last-child {\n    margin-right: 8px;\n  }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:only-child {\n    margin-left: -4px;\n    margin-right: -4px;\n  }\n"
 /*__inner_css_end__*/
-, "1e1mi_gg_")
+, "1dydh_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SButton": "___SButton_1e1mi_gg_",
-  "_disabled": "__disabled_1e1mi_gg_",
-  "_keyboardFocused": "__keyboardFocused_1e1mi_gg_",
-  "_size_m": "_size_m_1e1mi_gg_",
-  "_size_l": "_size_l_1e1mi_gg_",
-  "_theme_primary-info": "_theme_primary-info_1e1mi_gg_",
-  "_active": "__active_1e1mi_gg_",
-  "_theme_primary-success": "_theme_primary-success_1e1mi_gg_",
-  "_theme_primary-warning": "_theme_primary-warning_1e1mi_gg_",
-  "_theme_primary-danger": "_theme_primary-danger_1e1mi_gg_",
-  "_theme_primary-invert": "_theme_primary-invert_1e1mi_gg_",
-  "_theme_secondary-muted": "_theme_secondary-muted_1e1mi_gg_",
-  "_theme_secondary-info": "_theme_secondary-info_1e1mi_gg_",
-  "_theme_secondary-invert": "_theme_secondary-invert_1e1mi_gg_",
-  "_theme_tertiary-info": "_theme_tertiary-info_1e1mi_gg_",
-  "_theme_tertiary-muted": "_theme_tertiary-muted_1e1mi_gg_",
-  "_theme_tertiary-invert": "_theme_tertiary-invert_1e1mi_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_1e1mi_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_1e1mi_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1e1mi_gg_",
-  "__SSpin": "___SSpin_1e1mi_gg_",
-  "__SInner": "___SInner_1e1mi_gg_",
-  "_loading": "__loading_1e1mi_gg_",
-  "__SText": "___SText_1e1mi_gg_",
-  "__SAddon": "___SAddon_1e1mi_gg_"
+  "__SButton": "___SButton_1dydh_gg_",
+  "_disabled": "__disabled_1dydh_gg_",
+  "_keyboardFocused": "__keyboardFocused_1dydh_gg_",
+  "_size_m": "_size_m_1dydh_gg_",
+  "_size_l": "_size_l_1dydh_gg_",
+  "_theme_primary-info": "_theme_primary-info_1dydh_gg_",
+  "_active": "__active_1dydh_gg_",
+  "_theme_primary-success": "_theme_primary-success_1dydh_gg_",
+  "_theme_primary-warning": "_theme_primary-warning_1dydh_gg_",
+  "_theme_primary-danger": "_theme_primary-danger_1dydh_gg_",
+  "_theme_primary-invert": "_theme_primary-invert_1dydh_gg_",
+  "_theme_secondary-muted": "_theme_secondary-muted_1dydh_gg_",
+  "_theme_secondary-info": "_theme_secondary-info_1dydh_gg_",
+  "_theme_secondary-invert": "_theme_secondary-invert_1dydh_gg_",
+  "_theme_tertiary-info": "_theme_tertiary-info_1dydh_gg_",
+  "_theme_tertiary-muted": "_theme_tertiary-muted_1dydh_gg_",
+  "_theme_tertiary-invert": "_theme_tertiary-invert_1dydh_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_1dydh_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_1dydh_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1dydh_gg_",
+  "__SSpin": "___SSpin_1dydh_gg_",
+  "__SInner": "___SInner_1dydh_gg_",
+  "_loading": "__loading_1dydh_gg_",
+  "__SText": "___SText_1dydh_gg_",
+  "__SAddon": "___SAddon_1dydh_gg_"
 });
@@ -108,4 +108,13 @@ var MAP_USE_DEFAULT_THEME = {
   function RootButton() {
+    var _this;
+
     (0, _classCallCheck2["default"])(this, RootButton);
-    return _super.apply(this, arguments);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "containerRef", /*#__PURE__*/_react["default"].createRef());
+    return _this;
   }
@@ -130,5 +139,14 @@
   }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (process.env.NODE_ENV !== 'production') {
+        _logger["default"].warn(!(0, _hasLabels["default"])(this.containerRef.current), "'aria-label' or 'aria-labelledby' are required props for buttons without text content", this.asProps['data-ui-name'] || Button.displayName);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _ref = this.asProps;
+      var _ref = this.asProps,
+          _this2 = this;
+
       var SButton = _flexBox.Box;
@@ -149,9 +167,4 @@ var SInner = _flexBox.Box;
           addonLeft = _this$asProps.addonLeft,
-          addonRight = _this$asProps.addonRight,
-          ariaLabel = _this$asProps['aria-label'];
+          addonRight = _this$asProps.addonRight;
       var useTheme = use && theme ? "".concat(use, "-").concat(theme) : false;
-      var isTextInside = (0, _reactToText["default"])((0, _getOriginChildren["default"])(Children));
-
-      _logger["default"].warn(!isTextInside && !ariaLabel, 'aria-label is required', this.asProps['data-ui-name'] || Button.displayName);
-
       return /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"].Detect, {
@@ -168,3 +181,4 @@ neighborLocation: neighborLocation
           "use:theme": useTheme,
-          "role": "button"
+          "role": "button",
+          "ref": _this2.containerRef
         }, _ref))), /*#__PURE__*/_react["default"].createElement(SInner, _ref4.cn("SInner", {
@@ -171,0 +185,0 @@ "tag": "span",

lib/es6/Button.js

 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -27,4 +28,2 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import logger from '@semcore/utils/lib/logger';
-import reactToText from '@semcore/utils/lib/reactToText';
-import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
 import SpinButton from './SpinButton';
@@ -37,33 +36,34 @@
 /*__inner_css_start__*/
-":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SButton_1e1mi_gg_ {\n  position: relative;\n  display: inline-block;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  font-family: Inter, sans-serif;\n  line-height: normal;\n  text-decoration: none;\n  text-align: center;\n  vertical-align: middle;\n  border: 1px solid transparent;\n  outline: 0;\n  box-shadow: none;\n  cursor: pointer;\n  box-sizing: border-box;\n  overflow: visible;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  font-weight: 500;\n  color: #6c6e79\n}\n\n.___SButton_1e1mi_gg_::-moz-focus-inner {\n    padding: 0;\n    border: none;\n  }\n\n.___SButton_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_:hover,\n  .___SButton_1e1mi_gg_:focus {\n    outline: 0;\n    text-decoration: none;\n  }\n\n.___SButton_1e1mi_gg_.__disabled_1e1mi_gg_ {\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none; /* Disable link interactions */\n}\n\n.___SButton_1e1mi_gg_.__keyboardFocused_1e1mi_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n  z-index: 1;\n}\n\n.___SButton_1e1mi_gg_._size_m_1e1mi_gg_ {\n  height: 28px;\n  min-width: 28px;\n  border-radius: 6px;\n  font-size: 14px;\n}\n\n.___SButton_1e1mi_gg_._size_l_1e1mi_gg_ {\n  height: 40px;\n  min-width: 40px;\n  border-radius: 6px;\n  font-size: 16px;\n}\n\n.___SButton_1e1mi_gg_._theme_primary-info_1e1mi_gg_ {\n  color: #ffffff;\n  background-color: #008ff8\n}\n\n.___SButton_1e1mi_gg_._theme_primary-info_1e1mi_gg_:hover {\n    background-color: #006dca;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-info_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_primary-info_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: #044792;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-success_1e1mi_gg_ {\n  color: #ffffff;\n  background-color: #009f81\n}\n\n.___SButton_1e1mi_gg_._theme_primary-success_1e1mi_gg_:hover {\n    background-color: #007c65;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-success_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_primary-success_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: #055345;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-warning_1e1mi_gg_ {\n  background-color: #ff642d;\n  color: #ffffff\n}\n\n.___SButton_1e1mi_gg_._theme_primary-warning_1e1mi_gg_:hover {\n    background-color: #c33909;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-warning_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_primary-warning_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: #8b1500;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-danger_1e1mi_gg_ {\n  background-color: #ff4953;\n  color: #ffffff\n}\n\n.___SButton_1e1mi_gg_._theme_primary-danger_1e1mi_gg_:hover {\n    background-color: #d1002f;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-danger_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_primary-danger_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: #8e0016;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-invert_1e1mi_gg_ {\n  background-color: #fff;\n  color: #191b23\n}\n\n.___SButton_1e1mi_gg_._theme_primary-invert_1e1mi_gg_:hover {\n    background-color: #f4f5f9;\n  }\n\n.___SButton_1e1mi_gg_._theme_primary-invert_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_primary-invert_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: #e0e1e9;\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-muted_1e1mi_gg_ {\n  color: #6c6e79;\n  border-color: #c4c7cf;\n  background-color: rgba(138, 142, 155, 0.1)\n}\n\n.___SButton_1e1mi_gg_._theme_secondary-muted_1e1mi_gg_:hover {\n    background-color: rgba(138, 142, 155, 0.2);\n    color: #191b23;\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-muted_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_secondary-muted_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(138, 142, 155, 0.3);\n    color: #191b23;\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-info_1e1mi_gg_ {\n  background-color: rgba(0, 143, 248, 0.05);\n  color: #008ff8;\n  border-color: #008ff8\n}\n\n.___SButton_1e1mi_gg_._theme_secondary-info_1e1mi_gg_:hover {\n    background-color: rgba(0, 109, 202, 0.2);\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-info_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_secondary-info_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(0, 109, 202, 0.3);\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-invert_1e1mi_gg_ {\n  background-color: rgba(255, 255, 255, 0.05);\n  color: #fff;\n  border-color: #fff\n}\n\n.___SButton_1e1mi_gg_._theme_secondary-invert_1e1mi_gg_:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n.___SButton_1e1mi_gg_._theme_secondary-invert_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_secondary-invert_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(255, 255, 255, 0.3);\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-info_1e1mi_gg_ {\n  color: #006dca;\n  background-color: transparent\n}\n\n.___SButton_1e1mi_gg_._theme_tertiary-info_1e1mi_gg_:hover {\n    background-color: rgba(0, 143, 248, 0.2);\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-info_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_tertiary-info_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(0, 143, 248, 0.3);\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-muted_1e1mi_gg_ {\n  color: #6c6e79;\n  background-color: transparent\n}\n\n.___SButton_1e1mi_gg_._theme_tertiary-muted_1e1mi_gg_:hover {\n    background-color: rgba(138, 142, 155, 0.2);\n    color: #191b23;\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-muted_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_tertiary-muted_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(138, 142, 155, 0.3);\n    color: #191b23;\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-invert_1e1mi_gg_ {\n  color: #fff;\n  background-color: transparent\n}\n\n.___SButton_1e1mi_gg_._theme_tertiary-invert_1e1mi_gg_:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n.___SButton_1e1mi_gg_._theme_tertiary-invert_1e1mi_gg_:active,\n  .___SButton_1e1mi_gg_._theme_tertiary-invert_1e1mi_gg_.__active_1e1mi_gg_ {\n    background-color: rgba(255, 255, 255, 0.3);\n  }\n\n.___SButton_1e1mi_gg_._neighborLocation_right_1e1mi_gg_ {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_ {\n  border-radius: 0;\n  margin-left: -1px\n}\n\n.___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_._theme_primary-info_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_._theme_primary-success_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_._theme_primary-warning_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_._theme_primary-danger_1e1mi_gg_ {\n    border-left-color: rgba(255, 255, 255, 0.5);\n  }\n\n.___SButton_1e1mi_gg_._neighborLocation_both_1e1mi_gg_._theme_primary-invert_1e1mi_gg_ {\n    border-left-color: rgba(0, 0, 0, 0.5);\n  }\n\n.___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_ {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  margin-left: -1px\n}\n\n.___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_._theme_primary-info_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_._theme_primary-success_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_._theme_primary-warning_1e1mi_gg_,\n  .___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_._theme_primary-danger_1e1mi_gg_ {\n    border-left-color: rgba(255, 255, 255, 0.5);\n  }\n\n.___SButton_1e1mi_gg_._neighborLocation_left_1e1mi_gg_._theme_primary-invert_1e1mi_gg_ {\n    border-left-color: rgba(0, 0, 0, 0.5);\n  }\n\n.___SSpin_1e1mi_gg_ {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.___SInner_1e1mi_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.___SInner_1e1mi_gg_.__loading_1e1mi_gg_ {\n  visibility: hidden;\n}\n\n.___SText_1e1mi_gg_ {\n  display: inline-flex;\n}\n\n.___SText_1e1mi_gg_._size_m_1e1mi_gg_ {\n  margin-left: 8px;\n  margin-right: 8px;\n  line-height: 1.42;\n}\n\n.___SText_1e1mi_gg_._size_l_1e1mi_gg_ {\n  margin-left: 12px;\n  margin-right: 12px;\n  line-height: 1.5;\n}\n\n.___SAddon_1e1mi_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.___SAddon_1e1mi_gg_._size_m_1e1mi_gg_:not(:only-child):first-child {\n    margin-left: 8px;\n  }\n\n.___SAddon_1e1mi_gg_._size_m_1e1mi_gg_:not(:only-child):last-child {\n    margin-right: 8px;\n  }\n\n.___SAddon_1e1mi_gg_._size_m_1e1mi_gg_:only-child {\n    margin-left: -4px;\n    margin-right: -4px;\n  }\n\n.___SAddon_1e1mi_gg_._size_l_1e1mi_gg_:not(:only-child):first-child {\n    margin-left: 8px;\n  }\n\n.___SAddon_1e1mi_gg_._size_l_1e1mi_gg_:not(:only-child):last-child {\n    margin-right: 8px;\n  }\n\n.___SAddon_1e1mi_gg_._size_l_1e1mi_gg_:only-child {\n    margin-left: -4px;\n    margin-right: -4px;\n  }\n"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SButton_1dydh_gg_ {\n  position: relative;\n  display: inline-block;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  font-family: Inter, sans-serif;\n  line-height: normal;\n  text-decoration: none;\n  text-align: center;\n  vertical-align: middle;\n  border: 1px solid transparent;\n  outline: 0;\n  box-shadow: none;\n  cursor: pointer;\n  box-sizing: border-box;\n  overflow: visible;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  font-weight: 500;\n  color: #6c6e79\n}\n\n.___SButton_1dydh_gg_::-moz-focus-inner {\n    padding: 0;\n    border: none;\n  }\n\n.___SButton_1dydh_gg_:active,\n  .___SButton_1dydh_gg_:hover,\n  .___SButton_1dydh_gg_:focus {\n    outline: 0;\n    text-decoration: none;\n  }\n\n.___SButton_1dydh_gg_.__disabled_1dydh_gg_ {\n  opacity: 0.3;\n  cursor: default;\n  pointer-events: none; /* Disable link interactions */\n}\n\n.___SButton_1dydh_gg_.__keyboardFocused_1dydh_gg_ {\n  box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n  z-index: 1;\n}\n\n.___SButton_1dydh_gg_._size_m_1dydh_gg_ {\n  height: 28px;\n  min-width: 28px;\n  border-radius: 6px;\n  font-size: 14px;\n}\n\n.___SButton_1dydh_gg_._size_l_1dydh_gg_ {\n  height: 40px;\n  min-width: 40px;\n  border-radius: 6px;\n  font-size: 16px;\n}\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_ {\n  color: #ffffff;\n  background-color: #008ff8\n}\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_:hover {\n    background-color: #006dca;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_primary-info_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: #044792;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_ {\n  color: #ffffff;\n  background-color: #009f81\n}\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_:hover {\n    background-color: #007c65;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_primary-success_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: #055345;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_ {\n  background-color: #ff642d;\n  color: #ffffff\n}\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_:hover {\n    background-color: #c33909;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_primary-warning_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: #8b1500;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n  background-color: #ff4953;\n  color: #ffffff\n}\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_:hover {\n    background-color: #d1002f;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_primary-danger_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: #8e0016;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n  background-color: #fff;\n  color: #191b23\n}\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_:hover {\n    background-color: #f4f5f9;\n  }\n\n.___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_primary-invert_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: #e0e1e9;\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_ {\n  color: #6c6e79;\n  border-color: #c4c7cf;\n  background-color: rgba(138, 142, 155, 0.1)\n}\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_:hover {\n    background-color: rgba(138, 142, 155, 0.2);\n    color: #191b23;\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_secondary-muted_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(138, 142, 155, 0.3);\n    color: #191b23;\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_ {\n  background-color: rgba(0, 143, 248, 0.05);\n  color: #008ff8;\n  border-color: #008ff8\n}\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_:hover {\n    background-color: rgba(0, 109, 202, 0.2);\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_secondary-info_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(0, 109, 202, 0.3);\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_ {\n  background-color: rgba(255, 255, 255, 0.05);\n  color: #fff;\n  border-color: #fff\n}\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n.___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_secondary-invert_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(255, 255, 255, 0.3);\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_ {\n  color: #006dca;\n  background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_:hover {\n    background-color: rgba(0, 143, 248, 0.2);\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_tertiary-info_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(0, 143, 248, 0.3);\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_ {\n  color: #6c6e79;\n  background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_:hover {\n    background-color: rgba(138, 142, 155, 0.2);\n    color: #191b23;\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_tertiary-muted_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(138, 142, 155, 0.3);\n    color: #191b23;\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_ {\n  color: #fff;\n  background-color: transparent\n}\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n.___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_:active,\n  .___SButton_1dydh_gg_._theme_tertiary-invert_1dydh_gg_.__active_1dydh_gg_ {\n    background-color: rgba(255, 255, 255, 0.3);\n  }\n\n.___SButton_1dydh_gg_._neighborLocation_right_1dydh_gg_ {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_ {\n  border-radius: 0;\n  margin-left: -1px\n}\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-info_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-success_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-warning_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n    border-left-color: rgba(255, 255, 255, 0.5);\n  }\n\n.___SButton_1dydh_gg_._neighborLocation_both_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n    border-left-color: rgba(0, 0, 0, 0.5);\n  }\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_ {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  margin-left: -1px\n}\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-info_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-success_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-warning_1dydh_gg_,\n  .___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-danger_1dydh_gg_ {\n    border-left-color: rgba(255, 255, 255, 0.5);\n  }\n\n.___SButton_1dydh_gg_._neighborLocation_left_1dydh_gg_._theme_primary-invert_1dydh_gg_ {\n    border-left-color: rgba(0, 0, 0, 0.5);\n  }\n\n.___SSpin_1dydh_gg_ {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n\n.___SInner_1dydh_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n}\n\n.___SInner_1dydh_gg_.__loading_1dydh_gg_ {\n  visibility: hidden;\n}\n\n.___SText_1dydh_gg_ {\n  display: inline-flex;\n}\n\n.___SText_1dydh_gg_._size_m_1dydh_gg_ {\n  margin-left: 8px;\n  margin-right: 8px;\n  line-height: 1.42;\n}\n\n.___SText_1dydh_gg_._size_l_1dydh_gg_ {\n  margin-left: 12px;\n  margin-right: 12px;\n  line-height: 1.5;\n}\n\n.___SAddon_1dydh_gg_ {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:not(:only-child):first-child {\n    margin-left: 8px;\n  }\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:not(:only-child):last-child {\n    margin-right: 8px;\n  }\n\n.___SAddon_1dydh_gg_._size_m_1dydh_gg_:only-child {\n    margin-left: -4px;\n    margin-right: -4px;\n  }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:not(:only-child):first-child {\n    margin-left: 8px;\n  }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:not(:only-child):last-child {\n    margin-right: 8px;\n  }\n\n.___SAddon_1dydh_gg_._size_l_1dydh_gg_:only-child {\n    margin-left: -4px;\n    margin-right: -4px;\n  }\n"
 /*__inner_css_end__*/
-, "1e1mi_gg_")
+, "1dydh_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SButton": "___SButton_1e1mi_gg_",
-  "_disabled": "__disabled_1e1mi_gg_",
-  "_keyboardFocused": "__keyboardFocused_1e1mi_gg_",
-  "_size_m": "_size_m_1e1mi_gg_",
-  "_size_l": "_size_l_1e1mi_gg_",
-  "_theme_primary-info": "_theme_primary-info_1e1mi_gg_",
-  "_active": "__active_1e1mi_gg_",
-  "_theme_primary-success": "_theme_primary-success_1e1mi_gg_",
-  "_theme_primary-warning": "_theme_primary-warning_1e1mi_gg_",
-  "_theme_primary-danger": "_theme_primary-danger_1e1mi_gg_",
-  "_theme_primary-invert": "_theme_primary-invert_1e1mi_gg_",
-  "_theme_secondary-muted": "_theme_secondary-muted_1e1mi_gg_",
-  "_theme_secondary-info": "_theme_secondary-info_1e1mi_gg_",
-  "_theme_secondary-invert": "_theme_secondary-invert_1e1mi_gg_",
-  "_theme_tertiary-info": "_theme_tertiary-info_1e1mi_gg_",
-  "_theme_tertiary-muted": "_theme_tertiary-muted_1e1mi_gg_",
-  "_theme_tertiary-invert": "_theme_tertiary-invert_1e1mi_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_1e1mi_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_1e1mi_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_1e1mi_gg_",
-  "__SSpin": "___SSpin_1e1mi_gg_",
-  "__SInner": "___SInner_1e1mi_gg_",
-  "_loading": "__loading_1e1mi_gg_",
-  "__SText": "___SText_1e1mi_gg_",
-  "__SAddon": "___SAddon_1e1mi_gg_"
+  "__SButton": "___SButton_1dydh_gg_",
+  "_disabled": "__disabled_1dydh_gg_",
+  "_keyboardFocused": "__keyboardFocused_1dydh_gg_",
+  "_size_m": "_size_m_1dydh_gg_",
+  "_size_l": "_size_l_1dydh_gg_",
+  "_theme_primary-info": "_theme_primary-info_1dydh_gg_",
+  "_active": "__active_1dydh_gg_",
+  "_theme_primary-success": "_theme_primary-success_1dydh_gg_",
+  "_theme_primary-warning": "_theme_primary-warning_1dydh_gg_",
+  "_theme_primary-danger": "_theme_primary-danger_1dydh_gg_",
+  "_theme_primary-invert": "_theme_primary-invert_1dydh_gg_",
+  "_theme_secondary-muted": "_theme_secondary-muted_1dydh_gg_",
+  "_theme_secondary-info": "_theme_secondary-info_1dydh_gg_",
+  "_theme_secondary-invert": "_theme_secondary-invert_1dydh_gg_",
+  "_theme_tertiary-info": "_theme_tertiary-info_1dydh_gg_",
+  "_theme_tertiary-muted": "_theme_tertiary-muted_1dydh_gg_",
+  "_theme_tertiary-invert": "_theme_tertiary-invert_1dydh_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_1dydh_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_1dydh_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_1dydh_gg_",
+  "__SSpin": "___SSpin_1dydh_gg_",
+  "__SInner": "___SInner_1dydh_gg_",
+  "_loading": "__loading_1dydh_gg_",
+  "__SText": "___SText_1dydh_gg_",
+  "__SAddon": "___SAddon_1dydh_gg_"
 });
+import hasLabels from '@semcore/utils/lib/hasLabels';
 export var MAP_USE_DEFAULT_THEME = {
@@ -81,5 +81,15 @@ primary: 'info',
   function RootButton() {
+    var _this;
+
     _classCallCheck(this, RootButton);
 
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/React.createRef());
+
+    return _this;
   }
@@ -104,5 +114,14 @@
   }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (process.env.NODE_ENV !== 'production') {
+        logger.warn(!hasLabels(this.containerRef.current), "'aria-label' or 'aria-labelledby' are required props for buttons without text content", this.asProps['data-ui-name'] || Button.displayName);
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
-      var _ref = this.asProps;
+      var _ref = this.asProps,
+          _this2 = this;
+
       var SButton = Box;
@@ -123,7 +142,4 @@ var SInner = Box;
           addonLeft = _this$asProps.addonLeft,
-          addonRight = _this$asProps.addonRight,
-          ariaLabel = _this$asProps['aria-label'];
+          addonRight = _this$asProps.addonRight;
       var useTheme = use && theme ? "".concat(use, "-").concat(theme) : false;
-      var isTextInside = reactToText(getOriginChildren(Children));
-      logger.warn(!isTextInside && !ariaLabel, 'aria-label is required', this.asProps['data-ui-name'] || Button.displayName);
       return /*#__PURE__*/React.createElement(NeighborLocation.Detect, {
@@ -140,3 +156,4 @@ neighborLocation: neighborLocation
           "use:theme": useTheme,
-          "role": "button"
+          "role": "button",
+          "ref": _this2.containerRef
         }, _ref))), /*#__PURE__*/React.createElement(SInner, _ref4.cn("SInner", {
@@ -143,0 +160,0 @@ "tag": "span",

package.json

 {
   "name": "@semcore/button",
   "description": "Semrush Button Component",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "main": "lib/cjs/index.js",
@@ -12,3 +12,3 @@ "module": "lib/es6/index.js",
   "dependencies": {
-    "@semcore/utils": "^3.37",
+    "@semcore/utils": "^3.40.0",
     "@semcore/spin": "^4",
@@ -15,0 +15,0 @@ "@semcore/neighbor-location": "^3",

src/Button.jsx

@@ -8,7 +8,6 @@ import React from 'react';
 import logger from '@semcore/utils/lib/logger';
-import reactToText from '@semcore/utils/lib/reactToText';
-import getOriginChildren from '@semcore/utils/lib/getOriginChildren';
 import SpinButton from './SpinButton';
 
 import style from './style/button.shadow.css';
+import hasLabels from '@semcore/utils/lib/hasLabels';
 
@@ -29,2 +28,3 @@ export const MAP_USE_DEFAULT_THEME = {
   };
+  containerRef = React.createRef();
 
@@ -45,2 +45,12 @@ getTextProps() {
 
+  componentDidMount() {
+    if (process.env.NODE_ENV !== 'production') {
+      logger.warn(
+        !hasLabels(this.containerRef.current),
+        `'aria-label' or 'aria-labelledby' are required props for buttons without text content`,
+        this.asProps['data-ui-name'] || Button.displayName,
+      );
+    }
+  }
+
   render() {
@@ -61,12 +71,5 @@ const SButton = Root;
       addonRight,
-      'aria-label': ariaLabel,
     } = this.asProps;
     const useTheme = use && theme ? `${use}-${theme}` : false;
-    const isTextInside = reactToText(getOriginChildren(Children));
 
-    logger.warn(
-      !isTextInside && !ariaLabel,
-      'aria-label is required',
-      this.asProps['data-ui-name'] || Button.displayName,
-    );
     return (
@@ -84,2 +87,3 @@ <NeighborLocation.Detect neighborLocation={neighborLocation}>
               role="button"
+              ref={this.containerRef}
             >
@@ -86,0 +90,0 @@ <SInner tag="span" loading={loading}>

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100785

increased by1.43%

Lines of code

1606

increased by1.71%

Worsened metrics

Number of low supply chain risk alerts

4

increased by100%

Dependency changes

• Updated@semcore/utils@^3.40.0