@skbkontur/react-ui 0.0.0-4cd450ed1e → 0.0.0-4da47ece08

package/components/Button/ArrowRightIcon/ArrowRightIcon.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { ArrowARightIcon16Light } from "../../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light";
+import { ArrowARightIcon20Light } from "../../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light";
+import { ArrowARightIcon24Regular } from "../../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular";
+import { iconSizer } from "../../../internal/icons2022/iconSizer";
+export var ArrowRightIcon = iconSizer({
+  small: function small() {
+    return /*#__PURE__*/React.createElement(ArrowARightIcon16Light, null);
+  },
+  medium: function medium() {
+    return /*#__PURE__*/React.createElement(ArrowARightIcon20Light, null);
+  },
+  large: function large() {
+    return /*#__PURE__*/React.createElement(ArrowARightIcon24Regular, null);
+  }
+}, 'ArrowRightIcon');

package/components/Button/ArrowRightIcon/ArrowRightIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ArrowRightIcon.tsx"],"names":["React","ArrowARightIcon16Light","ArrowARightIcon20Light","ArrowARightIcon24Regular","iconSizer","ArrowRightIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,sBAAT,QAAuC,iEAAvC;AACA,SAASC,sBAAT,QAAuC,iEAAvC;AACA,SAASC,wBAAT,QAAyC,mEAAzC;AACA,SAASC,SAAT,QAA0B,oCAA1B;;AAEA,OAAO,IAAMC,cAAc,GAAGD,SAAS;AACrC;AACEE,EAAAA,KAAK,EAAE,sCAAM,oBAAC,sBAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,sBAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,wBAAD,OAAN,EAHT,EADqC;;AAMrC,gBANqC,CAAhC","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowARightIcon16Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light';\nimport { ArrowARightIcon20Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light';\nimport { ArrowARightIcon24Regular } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ArrowRightIcon = iconSizer(\n  {\n    small: () => <ArrowARightIcon16Light />,\n    medium: () => <ArrowARightIcon20Light />,\n    large: () => <ArrowARightIcon24Regular />,\n  },\n  'ArrowRightIcon',\n);\n"]}

package/components/Button/ArrowRightIcon/package.json

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

package/components/Button/ArrowRightIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const ArrowRightIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/components/Button/Button/Button.js

@@ -1,15 +1,60 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["onClick", "onFocus", "onBlur", "children"],
+    _excluded2 = ["corners", "active", "disabled", "borderless", "checked", "error", "warning", "loading", "narrow", "icon", "rightIcon", "_noPadding", "_noRightPadding", "visuallyFocused", "align", "disableFocus", "onMouseEnter", "onMouseLeave", "onMouseOver", "onMouseDown", "onMouseUp", "onKeyDown", "onClick", "onClickCapture", "width", "children", "tabIndex", "component", "className", "data-tid", "use", "size", "aria-describedby", "aria-haspopup", "aria-controls", "aria-label", "aria-checked", "aria-expanded", "role"];
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import cn from 'classnames';
-import { isIE11, isEdge } from "../../../lib/client";
-import { tabListener } from "../../../lib/events/tabListener";
+import { globalObject } from '@skbkontur/global-object';
+import warning from 'warning';
+import { isKonturIcon, isReactUIComponent } from "../../../lib/utils";
+import { isIE11, isEdge, isSafari } from "../../../lib/client";
+import { keyListener } from "../../../lib/events/keyListener";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { Spinner } from "../../Spinner";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../Button.styles";
-import { Corners } from "../Corners";
-export var Button = /*#__PURE__*/function (_React$Component) {
+import { cx } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { Link } from "../../Link";
+import { styles, activeStyles, globalClasses } from "../Button.styles";
+import { ButtonIcon, getButtonIconSizes } from "../ButtonIcon";
+import { useButtonArrow } from "../ButtonArrow";
+import { getInnerLinkTheme } from "../getInnerLinkTheme";
+import { LoadingButtonIcon } from "../LoadingButtonIcon";
+/**
+ * @deprecated use SizeProp
+ */
+
+export var BUTTON_DEFAULT_ELEMENT = 'button';
+export var ButtonDataTids = {
+  rootElement: 'Button__rootElement',
+  root: 'Button__root',
+  spinner: 'Button__spinner'
+};
+
+var ButtonLink = function ButtonLink(_ref) {
+  var focused = _ref.focused,
+      disabled = _ref.disabled,
+      icon = _ref.icon,
+      rightIcon = _ref.rightIcon,
+      as = _ref.as,
+      tabIndex = _ref.tabIndex,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(Link, {
+    focused: focused,
+    disabled: disabled,
+    icon: icon,
+    rightIcon: rightIcon,
+    as: as,
+    tabIndex: tabIndex
+  }, children);
+};
+
+export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Button, _React$Component);
 
   function Button() {
@@ -20,18 +65,18 @@ export var Button = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Button.defaultProps);
     _this.state = {
       focusedByTab: false
     };
-    _this.theme = void 0;
     _this.node = null;
 
     _this.handleFocus = function (e) {
       if (!_this.props.disabled && !_this.props.disableFocus) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        process.nextTick(function () {
-          if (tabListener.isTabPressed) {
+        globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
+          if (keyListener.isTabPressed) {
             _this.setState({
               focusedByTab: true
             });
@@ -62,12 +107,24 @@ export var Button = /*#__PURE__*/function (_React$Component) {
 
   _proto.componentDidMount = function componentDidMount() {
     if (this.props.autoFocus) {
-      tabListener.isTabPressed = true;
+      keyListener.isTabPressed = true;
       this.focus();
     }
+
+    warning(this.props.use !== 'link', "[Button]: Use 'Link' has been deprecated. Please, use Link with 'component=button' prop instead.");
+  };
+
+  Button.getDerivedStateFromProps = function getDerivedStateFromProps(props) {
+    if (props.loading || props.disabled) {
+      return {
+        focusedByTab: false
+      };
+    }
+
+    return null;
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -76,8 +133,8 @@ export var Button = /*#__PURE__*/function (_React$Component) {
 
     (_this$node = this.node) == null ? void 0 : _this$node.focus();
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -91,161 +148,278 @@ export var Button = /*#__PURE__*/function (_React$Component) {
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
+      _this2.theme = _this2.props.theme ? ThemeFactory.create(_this2.props.theme, theme) : theme;
       return _this2.renderMain();
     });
   };
 
+  _proto.renderLinkRootWithoutHandlers = function renderLinkRootWithoutHandlers(props) {
+    var onClick = props.onClick,
+        onFocus = props.onFocus,
+        onBlur = props.onBlur,
+        children = props.children,
+        rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+    return /*#__PURE__*/React.createElement("span", rest, children);
+  };
+
+  _proto.getTabIndex = function getTabIndex(_ref2) {
+    var disableFocus = _ref2.disableFocus,
+        disabled = _ref2.disabled,
+        _ref2$tabIndex = _ref2.tabIndex,
+        tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex;
+
+    if (disableFocus || disabled) {
+      return -1;
+    }
+
+    return tabIndex;
+  };
+
   _proto.renderMain = function renderMain() {
-    var _cn, _cn2, _cn7;
+    var _cx2, _cx5, _cx6;
+
+    var _this$props = this.props,
+        corners = _this$props.corners,
+        active = _this$props.active,
+        disabled = _this$props.disabled,
+        borderless = _this$props.borderless,
+        checked = _this$props.checked,
+        error = _this$props.error,
+        warning = _this$props.warning,
+        loading = _this$props.loading,
+        narrow = _this$props.narrow,
+        icon = _this$props.icon,
+        rightIcon = _this$props.rightIcon,
+        _noPadding = _this$props._noPadding,
+        _noRightPadding = _this$props._noRightPadding,
+        visuallyFocused = _this$props.visuallyFocused,
+        align = _this$props.align,
+        disableFocus = _this$props.disableFocus,
+        onMouseEnter = _this$props.onMouseEnter,
+        onMouseLeave = _this$props.onMouseLeave,
+        onMouseOver = _this$props.onMouseOver,
+        onMouseDown = _this$props.onMouseDown,
+        onMouseUp = _this$props.onMouseUp,
+        onKeyDown = _this$props.onKeyDown,
+        onClick = _this$props.onClick,
+        onClickCapture = _this$props.onClickCapture,
+        width = _this$props.width,
+        children = _this$props.children,
+        tabIndex = _this$props.tabIndex,
+        _this$props$component = _this$props.component,
+        component = _this$props$component === void 0 ? BUTTON_DEFAULT_ELEMENT : _this$props$component,
+        className = _this$props.className,
+        dataTid = _this$props['data-tid'],
+        useProp = _this$props.use,
+        sizeProp = _this$props.size,
+        ariaDescribedby = _this$props['aria-describedby'],
+        ariaHasPopup = _this$props['aria-haspopup'],
+        ariaControls = _this$props['aria-controls'],
+        ariaLabel = _this$props['aria-label'],
+        ariaChecked = _this$props['aria-checked'],
+        ariaExpanded = _this$props['aria-expanded'],
+        role = _this$props.role,
+        rest = _objectWithoutPropertiesLoose(_this$props, _excluded2);
+
+    var _this$getProps = this.getProps(),
+        use = _this$getProps.use,
+        size = _this$getProps.size;
 
-    var _this$props$corners = this.props.corners,
-        corners = _this$props$corners === void 0 ? 0 : _this$props$corners;
     var sizeClass = this.getSizeClassName();
-    var isError = !!this.props.error;
-    var isWarning = !!this.props.warning;
-    var rootProps = {
-      // By default the type attribute is 'submit'. IE8 will fire a click event
-      // on this button if somewhere on the page user presses Enter while some
-      // input is focused. So we set type to 'button' by default.
-      type: this.props.type,
-      className: cn((_cn = {}, _cn[jsStyles.root(this.theme)] = true, _cn[jsStyles[this.props.use] && jsStyles[this.props.use](this.theme) || jsStyles["default"](this.theme)] = true, _cn[jsStyles.active(this.theme)] = !!this.props.active, _cn[jsStyles.validationRoot(this.theme)] = isError || isWarning, _cn[jsStyles.narrow()] = !!this.props.narrow, _cn[jsStyles.noPadding()] = !!this.props._noPadding, _cn[jsStyles.noRightPadding()] = !!this.props._noRightPadding, _cn[sizeClass] = true, _cn[jsStyles.borderless(this.theme)] = !!this.props.borderless, _cn[jsStyles.focus(this.theme)] = this.state.focusedByTab || !!this.props.visuallyFocused, _cn[jsStyles.checked(this.theme)] = !!this.props.checked, _cn[jsStyles.disabled(this.theme)] = !!this.props.disabled || !!this.props.loading, _cn[jsStyles.fallback(this.theme)] = isIE11 || isEdge, _cn)),
-      style: {
-        borderTopLeftRadius: corners & Corners.TOP_LEFT ? 0 : undefined,
-        borderTopRightRadius: corners & Corners.TOP_RIGHT ? 0 : undefined,
-        borderBottomRightRadius: corners & Corners.BOTTOM_RIGHT ? 0 : undefined,
-        borderBottomLeftRadius: corners & Corners.BOTTOM_LEFT ? 0 : undefined,
-        textAlign: this.props.align
-      },
-      disabled: this.props.disabled || this.props.loading,
-      onClick: this.props.onClick,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onKeyDown: this.props.onKeyDown,
-      onMouseEnter: this.props.onMouseEnter,
-      onMouseLeave: this.props.onMouseLeave,
-      onMouseOver: this.props.onMouseOver,
-      tabIndex: this.props.disableFocus ? -1 : 0
-    };
-    var wrapProps = {
-      className: cn((_cn2 = {}, _cn2[jsStyles.wrap(this.theme)] = true, _cn2[jsStyles.wrapArrow()] = this.props.arrow === true, _cn2[jsStyles.wrapArrowLeft()] = this.props.arrow === 'left', _cn2)),
-      style: {
-        width: this.props.width
-      }
-    };
-    var error = null;
+    var Root = component;
+    var isFocused = this.state.focusedByTab || visuallyFocused;
+    var isLink = use === 'link';
 
-    if (this.props.error) {
-      error = /*#__PURE__*/React.createElement("div", {
-        className: jsStyles.error(this.theme)
-      });
-    } else if (this.props.warning) {
-      error = /*#__PURE__*/React.createElement("div", {
-        className: jsStyles.warning(this.theme)
-      });
-    }
+    var _isTheme2022 = isTheme2022(this.theme); // eslint-disable-next-line react-hooks/rules-of-hooks
 
-    var loading = null;
 
-    if (this.props.loading && !this.props.icon) {
-      loading = /*#__PURE__*/React.createElement("div", {
-        className: jsStyles.loading()
-      }, this.getLoadingSpinner());
-    }
+    var _useButtonArrow = useButtonArrow(_extends({}, this.props, {
+      isFocused: Boolean(isFocused)
+    }), this.theme),
+        wrapClassNameWithArrow = _useButtonArrow[0],
+        rootClassNameWithArrow = _useButtonArrow[1],
+        arrowNode = _useButtonArrow[2];
 
-    var icon = this.props.icon;
+    var isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use);
+    var rootClassName = '';
+    var trueDisabled = disabled || loading;
 
-    if (this.props.icon) {
-      var _cn3;
+    if (_isTheme2022) {
+      rootClassName = cx.apply(void 0, [styles.root(this.theme), styles[use](this.theme), sizeClass, styles.disableTextSelect(), narrow && styles.narrow(), _noPadding && styles.noPadding(), _noRightPadding && styles.noRightPadding(), rootClassNameWithArrow, globalClasses.customComponent].concat(trueDisabled ? [styles.disabled(this.theme), isUseStateWithoutOutlineInDisabledState && styles.disabledWithoutOutline(this.theme), checked && styles.checkedDisabled(this.theme), checked && styles.checkedDisabled2022(this.theme), borderless && styles.borderless2022(), use === 'backless' && !checked && styles.backlessDisabled2022(this.theme), use === 'text' && styles.textDisabled2022(), globalClasses.disabled] : [active && !checked && activeStyles[use](this.theme), isFocused && styles.focus(this.theme), checked && styles.checked2022(this.theme), checked && isFocused && styles.checkedFocused(this.theme), borderless && !checked && !isFocused && styles.borderless2022()]));
+    } else {
+      var _cx;
 
-      icon = /*#__PURE__*/React.createElement("span", {
-        className: cn(jsStyles.icon(), this.getSizeIconClassName(), (_cn3 = {}, _cn3[jsStyles.iconNoRightPadding()] = !this.props.children, _cn3[jsStyles.iconLink(this.theme)] = this.props.use === 'link', _cn3))
-      }, this.props.loading ? this.getLoadingSpinner() : this.props.icon);
+      rootClassName = cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.simulatedPress()] = true, _cx[styles[use](this.theme)] = true, _cx[styles.disableTextSelect()] = true, _cx[activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[globalClasses.customComponent] = true, _cx[styles.focus(this.theme)] = isFocused, _cx[styles.checked(this.theme)] = checked, _cx[styles.checkedFocused(this.theme)] = checked && isFocused, _cx[styles.disabled(this.theme)] = trueDisabled, _cx[globalClasses.disabled] = trueDisabled, _cx[styles.checkedDisabled(this.theme)] = checked && disabled, _cx[styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[styles.narrow()] = narrow, _cx[styles.noPadding()] = _noPadding, _cx[styles.noRightPadding()] = _noRightPadding, _cx));
     }
 
-    var arrow = null;
+    var rootProps = {
+      role: role,
+      'aria-describedby': ariaDescribedby,
+      'aria-haspopup': ariaHasPopup,
+      'aria-controls': ariaControls,
+      'aria-label': ariaLabel,
+      'aria-checked': ariaChecked,
+      'aria-expanded': ariaExpanded,
+      className: rootClassName,
+      style: _extends({
+        textAlign: align
+      }, corners),
+      disabled: trueDisabled,
+      onClick: onClick,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onKeyDown: onKeyDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onMouseOver: onMouseOver,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onClickCapture: onClickCapture,
+      tabIndex: this.getTabIndex({
+        disableFocus: disableFocus,
+        disabled: trueDisabled,
+        tabIndex: tabIndex
+      }),
+      title: this.props.title
+    };
+    var wrapProps = {
+      className: cx(globalClasses.root, (_cx2 = {}, _cx2[styles.wrap(this.theme)] = true, _cx2[wrapClassNameWithArrow] = true, _cx2[this.getSizeWrapClassName()] = true, _cx2)),
+      style: {
+        width: width
+      }
+    };
+    var innerShadowNode = _isTheme2022 ? null : /*#__PURE__*/React.createElement("div", {
+      className: globalClasses.innerShadow
+    });
+    var outlineNode = null;
+    var isDisabled2022 = _isTheme2022 && trueDisabled;
 
-    if (this.props.arrow) {
-      var _cn4;
+    if ((!isFocused || isLink) && !isDisabled2022) {
+      var _cx3;
 
-      arrow = /*#__PURE__*/React.createElement("div", {
-        className: cn((_cn4 = {}, _cn4[jsStyles.arrow()] = true, _cn4[jsStyles.arrowWarning(this.theme)] = isWarning, _cn4[jsStyles.arrowError(this.theme)] = isError, _cn4[jsStyles.arrowFocus(this.theme)] = this.state.focusedByTab || !!this.props.visuallyFocused, _cn4[jsStyles.arrowLeft()] = this.props.arrow === 'left', _cn4))
+      outlineNode = /*#__PURE__*/React.createElement("div", {
+        style: {
+          zIndex: _isTheme2022 && isLink ? -1 : undefined
+        },
+        className: cx(styles.outline(), (_cx3 = {}, _cx3[styles.outlineWarning(this.theme)] = warning, _cx3[styles.outlineError(this.theme)] = error, _cx3[styles.outlineLink()] = isLink, _cx3[styles.outlineLinkWarning(this.theme)] = isLink && warning, _cx3[styles.outlineLinkError(this.theme)] = isLink && error, _cx3))
       });
-    } // Force disable all props and features, that cannot be use with Link
-
-
-    if (this.props.use === 'link') {
-      var _cn5, _cn6;
+    }
 
-      rootProps.className = cn((_cn5 = {}, _cn5[jsStyles.root(this.theme)] = true, _cn5[sizeClass] = true, _cn5[jsStyles.focus(this.theme)] = this.state.focusedByTab || !!this.props.visuallyFocused, _cn5[jsStyles.link(this.theme)] = true, _cn5[jsStyles.disabled(this.theme)] = !!this.props.disabled || !!this.props.loading, _cn5));
+    var iconProps = {
+      use: use,
+      size: this.getProps().size,
+      hasChildren: !!children,
+      loading: loading || false
+    };
+    var leftIconNode = icon && /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, iconProps, {
+      position: "left",
+      icon: icon
+    }));
+    var rightIconNode = rightIcon && /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, iconProps, {
+      hasBothIcons: !!icon && !!rightIcon,
+      position: "right",
+      icon: rightIcon
+    })); // Force disable all props and features, that cannot be use with Link
+
+    if (isLink) {
+      var _cx4;
+
+      rootProps.className = cx((_cx4 = {}, _cx4[styles.root(this.theme)] = true, _cx4[sizeClass] = true, _cx4[styles.link(this.theme)] = true, _cx4[styles.linkLineHeight()] = !isSafari || isSafari && !_isTheme2022, _cx4[styles.linkLineHeightSafariFallback()] = isSafari && _isTheme2022, _cx4[styles.linkFocus(this.theme)] = isFocused, _cx4[styles.linkDisabled(this.theme)] = trueDisabled, _cx4));
       Object.assign(wrapProps, {
-        className: cn(jsStyles.wrap(this.theme), (_cn6 = {}, _cn6[jsStyles.wrapLink(this.theme)] = this.props.use === 'link', _cn6)),
+        className: cx(styles.wrap(this.theme), styles.wrapLink()),
         style: {
           width: wrapProps.style.width
         }
       });
       rootProps.style.textAlign = undefined;
-      arrow = null;
     }
 
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("span", wrapProps, /*#__PURE__*/React.createElement("button", _extends({
+    var hasLoadingNode = loading && !icon && !rightIcon;
+    var loadingNode = hasLoadingNode && /*#__PURE__*/React.createElement(LoadingButtonIcon, {
+      size: size
+    });
+    var captionNode = /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.caption(), globalClasses.caption, (_cx5 = {}, _cx5[styles.captionTranslated()] = (active || checked) && !loading && !_isTheme2022, _cx5[styles.captionLink()] = isLink, _cx5[styles.captionDisabled()] = !checked && disabled, _cx5))
+    }, loadingNode, leftIconNode, /*#__PURE__*/React.createElement("span", {
+      className: cx(globalClasses.text, (_cx6 = {}, _cx6[styles.visibilityHidden()] = hasLoadingNode, _cx6))
+    }, children), rightIconNode);
+
+    if (_isTheme2022 && isLink && !loading) {
+      captionNode = /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: getInnerLinkTheme(this.theme)
+      }, /*#__PURE__*/React.createElement(ButtonLink, {
+        focused: isFocused,
+        disabled: disabled,
+        icon: this.renderIcon2022(icon),
+        rightIcon: this.renderIcon2022(rightIcon),
+        as: this.renderLinkRootWithoutHandlers,
+        tabIndex: -1
+      }, children));
+    }
+
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("span", _extends({}, wrapProps, {
+      "data-tid": ButtonDataTids.rootElement
+    }), /*#__PURE__*/React.createElement(Root, _extends({
+      "data-tid": ButtonDataTids.root,
       ref: this._ref
-    }, rootProps), error, loading, arrow, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.caption()
-    }, icon, /*#__PURE__*/React.createElement("span", {
-      className: cn((_cn7 = {}, _cn7[jsStyles.visibilityHidden()] = loading, _cn7))
-    }, this.props.children)))));
+    }, rootProps, rest), innerShadowNode, outlineNode, arrowNode, captionNode)));
   };
 
-  _proto.getLoadingSpinner = function getLoadingSpinner() {
-    return /*#__PURE__*/React.createElement(Spinner, {
-      caption: null,
-      dimmed: true,
-      type: "mini"
-    });
+  _proto.renderIcon2022 = function renderIcon2022(icon) {
+    if (icon && isKonturIcon(icon)) {
+      var _icon$props$size;
+
+      var sizes = getButtonIconSizes(this.theme);
+      return /*#__PURE__*/React.cloneElement(icon, {
+        size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[this.getProps().size]
+      });
+    }
+
+    return icon;
   };
 
   _proto.getSizeClassName = function getSizeClassName() {
-    switch (this.props.size) {
+    var _cx7, _cx8, _cx9;
+
+    var _isTheme2022 = isTheme2022(this.theme);
+
+    switch (this.getProps().size) {
       case 'large':
-        return cn(jsStyles.sizeLarge(this.theme));
+        return cx(styles.sizeLarge(this.theme), (_cx7 = {}, _cx7[styles.sizeLargeIE11(this.theme)] = isIE11 || isEdge, _cx7[styles.sizeLargeWithIcon(this.theme)] = !!this.props.icon, _cx7[styles.sizeLargeWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx7));
 
       case 'medium':
-        return cn(jsStyles.sizeMedium(this.theme));
+        return cx(styles.sizeMedium(this.theme), (_cx8 = {}, _cx8[styles.sizeMediumIE11(this.theme)] = isIE11 || isEdge, _cx8[styles.sizeMediumWithIcon(this.theme)] = !!this.props.icon, _cx8[styles.sizeMediumWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx8));
 
       case 'small':
       default:
-        return cn(jsStyles.sizeSmall(this.theme));
+        return cx(styles.sizeSmall(this.theme), (_cx9 = {}, _cx9[styles.sizeSmallIE11(this.theme)] = isIE11 || isEdge, _cx9[styles.sizeSmallWithIcon(this.theme)] = !!this.props.icon, _cx9[styles.sizeSmallWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx9));
     }
   };
 
-  _proto.getSizeIconClassName = function getSizeIconClassName() {
-    switch (this.props.size) {
+  _proto.getSizeWrapClassName = function getSizeWrapClassName() {
+    switch (this.getProps().size) {
       case 'large':
-        return jsStyles.iconLarge(this.theme);
+        return styles.wrapLarge(this.theme);
 
       case 'medium':
-        return jsStyles.iconMedium(this.theme);
+        return styles.wrapMedium(this.theme);
 
       case 'small':
       default:
-        return jsStyles.iconSmall(this.theme);
+        return styles.wrapSmall(this.theme);
     }
   };
 
   return Button;
-}(React.Component);
-Button.__KONTUR_REACT_UI__ = 'Button';
-Button.__BUTTON__ = true;
-Button.TOP_LEFT = Corners.TOP_LEFT;
-Button.TOP_RIGHT = Corners.TOP_RIGHT;
-Button.BOTTOM_RIGHT = Corners.BOTTOM_RIGHT;
-Button.BOTTOM_LEFT = Corners.BOTTOM_LEFT;
-Button.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.displayName = 'Button', _class2.__BUTTON__ = true, _class2.defaultProps = {
   use: 'default',
   size: 'small',
+  // By default the type attribute is 'submit'. IE8 will fire a click event
+  // on this button if somewhere on the page user presses Enter while some
+  // input is focused. So we set type to 'button' by default.
   type: 'button'
-};
-export var isButton = function isButton(child) {
-  return /*#__PURE__*/React.isValidElement(child) ? Object.prototype.hasOwnProperty.call(child.type, '__BUTTON__') : false;
-};
+}, _temp)) || _class;
+export var isButton = isReactUIComponent('Button');