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

package/components/Clickable/ClickableButton.styles/ClickableButton.styles.js

@@ -0,0 +1,313 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39;
+
+import { css, cx, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { buttonActiveMixin, buttonHoverMixin, buttonSizeMixin, buttonUseMixin } from "../ClickableButton.mixins";
+export var buttonGlobalClasses = prefix('clickable-button')({
+  arrow: 'arrow',
+  icon: 'icon'
+});
+export var buttonStyles = memoizeStyle({
+  buttonRoot: function buttonRoot(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      transition: background-color ", " ", "\n        ", ";\n\n      background-clip: ", ";\n      background-position: center;\n      background-repeat: no-repeat;\n      background-size: contain;\n      display: inline-block;\n      position: relative;\n      text-align: center;\n      width: 100%;\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 svg {\n        color: ", ";\n      }\n      &[aria-disabled='true'] svg {\n        color: ", ";\n      }\n      & svg {\n        color: ", ";\n      }\n    "])), t.transitionDuration, t.transitionTimingFunction, t.btnBorderColorTransition ? ", " + t.btnBorderColorTransition : '', t.btnBackgroundClip, t.btnIconHoverColor, t.btnIconDisabledColor, t.btnIconColor);
+  },
+  buttonDefault: function buttonDefault(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", ";\n      }\n    "])), buttonUseMixin({
+      btnBackground: t.btnDefaultBg,
+      btnBackgroundStart: t.btnDefaultBgStart,
+      btnBackgroundEnd: t.btnDefaultBgEnd,
+      color: t.btnDefaultTextColor,
+      borderColor: t.btnDefaultBorderColor,
+      borderBottomColor: t.btnDefaultBorderBottomColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonHoverMixin({
+      btnBackground: t.btnDefaultHoverBg,
+      btnBackgroundStart: t.btnDefaultHoverBgStart,
+      btnBackgroundEnd: t.btnDefaultHoverBgEnd,
+      borderColor: t.btnDefaultHoverBorderColor,
+      borderBottomColor: t.btnDefaultHoverBorderBottomColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonActiveStyles.buttonDefault(t));
+  },
+  buttonPrimary: function buttonPrimary(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin({
+      btnBackground: t.btnPrimaryBg,
+      btnBackgroundStart: t.btnPrimaryBgStart,
+      btnBackgroundEnd: t.btnPrimaryBgEnd,
+      color: t.btnPrimaryTextColor,
+      borderColor: t.btnPrimaryBorderColor,
+      borderBottomColor: t.btnPrimaryBorderBottomColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonHoverMixin({
+      btnBackground: t.btnPrimaryHoverBg,
+      btnBackgroundStart: t.btnPrimaryHoverBgStart,
+      btnBackgroundEnd: t.btnPrimaryHoverBgEnd,
+      borderColor: t.btnPrimaryHoverBorderColor,
+      borderBottomColor: t.btnPrimaryHoverBorderBottomColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonActiveStyles.buttonPrimary(t));
+  },
+  buttonSuccess: function buttonSuccess(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin({
+      btnBackground: t.btnSuccessBg,
+      btnBackgroundStart: t.btnSuccessBgStart,
+      btnBackgroundEnd: t.btnSuccessBgEnd,
+      color: t.btnSuccessTextColor,
+      borderColor: t.btnSuccessBorderColor,
+      borderBottomColor: t.btnSuccessBorderBottomColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonHoverMixin({
+      btnBackground: t.btnSuccessHoverBg,
+      btnBackgroundStart: t.btnSuccessHoverBgStart,
+      btnBackgroundEnd: t.btnSuccessHoverBgEnd,
+      borderColor: t.btnSuccessHoverBorderColor,
+      borderBottomColor: t.btnSuccessHoverBorderBottomColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonActiveStyles.buttonSuccess(t));
+  },
+  buttonDanger: function buttonDanger(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin({
+      btnBackground: t.btnDangerBg,
+      btnBackgroundStart: t.btnDangerBgStart,
+      btnBackgroundEnd: t.btnDangerBgEnd,
+      color: t.btnDangerTextColor,
+      borderColor: t.btnDangerBorderColor,
+      borderBottomColor: t.btnDangerBorderBottomColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonHoverMixin({
+      btnBackground: t.btnDangerHoverBg,
+      btnBackgroundStart: t.btnDangerHoverBgStart,
+      btnBackgroundEnd: t.btnDangerHoverBgEnd,
+      borderColor: t.btnDangerHoverBorderColor,
+      borderBottomColor: t.btnDangerHoverBorderBottomColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonActiveStyles.buttonDanger(t));
+  },
+  buttonPay: function buttonPay(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin({
+      btnBackground: t.btnPayBg,
+      btnBackgroundStart: t.btnPayBgStart,
+      btnBackgroundEnd: t.btnPayBgEnd,
+      color: t.btnPayTextColor,
+      borderColor: t.btnPayBorderColor,
+      borderBottomColor: t.btnPayBorderBottomColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonHoverMixin({
+      btnBackground: t.btnPayHoverBg,
+      btnBackgroundStart: t.btnPayHoverBgStart,
+      btnBackgroundEnd: t.btnPayHoverBgEnd,
+      borderColor: t.btnPayHoverBorderColor,
+      borderBottomColor: t.btnPayHoverBorderBottomColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonActiveStyles.buttonPay(t));
+  },
+  buttonText: function buttonText(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &,\n      &:hover {\n        box-shadow: none;\n      }\n\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin({
+      btnBackground: t.btnTextBg,
+      color: t.btnTextTextColor,
+      borderColor: t.btnTextBorderColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonHoverMixin({
+      btnBackground: t.btnTextHoverBg,
+      borderColor: t.btnTextHoverBorderColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonActiveStyles.buttonText(t));
+  },
+  buttonBackless: function buttonBackless(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      color: ", ";\n      background: transparent;\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin({
+      btnBackground: t.btnBacklessBg,
+      color: t.btnBacklessTextColor,
+      borderColor: t.btnBacklessBorderColor,
+      borderWidth: t.btnBorderWidth
+    }), t.btnDefaultTextColor, buttonHoverMixin({
+      btnBackground: t.btnBacklessHoverBg,
+      borderColor: t.btnBacklessHoverBorderColor,
+      borderWidth: t.btnBorderWidth
+    }), buttonActiveStyles.buttonBackless(t));
+  },
+  buttonBorderless: function buttonBorderless() {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &,\n      &:active:hover,\n      &:hover {\n        box-shadow: none !important; // override root:hover style\n      }\n    "])));
+  },
+  buttonSizeSmall: function buttonSizeSmall(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n\n      ", ";\n    "])), t.btnBorderRadiusSmall, buttonSizeMixin({
+      fontSize: t.btnFontSizeSmall,
+      lineHeight: t.btnLineHeightSmall,
+      paddingX: t.btnPaddingXSmall,
+      paddingY: t.btnPaddingYSmall,
+      fontFamilyCompensation: t.fontFamilyCompensationBaseline
+    }));
+  },
+  buttonSizeMedium: function buttonSizeMedium(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n\n      ", ";\n    "])), t.btnBorderRadiusMedium, buttonSizeMixin({
+      fontSize: t.btnFontSizeMedium,
+      lineHeight: t.btnLineHeightMedium,
+      paddingX: t.btnPaddingXMedium,
+      paddingY: t.btnPaddingYMedium,
+      fontFamilyCompensation: t.fontFamilyCompensationBaseline
+    }));
+  },
+  buttonSizeLarge: function buttonSizeLarge(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n\n      ", ";\n    "])), t.btnBorderRadiusLarge, buttonSizeMixin({
+      fontSize: t.btnFontSizeLarge,
+      lineHeight: t.btnLineHeightLarge,
+      paddingX: t.btnPaddingXLarge,
+      paddingY: t.btnPaddingYLarge,
+      fontFamilyCompensation: t.fontFamilyCompensationBaseline
+    }));
+  },
+  buttonSizeSmallWithLeftIcon: function buttonSizeSmallWithLeftIcon(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n    "])), t.btnWithIconPaddingLeftSmall);
+  },
+  buttonSizeSmallWithRightIcon: function buttonSizeSmallWithRightIcon(t) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingRightSmall);
+  },
+  buttonSizeSmallWithIconWithoutText: function buttonSizeSmallWithIconWithoutText(t) {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingLeftSmall, t.btnWithIconPaddingRightSmall);
+  },
+  buttonSizeMediumWithLeftIcon: function buttonSizeMediumWithLeftIcon(t) {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n    "])), t.btnWithIconPaddingLeftMedium);
+  },
+  buttonSizeMediumWithRightIcon: function buttonSizeMediumWithRightIcon(t) {
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingRightMedium);
+  },
+  buttonSizeMediumWithIconWithoutText: function buttonSizeMediumWithIconWithoutText(t) {
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingLeftMedium, t.btnWithIconPaddingRightMedium);
+  },
+  buttonSizeLargeWithLeftIcon: function buttonSizeLargeWithLeftIcon(t) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n    "])), t.btnWithIconPaddingLeftLarge);
+  },
+  buttonSizeLargeWithRightIcon: function buttonSizeLargeWithRightIcon(t) {
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingRightLarge);
+  },
+  buttonSizeLargeWithIconWithoutText: function buttonSizeLargeWithIconWithoutText(t) {
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingLeftLarge, t.btnWithIconPaddingRightLarge);
+  },
+  buttonNarrow: function buttonNarrow() {
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding-left: 5px;\n      padding-right: 5px;\n    "])));
+  },
+  buttonDisabled: function buttonDisabled(t) {
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n      pointer-events: none;\n\n      box-shadow: 0 0 0 ", " ", ";\n\n      background-image: none;\n      background-color: ", ";\n      color: ", ";\n    "])), t.btnBorderWidth, t.btnDisabledBorderColor, t.btnDisabledBg, t.btnDisabledTextColor);
+  },
+  buttonDisabledWithoutOutline: function buttonDisabledWithoutOutline(t) {
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.btnBorderWidth, t.btnDisabledBg);
+  },
+  buttonFocus: function buttonFocus(t) {
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      z-index: 2;\n\n      &,\n      &:hover,\n      &:active,\n      &:active:hover {\n        box-shadow: inset 0 0 0 ", " ", ",\n          0 0 0 ", " ", " !important; // override root:hover style\n      }\n    "])), t.btnInsetWidth, t.btnOutlineColorFocus, t.btnFocusShadowWidth, t.btnBorderColorFocus);
+  },
+  buttonWithArrowIconRightSmall: function buttonWithArrowIconRightSmall(t) {
+    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      padding-right: calc(", " + ", " + ", ");\n    "])), t.btnIconSizeSmall, t.btnWithIconPaddingLeftSmall, t.btnWithIconPaddingLeftSmall);
+  },
+  buttonWithArrowIconRightMedium: function buttonWithArrowIconRightMedium(t) {
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      padding-right: calc(\n        ", " + ", " + ", "\n      );\n    "])), t.btnIconSizeMedium, t.btnWithIconPaddingLeftMedium, t.btnWithIconPaddingLeftMedium);
+  },
+  buttonWithArrowIconRightLarge: function buttonWithArrowIconRightLarge(t) {
+    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      padding-right: calc(", " + ", " + ", ");\n    "])), t.btnIconSizeLarge, t.btnWithIconPaddingLeftLarge, t.btnWithIconPaddingLeftLarge);
+  },
+  buttonWithArrowIconLeftSmall: function buttonWithArrowIconLeftSmall(t) {
+    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      padding-left: calc(", " + ", " + ", ");\n    "])), t.btnIconSizeSmall, t.btnWithIconPaddingLeftSmall, t.btnWithIconPaddingLeftSmall);
+  },
+  buttonWithArrowIconLeftMedium: function buttonWithArrowIconLeftMedium(t) {
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      padding-left: calc(\n        ", " + ", " + ", "\n      );\n    "])), t.btnIconSizeMedium, t.btnWithIconPaddingLeftMedium, t.btnWithIconPaddingLeftMedium);
+  },
+  buttonWithArrowIconLeftLarge: function buttonWithArrowIconLeftLarge(t) {
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      padding-left: calc(", " + ", " + ", ");\n    "])), t.btnIconSizeLarge, t.btnWithIconPaddingLeftLarge, t.btnWithIconPaddingLeftLarge);
+  }
+});
+export var buttonActiveStyles = memoizeStyle({
+  buttonDefault: function buttonDefault(t) {
+    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin({
+      btnBackground: t.btnDefaultActiveBg,
+      borderColor: t.btnDefaultActiveBorderColor,
+      borderTopColor: t.btnDefaultActiveBorderTopColor,
+      borderWidth: t.btnBorderWidth
+    }));
+  },
+  buttonPrimary: function buttonPrimary(t) {
+    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin({
+      btnBackground: t.btnPrimaryActiveBg,
+      borderColor: t.btnPrimaryActiveBorderColor,
+      borderTopColor: t.btnPrimaryActiveBorderTopColor,
+      borderWidth: t.btnBorderWidth
+    }));
+  },
+  buttonSuccess: function buttonSuccess(t) {
+    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin({
+      btnBackground: t.btnSuccessActiveBg,
+      borderColor: t.btnSuccessActiveBorderColor,
+      borderTopColor: t.btnSuccessActiveBorderTopColor,
+      borderWidth: t.btnBorderWidth
+    }));
+  },
+  buttonDanger: function buttonDanger(t) {
+    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin({
+      btnBackground: t.btnDangerActiveBg,
+      borderColor: t.btnDangerActiveBorderColor,
+      borderTopColor: t.btnDangerActiveBorderTopColor,
+      borderWidth: t.btnBorderWidth
+    }));
+  },
+  buttonPay: function buttonPay(t) {
+    return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin({
+      btnBackground: t.btnPayActiveBg,
+      borderColor: t.btnPayActiveBorderColor,
+      borderTopColor: t.btnPayActiveBorderTopColor,
+      borderWidth: t.btnBorderWidth
+    }));
+  },
+  buttonLink: function buttonLink(t) {
+    return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      & {\n        color: ", ";\n      }\n    "])), t.btnLinkActiveColor);
+  },
+  buttonText: function buttonText(t) {
+    return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin({
+      btnBackground: t.btnTextActiveBg,
+      borderColor: t.btnTextActiveBg,
+      borderWidth: t.btnBorderWidth
+    }));
+  },
+  buttonBackless: function buttonBackless(t) {
+    return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n      &,\n      &:hover {\n        background: ", ";\n      }\n    "])), t.btnBacklessActiveBg);
+  }
+});
+export var getButtonSize = function getButtonSize(_ref) {
+  var _ref4;
+
+  var size = _ref.size,
+      leftIcon = _ref.leftIcon,
+      rightIcon = _ref.rightIcon,
+      children = _ref.children,
+      theme = _ref.theme;
+  var hasIconAndNoContent = (!!leftIcon || !!rightIcon) && !children;
+
+  if (size === 'large') {
+    var _ref2;
+
+    return _ref2 = {}, _ref2[buttonStyles.buttonSizeLarge(theme)] = true, _ref2[buttonStyles.buttonSizeLargeWithLeftIcon(theme)] = !!leftIcon, _ref2[buttonStyles.buttonSizeLargeWithRightIcon(theme)] = !!rightIcon, _ref2[buttonStyles.buttonSizeLargeWithIconWithoutText(theme)] = hasIconAndNoContent, _ref2;
+  }
+
+  if (size === 'medium') {
+    var _ref3;
+
+    return _ref3 = {}, _ref3[buttonStyles.buttonSizeMedium(theme)] = true, _ref3[buttonStyles.buttonSizeMediumWithLeftIcon(theme)] = !!leftIcon, _ref3[buttonStyles.buttonSizeMediumWithRightIcon(theme)] = !!rightIcon, _ref3[buttonStyles.buttonSizeMediumWithIconWithoutText(theme)] = hasIconAndNoContent, _ref3;
+  }
+
+  return _ref4 = {}, _ref4[buttonStyles.buttonSizeSmall(theme)] = true, _ref4[buttonStyles.buttonSizeSmallWithLeftIcon(theme)] = !!leftIcon, _ref4[buttonStyles.buttonSizeSmallWithRightIcon(theme)] = !!rightIcon, _ref4[buttonStyles.buttonSizeSmallWithIconWithoutText(theme)] = hasIconAndNoContent, _ref4;
+};
+export var getButtonStyles = function getButtonStyles(_ref5) {
+  var _extends2, _extends3;
+
+  var use = _ref5.use,
+      buttonSize = _ref5.buttonSize,
+      theme = _ref5.theme,
+      arrow = _ref5.arrow,
+      size = _ref5.size,
+      isNarrow = _ref5.isNarrow,
+      isBorderless = _ref5.isBorderless,
+      isFocused = _ref5.isFocused,
+      isActive = _ref5.isActive,
+      isNotInteractive = _ref5.isNotInteractive;
+  var active = !isNotInteractive && isActive;
+  var isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use != null ? use : '');
+  return cx(_extends((_extends2 = {}, _extends2[buttonStyles.buttonRoot(theme)] = true, _extends2[buttonStyles.buttonDefault(theme)] = use === 'default' || use === undefined, _extends2[buttonStyles.buttonPrimary(theme)] = use === 'primary', _extends2[buttonStyles.buttonSuccess(theme)] = use === 'success', _extends2[buttonStyles.buttonDanger(theme)] = use === 'danger', _extends2[buttonStyles.buttonPay(theme)] = use === 'pay', _extends2[buttonStyles.buttonText(theme)] = use === 'text', _extends2[buttonStyles.buttonBackless(theme)] = use === 'backless', _extends2[buttonActiveStyles.buttonDefault(theme)] = (use === 'default' || use === undefined) && active, _extends2[buttonActiveStyles.buttonPrimary(theme)] = use === 'primary' && active, _extends2[buttonActiveStyles.buttonSuccess(theme)] = use === 'success' && active, _extends2[buttonActiveStyles.buttonDanger(theme)] = use === 'danger' && active, _extends2[buttonActiveStyles.buttonPay(theme)] = use === 'pay' && active, _extends2[buttonActiveStyles.buttonText(theme)] = use === 'text' && active, _extends2[buttonActiveStyles.buttonBackless(theme)] = use === 'backless' && active, _extends2[buttonStyles.buttonFocus(theme)] = isFocused, _extends2), buttonSize, (_extends3 = {}, _extends3[buttonStyles.buttonNarrow()] = isNarrow, _extends3[buttonStyles.buttonWithArrowIconRightSmall(theme)] = arrow === 'right' && size === 'small', _extends3[buttonStyles.buttonWithArrowIconRightMedium(theme)] = arrow === 'right' && size === 'medium', _extends3[buttonStyles.buttonWithArrowIconRightLarge(theme)] = arrow === 'right' && size === 'large', _extends3[buttonStyles.buttonWithArrowIconLeftSmall(theme)] = arrow === 'left' && size === 'small', _extends3[buttonStyles.buttonWithArrowIconLeftMedium(theme)] = arrow === 'left' && size === 'medium', _extends3[buttonStyles.buttonWithArrowIconLeftLarge(theme)] = arrow === 'left' && size === 'large', _extends3[buttonStyles.buttonDisabled(theme)] = isNotInteractive, _extends3[buttonStyles.buttonDisabledWithoutOutline(theme)] = isUseStateWithoutOutlineInDisabledState && isNotInteractive, _extends3[buttonStyles.buttonBorderless()] = isBorderless && (!isFocused || isNotInteractive), _extends3)));
+};

package/components/Clickable/ClickableButton.styles/ClickableButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButton.styles.ts"],"names":["css","cx","memoizeStyle","prefix","buttonActiveMixin","buttonHoverMixin","buttonSizeMixin","buttonUseMixin","buttonGlobalClasses","arrow","icon","buttonStyles","buttonRoot","t","transitionDuration","transitionTimingFunction","btnBorderColorTransition","btnBackgroundClip","btnIconHoverColor","btnIconDisabledColor","btnIconColor","buttonDefault","btnBackground","btnDefaultBg","btnBackgroundStart","btnDefaultBgStart","btnBackgroundEnd","btnDefaultBgEnd","color","btnDefaultTextColor","borderColor","btnDefaultBorderColor","borderBottomColor","btnDefaultBorderBottomColor","borderWidth","btnBorderWidth","btnDefaultHoverBg","btnDefaultHoverBgStart","btnDefaultHoverBgEnd","btnDefaultHoverBorderColor","btnDefaultHoverBorderBottomColor","buttonActiveStyles","buttonPrimary","btnPrimaryBg","btnPrimaryBgStart","btnPrimaryBgEnd","btnPrimaryTextColor","btnPrimaryBorderColor","btnPrimaryBorderBottomColor","btnPrimaryHoverBg","btnPrimaryHoverBgStart","btnPrimaryHoverBgEnd","btnPrimaryHoverBorderColor","btnPrimaryHoverBorderBottomColor","buttonSuccess","btnSuccessBg","btnSuccessBgStart","btnSuccessBgEnd","btnSuccessTextColor","btnSuccessBorderColor","btnSuccessBorderBottomColor","btnSuccessHoverBg","btnSuccessHoverBgStart","btnSuccessHoverBgEnd","btnSuccessHoverBorderColor","btnSuccessHoverBorderBottomColor","buttonDanger","btnDangerBg","btnDangerBgStart","btnDangerBgEnd","btnDangerTextColor","btnDangerBorderColor","btnDangerBorderBottomColor","btnDangerHoverBg","btnDangerHoverBgStart","btnDangerHoverBgEnd","btnDangerHoverBorderColor","btnDangerHoverBorderBottomColor","buttonPay","btnPayBg","btnPayBgStart","btnPayBgEnd","btnPayTextColor","btnPayBorderColor","btnPayBorderBottomColor","btnPayHoverBg","btnPayHoverBgStart","btnPayHoverBgEnd","btnPayHoverBorderColor","btnPayHoverBorderBottomColor","buttonText","btnTextBg","btnTextTextColor","btnTextBorderColor","btnTextHoverBg","btnTextHoverBorderColor","buttonBackless","btnBacklessBg","btnBacklessTextColor","btnBacklessBorderColor","btnBacklessHoverBg","btnBacklessHoverBorderColor","buttonBorderless","buttonSizeSmall","btnBorderRadiusSmall","fontSize","btnFontSizeSmall","lineHeight","btnLineHeightSmall","paddingX","btnPaddingXSmall","paddingY","btnPaddingYSmall","fontFamilyCompensation","fontFamilyCompensationBaseline","buttonSizeMedium","btnBorderRadiusMedium","btnFontSizeMedium","btnLineHeightMedium","btnPaddingXMedium","btnPaddingYMedium","buttonSizeLarge","btnBorderRadiusLarge","btnFontSizeLarge","btnLineHeightLarge","btnPaddingXLarge","btnPaddingYLarge","buttonSizeSmallWithLeftIcon","btnWithIconPaddingLeftSmall","buttonSizeSmallWithRightIcon","btnWithIconPaddingRightSmall","buttonSizeSmallWithIconWithoutText","buttonSizeMediumWithLeftIcon","btnWithIconPaddingLeftMedium","buttonSizeMediumWithRightIcon","btnWithIconPaddingRightMedium","buttonSizeMediumWithIconWithoutText","buttonSizeLargeWithLeftIcon","btnWithIconPaddingLeftLarge","buttonSizeLargeWithRightIcon","btnWithIconPaddingRightLarge","buttonSizeLargeWithIconWithoutText","buttonNarrow","buttonDisabled","btnDisabledBorderColor","btnDisabledBg","btnDisabledTextColor","buttonDisabledWithoutOutline","buttonFocus","btnInsetWidth","btnOutlineColorFocus","btnFocusShadowWidth","btnBorderColorFocus","buttonWithArrowIconRightSmall","btnIconSizeSmall","buttonWithArrowIconRightMedium","btnIconSizeMedium","buttonWithArrowIconRightLarge","btnIconSizeLarge","buttonWithArrowIconLeftSmall","buttonWithArrowIconLeftMedium","buttonWithArrowIconLeftLarge","btnDefaultActiveBg","btnDefaultActiveBorderColor","borderTopColor","btnDefaultActiveBorderTopColor","btnPrimaryActiveBg","btnPrimaryActiveBorderColor","btnPrimaryActiveBorderTopColor","btnSuccessActiveBg","btnSuccessActiveBorderColor","btnSuccessActiveBorderTopColor","btnDangerActiveBg","btnDangerActiveBorderColor","btnDangerActiveBorderTopColor","btnPayActiveBg","btnPayActiveBorderColor","btnPayActiveBorderTopColor","buttonLink","btnLinkActiveColor","btnTextActiveBg","btnBacklessActiveBg","getButtonSize","size","leftIcon","rightIcon","children","theme","hasIconAndNoContent","getButtonStyles","use","buttonSize","isNarrow","isBorderless","isFocused","isActive","isNotInteractive","active","isUseStateWithoutOutlineInDisabledState","includes","undefined"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, cx, memoizeStyle, prefix } from '../../lib/theming/Emotion';\n\nimport { GetStylesBase } from './Clickable.styles';\nimport { ClickableProps } from './Clickable';\nimport { buttonActiveMixin, buttonHoverMixin, buttonSizeMixin, buttonUseMixin } from './ClickableButton.mixins';\n\nexport const buttonGlobalClasses = prefix('clickable-button')({\n  arrow: 'arrow',\n  icon: 'icon',\n});\n\nexport const buttonStyles = memoizeStyle({\n  buttonRoot(t: Theme) {\n    return css`\n      transition: background-color ${t.transitionDuration} ${t.transitionTimingFunction}\n        ${t.btnBorderColorTransition ? `, ${t.btnBorderColorTransition}` : ''};\n\n      background-clip: ${t.btnBackgroundClip};\n      background-position: center;\n      background-repeat: no-repeat;\n      background-size: contain;\n      display: inline-block;\n      position: relative;\n      text-align: center;\n      width: 100%;\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 svg {\n        color: ${t.btnIconHoverColor};\n      }\n      &[aria-disabled='true'] svg {\n        color: ${t.btnIconDisabledColor};\n      }\n      & svg {\n        color: ${t.btnIconColor};\n      }\n    `;\n  },\n\n  buttonDefault(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnDefaultBg,\n        btnBackgroundStart: t.btnDefaultBgStart,\n        btnBackgroundEnd: t.btnDefaultBgEnd,\n        color: t.btnDefaultTextColor,\n        borderColor: t.btnDefaultBorderColor,\n        borderBottomColor: t.btnDefaultBorderBottomColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnDefaultHoverBg,\n          btnBackgroundStart: t.btnDefaultHoverBgStart,\n          btnBackgroundEnd: t.btnDefaultHoverBgEnd,\n          borderColor: t.btnDefaultHoverBorderColor,\n          borderBottomColor: t.btnDefaultHoverBorderBottomColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonDefault(t)};\n      }\n    `;\n  },\n  buttonPrimary(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnPrimaryBg,\n        btnBackgroundStart: t.btnPrimaryBgStart,\n        btnBackgroundEnd: t.btnPrimaryBgEnd,\n        color: t.btnPrimaryTextColor,\n        borderColor: t.btnPrimaryBorderColor,\n        borderBottomColor: t.btnPrimaryBorderBottomColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnPrimaryHoverBg,\n          btnBackgroundStart: t.btnPrimaryHoverBgStart,\n          btnBackgroundEnd: t.btnPrimaryHoverBgEnd,\n          borderColor: t.btnPrimaryHoverBorderColor,\n          borderBottomColor: t.btnPrimaryHoverBorderBottomColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonPrimary(t)}\n      }\n    `;\n  },\n  buttonSuccess(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnSuccessBg,\n        btnBackgroundStart: t.btnSuccessBgStart,\n        btnBackgroundEnd: t.btnSuccessBgEnd,\n        color: t.btnSuccessTextColor,\n        borderColor: t.btnSuccessBorderColor,\n        borderBottomColor: t.btnSuccessBorderBottomColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnSuccessHoverBg,\n          btnBackgroundStart: t.btnSuccessHoverBgStart,\n          btnBackgroundEnd: t.btnSuccessHoverBgEnd,\n          borderColor: t.btnSuccessHoverBorderColor,\n          borderBottomColor: t.btnSuccessHoverBorderBottomColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonSuccess(t)}\n      }\n    `;\n  },\n  buttonDanger(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnDangerBg,\n        btnBackgroundStart: t.btnDangerBgStart,\n        btnBackgroundEnd: t.btnDangerBgEnd,\n        color: t.btnDangerTextColor,\n        borderColor: t.btnDangerBorderColor,\n        borderBottomColor: t.btnDangerBorderBottomColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnDangerHoverBg,\n          btnBackgroundStart: t.btnDangerHoverBgStart,\n          btnBackgroundEnd: t.btnDangerHoverBgEnd,\n          borderColor: t.btnDangerHoverBorderColor,\n          borderBottomColor: t.btnDangerHoverBorderBottomColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonDanger(t)}\n      }\n    `;\n  },\n  buttonPay(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnPayBg,\n        btnBackgroundStart: t.btnPayBgStart,\n        btnBackgroundEnd: t.btnPayBgEnd,\n        color: t.btnPayTextColor,\n        borderColor: t.btnPayBorderColor,\n        borderBottomColor: t.btnPayBorderBottomColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnPayHoverBg,\n          btnBackgroundStart: t.btnPayHoverBgStart,\n          btnBackgroundEnd: t.btnPayHoverBgEnd,\n          borderColor: t.btnPayHoverBorderColor,\n          borderBottomColor: t.btnPayHoverBorderBottomColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonPay(t)}\n      }\n    `;\n  },\n  buttonText(t: Theme) {\n    return css`\n      &,\n      &:hover {\n        box-shadow: none;\n      }\n\n      ${buttonUseMixin({\n        btnBackground: t.btnTextBg,\n        color: t.btnTextTextColor,\n        borderColor: t.btnTextBorderColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnTextHoverBg,\n          borderColor: t.btnTextHoverBorderColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonText(t)}\n      }\n    `;\n  },\n  buttonBackless(t: Theme) {\n    return css`\n      ${buttonUseMixin({\n        btnBackground: t.btnBacklessBg,\n        color: t.btnBacklessTextColor,\n        borderColor: t.btnBacklessBorderColor,\n        borderWidth: t.btnBorderWidth,\n      })};\n\n      color: ${t.btnDefaultTextColor};\n      background: transparent;\n\n      &:hover {\n        ${buttonHoverMixin({\n          btnBackground: t.btnBacklessHoverBg,\n          borderColor: t.btnBacklessHoverBorderColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n\n      &:active {\n        ${buttonActiveStyles.buttonBackless(t)}\n      }\n    `;\n  },\n  buttonBorderless() {\n    return css`\n      &,\n      &:active:hover,\n      &:hover {\n        box-shadow: none !important; // override root:hover style\n      }\n    `;\n  },\n\n  buttonSizeSmall(t: Theme) {\n    return css`\n      border-radius: ${t.btnBorderRadiusSmall};\n\n      ${buttonSizeMixin({\n        fontSize: t.btnFontSizeSmall,\n        lineHeight: t.btnLineHeightSmall,\n        paddingX: t.btnPaddingXSmall,\n        paddingY: t.btnPaddingYSmall,\n        fontFamilyCompensation: t.fontFamilyCompensationBaseline,\n      })};\n    `;\n  },\n  buttonSizeMedium(t: Theme) {\n    return css`\n      border-radius: ${t.btnBorderRadiusMedium};\n\n      ${buttonSizeMixin({\n        fontSize: t.btnFontSizeMedium,\n        lineHeight: t.btnLineHeightMedium,\n        paddingX: t.btnPaddingXMedium,\n        paddingY: t.btnPaddingYMedium,\n        fontFamilyCompensation: t.fontFamilyCompensationBaseline,\n      })};\n    `;\n  },\n  buttonSizeLarge(t: Theme) {\n    return css`\n      border-radius: ${t.btnBorderRadiusLarge};\n\n      ${buttonSizeMixin({\n        fontSize: t.btnFontSizeLarge,\n        lineHeight: t.btnLineHeightLarge,\n        paddingX: t.btnPaddingXLarge,\n        paddingY: t.btnPaddingYLarge,\n        fontFamilyCompensation: t.fontFamilyCompensationBaseline,\n      })};\n    `;\n  },\n\n  buttonSizeSmallWithLeftIcon(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftSmall};\n    `;\n  },\n  buttonSizeSmallWithRightIcon(t: Theme) {\n    return css`\n      padding-right: ${t.btnWithIconPaddingRightSmall};\n    `;\n  },\n  buttonSizeSmallWithIconWithoutText(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftSmall};\n      padding-right: ${t.btnWithIconPaddingRightSmall};\n    `;\n  },\n\n  buttonSizeMediumWithLeftIcon(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftMedium};\n    `;\n  },\n  buttonSizeMediumWithRightIcon(t: Theme) {\n    return css`\n      padding-right: ${t.btnWithIconPaddingRightMedium};\n    `;\n  },\n  buttonSizeMediumWithIconWithoutText(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftMedium};\n      padding-right: ${t.btnWithIconPaddingRightMedium};\n    `;\n  },\n\n  buttonSizeLargeWithLeftIcon(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftLarge};\n    `;\n  },\n  buttonSizeLargeWithRightIcon(t: Theme) {\n    return css`\n      padding-right: ${t.btnWithIconPaddingRightLarge};\n    `;\n  },\n  buttonSizeLargeWithIconWithoutText(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLeftLarge};\n      padding-right: ${t.btnWithIconPaddingRightLarge};\n    `;\n  },\n\n  buttonNarrow() {\n    return css`\n      padding-left: 5px;\n      padding-right: 5px;\n    `;\n  },\n\n  buttonDisabled(t: Theme) {\n    return css`\n      cursor: default;\n      pointer-events: none;\n\n      box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDisabledBorderColor};\n\n      background-image: none;\n      background-color: ${t.btnDisabledBg};\n      color: ${t.btnDisabledTextColor};\n    `;\n  },\n  buttonDisabledWithoutOutline(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDisabledBg};\n    `;\n  },\n\n  buttonFocus(t: Theme) {\n    return css`\n      position: relative;\n      z-index: 2;\n\n      &,\n      &:hover,\n      &:active,\n      &:active:hover {\n        box-shadow: inset 0 0 0 ${t.btnInsetWidth} ${t.btnOutlineColorFocus},\n          0 0 0 ${t.btnFocusShadowWidth} ${t.btnBorderColorFocus} !important; // override root:hover style\n      }\n    `;\n  },\n\n  buttonWithArrowIconRightSmall(t: Theme) {\n    return css`\n      padding-right: calc(${t.btnIconSizeSmall} + ${t.btnWithIconPaddingLeftSmall} + ${t.btnWithIconPaddingLeftSmall});\n    `;\n  },\n  buttonWithArrowIconRightMedium(t: Theme) {\n    return css`\n      padding-right: calc(\n        ${t.btnIconSizeMedium} + ${t.btnWithIconPaddingLeftMedium} + ${t.btnWithIconPaddingLeftMedium}\n      );\n    `;\n  },\n  buttonWithArrowIconRightLarge(t: Theme) {\n    return css`\n      padding-right: calc(${t.btnIconSizeLarge} + ${t.btnWithIconPaddingLeftLarge} + ${t.btnWithIconPaddingLeftLarge});\n    `;\n  },\n\n  buttonWithArrowIconLeftSmall(t: Theme) {\n    return css`\n      padding-left: calc(${t.btnIconSizeSmall} + ${t.btnWithIconPaddingLeftSmall} + ${t.btnWithIconPaddingLeftSmall});\n    `;\n  },\n  buttonWithArrowIconLeftMedium(t: Theme) {\n    return css`\n      padding-left: calc(\n        ${t.btnIconSizeMedium} + ${t.btnWithIconPaddingLeftMedium} + ${t.btnWithIconPaddingLeftMedium}\n      );\n    `;\n  },\n  buttonWithArrowIconLeftLarge(t: Theme) {\n    return css`\n      padding-left: calc(${t.btnIconSizeLarge} + ${t.btnWithIconPaddingLeftLarge} + ${t.btnWithIconPaddingLeftLarge});\n    `;\n  },\n});\n\nexport const buttonActiveStyles = memoizeStyle({\n  buttonDefault(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnDefaultActiveBg,\n          borderColor: t.btnDefaultActiveBorderColor,\n          borderTopColor: t.btnDefaultActiveBorderTopColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonPrimary(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnPrimaryActiveBg,\n          borderColor: t.btnPrimaryActiveBorderColor,\n          borderTopColor: t.btnPrimaryActiveBorderTopColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonSuccess(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnSuccessActiveBg,\n          borderColor: t.btnSuccessActiveBorderColor,\n          borderTopColor: t.btnSuccessActiveBorderTopColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonDanger(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnDangerActiveBg,\n          borderColor: t.btnDangerActiveBorderColor,\n          borderTopColor: t.btnDangerActiveBorderTopColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonPay(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnPayActiveBg,\n          borderColor: t.btnPayActiveBorderColor,\n          borderTopColor: t.btnPayActiveBorderTopColor,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonLink(t: Theme) {\n    return css`\n      & {\n        color: ${t.btnLinkActiveColor};\n      }\n    `;\n  },\n  buttonText(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin({\n          btnBackground: t.btnTextActiveBg,\n          borderColor: t.btnTextActiveBg,\n          borderWidth: t.btnBorderWidth,\n        })};\n      }\n    `;\n  },\n  buttonBackless(t: Theme) {\n    return css`\n      &,\n      &:hover {\n        background: ${t.btnBacklessActiveBg};\n      }\n    `;\n  },\n});\n\ninterface GetButtonSizeArgs extends Pick<ClickableProps, 'size' | 'leftIcon' | 'rightIcon' | 'children'> {\n  theme: Theme;\n}\n\nexport const getButtonSize = ({ size, leftIcon, rightIcon, children, theme }: GetButtonSizeArgs) => {\n  const hasIconAndNoContent = (!!leftIcon || !!rightIcon) && !children;\n\n  if (size === 'large') {\n    return {\n      [buttonStyles.buttonSizeLarge(theme)]: true,\n      [buttonStyles.buttonSizeLargeWithLeftIcon(theme)]: !!leftIcon,\n      [buttonStyles.buttonSizeLargeWithRightIcon(theme)]: !!rightIcon,\n      [buttonStyles.buttonSizeLargeWithIconWithoutText(theme)]: hasIconAndNoContent,\n    };\n  }\n\n  if (size === 'medium') {\n    return {\n      [buttonStyles.buttonSizeMedium(theme)]: true,\n      [buttonStyles.buttonSizeMediumWithLeftIcon(theme)]: !!leftIcon,\n      [buttonStyles.buttonSizeMediumWithRightIcon(theme)]: !!rightIcon,\n      [buttonStyles.buttonSizeMediumWithIconWithoutText(theme)]: hasIconAndNoContent,\n    };\n  }\n\n  return {\n    [buttonStyles.buttonSizeSmall(theme)]: true,\n    [buttonStyles.buttonSizeSmallWithLeftIcon(theme)]: !!leftIcon,\n    [buttonStyles.buttonSizeSmallWithRightIcon(theme)]: !!rightIcon,\n    [buttonStyles.buttonSizeSmallWithIconWithoutText(theme)]: hasIconAndNoContent,\n  };\n};\n\ninterface GetButtonStylesArgs\n  extends GetStylesBase,\n    Pick<ClickableProps, 'arrow' | 'size' | 'isNarrow' | 'isDisabled' | 'isLoading' | 'isBorderless' | 'isActive'> {\n  buttonSize: Record<string, boolean>;\n  isFocused: boolean;\n  isNotInteractive: boolean;\n}\n\nexport const getButtonStyles = ({\n  use,\n  buttonSize,\n  theme,\n  arrow,\n  size,\n  isNarrow,\n  isBorderless,\n  isFocused,\n  isActive,\n  isNotInteractive,\n}: GetButtonStylesArgs) => {\n  const active = !isNotInteractive && isActive;\n  const isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use ?? '');\n\n  return cx({\n    // root\n    [buttonStyles.buttonRoot(theme)]: true,\n    // use\n    [buttonStyles.buttonDefault(theme)]: use === 'default' || use === undefined,\n    [buttonStyles.buttonPrimary(theme)]: use === 'primary',\n    [buttonStyles.buttonSuccess(theme)]: use === 'success',\n    [buttonStyles.buttonDanger(theme)]: use === 'danger',\n    [buttonStyles.buttonPay(theme)]: use === 'pay',\n    [buttonStyles.buttonText(theme)]: use === 'text',\n    [buttonStyles.buttonBackless(theme)]: use === 'backless',\n    // active\n    [buttonActiveStyles.buttonDefault(theme)]: (use === 'default' || use === undefined) && active,\n    [buttonActiveStyles.buttonPrimary(theme)]: use === 'primary' && active,\n    [buttonActiveStyles.buttonSuccess(theme)]: use === 'success' && active,\n    [buttonActiveStyles.buttonDanger(theme)]: use === 'danger' && active,\n    [buttonActiveStyles.buttonPay(theme)]: use === 'pay' && active,\n    [buttonActiveStyles.buttonText(theme)]: use === 'text' && active,\n    [buttonActiveStyles.buttonBackless(theme)]: use === 'backless' && active,\n    // focused\n    [buttonStyles.buttonFocus(theme)]: isFocused,\n    // size\n    ...buttonSize,\n    // narrow\n    [buttonStyles.buttonNarrow()]: isNarrow,\n    // arrow\n    [buttonStyles.buttonWithArrowIconRightSmall(theme)]: arrow === 'right' && size === 'small',\n    [buttonStyles.buttonWithArrowIconRightMedium(theme)]: arrow === 'right' && size === 'medium',\n    [buttonStyles.buttonWithArrowIconRightLarge(theme)]: arrow === 'right' && size === 'large',\n    [buttonStyles.buttonWithArrowIconLeftSmall(theme)]: arrow === 'left' && size === 'small',\n    [buttonStyles.buttonWithArrowIconLeftMedium(theme)]: arrow === 'left' && size === 'medium',\n    [buttonStyles.buttonWithArrowIconLeftLarge(theme)]: arrow === 'left' && size === 'large',\n    // disabled\n    [buttonStyles.buttonDisabled(theme)]: isNotInteractive,\n    [buttonStyles.buttonDisabledWithoutOutline(theme)]: isUseStateWithoutOutlineInDisabledState && isNotInteractive,\n    // borderless\n    [buttonStyles.buttonBorderless()]: isBorderless && (!isFocused || isNotInteractive),\n  });\n};\n"]}

package/components/Clickable/ClickableButton.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButton.styles.js",
+  "module": "ClickableButton.styles",
+  "types": "../ClickableButton.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButton.styles.d.ts

@@ -0,0 +1,63 @@
+import { Theme } from '../../lib/theming/Theme';
+import { GetStylesBase } from './Clickable.styles';
+import { ClickableProps } from './Clickable';
+export declare const buttonGlobalClasses: {
+    arrow: string;
+    icon: string;
+};
+export declare const buttonStyles: {
+    buttonRoot(t: Theme): string;
+    buttonDefault(t: Theme): string;
+    buttonPrimary(t: Theme): string;
+    buttonSuccess(t: Theme): string;
+    buttonDanger(t: Theme): string;
+    buttonPay(t: Theme): string;
+    buttonText(t: Theme): string;
+    buttonBackless(t: Theme): string;
+    buttonBorderless(): string;
+    buttonSizeSmall(t: Theme): string;
+    buttonSizeMedium(t: Theme): string;
+    buttonSizeLarge(t: Theme): string;
+    buttonSizeSmallWithLeftIcon(t: Theme): string;
+    buttonSizeSmallWithRightIcon(t: Theme): string;
+    buttonSizeSmallWithIconWithoutText(t: Theme): string;
+    buttonSizeMediumWithLeftIcon(t: Theme): string;
+    buttonSizeMediumWithRightIcon(t: Theme): string;
+    buttonSizeMediumWithIconWithoutText(t: Theme): string;
+    buttonSizeLargeWithLeftIcon(t: Theme): string;
+    buttonSizeLargeWithRightIcon(t: Theme): string;
+    buttonSizeLargeWithIconWithoutText(t: Theme): string;
+    buttonNarrow(): string;
+    buttonDisabled(t: Theme): string;
+    buttonDisabledWithoutOutline(t: Theme): string;
+    buttonFocus(t: Theme): string;
+    buttonWithArrowIconRightSmall(t: Theme): string;
+    buttonWithArrowIconRightMedium(t: Theme): string;
+    buttonWithArrowIconRightLarge(t: Theme): string;
+    buttonWithArrowIconLeftSmall(t: Theme): string;
+    buttonWithArrowIconLeftMedium(t: Theme): string;
+    buttonWithArrowIconLeftLarge(t: Theme): string;
+};
+export declare const buttonActiveStyles: {
+    buttonDefault(t: Theme): string;
+    buttonPrimary(t: Theme): string;
+    buttonSuccess(t: Theme): string;
+    buttonDanger(t: Theme): string;
+    buttonPay(t: Theme): string;
+    buttonLink(t: Theme): string;
+    buttonText(t: Theme): string;
+    buttonBackless(t: Theme): string;
+};
+interface GetButtonSizeArgs extends Pick<ClickableProps, 'size' | 'leftIcon' | 'rightIcon' | 'children'> {
+    theme: Theme;
+}
+export declare const getButtonSize: ({ size, leftIcon, rightIcon, children, theme }: GetButtonSizeArgs) => {
+    [x: string]: boolean;
+};
+interface GetButtonStylesArgs extends GetStylesBase, Pick<ClickableProps, 'arrow' | 'size' | 'isNarrow' | 'isDisabled' | 'isLoading' | 'isBorderless' | 'isActive'> {
+    buttonSize: Record<string, boolean>;
+    isFocused: boolean;
+    isNotInteractive: boolean;
+}
+export declare const getButtonStyles: ({ use, buttonSize, theme, arrow, size, isNarrow, isBorderless, isFocused, isActive, isNotInteractive, }: GetButtonStylesArgs) => string;
+export {};

package/components/Clickable/ClickableButtonArrow/ClickableButtonArrow.js

@@ -0,0 +1,21 @@
+import React, { useContext } from 'react';
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { ArrowRightIcon } from "../ArrowRightIcon";
+import { ArrowLeftIcon } from "../ArrowLeftIcon";
+import { buttonGlobalClasses } from "../ClickableButton.styles";
+import { buttonArrowStyles } from "../ClickableButtonArrow.styles";
+export var ClickableButtonArrow = function ClickableButtonArrow(_ref) {
+  var _cx;
+
+  var arrow = _ref.arrow,
+      size = _ref.size;
+  var theme = useContext(ThemeContext);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx((_cx = {}, _cx[buttonGlobalClasses.arrow] = true, _cx[buttonArrowStyles.buttonArrowIconRoot()] = true, _cx[buttonArrowStyles.buttonArrowIconRootSmall(theme)] = size === 'small', _cx[buttonArrowStyles.buttonArrowIconRootMedium(theme)] = size === 'medium', _cx[buttonArrowStyles.buttonArrowIconRootLarge(theme)] = size === 'large', _cx[buttonArrowStyles.buttonArrowIconLeft()] = arrow === 'left', _cx))
+  }, arrow === 'left' && /*#__PURE__*/React.createElement(ArrowLeftIcon, {
+    size: size
+  }), arrow === 'right' && /*#__PURE__*/React.createElement(ArrowRightIcon, {
+    size: size
+  }));
+};

package/components/Clickable/ClickableButtonArrow/ClickableButtonArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonArrow.tsx"],"names":["React","useContext","cx","ThemeContext","ArrowRightIcon","ArrowLeftIcon","buttonGlobalClasses","buttonArrowStyles","ClickableButtonArrow","arrow","size","theme","buttonArrowIconRoot","buttonArrowIconRootSmall","buttonArrowIconRootMedium","buttonArrowIconRootLarge","buttonArrowIconLeft"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,aAAT,QAA8B,iBAA9B;;AAEA,SAASC,mBAAT,QAAoC,0BAApC;AACA,SAASC,iBAAT,QAAkC,+BAAlC;;;;AAIA,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,OAAgD,aAA7CC,KAA6C,QAA7CA,KAA6C,CAAtCC,IAAsC,QAAtCA,IAAsC;AAClF,MAAMC,KAAK,GAAGV,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE;AACE,MAAA,SAAS,EAAED,EAAE;AACVI,MAAAA,mBAAmB,CAACG,KADV,IACkB,IADlB;AAEVF,MAAAA,iBAAiB,CAACK,mBAAlB,EAFU,IAEgC,IAFhC;AAGVL,MAAAA,iBAAiB,CAACM,wBAAlB,CAA2CF,KAA3C,CAHU,IAG0CD,IAAI,KAAK,OAHnD;AAIVH,MAAAA,iBAAiB,CAACO,yBAAlB,CAA4CH,KAA5C,CAJU,IAI2CD,IAAI,KAAK,QAJpD;AAKVH,MAAAA,iBAAiB,CAACQ,wBAAlB,CAA2CJ,KAA3C,CALU,IAK0CD,IAAI,KAAK,OALnD;AAMVH,MAAAA,iBAAiB,CAACS,mBAAlB,EANU,IAMgCP,KAAK,KAAK,MAN1C,OADf;;;AAUGA,IAAAA,KAAK,KAAK,MAAV,iBAAoB,oBAAC,aAAD,IAAe,IAAI,EAAEC,IAArB,GAVvB;AAWGD,IAAAA,KAAK,KAAK,OAAV,iBAAqB,oBAAC,cAAD,IAAgB,IAAI,EAAEC,IAAtB,GAXxB,CADF;;;AAeD,CAlBM","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { ArrowRightIcon } from './ArrowRightIcon';\nimport { ArrowLeftIcon } from './ArrowLeftIcon';\nimport { ClickableProps } from './Clickable';\nimport { buttonGlobalClasses } from './ClickableButton.styles';\nimport { buttonArrowStyles } from './ClickableButtonArrow.styles';\n\ntype ClickableButtonArrowProps = Pick<ClickableProps, 'use' | 'size' | 'arrow'>;\n\nexport const ClickableButtonArrow = ({ arrow, size }: ClickableButtonArrowProps) => {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <div\n      className={cx({\n        [buttonGlobalClasses.arrow]: true,\n        [buttonArrowStyles.buttonArrowIconRoot()]: true,\n        [buttonArrowStyles.buttonArrowIconRootSmall(theme)]: size === 'small',\n        [buttonArrowStyles.buttonArrowIconRootMedium(theme)]: size === 'medium',\n        [buttonArrowStyles.buttonArrowIconRootLarge(theme)]: size === 'large',\n        [buttonArrowStyles.buttonArrowIconLeft()]: arrow === 'left',\n      })}\n    >\n      {arrow === 'left' && <ArrowLeftIcon size={size} />}\n      {arrow === 'right' && <ArrowRightIcon size={size} />}\n    </div>\n  );\n};\n"]}

package/components/Clickable/ClickableButtonArrow/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonArrow.js",
+  "module": "ClickableButtonArrow",
+  "types": "../ClickableButtonArrow.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonArrow.d.ts

@@ -0,0 +1,4 @@
+import { ClickableProps } from './Clickable';
+declare type ClickableButtonArrowProps = Pick<ClickableProps, 'use' | 'size' | 'arrow'>;
+export declare const ClickableButtonArrow: ({ arrow, size }: ClickableButtonArrowProps) => JSX.Element;
+export {};

package/components/Clickable/ClickableButtonArrow.styles/ClickableButtonArrow.styles.js

@@ -0,0 +1,22 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var buttonArrowStyles = memoizeStyle({
+  buttonArrowIconRoot: function buttonArrowIconRoot() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      height: 100%;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: content-box;\n    "])));
+  },
+  buttonArrowIconRootSmall: function buttonArrowIconRootSmall(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "])), t.btnWithIconPaddingLeftSmall, t.btnWithIconPaddingLeftSmall, t.btnIconSizeSmall);
+  },
+  buttonArrowIconRootMedium: function buttonArrowIconRootMedium(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "])), t.btnWithIconPaddingLeftMedium, t.btnWithIconPaddingLeftMedium, t.btnIconSizeMedium);
+  },
+  buttonArrowIconRootLarge: function buttonArrowIconRootLarge(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "])), t.btnWithIconPaddingLeftLarge, t.btnWithIconPaddingLeftLarge, t.btnIconSizeLarge);
+  },
+  buttonArrowIconLeft: function buttonArrowIconLeft() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      left: 0;\n    "])));
+  }
+});

package/components/Clickable/ClickableButtonArrow.styles/ClickableButtonArrow.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonArrow.styles.ts"],"names":["css","memoizeStyle","buttonArrowStyles","buttonArrowIconRoot","buttonArrowIconRootSmall","t","btnWithIconPaddingLeftSmall","btnIconSizeSmall","buttonArrowIconRootMedium","btnWithIconPaddingLeftMedium","btnIconSizeMedium","buttonArrowIconRootLarge","btnWithIconPaddingLeftLarge","btnIconSizeLarge","buttonArrowIconLeft"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,iBAAiB,GAAGD,YAAY,CAAC;AAC5CE,EAAAA,mBAD4C,iCACtB;AACpB,WAAOH,GAAP;;;;;;;;;;AAUD,GAZ2C;AAa5CI,EAAAA,wBAb4C,oCAanBC,CAbmB,EAaT;AACjC,WAAOL,GAAP;AACeK,IAAAA,CAAC,CAACC,2BADjB,EACkDD,CAAC,CAACC,2BADpD;AAEWD,IAAAA,CAAC,CAACE,gBAFb;;AAID,GAlB2C;AAmB5CC,EAAAA,yBAnB4C,qCAmBlBH,CAnBkB,EAmBR;AAClC,WAAOL,GAAP;AACeK,IAAAA,CAAC,CAACI,4BADjB,EACmDJ,CAAC,CAACI,4BADrD;AAEWJ,IAAAA,CAAC,CAACK,iBAFb;;AAID,GAxB2C;AAyB5CC,EAAAA,wBAzB4C,oCAyBnBN,CAzBmB,EAyBT;AACjC,WAAOL,GAAP;AACeK,IAAAA,CAAC,CAACO,2BADjB,EACkDP,CAAC,CAACO,2BADpD;AAEWP,IAAAA,CAAC,CAACQ,gBAFb;;AAID,GA9B2C;;AAgC5CC,EAAAA,mBAhC4C,iCAgCtB;AACpB,WAAOd,GAAP;;;AAGD,GApC2C,EAAD,CAAtC","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const buttonArrowStyles = memoizeStyle({\n  buttonArrowIconRoot() {\n    return css`\n      position: absolute;\n      height: 100%;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: content-box;\n    `;\n  },\n  buttonArrowIconRootSmall(t: Theme) {\n    return css`\n      padding: 0 ${t.btnWithIconPaddingLeftSmall} 0 ${t.btnWithIconPaddingLeftSmall};\n      width: ${t.btnIconSizeSmall};\n    `;\n  },\n  buttonArrowIconRootMedium(t: Theme) {\n    return css`\n      padding: 0 ${t.btnWithIconPaddingLeftMedium} 0 ${t.btnWithIconPaddingLeftMedium};\n      width: ${t.btnIconSizeMedium};\n    `;\n  },\n  buttonArrowIconRootLarge(t: Theme) {\n    return css`\n      padding: 0 ${t.btnWithIconPaddingLeftLarge} 0 ${t.btnWithIconPaddingLeftLarge};\n      width: ${t.btnIconSizeLarge};\n    `;\n  },\n\n  buttonArrowIconLeft() {\n    return css`\n      left: 0;\n    `;\n  },\n});\n"]}

package/components/Clickable/ClickableButtonArrow.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Clickable/ClickableButtonArrow.styles.js",
+  "module": "ClickableButtonArrow.styles",
+  "types": "../ClickableButtonArrow.styles.d.ts",
+  "sideEffects": false
+}

package/components/Clickable/ClickableButtonArrow.styles.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const buttonArrowStyles: {
+    buttonArrowIconRoot(): string;
+    buttonArrowIconRootSmall(t: Theme): string;
+    buttonArrowIconRootMedium(t: Theme): string;
+    buttonArrowIconRootLarge(t: Theme): string;
+    buttonArrowIconLeft(): string;
+};

package/components/Clickable/ClickableButtonCaption/ClickableButtonCaption.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { cx } from "../../../lib/theming/Emotion";
+import { ClickableButtonIcon } from "../ClickableButtonIcon";
+import { ClickableButtonLoadingIcon } from "../ClickableButtonLoadingIcon";
+import { buttonCaptionStyles } from "../ClickableButtonCaption.styles";
+import { clickableGlobalClasses } from "../Clickable.styles";
+export var ClickableButtonCaption = function ClickableButtonCaption(_ref) {
+  var _cx, _cx2;
+
+  var leftIcon = _ref.leftIcon,
+      rightIcon = _ref.rightIcon,
+      isDisabled = _ref.isDisabled,
+      isLoading = _ref.isLoading,
+      size = _ref.size,
+      children = _ref.children;
+  var isLoadingWithoutIcons = !leftIcon && !rightIcon && isLoading;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx((_cx = {}, _cx[buttonCaptionStyles.buttonCaption()] = true, _cx[buttonCaptionStyles.buttonCaptionDisabled()] = isDisabled, _cx))
+  }, isLoadingWithoutIcons && /*#__PURE__*/React.createElement(ClickableButtonLoadingIcon, {
+    size: size
+  }), leftIcon && /*#__PURE__*/React.createElement(ClickableButtonIcon, {
+    size: size,
+    isLoading: isLoading,
+    position: "left",
+    icon: leftIcon
+  }, children), /*#__PURE__*/React.createElement("span", {
+    "data-tid": "test",
+    "aria-live": "assertive",
+    className: cx((_cx2 = {}, _cx2[clickableGlobalClasses.text] = true, _cx2[buttonCaptionStyles.buttonVisibilityHidden()] = isLoadingWithoutIcons, _cx2))
+  }, children), rightIcon && /*#__PURE__*/React.createElement(ClickableButtonIcon, {
+    size: size,
+    isLoading: isLoading,
+    position: "right",
+    icon: rightIcon,
+    hasBothIcons: !!leftIcon && !!rightIcon
+  }, children));
+};

package/components/Clickable/ClickableButtonCaption/ClickableButtonCaption.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ClickableButtonCaption.tsx"],"names":["React","cx","ClickableButtonIcon","ClickableButtonLoadingIcon","buttonCaptionStyles","clickableGlobalClasses","ClickableButtonCaption","leftIcon","rightIcon","isDisabled","isLoading","size","children","isLoadingWithoutIcons","buttonCaption","buttonCaptionDisabled","text","buttonVisibilityHidden"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;;;AAGA,SAASC,mBAAT,QAAoC,uBAApC;AACA,SAASC,0BAAT,QAA2C,8BAA3C;AACA,SAASC,mBAAT,QAAoC,iCAApC;AACA,SAASC,sBAAT,QAAuC,oBAAvC;;AAEA,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB;;;;;;;AAOhB,mBANpBC,QAMoB,QANpBA,QAMoB,CALpBC,SAKoB,QALpBA,SAKoB,CAJpBC,UAIoB,QAJpBA,UAIoB,CAHpBC,SAGoB,QAHpBA,SAGoB,CAFpBC,IAEoB,QAFpBA,IAEoB,CADpBC,QACoB,QADpBA,QACoB;AACpB,MAAMC,qBAAqB,GAAG,CAACN,QAAD,IAAa,CAACC,SAAd,IAA2BE,SAAzD;;AAEA;AACE;AACE,MAAA,SAAS,EAAET,EAAE;AACVG,MAAAA,mBAAmB,CAACU,aAApB,EADU,IAC4B,IAD5B;AAEVV,MAAAA,mBAAmB,CAACW,qBAApB,EAFU,IAEoCN,UAFpC,OADf;;;AAMGI,IAAAA,qBAAqB,iBAAI,oBAAC,0BAAD,IAA4B,IAAI,EAAEF,IAAlC,GAN5B;AAOGJ,IAAAA,QAAQ;AACP,wBAAC,mBAAD,IAAqB,IAAI,EAAEI,IAA3B,EAAiC,SAAS,EAAED,SAA5C,EAAuD,QAAQ,EAAC,MAAhE,EAAuE,IAAI,EAAEH,QAA7E;AACGK,IAAAA,QADH,CARJ;;;AAYE;AACE,kBAAS,MADX;AAEE,mBAAU,WAFZ;AAGE,MAAA,SAAS,EAAEX,EAAE;AACVI,MAAAA,sBAAsB,CAACW,IADb,IACoB,IADpB;AAEVZ,MAAAA,mBAAmB,CAACa,sBAApB,EAFU,IAEqCJ,qBAFrC,QAHf;;;AAQGD,IAAAA,QARH,CAZF;;AAsBGJ,IAAAA,SAAS;AACR,wBAAC,mBAAD;AACE,MAAA,IAAI,EAAEG,IADR;AAEE,MAAA,SAAS,EAAED,SAFb;AAGE,MAAA,QAAQ,EAAC,OAHX;AAIE,MAAA,IAAI,EAAEF,SAJR;AAKE,MAAA,YAAY,EAAE,CAAC,CAACD,QAAF,IAAc,CAAC,CAACC,SALhC;;AAOGI,IAAAA,QAPH,CAvBJ,CADF;;;;;AAoCD,CA9CM","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { ClickableProps } from './Clickable';\nimport { ClickableButtonIcon } from './ClickableButtonIcon';\nimport { ClickableButtonLoadingIcon } from './ClickableButtonLoadingIcon';\nimport { buttonCaptionStyles } from './ClickableButtonCaption.styles';\nimport { clickableGlobalClasses } from './Clickable.styles';\n\nexport const ClickableButtonCaption = ({\n  leftIcon,\n  rightIcon,\n  isDisabled,\n  isLoading,\n  size,\n  children,\n}: ClickableProps) => {\n  const isLoadingWithoutIcons = !leftIcon && !rightIcon && isLoading;\n\n  return (\n    <div\n      className={cx({\n        [buttonCaptionStyles.buttonCaption()]: true,\n        [buttonCaptionStyles.buttonCaptionDisabled()]: isDisabled,\n      })}\n    >\n      {isLoadingWithoutIcons && <ClickableButtonLoadingIcon size={size} />}\n      {leftIcon && (\n        <ClickableButtonIcon size={size} isLoading={isLoading} position=\"left\" icon={leftIcon}>\n          {children}\n        </ClickableButtonIcon>\n      )}\n      <span\n        data-tid=\"test\"\n        aria-live=\"assertive\"\n        className={cx({\n          [clickableGlobalClasses.text]: true,\n          [buttonCaptionStyles.buttonVisibilityHidden()]: isLoadingWithoutIcons,\n        })}\n      >\n        {children}\n      </span>\n      {rightIcon && (\n        <ClickableButtonIcon\n          size={size}\n          isLoading={isLoading}\n          position=\"right\"\n          icon={rightIcon}\n          hasBothIcons={!!leftIcon && !!rightIcon}\n        >\n          {children}\n        </ClickableButtonIcon>\n      )}\n    </div>\n  );\n};\n"]}