@skbkontur/react-ui 0.0.0-5188be76c1 → 0.0.0-53ccdcbfcc

package/cjs/components/Button/Button.styles.js

@@ -1,4 +1,6 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = exports.activeStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = exports.activeStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _chars = require("../../lib/chars");
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _Mixins = require("../../lib/styles/Mixins");
 var _client = require("../../lib/client");
@@ -13,6 +15,7 @@ var _Button = require("./Button.mixins");var _templateObject, _templateObject2,
 
 
 var globalClasses = (0, _Emotion.prefix)('button')({
+  root: 'root',
   arrowHelper: 'arrow-helper',
   arrowHelperTop: 'arrow-helper-top',
   arrowHelperBottom: 'arrow-helper-bottom',
@@ -25,6 +28,7 @@ var globalClasses = (0, _Emotion.prefix)('button')({
 
 var styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
+    // ! DONE
     return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      ", ";\n\n      transition: background-color ", " ", "\n        ", ";\n\n      background-clip: ", ";\n      background-position: center;\n      background-repeat: no-repeat;\n      background-size: contain;\n      cursor: pointer;\n      display: inline-block;\n      position: relative;\n      text-align: center;\n      width: 100%;\n      height: 100%; // fix height in ie11\n\n      .", " {\n        content: '';\n        border-radius: inherit;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n      }\n\n      &::-moz-focus-inner {\n        border: 0;\n        padding: 0;\n      }\n      &::after {\n        content: '';\n        display: inline-block;\n        vertical-align: baseline;\n        width: 0;\n      }\n\n      &:hover:enabled svg {\n        color: ", ";\n      }\n      &:disabled svg {\n        color: ", ";\n      }\n      &:enabled svg {\n        color: ", ";\n      }\n    "])),
     (0, _Mixins.resetButton)(),
     (0, _Mixins.resetText)(),
@@ -174,23 +178,23 @@ var styles = (0, _Emotion.memoizeStyle)({
     return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n\n      ", ";\n    "])),
     t.btnBorderRadiusSmall,
 
-    (0, _Button.buttonSizeMixin)(
-    t.btnFontSizeSmall,
-    t.btnLineHeightSmall,
-    t.btnPaddingXSmall,
-    t.btnPaddingYSmall,
-    t.fontFamilyCompensationBaseline));
+    (0, _Button.buttonSizeMixin)({
+      fontSize: t.btnFontSizeSmall,
+      lineHeight: t.btnLineHeightSmall,
+      paddingX: t.btnPaddingXSmall,
+      paddingY: t.btnPaddingYSmall,
+      fontFamilyCompensation: t.fontFamilyCompensationBaseline }));
 
 
   },
 
   sizeSmallIE11: function sizeSmallIE11(t) {
     return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
-    (0, _Button.buttonSizeMixinIE11)(
-    t.btnFontSizeSmall,
-    t.btnPaddingXSmall,
-    t.btnPaddingYSmall,
-    t.fontFamilyCompensationBaseline));
+    (0, _Button.buttonSizeMixinIE11)({
+      fontSize: t.btnFontSizeSmall,
+      paddingX: t.btnPaddingXSmall,
+      paddingY: t.btnPaddingYSmall,
+      fontFamilyCompensation: t.fontFamilyCompensationBaseline }));
 
 
   },
@@ -199,23 +203,23 @@ var styles = (0, _Emotion.memoizeStyle)({
     return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n\n      ", ";\n    "])),
     t.btnBorderRadiusMedium,
 
-    (0, _Button.buttonSizeMixin)(
-    t.btnFontSizeMedium,
-    t.btnLineHeightMedium,
-    t.btnPaddingXMedium,
-    t.btnPaddingYMedium,
-    t.fontFamilyCompensationBaseline));
+    (0, _Button.buttonSizeMixin)({
+      fontSize: t.btnFontSizeMedium,
+      lineHeight: t.btnLineHeightMedium,
+      paddingX: t.btnPaddingXMedium,
+      paddingY: t.btnPaddingYMedium,
+      fontFamilyCompensation: t.fontFamilyCompensationBaseline }));
 
 
   },
 
   sizeMediumIE11: function sizeMediumIE11(t) {
     return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
-    (0, _Button.buttonSizeMixinIE11)(
-    t.btnFontSizeMedium,
-    t.btnPaddingXMedium,
-    t.btnPaddingYMedium,
-    t.fontFamilyCompensationBaseline));
+    (0, _Button.buttonSizeMixinIE11)({
+      fontSize: t.btnFontSizeMedium,
+      paddingX: t.btnPaddingXMedium,
+      paddingY: t.btnPaddingYMedium,
+      fontFamilyCompensation: t.fontFamilyCompensationBaseline }));
 
 
   },
@@ -224,23 +228,23 @@ var styles = (0, _Emotion.memoizeStyle)({
     return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: ", ";\n\n      ", ";\n    "])),
     t.btnBorderRadiusLarge,
 
-    (0, _Button.buttonSizeMixin)(
-    t.btnFontSizeLarge,
-    t.btnLineHeightLarge,
-    t.btnPaddingXLarge,
-    t.btnPaddingYLarge,
-    t.fontFamilyCompensationBaseline));
+    (0, _Button.buttonSizeMixin)({
+      fontSize: t.btnFontSizeLarge,
+      lineHeight: t.btnLineHeightLarge,
+      paddingX: t.btnPaddingXLarge,
+      paddingY: t.btnPaddingYLarge,
+      fontFamilyCompensation: t.fontFamilyCompensationBaseline }));
 
 
   },
 
   sizeLargeIE11: function sizeLargeIE11(t) {
     return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
-    (0, _Button.buttonSizeMixinIE11)(
-    t.btnFontSizeLarge,
-    t.btnPaddingXLarge,
-    t.btnPaddingYLarge,
-    t.fontFamilyCompensationBaseline));
+    (0, _Button.buttonSizeMixinIE11)({
+      fontSize: t.btnFontSizeLarge,
+      paddingX: t.btnPaddingXLarge,
+      paddingY: t.btnPaddingYLarge,
+      fontFamilyCompensation: t.fontFamilyCompensationBaseline }));
 
 
   },
@@ -380,7 +384,12 @@ var styles = (0, _Emotion.memoizeStyle)({
     return (0, _Emotion.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: inset 0 0 0 ", " ", ";\n\n      ", "\n    "])),
     t.btnInsetWidth, t.btnInsetColor,
 
-    (0, _Button.arrowOutlineMixin)(t.btnInsetWidth, t.btnBorderColorWarning, t.btnOutlineWidth, t.btnInsetColor));
+    (0, _Button.arrowOutlineMixin)({
+      insetWidth: t.btnInsetWidth,
+      outlineColor: t.btnBorderColorWarning,
+      outlineWidth: t.btnOutlineWidth,
+      insetColor: t.btnInsetColor }));
+
 
   },
 
@@ -388,7 +397,12 @@ var styles = (0, _Emotion.memoizeStyle)({
     return (0, _Emotion.css)(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: inset 0 0 0 ", " ", ";\n\n      ", "\n    "])),
     t.btnInsetWidth, t.btnInsetColor,
 
-    (0, _Button.arrowOutlineMixin)(t.btnInsetWidth, t.btnBorderColorError, t.btnOutlineWidth, t.btnInsetColor));
+    (0, _Button.arrowOutlineMixin)({
+      insetWidth: t.btnInsetWidth,
+      outlineColor: t.btnBorderColorError,
+      outlineWidth: t.btnOutlineWidth,
+      insetColor: t.btnInsetColor }));
+
 
   },
 
@@ -396,7 +410,12 @@ var styles = (0, _Emotion.memoizeStyle)({
     return (0, _Emotion.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: inset 0 0 0 ", " ", ";\n\n      ", "\n    "])),
     t.btnInsetWidth, t.btnOutlineColorFocus,
 
-    (0, _Button.arrowOutlineMixin)(t.btnInsetWidth, t.btnBorderColorFocus, t.btnOutlineWidth, t.btnOutlineColorFocus));
+    (0, _Button.arrowOutlineMixin)({
+      insetWidth: t.btnInsetWidth,
+      outlineColor: t.btnBorderColorFocus,
+      outlineWidth: t.btnOutlineWidth,
+      insetColor: t.btnOutlineColorFocus }));
+
 
   },
 
@@ -513,24 +532,24 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   default: function _default(t) {
     return (0, _Emotion.css)(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      &:hover:enabled {\n        ", ";\n      }\n\n      &:active:enabled {\n        ", ";\n      }\n    "])),
-    (0, _Button.buttonUseMixin)(
-    t.btnDefaultBg,
-    t.btnDefaultBgStart,
-    t.btnDefaultBgEnd,
-    t.btnDefaultTextColor,
-    t.btnDefaultBorderColor,
-    t.btnDefaultBorderBottomColor,
-    t.btnBorderWidth),
+    (0, _Button.buttonUseMixin)({
+      btnBackground: t.btnDefaultBg,
+      btnBackgroundStart: t.btnDefaultBgStart,
+      btnBackgroundEnd: t.btnDefaultBgEnd,
+      color: t.btnDefaultTextColor,
+      borderColor: t.btnDefaultBorderColor,
+      borderBottomColor: t.btnDefaultBorderBottomColor,
+      borderWidth: t.btnBorderWidth }),
 
 
 
-    (0, _Button.buttonHoverMixin)(
-    t.btnDefaultHoverBg,
-    t.btnDefaultHoverBgStart,
-    t.btnDefaultHoverBgEnd,
-    t.btnDefaultHoverBorderColor,
-    t.btnDefaultHoverBorderBottomColor,
-    t.btnBorderWidth),
+    (0, _Button.buttonHoverMixin)({
+      btnBackground: t.btnDefaultHoverBg,
+      btnBackgroundStart: t.btnDefaultHoverBgStart,
+      btnBackgroundEnd: t.btnDefaultHoverBgEnd,
+      borderColor: t.btnDefaultHoverBorderColor,
+      borderBottomColor: t.btnDefaultHoverBorderBottomColor,
+      borderWidth: t.btnBorderWidth }),
 
 
 
@@ -542,24 +561,24 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   primary: function primary(t) {
     return (0, _Emotion.css)(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      &:hover:enabled {\n        ", ";\n      }\n\n      &:active:enabled {\n        ", "\n      }\n    "])),
-    (0, _Button.buttonUseMixin)(
-    t.btnPrimaryBg,
-    t.btnPrimaryBgStart,
-    t.btnPrimaryBgEnd,
-    t.btnPrimaryTextColor,
-    t.btnPrimaryBorderColor,
-    t.btnPrimaryBorderBottomColor,
-    t.btnBorderWidth),
+    (0, _Button.buttonUseMixin)({
+      btnBackground: t.btnPrimaryBg,
+      btnBackgroundStart: t.btnPrimaryBgStart,
+      btnBackgroundEnd: t.btnPrimaryBgEnd,
+      color: t.btnPrimaryTextColor,
+      borderColor: t.btnPrimaryBorderColor,
+      borderBottomColor: t.btnPrimaryBorderBottomColor,
+      borderWidth: t.btnBorderWidth }),
 
 
 
-    (0, _Button.buttonHoverMixin)(
-    t.btnPrimaryHoverBg,
-    t.btnPrimaryHoverBgStart,
-    t.btnPrimaryHoverBgEnd,
-    t.btnPrimaryHoverBorderColor,
-    t.btnPrimaryHoverBorderBottomColor,
-    t.btnBorderWidth),
+    (0, _Button.buttonHoverMixin)({
+      btnBackground: t.btnPrimaryHoverBg,
+      btnBackgroundStart: t.btnPrimaryHoverBgStart,
+      btnBackgroundEnd: t.btnPrimaryHoverBgEnd,
+      borderColor: t.btnPrimaryHoverBorderColor,
+      borderBottomColor: t.btnPrimaryHoverBorderBottomColor,
+      borderWidth: t.btnBorderWidth }),
 
 
 
@@ -571,24 +590,24 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   success: function success(t) {
     return (0, _Emotion.css)(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      &:hover:enabled {\n        ", ";\n      }\n\n      &:active:enabled {\n        ", "\n      }\n    "])),
-    (0, _Button.buttonUseMixin)(
-    t.btnSuccessBg,
-    t.btnSuccessBgStart,
-    t.btnSuccessBgEnd,
-    t.btnSuccessTextColor,
-    t.btnSuccessBorderColor,
-    t.btnSuccessBorderBottomColor,
-    t.btnBorderWidth),
+    (0, _Button.buttonUseMixin)({
+      btnBackground: t.btnSuccessBg,
+      btnBackgroundStart: t.btnSuccessBgStart,
+      btnBackgroundEnd: t.btnSuccessBgEnd,
+      color: t.btnSuccessTextColor,
+      borderColor: t.btnSuccessBorderColor,
+      borderBottomColor: t.btnSuccessBorderBottomColor,
+      borderWidth: t.btnBorderWidth }),
 
 
 
-    (0, _Button.buttonHoverMixin)(
-    t.btnSuccessHoverBg,
-    t.btnSuccessHoverBgStart,
-    t.btnSuccessHoverBgEnd,
-    t.btnSuccessHoverBorderColor,
-    t.btnSuccessHoverBorderBottomColor,
-    t.btnBorderWidth),
+    (0, _Button.buttonHoverMixin)({
+      btnBackground: t.btnSuccessHoverBg,
+      btnBackgroundStart: t.btnSuccessHoverBgStart,
+      btnBackgroundEnd: t.btnSuccessHoverBgEnd,
+      borderColor: t.btnSuccessHoverBorderColor,
+      borderBottomColor: t.btnSuccessHoverBorderBottomColor,
+      borderWidth: t.btnBorderWidth }),
 
 
 
@@ -600,24 +619,24 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   danger: function danger(t) {
     return (0, _Emotion.css)(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      &:hover:enabled {\n        ", ";\n      }\n\n      &:active:enabled {\n        ", "\n      }\n    "])),
-    (0, _Button.buttonUseMixin)(
-    t.btnDangerBg,
-    t.btnDangerBgStart,
-    t.btnDangerBgEnd,
-    t.btnDangerTextColor,
-    t.btnDangerBorderColor,
-    t.btnDangerBorderBottomColor,
-    t.btnBorderWidth),
+    (0, _Button.buttonUseMixin)({
+      btnBackground: t.btnDangerBg,
+      btnBackgroundStart: t.btnDangerBgStart,
+      btnBackgroundEnd: t.btnDangerBgEnd,
+      color: t.btnDangerTextColor,
+      borderColor: t.btnDangerBorderColor,
+      borderBottomColor: t.btnDangerBorderBottomColor,
+      borderWidth: t.btnBorderWidth }),
 
 
 
-    (0, _Button.buttonHoverMixin)(
-    t.btnDangerHoverBg,
-    t.btnDangerHoverBgStart,
-    t.btnDangerHoverBgEnd,
-    t.btnDangerHoverBorderColor,
-    t.btnDangerHoverBorderBottomColor,
-    t.btnBorderWidth),
+    (0, _Button.buttonHoverMixin)({
+      btnBackground: t.btnDangerHoverBg,
+      btnBackgroundStart: t.btnDangerHoverBgStart,
+      btnBackgroundEnd: t.btnDangerHoverBgEnd,
+      borderColor: t.btnDangerHoverBorderColor,
+      borderBottomColor: t.btnDangerHoverBorderBottomColor,
+      borderWidth: t.btnBorderWidth }),
 
 
 
@@ -629,24 +648,24 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   pay: function pay(t) {
     return (0, _Emotion.css)(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      &:hover:enabled {\n        ", ";\n      }\n\n      &:active:enabled {\n        ", "\n      }\n    "])),
-    (0, _Button.buttonUseMixin)(
-    t.btnPayBg,
-    t.btnPayBgStart,
-    t.btnPayBgEnd,
-    t.btnPayTextColor,
-    t.btnPayBorderColor,
-    t.btnPayBorderBottomColor,
-    t.btnBorderWidth),
+    (0, _Button.buttonUseMixin)({
+      btnBackground: t.btnPayBg,
+      btnBackgroundStart: t.btnPayBgStart,
+      btnBackgroundEnd: t.btnPayBgEnd,
+      color: t.btnPayTextColor,
+      borderColor: t.btnPayBorderColor,
+      borderBottomColor: t.btnPayBorderBottomColor,
+      borderWidth: t.btnBorderWidth }),
 
 
 
-    (0, _Button.buttonHoverMixin)(
-    t.btnPayHoverBg,
-    t.btnPayHoverBgStart,
-    t.btnPayHoverBgEnd,
-    t.btnPayHoverBorderColor,
-    t.btnPayHoverBorderBottomColor,
-    t.btnBorderWidth),
+    (0, _Button.buttonHoverMixin)({
+      btnBackground: t.btnPayHoverBg,
+      btnBackgroundStart: t.btnPayHoverBgStart,
+      btnBackgroundEnd: t.btnPayHoverBgEnd,
+      borderColor: t.btnPayHoverBorderColor,
+      borderBottomColor: t.btnPayHoverBorderBottomColor,
+      borderWidth: t.btnBorderWidth }),
 
 
 
@@ -667,10 +686,19 @@ var styles = (0, _Emotion.memoizeStyle)({
 
 
 
-    (0, _Button.buttonUseMixin)(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, '', t.btnBorderWidth),
+    (0, _Button.buttonUseMixin)({
+      btnBackground: t.btnTextBg,
+      color: t.btnTextTextColor,
+      borderColor: t.btnTextBorderColor,
+      borderWidth: t.btnBorderWidth }),
+
+
 
+    (0, _Button.buttonHoverMixin)({
+      btnBackground: t.btnTextHoverBg,
+      borderColor: t.btnTextHoverBorderColor,
+      borderWidth: t.btnBorderWidth }),
 
-    (0, _Button.buttonHoverMixin)(t.btnTextHoverBg, '', '', t.btnTextHoverBorderColor, '', t.btnBorderWidth),
 
 
 
@@ -681,21 +709,22 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   backless: function backless(t) {
     return (0, _Emotion.css)(_templateObject51 || (_templateObject51 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      color: ", ";\n      background: transparent;\n\n      &:hover:enabled {\n        ", ";\n      }\n\n      &:active:enabled {\n        ", "\n      }\n    "])),
-    (0, _Button.buttonUseMixin)(
-    t.btnBacklessBg,
-    '',
-    '',
-    t.btnBacklessTextColor,
-    t.btnBacklessBorderColor,
-    '',
-    t.btnBorderWidth),
+    (0, _Button.buttonUseMixin)({
+      btnBackground: t.btnBacklessBg,
+      color: t.btnBacklessTextColor,
+      borderColor: t.btnBacklessBorderColor,
+      borderWidth: t.btnBorderWidth }),
 
 
     t.btnDefaultTextColor,
 
 
 
-    (0, _Button.buttonHoverMixin)(t.btnBacklessHoverBg, '', '', t.btnBacklessHoverBorderColor, '', t.btnBorderWidth),
+    (0, _Button.buttonHoverMixin)({
+      btnBackground: t.btnBacklessHoverBg,
+      borderColor: t.btnBacklessHoverBorderColor,
+      borderWidth: t.btnBorderWidth }),
+
 
 
 
@@ -919,8 +948,13 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
-  icon: function icon() {
-    return (0, _Emotion.css)(_templateObject73 || (_templateObject73 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
+  icon: function icon(t) {
+    var space = (0, _ThemeHelpers.isTheme2022)(t) ? "'" + _chars.ZERO_WIDTH_SPACE_CSS + "'" : null;
+    return (0, _Emotion.css)(_templateObject73 || (_templateObject73 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n\n      &::before {\n        content: ", ";\n      }\n    "])),
+
+
+
+    space);
 
 
   },
@@ -992,13 +1026,13 @@ var activeStyles = (0, _Emotion.memoizeStyle)({
   default: function _default(t) {
     return (0, _Emotion.css)(_templateObject81 || (_templateObject81 = (0, _taggedTemplateLiteralLoose2.default)(["\n      & {\n        ", ";\n      }\n    "])),
 
-    (0, _Button.buttonActiveMixin)(
-    t.btnDefaultActiveBg,
-    t.btnDefaultActiveShadow,
-    t.btnDefaultActiveBorderColor,
-    t.btnDefaultActiveBorderTopColor,
-    t.btnBorderWidth,
-    t.btnArrowBgImageActive));
+    (0, _Button.buttonActiveMixin)({
+      btnBackground: t.btnDefaultActiveBg,
+      btnShadow: t.btnDefaultActiveShadow,
+      borderColor: t.btnDefaultActiveBorderColor,
+      borderTopColor: t.btnDefaultActiveBorderTopColor,
+      borderWidth: t.btnBorderWidth,
+      arrowBgImage: t.btnArrowBgImageActive }));
 
 
 
@@ -1007,13 +1041,13 @@ var activeStyles = (0, _Emotion.memoizeStyle)({
   primary: function primary(t) {
     return (0, _Emotion.css)(_templateObject82 || (_templateObject82 = (0, _taggedTemplateLiteralLoose2.default)(["\n      & {\n        ", ";\n      }\n    "])),
 
-    (0, _Button.buttonActiveMixin)(
-    t.btnPrimaryActiveBg,
-    t.btnPrimaryActiveShadow,
-    t.btnPrimaryActiveBorderColor,
-    t.btnPrimaryActiveBorderTopColor,
-    t.btnBorderWidth,
-    t.btnArrowBgImageActive));
+    (0, _Button.buttonActiveMixin)({
+      btnBackground: t.btnPrimaryActiveBg,
+      btnShadow: t.btnPrimaryActiveShadow,
+      borderColor: t.btnPrimaryActiveBorderColor,
+      borderTopColor: t.btnPrimaryActiveBorderTopColor,
+      borderWidth: t.btnBorderWidth,
+      arrowBgImage: t.btnArrowBgImageActive }));
 
 
 
@@ -1022,13 +1056,13 @@ var activeStyles = (0, _Emotion.memoizeStyle)({
   success: function success(t) {
     return (0, _Emotion.css)(_templateObject83 || (_templateObject83 = (0, _taggedTemplateLiteralLoose2.default)(["\n      & {\n        ", ";\n      }\n    "])),
 
-    (0, _Button.buttonActiveMixin)(
-    t.btnSuccessActiveBg,
-    t.btnSuccessActiveShadow,
-    t.btnSuccessActiveBorderColor,
-    t.btnSuccessActiveBorderTopColor,
-    t.btnBorderWidth,
-    t.btnArrowBgImageActive));
+    (0, _Button.buttonActiveMixin)({
+      btnBackground: t.btnSuccessActiveBg,
+      btnShadow: t.btnSuccessActiveShadow,
+      borderColor: t.btnSuccessActiveBorderColor,
+      borderTopColor: t.btnSuccessActiveBorderTopColor,
+      borderWidth: t.btnBorderWidth,
+      arrowBgImage: t.btnArrowBgImageActive }));
 
 
 
@@ -1037,13 +1071,13 @@ var activeStyles = (0, _Emotion.memoizeStyle)({
   danger: function danger(t) {
     return (0, _Emotion.css)(_templateObject84 || (_templateObject84 = (0, _taggedTemplateLiteralLoose2.default)(["\n      & {\n        ", ";\n      }\n    "])),
 
-    (0, _Button.buttonActiveMixin)(
-    t.btnDangerActiveBg,
-    t.btnDangerActiveShadow,
-    t.btnDangerActiveBorderColor,
-    t.btnDangerActiveBorderTopColor,
-    t.btnBorderWidth,
-    t.btnArrowBgImageActive));
+    (0, _Button.buttonActiveMixin)({
+      btnBackground: t.btnDangerActiveBg,
+      btnShadow: t.btnDangerActiveShadow,
+      borderColor: t.btnDangerActiveBorderColor,
+      borderTopColor: t.btnDangerActiveBorderTopColor,
+      borderWidth: t.btnBorderWidth,
+      arrowBgImage: t.btnArrowBgImageActive }));
 
 
 
@@ -1052,13 +1086,13 @@ var activeStyles = (0, _Emotion.memoizeStyle)({
   pay: function pay(t) {
     return (0, _Emotion.css)(_templateObject85 || (_templateObject85 = (0, _taggedTemplateLiteralLoose2.default)(["\n      & {\n        ", ";\n      }\n    "])),
 
-    (0, _Button.buttonActiveMixin)(
-    t.btnPayActiveBg,
-    t.btnPayActiveShadow,
-    t.btnPayActiveBorderColor,
-    t.btnPayActiveBorderTopColor,
-    t.btnBorderWidth,
-    t.btnArrowBgImageActive));
+    (0, _Button.buttonActiveMixin)({
+      btnBackground: t.btnPayActiveBg,
+      btnShadow: t.btnPayActiveShadow,
+      borderColor: t.btnPayActiveBorderColor,
+      borderTopColor: t.btnPayActiveBorderTopColor,
+      borderWidth: t.btnBorderWidth,
+      arrowBgImage: t.btnArrowBgImageActive }));
 
 
 
@@ -1075,7 +1109,12 @@ var activeStyles = (0, _Emotion.memoizeStyle)({
   text: function text(t) {
     return (0, _Emotion.css)(_templateObject87 || (_templateObject87 = (0, _taggedTemplateLiteralLoose2.default)(["\n      & {\n        ", ";\n      }\n    "])),
 
-    (0, _Button.buttonActiveMixin)(t.btnTextActiveBg, '', t.btnTextActiveBg, '', t.btnBorderWidth, t.btnArrowBgImageActive));
+    (0, _Button.buttonActiveMixin)({
+      btnBackground: t.btnTextActiveBg,
+      borderColor: t.btnTextActiveBg,
+      borderWidth: t.btnBorderWidth,
+      arrowBgImage: t.btnArrowBgImageActive }));
+
 
 
   },