@semcore/button 3.2.0 → 3.3.2

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.3.2] - 2021-12-23
+
+### Changed
+
+- Changed `line-height` from 1.2 to 1.1 for correct display in all browsers.
+
+## [3.3.1] - 2021-8-26
+
+### Changed
+
+- Add 'sideEffect=false' for more optimal build via webpack
+
+## [3.3.0] - 2021-04-26
+
+### Changed
+
+- Version of dependence `@semcore/core` has been changed to `1.11`.
+- Improved performance. Removed one component wrapper.
+- The style processing system has been changed.
+- Removed the ability to apply media styles via a plugin `babel-plugin-react-semcore`.
+
+## [3.2.1] - 2021-04-16
+
+### Changed
+
+- Changed line-height value
+
 ## [3.2.0] - 2020-12-17
 
 ### Added

package/lib/cjs/Button.js

@@ -21,14 +21,12 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _core = _interopRequireWildcard(require("@semcore/core"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _flexBox = require("@semcore/flex-box");
 
-var _core = _interopRequireWildcard(require("@semcore/core"));
-
 var _neighborLocation = require("@semcore/neighbor-location");
 
 var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
@@ -37,71 +35,58 @@ var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addo
 
 var _SpinButton = _interopRequireDefault(require("./SpinButton"));
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 /*__reshadow-styles__:"./style/button.shadow.css"*/
-var _ref = (
+var style = (
 /*__reshadow_css_start__*/
-(0, _core.__css__)(
+_core.sstyled.insert(
 /*__inner_css_start__*/
-".___SButton_cipg3_gg_{position:relative;display:inline-block;align-items: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}.___SButton_cipg3_gg_::-moz-focus-inner{padding:0;border:none}.___SButton_cipg3_gg_:active,.___SButton_cipg3_gg_:focus,.___SButton_cipg3_gg_:hover{outline:0;text-decoration:none}.___SButton_cipg3_gg_.__disabled_cipg3_gg_{opacity:.3;cursor:default;pointer-events:none}.___SButton_cipg3_gg_.__keyboardFocused_cipg3_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3);z-index:1}.___SButton_cipg3_gg_.__size_cipg3_gg_.__size_s_cipg3_gg_{height:18px;min-width:18px;border-radius:2px;font-size:10px}.___SButton_cipg3_gg_.__size_cipg3_gg_.__size_m_cipg3_gg_{height:26px;min-width:26px;border-radius:3px;font-size:12px}.___SButton_cipg3_gg_.__size_cipg3_gg_.__size_l_cipg3_gg_{height:32px;min-width:32px;border-radius:4px;font-size:14px}.___SButton_cipg3_gg_.__size_cipg3_gg_.__size_xl_cipg3_gg_{height:42px;min-width:42px;border-radius:5px;font-size:16px}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-info_cipg3_gg_{color:#fff;background-color:#2b94e1}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-info_cipg3_gg_:hover{background-color:#0071bc}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-info_cipg3_gg_.__active_cipg3_gg_,.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-info_cipg3_gg_:active{background-color:#006bb3}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-success_cipg3_gg_{color:#fff;background-color:#4fae33}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-success_cipg3_gg_:hover{background-color:#1d9c00}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-success_cipg3_gg_.__active_cipg3_gg_,.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-success_cipg3_gg_:active{background-color:#1c9400}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-warning_cipg3_gg_{background-color:#ff7f00;color:#fff}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-warning_cipg3_gg_:hover{background-color:#c60}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-warning_cipg3_gg_.__active_cipg3_gg_,.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-warning_cipg3_gg_:active{background-color:#c26100}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-danger_cipg3_gg_{background-color:#ed2d2d;color:#fff}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-danger_cipg3_gg_:hover{background-color:#d00000}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-danger_cipg3_gg_.__active_cipg3_gg_,.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-danger_cipg3_gg_:active{background-color:#c60000}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-invert_cipg3_gg_{background-color:#fff;color:#333}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-invert_cipg3_gg_:hover{background-color:#eee}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-invert_cipg3_gg_.__active_cipg3_gg_,.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-invert_cipg3_gg_:active{background-color:#e4e1e1}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-muted_cipg3_gg_{color:#757575;border-color:#a6b0b3;background-color:rgba(166,176,179,.1)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-muted_cipg3_gg_:hover{background-color:rgba(166,176,179,.2)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-muted_cipg3_gg_.__active_cipg3_gg_,.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-muted_cipg3_gg_:active{background-color:rgba(166,176,179,.3)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-info_cipg3_gg_{background-color:rgba(43,148,225,.05);color:#2b94e1;border-color:#2b94e1}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-info_cipg3_gg_:hover{background-color:rgba(0,113,188,.2)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-info_cipg3_gg_.__active_cipg3_gg_,.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-info_cipg3_gg_:active{background-color:rgba(0,113,188,.3)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-invert_cipg3_gg_{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-invert_cipg3_gg_:hover{background-color:hsla(0,0%,100%,.2)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-invert_cipg3_gg_.__active_cipg3_gg_,.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_secondary-invert_cipg3_gg_:active{background-color:hsla(0,0%,100%,.3)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-info_cipg3_gg_{color:#0071bc;background-color:transparent}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-info_cipg3_gg_:hover{background-color:rgba(43,148,225,.2)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-info_cipg3_gg_.__active_cipg3_gg_,.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-info_cipg3_gg_:active{background-color:rgba(43,148,225,.3)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-muted_cipg3_gg_{color:#757575;background-color:transparent}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-muted_cipg3_gg_:hover{background-color:rgba(166,176,179,.2)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-muted_cipg3_gg_.__active_cipg3_gg_,.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-muted_cipg3_gg_:active{background-color:rgba(166,176,179,.3)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-invert_cipg3_gg_{color:#fff;background-color:transparent}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-invert_cipg3_gg_:hover{background-color:hsla(0,0%,100%,.2)}.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-invert_cipg3_gg_.__active_cipg3_gg_,.___SButton_cipg3_gg_.__theme_cipg3_gg_.__theme_tertiary-invert_cipg3_gg_:active{background-color:hsla(0,0%,100%,.3)}.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_right_cipg3_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_both_cipg3_gg_{border-radius:0;margin-left:-1px}.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_both_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-danger_cipg3_gg_,.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_both_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-info_cipg3_gg_,.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_both_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-success_cipg3_gg_,.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_both_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-warning_cipg3_gg_{border-left-color:hsla(0,0%,100%,.5)}.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_both_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-invert_cipg3_gg_{border-left-color:rgba(0,0,0,.5)}.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_left_cipg3_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_left_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-danger_cipg3_gg_,.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_left_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-info_cipg3_gg_,.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_left_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-success_cipg3_gg_,.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_left_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-warning_cipg3_gg_{border-left-color:hsla(0,0%,100%,.5)}.___SButton_cipg3_gg_.__neighborLocation_cipg3_gg_.__neighborLocation_left_cipg3_gg_.__theme_cipg3_gg_.__theme_primary-invert_cipg3_gg_{border-left-color:rgba(0,0,0,.5)}.___SSpin_cipg3_gg_{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}.___SInner_cipg3_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SInner_cipg3_gg_.__loading_cipg3_gg_{visibility:hidden}.___SText_cipg3_gg_{display:inline-flex;line-height:1}.___SText_cipg3_gg_.__size_cipg3_gg_.__size_s_cipg3_gg_{margin-left:4px;margin-right:4px}.___SText_cipg3_gg_.__size_cipg3_gg_.__size_l_cipg3_gg_,.___SText_cipg3_gg_.__size_cipg3_gg_.__size_m_cipg3_gg_{margin-left:8px;margin-right:8px}.___SText_cipg3_gg_.__size_cipg3_gg_.__size_xl_cipg3_gg_{margin-left:12px;margin-right:12px}.___SAddon_cipg3_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_s_cipg3_gg_:not(:only-child):first-child{margin-left:4px}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_s_cipg3_gg_:not(:only-child):last-child{margin-right:4px}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_s_cipg3_gg_:only-child{margin-left:-2px;margin-right:-2px}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_m_cipg3_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_m_cipg3_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_m_cipg3_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_l_cipg3_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_l_cipg3_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_l_cipg3_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_xl_cipg3_gg_:not(:only-child):first-child{margin-left:12px}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_xl_cipg3_gg_:not(:only-child):last-child{margin-right:12px}.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_xl_cipg3_gg_:only-child{margin-left:-6px;margin-right:-6px}"
+".___SButton_t5ktd_gg_{position:relative;display:inline-block;align-items: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}.___SButton_t5ktd_gg_::-moz-focus-inner{padding:0;border:none}.___SButton_t5ktd_gg_:active,.___SButton_t5ktd_gg_:focus,.___SButton_t5ktd_gg_:hover{outline:0;text-decoration:none}.___SButton_t5ktd_gg_.__disabled_t5ktd_gg_{opacity:.3;cursor:default;pointer-events:none}.___SButton_t5ktd_gg_.__keyboardFocused_t5ktd_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3);z-index:1}.___SButton_t5ktd_gg_._size_s_t5ktd_gg_{height:18px;min-width:18px;border-radius:2px;font-size:10px}.___SButton_t5ktd_gg_._size_m_t5ktd_gg_{height:26px;min-width:26px;border-radius:3px;font-size:12px}.___SButton_t5ktd_gg_._size_l_t5ktd_gg_{height:32px;min-width:32px;border-radius:4px;font-size:14px}.___SButton_t5ktd_gg_._size_xl_t5ktd_gg_{height:42px;min-width:42px;border-radius:5px;font-size:16px}.___SButton_t5ktd_gg_._theme_primary-info_t5ktd_gg_{color:#fff;background-color:#2b94e1}.___SButton_t5ktd_gg_._theme_primary-info_t5ktd_gg_:hover{background-color:#0071bc}.___SButton_t5ktd_gg_._theme_primary-info_t5ktd_gg_:active,.___SButton_t5ktd_gg_._theme_primary-info_t5ktd_gg_.__active_t5ktd_gg_{background-color:#006bb3}.___SButton_t5ktd_gg_._theme_primary-success_t5ktd_gg_{color:#fff;background-color:#4fae33}.___SButton_t5ktd_gg_._theme_primary-success_t5ktd_gg_:hover{background-color:#1d9c00}.___SButton_t5ktd_gg_._theme_primary-success_t5ktd_gg_:active,.___SButton_t5ktd_gg_._theme_primary-success_t5ktd_gg_.__active_t5ktd_gg_{background-color:#1c9400}.___SButton_t5ktd_gg_._theme_primary-warning_t5ktd_gg_{background-color:#ff7f00;color:#fff}.___SButton_t5ktd_gg_._theme_primary-warning_t5ktd_gg_:hover{background-color:#c60}.___SButton_t5ktd_gg_._theme_primary-warning_t5ktd_gg_:active,.___SButton_t5ktd_gg_._theme_primary-warning_t5ktd_gg_.__active_t5ktd_gg_{background-color:#c26100}.___SButton_t5ktd_gg_._theme_primary-danger_t5ktd_gg_{background-color:#ed2d2d;color:#fff}.___SButton_t5ktd_gg_._theme_primary-danger_t5ktd_gg_:hover{background-color:#d00000}.___SButton_t5ktd_gg_._theme_primary-danger_t5ktd_gg_:active,.___SButton_t5ktd_gg_._theme_primary-danger_t5ktd_gg_.__active_t5ktd_gg_{background-color:#c60000}.___SButton_t5ktd_gg_._theme_primary-invert_t5ktd_gg_{background-color:#fff;color:#333}.___SButton_t5ktd_gg_._theme_primary-invert_t5ktd_gg_:hover{background-color:#eee}.___SButton_t5ktd_gg_._theme_primary-invert_t5ktd_gg_:active,.___SButton_t5ktd_gg_._theme_primary-invert_t5ktd_gg_.__active_t5ktd_gg_{background-color:#e4e1e1}.___SButton_t5ktd_gg_._theme_secondary-muted_t5ktd_gg_{color:#757575;border-color:#a6b0b3;background-color:rgba(166,176,179,.1)}.___SButton_t5ktd_gg_._theme_secondary-muted_t5ktd_gg_:hover{background-color:rgba(166,176,179,.2)}.___SButton_t5ktd_gg_._theme_secondary-muted_t5ktd_gg_:active,.___SButton_t5ktd_gg_._theme_secondary-muted_t5ktd_gg_.__active_t5ktd_gg_{background-color:rgba(166,176,179,.3)}.___SButton_t5ktd_gg_._theme_secondary-info_t5ktd_gg_{background-color:rgba(43,148,225,.05);color:#2b94e1;border-color:#2b94e1}.___SButton_t5ktd_gg_._theme_secondary-info_t5ktd_gg_:hover{background-color:rgba(0,113,188,.2)}.___SButton_t5ktd_gg_._theme_secondary-info_t5ktd_gg_:active,.___SButton_t5ktd_gg_._theme_secondary-info_t5ktd_gg_.__active_t5ktd_gg_{background-color:rgba(0,113,188,.3)}.___SButton_t5ktd_gg_._theme_secondary-invert_t5ktd_gg_{background-color:hsla(0,0%,100%,.05);color:#fff;border-color:#fff}.___SButton_t5ktd_gg_._theme_secondary-invert_t5ktd_gg_:hover{background-color:hsla(0,0%,100%,.2)}.___SButton_t5ktd_gg_._theme_secondary-invert_t5ktd_gg_:active,.___SButton_t5ktd_gg_._theme_secondary-invert_t5ktd_gg_.__active_t5ktd_gg_{background-color:hsla(0,0%,100%,.3)}.___SButton_t5ktd_gg_._theme_tertiary-info_t5ktd_gg_{color:#0071bc;background-color:transparent}.___SButton_t5ktd_gg_._theme_tertiary-info_t5ktd_gg_:hover{background-color:rgba(43,148,225,.2)}.___SButton_t5ktd_gg_._theme_tertiary-info_t5ktd_gg_:active,.___SButton_t5ktd_gg_._theme_tertiary-info_t5ktd_gg_.__active_t5ktd_gg_{background-color:rgba(43,148,225,.3)}.___SButton_t5ktd_gg_._theme_tertiary-muted_t5ktd_gg_{color:#757575;background-color:transparent}.___SButton_t5ktd_gg_._theme_tertiary-muted_t5ktd_gg_:hover{background-color:rgba(166,176,179,.2)}.___SButton_t5ktd_gg_._theme_tertiary-muted_t5ktd_gg_:active,.___SButton_t5ktd_gg_._theme_tertiary-muted_t5ktd_gg_.__active_t5ktd_gg_{background-color:rgba(166,176,179,.3)}.___SButton_t5ktd_gg_._theme_tertiary-invert_t5ktd_gg_{color:#fff;background-color:transparent}.___SButton_t5ktd_gg_._theme_tertiary-invert_t5ktd_gg_:hover{background-color:hsla(0,0%,100%,.2)}.___SButton_t5ktd_gg_._theme_tertiary-invert_t5ktd_gg_:active,.___SButton_t5ktd_gg_._theme_tertiary-invert_t5ktd_gg_.__active_t5ktd_gg_{background-color:hsla(0,0%,100%,.3)}.___SButton_t5ktd_gg_._neighborLocation_right_t5ktd_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SButton_t5ktd_gg_._neighborLocation_both_t5ktd_gg_{border-radius:0;margin-left:-1px}.___SButton_t5ktd_gg_._neighborLocation_both_t5ktd_gg_._theme_primary-danger_t5ktd_gg_,.___SButton_t5ktd_gg_._neighborLocation_both_t5ktd_gg_._theme_primary-info_t5ktd_gg_,.___SButton_t5ktd_gg_._neighborLocation_both_t5ktd_gg_._theme_primary-success_t5ktd_gg_,.___SButton_t5ktd_gg_._neighborLocation_both_t5ktd_gg_._theme_primary-warning_t5ktd_gg_{border-left-color:hsla(0,0%,100%,.5)}.___SButton_t5ktd_gg_._neighborLocation_both_t5ktd_gg_._theme_primary-invert_t5ktd_gg_{border-left-color:rgba(0,0,0,.5)}.___SButton_t5ktd_gg_._neighborLocation_left_t5ktd_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SButton_t5ktd_gg_._neighborLocation_left_t5ktd_gg_._theme_primary-danger_t5ktd_gg_,.___SButton_t5ktd_gg_._neighborLocation_left_t5ktd_gg_._theme_primary-info_t5ktd_gg_,.___SButton_t5ktd_gg_._neighborLocation_left_t5ktd_gg_._theme_primary-success_t5ktd_gg_,.___SButton_t5ktd_gg_._neighborLocation_left_t5ktd_gg_._theme_primary-warning_t5ktd_gg_{border-left-color:hsla(0,0%,100%,.5)}.___SButton_t5ktd_gg_._neighborLocation_left_t5ktd_gg_._theme_primary-invert_t5ktd_gg_{border-left-color:rgba(0,0,0,.5)}.___SSpin_t5ktd_gg_{position:absolute;top:0;left:0;display:flex}.___SInner_t5ktd_gg_,.___SSpin_t5ktd_gg_{width:100%;height:100%}.___SInner_t5ktd_gg_{display:inline-flex;align-items:center;justify-content:center}.___SInner_t5ktd_gg_.__loading_t5ktd_gg_{visibility:hidden}.___SText_t5ktd_gg_{display:inline-flex;line-height:1.1}.___SText_t5ktd_gg_._size_s_t5ktd_gg_{margin-left:4px;margin-right:4px}.___SText_t5ktd_gg_._size_l_t5ktd_gg_,.___SText_t5ktd_gg_._size_m_t5ktd_gg_{margin-left:8px;margin-right:8px}.___SText_t5ktd_gg_._size_xl_t5ktd_gg_{margin-left:12px;margin-right:12px}.___SAddon_t5ktd_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_t5ktd_gg_._size_s_t5ktd_gg_:not(:only-child):first-child{margin-left:4px}.___SAddon_t5ktd_gg_._size_s_t5ktd_gg_:not(:only-child):last-child{margin-right:4px}.___SAddon_t5ktd_gg_._size_s_t5ktd_gg_:only-child{margin-left:-2px;margin-right:-2px}.___SAddon_t5ktd_gg_._size_m_t5ktd_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_t5ktd_gg_._size_m_t5ktd_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_t5ktd_gg_._size_m_t5ktd_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SAddon_t5ktd_gg_._size_l_t5ktd_gg_:not(:only-child):first-child{margin-left:8px}.___SAddon_t5ktd_gg_._size_l_t5ktd_gg_:not(:only-child):last-child{margin-right:8px}.___SAddon_t5ktd_gg_._size_l_t5ktd_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SAddon_t5ktd_gg_._size_xl_t5ktd_gg_:not(:only-child):first-child{margin-left:12px}.___SAddon_t5ktd_gg_._size_xl_t5ktd_gg_:not(:only-child):last-child{margin-right:12px}.___SAddon_t5ktd_gg_._size_xl_t5ktd_gg_:only-child{margin-left:-6px;margin-right:-6px}"
 /*__inner_css_end__*/
-, "19k5k52_gg_")
+, "1o9hhkh_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SButton": "___SButton_cipg3_gg_",
-  "_disabled": "__disabled_cipg3_gg_",
-  "_keyboardFocused": "__keyboardFocused_cipg3_gg_",
-  "_size": "__size_cipg3_gg_",
-  "_size_s": "__size_s_cipg3_gg_",
-  "_size_m": "__size_m_cipg3_gg_",
-  "_size_l": "__size_l_cipg3_gg_",
-  "_size_xl": "__size_xl_cipg3_gg_",
-  "_theme": "__theme_cipg3_gg_",
-  "_theme_primary-info": "__theme_primary-info_cipg3_gg_",
-  "_active": "__active_cipg3_gg_",
-  "_theme_primary-success": "__theme_primary-success_cipg3_gg_",
-  "_theme_primary-warning": "__theme_primary-warning_cipg3_gg_",
-  "_theme_primary-danger": "__theme_primary-danger_cipg3_gg_",
-  "_theme_primary-invert": "__theme_primary-invert_cipg3_gg_",
-  "_theme_secondary-muted": "__theme_secondary-muted_cipg3_gg_",
-  "_theme_secondary-info": "__theme_secondary-info_cipg3_gg_",
-  "_theme_secondary-invert": "__theme_secondary-invert_cipg3_gg_",
-  "_theme_tertiary-info": "__theme_tertiary-info_cipg3_gg_",
-  "_theme_tertiary-muted": "__theme_tertiary-muted_cipg3_gg_",
-  "_theme_tertiary-invert": "__theme_tertiary-invert_cipg3_gg_",
-  "_neighborLocation": "__neighborLocation_cipg3_gg_",
-  "_neighborLocation_right": "__neighborLocation_right_cipg3_gg_",
-  "_neighborLocation_both": "__neighborLocation_both_cipg3_gg_",
-  "_neighborLocation_left": "__neighborLocation_left_cipg3_gg_",
-  "__SSpin": "___SSpin_cipg3_gg_",
-  "__SInner": "___SInner_cipg3_gg_",
-  "_loading": "__loading_cipg3_gg_",
-  "__SText": "___SText_cipg3_gg_",
-  "__SAddon": "___SAddon_cipg3_gg_"
-}),
-    style = (0, _extends2["default"])({}, _ref);
-
-if (false) {
-  /*__reshadow_css_start__*/
-  (0, _core.__css__)(
-  /*__inner_css_start__*/
-  "@media (max-width: 768px) {\n\n.___SButton_cipg3_gg_.__size_cipg3_gg_.__size_s_cipg3_gg_ {\n  height: 23.4px;\n  min-width: 23.4px;\n  font-size: 13px;\n}\n\n.___SButton_cipg3_gg_.__size_cipg3_gg_.__size_m_cipg3_gg_ {\n  height: 33.8px;\n  min-width: 33.8px;\n  font-size: 15.6px;\n}\n\n.___SButton_cipg3_gg_.__size_cipg3_gg_.__size_l_cipg3_gg_ {\n  height: 41.6px;\n  min-width: 41.6px;\n  font-size: 18.2px;\n}\n\n.___SButton_cipg3_gg_.__size_cipg3_gg_.__size_xl_cipg3_gg_ {\n  height: 54.6px;\n  min-width: 54.6px;\n  font-size: 20.8px;\n}\n\n.___SText_cipg3_gg_.__size_cipg3_gg_.__size_s_cipg3_gg_ {\n  margin-left: 5.2px;\n  margin-right: 5.2px;\n}\n\n.___SText_cipg3_gg_.__size_cipg3_gg_.__size_m_cipg3_gg_ {\n  margin-left: 10.4px;\n  margin-right: 10.4px;\n}\n\n.___SText_cipg3_gg_.__size_cipg3_gg_.__size_l_cipg3_gg_ {\n  margin-left: 10.4px;\n  margin-right: 10.4px;\n}\n\n.___SText_cipg3_gg_.__size_cipg3_gg_.__size_xl_cipg3_gg_ {\n  margin-left: 15.6px;\n  margin-right: 15.6px;\n}\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_s_cipg3_gg_:not(:only-child):first-child {\n    margin-left: 5.2px;\n  }\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_s_cipg3_gg_:not(:only-child):last-child {\n    margin-right: 5.2px;\n  }\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_s_cipg3_gg_:only-child {\n    margin-left: -2.6px;\n    margin-right: -2.6px;\n  }\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_m_cipg3_gg_:not(:only-child):first-child {\n    margin-left: 10.4px;\n  }\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_m_cipg3_gg_:not(:only-child):last-child {\n    margin-right: 10.4px;\n  }\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_m_cipg3_gg_:only-child {\n    margin-left: -5.2px;\n    margin-right: -5.2px;\n  }\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_l_cipg3_gg_:not(:only-child):first-child {\n    margin-left: 10.4px;\n  }\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_l_cipg3_gg_:not(:only-child):last-child {\n    margin-right: 10.4px;\n  }\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_l_cipg3_gg_:only-child {\n    margin-left: -5.2px;\n    margin-right: -5.2px;\n  }\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_xl_cipg3_gg_:not(:only-child):first-child {\n    margin-left: 15.6px;\n  }\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_xl_cipg3_gg_:not(:only-child):last-child {\n    margin-right: 15.6px;\n  }\n\n.___SAddon_cipg3_gg_.__size_cipg3_gg_.__size_xl_cipg3_gg_:only-child {\n    margin-left: -7.8px;\n    margin-right: -7.8px;\n  }}"
-  /*__inner_css_end__*/
-  , "i5meff_gg_")
-  /*__reshadow_css_end__*/
-  ;
-}
-
+  "__SButton": "___SButton_t5ktd_gg_",
+  "_disabled": "__disabled_t5ktd_gg_",
+  "_keyboardFocused": "__keyboardFocused_t5ktd_gg_",
+  "_size_s": "_size_s_t5ktd_gg_",
+  "_size_m": "_size_m_t5ktd_gg_",
+  "_size_l": "_size_l_t5ktd_gg_",
+  "_size_xl": "_size_xl_t5ktd_gg_",
+  "_theme_primary-info": "_theme_primary-info_t5ktd_gg_",
+  "_active": "__active_t5ktd_gg_",
+  "_theme_primary-success": "_theme_primary-success_t5ktd_gg_",
+  "_theme_primary-warning": "_theme_primary-warning_t5ktd_gg_",
+  "_theme_primary-danger": "_theme_primary-danger_t5ktd_gg_",
+  "_theme_primary-invert": "_theme_primary-invert_t5ktd_gg_",
+  "_theme_secondary-muted": "_theme_secondary-muted_t5ktd_gg_",
+  "_theme_secondary-info": "_theme_secondary-info_t5ktd_gg_",
+  "_theme_secondary-invert": "_theme_secondary-invert_t5ktd_gg_",
+  "_theme_tertiary-info": "_theme_tertiary-info_t5ktd_gg_",
+  "_theme_tertiary-muted": "_theme_tertiary-muted_t5ktd_gg_",
+  "_theme_tertiary-invert": "_theme_tertiary-invert_t5ktd_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_t5ktd_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_t5ktd_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_t5ktd_gg_",
+  "__SSpin": "___SSpin_t5ktd_gg_",
+  "__SInner": "___SInner_t5ktd_gg_",
+  "_loading": "__loading_t5ktd_gg_",
+  "__SText": "___SText_t5ktd_gg_",
+  "__SAddon": "___SAddon_t5ktd_gg_"
+});
 var MAP_USE_DEFAULT_THEME = {
   primary: 'info',
   secondary: 'muted',
   tertiary: 'info'
 };
 exports.MAP_USE_DEFAULT_THEME = MAP_USE_DEFAULT_THEME;
-var styled_c8 = (0, _core.create)([]);
 
 var RootButton = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(RootButton, _Component);
@@ -132,7 +117,10 @@ var RootButton = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var SButton = this.Root;
+      var _ref = this ? this.asProps : arguments[0],
+          _ref4;
+
+      var SButton = _flexBox.Box;
       var SInner = _flexBox.Box;
       var SSpin = _flexBox.Box;
       var _this$asProps = this.asProps,
@@ -144,37 +132,29 @@ var RootButton = /*#__PURE__*/function (_Component) {
           loading = _this$asProps.loading,
           _this$asProps$disable = _this$asProps.disabled,
           disabled = _this$asProps$disable === void 0 ? loading : _this$asProps$disable,
-          active = _this$asProps.active,
           size = _this$asProps.size,
           addonLeft = _this$asProps.addonLeft,
-          addonRight = _this$asProps.addonRight,
-          keyboardFocused = _this$asProps.keyboardFocused,
-          neighborLocation = _this$asProps.neighborLocation;
+          addonRight = _this$asProps.addonRight;
       var useTheme = use && theme ? "".concat(use, "-").concat(theme) : false;
-      return (0, _core.styled)(((0, _core.set)([styled_c8, styles]), /*#__PURE__*/_react["default"].createElement(SButton, (0, _core.map)("SButton", {
-        render: _flexBox.Box,
-        type: "button",
-        tag: "button",
-        disabled: disabled,
-        theme: useTheme,
-        size: size,
-        active: active,
-        neighborLocation: neighborLocation,
-        keyboardFocused: keyboardFocused
-      }), /*#__PURE__*/_react["default"].createElement(SInner, (0, _core.map)("SInner", {
-        tag: "span",
-        loading: loading
-      }), addonLeft ? /*#__PURE__*/_react["default"].createElement(Button.Addon, (0, _core.map)("Button.Addon", {
+      return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SButton, _ref4.cn("SButton", _objectSpread({}, (0, _core.assignProps)({
+        "type": "button",
+        "tag": "button",
+        "disabled": disabled,
+        "use:theme": useTheme
+      }, _ref))), /*#__PURE__*/_react["default"].createElement(SInner, _ref4.cn("SInner", {
+        "tag": "span",
+        "loading": loading
+      }), addonLeft ? /*#__PURE__*/_react["default"].createElement(Button.Addon, {
         tag: addonLeft
-      })) : null, (0, _addonTextChildren["default"])(Children, Button.Text, Button.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(Button.Addon, (0, _core.map)("Button.Addon", {
+      }) : null, (0, _addonTextChildren["default"])(Children, Button.Text, Button.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(Button.Addon, {
         tag: addonRight
-      })) : null), loading && /*#__PURE__*/_react["default"].createElement(SSpin, (0, _core.map)("SSpin", {
-        tag: "span"
-      }), /*#__PURE__*/_react["default"].createElement(_SpinButton["default"], (0, _core.map)("SpinButton", {
-        centered: true,
-        size: size,
-        theme: useTheme
-      }))))));
+      }) : null), loading && /*#__PURE__*/_react["default"].createElement(SSpin, _ref4.cn("SSpin", {
+        "tag": "span"
+      }), /*#__PURE__*/_react["default"].createElement(_SpinButton["default"], _ref4.cn("SpinButton", {
+        "centered": true,
+        "size": size,
+        "theme": useTheme
+      }))));
     }
   }]);
   return RootButton;
@@ -187,30 +167,25 @@ var RootButton = /*#__PURE__*/function (_Component) {
   use: 'secondary',
   size: 'm'
 });
-var styled_12c = (0, _core.create)([]);
 
 function Text(props) {
-  var SText = props.Root,
-      size = props.size,
-      styles = props.styles;
-  return (0, _core.styled)(((0, _core.set)([styled_12c, styles]), /*#__PURE__*/_react["default"].createElement(SText, (0, _core.map)("SText", {
-    render: _flexBox.Box,
-    tag: "span",
-    size: size
-  }))));
-}
+  var _ref2 = this ? this.asProps : arguments[0],
+      _ref5;
 
-var styled_190 = (0, _core.create)([]);
+  var SText = _flexBox.Box;
+  return _ref5 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SText, _ref5.cn("SText", _objectSpread({}, (0, _core.assignProps)({
+    "tag": "span"
+  }, _ref2))));
+}
 
 function Addon(props) {
-  var SAddon = props.Root,
-      size = props.size,
-      styles = props.styles;
-  return (0, _core.styled)(((0, _core.set)([styled_190, styles]), /*#__PURE__*/_react["default"].createElement(SAddon, (0, _core.map)("SAddon", {
-    render: _flexBox.Box,
-    tag: "span",
-    size: size
-  }))));
+  var _ref3 = this ? this.asProps : arguments[0],
+      _ref6;
+
+  var SAddon = _flexBox.Box;
+  return _ref6 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref6.cn("SAddon", _objectSpread({}, (0, _core.assignProps)({
+    "tag": "span"
+  }, _ref3))));
 }
 
 var Button = (0, _core["default"])(RootButton, {

package/lib/cjs/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button.tsx"],"names":["MAP_USE_DEFAULT_THEME","primary","secondary","tertiary","RootButton","size","asProps","SButton","Root","SInner","Box","SSpin","Children","styles","use","theme","loading","disabled","active","addonLeft","addonRight","keyboardFocused","neighborLocation","useTheme","Button","Text","Addon","Component","style","props","SText","SAddon"],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport createComponent, {\n  Component,\n  IFunctionProps,\n  Merge,\n  PropGetter,\n  styled,\n} from '@semcore/core';\nimport { INeighborItemProps, neighborLocationEnhance } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance, {\n  IKeyboardFocusProps,\n} from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport SpinButton from './SpinButton';\n\nimport style from './style/button.shadow.css';\n\nexport type ButtonSize = 'xl' | 'l' | 'm' | 's';\n\nexport interface IButtonProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {\n  /**\n   *  Button type\n   * @default secondary\n   */\n  use?: 'primary' | 'secondary' | 'tertiary';\n  /** Button theme */\n  theme?: 'info' | 'success' | 'warning' | 'danger' | 'muted' | 'invert';\n  /** Button activity state */\n  active?: boolean;\n  /**\n   *  Button size\n   * @default m\n   */\n  size?: ButtonSize;\n  /** Disabled button state */\n  disabled?: boolean;\n  /** Loading button state */\n  loading?: boolean;\n  /** Tag for the left Addon */\n  addonLeft?: React.ElementType;\n  /** Tag for the right Addon */\n  addonRight?: React.ElementType;\n}\n\nexport interface IButtonTextProps extends IBoxProps {\n  size?: ButtonSize;\n}\n\nexport interface IButtonAddonProps extends IBoxProps {\n  size?: ButtonSize;\n}\n\nexport interface IButtonContext extends IButtonProps {\n  getTextProps: PropGetter<RootButton['getTextProps']>;\n  getAddonProps: PropGetter<RootButton['getAddonProps']>;\n}\n\nexport const MAP_USE_DEFAULT_THEME = {\n  primary: 'info',\n  secondary: 'muted',\n  tertiary: 'info',\n};\n\nclass RootButton extends Component<IButtonProps> {\n  static displayName = 'Button';\n  static enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n  static style = style;\n  static defaultProps = {\n    use: 'secondary',\n    size: 'm',\n  };\n\n  getTextProps() {\n    const { size } = this.asProps;\n    return {\n      size,\n    };\n  }\n\n  getAddonProps() {\n    const { size } = this.asProps;\n    return {\n      size,\n    };\n  }\n\n  render() {\n    const { Root: SButton } = this;\n    const SInner = Box;\n    const SSpin = Box;\n    const {\n      Children,\n      styles,\n      use,\n      theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],\n      loading,\n      disabled = loading,\n      active,\n      size,\n      addonLeft,\n      addonRight,\n      keyboardFocused,\n      neighborLocation,\n    } = this.asProps;\n\n    const useTheme = use && theme ? `${use}-${theme}` : false;\n    return styled(styles)(\n      <SButton\n        render={Box}\n        type=\"button\"\n        tag=\"button\"\n        disabled={disabled}\n        theme={useTheme}\n        size={size}\n        active={active}\n        neighborLocation={neighborLocation}\n        keyboardFocused={keyboardFocused}\n      >\n        <SInner tag=\"span\" loading={loading}>\n          {addonLeft ? <Button.Addon tag={addonLeft} /> : null}\n          {addonTextChildren(Children, Button.Text, Button.Addon)}\n          {addonRight ? <Button.Addon tag={addonRight} /> : null}\n        </SInner>\n        {loading && (\n          <SSpin tag=\"span\">\n            <SpinButton centered size={size} theme={useTheme} />\n          </SSpin>\n        )}\n      </SButton>,\n    );\n  }\n}\n\nfunction Text(props: IFunctionProps<IButtonTextProps>) {\n  const { Root: SText, size, styles } = props;\n  return styled(styles)(<SText render={Box} tag=\"span\" size={size} />);\n}\n\nfunction Addon(props: IFunctionProps<IButtonAddonProps>) {\n  const { Root: SAddon, size, styles } = props;\n  return styled(styles)(<SAddon render={Box} tag=\"span\" size={size} />);\n}\n\nconst Button = createComponent<\n  Merge<IButtonProps, HTMLAttributes<HTMLButtonElement>>,\n  {\n    Addon: Merge<IButtonAddonProps, HTMLAttributes<HTMLSpanElement>>;\n    Text: Merge<IButtonTextProps, HTMLAttributes<HTMLSpanElement>>;\n  },\n  IButtonContext\n>(RootButton, {\n  Text,\n  Addon,\n});\n\nexport default Button;\n"],"file":"Button.js"}
+{"version":3,"sources":["../../src/Button.js"],"names":["MAP_USE_DEFAULT_THEME","primary","secondary","tertiary","RootButton","size","asProps","SButton","Box","SInner","SSpin","Children","styles","use","theme","loading","disabled","addonLeft","addonRight","useTheme","Button","Text","Addon","Component","style","props","SText","SAddon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport SpinButton from './SpinButton';\n\nimport style from './style/button.shadow.css';\n\nexport const MAP_USE_DEFAULT_THEME = {\n  primary: 'info',\n  secondary: 'muted',\n  tertiary: 'info',\n};\n\nclass RootButton extends Component {\n  static displayName = 'Button';\n  static enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n  static style = style;\n  static defaultProps = {\n    use: 'secondary',\n    size: 'm',\n  };\n\n  getTextProps() {\n    const { size } = this.asProps;\n    return {\n      size,\n    };\n  }\n\n  getAddonProps() {\n    const { size } = this.asProps;\n    return {\n      size,\n    };\n  }\n\n  render() {\n    const SButton = Root;\n    const SInner = Box;\n    const SSpin = Box;\n    const {\n      Children,\n      styles,\n      use,\n      theme = typeof use === 'string' && MAP_USE_DEFAULT_THEME[use],\n      loading,\n      disabled = loading,\n      size,\n      addonLeft,\n      addonRight,\n    } = this.asProps;\n\n    const useTheme = use && theme ? `${use}-${theme}` : false;\n    return sstyled(styles)(\n      <SButton render={Box} type=\"button\" tag=\"button\" disabled={disabled} use:theme={useTheme}>\n        <SInner tag=\"span\" loading={loading}>\n          {addonLeft ? <Button.Addon tag={addonLeft} /> : null}\n          {addonTextChildren(Children, Button.Text, Button.Addon)}\n          {addonRight ? <Button.Addon tag={addonRight} /> : null}\n        </SInner>\n        {loading && (\n          <SSpin tag=\"span\">\n            <SpinButton centered size={size} theme={useTheme} />\n          </SSpin>\n        )}\n      </SButton>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Button = createComponent(RootButton, {\n  Text,\n  Addon,\n});\n\nexport default Button;\n"],"file":"Button.js"}

package/lib/cjs/SpinButton.js

@@ -23,25 +23,23 @@ var SPIN_SIZE_MAP = {
   s: 'xxs'
 };
 exports.SPIN_SIZE_MAP = SPIN_SIZE_MAP;
-var SPIN_THEME_MAP;
+var SPIN_THEME_MAP = {
+  'primary-info': 'invert',
+  'primary-success': 'invert',
+  'primary-warning': 'invert',
+  'primary-danger': 'invert',
+  'secondary-invert': 'invert',
+  'secondary-muted': 'gray40',
+  'secondary-info': 'light-blue',
+  'tertiary-invert': 'invert',
+  'tertiary-info': 'light-blue'
+};
 exports.SPIN_THEME_MAP = SPIN_THEME_MAP;
 
-(function (SPIN_THEME_MAP) {
-  SPIN_THEME_MAP["primary-info"] = "invert";
-  SPIN_THEME_MAP["primary-success"] = "invert";
-  SPIN_THEME_MAP["primary-warning"] = "invert";
-  SPIN_THEME_MAP["primary-danger"] = "invert";
-  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 || (exports.SPIN_THEME_MAP = SPIN_THEME_MAP = {}));
-
-function SpinButton(props) {
-  var theme = props.theme,
-      size = props.size,
-      others = (0, _objectWithoutProperties2["default"])(props, ["theme", "size"]);
+function SpinButton(_ref) {
+  var theme = _ref.theme,
+      size = _ref.size,
+      others = (0, _objectWithoutProperties2["default"])(_ref, ["theme", "size"]);
   return /*#__PURE__*/_react["default"].createElement(_spin["default"], (0, _extends2["default"])({
     size: typeof size == 'string' ? SPIN_SIZE_MAP[size] : size,
     theme: typeof theme === 'string' ? SPIN_THEME_MAP[theme] || 'dark' : theme

package/lib/cjs/SpinButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SpinButton.tsx"],"names":["SPIN_SIZE_MAP","xl","l","m","s","SPIN_THEME_MAP","SpinButton","props","theme","size","others"],"mappings":";;;;;;;;;;;;;;AAAA;;AAEA;;AAEO,IAAMA,aAAa,GAAG;AAC3BC,EAAAA,EAAE,EAAE,GADuB;AAE3BC,EAAAA,CAAC,EAAE,GAFwB;AAG3BC,EAAAA,CAAC,EAAE,IAHwB;AAI3BC,EAAAA,CAAC,EAAE;AAJwB,CAAtB;;IAOKC,c;;;WAAAA,c;AAAAA,EAAAA,c;AAAAA,EAAAA,c;AAAAA,EAAAA,c;AAAAA,EAAAA,c;AAAAA,EAAAA,c;AAAAA,EAAAA,c;AAAAA,EAAAA,c;AAAAA,EAAAA,c;AAAAA,EAAAA,c;GAAAA,c,8BAAAA,c;;AAkBG,SAASC,UAAT,CACbC,KADa,EAEb;AAAA,MACQC,KADR,GACmCD,KADnC,CACQC,KADR;AAAA,MACeC,IADf,GACmCF,KADnC,CACeE,IADf;AAAA,MACwBC,MADxB,6CACmCH,KADnC;AAEA,sBACE,gCAAC,gBAAD;AACE,IAAA,IAAI,EAAG,OAAOE,IAAP,IAAe,QAAf,GAA0BT,aAAa,CAACS,IAAD,CAAvC,GAAgDA,IADzD;AAEE,IAAA,KAAK,EAAE,OAAOD,KAAP,KAAiB,QAAjB,GAA4BH,cAAc,CAACG,KAAD,CAAd,IAAyB,MAArD,GAA8DA;AAFvE,KAGME,MAHN,EADF;AAOD","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { Merge } from '@semcore/core';\nimport Spin, { ISpinProps } from '@semcore/spin';\n\nexport const SPIN_SIZE_MAP = {\n  xl: 'm',\n  l: 's',\n  m: 'xs',\n  s: 'xxs',\n};\n\nexport enum SPIN_THEME_MAP {\n  'primary-info' = 'invert',\n  'primary-success' = 'invert',\n  'primary-warning' = 'invert',\n  'primary-danger' = 'invert',\n  'secondary-invert' = 'invert',\n  'secondary-muted' = 'gray40',\n  'secondary-info' = 'light-blue',\n  'tertiary-invert' = 'invert',\n  'tertiary-info' = 'light-blue',\n}\n\nexport interface ISpinButtonProps {\n  size?: 'xl' | 'l' | 'm' | 's' | false;\n  theme?: string | false;\n  centered?: boolean;\n}\n\nexport default function SpinButton(\n  props: Merge<ISpinButtonProps, HTMLAttributes<HTMLSpanElement>>,\n) {\n  const { theme, size, ...others } = props;\n  return (\n    <Spin\n      size={(typeof size == 'string' ? SPIN_SIZE_MAP[size] : size) as ISpinProps['size']}\n      theme={typeof theme === 'string' ? SPIN_THEME_MAP[theme] || 'dark' : theme}\n      {...others}\n    />\n  );\n}\n"],"file":"SpinButton.js"}
+{"version":3,"sources":["../../src/SpinButton.js"],"names":["SPIN_SIZE_MAP","xl","l","m","s","SPIN_THEME_MAP","SpinButton","theme","size","others"],"mappings":";;;;;;;;;;;;;;AAAA;;AACA;;AAEO,IAAMA,aAAa,GAAG;AAC3BC,EAAAA,EAAE,EAAE,GADuB;AAE3BC,EAAAA,CAAC,EAAE,GAFwB;AAG3BC,EAAAA,CAAC,EAAE,IAHwB;AAI3BC,EAAAA,CAAC,EAAE;AAJwB,CAAtB;;AAOA,IAAMC,cAAc,GAAG;AAC5B,kBAAgB,QADY;AAE5B,qBAAmB,QAFS;AAG5B,qBAAmB,QAHS;AAI5B,oBAAkB,QAJU;AAK5B,sBAAoB,QALQ;AAM5B,qBAAmB,QANS;AAO5B,oBAAkB,YAPU;AAQ5B,qBAAmB,QARS;AAS5B,mBAAiB;AATW,CAAvB;;;AAYQ,SAASC,UAAT,OAAgD;AAAA,MAA1BC,KAA0B,QAA1BA,KAA0B;AAAA,MAAnBC,IAAmB,QAAnBA,IAAmB;AAAA,MAAVC,MAAU;AAC7D,sBACE,gCAAC,gBAAD;AACE,IAAA,IAAI,EAAE,OAAOD,IAAP,IAAe,QAAf,GAA0BR,aAAa,CAACQ,IAAD,CAAvC,GAAgDA,IADxD;AAEE,IAAA,KAAK,EAAE,OAAOD,KAAP,KAAiB,QAAjB,GAA4BF,cAAc,CAACE,KAAD,CAAd,IAAyB,MAArD,GAA8DA;AAFvE,KAGME,MAHN,EADF;AAOD","sourcesContent":["import React from 'react';\nimport Spin from '@semcore/spin';\n\nexport const SPIN_SIZE_MAP = {\n  xl: 'm',\n  l: 's',\n  m: 'xs',\n  s: 'xxs',\n};\n\nexport const SPIN_THEME_MAP = {\n  'primary-info': 'invert',\n  'primary-success': 'invert',\n  'primary-warning': 'invert',\n  'primary-danger': 'invert',\n  'secondary-invert': 'invert',\n  'secondary-muted': 'gray40',\n  'secondary-info': 'light-blue',\n  'tertiary-invert': 'invert',\n  'tertiary-info': 'light-blue',\n};\n\nexport default function SpinButton({ theme, size, ...others }) {\n  return (\n    <Spin\n      size={typeof size == 'string' ? SPIN_SIZE_MAP[size] : size}\n      theme={typeof theme === 'string' ? SPIN_THEME_MAP[theme] || 'dark' : theme}\n      {...others}\n    />\n  );\n}\n"],"file":"SpinButton.js"}

package/lib/cjs/index.js

@@ -18,6 +18,7 @@ var _Button = _interopRequireWildcard(require("./Button"));
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Button[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './Button';\nexport * from './Button';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './Button';\nexport * from './Button';\n"],"file":"index.js"}

package/lib/cjs/style/button.shadow.css

@@ -50,31 +50,31 @@ SButton[keyboardFocused] {
 }
 
 SButton[size='s'] {
-  height: media(18px);
-  min-width: media(18px);
+  height: 18px;
+  min-width: 18px;
   border-radius: 2px;
-  font-size: media(10px);
+  font-size: 10px;
 }
 
 SButton[size='m'] {
-  height: media(26px);
-  min-width: media(26px);
+  height: 26px;
+  min-width: 26px;
   border-radius: 3px;
-  font-size: media(12px);
+  font-size: 12px;
 }
 
 SButton[size='l'] {
-  height: media(32px);
-  min-width: media(32px);
+  height: 32px;
+  min-width: 32px;
   border-radius: 4px;
-  font-size: media(14px);
+  font-size: 14px;
 }
 
 SButton[size='xl'] {
-  height: media(42px);
-  min-width: media(42px);
+  height: 42px;
+  min-width: 42px;
   border-radius: 5px;
-  font-size: media(16px);
+  font-size: 16px;
 }
 
 SButton[theme='primary-info'] {
@@ -295,27 +295,27 @@ SInner[loading] {
 
 SText {
   display: inline-flex;
-  line-height: 1;
+  line-height: 1.1;
 }
 
 SText[size='s'] {
-  margin-left: media(4px);
-  margin-right: media(4px);
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
 SText[size='m'] {
-  margin-left: media(8px);
-  margin-right: media(8px);
+  margin-left: 8px;
+  margin-right: 8px;
 }
 
 SText[size='l'] {
-  margin-left: media(8px);
-  margin-right: media(8px);
+  margin-left: 8px;
+  margin-right: 8px;
 }
 
 SText[size='xl'] {
-  margin-left: media(12px);
-  margin-right: media(12px);
+  margin-left: 12px;
+  margin-right: 12px;
 }
 
 SAddon {
@@ -326,60 +326,60 @@ SAddon {
 
 SAddon[size='s'] {
   &:not(:only-child):first-child {
-    margin-left: media(4px);
+    margin-left: 4px;
   }
 
   &:not(:only-child):last-child {
-    margin-right: media(4px);
+    margin-right: 4px;
   }
 
   &:only-child {
-    margin-left: media(-2px);
-    margin-right: media(-2px);
+    margin-left: -2px;
+    margin-right: -2px;
   }
 }
 
 SAddon[size='m'] {
   &:not(:only-child):first-child {
-    margin-left: media(8px);
+    margin-left: 8px;
   }
 
   &:not(:only-child):last-child {
-    margin-right: media(8px);
+    margin-right: 8px;
   }
 
   &:only-child {
-    margin-left: media(-4px);
-    margin-right: media(-4px);
+    margin-left: -4px;
+    margin-right: -4px;
   }
 }
 
 SAddon[size='l'] {
   &:not(:only-child):first-child {
-    margin-left: media(8px);
+    margin-left: 8px;
   }
 
   &:not(:only-child):last-child {
-    margin-right: media(8px);
+    margin-right: 8px;
   }
 
   &:only-child {
-    margin-left: media(-4px);
-    margin-right: media(-4px);
+    margin-left: -4px;
+    margin-right: -4px;
   }
 }
 
 SAddon[size='xl'] {
   &:not(:only-child):first-child {
-    margin-left: media(12px);
+    margin-left: 12px;
   }
 
   &:not(:only-child):last-child {
-    margin-right: media(12px);
+    margin-right: 12px;
   }
 
   &:only-child {
-    margin-left: media(-6px);
-    margin-right: media(-6px);
+    margin-left: -6px;
+    margin-right: -6px;
   }
 }