@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

package/components/Button/Button.styles.js

@@ -0,0 +1,241 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion.js';
+import { resetButton, resetText } from '../../lib/styles/Mixins.js';
+import { buttonUseMixin, buttonHoverMixin, buttonActiveMixin, buttonSizeMixin } from './Button.mixins.js';
+export var globalClasses = prefix('button')({
+    root: 'root',
+    arrow: 'arrow',
+    caption: 'caption',
+    text: 'text',
+    innerShadow: 'inner-shadow',
+    disabled: 'disabled',
+});
+export var styles = memoizeStyle({
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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%;\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 svg {\n        color: ", ";\n      }\n      &.", " svg {\n        color: ", ";\n      }\n      & svg {\n        color: ", ";\n      }\n    "], ["\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%;\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 svg {\n        color: ", ";\n      }\n      &.", " svg {\n        color: ", ";\n      }\n      & svg {\n        color: ", ";\n      }\n    "])), resetButton(), resetText(), t.transitionDuration, t.transitionTimingFunction, t.btnBorderColorTransition ? ", ".concat(t.btnBorderColorTransition) : '', t.btnBackgroundClip, globalClasses.innerShadow, t.btnIconHoverColor, globalClasses.disabled, t.btnIconDisabledColor, t.btnIconColor);
+    },
+    withArrowIconRightSmall: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-right: calc(", " + ", " + ", ");\n    "], ["\n      padding-right: calc(", " + ", " + ", ");\n    "])), t.btnIconSizeSmall, t.btnWithIconPaddingSmall, t.btnWithIconPaddingSmall);
+    },
+    withArrowIconRightMedium: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-right: calc(", " + ", " + ", ");\n    "], ["\n      padding-right: calc(", " + ", " + ", ");\n    "])), t.btnIconSizeMedium, t.btnWithIconPaddingMedium, t.btnWithIconPaddingMedium);
+    },
+    withArrowIconRightLarge: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding-right: calc(", " + ", " + ", ");\n    "], ["\n      padding-right: calc(", " + ", " + ", ");\n    "])), t.btnIconSizeLarge, t.btnWithIconPaddingLarge, t.btnWithIconPaddingLarge);
+    },
+    withArrowIconLeftSmall: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-left: calc(", " + ", " + ", ");\n    "], ["\n      padding-left: calc(", " + ", " + ", ");\n    "])), t.btnIconSizeSmall, t.btnWithIconPaddingSmall, t.btnWithIconPaddingSmall);
+    },
+    withArrowIconLeftMedium: function (t) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-left: calc(", " + ", " + ", ");\n    "], ["\n      padding-left: calc(", " + ", " + ", ");\n    "])), t.btnIconSizeMedium, t.btnWithIconPaddingMedium, t.btnWithIconPaddingMedium);
+    },
+    withArrowIconLeftLarge: function (t) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-left: calc(", " + ", " + ", ");\n    "], ["\n      padding-left: calc(", " + ", " + ", ");\n    "])), t.btnIconSizeLarge, t.btnWithIconPaddingLarge, t.btnWithIconPaddingLarge);
+    },
+    simulatedPress: function () {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      &:active .", " {\n        transform: translateY(1px);\n      }\n    "], ["\n      &:active .", " {\n        transform: translateY(1px);\n      }\n    "])), globalClasses.caption);
+    },
+    outline: function () {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      border-radius: inherit;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    "], ["\n      border-radius: inherit;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    "])));
+    },
+    outlineWarning: function (t) {
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      box-shadow:\n        0 0 0 ", " ", ",\n        inset 0 0 0 ", " ", ";\n    "], ["\n      box-shadow:\n        0 0 0 ", " ", ",\n        inset 0 0 0 ", " ", ";\n    "])), t.btnOutlineWidth, t.btnBorderColorWarning, t.btnInsetWidth, t.btnInsetColor);
+    },
+    outlineError: function (t) {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      box-shadow:\n        0 0 0 ", " ", ",\n        inset 0 0 0 ", " ", ";\n    "], ["\n      box-shadow:\n        0 0 0 ", " ", ",\n        inset 0 0 0 ", " ", ";\n    "])), t.btnOutlineWidth, t.btnBorderColorError, t.btnInsetWidth, t.btnInsetColor);
+    },
+    outlineLink: function () {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      cursor: default;\n      box-shadow: none;\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      top: -2px;\n    "], ["\n      cursor: default;\n      box-shadow: none;\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      top: -2px;\n    "])));
+    },
+    outlineLinkWarning: function (t) {
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), t.btnWarningSecondary);
+    },
+    outlineLinkError: function (t) {
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      background-color: ", ";\n    "], ["\n      background-color: ", ";\n    "])), t.btnErrorSecondary);
+    },
+    sizeSmall: function (t) {
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      border-radius: ", ";\n\n      ", ";\n    "], ["\n      border-radius: ", ";\n\n      ", ";\n    "])), t.btnBorderRadiusSmall, buttonSizeMixin(t.btnFontSizeSmall, t.btnLineHeightSmall, t.btnPaddingXSmall, t.btnPaddingYSmall));
+    },
+    sizeMedium: function (t) {
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      border-radius: ", ";\n\n      ", ";\n    "], ["\n      border-radius: ", ";\n\n      ", ";\n    "])), t.btnBorderRadiusMedium, buttonSizeMixin(t.btnFontSizeMedium, t.btnLineHeightMedium, t.btnPaddingXMedium, t.btnPaddingYMedium));
+    },
+    sizeLarge: function (t) {
+        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n      border-radius: ", ";\n\n      ", ";\n    "], ["\n      border-radius: ", ";\n\n      ", ";\n    "])), t.btnBorderRadiusLarge, buttonSizeMixin(t.btnFontSizeLarge, t.btnLineHeightLarge, t.btnPaddingXLarge, t.btnPaddingYLarge));
+    },
+    sizeSmallWithIcon: function (t) {
+        return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      padding-left: ", ";\n    "], ["\n      padding-left: ", ";\n    "])), t.btnWithIconPaddingSmall);
+    },
+    sizeMediumWithIcon: function (t) {
+        return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      padding-left: ", ";\n    "], ["\n      padding-left: ", ";\n    "])), t.btnWithIconPaddingMedium);
+    },
+    sizeLargeWithIcon: function (t) {
+        return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      padding-left: ", ";\n    "], ["\n      padding-left: ", ";\n    "])), t.btnWithIconPaddingLarge);
+    },
+    sizeSmallWithRightIcon: function (t) {
+        return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingSmall);
+    },
+    sizeMediumWithRightIcon: function (t) {
+        return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingMedium);
+    },
+    sizeLargeWithRightIcon: function (t) {
+        return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingLarge);
+    },
+    sizeSmallWithIconWithoutText: function (t) {
+        return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingSmall, t.btnWithIconPaddingSmall);
+    },
+    sizeMediumWithIconWithoutText: function (t) {
+        return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingMedium, t.btnWithIconPaddingMedium);
+    },
+    sizeLargeWithIconWithoutText: function (t) {
+        return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.btnWithIconPaddingLarge, t.btnWithIconPaddingLarge);
+    },
+    link: function (t) {
+        return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n      background: none;\n      border-radius: ", ";\n      border: none;\n      box-shadow: none;\n      white-space: nowrap;\n      color: ", ";\n      display: inline;\n      margin: 0;\n      padding: 0 !important; // override size mixin\n      height: auto !important; // override size mixin\n\n      &:hover:enabled,\n      &:active:enabled {\n        color: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active:enabled {\n        ", "\n      }\n    "], ["\n      background: none;\n      border-radius: ", ";\n      border: none;\n      box-shadow: none;\n      white-space: nowrap;\n      color: ", ";\n      display: inline;\n      margin: 0;\n      padding: 0 !important; // override size mixin\n      height: auto !important; // override size mixin\n\n      &:hover:enabled,\n      &:active:enabled {\n        color: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active:enabled {\n        ", "\n      }\n    "])), t.btnLinkBorderRadius, t.btnLinkColor, t.btnLinkHoverColor, t.btnLinkHoverTextDecoration, activeStyles.link(t));
+    },
+    linkLineHeight: function () {
+        return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      line-height: inherit !important; // override size mixin\n    "], ["\n      line-height: inherit !important; // override size mixin\n    "])));
+    },
+    linkLineHeightSafariFallback: function () {
+        return css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n      /* Safari overrides 'underline' and 'border' if 'line-height' is used */\n      margin: -1px 0 -2px;\n    "], ["\n      /* Safari overrides 'underline' and 'border' if 'line-height' is used */\n      margin: -1px 0 -2px;\n    "])));
+    },
+    linkFocus: function (t) {
+        return css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n      & {\n        color: ", ";\n        text-decoration: ", ";\n      }\n    "], ["\n      & {\n        color: ", ";\n        text-decoration: ", ";\n      }\n    "])), t.btnLinkColor, t.btnLinkHoverTextDecoration);
+    },
+    linkDisabled: function (t) {
+        return css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n      cursor: default;\n\n      &,\n      &:hover:enabled,\n      &:active:enabled {\n        color: ", ";\n      }\n    "], ["\n      cursor: default;\n\n      &,\n      &:hover:enabled,\n      &:active:enabled {\n        color: ", ";\n      }\n    "])), t.btnLinkDisabledColor);
+    },
+    focus: function (t) {
+        return css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      position: relative;\n      z-index: 2;\n\n      &,\n      &:hover:enabled,\n      &:active:enabled,\n      &:active:hover:enabled {\n        box-shadow:\n          inset 0 0 0 ", " ", ",\n          0 0 0 ", " ", " !important; // override root:hover style\n      }\n    "], ["\n      position: relative;\n      z-index: 2;\n\n      &,\n      &:hover:enabled,\n      &:active:enabled,\n      &:active:hover:enabled {\n        box-shadow:\n          inset 0 0 0 ", " ", ",\n          0 0 0 ", " ", " !important; // override root:hover style\n      }\n    "])), t.btnInsetWidth, t.btnOutlineColorFocus, t.btnFocusShadowWidth, t.btnBorderColorFocus);
+    },
+    disabled: function (t) {
+        return css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n      cursor: default;\n      pointer-events: none;\n      box-shadow: 0 0 0 ", " ", ";\n\n      background-image: none;\n      background-color: ", ";\n      color: ", ";\n    "], ["\n      cursor: default;\n      pointer-events: none;\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);
+    },
+    disabledWithoutOutline: function (t) {
+        return css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      box-shadow: 0 0 0 ", " ", ";\n    "], ["\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.btnBorderWidth, t.btnDisabledBg);
+    },
+    arrowIconRoot: function () {
+        return css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\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      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    "])));
+    },
+    arrowIconRootSmall: function (t) {
+        return css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "], ["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "])), t.btnWithIconPaddingSmall, t.btnWithIconPaddingSmall, t.btnIconSizeSmall);
+    },
+    arrowIconRootMedium: function (t) {
+        return css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "], ["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "])), t.btnWithIconPaddingMedium, t.btnWithIconPaddingMedium, t.btnIconSizeMedium);
+    },
+    arrowIconRootLarge: function (t) {
+        return css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "], ["\n      padding: 0 ", " 0 ", ";\n      width: ", ";\n    "])), t.btnWithIconPaddingLarge, t.btnWithIconPaddingLarge, t.btnIconSizeLarge);
+    },
+    arrowIconLeft: function () {
+        return css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n      left: 0;\n    "], ["\n      left: 0;\n    "])));
+    },
+    default: function (t) {
+        return css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", ";\n      }\n    "], ["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", ";\n      }\n    "])), buttonUseMixin(t.btnDefaultBg, t.btnDefaultBgStart, t.btnDefaultBgEnd, t.btnDefaultTextColor, t.btnDefaultBorderColor, t.btnBorderWidth), buttonHoverMixin(t.btnDefaultHoverBg, t.btnDefaultHoverBgStart, t.btnDefaultHoverBgEnd, t.btnDefaultHoverTextColor, t.btnDefaultHoverBorderColor, t.btnBorderWidth), activeStyles.default(t));
+    },
+    primary: function (t) {
+        return css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "], ["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin(t.btnPrimaryBg, t.btnPrimaryBgStart, t.btnPrimaryBgEnd, t.btnPrimaryTextColor, t.btnPrimaryBorderColor, t.btnBorderWidth), buttonHoverMixin(t.btnPrimaryHoverBg, t.btnPrimaryHoverBgStart, t.btnPrimaryHoverBgEnd, t.btnPrimaryHoverTextColor, t.btnPrimaryHoverBorderColor, t.btnBorderWidth), activeStyles.primary(t));
+    },
+    success: function (t) {
+        return css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "], ["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin(t.btnSuccessBg, t.btnSuccessBgStart, t.btnSuccessBgEnd, t.btnSuccessTextColor, t.btnSuccessBorderColor, t.btnBorderWidth), buttonHoverMixin(t.btnSuccessHoverBg, t.btnSuccessHoverBgStart, t.btnSuccessHoverBgEnd, t.btnSuccessHoverTextColor, t.btnSuccessHoverBorderColor, t.btnBorderWidth), activeStyles.success(t));
+    },
+    danger: function (t) {
+        return css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "], ["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin(t.btnDangerBg, t.btnDangerBgStart, t.btnDangerBgEnd, t.btnDangerTextColor, t.btnDangerBorderColor, t.btnBorderWidth), buttonHoverMixin(t.btnDangerHoverBg, t.btnDangerHoverBgStart, t.btnDangerHoverBgEnd, t.btnDangerHoverTextColor, t.btnDangerHoverBorderColor, t.btnBorderWidth), activeStyles.danger(t));
+    },
+    pay: function (t) {
+        return css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "], ["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin(t.btnPayBg, t.btnPayBgStart, t.btnPayBgEnd, t.btnPayTextColor, t.btnPayBorderColor, t.btnBorderWidth), buttonHoverMixin(t.btnPayHoverBg, t.btnPayHoverBgStart, t.btnPayHoverBgEnd, t.btnPayHoverTextColor, t.btnPayHoverBorderColor, t.btnBorderWidth), activeStyles.pay(t));
+    },
+    text: function (t) {
+        return css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n      &,\n      &:enabled,\n      &:hover {\n        box-shadow: none;\n      }\n\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "], ["\n      &,\n      &:enabled,\n      &:hover {\n        box-shadow: none;\n      }\n\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, t.btnBorderWidth), buttonHoverMixin(t.btnTextHoverBg, '', '', t.btnTextHoverTextColor, t.btnTextHoverBorderColor, t.btnBorderWidth), activeStyles.text(t));
+    },
+    backless: function (t) {
+        return css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "], ["\n      ", ";\n\n      &:hover {\n        ", ";\n      }\n\n      &:active {\n        ", "\n      }\n    "])), buttonUseMixin(t.btnBacklessBg, '', '', t.btnBacklessTextColor, t.btnBacklessBorderColor, t.btnBorderWidth), buttonHoverMixin(t.btnBacklessHoverBg, '', '', t.btnBacklessHoverTextColor, t.btnBacklessHoverBorderColor, t.btnBorderWidth), activeStyles.backless(t));
+    },
+    checked: function (t) {
+        var checkedStyles = "\n      background-image: none;\n      box-shadow: 0 0 0 ".concat(t.btnBorderWidth, " ").concat(t.btnDefaultCheckedBorderColor, " !important;\n      background-color: ").concat(t.btnCheckedBg, " !important;\n      color: ").concat(t.btnCheckedTextColor, " !important;\n\n      .").concat(globalClasses.innerShadow, " {\n        box-shadow: ").concat(t.btnCheckedShadow, ";\n      }\n\n      :enabled svg {\n        color: ").concat(t.btnCheckedTextColor, " !important;\n      }\n      :hover:enabled svg {\n        color: ").concat(t.btnCheckedTextColor, " !important;\n      }\n    ");
+        return css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n      ", "\n\n      &:hover:enabled,\n      &:active:enabled,\n      &:hover:active:enabled {\n        ", "\n      }\n    "], ["\n      ", "\n\n      &:hover:enabled,\n      &:active:enabled,\n      &:hover:active:enabled {\n        ", "\n      }\n    "])), checkedStyles, checkedStyles);
+    },
+    checkedFocused: function (t) {
+        return css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n      &:hover:enabled,\n      &:hover:active:enabled {\n        box-shadow:\n          inset 0 0 0 ", " ", ",\n          0 0 0 ", " ", " !important;\n        border-color: ", " !important;\n      }\n    "], ["\n      &:hover:enabled,\n      &:hover:active:enabled {\n        box-shadow:\n          inset 0 0 0 ", " ", ",\n          0 0 0 ", " ", " !important;\n        border-color: ", " !important;\n      }\n    "])), t.btnInsetWidth, t.btnOutlineColorFocus, t.btnFocusShadowWidth, t.btnBorderColorFocus, t.btnBorderColorFocus);
+    },
+    checkedDisabled: function (t) {
+        return css(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n      box-shadow: 0 0 0 ", " ", ";\n      background-color: ", ";\n      color: ", ";\n\n      .", " {\n        box-shadow: ", ";\n      }\n\n      svg {\n        color: ", " !important;\n      }\n    "], ["\n      box-shadow: 0 0 0 ", " ", ";\n      background-color: ", ";\n      color: ", ";\n\n      .", " {\n        box-shadow: ", ";\n      }\n\n      svg {\n        color: ", " !important;\n      }\n    "])), t.btnBorderWidth, t.btnCheckedDisabledBorderColor, t.btnCheckedDisabledBg, t.btnCheckedDisabledColor, globalClasses.innerShadow, t.btnCheckedDisabledShadow, t.btnCheckedDisabledColor);
+    },
+    caption: function () {
+        return css(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n      position: relative;\n      white-space: nowrap;\n      display: inline-block;\n      width: 100%;\n      vertical-align: top;\n    "], ["\n      position: relative;\n      white-space: nowrap;\n      display: inline-block;\n      width: 100%;\n      vertical-align: top;\n    "])));
+    },
+    captionLink: function () {
+        return css(templateObject_51 || (templateObject_51 = __makeTemplateObject(["\n      display: inline;\n      transform: none !important; // override root:active style\n    "], ["\n      display: inline;\n      transform: none !important; // override root:active style\n    "])));
+    },
+    captionDisabled: function () {
+        return css(templateObject_52 || (templateObject_52 = __makeTemplateObject(["\n      transform: none !important; // override root:active style\n    "], ["\n      transform: none !important; // override root:active style\n    "])));
+    },
+    wrap: function (t) {
+        return css(templateObject_53 || (templateObject_53 = __makeTemplateObject(["\n      box-sizing: border-box;\n      display: inline-block;\n      line-height: normal;\n      padding: ", ";\n    "], ["\n      box-sizing: border-box;\n      display: inline-block;\n      line-height: normal;\n      padding: ", ";\n    "])), t.btnBorderWidth);
+    },
+    wrapSmall: function (t) {
+        return css(templateObject_54 || (templateObject_54 = __makeTemplateObject(["\n      height: ", ";\n    "], ["\n      height: ", ";\n    "])), t.btnHeightSmall);
+    },
+    wrapMedium: function (t) {
+        return css(templateObject_55 || (templateObject_55 = __makeTemplateObject(["\n      height: ", ";\n    "], ["\n      height: ", ";\n    "])), t.btnHeightMedium);
+    },
+    wrapLarge: function (t) {
+        return css(templateObject_56 || (templateObject_56 = __makeTemplateObject(["\n      height: ", ";\n    "], ["\n      height: ", ";\n    "])), t.btnHeightLarge);
+    },
+    narrow: function () {
+        return css(templateObject_57 || (templateObject_57 = __makeTemplateObject(["\n      padding-left: 5px;\n      padding-right: 5px;\n    "], ["\n      padding-left: 5px;\n      padding-right: 5px;\n    "])));
+    },
+    noPadding: function () {
+        return css(templateObject_58 || (templateObject_58 = __makeTemplateObject(["\n      padding-left: 0;\n      padding-right: 0;\n    "], ["\n      padding-left: 0;\n      padding-right: 0;\n    "])));
+    },
+    noRightPadding: function () {
+        return css(templateObject_59 || (templateObject_59 = __makeTemplateObject(["\n      padding-right: 0;\n    "], ["\n      padding-right: 0;\n    "])));
+    },
+    wrapLink: function () {
+        return css(templateObject_60 || (templateObject_60 = __makeTemplateObject(["\n      padding: 0;\n    "], ["\n      padding: 0;\n    "])));
+    },
+    borderless: function () {
+        return css(templateObject_61 || (templateObject_61 = __makeTemplateObject(["\n      &,\n      &:active:hover,\n      &:hover {\n        box-shadow: none !important; // override root:hover style\n      }\n    "], ["\n      &,\n      &:active:hover,\n      &:hover {\n        box-shadow: none !important; // override root:hover style\n      }\n    "])));
+    },
+    backlessDisabled: function (t) {
+        return css(templateObject_62 || (templateObject_62 = __makeTemplateObject(["\n      box-shadow: 0 0 0 1px ", ";\n      background-color: transparent;\n    "], ["\n      box-shadow: 0 0 0 1px ", ";\n      background-color: transparent;\n    "])), t.btnBacklessDisabledBorderColor);
+    },
+    textDisabled: function () {
+        return css(templateObject_63 || (templateObject_63 = __makeTemplateObject(["\n      background-color: transparent;\n    "], ["\n      background-color: transparent;\n    "])));
+    },
+    loading: function () {
+        return css(templateObject_64 || (templateObject_64 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n    "], ["\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n    "])));
+    },
+    visibilityHidden: function () {
+        return css(templateObject_65 || (templateObject_65 = __makeTemplateObject(["\n      visibility: hidden;\n    "], ["\n      visibility: hidden;\n    "])));
+    },
+});
+export var activeStyles = memoizeStyle({
+    default: function (t) {
+        return css(templateObject_66 || (templateObject_66 = __makeTemplateObject(["\n      & {\n        ", ";\n      }\n    "], ["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin(t.btnDefaultActiveBg, t.btnDefaultActiveShadow, t.btnDefaultActiveBorderColor, t.btnBorderWidth));
+    },
+    primary: function (t) {
+        return css(templateObject_67 || (templateObject_67 = __makeTemplateObject(["\n      & {\n        ", ";\n      }\n    "], ["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin(t.btnPrimaryActiveBg, t.btnPrimaryActiveShadow, t.btnPrimaryActiveBorderColor, t.btnBorderWidth));
+    },
+    success: function (t) {
+        return css(templateObject_68 || (templateObject_68 = __makeTemplateObject(["\n      & {\n        ", ";\n      }\n    "], ["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin(t.btnSuccessActiveBg, t.btnSuccessActiveShadow, t.btnSuccessActiveBorderColor, t.btnBorderWidth));
+    },
+    danger: function (t) {
+        return css(templateObject_69 || (templateObject_69 = __makeTemplateObject(["\n      & {\n        ", ";\n      }\n    "], ["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin(t.btnDangerActiveBg, t.btnDangerActiveShadow, t.btnDangerActiveBorderColor, t.btnBorderWidth));
+    },
+    pay: function (t) {
+        return css(templateObject_70 || (templateObject_70 = __makeTemplateObject(["\n      & {\n        ", ";\n      }\n    "], ["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin(t.btnPayActiveBg, t.btnPayActiveShadow, t.btnPayActiveBorderColor, t.btnBorderWidth));
+    },
+    link: function (t) {
+        return css(templateObject_71 || (templateObject_71 = __makeTemplateObject(["\n      & {\n        color: ", ";\n      }\n    "], ["\n      & {\n        color: ", ";\n      }\n    "])), t.btnLinkActiveColor);
+    },
+    text: function (t) {
+        return css(templateObject_72 || (templateObject_72 = __makeTemplateObject(["\n      & {\n        ", ";\n      }\n    "], ["\n      & {\n        ", ";\n      }\n    "])), buttonActiveMixin(t.btnTextActiveBg, '', t.btnTextActiveBg, t.btnBorderWidth));
+    },
+    backless: function (t) {
+        return css(templateObject_73 || (templateObject_73 = __makeTemplateObject(["\n      & {\n        ", "\n      }\n    "], ["\n      & {\n        ", "\n      }\n    "])), buttonActiveMixin(t.btnBacklessActiveBg, '', t.btnBacklessActiveBorderColor, t.btnBorderWidth));
+    },
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56, templateObject_57, templateObject_58, templateObject_59, templateObject_60, templateObject_61, templateObject_62, templateObject_63, templateObject_64, templateObject_65, templateObject_66, templateObject_67, templateObject_68, templateObject_69, templateObject_70, templateObject_71, templateObject_72, templateObject_73;
+//# sourceMappingURL=Button.styles.js.map

package/components/Button/Button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styles.js","sourceRoot":"","sources":["../../../components/Button/Button.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { resetButton, resetText } from '../../lib/styles/Mixins.js';\n\nimport { buttonUseMixin, buttonHoverMixin, buttonActiveMixin, buttonSizeMixin } from './Button.mixins.js';\n\nexport const globalClasses = prefix('button')({\n  root: 'root',\n  arrow: 'arrow',\n  caption: 'caption',\n  text: 'text',\n  innerShadow: 'inner-shadow',\n  disabled: 'disabled',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${resetButton()};\n      ${resetText()};\n\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      cursor: pointer;\n      display: inline-block;\n      position: relative;\n      text-align: center;\n      width: 100%;\n      height: 100%;\n\n      .${globalClasses.innerShadow} {\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 svg {\n        color: ${t.btnIconHoverColor};\n      }\n      &.${globalClasses.disabled} svg {\n        color: ${t.btnIconDisabledColor};\n      }\n      & svg {\n        color: ${t.btnIconColor};\n      }\n    `;\n  },\n\n  withArrowIconRightSmall(t: Theme) {\n    return css`\n      padding-right: calc(${t.btnIconSizeSmall} + ${t.btnWithIconPaddingSmall} + ${t.btnWithIconPaddingSmall});\n    `;\n  },\n\n  withArrowIconRightMedium(t: Theme) {\n    return css`\n      padding-right: calc(${t.btnIconSizeMedium} + ${t.btnWithIconPaddingMedium} + ${t.btnWithIconPaddingMedium});\n    `;\n  },\n\n  withArrowIconRightLarge(t: Theme) {\n    return css`\n      padding-right: calc(${t.btnIconSizeLarge} + ${t.btnWithIconPaddingLarge} + ${t.btnWithIconPaddingLarge});\n    `;\n  },\n\n  withArrowIconLeftSmall(t: Theme) {\n    return css`\n      padding-left: calc(${t.btnIconSizeSmall} + ${t.btnWithIconPaddingSmall} + ${t.btnWithIconPaddingSmall});\n    `;\n  },\n\n  withArrowIconLeftMedium(t: Theme) {\n    return css`\n      padding-left: calc(${t.btnIconSizeMedium} + ${t.btnWithIconPaddingMedium} + ${t.btnWithIconPaddingMedium});\n    `;\n  },\n\n  withArrowIconLeftLarge(t: Theme) {\n    return css`\n      padding-left: calc(${t.btnIconSizeLarge} + ${t.btnWithIconPaddingLarge} + ${t.btnWithIconPaddingLarge});\n    `;\n  },\n\n  simulatedPress() {\n    return css`\n      &:active .${globalClasses.caption} {\n        transform: translateY(1px);\n      }\n    `;\n  },\n\n  outline() {\n    return css`\n      border-radius: inherit;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    `;\n  },\n\n  outlineWarning(t: Theme) {\n    return css`\n      box-shadow:\n        0 0 0 ${t.btnOutlineWidth} ${t.btnBorderColorWarning},\n        inset 0 0 0 ${t.btnInsetWidth} ${t.btnInsetColor};\n    `;\n  },\n\n  outlineError(t: Theme) {\n    return css`\n      box-shadow:\n        0 0 0 ${t.btnOutlineWidth} ${t.btnBorderColorError},\n        inset 0 0 0 ${t.btnInsetWidth} ${t.btnInsetColor};\n    `;\n  },\n\n  outlineLink() {\n    return css`\n      cursor: default;\n      box-shadow: none;\n      left: -2px;\n      right: -2px;\n      bottom: -2px;\n      top: -2px;\n    `;\n  },\n\n  outlineLinkWarning(t: Theme) {\n    return css`\n      background-color: ${t.btnWarningSecondary};\n    `;\n  },\n\n  outlineLinkError(t: Theme) {\n    return css`\n      background-color: ${t.btnErrorSecondary};\n    `;\n  },\n\n  sizeSmall(t: Theme) {\n    return css`\n      border-radius: ${t.btnBorderRadiusSmall};\n\n      ${buttonSizeMixin(t.btnFontSizeSmall, t.btnLineHeightSmall, t.btnPaddingXSmall, t.btnPaddingYSmall)};\n    `;\n  },\n\n  sizeMedium(t: Theme) {\n    return css`\n      border-radius: ${t.btnBorderRadiusMedium};\n\n      ${buttonSizeMixin(t.btnFontSizeMedium, t.btnLineHeightMedium, t.btnPaddingXMedium, t.btnPaddingYMedium)};\n    `;\n  },\n\n  sizeLarge(t: Theme) {\n    return css`\n      border-radius: ${t.btnBorderRadiusLarge};\n\n      ${buttonSizeMixin(t.btnFontSizeLarge, t.btnLineHeightLarge, t.btnPaddingXLarge, t.btnPaddingYLarge)};\n    `;\n  },\n\n  sizeSmallWithIcon(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingSmall};\n    `;\n  },\n\n  sizeMediumWithIcon(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingMedium};\n    `;\n  },\n\n  sizeLargeWithIcon(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLarge};\n    `;\n  },\n\n  sizeSmallWithRightIcon(t: Theme) {\n    return css`\n      padding-right: ${t.btnWithIconPaddingSmall};\n    `;\n  },\n\n  sizeMediumWithRightIcon(t: Theme) {\n    return css`\n      padding-right: ${t.btnWithIconPaddingMedium};\n    `;\n  },\n\n  sizeLargeWithRightIcon(t: Theme) {\n    return css`\n      padding-right: ${t.btnWithIconPaddingLarge};\n    `;\n  },\n\n  sizeSmallWithIconWithoutText(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingSmall};\n      padding-right: ${t.btnWithIconPaddingSmall};\n    `;\n  },\n\n  sizeMediumWithIconWithoutText(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingMedium};\n      padding-right: ${t.btnWithIconPaddingMedium};\n    `;\n  },\n\n  sizeLargeWithIconWithoutText(t: Theme) {\n    return css`\n      padding-left: ${t.btnWithIconPaddingLarge};\n      padding-right: ${t.btnWithIconPaddingLarge};\n    `;\n  },\n\n  link(t: Theme) {\n    return css`\n      background: none;\n      border-radius: ${t.btnLinkBorderRadius};\n      border: none;\n      box-shadow: none;\n      white-space: nowrap;\n      color: ${t.btnLinkColor};\n      display: inline;\n      margin: 0;\n      padding: 0 !important; // override size mixin\n      height: auto !important; // override size mixin\n\n      &:hover:enabled,\n      &:active:enabled {\n        color: ${t.btnLinkHoverColor};\n        text-decoration: ${t.btnLinkHoverTextDecoration};\n      }\n\n      &:active:enabled {\n        ${activeStyles.link(t)}\n      }\n    `;\n  },\n\n  linkLineHeight() {\n    return css`\n      line-height: inherit !important; // override size mixin\n    `;\n  },\n\n  linkLineHeightSafariFallback() {\n    return css`\n      /* Safari overrides 'underline' and 'border' if 'line-height' is used */\n      margin: -1px 0 -2px;\n    `;\n  },\n\n  linkFocus(t: Theme) {\n    return css`\n      & {\n        color: ${t.btnLinkColor};\n        text-decoration: ${t.btnLinkHoverTextDecoration};\n      }\n    `;\n  },\n\n  linkDisabled(t: Theme) {\n    return css`\n      cursor: default;\n\n      &,\n      &:hover:enabled,\n      &:active:enabled {\n        color: ${t.btnLinkDisabledColor};\n      }\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      position: relative;\n      z-index: 2;\n\n      &,\n      &:hover:enabled,\n      &:active:enabled,\n      &:active:hover:enabled {\n        box-shadow:\n          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  disabled(t: Theme) {\n    return css`\n      cursor: default;\n      pointer-events: none;\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\n  disabledWithoutOutline(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDisabledBg};\n    `;\n  },\n\n  arrowIconRoot() {\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\n  arrowIconRootSmall(t: Theme) {\n    return css`\n      padding: 0 ${t.btnWithIconPaddingSmall} 0 ${t.btnWithIconPaddingSmall};\n      width: ${t.btnIconSizeSmall};\n    `;\n  },\n\n  arrowIconRootMedium(t: Theme) {\n    return css`\n      padding: 0 ${t.btnWithIconPaddingMedium} 0 ${t.btnWithIconPaddingMedium};\n      width: ${t.btnIconSizeMedium};\n    `;\n  },\n\n  arrowIconRootLarge(t: Theme) {\n    return css`\n      padding: 0 ${t.btnWithIconPaddingLarge} 0 ${t.btnWithIconPaddingLarge};\n      width: ${t.btnIconSizeLarge};\n    `;\n  },\n\n  arrowIconLeft() {\n    return css`\n      left: 0;\n    `;\n  },\n\n  default(t: Theme) {\n    return css`\n      ${buttonUseMixin(\n        t.btnDefaultBg,\n        t.btnDefaultBgStart,\n        t.btnDefaultBgEnd,\n        t.btnDefaultTextColor,\n        t.btnDefaultBorderColor,\n        t.btnBorderWidth,\n      )};\n\n      &:hover {\n        ${buttonHoverMixin(\n          t.btnDefaultHoverBg,\n          t.btnDefaultHoverBgStart,\n          t.btnDefaultHoverBgEnd,\n          t.btnDefaultHoverTextColor,\n          t.btnDefaultHoverBorderColor,\n          t.btnBorderWidth,\n        )};\n      }\n\n      &:active {\n        ${activeStyles.default(t)};\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      ${buttonUseMixin(\n        t.btnPrimaryBg,\n        t.btnPrimaryBgStart,\n        t.btnPrimaryBgEnd,\n        t.btnPrimaryTextColor,\n        t.btnPrimaryBorderColor,\n        t.btnBorderWidth,\n      )};\n\n      &:hover {\n        ${buttonHoverMixin(\n          t.btnPrimaryHoverBg,\n          t.btnPrimaryHoverBgStart,\n          t.btnPrimaryHoverBgEnd,\n          t.btnPrimaryHoverTextColor,\n          t.btnPrimaryHoverBorderColor,\n          t.btnBorderWidth,\n        )};\n      }\n\n      &:active {\n        ${activeStyles.primary(t)}\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      ${buttonUseMixin(\n        t.btnSuccessBg,\n        t.btnSuccessBgStart,\n        t.btnSuccessBgEnd,\n        t.btnSuccessTextColor,\n        t.btnSuccessBorderColor,\n        t.btnBorderWidth,\n      )};\n\n      &:hover {\n        ${buttonHoverMixin(\n          t.btnSuccessHoverBg,\n          t.btnSuccessHoverBgStart,\n          t.btnSuccessHoverBgEnd,\n          t.btnSuccessHoverTextColor,\n          t.btnSuccessHoverBorderColor,\n          t.btnBorderWidth,\n        )};\n      }\n\n      &:active {\n        ${activeStyles.success(t)}\n      }\n    `;\n  },\n\n  danger(t: Theme) {\n    return css`\n      ${buttonUseMixin(\n        t.btnDangerBg,\n        t.btnDangerBgStart,\n        t.btnDangerBgEnd,\n        t.btnDangerTextColor,\n        t.btnDangerBorderColor,\n        t.btnBorderWidth,\n      )};\n\n      &:hover {\n        ${buttonHoverMixin(\n          t.btnDangerHoverBg,\n          t.btnDangerHoverBgStart,\n          t.btnDangerHoverBgEnd,\n          t.btnDangerHoverTextColor,\n          t.btnDangerHoverBorderColor,\n          t.btnBorderWidth,\n        )};\n      }\n\n      &:active {\n        ${activeStyles.danger(t)}\n      }\n    `;\n  },\n\n  pay(t: Theme) {\n    return css`\n      ${buttonUseMixin(\n        t.btnPayBg,\n        t.btnPayBgStart,\n        t.btnPayBgEnd,\n        t.btnPayTextColor,\n        t.btnPayBorderColor,\n        t.btnBorderWidth,\n      )};\n\n      &:hover {\n        ${buttonHoverMixin(\n          t.btnPayHoverBg,\n          t.btnPayHoverBgStart,\n          t.btnPayHoverBgEnd,\n          t.btnPayHoverTextColor,\n          t.btnPayHoverBorderColor,\n          t.btnBorderWidth,\n        )};\n      }\n\n      &:active {\n        ${activeStyles.pay(t)}\n      }\n    `;\n  },\n\n  text(t: Theme) {\n    return css`\n      &,\n      &:enabled,\n      &:hover {\n        box-shadow: none;\n      }\n\n      ${buttonUseMixin(t.btnTextBg, '', '', t.btnTextTextColor, t.btnTextBorderColor, t.btnBorderWidth)};\n\n      &:hover {\n        ${buttonHoverMixin(\n          t.btnTextHoverBg,\n          '',\n          '',\n          t.btnTextHoverTextColor,\n          t.btnTextHoverBorderColor,\n          t.btnBorderWidth,\n        )};\n      }\n\n      &:active {\n        ${activeStyles.text(t)}\n      }\n    `;\n  },\n\n  backless(t: Theme) {\n    return css`\n      ${buttonUseMixin(t.btnBacklessBg, '', '', t.btnBacklessTextColor, t.btnBacklessBorderColor, t.btnBorderWidth)};\n\n      &:hover {\n        ${buttonHoverMixin(\n          t.btnBacklessHoverBg,\n          '',\n          '',\n          t.btnBacklessHoverTextColor,\n          t.btnBacklessHoverBorderColor,\n          t.btnBorderWidth,\n        )};\n      }\n\n      &:active {\n        ${activeStyles.backless(t)}\n      }\n    `;\n  },\n\n  checked(t: Theme) {\n    const checkedStyles = `\n      background-image: none;\n      box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnDefaultCheckedBorderColor} !important;\n      background-color: ${t.btnCheckedBg} !important;\n      color: ${t.btnCheckedTextColor} !important;\n\n      .${globalClasses.innerShadow} {\n        box-shadow: ${t.btnCheckedShadow};\n      }\n\n      :enabled svg {\n        color: ${t.btnCheckedTextColor} !important;\n      }\n      :hover:enabled svg {\n        color: ${t.btnCheckedTextColor} !important;\n      }\n    `;\n\n    return css`\n      ${checkedStyles}\n\n      &:hover:enabled,\n      &:active:enabled,\n      &:hover:active:enabled {\n        ${checkedStyles}\n      }\n    `;\n  },\n\n  checkedFocused(t: Theme) {\n    return css`\n      &:hover:enabled,\n      &:hover:active:enabled {\n        box-shadow:\n          inset 0 0 0 ${t.btnInsetWidth} ${t.btnOutlineColorFocus},\n          0 0 0 ${t.btnFocusShadowWidth} ${t.btnBorderColorFocus} !important;\n        border-color: ${t.btnBorderColorFocus} !important;\n      }\n    `;\n  },\n\n  checkedDisabled(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 ${t.btnBorderWidth} ${t.btnCheckedDisabledBorderColor};\n      background-color: ${t.btnCheckedDisabledBg};\n      color: ${t.btnCheckedDisabledColor};\n\n      .${globalClasses.innerShadow} {\n        box-shadow: ${t.btnCheckedDisabledShadow};\n      }\n\n      svg {\n        color: ${t.btnCheckedDisabledColor} !important;\n      }\n    `;\n  },\n\n  caption() {\n    return css`\n      position: relative;\n      white-space: nowrap;\n      display: inline-block;\n      width: 100%;\n      vertical-align: top;\n    `;\n  },\n\n  captionLink() {\n    return css`\n      display: inline;\n      transform: none !important; // override root:active style\n    `;\n  },\n\n  captionDisabled() {\n    return css`\n      transform: none !important; // override root:active style\n    `;\n  },\n\n  wrap(t: Theme) {\n    return css`\n      box-sizing: border-box;\n      display: inline-block;\n      line-height: normal;\n      padding: ${t.btnBorderWidth};\n    `;\n  },\n\n  wrapSmall(t: Theme) {\n    return css`\n      height: ${t.btnHeightSmall};\n    `;\n  },\n\n  wrapMedium(t: Theme) {\n    return css`\n      height: ${t.btnHeightMedium};\n    `;\n  },\n\n  wrapLarge(t: Theme) {\n    return css`\n      height: ${t.btnHeightLarge};\n    `;\n  },\n\n  narrow() {\n    return css`\n      padding-left: 5px;\n      padding-right: 5px;\n    `;\n  },\n\n  noPadding() {\n    return css`\n      padding-left: 0;\n      padding-right: 0;\n    `;\n  },\n\n  noRightPadding() {\n    return css`\n      padding-right: 0;\n    `;\n  },\n\n  wrapLink() {\n    return css`\n      padding: 0;\n    `;\n  },\n\n  borderless() {\n    return css`\n      &,\n      &:active:hover,\n      &:hover {\n        box-shadow: none !important; // override root:hover style\n      }\n    `;\n  },\n\n  backlessDisabled(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.btnBacklessDisabledBorderColor};\n      background-color: transparent;\n    `;\n  },\n\n  textDisabled() {\n    return css`\n      background-color: transparent;\n    `;\n  },\n\n  loading() {\n    return css`\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n    `;\n  },\n\n  visibilityHidden() {\n    return css`\n      visibility: hidden;\n    `;\n  },\n});\n\nexport const activeStyles = memoizeStyle({\n  default(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin(\n          t.btnDefaultActiveBg,\n          t.btnDefaultActiveShadow,\n          t.btnDefaultActiveBorderColor,\n          t.btnBorderWidth,\n        )};\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin(\n          t.btnPrimaryActiveBg,\n          t.btnPrimaryActiveShadow,\n          t.btnPrimaryActiveBorderColor,\n          t.btnBorderWidth,\n        )};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin(\n          t.btnSuccessActiveBg,\n          t.btnSuccessActiveShadow,\n          t.btnSuccessActiveBorderColor,\n          t.btnBorderWidth,\n        )};\n      }\n    `;\n  },\n\n  danger(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin(\n          t.btnDangerActiveBg,\n          t.btnDangerActiveShadow,\n          t.btnDangerActiveBorderColor,\n          t.btnBorderWidth,\n        )};\n      }\n    `;\n  },\n\n  pay(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin(t.btnPayActiveBg, t.btnPayActiveShadow, t.btnPayActiveBorderColor, t.btnBorderWidth)};\n      }\n    `;\n  },\n\n  link(t: Theme) {\n    return css`\n      & {\n        color: ${t.btnLinkActiveColor};\n      }\n    `;\n  },\n\n  text(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin(t.btnTextActiveBg, '', t.btnTextActiveBg, t.btnBorderWidth)};\n      }\n    `;\n  },\n\n  backless(t: Theme) {\n    return css`\n      & {\n        ${buttonActiveMixin(t.btnBacklessActiveBg, '', t.btnBacklessActiveBorderColor, t.btnBorderWidth)}\n      }\n    `;\n  },\n});\n"]}

package/components/Button/ButtonArrow.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { Theme } from '../../lib/theming/Theme';
-import { ButtonInnerProps } from './Button';
-type ButtonArrowProps = Pick<ButtonInnerProps, 'size' | 'arrow' | 'checked' | 'disabled' | 'error' | 'use' | 'warning'> & {
-    isFocused: boolean;
-};
-export declare function useButtonArrow(props: ButtonArrowProps, theme: Theme): [string, React.ReactNode];
-export {};
+import React from 'react';
+import type { Theme } from '../../lib/theming/Theme.js';
+import type { ButtonInnerProps } from './Button.js';
+type ButtonArrowProps = Pick<ButtonInnerProps, 'size' | 'arrow' | 'checked' | 'disabled' | 'error' | 'use' | 'warning'> & {
+    isFocused: boolean;
+};
+export declare function useButtonArrow(props: ButtonArrowProps, theme: Theme): [string, React.ReactNode];
+export {};

package/components/Button/ButtonArrow.js

@@ -0,0 +1,49 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useContext } from 'react';
+import { cx } from '../../lib/theming/Emotion.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { ArrowRightIcon } from './ArrowRightIcon.js';
+import { ArrowLeftIcon } from './ArrowLeftIcon.js';
+import { globalClasses, styles } from './Button.styles.js';
+var ButtonArrow = function (_a) {
+    var arrow = _a.arrow, size = _a.size;
+    var theme = useContext(ThemeContext);
+    var getArrowIconRootClassName = function () {
+        var _a;
+        return cx(styles.arrowIconRoot(), globalClasses.arrow, (_a = {},
+            _a[styles.arrowIconRootSmall(theme)] = size === 'small',
+            _a[styles.arrowIconRootMedium(theme)] = size === 'medium',
+            _a[styles.arrowIconRootLarge(theme)] = size === 'large',
+            _a[styles.arrowIconLeft()] = arrow === 'left',
+            _a));
+    };
+    var arrowIcons = {
+        right: ArrowRightIcon,
+        left: ArrowLeftIcon,
+    };
+    var side = arrow === 'left' ? 'left' : 'right';
+    var ArrowIcon = arrowIcons[side];
+    var arrowNode = (React.createElement("div", { className: getArrowIconRootClassName() },
+        React.createElement(ArrowIcon, { size: size })));
+    return arrowNode;
+};
+export function useButtonArrow(props, theme) {
+    var arrow = props.arrow, size = props.size, use = props.use;
+    var canRender = use !== 'link' && (arrow === true || arrow === 'left');
+    var rootClassName = canRender
+        ? cx(arrow === true && size === 'small' && styles.withArrowIconRightSmall(theme), arrow === true && size === 'medium' && styles.withArrowIconRightMedium(theme), arrow === true && size === 'large' && styles.withArrowIconRightLarge(theme), arrow === 'left' && size === 'small' && styles.withArrowIconLeftSmall(theme), arrow === 'left' && size === 'medium' && styles.withArrowIconLeftMedium(theme), arrow === 'left' && size === 'large' && styles.withArrowIconLeftLarge(theme))
+        : '';
+    var arrowNode = canRender ? React.createElement(ButtonArrow, __assign({}, props)) : null;
+    return [rootClassName, arrowNode];
+}
+//# sourceMappingURL=ButtonArrow.js.map

package/components/Button/ButtonArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonArrow.js","sourceRoot":"","sources":["../../../components/Button/ButtonArrow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nimport { ArrowRightIcon } from './ArrowRightIcon.js';\nimport { ArrowLeftIcon } from './ArrowLeftIcon.js';\nimport type { ButtonInnerProps } from './Button.js';\nimport { globalClasses, styles } from './Button.styles.js';\n\ntype ButtonArrowProps = Pick<\n  ButtonInnerProps,\n  'size' | 'arrow' | 'checked' | 'disabled' | 'error' | 'use' | 'warning'\n> & {\n  isFocused: boolean;\n};\n\nconst ButtonArrow: React.FunctionComponent<ButtonArrowProps> = ({ arrow, size }) => {\n  const theme = useContext(ThemeContext);\n\n  const getArrowIconRootClassName = () => {\n    return cx(styles.arrowIconRoot(), globalClasses.arrow, {\n      [styles.arrowIconRootSmall(theme)]: size === 'small',\n      [styles.arrowIconRootMedium(theme)]: size === 'medium',\n      [styles.arrowIconRootLarge(theme)]: size === 'large',\n      [styles.arrowIconLeft()]: arrow === 'left',\n    });\n  };\n\n  const arrowIcons = {\n    right: ArrowRightIcon,\n    left: ArrowLeftIcon,\n  };\n  const side = arrow === 'left' ? 'left' : 'right';\n  const ArrowIcon = arrowIcons[side];\n  const arrowNode = (\n    <div className={getArrowIconRootClassName()}>\n      <ArrowIcon size={size} />\n    </div>\n  );\n\n  return arrowNode;\n};\n\nexport function useButtonArrow(props: ButtonArrowProps, theme: Theme): [string, React.ReactNode] {\n  const { arrow, size, use } = props;\n\n  const canRender = use !== 'link' && (arrow === true || arrow === 'left');\n\n  const rootClassName = canRender\n    ? cx(\n        arrow === true && size === 'small' && styles.withArrowIconRightSmall(theme),\n        arrow === true && size === 'medium' && styles.withArrowIconRightMedium(theme),\n        arrow === true && size === 'large' && styles.withArrowIconRightLarge(theme),\n        arrow === 'left' && size === 'small' && styles.withArrowIconLeftSmall(theme),\n        arrow === 'left' && size === 'medium' && styles.withArrowIconLeftMedium(theme),\n        arrow === 'left' && size === 'large' && styles.withArrowIconLeftLarge(theme),\n      )\n    : '';\n\n  const arrowNode = canRender ? <ButtonArrow {...props} /> : null;\n\n  return [rootClassName, arrowNode];\n}\n"]}

package/components/Button/ButtonIcon.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-import { Theme } from '../../lib/theming/Theme';
-import { SizeProp } from '../../lib/types/props';
-import { ButtonInnerProps } from './Button';
-export interface ButtonIconProps extends Pick<ButtonInnerProps, 'size' | 'icon' | 'loading' | 'use'> {
-    position: 'right' | 'left';
-    hasChildren: boolean;
-    hasBothIcons?: boolean;
-}
-export declare const getButtonIconSizes: (theme: Theme) => Record<SizeProp, number>;
-export declare const ButtonIcon: React.FunctionComponent<ButtonIconProps>;
+import React from 'react';
+import type { Theme } from '../../lib/theming/Theme.js';
+import type { SizeProp } from '../../lib/types/props.js';
+import type { ButtonInnerProps } from './Button.js';
+export interface ButtonIconProps extends Pick<ButtonInnerProps, 'size' | 'icon' | 'loading' | 'use'> {
+    position: 'right' | 'left';
+    hasChildren: boolean;
+    hasBothIcons?: boolean;
+}
+export declare const getButtonIconSizes: (theme: Theme) => Record<SizeProp, number>;
+export declare const ButtonIcon: React.FunctionComponent<ButtonIconProps>;

package/components/Button/ButtonIcon.js

@@ -0,0 +1,59 @@
+import React, { useContext } from 'react';
+import { isKonturIcon } from '../../lib/utils.js';
+import { cx } from '../../lib/theming/Emotion.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { styles } from './ButtonIcon.styles.js';
+import { LoadingButtonIcon } from './LoadingButtonIcon.js';
+export var getButtonIconSizes = function (theme) {
+    return {
+        small: parseInt(theme.btnIconSizeSmall),
+        medium: parseInt(theme.btnIconSizeMedium),
+        large: parseInt(theme.btnIconSizeLarge),
+    };
+};
+var useIcon = function (icon, size) {
+    var _a;
+    var theme = useContext(ThemeContext);
+    if (icon && isKonturIcon(icon)) {
+        var sizes = getButtonIconSizes(theme);
+        return React.cloneElement(icon, { size: (_a = icon.props.size) !== null && _a !== void 0 ? _a : sizes[size] });
+    }
+    return icon;
+};
+export var ButtonIcon = function (_a) {
+    var _b;
+    var icon = _a.icon, use = _a.use, position = _a.position, hasChildren = _a.hasChildren, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.hasBothIcons, hasBothIcons = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 'small' : _e;
+    var theme = useContext(ThemeContext);
+    var isLink = use === 'link';
+    var getSizeIconClassName = function () {
+        switch (size) {
+            case 'large':
+                return [
+                    styles.iconLarge(theme),
+                    position === 'left' ? styles.iconLargeLeft(theme) : styles.iconLargeRight(theme),
+                ];
+            case 'medium':
+                return [
+                    styles.iconMedium(theme),
+                    position === 'left' ? styles.iconMediumLeft(theme) : styles.iconMediumRight(theme),
+                ];
+            case 'small':
+            default:
+                return [
+                    styles.iconSmall(theme),
+                    position === 'left' ? styles.iconSmallLeft(theme) : styles.iconSmallRight(theme),
+                ];
+        }
+    };
+    var style = {
+        display: 'inline-flex',
+        alignItems: 'center',
+    };
+    var _icon = useIcon(icon, size);
+    return (React.createElement("span", { style: style, className: cx(styles.icon(), getSizeIconClassName(), (_b = {},
+            _b[styles.iconNoMargin()] = !hasChildren,
+            _b[styles.iconLeftLink(theme)] = isLink && position === 'left',
+            _b[styles.iconRightLink(theme)] = isLink && position === 'right',
+            _b)) }, loading && !hasBothIcons ? React.createElement(LoadingButtonIcon, { isCentered: false, size: size }) : _icon));
+};
+//# sourceMappingURL=ButtonIcon.js.map

package/components/Button/ButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.js","sourceRoot":"","sources":["../../../components/Button/ButtonIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\n\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { isKonturIcon } from '../../lib/utils.js';\nimport { cx } from '../../lib/theming/Emotion.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\n\nimport type { ButtonInnerProps } from './Button.js';\nimport { styles } from './ButtonIcon.styles.js';\nimport { LoadingButtonIcon } from './LoadingButtonIcon.js';\n\nexport interface ButtonIconProps extends Pick<ButtonInnerProps, 'size' | 'icon' | 'loading' | 'use'> {\n  position: 'right' | 'left';\n  hasChildren: boolean;\n  hasBothIcons?: boolean;\n}\n\nexport const getButtonIconSizes = (theme: Theme): Record<SizeProp, number> => {\n  return {\n    small: parseInt(theme.btnIconSizeSmall),\n    medium: parseInt(theme.btnIconSizeMedium),\n    large: parseInt(theme.btnIconSizeLarge),\n  };\n};\n\nconst useIcon = (icon: any, size: SizeProp) => {\n  const theme = useContext(ThemeContext);\n  if (icon && isKonturIcon(icon)) {\n    const sizes = getButtonIconSizes(theme);\n    return React.cloneElement(icon, { size: icon.props.size ?? sizes[size] });\n  }\n\n  return icon;\n};\n\nexport const ButtonIcon: React.FunctionComponent<ButtonIconProps> = ({\n  icon,\n  use,\n  position,\n  hasChildren,\n  loading = false,\n  hasBothIcons = false,\n  size = 'small',\n}) => {\n  const theme = useContext(ThemeContext);\n  const isLink = use === 'link';\n\n  const getSizeIconClassName = () => {\n    switch (size) {\n      case 'large':\n        return [\n          styles.iconLarge(theme),\n          position === 'left' ? styles.iconLargeLeft(theme) : styles.iconLargeRight(theme),\n        ];\n      case 'medium':\n        return [\n          styles.iconMedium(theme),\n          position === 'left' ? styles.iconMediumLeft(theme) : styles.iconMediumRight(theme),\n        ];\n      case 'small':\n      default:\n        return [\n          styles.iconSmall(theme),\n          position === 'left' ? styles.iconSmallLeft(theme) : styles.iconSmallRight(theme),\n        ];\n    }\n  };\n\n  const style: React.CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n  };\n\n  const _icon = useIcon(icon, size);\n\n  return (\n    <span\n      style={style}\n      className={cx(styles.icon(), getSizeIconClassName(), {\n        [styles.iconNoMargin()]: !hasChildren,\n        [styles.iconLeftLink(theme)]: isLink && position === 'left',\n        [styles.iconRightLink(theme)]: isLink && position === 'right',\n      })}\n    >\n      {loading && !hasBothIcons ? <LoadingButtonIcon isCentered={false} size={size} /> : _icon}\n    </span>\n  );\n};\n"]}

package/components/Button/ButtonIcon.styles.d.ts

@@ -1,16 +1,16 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
-    icon(): string;
-    iconSmall(t: Theme): string;
-    iconSmallLeft(t: Theme): string;
-    iconSmallRight(t: Theme): string;
-    iconMedium(t: Theme): string;
-    iconMediumLeft(t: Theme): string;
-    iconMediumRight(t: Theme): string;
-    iconLarge(t: Theme): string;
-    iconLargeLeft(t: Theme): string;
-    iconLargeRight(t: Theme): string;
-    iconLeftLink(t: Theme): string;
-    iconRightLink(t: Theme): string;
-    iconNoMargin(): string;
-};
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const styles: {
+    icon(): string;
+    iconSmall(t: Theme): string;
+    iconSmallLeft(t: Theme): string;
+    iconSmallRight(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconMediumLeft(t: Theme): string;
+    iconMediumRight(t: Theme): string;
+    iconLarge(t: Theme): string;
+    iconLargeLeft(t: Theme): string;
+    iconLargeRight(t: Theme): string;
+    iconLeftLink(t: Theme): string;
+    iconRightLink(t: Theme): string;
+    iconNoMargin(): string;
+};

package/components/Button/ButtonIcon.styles.js

@@ -0,0 +1,50 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { ZERO_WIDTH_SPACE_CSS } from '../../lib/chars.js';
+import { css, memoizeStyle } from '../../lib/theming/Emotion.js';
+export var styles = memoizeStyle({
+    icon: function () {
+        var space = "'".concat(ZERO_WIDTH_SPACE_CSS, "'");
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-block;\n\n      &::before {\n        content: ", ";\n      }\n    "], ["\n      display: inline-block;\n\n      &::before {\n        content: ", ";\n      }\n    "])), space);
+    },
+    iconSmall: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.btnIconSizeSmall);
+    },
+    iconSmallLeft: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      margin-right: ", ";\n    "], ["\n      margin-right: ", ";\n    "])), t.btnIconGapSmallLeft);
+    },
+    iconSmallRight: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.btnIconGapSmallRight);
+    },
+    iconMedium: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.btnIconSizeMedium);
+    },
+    iconMediumLeft: function (t) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin-right: ", ";\n    "], ["\n      margin-right: ", ";\n    "])), t.btnIconGapMediumRight);
+    },
+    iconMediumRight: function (t) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.btnIconGapMediumRight);
+    },
+    iconLarge: function (t) {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.btnIconSizeLarge);
+    },
+    iconLargeLeft: function (t) {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-right: ", ";\n    "], ["\n      margin-right: ", ";\n    "])), t.btnIconGapLargeLeft);
+    },
+    iconLargeRight: function (t) {
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.btnIconGapLargeRight);
+    },
+    iconLeftLink: function (t) {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      margin-right: ", ";\n    "], ["\n      margin-right: ", ";\n    "])), t.btnLinkIconMarginRight);
+    },
+    iconRightLink: function (t) {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.btnLinkIconMarginLeft);
+    },
+    iconNoMargin: function () {
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      margin-right: 0;\n      margin-left: 0;\n    "], ["\n      margin-right: 0;\n      margin-left: 0;\n    "])));
+    },
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+//# sourceMappingURL=ButtonIcon.styles.js.map