@semcore/button - npm Package Compare versions

Comparing version 2.1.0 to 2.1.7

CHANGELOG.md

@@ -5,2 +5,55 @@ # Changelog
 
+## [2.1.7] - 2019-07-05
+
+### Removed
+
+- Зависимость от `@semcore/control`
+
+## [2.1.6] - 2019-06-03
+
+### Changed
+
+- Обновлена версия `@semcore/control`
+
+## [2.1.5] - 2019-05-27
+
+### Fixed
+
+- Добавлен пропущенный `color`
+
+## [2.1.4] - 2019-05-13
+
+### Changed
+
+- Обнавлена версия `Spin` и изменена верстка
+
+### Fixed
+
+- Добавлен `line-height: 1` для выравнивания текста
+- Добавлен `border: transparent` по умолчанию
+- Исправлено добавление лишнего `Button.Text` при вставке через фрагмент
+
+## [2.1.3] - 2019-05-07
+
+### Changed
+
+- Исправлены стили для корректной работы с `@semcore/control`
+- Обновлена версия `@semcore/control`
+
+## [2.1.2] - 2019-04-24
+
+### Fixed
+
+- Добавили `line-height: 1` к тексту кнопки
+
+### Changed
+
+- Изменены отступы `Button.Addon` для размера `xl` с 8px на 12px
+
+## [2.1.1] - 2019-03-18
+
+### Fixed
+
+- Исправлена работа свойства `active`
+
 ## [2.1.0] - 2019-02-13
@@ -10,3 +63,3 @@
 
-- зависимость от комопнента `Control`
+- Зависимость от комопнента `Control`
 
@@ -13,0 +66,0 @@ ## [2.0.0] - 2019-01-18

lib/Button.d.ts

 import React, { PureComponent } from 'react';
 import { IBoxProps } from '@semcore/flex-box';
-import { IControlProps } from '@semcore/control';
 export declare const MAP_USE_DEFAULT_THEME: {
@@ -9,3 +8,3 @@ primary: string;
 };
-export interface IButtonProps extends IControlProps {
+export interface IButtonProps extends IBoxProps {
     /** Тип использования кнопки
@@ -17,2 +16,4 @@ * @default secondary
     theme?: 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert' | false;
+    /** Состояние активности кнопки */
+    active?: boolean;
     /** Размер кнопки
@@ -22,4 +23,10 @@ * @default m
     size?: 'xl' | 'l' | 'm' | 's' | false;
+    /** Отключенная кнопки */
+    disabled?: boolean;
     /** Устанавливает состояние загрузки */
     loading?: boolean;
+    /** @ignore */
+    keyboardFocused?: boolean;
+    /** @ignore */
+    neighborLocation?: 'right' | 'both' | 'left' | false;
 }
@@ -46,2 +53,4 @@ export interface IButtonAddonProps extends IBoxProps {
         type: string;
+        tag: string;
+        tabIndex: number;
     };
@@ -52,2 +61,3 @@ static Addon: typeof ButtonAddon;
 }
-export default Button;
+declare const _default: typeof Button;
+export default _default;

lib/index.es.js

@@ -0,5 +1,3 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { PureComponent } from 'react';
-import Spin from '@semcore/spin';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
@@ -10,5 +8,9 @@ import _createClass from '@babel/runtime/helpers/createClass';
 import _inherits from '@babel/runtime/helpers/inherits';
+import React, { PureComponent } from 'react';
 import cn from 'classnames';
 import { Box } from '@semcore/flex-box';
-import Control from '@semcore/control';
+import WithKeyboardFocus from '@semcore/utils/lib/enhances/WithKeyboardFocus';
+import { WithNeighborLocation } from '@semcore/neighbor-location';
+import compose from '@semcore/utils/lib/compose';
+import Spin from '@semcore/spin';
 
@@ -32,3 +34,6 @@ var SPIN_SIZE_MAP;
   SPIN_THEME_MAP["secondary-invert"] = "invert";
+  SPIN_THEME_MAP["secondary-muted"] = "gray40";
+  SPIN_THEME_MAP["secondary-info"] = "light-blue";
   SPIN_THEME_MAP["tertiary-invert"] = "invert";
+  SPIN_THEME_MAP["tertiary-info"] = "light-blue";
 })(SPIN_THEME_MAP || (SPIN_THEME_MAP = {}));
@@ -39,3 +44,4 @@
       size = props.size,
-      others = _objectWithoutProperties(props, ["theme", "size"]);
+      className = props.className,
+      others = _objectWithoutProperties(props, ["theme", "size", "className"]);
 
@@ -50,48 +56,51 @@ return React.createElement(Spin, Object.assign({
   "block": {
-    "block": "_button_zen8d_3",
+    "block": "_button_sbztf_3",
     "size": {
-      "s": "_button--size_s_zen8d_36",
-      "m": "_button--size_m_zen8d_63",
-      "l": "_button--size_l_zen8d_90",
-      "xl": "_button--size_xl_zen8d_117"
+      "s": "_button--size_s_sbztf_73",
+      "m": "_button--size_m_sbztf_100",
+      "l": "_button--size_l_sbztf_127",
+      "xl": "_button--size_xl_sbztf_154"
     },
     "theme": {
-      "primary-info": "_button--theme_primary-info_zen8d_144",
-      "primary-success": "_button--theme_primary-success_zen8d_162",
-      "primary-warning": "_button--theme_primary-warning_zen8d_180",
-      "primary-danger": "_button--theme_primary-danger_zen8d_198",
-      "primary-invert": "_button--theme_primary-invert_zen8d_216",
-      "secondary-muted": "_button--theme_secondary-muted_zen8d_234",
-      "secondary-info": "_button--theme_secondary-info_zen8d_256",
-      "secondary-invert": "_button--theme_secondary-invert_zen8d_278",
-      "tertiary-info": "_button--theme_tertiary-info_zen8d_297",
-      "tertiary-muted": "_button--theme_tertiary-muted_zen8d_316",
-      "tertiary-invert": "_button--theme_tertiary-invert_zen8d_331"
+      "primary-info": "_button--theme_primary-info_sbztf_181",
+      "primary-success": "_button--theme_primary-success_sbztf_193",
+      "primary-warning": "_button--theme_primary-warning_sbztf_205",
+      "primary-danger": "_button--theme_primary-danger_sbztf_217",
+      "primary-invert": "_button--theme_primary-invert_sbztf_229",
+      "secondary-muted": "_button--theme_secondary-muted_sbztf_241",
+      "secondary-info": "_button--theme_secondary-info_sbztf_254",
+      "secondary-invert": "_button--theme_secondary-invert_sbztf_267",
+      "tertiary-info": "_button--theme_tertiary-info_sbztf_280",
+      "tertiary-muted": "_button--theme_tertiary-muted_sbztf_292",
+      "tertiary-invert": "_button--theme_tertiary-invert_sbztf_303"
     },
     "active": {
-      "block": "_button--active_zen8d_151"
+      "block": "_button--active_sbztf_188"
     },
     "disabled": {
-      "block": "_button--disabled_zen8d_155"
+      "block": "_button--disabled_sbztf_315"
     },
+    "keyboard-focused": {
+      "block": "_button--keyboard-focused_sbztf_321"
+    },
     "neighbor-location": {
-      "right": "_button--neighbor-location_right_zen8d_347",
-      "both": "_button--neighbor-location_both_zen8d_350",
-      "left": "_button--neighbor-location_left_zen8d_359"
+      "right": "_button--neighbor-location_right_sbztf_325",
+      "both": "_button--neighbor-location_both_sbztf_330",
+      "left": "_button--neighbor-location_left_sbztf_335"
     }
   },
+  "spin": {
+    "block": "_button__spin_sbztf_41"
+  },
   "inner": {
-    "block": "_button__inner_zen8d_6",
+    "block": "_button__inner_sbztf_50",
     "loading": {
-      "block": "_button__inner--loading_zen8d_14"
+      "block": "_button__inner--loading_sbztf_58"
     }
   },
   "additional": {
-    "block": "_button__additional_zen8d_18"
+    "block": "_button__additional_sbztf_62"
   },
   "text": {
-    "block": "_button__text_zen8d_24"
-  },
-  "spin": {
-    "block": "_button__spin_zen8d_28"
+    "block": "_button__text_sbztf_68"
   }
@@ -103,8 +112,14 @@ };
     var head = window.document.head;
-    var style = window.document.createElement("style");
-    style.classList.add('_css-style');
-    style.innerHTML = "._button__inner_zen8d_6{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}._button__inner--loading_zen8d_14{visibility:hidden}._button__additional_zen8d_18{display:inline-flex;align-items:center;justify-content:center}._button__text_zen8d_24{display:inline-flex}._button__spin_zen8d_28{position:absolute;height:100%;width:100%;top:0;left:0}._button--size_s_zen8d_36{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_zen8d_36 ._button__text_zen8d_24{margin-left:4px;margin-right:4px}._button--size_s_zen8d_36 ._button__additional_zen8d_18:not(:only-child):first-child{margin-left:4px}._button--size_s_zen8d_36 ._button__additional_zen8d_18:not(:only-child):last-child{margin-right:4px}._button--size_s_zen8d_36 ._button__additional_zen8d_18:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_zen8d_63{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_zen8d_63 ._button__text_zen8d_24{margin-left:8px;margin-right:8px}._button--size_m_zen8d_63 ._button__additional_zen8d_18:not(:only-child):first-child{margin-left:8px}._button--size_m_zen8d_63 ._button__additional_zen8d_18:not(:only-child):last-child{margin-right:8px}._button--size_m_zen8d_63 ._button__additional_zen8d_18:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_zen8d_90{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_zen8d_90 ._button__text_zen8d_24{margin-left:8px;margin-right:8px}._button--size_l_zen8d_90 ._button__additional_zen8d_18:not(:only-child):first-child{margin-left:8px}._button--size_l_zen8d_90 ._button__additional_zen8d_18:not(:only-child):last-child{margin-right:8px}._button--size_l_zen8d_90 ._button__additional_zen8d_18:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_zen8d_117{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_zen8d_117 ._button__text_zen8d_24{margin-left:12px;margin-right:12px}._button--size_xl_zen8d_117 ._button__additional_zen8d_18:not(:only-child):first-child{margin-left:8px}._button--size_xl_zen8d_117 ._button__additional_zen8d_18:not(:only-child):last-child{margin-right:8px}._button--size_xl_zen8d_117 ._button__additional_zen8d_18:only-child{margin-left:-4px;margin-right:-4px}._button--theme_primary-info_zen8d_144{background-color:#2b94e1;color:#fff}._button--theme_primary-info_zen8d_144:hover{background-color:#0071bc}._button--theme_primary-info_zen8d_144._button--active_zen8d_151,._button--theme_primary-info_zen8d_144:active{background-color:#006bb3}._button--theme_primary-info_zen8d_144._button--disabled_zen8d_155,._button--theme_primary-info_zen8d_144._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_primary-info_zen8d_144._button--disabled_zen8d_155:active,._button--theme_primary-info_zen8d_144._button--disabled_zen8d_155:hover{background-color:#2b94e1}._button--theme_primary-success_zen8d_162{background-color:#4fae33;color:#fff}._button--theme_primary-success_zen8d_162:hover{background-color:#1d9c00}._button--theme_primary-success_zen8d_162._button--active_zen8d_151,._button--theme_primary-success_zen8d_162:active{background-color:#1c9400}._button--theme_primary-success_zen8d_162._button--disabled_zen8d_155,._button--theme_primary-success_zen8d_162._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_primary-success_zen8d_162._button--disabled_zen8d_155:active,._button--theme_primary-success_zen8d_162._button--disabled_zen8d_155:hover{background-color:#4fae33}._button--theme_primary-warning_zen8d_180{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_zen8d_180:hover{background-color:#c60}._button--theme_primary-warning_zen8d_180._button--active_zen8d_151,._button--theme_primary-warning_zen8d_180:active{background-color:#c26100}._button--theme_primary-warning_zen8d_180._button--disabled_zen8d_155,._button--theme_primary-warning_zen8d_180._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_primary-warning_zen8d_180._button--disabled_zen8d_155:active,._button--theme_primary-warning_zen8d_180._button--disabled_zen8d_155:hover{background-color:#ff7f00}._button--theme_primary-danger_zen8d_198{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_zen8d_198:hover{background-color:#d00000}._button--theme_primary-danger_zen8d_198._button--active_zen8d_151,._button--theme_primary-danger_zen8d_198:active{background-color:#c60000}._button--theme_primary-danger_zen8d_198._button--disabled_zen8d_155,._button--theme_primary-danger_zen8d_198._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_primary-danger_zen8d_198._button--disabled_zen8d_155:active,._button--theme_primary-danger_zen8d_198._button--disabled_zen8d_155:hover{background-color:#ed2d2d}._button--theme_primary-invert_zen8d_216{background-color:#fff;color:#333}._button--theme_primary-invert_zen8d_216:hover{background-color:#eee}._button--theme_primary-invert_zen8d_216._button--active_zen8d_151,._button--theme_primary-invert_zen8d_216:active{background-color:#e4e1e1}._button--theme_primary-invert_zen8d_216._button--disabled_zen8d_155,._button--theme_primary-invert_zen8d_216._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_primary-invert_zen8d_216._button--disabled_zen8d_155:active,._button--theme_primary-invert_zen8d_216._button--disabled_zen8d_155:hover{background-color:#fff}._button--theme_secondary-muted_zen8d_234{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_zen8d_234:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_zen8d_234._button--active_zen8d_151,._button--theme_secondary-muted_zen8d_234:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-muted_zen8d_234._button--disabled_zen8d_155,._button--theme_secondary-muted_zen8d_234._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_secondary-muted_zen8d_234._button--disabled_zen8d_155:active,._button--theme_secondary-muted_zen8d_234._button--disabled_zen8d_155:hover{background-color:rgba(166,175,179,.1)}._button--theme_secondary-muted_zen8d_234>._button__spin_zen8d_28 div:first-child{border-color:#666 #666 transparent transparent}._button--theme_secondary-info_zen8d_256{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_zen8d_256:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_zen8d_256._button--active_zen8d_151,._button--theme_secondary-info_zen8d_256:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-info_zen8d_256._button--disabled_zen8d_155,._button--theme_secondary-info_zen8d_256._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_secondary-info_zen8d_256._button--disabled_zen8d_155:active,._button--theme_secondary-info_zen8d_256._button--disabled_zen8d_155:hover{background-color:rgba(42,148,224,.05)}._button--theme_secondary-info_zen8d_256>._button__spin_zen8d_28 div:first-child{border-color:#2b94e1 #2b94e1 transparent transparent}._button--theme_secondary-invert_zen8d_278{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_zen8d_278:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_zen8d_278._button--active_zen8d_151,._button--theme_secondary-invert_zen8d_278:active{background-color:hsla(0,0%,100%,.3)}._button--theme_secondary-invert_zen8d_278._button--disabled_zen8d_155,._button--theme_secondary-invert_zen8d_278._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_secondary-invert_zen8d_278._button--disabled_zen8d_155:active,._button--theme_secondary-invert_zen8d_278._button--disabled_zen8d_155:hover{background-color:hsla(0,0%,100%,.05)}._button--theme_tertiary-info_zen8d_297{color:#0071bc}._button--theme_tertiary-info_zen8d_297:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_zen8d_297._button--active_zen8d_151,._button--theme_tertiary-info_zen8d_297:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-info_zen8d_297._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_tertiary-info_zen8d_297._button--disabled_zen8d_155:active,._button--theme_tertiary-info_zen8d_297._button--disabled_zen8d_155:hover{background-color:transparent}._button--theme_tertiary-info_zen8d_297>._button__spin_zen8d_28 div:first-child{border-color:#2b94e1 #2b94e1 transparent transparent}._button--theme_tertiary-muted_zen8d_316{color:#666}._button--theme_tertiary-muted_zen8d_316:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_zen8d_316._button--active_zen8d_151,._button--theme_tertiary-muted_zen8d_316:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-muted_zen8d_316._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_tertiary-muted_zen8d_316._button--disabled_zen8d_155:active,._button--theme_tertiary-muted_zen8d_316._button--disabled_zen8d_155:hover{background-color:transparent}._button--theme_tertiary-invert_zen8d_331{color:#fff}._button--theme_tertiary-invert_zen8d_331:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_zen8d_331._button--active_zen8d_151,._button--theme_tertiary-invert_zen8d_331:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-invert_zen8d_331._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_tertiary-invert_zen8d_331._button--disabled_zen8d_155:active,._button--theme_tertiary-invert_zen8d_331._button--disabled_zen8d_155:hover{background-color:transparent}._button--neighbor-location_both_zen8d_350[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_zen8d_350._button--theme_primary-invert_zen8d_216{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_zen8d_359[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_zen8d_359._button--theme_primary-invert_zen8d_216{border-left-color:rgba(0,0,0,.5)}";
-    head.appendChild(style);
+    var prevStyle = head.querySelector('._css-style');
+
+    if (prevStyle && prevStyle.insertAdjacentText) {
+      prevStyle.insertAdjacentText("beforeend", "._button_sbztf_3{display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:1px solid transparent;color:#666}._button_sbztf_3::-moz-focus-inner{border:none;padding:0}._button_sbztf_3:active,._button_sbztf_3:focus,._button_sbztf_3:hover{outline:0;text-decoration:none}._button__spin_sbztf_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_sbztf_50{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}._button__inner--loading_sbztf_58{visibility:hidden}._button__additional_sbztf_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_sbztf_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_sbztf_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_sbztf_73 ._button__text_sbztf_68{margin-left:4px;margin-right:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_sbztf_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_sbztf_100 ._button__text_sbztf_68{margin-left:8px;margin-right:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_sbztf_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_sbztf_127 ._button__text_sbztf_68{margin-left:8px;margin-right:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_sbztf_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_sbztf_154 ._button__text_sbztf_68{margin-left:12px;margin-right:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_sbztf_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_sbztf_181:hover{background-color:#0071bc}._button--theme_primary-info_sbztf_181._button--active_sbztf_188,._button--theme_primary-info_sbztf_181:active{background-color:#006bb3}._button--theme_primary-success_sbztf_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_sbztf_193:hover{background-color:#1d9c00}._button--theme_primary-success_sbztf_193._button--active_sbztf_188,._button--theme_primary-success_sbztf_193:active{background-color:#1c9400}._button--theme_primary-warning_sbztf_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_sbztf_205:hover{background-color:#c60}._button--theme_primary-warning_sbztf_205._button--active_sbztf_188,._button--theme_primary-warning_sbztf_205:active{background-color:#c26100}._button--theme_primary-danger_sbztf_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_sbztf_217:hover{background-color:#d00000}._button--theme_primary-danger_sbztf_217._button--active_sbztf_188,._button--theme_primary-danger_sbztf_217:active{background-color:#c60000}._button--theme_primary-invert_sbztf_229{background-color:#fff;color:#333}._button--theme_primary-invert_sbztf_229:hover{background-color:#eee}._button--theme_primary-invert_sbztf_229._button--active_sbztf_188,._button--theme_primary-invert_sbztf_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_sbztf_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_sbztf_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_sbztf_241._button--active_sbztf_188,._button--theme_secondary-muted_sbztf_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_sbztf_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_sbztf_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_sbztf_254._button--active_sbztf_188,._button--theme_secondary-info_sbztf_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_sbztf_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_sbztf_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_sbztf_267._button--active_sbztf_188,._button--theme_secondary-invert_sbztf_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_sbztf_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_sbztf_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_sbztf_280._button--active_sbztf_188,._button--theme_tertiary-info_sbztf_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_sbztf_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_sbztf_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_sbztf_292._button--active_sbztf_188,._button--theme_tertiary-muted_sbztf_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_sbztf_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_sbztf_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_sbztf_303._button--active_sbztf_188,._button--theme_tertiary-invert_sbztf_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_sbztf_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_sbztf_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_sbztf_325._button--neighbor-location_right_sbztf_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_sbztf_330._button--neighbor-location_both_sbztf_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_sbztf_335._button--neighbor-location_left_sbztf_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}");
+    } else {
+      var style = window.document.createElement("style");
+      style.classList.add('_css-style');
+      style.innerHTML = "._button_sbztf_3{display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:1px solid transparent;color:#666}._button_sbztf_3::-moz-focus-inner{border:none;padding:0}._button_sbztf_3:active,._button_sbztf_3:focus,._button_sbztf_3:hover{outline:0;text-decoration:none}._button__spin_sbztf_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_sbztf_50{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}._button__inner--loading_sbztf_58{visibility:hidden}._button__additional_sbztf_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_sbztf_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_sbztf_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_sbztf_73 ._button__text_sbztf_68{margin-left:4px;margin-right:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_sbztf_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_sbztf_100 ._button__text_sbztf_68{margin-left:8px;margin-right:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_sbztf_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_sbztf_127 ._button__text_sbztf_68{margin-left:8px;margin-right:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_sbztf_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_sbztf_154 ._button__text_sbztf_68{margin-left:12px;margin-right:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_sbztf_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_sbztf_181:hover{background-color:#0071bc}._button--theme_primary-info_sbztf_181._button--active_sbztf_188,._button--theme_primary-info_sbztf_181:active{background-color:#006bb3}._button--theme_primary-success_sbztf_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_sbztf_193:hover{background-color:#1d9c00}._button--theme_primary-success_sbztf_193._button--active_sbztf_188,._button--theme_primary-success_sbztf_193:active{background-color:#1c9400}._button--theme_primary-warning_sbztf_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_sbztf_205:hover{background-color:#c60}._button--theme_primary-warning_sbztf_205._button--active_sbztf_188,._button--theme_primary-warning_sbztf_205:active{background-color:#c26100}._button--theme_primary-danger_sbztf_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_sbztf_217:hover{background-color:#d00000}._button--theme_primary-danger_sbztf_217._button--active_sbztf_188,._button--theme_primary-danger_sbztf_217:active{background-color:#c60000}._button--theme_primary-invert_sbztf_229{background-color:#fff;color:#333}._button--theme_primary-invert_sbztf_229:hover{background-color:#eee}._button--theme_primary-invert_sbztf_229._button--active_sbztf_188,._button--theme_primary-invert_sbztf_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_sbztf_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_sbztf_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_sbztf_241._button--active_sbztf_188,._button--theme_secondary-muted_sbztf_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_sbztf_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_sbztf_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_sbztf_254._button--active_sbztf_188,._button--theme_secondary-info_sbztf_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_sbztf_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_sbztf_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_sbztf_267._button--active_sbztf_188,._button--theme_secondary-invert_sbztf_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_sbztf_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_sbztf_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_sbztf_280._button--active_sbztf_188,._button--theme_tertiary-info_sbztf_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_sbztf_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_sbztf_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_sbztf_292._button--active_sbztf_188,._button--theme_tertiary-muted_sbztf_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_sbztf_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_sbztf_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_sbztf_303._button--active_sbztf_188,._button--theme_tertiary-invert_sbztf_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_sbztf_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_sbztf_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_sbztf_325._button--neighbor-location_right_sbztf_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_sbztf_330._button--neighbor-location_both_sbztf_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_sbztf_335._button--neighbor-location_left_sbztf_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}";
+      head.appendChild(style);
+    }
   }
-})('./button.style.css');
+})();
 
@@ -135,2 +150,7 @@ function block() {
 
+block['keyboardFocused'] = function () {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
+  return data['block']['keyboard-focused'][value];
+};
+
 block['neighborLocation'] = function () {
@@ -141,2 +161,6 @@ var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
 
+function spin() {
+  return data['spin']['block'];
+}
+
 function inner() {
@@ -159,6 +183,3 @@ return data['inner']['block'];
 
-function spin() {
-  return data['spin']['block'];
-}
-
+var enhance = compose(WithKeyboardFocus(), WithNeighborLocation());
 var MAP_USE_DEFAULT_THEME = {
@@ -256,2 +277,3 @@ primary: 'info',
           loading = _this$props3.loading,
+          active = _this$props3.active,
           children = _this$props3.children,
@@ -261,3 +283,6 @@ size = _this$props3.size,
           className = _this$props3.className,
-          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "children", "size", "use", "className"]);
+          tabIndex = _this$props3.tabIndex,
+          keyboardFocused = _this$props3.keyboardFocused,
+          neighborLocation = _this$props3.neighborLocation,
+          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "active", "children", "size", "use", "className", "tabIndex", "keyboardFocused", "neighborLocation"]);
 
@@ -268,6 +293,19 @@ var disabled = loading || disabledProp;
       var styles = {
-        button: cn(block(), (_cn = {}, _defineProperty(_cn, block.theme(useTheme), use && theme), _defineProperty(_cn, block.size(size), size), _cn), className),
+        button: cn(block(), (_cn = {}, _defineProperty(_cn, block.theme(useTheme), use && theme), _defineProperty(_cn, block.size(size), size), _defineProperty(_cn, block.active(), active), _defineProperty(_cn, block.neighborLocation(neighborLocation), neighborLocation), _defineProperty(_cn, block.keyboardFocused(), keyboardFocused), _defineProperty(_cn, block.disabled(), disabled), _cn), className),
         inner: cn(inner(), _defineProperty({}, inner.loading(), loading))
-      };
-      return React.createElement(Control, Object.assign({}, other, {
+      }; // TODO: move utils
+
+      var childArr = React.Children.toArray(children);
+      var isWrap = false;
+
+      if (childArr.length === 1) {
+        isWrap = true;
+
+        if (React.isValidElement(childArr[0])) {
+          isWrap = !(childArr[0].type === React.Fragment || childArr[0].type === Button.Text || childArr[0].type === Button.Addon);
+        }
+      }
+
+      return React.createElement(Box, Object.assign({}, other, {
+        tabIndex: disabled ? -1 : tabIndex,
         disabled: disabled,
@@ -277,8 +315,9 @@ className: styles.button
         className: styles.inner
-      }, React.Children.toArray(children).length === 1 ? React.createElement(Button.Text, null, children) : children), loading && React.createElement(SpinButton, {
+      }, isWrap ? React.createElement(Button.Text, null, children) : children), loading && React.createElement("span", {
+        className: spin()
+      }, React.createElement(SpinButton, {
         centered: true,
         size: size,
-        theme: useTheme,
-        className: spin()
-      }));
+        theme: useTheme
+      })));
     }
@@ -294,9 +333,12 @@ }]);
   size: 'm',
-  type: 'button'
+  type: 'button',
+  tag: 'button',
+  tabIndex: 0
 };
 Button.Addon = ButtonAddon;
 Button.Text = ButtonText;
+var Button$1 = enhance(Button);
 
-export default Button;
+export default Button$1;
 export { MAP_USE_DEFAULT_THEME };
 //# sourceMappingURL=index.es.js.map

lib/index.js

@@ -7,7 +7,4 @@ 'use strict';
 
+var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
-var React = require('react');
-var React__default = _interopDefault(React);
-var Spin = _interopDefault(require('@semcore/spin'));
-var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
@@ -18,5 +15,10 @@ var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
+var React = require('react');
+var React__default = _interopDefault(React);
 var cn = _interopDefault(require('classnames'));
 var flexBox = require('@semcore/flex-box');
-var Control = _interopDefault(require('@semcore/control'));
+var WithKeyboardFocus = _interopDefault(require('@semcore/utils/lib/enhances/WithKeyboardFocus'));
+var neighborLocation = require('@semcore/neighbor-location');
+var compose = _interopDefault(require('@semcore/utils/lib/compose'));
+var Spin = _interopDefault(require('@semcore/spin'));
 
@@ -40,3 +42,6 @@ var SPIN_SIZE_MAP;
   SPIN_THEME_MAP["secondary-invert"] = "invert";
+  SPIN_THEME_MAP["secondary-muted"] = "gray40";
+  SPIN_THEME_MAP["secondary-info"] = "light-blue";
   SPIN_THEME_MAP["tertiary-invert"] = "invert";
+  SPIN_THEME_MAP["tertiary-info"] = "light-blue";
 })(SPIN_THEME_MAP || (SPIN_THEME_MAP = {}));
@@ -47,3 +52,4 @@
       size = props.size,
-      others = _objectWithoutProperties(props, ["theme", "size"]);
+      className = props.className,
+      others = _objectWithoutProperties(props, ["theme", "size", "className"]);
 
@@ -58,48 +64,51 @@ return React__default.createElement(Spin, Object.assign({
   "block": {
-    "block": "_button_zen8d_3",
+    "block": "_button_sbztf_3",
     "size": {
-      "s": "_button--size_s_zen8d_36",
-      "m": "_button--size_m_zen8d_63",
-      "l": "_button--size_l_zen8d_90",
-      "xl": "_button--size_xl_zen8d_117"
+      "s": "_button--size_s_sbztf_73",
+      "m": "_button--size_m_sbztf_100",
+      "l": "_button--size_l_sbztf_127",
+      "xl": "_button--size_xl_sbztf_154"
     },
     "theme": {
-      "primary-info": "_button--theme_primary-info_zen8d_144",
-      "primary-success": "_button--theme_primary-success_zen8d_162",
-      "primary-warning": "_button--theme_primary-warning_zen8d_180",
-      "primary-danger": "_button--theme_primary-danger_zen8d_198",
-      "primary-invert": "_button--theme_primary-invert_zen8d_216",
-      "secondary-muted": "_button--theme_secondary-muted_zen8d_234",
-      "secondary-info": "_button--theme_secondary-info_zen8d_256",
-      "secondary-invert": "_button--theme_secondary-invert_zen8d_278",
-      "tertiary-info": "_button--theme_tertiary-info_zen8d_297",
-      "tertiary-muted": "_button--theme_tertiary-muted_zen8d_316",
-      "tertiary-invert": "_button--theme_tertiary-invert_zen8d_331"
+      "primary-info": "_button--theme_primary-info_sbztf_181",
+      "primary-success": "_button--theme_primary-success_sbztf_193",
+      "primary-warning": "_button--theme_primary-warning_sbztf_205",
+      "primary-danger": "_button--theme_primary-danger_sbztf_217",
+      "primary-invert": "_button--theme_primary-invert_sbztf_229",
+      "secondary-muted": "_button--theme_secondary-muted_sbztf_241",
+      "secondary-info": "_button--theme_secondary-info_sbztf_254",
+      "secondary-invert": "_button--theme_secondary-invert_sbztf_267",
+      "tertiary-info": "_button--theme_tertiary-info_sbztf_280",
+      "tertiary-muted": "_button--theme_tertiary-muted_sbztf_292",
+      "tertiary-invert": "_button--theme_tertiary-invert_sbztf_303"
     },
     "active": {
-      "block": "_button--active_zen8d_151"
+      "block": "_button--active_sbztf_188"
     },
     "disabled": {
-      "block": "_button--disabled_zen8d_155"
+      "block": "_button--disabled_sbztf_315"
     },
+    "keyboard-focused": {
+      "block": "_button--keyboard-focused_sbztf_321"
+    },
     "neighbor-location": {
-      "right": "_button--neighbor-location_right_zen8d_347",
-      "both": "_button--neighbor-location_both_zen8d_350",
-      "left": "_button--neighbor-location_left_zen8d_359"
+      "right": "_button--neighbor-location_right_sbztf_325",
+      "both": "_button--neighbor-location_both_sbztf_330",
+      "left": "_button--neighbor-location_left_sbztf_335"
     }
   },
+  "spin": {
+    "block": "_button__spin_sbztf_41"
+  },
   "inner": {
-    "block": "_button__inner_zen8d_6",
+    "block": "_button__inner_sbztf_50",
     "loading": {
-      "block": "_button__inner--loading_zen8d_14"
+      "block": "_button__inner--loading_sbztf_58"
     }
   },
   "additional": {
-    "block": "_button__additional_zen8d_18"
+    "block": "_button__additional_sbztf_62"
   },
   "text": {
-    "block": "_button__text_zen8d_24"
-  },
-  "spin": {
-    "block": "_button__spin_zen8d_28"
+    "block": "_button__text_sbztf_68"
   }
@@ -111,8 +120,14 @@ };
     var head = window.document.head;
-    var style = window.document.createElement("style");
-    style.classList.add('_css-style');
-    style.innerHTML = "._button__inner_zen8d_6{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}._button__inner--loading_zen8d_14{visibility:hidden}._button__additional_zen8d_18{display:inline-flex;align-items:center;justify-content:center}._button__text_zen8d_24{display:inline-flex}._button__spin_zen8d_28{position:absolute;height:100%;width:100%;top:0;left:0}._button--size_s_zen8d_36{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_zen8d_36 ._button__text_zen8d_24{margin-left:4px;margin-right:4px}._button--size_s_zen8d_36 ._button__additional_zen8d_18:not(:only-child):first-child{margin-left:4px}._button--size_s_zen8d_36 ._button__additional_zen8d_18:not(:only-child):last-child{margin-right:4px}._button--size_s_zen8d_36 ._button__additional_zen8d_18:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_zen8d_63{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_zen8d_63 ._button__text_zen8d_24{margin-left:8px;margin-right:8px}._button--size_m_zen8d_63 ._button__additional_zen8d_18:not(:only-child):first-child{margin-left:8px}._button--size_m_zen8d_63 ._button__additional_zen8d_18:not(:only-child):last-child{margin-right:8px}._button--size_m_zen8d_63 ._button__additional_zen8d_18:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_zen8d_90{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_zen8d_90 ._button__text_zen8d_24{margin-left:8px;margin-right:8px}._button--size_l_zen8d_90 ._button__additional_zen8d_18:not(:only-child):first-child{margin-left:8px}._button--size_l_zen8d_90 ._button__additional_zen8d_18:not(:only-child):last-child{margin-right:8px}._button--size_l_zen8d_90 ._button__additional_zen8d_18:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_zen8d_117{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_zen8d_117 ._button__text_zen8d_24{margin-left:12px;margin-right:12px}._button--size_xl_zen8d_117 ._button__additional_zen8d_18:not(:only-child):first-child{margin-left:8px}._button--size_xl_zen8d_117 ._button__additional_zen8d_18:not(:only-child):last-child{margin-right:8px}._button--size_xl_zen8d_117 ._button__additional_zen8d_18:only-child{margin-left:-4px;margin-right:-4px}._button--theme_primary-info_zen8d_144{background-color:#2b94e1;color:#fff}._button--theme_primary-info_zen8d_144:hover{background-color:#0071bc}._button--theme_primary-info_zen8d_144._button--active_zen8d_151,._button--theme_primary-info_zen8d_144:active{background-color:#006bb3}._button--theme_primary-info_zen8d_144._button--disabled_zen8d_155,._button--theme_primary-info_zen8d_144._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_primary-info_zen8d_144._button--disabled_zen8d_155:active,._button--theme_primary-info_zen8d_144._button--disabled_zen8d_155:hover{background-color:#2b94e1}._button--theme_primary-success_zen8d_162{background-color:#4fae33;color:#fff}._button--theme_primary-success_zen8d_162:hover{background-color:#1d9c00}._button--theme_primary-success_zen8d_162._button--active_zen8d_151,._button--theme_primary-success_zen8d_162:active{background-color:#1c9400}._button--theme_primary-success_zen8d_162._button--disabled_zen8d_155,._button--theme_primary-success_zen8d_162._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_primary-success_zen8d_162._button--disabled_zen8d_155:active,._button--theme_primary-success_zen8d_162._button--disabled_zen8d_155:hover{background-color:#4fae33}._button--theme_primary-warning_zen8d_180{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_zen8d_180:hover{background-color:#c60}._button--theme_primary-warning_zen8d_180._button--active_zen8d_151,._button--theme_primary-warning_zen8d_180:active{background-color:#c26100}._button--theme_primary-warning_zen8d_180._button--disabled_zen8d_155,._button--theme_primary-warning_zen8d_180._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_primary-warning_zen8d_180._button--disabled_zen8d_155:active,._button--theme_primary-warning_zen8d_180._button--disabled_zen8d_155:hover{background-color:#ff7f00}._button--theme_primary-danger_zen8d_198{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_zen8d_198:hover{background-color:#d00000}._button--theme_primary-danger_zen8d_198._button--active_zen8d_151,._button--theme_primary-danger_zen8d_198:active{background-color:#c60000}._button--theme_primary-danger_zen8d_198._button--disabled_zen8d_155,._button--theme_primary-danger_zen8d_198._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_primary-danger_zen8d_198._button--disabled_zen8d_155:active,._button--theme_primary-danger_zen8d_198._button--disabled_zen8d_155:hover{background-color:#ed2d2d}._button--theme_primary-invert_zen8d_216{background-color:#fff;color:#333}._button--theme_primary-invert_zen8d_216:hover{background-color:#eee}._button--theme_primary-invert_zen8d_216._button--active_zen8d_151,._button--theme_primary-invert_zen8d_216:active{background-color:#e4e1e1}._button--theme_primary-invert_zen8d_216._button--disabled_zen8d_155,._button--theme_primary-invert_zen8d_216._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_primary-invert_zen8d_216._button--disabled_zen8d_155:active,._button--theme_primary-invert_zen8d_216._button--disabled_zen8d_155:hover{background-color:#fff}._button--theme_secondary-muted_zen8d_234{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_zen8d_234:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_zen8d_234._button--active_zen8d_151,._button--theme_secondary-muted_zen8d_234:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-muted_zen8d_234._button--disabled_zen8d_155,._button--theme_secondary-muted_zen8d_234._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_secondary-muted_zen8d_234._button--disabled_zen8d_155:active,._button--theme_secondary-muted_zen8d_234._button--disabled_zen8d_155:hover{background-color:rgba(166,175,179,.1)}._button--theme_secondary-muted_zen8d_234>._button__spin_zen8d_28 div:first-child{border-color:#666 #666 transparent transparent}._button--theme_secondary-info_zen8d_256{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_zen8d_256:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_zen8d_256._button--active_zen8d_151,._button--theme_secondary-info_zen8d_256:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-info_zen8d_256._button--disabled_zen8d_155,._button--theme_secondary-info_zen8d_256._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_secondary-info_zen8d_256._button--disabled_zen8d_155:active,._button--theme_secondary-info_zen8d_256._button--disabled_zen8d_155:hover{background-color:rgba(42,148,224,.05)}._button--theme_secondary-info_zen8d_256>._button__spin_zen8d_28 div:first-child{border-color:#2b94e1 #2b94e1 transparent transparent}._button--theme_secondary-invert_zen8d_278{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_zen8d_278:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_zen8d_278._button--active_zen8d_151,._button--theme_secondary-invert_zen8d_278:active{background-color:hsla(0,0%,100%,.3)}._button--theme_secondary-invert_zen8d_278._button--disabled_zen8d_155,._button--theme_secondary-invert_zen8d_278._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_secondary-invert_zen8d_278._button--disabled_zen8d_155:active,._button--theme_secondary-invert_zen8d_278._button--disabled_zen8d_155:hover{background-color:hsla(0,0%,100%,.05)}._button--theme_tertiary-info_zen8d_297{color:#0071bc}._button--theme_tertiary-info_zen8d_297:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_zen8d_297._button--active_zen8d_151,._button--theme_tertiary-info_zen8d_297:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-info_zen8d_297._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_tertiary-info_zen8d_297._button--disabled_zen8d_155:active,._button--theme_tertiary-info_zen8d_297._button--disabled_zen8d_155:hover{background-color:transparent}._button--theme_tertiary-info_zen8d_297>._button__spin_zen8d_28 div:first-child{border-color:#2b94e1 #2b94e1 transparent transparent}._button--theme_tertiary-muted_zen8d_316{color:#666}._button--theme_tertiary-muted_zen8d_316:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_zen8d_316._button--active_zen8d_151,._button--theme_tertiary-muted_zen8d_316:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-muted_zen8d_316._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_tertiary-muted_zen8d_316._button--disabled_zen8d_155:active,._button--theme_tertiary-muted_zen8d_316._button--disabled_zen8d_155:hover{background-color:transparent}._button--theme_tertiary-invert_zen8d_331{color:#fff}._button--theme_tertiary-invert_zen8d_331:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_zen8d_331._button--active_zen8d_151,._button--theme_tertiary-invert_zen8d_331:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-invert_zen8d_331._button--disabled_zen8d_155._button--active_zen8d_151,._button--theme_tertiary-invert_zen8d_331._button--disabled_zen8d_155:active,._button--theme_tertiary-invert_zen8d_331._button--disabled_zen8d_155:hover{background-color:transparent}._button--neighbor-location_both_zen8d_350[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_zen8d_350._button--theme_primary-invert_zen8d_216{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_zen8d_359[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_zen8d_359._button--theme_primary-invert_zen8d_216{border-left-color:rgba(0,0,0,.5)}";
-    head.appendChild(style);
+    var prevStyle = head.querySelector('._css-style');
+
+    if (prevStyle && prevStyle.insertAdjacentText) {
+      prevStyle.insertAdjacentText("beforeend", "._button_sbztf_3{display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:1px solid transparent;color:#666}._button_sbztf_3::-moz-focus-inner{border:none;padding:0}._button_sbztf_3:active,._button_sbztf_3:focus,._button_sbztf_3:hover{outline:0;text-decoration:none}._button__spin_sbztf_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_sbztf_50{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}._button__inner--loading_sbztf_58{visibility:hidden}._button__additional_sbztf_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_sbztf_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_sbztf_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_sbztf_73 ._button__text_sbztf_68{margin-left:4px;margin-right:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_sbztf_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_sbztf_100 ._button__text_sbztf_68{margin-left:8px;margin-right:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_sbztf_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_sbztf_127 ._button__text_sbztf_68{margin-left:8px;margin-right:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_sbztf_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_sbztf_154 ._button__text_sbztf_68{margin-left:12px;margin-right:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_sbztf_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_sbztf_181:hover{background-color:#0071bc}._button--theme_primary-info_sbztf_181._button--active_sbztf_188,._button--theme_primary-info_sbztf_181:active{background-color:#006bb3}._button--theme_primary-success_sbztf_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_sbztf_193:hover{background-color:#1d9c00}._button--theme_primary-success_sbztf_193._button--active_sbztf_188,._button--theme_primary-success_sbztf_193:active{background-color:#1c9400}._button--theme_primary-warning_sbztf_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_sbztf_205:hover{background-color:#c60}._button--theme_primary-warning_sbztf_205._button--active_sbztf_188,._button--theme_primary-warning_sbztf_205:active{background-color:#c26100}._button--theme_primary-danger_sbztf_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_sbztf_217:hover{background-color:#d00000}._button--theme_primary-danger_sbztf_217._button--active_sbztf_188,._button--theme_primary-danger_sbztf_217:active{background-color:#c60000}._button--theme_primary-invert_sbztf_229{background-color:#fff;color:#333}._button--theme_primary-invert_sbztf_229:hover{background-color:#eee}._button--theme_primary-invert_sbztf_229._button--active_sbztf_188,._button--theme_primary-invert_sbztf_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_sbztf_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_sbztf_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_sbztf_241._button--active_sbztf_188,._button--theme_secondary-muted_sbztf_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_sbztf_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_sbztf_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_sbztf_254._button--active_sbztf_188,._button--theme_secondary-info_sbztf_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_sbztf_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_sbztf_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_sbztf_267._button--active_sbztf_188,._button--theme_secondary-invert_sbztf_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_sbztf_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_sbztf_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_sbztf_280._button--active_sbztf_188,._button--theme_tertiary-info_sbztf_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_sbztf_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_sbztf_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_sbztf_292._button--active_sbztf_188,._button--theme_tertiary-muted_sbztf_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_sbztf_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_sbztf_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_sbztf_303._button--active_sbztf_188,._button--theme_tertiary-invert_sbztf_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_sbztf_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_sbztf_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_sbztf_325._button--neighbor-location_right_sbztf_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_sbztf_330._button--neighbor-location_both_sbztf_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_sbztf_335._button--neighbor-location_left_sbztf_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}");
+    } else {
+      var style = window.document.createElement("style");
+      style.classList.add('_css-style');
+      style.innerHTML = "._button_sbztf_3{display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;border:1px solid transparent;color:#666}._button_sbztf_3::-moz-focus-inner{border:none;padding:0}._button_sbztf_3:active,._button_sbztf_3:focus,._button_sbztf_3:hover{outline:0;text-decoration:none}._button__spin_sbztf_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_sbztf_50{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;height:100%;width:100%}._button__inner--loading_sbztf_58{visibility:hidden}._button__additional_sbztf_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_sbztf_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_sbztf_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_sbztf_73 ._button__text_sbztf_68{margin-left:4px;margin-right:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:4px}._button--size_s_sbztf_73 ._button__additional_sbztf_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_sbztf_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_sbztf_100 ._button__text_sbztf_68{margin-left:8px;margin-right:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:8px}._button--size_m_sbztf_100 ._button__additional_sbztf_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_sbztf_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_sbztf_127 ._button__text_sbztf_68{margin-left:8px;margin-right:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:8px}._button--size_l_sbztf_127 ._button__additional_sbztf_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_sbztf_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_sbztf_154 ._button__text_sbztf_68{margin-left:12px;margin-right:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_sbztf_154 ._button__additional_sbztf_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_sbztf_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_sbztf_181:hover{background-color:#0071bc}._button--theme_primary-info_sbztf_181._button--active_sbztf_188,._button--theme_primary-info_sbztf_181:active{background-color:#006bb3}._button--theme_primary-success_sbztf_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_sbztf_193:hover{background-color:#1d9c00}._button--theme_primary-success_sbztf_193._button--active_sbztf_188,._button--theme_primary-success_sbztf_193:active{background-color:#1c9400}._button--theme_primary-warning_sbztf_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_sbztf_205:hover{background-color:#c60}._button--theme_primary-warning_sbztf_205._button--active_sbztf_188,._button--theme_primary-warning_sbztf_205:active{background-color:#c26100}._button--theme_primary-danger_sbztf_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_sbztf_217:hover{background-color:#d00000}._button--theme_primary-danger_sbztf_217._button--active_sbztf_188,._button--theme_primary-danger_sbztf_217:active{background-color:#c60000}._button--theme_primary-invert_sbztf_229{background-color:#fff;color:#333}._button--theme_primary-invert_sbztf_229:hover{background-color:#eee}._button--theme_primary-invert_sbztf_229._button--active_sbztf_188,._button--theme_primary-invert_sbztf_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_sbztf_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_sbztf_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_sbztf_241._button--active_sbztf_188,._button--theme_secondary-muted_sbztf_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_sbztf_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_sbztf_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_sbztf_254._button--active_sbztf_188,._button--theme_secondary-info_sbztf_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_sbztf_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_sbztf_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_sbztf_267._button--active_sbztf_188,._button--theme_secondary-invert_sbztf_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_sbztf_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_sbztf_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_sbztf_280._button--active_sbztf_188,._button--theme_tertiary-info_sbztf_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_sbztf_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_sbztf_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_sbztf_292._button--active_sbztf_188,._button--theme_tertiary-muted_sbztf_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_sbztf_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_sbztf_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_sbztf_303._button--active_sbztf_188,._button--theme_tertiary-invert_sbztf_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_sbztf_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_sbztf_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_sbztf_325._button--neighbor-location_right_sbztf_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_sbztf_330._button--neighbor-location_both_sbztf_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_sbztf_335._button--neighbor-location_left_sbztf_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}";
+      head.appendChild(style);
+    }
   }
-})('./button.style.css');
+})();
 
@@ -143,2 +158,7 @@ function block() {
 
+block['keyboardFocused'] = function () {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
+  return data['block']['keyboard-focused'][value];
+};
+
 block['neighborLocation'] = function () {
@@ -149,2 +169,6 @@ var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
 
+function spin() {
+  return data['spin']['block'];
+}
+
 function inner() {
@@ -167,6 +191,3 @@ return data['inner']['block'];
 
-function spin() {
-  return data['spin']['block'];
-}
-
+var enhance = compose(WithKeyboardFocus(), neighborLocation.WithNeighborLocation());
 var MAP_USE_DEFAULT_THEME = {
@@ -264,2 +285,3 @@ primary: 'info',
           loading = _this$props3.loading,
+          active = _this$props3.active,
           children = _this$props3.children,
@@ -269,3 +291,6 @@ size = _this$props3.size,
           className = _this$props3.className,
-          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "children", "size", "use", "className"]);
+          tabIndex = _this$props3.tabIndex,
+          keyboardFocused = _this$props3.keyboardFocused,
+          neighborLocation = _this$props3.neighborLocation,
+          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "active", "children", "size", "use", "className", "tabIndex", "keyboardFocused", "neighborLocation"]);
 
@@ -276,6 +301,19 @@ var disabled = loading || disabledProp;
       var styles = {
-        button: cn(block(), (_cn = {}, _defineProperty(_cn, block.theme(useTheme), use && theme), _defineProperty(_cn, block.size(size), size), _cn), className),
+        button: cn(block(), (_cn = {}, _defineProperty(_cn, block.theme(useTheme), use && theme), _defineProperty(_cn, block.size(size), size), _defineProperty(_cn, block.active(), active), _defineProperty(_cn, block.neighborLocation(neighborLocation), neighborLocation), _defineProperty(_cn, block.keyboardFocused(), keyboardFocused), _defineProperty(_cn, block.disabled(), disabled), _cn), className),
         inner: cn(inner(), _defineProperty({}, inner.loading(), loading))
-      };
-      return React__default.createElement(Control, Object.assign({}, other, {
+      }; // TODO: move utils
+
+      var childArr = React__default.Children.toArray(children);
+      var isWrap = false;
+
+      if (childArr.length === 1) {
+        isWrap = true;
+
+        if (React__default.isValidElement(childArr[0])) {
+          isWrap = !(childArr[0].type === React__default.Fragment || childArr[0].type === Button.Text || childArr[0].type === Button.Addon);
+        }
+      }
+
+      return React__default.createElement(flexBox.Box, Object.assign({}, other, {
+        tabIndex: disabled ? -1 : tabIndex,
         disabled: disabled,
@@ -285,8 +323,9 @@ className: styles.button
         className: styles.inner
-      }, React__default.Children.toArray(children).length === 1 ? React__default.createElement(Button.Text, null, children) : children), loading && React__default.createElement(SpinButton, {
+      }, isWrap ? React__default.createElement(Button.Text, null, children) : children), loading && React__default.createElement("span", {
+        className: spin()
+      }, React__default.createElement(SpinButton, {
         centered: true,
         size: size,
-        theme: useTheme,
-        className: spin()
-      }));
+        theme: useTheme
+      })));
     }
@@ -302,9 +341,12 @@ }]);
   size: 'm',
-  type: 'button'
+  type: 'button',
+  tag: 'button',
+  tabIndex: 0
 };
 Button.Addon = ButtonAddon;
 Button.Text = ButtonText;
+var Button$1 = enhance(Button);
 
-exports.default = Button;
 exports.MAP_USE_DEFAULT_THEME = MAP_USE_DEFAULT_THEME;
+exports.default = Button$1;
 //# sourceMappingURL=index.js.map

lib/SpinButton.d.ts

@@ -15,3 +15,6 @@ import React from 'react';
     'secondary-invert' = "invert",
-    'tertiary-invert' = "invert"
+    'secondary-muted' = "gray40",
+    'secondary-info' = "light-blue",
+    'tertiary-invert' = "invert",
+    'tertiary-info' = "light-blue"
 }
@@ -18,0 +21,0 @@ export interface ISpinButtonProps {

package.json

 {
   "name": "@semcore/button",
   "description": "SEMRush Button Component",
-  "version": "2.1.0",
+  "version": "2.1.7",
   "main": "lib/index.js",
@@ -12,15 +12,15 @@ "module": "lib/index.es.js",
     "build": "rollup --config=node:rollup-config-ts",
-    "test": "jest"
+    "test": "jest --no-cache"
   },
   "dependencies": {
-    "@semcore/spin": "^1.2.0",
-    "@semcore/control": "^1.0.0",
-    "@semcore/utils": "^2.0.0",
-    "@semcore/flex-box": "^3.0.0",
-    "@types/react": "^16.7.6",
-    "@babel/runtime": "^7.1.5",
-    "classnames": "^2.2.5"
+    "@semcore/spin": "^2.0",
+    "@semcore/utils": "^2.4",
+    "@semcore/neighbor-location": "^1.0",
+    "@semcore/flex-box": "^3.1",
+    "@types/react": "^16.8",
+    "@babel/runtime": "^7.5",
+    "classnames": "^2.2"
   },
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.0"
   },
@@ -30,3 +30,3 @@ "devDependencies": {
     "jest-preset-ui": "*",
-    "react": "^16.4.0",
+    "react": "^16.0",
     "rollup-config-react": "*"
@@ -33,0 +33,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

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

Improved metrics

Total package byte prevSize

102481

increased by15.45%

Lines of code

1242

increased by11.59%

Worsened metrics

Number of low supply chain risk alerts

5

increased by66.67%

Dependency changes

• + Added@semcore/neighbor-location@^1.0

• + Added@semcore/paint@3.3.0(transitive)

• + Added@semcore/spin@2.2.1(transitive)

• - Removed@semcore/control@^1.0.0

• - Removed@semcore/control@1.1.2(transitive)

• - Removed@semcore/spin@1.2.0(transitive)

• Updated@babel/runtime@^7.5

• Updated@semcore/flex-box@^3.1

• Updated@semcore/spin@^2.0

• Updated@semcore/utils@^2.4

• Updated@types/react@^16.8

• Updatedclassnames@^2.2