@semcore/button - npm Package Compare versions

Comparing version 2.1.13 to 2.5.1

CHANGELOG.md

@@ -5,5 +5,52 @@ # Changelog
 
+## [2.5.1] - 2020-02-14
+
+### Added
+
+- [theme] Обновили стили `<Button use="tertiary">` для `sellerly`
+
+## [2.5.0] - 2020-02-13
+
+### Added
+
+- Добавлена тема `sellerly`, фокус у контрола по умолчанию цвета `light-ultramarine`
+
+## [2.4.1] - 2019-12-17
+
+### Fixed
+
+- Исправлен транспайл цветовых переменных для стилей без префиксов (build.css)
+
+## [2.4.0] - 2019-12-12
+
+### Added
+
+- Появилась возможность добавления различных стилистических тем через css переменные
+- Появилась возможность оптицонально подключать адаптивноссть
+- Появилась возможность изолировать стили даже в пределах одной страницы
+- Добавлено прокидываение классов на `Spin` внутри кнопки
+
+### Changed
+
+- Изменен алгоритм вставки стилей в head
+
+### Removed
+
+- Убраны относительные единицы измерения(rem), которые использовались для адаптивности
+
+## [2.3.0] - 2019-11-14
+
+### Added
+
+- Добавлена адаптивность на маленьких экранах(<768px)
+
+## [2.2.0] - 2019-09-30
+
+### Added
+
+- Добавлен `forwardRef` на компонент
+
 ## [2.1.13] - 2019-09-30
 
-### Change
+### Changed
 
@@ -20,3 +67,3 @@ - Нужные зависимости перенесены в `utils`, размер должен стать меньше
 
-### Change
+### Changed
 
@@ -23,0 +70,0 @@ - Обновлены `utils`

lib/Button.d.ts

@@ -9,5 +9,6 @@ import React, { PureComponent } from 'react';
 export interface IButtonProps extends IBoxProps {
-    /** Тип использования кнопки
+    /**
+     *  Тип использования кнопки
      * @default secondary
-     * */
+     */
     use?: 'primary' | 'secondary' | 'tertiary' | false;
@@ -18,5 +19,6 @@ /** Тема кнопки */
     active?: boolean;
-    /** Размер кнопки
+    /**
+     *  Размер кнопки
      * @default m
-     * */
+     */
     size?: 'xl' | 'l' | 'm' | 's' | false;
@@ -34,3 +36,3 @@ /** Отключенная кнопки */
 }
-declare class ButtonAddon extends PureComponent<IButtonAddonProps & React.HTMLAttributes<HTMLSpanElement | any>> {
+declare class ButtonAddon extends PureComponent<IBoxProps & React.HTMLAttributes<any>> {
     static displayName: string;
@@ -47,3 +49,3 @@ static defaultProps: Partial<IButtonAddonProps>;
 }
-declare class Button extends PureComponent<IButtonProps & React.HTMLAttributes<HTMLButtonElement | any> & React.LinkHTMLAttributes<any>> {
+declare class Button extends PureComponent<IButtonProps & React.HTMLAttributes<any> & React.LinkHTMLAttributes<any>> {
     static displayName: string;
@@ -50,0 +52,0 @@ static defaultProps: {

lib/index.es.js

@@ -13,5 +13,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { WithNeighborLocation } from '@semcore/neighbor-location';
+import WithRef from '@semcore/utils/lib/enhances/WithRef';
 import compose from '@semcore/utils/lib/compose';
 import addonText from '@semcore/utils/lib/addonText';
 import Spin from '@semcore/spin';
+import injectStyle from '@semcore/utils/lib/injectStyle';
 
@@ -44,4 +46,3 @@ var SPIN_SIZE_MAP;
       size = props.size,
-      className = props.className,
-      others = _objectWithoutProperties(props, ["theme", "size", "className"]);
+      others = _objectWithoutProperties(props, ["theme", "size"]);
 
@@ -54,128 +55,86 @@ return React.createElement(Spin, Object.assign({
 
-var data = {
-  "block": {
-    "block": "_button_1upc8_3",
-    "size": {
-      "s": "_button--size_s_1upc8_73",
-      "m": "_button--size_m_1upc8_100",
-      "l": "_button--size_l_1upc8_127",
-      "xl": "_button--size_xl_1upc8_154"
-    },
-    "theme": {
-      "primary-info": "_button--theme_primary-info_1upc8_181",
-      "primary-success": "_button--theme_primary-success_1upc8_193",
-      "primary-warning": "_button--theme_primary-warning_1upc8_205",
-      "primary-danger": "_button--theme_primary-danger_1upc8_217",
-      "primary-invert": "_button--theme_primary-invert_1upc8_229",
-      "secondary-muted": "_button--theme_secondary-muted_1upc8_241",
-      "secondary-info": "_button--theme_secondary-info_1upc8_254",
-      "secondary-invert": "_button--theme_secondary-invert_1upc8_267",
-      "tertiary-info": "_button--theme_tertiary-info_1upc8_280",
-      "tertiary-muted": "_button--theme_tertiary-muted_1upc8_292",
-      "tertiary-invert": "_button--theme_tertiary-invert_1upc8_303"
-    },
-    "active": {
-      "block": "_button--active_1upc8_188"
-    },
-    "disabled": {
-      "block": "_button--disabled_1upc8_315"
-    },
-    "keyboard-focused": {
-      "block": "_button--keyboard-focused_1upc8_321"
-    },
-    "neighbor-location": {
-      "right": "_button--neighbor-location_right_1upc8_325",
-      "both": "_button--neighbor-location_both_1upc8_330",
-      "left": "_button--neighbor-location_left_1upc8_335"
-    }
-  },
-  "spin": {
-    "block": "_button__spin_1upc8_41"
-  },
-  "inner": {
-    "block": "_button__inner_1upc8_50",
-    "loading": {
-      "block": "_button__inner--loading_1upc8_58"
-    }
-  },
-  "additional": {
-    "block": "_button__additional_1upc8_62"
-  },
-  "text": {
-    "block": "_button__text_1upc8_68"
+(function cssModulesFnInject(_path, _pathMedia) {
+  if (_path || _pathMedia) {
+    injectStyle("._button_skuyq_gg_{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_skuyq_gg_::-moz-focus-inner{padding:0;border:none}._button_skuyq_gg_:active,._button_skuyq_gg_:focus,._button_skuyq_gg_:hover{outline:0;text-decoration:none}._button__spin_1nubv_gg_{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_1wuz6_gg_{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_10oyp_gg_{visibility:hidden}._button__additional_nf1jh_gg_{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_9d742_gg_{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_1g5qz_gg_{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_1g5qz_gg_ ._button__text_9d742_gg_{margin-left:4px;margin-right:4px}._button--size_s_1g5qz_gg_ ._button__additional_nf1jh_gg_:not(:only-child):first-child{margin-left:4px}._button--size_s_1g5qz_gg_ ._button__additional_nf1jh_gg_:not(:only-child):last-child{margin-right:4px}._button--size_s_1g5qz_gg_ ._button__additional_nf1jh_gg_:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_a1qmq_gg_{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_a1qmq_gg_ ._button__text_9d742_gg_{margin-left:8px;margin-right:8px}._button--size_m_a1qmq_gg_ ._button__additional_nf1jh_gg_:not(:only-child):first-child{margin-left:8px}._button--size_m_a1qmq_gg_ ._button__additional_nf1jh_gg_:not(:only-child):last-child{margin-right:8px}._button--size_m_a1qmq_gg_ ._button__additional_nf1jh_gg_:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_dfvrr_gg_{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_dfvrr_gg_ ._button__text_9d742_gg_{margin-left:8px;margin-right:8px}._button--size_l_dfvrr_gg_ ._button__additional_nf1jh_gg_:not(:only-child):first-child{margin-left:8px}._button--size_l_dfvrr_gg_ ._button__additional_nf1jh_gg_:not(:only-child):last-child{margin-right:8px}._button--size_l_dfvrr_gg_ ._button__additional_nf1jh_gg_:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_1mrez_gg_{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_1mrez_gg_ ._button__text_9d742_gg_{margin-left:12px;margin-right:12px}._button--size_xl_1mrez_gg_ ._button__additional_nf1jh_gg_:not(:only-child):first-child{margin-left:12px}._button--size_xl_1mrez_gg_ ._button__additional_nf1jh_gg_:not(:only-child):last-child{margin-right:12px}._button--size_xl_1mrez_gg_ ._button__additional_nf1jh_gg_:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_1pye3_gg_{color:#fff;background-color:#2b94e1}._button--theme_primary-info_1pye3_gg_:hover{background-color:#0071bc}._button--theme_primary-info_1pye3_gg_._button--active_1hrx3_gg_,._button--theme_primary-info_1pye3_gg_:active{background-color:#006bb3}._button--theme_primary-success_liefi_gg_{color:#fff;background-color:#4fae33}._button--theme_primary-success_liefi_gg_:hover{background-color:#1d9c00}._button--theme_primary-success_liefi_gg_._button--active_1hrx3_gg_,._button--theme_primary-success_liefi_gg_:active{background-color:#1c9400}._button--theme_primary-warning_na6xg_gg_{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_na6xg_gg_:hover{background-color:#c60}._button--theme_primary-warning_na6xg_gg_._button--active_1hrx3_gg_,._button--theme_primary-warning_na6xg_gg_:active{background-color:#c26100}._button--theme_primary-danger_1a2o8_gg_{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_1a2o8_gg_:hover{background-color:#d00000}._button--theme_primary-danger_1a2o8_gg_._button--active_1hrx3_gg_,._button--theme_primary-danger_1a2o8_gg_:active{background-color:#c60000}._button--theme_primary-invert_w80s8_gg_{background-color:#fff;color:#333}._button--theme_primary-invert_w80s8_gg_:hover{background-color:#eee}._button--theme_primary-invert_w80s8_gg_._button--active_1hrx3_gg_,._button--theme_primary-invert_w80s8_gg_:active{background-color:#e4e1e1}._button--theme_secondary-muted_9mq4x_gg_{color:#666;border-color:#a6b0b3;background-color:rgba(166,176,179,.1)}._button--theme_secondary-muted_9mq4x_gg_:hover{background-color:rgba(166,176,179,.2)}._button--theme_secondary-muted_9mq4x_gg_._button--active_1hrx3_gg_,._button--theme_secondary-muted_9mq4x_gg_:active{background-color:rgba(166,176,179,.3)}._button--theme_secondary-info_10emb_gg_{background-color:rgba(43,148,225,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_10emb_gg_:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_10emb_gg_._button--active_1hrx3_gg_,._button--theme_secondary-info_10emb_gg_:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_1czzg_gg_{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_1czzg_gg_:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_1czzg_gg_._button--active_1hrx3_gg_,._button--theme_secondary-invert_1czzg_gg_:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_ll2lv_gg_{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_ll2lv_gg_:hover{background-color:rgba(43,148,225,.2)}._button--theme_tertiary-info_ll2lv_gg_._button--active_1hrx3_gg_,._button--theme_tertiary-info_ll2lv_gg_:active{background-color:rgba(43,148,225,.3)}._button--theme_tertiary-muted_z0hzp_gg_{color:#666;background-color:transparent}._button--theme_tertiary-muted_z0hzp_gg_:hover{background-color:rgba(166,176,179,.2)}._button--theme_tertiary-muted_z0hzp_gg_._button--active_1hrx3_gg_,._button--theme_tertiary-muted_z0hzp_gg_:active{background-color:rgba(166,176,179,.3)}._button--theme_tertiary-invert_i7lmv_gg_{color:#fff;background-color:transparent}._button--theme_tertiary-invert_i7lmv_gg_:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_i7lmv_gg_._button--active_1hrx3_gg_,._button--theme_tertiary-invert_i7lmv_gg_:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_e06dj_gg_{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_1url4_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}._button--neighbor-location_right_m7no7_gg_._button--neighbor-location_right_m7no7_gg_{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_1sdmh_gg_._button--neighbor-location_both_1sdmh_gg_{border-radius:0;margin-left:-1px}._button--neighbor-location_left_1qj10_gg_._button--neighbor-location_left_1qj10_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_1sdmh_gg_[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_1sdmh_gg_._button--theme_primary-invert_w80s8_gg_{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_1qj10_gg_[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_1qj10_gg_._button--theme_primary-invert_w80s8_gg_{border-left-color:rgba(0,0,0,.5)}");
   }
-};
+})("@semcore/button/lib/button.style.css", "@semcore/button/lib/button-media.style.css");
 
-(function cssModulesFnInject(_path) {
-  if (_path && typeof window !== 'undefined') {
-    var head = window.document.head;
-    var prevStyle = head.querySelector('._css-style');
-
-    if (prevStyle && prevStyle.insertAdjacentText) {
-      prevStyle.insertAdjacentText("beforeend", "._button_1upc8_3{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_1upc8_3::-moz-focus-inner{padding:0;border:none}._button_1upc8_3:active,._button_1upc8_3:focus,._button_1upc8_3:hover{outline:0;text-decoration:none}._button__spin_1upc8_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_1upc8_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_1upc8_58{visibility:hidden}._button__additional_1upc8_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_1upc8_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_1upc8_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_1upc8_73 ._button__text_1upc8_68{margin-left:4px;margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_1upc8_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_1upc8_100 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_1upc8_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_1upc8_127 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_1upc8_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_1upc8_154 ._button__text_1upc8_68{margin-left:12px;margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_1upc8_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_1upc8_181:hover{background-color:#0071bc}._button--theme_primary-info_1upc8_181._button--active_1upc8_188,._button--theme_primary-info_1upc8_181:active{background-color:#006bb3}._button--theme_primary-success_1upc8_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_1upc8_193:hover{background-color:#1d9c00}._button--theme_primary-success_1upc8_193._button--active_1upc8_188,._button--theme_primary-success_1upc8_193:active{background-color:#1c9400}._button--theme_primary-warning_1upc8_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_1upc8_205:hover{background-color:#c60}._button--theme_primary-warning_1upc8_205._button--active_1upc8_188,._button--theme_primary-warning_1upc8_205:active{background-color:#c26100}._button--theme_primary-danger_1upc8_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_1upc8_217:hover{background-color:#d00000}._button--theme_primary-danger_1upc8_217._button--active_1upc8_188,._button--theme_primary-danger_1upc8_217:active{background-color:#c60000}._button--theme_primary-invert_1upc8_229{background-color:#fff;color:#333}._button--theme_primary-invert_1upc8_229:hover{background-color:#eee}._button--theme_primary-invert_1upc8_229._button--active_1upc8_188,._button--theme_primary-invert_1upc8_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_1upc8_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_1upc8_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_1upc8_241._button--active_1upc8_188,._button--theme_secondary-muted_1upc8_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_1upc8_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_1upc8_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_1upc8_254._button--active_1upc8_188,._button--theme_secondary-info_1upc8_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_1upc8_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_1upc8_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_1upc8_267._button--active_1upc8_188,._button--theme_secondary-invert_1upc8_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_1upc8_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_1upc8_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_1upc8_280._button--active_1upc8_188,._button--theme_tertiary-info_1upc8_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_1upc8_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_1upc8_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_1upc8_292._button--active_1upc8_188,._button--theme_tertiary-muted_1upc8_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_1upc8_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_1upc8_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_1upc8_303._button--active_1upc8_188,._button--theme_tertiary-invert_1upc8_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_1upc8_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_1upc8_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_1upc8_325._button--neighbor-location_right_1upc8_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_1upc8_330._button--neighbor-location_both_1upc8_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_1upc8_335._button--neighbor-location_left_1upc8_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_1upc8_330[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_1upc8_330._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_1upc8_335[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_1upc8_335._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}");
-    } else {
-      var style = window.document.createElement("style");
-      style.classList.add('_css-style');
-      style.innerHTML = "._button_1upc8_3{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_1upc8_3::-moz-focus-inner{padding:0;border:none}._button_1upc8_3:active,._button_1upc8_3:focus,._button_1upc8_3:hover{outline:0;text-decoration:none}._button__spin_1upc8_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_1upc8_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_1upc8_58{visibility:hidden}._button__additional_1upc8_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_1upc8_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_1upc8_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_1upc8_73 ._button__text_1upc8_68{margin-left:4px;margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_1upc8_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_1upc8_100 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_1upc8_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_1upc8_127 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_1upc8_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_1upc8_154 ._button__text_1upc8_68{margin-left:12px;margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_1upc8_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_1upc8_181:hover{background-color:#0071bc}._button--theme_primary-info_1upc8_181._button--active_1upc8_188,._button--theme_primary-info_1upc8_181:active{background-color:#006bb3}._button--theme_primary-success_1upc8_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_1upc8_193:hover{background-color:#1d9c00}._button--theme_primary-success_1upc8_193._button--active_1upc8_188,._button--theme_primary-success_1upc8_193:active{background-color:#1c9400}._button--theme_primary-warning_1upc8_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_1upc8_205:hover{background-color:#c60}._button--theme_primary-warning_1upc8_205._button--active_1upc8_188,._button--theme_primary-warning_1upc8_205:active{background-color:#c26100}._button--theme_primary-danger_1upc8_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_1upc8_217:hover{background-color:#d00000}._button--theme_primary-danger_1upc8_217._button--active_1upc8_188,._button--theme_primary-danger_1upc8_217:active{background-color:#c60000}._button--theme_primary-invert_1upc8_229{background-color:#fff;color:#333}._button--theme_primary-invert_1upc8_229:hover{background-color:#eee}._button--theme_primary-invert_1upc8_229._button--active_1upc8_188,._button--theme_primary-invert_1upc8_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_1upc8_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_1upc8_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_1upc8_241._button--active_1upc8_188,._button--theme_secondary-muted_1upc8_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_1upc8_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_1upc8_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_1upc8_254._button--active_1upc8_188,._button--theme_secondary-info_1upc8_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_1upc8_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_1upc8_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_1upc8_267._button--active_1upc8_188,._button--theme_secondary-invert_1upc8_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_1upc8_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_1upc8_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_1upc8_280._button--active_1upc8_188,._button--theme_tertiary-info_1upc8_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_1upc8_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_1upc8_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_1upc8_292._button--active_1upc8_188,._button--theme_tertiary-muted_1upc8_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_1upc8_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_1upc8_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_1upc8_303._button--active_1upc8_188,._button--theme_tertiary-invert_1upc8_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_1upc8_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_1upc8_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_1upc8_325._button--neighbor-location_right_1upc8_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_1upc8_330._button--neighbor-location_both_1upc8_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_1upc8_335._button--neighbor-location_left_1upc8_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_1upc8_330[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_1upc8_330._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_1upc8_335[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_1upc8_335._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}";
-      head.appendChild(style);
-    }
-  }
-})('./button.style.css');
-
 function block() {
-  return data['block']['block'];
+  return '_button_skuyq_gg_';
 }
 
-block['size'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['size'][value];
+block['size'] = function (value) {
+  return {
+    "s": "_button--size_s_1g5qz_gg_",
+    "m": "_button--size_m_a1qmq_gg_",
+    "l": "_button--size_l_dfvrr_gg_",
+    "xl": "_button--size_xl_1mrez_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
-block['theme'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['theme'][value];
+block['theme'] = function (value) {
+  return {
+    "primary-info": "_button--theme_primary-info_1pye3_gg_",
+    "primary-success": "_button--theme_primary-success_liefi_gg_",
+    "primary-warning": "_button--theme_primary-warning_na6xg_gg_",
+    "primary-danger": "_button--theme_primary-danger_1a2o8_gg_",
+    "primary-invert": "_button--theme_primary-invert_w80s8_gg_",
+    "secondary-muted": "_button--theme_secondary-muted_9mq4x_gg_",
+    "secondary-info": "_button--theme_secondary-info_10emb_gg_",
+    "secondary-invert": "_button--theme_secondary-invert_1czzg_gg_",
+    "tertiary-info": "_button--theme_tertiary-info_ll2lv_gg_",
+    "tertiary-muted": "_button--theme_tertiary-muted_z0hzp_gg_",
+    "tertiary-invert": "_button--theme_tertiary-invert_i7lmv_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
-block['active'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['active'][value];
+block['active'] = function (value) {
+  return {
+    "block": "_button--active_1hrx3_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
-block['disabled'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['disabled'][value];
+block['disabled'] = function (value) {
+  return {
+    "block": "_button--disabled_e06dj_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
-block['keyboardFocused'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['keyboard-focused'][value];
+block['keyboardFocused'] = function (value) {
+  return {
+    "block": "_button--keyboard-focused_1url4_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
-block['neighborLocation'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['neighbor-location'][value];
+block['neighborLocation'] = function (value) {
+  return {
+    "right": "_button--neighbor-location_right_m7no7_gg_",
+    "both": "_button--neighbor-location_both_1sdmh_gg_",
+    "left": "_button--neighbor-location_left_1qj10_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
 function spin() {
-  return data['spin']['block'];
+  return '_button__spin_1nubv_gg_';
 }
 
 function inner() {
-  return data['inner']['block'];
+  return '_button__inner_1wuz6_gg_';
 }
 
-inner['loading'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['inner']['loading'][value];
+inner['loading'] = function (value) {
+  return {
+    "block": "_button__inner--loading_10oyp_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
 function additional() {
-  return data['additional']['block'];
+  return '_button__additional_nf1jh_gg_';
 }
 
 function text() {
-  return data['text']['block'];
+  return '_button__text_9d742_gg_';
 }
 
-var enhance = compose(WithKeyboardFocus(), WithNeighborLocation());
+var enhance = compose(WithRef(), WithKeyboardFocus(), WithNeighborLocation());
 var MAP_USE_DEFAULT_THEME = {
@@ -203,7 +162,9 @@ primary: 'info',
           className = _this$props.className,
-          other = _objectWithoutProperties(_this$props, ["className"]);
+          forwardedRef = _this$props.forwardedRef,
+          other = _objectWithoutProperties(_this$props, ["className", "forwardedRef"]);
 
       var classes = cn(additional(), className);
       return React.createElement(Box, Object.assign({
-        className: classes
+        className: classes,
+        ref: forwardedRef
       }, other));
@@ -237,7 +198,9 @@ }
           className = _this$props2.className,
-          other = _objectWithoutProperties(_this$props2, ["className"]);
+          forwardedRef = _this$props2.forwardedRef,
+          other = _objectWithoutProperties(_this$props2, ["className", "forwardedRef"]);
 
       var classes = cn(text(), className);
       return React.createElement(Box, Object.assign({
-        className: classes
+        className: classes,
+        ref: forwardedRef
       }, other));
@@ -283,3 +246,4 @@ }
           neighborLocation = _this$props3.neighborLocation,
-          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "active", "children", "size", "use", "className", "tabIndex", "keyboardFocused", "neighborLocation"]);
+          forwardedRef = _this$props3.forwardedRef,
+          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "active", "children", "size", "use", "className", "tabIndex", "keyboardFocused", "neighborLocation", "forwardedRef"]);
 
@@ -296,3 +260,4 @@ var disabled = loading || disabledProp;
         disabled: disabled,
-        className: styles.button
+        className: styles.button,
+        ref: forwardedRef
       }), React.createElement("span", {
@@ -321,4 +286,4 @@ className: styles.inner
 };
-Button.Addon = ButtonAddon;
-Button.Text = ButtonText;
+Button.Addon = WithRef()(ButtonAddon);
+Button.Text = WithRef()(ButtonText);
 var Button$1 = enhance(Button);
@@ -325,0 +290,0 @@

lib/index.js

@@ -20,5 +20,7 @@ 'use strict';
 var neighborLocation = require('@semcore/neighbor-location');
+var WithRef = _interopDefault(require('@semcore/utils/lib/enhances/WithRef'));
 var compose = _interopDefault(require('@semcore/utils/lib/compose'));
 var addonText = _interopDefault(require('@semcore/utils/lib/addonText'));
 var Spin = _interopDefault(require('@semcore/spin'));
+var injectStyle = _interopDefault(require('@semcore/utils/lib/injectStyle'));
 
@@ -51,4 +53,3 @@ var SPIN_SIZE_MAP;
       size = props.size,
-      className = props.className,
-      others = _objectWithoutProperties(props, ["theme", "size", "className"]);
+      others = _objectWithoutProperties(props, ["theme", "size"]);
 
@@ -61,128 +62,86 @@ return React__default.createElement(Spin, Object.assign({
 
-var data = {
-  "block": {
-    "block": "_button_1upc8_3",
-    "size": {
-      "s": "_button--size_s_1upc8_73",
-      "m": "_button--size_m_1upc8_100",
-      "l": "_button--size_l_1upc8_127",
-      "xl": "_button--size_xl_1upc8_154"
-    },
-    "theme": {
-      "primary-info": "_button--theme_primary-info_1upc8_181",
-      "primary-success": "_button--theme_primary-success_1upc8_193",
-      "primary-warning": "_button--theme_primary-warning_1upc8_205",
-      "primary-danger": "_button--theme_primary-danger_1upc8_217",
-      "primary-invert": "_button--theme_primary-invert_1upc8_229",
-      "secondary-muted": "_button--theme_secondary-muted_1upc8_241",
-      "secondary-info": "_button--theme_secondary-info_1upc8_254",
-      "secondary-invert": "_button--theme_secondary-invert_1upc8_267",
-      "tertiary-info": "_button--theme_tertiary-info_1upc8_280",
-      "tertiary-muted": "_button--theme_tertiary-muted_1upc8_292",
-      "tertiary-invert": "_button--theme_tertiary-invert_1upc8_303"
-    },
-    "active": {
-      "block": "_button--active_1upc8_188"
-    },
-    "disabled": {
-      "block": "_button--disabled_1upc8_315"
-    },
-    "keyboard-focused": {
-      "block": "_button--keyboard-focused_1upc8_321"
-    },
-    "neighbor-location": {
-      "right": "_button--neighbor-location_right_1upc8_325",
-      "both": "_button--neighbor-location_both_1upc8_330",
-      "left": "_button--neighbor-location_left_1upc8_335"
-    }
-  },
-  "spin": {
-    "block": "_button__spin_1upc8_41"
-  },
-  "inner": {
-    "block": "_button__inner_1upc8_50",
-    "loading": {
-      "block": "_button__inner--loading_1upc8_58"
-    }
-  },
-  "additional": {
-    "block": "_button__additional_1upc8_62"
-  },
-  "text": {
-    "block": "_button__text_1upc8_68"
+(function cssModulesFnInject(_path, _pathMedia) {
+  if (_path || _pathMedia) {
+    injectStyle("._button_skuyq_gg_{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_skuyq_gg_::-moz-focus-inner{padding:0;border:none}._button_skuyq_gg_:active,._button_skuyq_gg_:focus,._button_skuyq_gg_:hover{outline:0;text-decoration:none}._button__spin_1nubv_gg_{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_1wuz6_gg_{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_10oyp_gg_{visibility:hidden}._button__additional_nf1jh_gg_{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_9d742_gg_{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_1g5qz_gg_{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_1g5qz_gg_ ._button__text_9d742_gg_{margin-left:4px;margin-right:4px}._button--size_s_1g5qz_gg_ ._button__additional_nf1jh_gg_:not(:only-child):first-child{margin-left:4px}._button--size_s_1g5qz_gg_ ._button__additional_nf1jh_gg_:not(:only-child):last-child{margin-right:4px}._button--size_s_1g5qz_gg_ ._button__additional_nf1jh_gg_:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_a1qmq_gg_{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_a1qmq_gg_ ._button__text_9d742_gg_{margin-left:8px;margin-right:8px}._button--size_m_a1qmq_gg_ ._button__additional_nf1jh_gg_:not(:only-child):first-child{margin-left:8px}._button--size_m_a1qmq_gg_ ._button__additional_nf1jh_gg_:not(:only-child):last-child{margin-right:8px}._button--size_m_a1qmq_gg_ ._button__additional_nf1jh_gg_:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_dfvrr_gg_{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_dfvrr_gg_ ._button__text_9d742_gg_{margin-left:8px;margin-right:8px}._button--size_l_dfvrr_gg_ ._button__additional_nf1jh_gg_:not(:only-child):first-child{margin-left:8px}._button--size_l_dfvrr_gg_ ._button__additional_nf1jh_gg_:not(:only-child):last-child{margin-right:8px}._button--size_l_dfvrr_gg_ ._button__additional_nf1jh_gg_:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_1mrez_gg_{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_1mrez_gg_ ._button__text_9d742_gg_{margin-left:12px;margin-right:12px}._button--size_xl_1mrez_gg_ ._button__additional_nf1jh_gg_:not(:only-child):first-child{margin-left:12px}._button--size_xl_1mrez_gg_ ._button__additional_nf1jh_gg_:not(:only-child):last-child{margin-right:12px}._button--size_xl_1mrez_gg_ ._button__additional_nf1jh_gg_:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_1pye3_gg_{color:#fff;background-color:#2b94e1}._button--theme_primary-info_1pye3_gg_:hover{background-color:#0071bc}._button--theme_primary-info_1pye3_gg_._button--active_1hrx3_gg_,._button--theme_primary-info_1pye3_gg_:active{background-color:#006bb3}._button--theme_primary-success_liefi_gg_{color:#fff;background-color:#4fae33}._button--theme_primary-success_liefi_gg_:hover{background-color:#1d9c00}._button--theme_primary-success_liefi_gg_._button--active_1hrx3_gg_,._button--theme_primary-success_liefi_gg_:active{background-color:#1c9400}._button--theme_primary-warning_na6xg_gg_{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_na6xg_gg_:hover{background-color:#c60}._button--theme_primary-warning_na6xg_gg_._button--active_1hrx3_gg_,._button--theme_primary-warning_na6xg_gg_:active{background-color:#c26100}._button--theme_primary-danger_1a2o8_gg_{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_1a2o8_gg_:hover{background-color:#d00000}._button--theme_primary-danger_1a2o8_gg_._button--active_1hrx3_gg_,._button--theme_primary-danger_1a2o8_gg_:active{background-color:#c60000}._button--theme_primary-invert_w80s8_gg_{background-color:#fff;color:#333}._button--theme_primary-invert_w80s8_gg_:hover{background-color:#eee}._button--theme_primary-invert_w80s8_gg_._button--active_1hrx3_gg_,._button--theme_primary-invert_w80s8_gg_:active{background-color:#e4e1e1}._button--theme_secondary-muted_9mq4x_gg_{color:#666;border-color:#a6b0b3;background-color:rgba(166,176,179,.1)}._button--theme_secondary-muted_9mq4x_gg_:hover{background-color:rgba(166,176,179,.2)}._button--theme_secondary-muted_9mq4x_gg_._button--active_1hrx3_gg_,._button--theme_secondary-muted_9mq4x_gg_:active{background-color:rgba(166,176,179,.3)}._button--theme_secondary-info_10emb_gg_{background-color:rgba(43,148,225,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_10emb_gg_:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_10emb_gg_._button--active_1hrx3_gg_,._button--theme_secondary-info_10emb_gg_:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_1czzg_gg_{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_1czzg_gg_:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_1czzg_gg_._button--active_1hrx3_gg_,._button--theme_secondary-invert_1czzg_gg_:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_ll2lv_gg_{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_ll2lv_gg_:hover{background-color:rgba(43,148,225,.2)}._button--theme_tertiary-info_ll2lv_gg_._button--active_1hrx3_gg_,._button--theme_tertiary-info_ll2lv_gg_:active{background-color:rgba(43,148,225,.3)}._button--theme_tertiary-muted_z0hzp_gg_{color:#666;background-color:transparent}._button--theme_tertiary-muted_z0hzp_gg_:hover{background-color:rgba(166,176,179,.2)}._button--theme_tertiary-muted_z0hzp_gg_._button--active_1hrx3_gg_,._button--theme_tertiary-muted_z0hzp_gg_:active{background-color:rgba(166,176,179,.3)}._button--theme_tertiary-invert_i7lmv_gg_{color:#fff;background-color:transparent}._button--theme_tertiary-invert_i7lmv_gg_:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_i7lmv_gg_._button--active_1hrx3_gg_,._button--theme_tertiary-invert_i7lmv_gg_:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_e06dj_gg_{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_1url4_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}._button--neighbor-location_right_m7no7_gg_._button--neighbor-location_right_m7no7_gg_{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_1sdmh_gg_._button--neighbor-location_both_1sdmh_gg_{border-radius:0;margin-left:-1px}._button--neighbor-location_left_1qj10_gg_._button--neighbor-location_left_1qj10_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_1sdmh_gg_[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_1sdmh_gg_._button--theme_primary-invert_w80s8_gg_{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_1qj10_gg_[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_1qj10_gg_._button--theme_primary-invert_w80s8_gg_{border-left-color:rgba(0,0,0,.5)}");
   }
-};
+})("@semcore/button/lib/button.style.css", "@semcore/button/lib/button-media.style.css");
 
-(function cssModulesFnInject(_path) {
-  if (_path && typeof window !== 'undefined') {
-    var head = window.document.head;
-    var prevStyle = head.querySelector('._css-style');
-
-    if (prevStyle && prevStyle.insertAdjacentText) {
-      prevStyle.insertAdjacentText("beforeend", "._button_1upc8_3{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_1upc8_3::-moz-focus-inner{padding:0;border:none}._button_1upc8_3:active,._button_1upc8_3:focus,._button_1upc8_3:hover{outline:0;text-decoration:none}._button__spin_1upc8_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_1upc8_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_1upc8_58{visibility:hidden}._button__additional_1upc8_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_1upc8_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_1upc8_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_1upc8_73 ._button__text_1upc8_68{margin-left:4px;margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_1upc8_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_1upc8_100 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_1upc8_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_1upc8_127 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_1upc8_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_1upc8_154 ._button__text_1upc8_68{margin-left:12px;margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_1upc8_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_1upc8_181:hover{background-color:#0071bc}._button--theme_primary-info_1upc8_181._button--active_1upc8_188,._button--theme_primary-info_1upc8_181:active{background-color:#006bb3}._button--theme_primary-success_1upc8_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_1upc8_193:hover{background-color:#1d9c00}._button--theme_primary-success_1upc8_193._button--active_1upc8_188,._button--theme_primary-success_1upc8_193:active{background-color:#1c9400}._button--theme_primary-warning_1upc8_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_1upc8_205:hover{background-color:#c60}._button--theme_primary-warning_1upc8_205._button--active_1upc8_188,._button--theme_primary-warning_1upc8_205:active{background-color:#c26100}._button--theme_primary-danger_1upc8_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_1upc8_217:hover{background-color:#d00000}._button--theme_primary-danger_1upc8_217._button--active_1upc8_188,._button--theme_primary-danger_1upc8_217:active{background-color:#c60000}._button--theme_primary-invert_1upc8_229{background-color:#fff;color:#333}._button--theme_primary-invert_1upc8_229:hover{background-color:#eee}._button--theme_primary-invert_1upc8_229._button--active_1upc8_188,._button--theme_primary-invert_1upc8_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_1upc8_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_1upc8_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_1upc8_241._button--active_1upc8_188,._button--theme_secondary-muted_1upc8_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_1upc8_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_1upc8_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_1upc8_254._button--active_1upc8_188,._button--theme_secondary-info_1upc8_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_1upc8_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_1upc8_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_1upc8_267._button--active_1upc8_188,._button--theme_secondary-invert_1upc8_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_1upc8_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_1upc8_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_1upc8_280._button--active_1upc8_188,._button--theme_tertiary-info_1upc8_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_1upc8_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_1upc8_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_1upc8_292._button--active_1upc8_188,._button--theme_tertiary-muted_1upc8_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_1upc8_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_1upc8_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_1upc8_303._button--active_1upc8_188,._button--theme_tertiary-invert_1upc8_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_1upc8_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_1upc8_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_1upc8_325._button--neighbor-location_right_1upc8_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_1upc8_330._button--neighbor-location_both_1upc8_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_1upc8_335._button--neighbor-location_left_1upc8_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_1upc8_330[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_1upc8_330._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_1upc8_335[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_1upc8_335._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}");
-    } else {
-      var style = window.document.createElement("style");
-      style.classList.add('_css-style');
-      style.innerHTML = "._button_1upc8_3{position:relative;display:inline-block;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;color:#666;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._button_1upc8_3::-moz-focus-inner{padding:0;border:none}._button_1upc8_3:active,._button_1upc8_3:focus,._button_1upc8_3:hover{outline:0;text-decoration:none}._button__spin_1upc8_41{position:absolute;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:flex}._button__inner_1upc8_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_1upc8_58{visibility:hidden}._button__additional_1upc8_62{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}._button__text_1upc8_68{display:-webkit-inline-box;display:inline-flex;line-height:1}._button--size_s_1upc8_73{height:18px;min-width:18px;border-radius:2px;font-size:10px}._button--size_s_1upc8_73 ._button__text_1upc8_68{margin-left:4px;margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:4px}._button--size_s_1upc8_73 ._button__additional_1upc8_62:only-child{margin-left:-2px;margin-right:-2px}._button--size_m_1upc8_100{height:26px;min-width:26px;border-radius:3px;font-size:12px}._button--size_m_1upc8_100 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_m_1upc8_100 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_l_1upc8_127{height:32px;min-width:32px;border-radius:4px;font-size:14px}._button--size_l_1upc8_127 ._button__text_1upc8_68{margin-left:8px;margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:8px}._button--size_l_1upc8_127 ._button__additional_1upc8_62:only-child{margin-left:-4px;margin-right:-4px}._button--size_xl_1upc8_154{height:42px;min-width:42px;border-radius:5px;font-size:16px}._button--size_xl_1upc8_154 ._button__text_1upc8_68{margin-left:12px;margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):first-child{margin-left:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:not(:only-child):last-child{margin-right:12px}._button--size_xl_1upc8_154 ._button__additional_1upc8_62:only-child{margin-left:-6px;margin-right:-6px}._button--theme_primary-info_1upc8_181{background-color:#2b94e1;color:#fff}._button--theme_primary-info_1upc8_181:hover{background-color:#0071bc}._button--theme_primary-info_1upc8_181._button--active_1upc8_188,._button--theme_primary-info_1upc8_181:active{background-color:#006bb3}._button--theme_primary-success_1upc8_193{background-color:#4fae33;color:#fff}._button--theme_primary-success_1upc8_193:hover{background-color:#1d9c00}._button--theme_primary-success_1upc8_193._button--active_1upc8_188,._button--theme_primary-success_1upc8_193:active{background-color:#1c9400}._button--theme_primary-warning_1upc8_205{background-color:#ff7f00;color:#fff}._button--theme_primary-warning_1upc8_205:hover{background-color:#c60}._button--theme_primary-warning_1upc8_205._button--active_1upc8_188,._button--theme_primary-warning_1upc8_205:active{background-color:#c26100}._button--theme_primary-danger_1upc8_217{background-color:#ed2d2d;color:#fff}._button--theme_primary-danger_1upc8_217:hover{background-color:#d00000}._button--theme_primary-danger_1upc8_217._button--active_1upc8_188,._button--theme_primary-danger_1upc8_217:active{background-color:#c60000}._button--theme_primary-invert_1upc8_229{background-color:#fff;color:#333}._button--theme_primary-invert_1upc8_229:hover{background-color:#eee}._button--theme_primary-invert_1upc8_229._button--active_1upc8_188,._button--theme_primary-invert_1upc8_229:active{background-color:#e4e1e1}._button--theme_secondary-muted_1upc8_241{background-color:rgba(166,175,179,.1);color:#666;border-color:#a6b0b3}._button--theme_secondary-muted_1upc8_241:hover{background-color:rgba(166,175,179,.2)}._button--theme_secondary-muted_1upc8_241._button--active_1upc8_188,._button--theme_secondary-muted_1upc8_241:active{background-color:rgba(166,175,179,.3)}._button--theme_secondary-info_1upc8_254{background-color:rgba(42,148,224,.05);color:#2b94e1;border-color:#2b94e1}._button--theme_secondary-info_1upc8_254:hover{background-color:rgba(0,113,188,.2)}._button--theme_secondary-info_1upc8_254._button--active_1upc8_188,._button--theme_secondary-info_1upc8_254:active{background-color:rgba(0,113,188,.3)}._button--theme_secondary-invert_1upc8_267{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}._button--theme_secondary-invert_1upc8_267:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_secondary-invert_1upc8_267._button--active_1upc8_188,._button--theme_secondary-invert_1upc8_267:active{background-color:hsla(0,0%,100%,.3)}._button--theme_tertiary-info_1upc8_280{color:#0071bc;background-color:transparent}._button--theme_tertiary-info_1upc8_280:hover{background-color:rgba(42,148,224,.2)}._button--theme_tertiary-info_1upc8_280._button--active_1upc8_188,._button--theme_tertiary-info_1upc8_280:active{background-color:rgba(42,148,224,.3)}._button--theme_tertiary-muted_1upc8_292{color:#666;background-color:transparent}._button--theme_tertiary-muted_1upc8_292:hover{background-color:rgba(166,175,179,.2)}._button--theme_tertiary-muted_1upc8_292._button--active_1upc8_188,._button--theme_tertiary-muted_1upc8_292:active{background-color:rgba(166,175,179,.3)}._button--theme_tertiary-invert_1upc8_303{color:#fff;background-color:transparent}._button--theme_tertiary-invert_1upc8_303:hover{background-color:hsla(0,0%,100%,.2)}._button--theme_tertiary-invert_1upc8_303._button--active_1upc8_188,._button--theme_tertiary-invert_1upc8_303:active{background-color:hsla(0,0%,100%,.3)}._button--disabled_1upc8_315{opacity:.3;cursor:default;pointer-events:none}._button--keyboard-focused_1upc8_321{box-shadow:0 0 0 3px rgba(42,148,224,.3)}._button--neighbor-location_right_1upc8_325._button--neighbor-location_right_1upc8_325{border-top-right-radius:0;border-bottom-right-radius:0}._button--neighbor-location_both_1upc8_330._button--neighbor-location_both_1upc8_330{border-radius:0;margin-left:-1px}._button--neighbor-location_left_1upc8_335._button--neighbor-location_left_1upc8_335{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}._button--neighbor-location_both_1upc8_330[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_both_1upc8_330._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}._button--neighbor-location_left_1upc8_335[class*=button--theme_primary-]{border-left-color:hsla(0,0%,100%,.5)}._button--neighbor-location_left_1upc8_335._button--theme_primary-invert_1upc8_229{border-left-color:rgba(0,0,0,.5)}";
-      head.appendChild(style);
-    }
-  }
-})('./button.style.css');
-
 function block() {
-  return data['block']['block'];
+  return '_button_skuyq_gg_';
 }
 
-block['size'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['size'][value];
+block['size'] = function (value) {
+  return {
+    "s": "_button--size_s_1g5qz_gg_",
+    "m": "_button--size_m_a1qmq_gg_",
+    "l": "_button--size_l_dfvrr_gg_",
+    "xl": "_button--size_xl_1mrez_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
-block['theme'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['theme'][value];
+block['theme'] = function (value) {
+  return {
+    "primary-info": "_button--theme_primary-info_1pye3_gg_",
+    "primary-success": "_button--theme_primary-success_liefi_gg_",
+    "primary-warning": "_button--theme_primary-warning_na6xg_gg_",
+    "primary-danger": "_button--theme_primary-danger_1a2o8_gg_",
+    "primary-invert": "_button--theme_primary-invert_w80s8_gg_",
+    "secondary-muted": "_button--theme_secondary-muted_9mq4x_gg_",
+    "secondary-info": "_button--theme_secondary-info_10emb_gg_",
+    "secondary-invert": "_button--theme_secondary-invert_1czzg_gg_",
+    "tertiary-info": "_button--theme_tertiary-info_ll2lv_gg_",
+    "tertiary-muted": "_button--theme_tertiary-muted_z0hzp_gg_",
+    "tertiary-invert": "_button--theme_tertiary-invert_i7lmv_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
-block['active'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['active'][value];
+block['active'] = function (value) {
+  return {
+    "block": "_button--active_1hrx3_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
-block['disabled'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['disabled'][value];
+block['disabled'] = function (value) {
+  return {
+    "block": "_button--disabled_e06dj_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
-block['keyboardFocused'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['keyboard-focused'][value];
+block['keyboardFocused'] = function (value) {
+  return {
+    "block": "_button--keyboard-focused_1url4_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
-block['neighborLocation'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['neighbor-location'][value];
+block['neighborLocation'] = function (value) {
+  return {
+    "right": "_button--neighbor-location_right_m7no7_gg_",
+    "both": "_button--neighbor-location_both_1sdmh_gg_",
+    "left": "_button--neighbor-location_left_1qj10_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
 function spin() {
-  return data['spin']['block'];
+  return '_button__spin_1nubv_gg_';
 }
 
 function inner() {
-  return data['inner']['block'];
+  return '_button__inner_1wuz6_gg_';
 }
 
-inner['loading'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['inner']['loading'][value];
+inner['loading'] = function (value) {
+  return {
+    "block": "_button__inner--loading_10oyp_gg_"
+  }[value !== undefined ? value : 'block'];
 };
 
 function additional() {
-  return data['additional']['block'];
+  return '_button__additional_nf1jh_gg_';
 }
 
 function text() {
-  return data['text']['block'];
+  return '_button__text_9d742_gg_';
 }
 
-var enhance = compose(WithKeyboardFocus(), neighborLocation.WithNeighborLocation());
+var enhance = compose(WithRef(), WithKeyboardFocus(), neighborLocation.WithNeighborLocation());
 var MAP_USE_DEFAULT_THEME = {
@@ -210,7 +169,9 @@ primary: 'info',
           className = _this$props.className,
-          other = _objectWithoutProperties(_this$props, ["className"]);
+          forwardedRef = _this$props.forwardedRef,
+          other = _objectWithoutProperties(_this$props, ["className", "forwardedRef"]);
 
       var classes = cn(additional(), className);
       return React__default.createElement(flexBox.Box, Object.assign({
-        className: classes
+        className: classes,
+        ref: forwardedRef
       }, other));
@@ -244,7 +205,9 @@ }
           className = _this$props2.className,
-          other = _objectWithoutProperties(_this$props2, ["className"]);
+          forwardedRef = _this$props2.forwardedRef,
+          other = _objectWithoutProperties(_this$props2, ["className", "forwardedRef"]);
 
       var classes = cn(text(), className);
       return React__default.createElement(flexBox.Box, Object.assign({
-        className: classes
+        className: classes,
+        ref: forwardedRef
       }, other));
@@ -290,3 +253,4 @@ }
           neighborLocation = _this$props3.neighborLocation,
-          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "active", "children", "size", "use", "className", "tabIndex", "keyboardFocused", "neighborLocation"]);
+          forwardedRef = _this$props3.forwardedRef,
+          other = _objectWithoutProperties(_this$props3, ["disabled", "theme", "loading", "active", "children", "size", "use", "className", "tabIndex", "keyboardFocused", "neighborLocation", "forwardedRef"]);
 
@@ -303,3 +267,4 @@ var disabled = loading || disabledProp;
         disabled: disabled,
-        className: styles.button
+        className: styles.button,
+        ref: forwardedRef
       }), React__default.createElement("span", {
@@ -328,4 +293,4 @@ className: styles.inner
 };
-Button.Addon = ButtonAddon;
-Button.Text = ButtonText;
+Button.Addon = WithRef()(ButtonAddon);
+Button.Text = WithRef()(ButtonText);
 var Button$1 = enhance(Button);
@@ -332,0 +297,0 @@

lib/SpinButton.d.ts

@@ -24,4 +24,3 @@ import React from 'react';
     centered?: boolean;
-    className?: string;
 }
 export default function SpinButton(props: ISpinButtonProps): React.ReactElement<ISpinProps>;

package.json

 {
   "name": "@semcore/button",
   "description": "SEMRush Button Component",
-  "version": "2.1.13",
+  "version": "2.5.1",
   "main": "lib/index.js",
@@ -12,9 +12,9 @@ "module": "lib/index.es.js",
     "build": "rollup --config=node:rollup-config-ts",
-    "test": "jest --no-cache"
+    "test": "jest"
   },
   "dependencies": {
-    "@semcore/utils": "^3.1",
-    "@semcore/spin": "^2.0",
-    "@semcore/neighbor-location": "^1.0",
-    "@semcore/flex-box": "^3.1"
+    "@semcore/utils": "^3.8",
+    "@semcore/spin": "^2.2",
+    "@semcore/neighbor-location": "^1.1",
+    "@semcore/flex-box": "^3.5"
   },
@@ -21,0 +21,0 @@ "jest": {

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

104184

increased by0.31%

Number of package files

22

increased by37.5%

Number of low supply chain risk alerts

3

decreased by-40%

Worsened metrics

Lines of code

1165

decreased by-6.73%

Dependency changes

• Updated@semcore/flex-box@^3.5

• Updated@semcore/neighbor-location@^1.1

• Updated@semcore/spin@^2.2

• Updated@semcore/utils@^3.8