@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/components/Autocomplete/locale/locales/ru/ru.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","enterValue","notFound","updateValue"],"mappings":";;AAEA,OAAO,IAAMA,iBAAqC,GAAG;AACnDC,EAAAA,UAAU,EAAE,0BADuC;AAEnDC,EAAAA,QAAQ,EAAE,mBAFyC;AAGnDC,EAAAA,WAAW,EAAE,uCAHsC,EAA9C","sourcesContent":["import { AutocompleteLocale } from '../types';\n\nexport const componentsLocales: AutocompleteLocale = {\n  enterValue: 'Начните вводить значение',\n  notFound: 'Ничего не найдено',\n  updateValue: 'Начните вводить или изменять значение',\n};\n"]}

package/components/Autocomplete/locale/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import { AutocompleteLocale } from '../types';
+export declare const componentsLocales: AutocompleteLocale;

package/components/Autocomplete/locale/package.json

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

package/components/Autocomplete/locale/types/package.json

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

package/components/Autocomplete/locale/types/types.js

@@ -0,0 +1 @@
+export {};

package/components/Autocomplete/locale/types/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/components/Autocomplete/locale/types.d.ts

@@ -0,0 +1,5 @@
+export interface AutocompleteLocale {
+    enterValue: string;
+    notFound: string;
+    updateValue: string;
+}

package/components/Button/ArrowLeftIcon/ArrowLeftIcon.js

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

package/components/Button/ArrowLeftIcon/ArrowLeftIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ArrowLeftIcon.tsx"],"names":["React","ArrowALeftIcon16Light","ArrowALeftIcon20Light","ArrowALeftIcon24Regular","iconSizer","ArrowLeftIcon","small","medium","large"],"mappings":"AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,qBAAT,QAAsC,+DAAtC;AACA,SAASC,qBAAT,QAAsC,+DAAtC;AACA,SAASC,uBAAT,QAAwC,iEAAxC;AACA,SAASC,SAAT,QAA0B,oCAA1B;;AAEA,OAAO,IAAMC,aAAa,GAAGD,SAAS;AACpC;AACEE,EAAAA,KAAK,EAAE,sCAAM,oBAAC,qBAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,oBAAC,qBAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,oBAAC,uBAAD,OAAN,EAHT,EADoC;;AAMpC,eANoC,CAA/B","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowALeftIcon16Light } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon16Light';\nimport { ArrowALeftIcon20Light } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon20Light';\nimport { ArrowALeftIcon24Regular } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ArrowLeftIcon = iconSizer(\n  {\n    small: () => <ArrowALeftIcon16Light />,\n    medium: () => <ArrowALeftIcon20Light />,\n    large: () => <ArrowALeftIcon24Regular />,\n  },\n  'ArrowLeftIcon',\n);\n"]}

package/components/Button/ArrowLeftIcon/package.json

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

package/components/Button/ArrowLeftIcon.d.ts

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

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,20 +1,36 @@
 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"];
 
 var _class, _class2, _temp;
 
 import React from 'react';
-import { isReactUIComponent } from "../../../lib/utils";
-import { isIE11, isEdge } from "../../../lib/client";
+import { globalObject } from '@skbkontur/global-object';
+import { isKonturIcon, isReactUIComponent } from "../../../lib/utils";
+import { isEdge, isIE11, isSafari } from "../../../lib/client";
 import { keyListener } from "../../../lib/events/keyListener";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { Spinner } from "../../Spinner";
+import { ThemeConsumer, ThemeProvider } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
-import { styles, activeStyles, globalClasses } from "../Button.styles";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { Link } from "../../Link";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { getActiveStyles, getStyles, 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 ButtonDataTids = {
-  root: 'Button__root'
+  rootElement: 'Button__rootElement',
+  root: 'Button__root',
+  spinner: 'Button__spinner'
 };
 export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Button, _React$Component);
@@ -27,6 +43,7 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Button.defaultProps);
     _this.state = {
       focusedByTab: false
     };
@@ -36,7 +53,7 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
       if (!_this.props.disabled && !_this.props.disableFocus) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        requestAnimationFrame(function () {
+        globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
           if (keyListener.isTabPressed) {
             _this.setState({
               focusedByTab: true
@@ -106,14 +123,27 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (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.renderMain = function renderMain() {
-    var _cx, _cx2, _cx7, _cx8;
+    var _this$emotion$cx2, _this$emotion$cx5, _this$emotion$cx6;
 
     var _this$props = this.props,
         corners = _this$props.corners,
@@ -124,9 +154,9 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
         error = _this$props.error,
         warning = _this$props.warning,
         loading = _this$props.loading,
-        arrow = _this$props.arrow,
         narrow = _this$props.narrow,
         icon = _this$props.icon,
+        rightIcon = _this$props.rightIcon,
         _noPadding = _this$props._noPadding,
         _noRightPadding = _this$props._noRightPadding,
         visuallyFocused = _this$props.visuallyFocused,
@@ -135,20 +165,69 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
         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;
-    var use = this.props.use || Button.defaultProps.use;
+        children = _this$props.children,
+        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;
+
+    var _this$getProps = this.getProps(),
+        use = _this$getProps.use,
+        type = _this$getProps.type,
+        size = _this$getProps.size;
+
     var sizeClass = this.getSizeClassName();
     var isFocused = this.state.focusedByTab || visuallyFocused;
     var isLink = use === 'link';
+
+    var _isTheme2022 = isTheme2022(this.theme); // eslint-disable-next-line react-hooks/rules-of-hooks
+
+
+    var _useButtonArrow = useButtonArrow(_extends({}, this.props, {
+      isFocused: Boolean(isFocused)
+    }), this.theme, this.emotion),
+        wrapClassNameWithArrow = _useButtonArrow[0],
+        rootClassNameWithArrow = _useButtonArrow[1],
+        arrowNode = _useButtonArrow[2];
+
+    var isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use);
+    var rootClassName = '';
+    var styles = getStyles(this.emotion);
+    var activeStyles = getActiveStyles(this.emotion);
+
+    if (_isTheme2022) {
+      var _this$emotion;
+
+      var trueDisabled = disabled || loading;
+      rootClassName = (_this$emotion = this.emotion).cx.apply(_this$emotion, [styles.root(this.theme), styles[use](this.theme), sizeClass, narrow && styles.narrow(), _noPadding && styles.noPadding(), _noRightPadding && styles.noRightPadding(), rootClassNameWithArrow].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()] : [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 _this$emotion$cx;
+
+      rootClassName = this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.root(this.theme)] = true, _this$emotion$cx[styles.simulatedPress()] = true, _this$emotion$cx[styles[use](this.theme)] = true, _this$emotion$cx[activeStyles[use](this.theme)] = active, _this$emotion$cx[sizeClass] = true, _this$emotion$cx[styles.focus(this.theme)] = isFocused, _this$emotion$cx[styles.checked(this.theme)] = checked, _this$emotion$cx[styles.checkedFocused(this.theme)] = checked && isFocused, _this$emotion$cx[styles.disabled(this.theme)] = disabled || loading, _this$emotion$cx[styles.checkedDisabled(this.theme)] = checked && disabled, _this$emotion$cx[styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _this$emotion$cx[styles.narrow()] = narrow, _this$emotion$cx[styles.noPadding()] = _noPadding, _this$emotion$cx[styles.noRightPadding()] = _noRightPadding, _this$emotion$cx));
+    }
+
     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: cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles[use](this.theme)] = true, _cx[activeStyles[use](this.theme)] = active, _cx[sizeClass] = 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)] = disabled || loading, _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)),
+      type: type,
+      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),
@@ -160,127 +239,134 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       onMouseOver: onMouseOver,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onClickCapture: onClickCapture,
       tabIndex: disableFocus ? -1 : 0,
       title: this.props.title
     };
     var wrapProps = {
-      className: cx((_cx2 = {}, _cx2[styles.wrap(this.theme)] = true, _cx2[styles.wrapArrow()] = arrow === true, _cx2[styles.wrapArrowLeft()] = arrow === 'left', _cx2[this.getSizeWrapClassName()] = true, _cx2)),
+      className: this.emotion.cx(globalClasses.root, (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.wrap(this.theme)] = true, _this$emotion$cx2[wrapClassNameWithArrow] = true, _this$emotion$cx2[this.getSizeWrapClassName()] = true, _this$emotion$cx2)),
       style: {
         width: width
       }
     };
-    var innerShadowNode = /*#__PURE__*/React.createElement("div", {
+    var innerShadowNode = _isTheme2022 ? null : /*#__PURE__*/React.createElement("div", {
       className: globalClasses.innerShadow
     });
     var outlineNode = null;
+    var isDisabled2022 = _isTheme2022 && (disabled || loading);
 
-    if (!isFocused || isLink) {
-      var _cx3;
+    if ((!isFocused || isLink) && !isDisabled2022) {
+      var _this$emotion$cx3;
 
       outlineNode = /*#__PURE__*/React.createElement("div", {
-        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))
+        style: {
+          zIndex: _isTheme2022 && isLink ? -1 : undefined
+        },
+        className: this.emotion.cx(styles.outline(), (_this$emotion$cx3 = {}, _this$emotion$cx3[styles.outlineWarning(this.theme)] = warning, _this$emotion$cx3[styles.outlineError(this.theme)] = error, _this$emotion$cx3[styles.outlineLink()] = isLink, _this$emotion$cx3[styles.outlineLinkWarning(this.theme)] = isLink && warning, _this$emotion$cx3[styles.outlineLinkError(this.theme)] = isLink && error, _this$emotion$cx3))
       });
     }
 
-    var loadingNode = null;
-
-    if (loading && !icon) {
-      loadingNode = /*#__PURE__*/React.createElement("div", {
-        className: styles.loading()
-      }, this.getLoadingSpinner());
-    }
-
-    var iconNode = null;
-
-    if (icon) {
-      var _cx4;
-
-      iconNode = /*#__PURE__*/React.createElement("span", {
-        className: cx(styles.icon(), this.getSizeIconClassName(), (_cx4 = {}, _cx4[styles.iconNoRightPadding()] = !children, _cx4[styles.iconLink(this.theme)] = isLink, _cx4))
-      }, loading ? this.getLoadingSpinner() : icon);
-    }
-
-    var arrowNode = null;
-
-    if (arrow) {
-      var _cx5;
-
-      arrowNode = /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx5 = {}, _cx5[styles.arrow()] = true, _cx5[styles.arrowWarning(this.theme)] = !checked && warning, _cx5[styles.arrowError(this.theme)] = !checked && error, _cx5[styles.arrowFocus(this.theme)] = !checked && isFocused, _cx5[styles.arrowLeft()] = arrow === 'left', _cx5))
-      }, /*#__PURE__*/React.createElement("div", {
-        className: cx(globalClasses.arrowHelper, globalClasses.arrowHelperTop)
-      }), /*#__PURE__*/React.createElement("div", {
-        className: cx(globalClasses.arrowHelper, globalClasses.arrowHelperBottom)
-      }));
-    } // Force disable all props and features, that cannot be use with Link
-
+    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 _cx6;
+      var _this$emotion$cx4;
 
-      rootProps.className = cx((_cx6 = {}, _cx6[styles.root(this.theme)] = true, _cx6[sizeClass] = true, _cx6[styles.link(this.theme)] = true, _cx6[styles.linkFocus(this.theme)] = isFocused, _cx6[styles.linkDisabled(this.theme)] = disabled || loading, _cx6));
+      rootProps.className = this.emotion.cx((_this$emotion$cx4 = {}, _this$emotion$cx4[styles.root(this.theme)] = true, _this$emotion$cx4[sizeClass] = true, _this$emotion$cx4[styles.link(this.theme)] = true, _this$emotion$cx4[styles.linkLineHeight()] = !isSafari || isSafari && !_isTheme2022, _this$emotion$cx4[styles.linkLineHeightSafariFallback()] = isSafari && _isTheme2022, _this$emotion$cx4[styles.linkFocus(this.theme)] = isFocused, _this$emotion$cx4[styles.linkDisabled(this.theme)] = disabled || loading, _this$emotion$cx4));
       Object.assign(wrapProps, {
-        className: cx(styles.wrap(this.theme), styles.wrapLink()),
+        className: this.emotion.cx(styles.wrap(this.theme), styles.wrapLink()),
         style: {
           width: wrapProps.style.width
         }
       });
       rootProps.style.textAlign = undefined;
-      arrowNode = null;
+    }
+
+    var hasLoadingNode = loading && !icon && !rightIcon;
+    var loadingNode = hasLoadingNode && /*#__PURE__*/React.createElement(LoadingButtonIcon, {
+      size: size
+    });
+    var captionNode = /*#__PURE__*/React.createElement("div", {
+      className: this.emotion.cx(styles.caption(), globalClasses.caption, (_this$emotion$cx5 = {}, _this$emotion$cx5[styles.captionTranslated()] = (active || checked) && !loading && !_isTheme2022, _this$emotion$cx5[styles.captionLink()] = isLink, _this$emotion$cx5[styles.captionDisabled()] = !checked && disabled, _this$emotion$cx5))
+    }, loadingNode, leftIconNode, /*#__PURE__*/React.createElement("span", {
+      className: this.emotion.cx(globalClasses.text, (_this$emotion$cx6 = {}, _this$emotion$cx6[styles.visibilityHidden()] = hasLoadingNode, _this$emotion$cx6))
+    }, children), rightIconNode);
+
+    if (_isTheme2022 && isLink && !loading) {
+      captionNode = /*#__PURE__*/React.createElement(ThemeProvider, {
+        value: getInnerLinkTheme(this.theme)
+      }, /*#__PURE__*/React.createElement(Link, {
+        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", wrapProps, /*#__PURE__*/React.createElement("button", _extends({
+    }, this.props), /*#__PURE__*/React.createElement("span", _extends({}, wrapProps, {
+      "data-tid": ButtonDataTids.rootElement
+    }), /*#__PURE__*/React.createElement("button", _extends({
       "data-tid": ButtonDataTids.root,
       ref: this._ref
-    }, rootProps), innerShadowNode, outlineNode, loadingNode, arrowNode, /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.caption(), globalClasses.caption, (_cx7 = {}, _cx7[styles.captionTranslated()] = active || checked, _cx7[styles.captionLink()] = isLink, _cx7[styles.captionDisabled()] = !checked && disabled, _cx7))
-    }, iconNode, /*#__PURE__*/React.createElement("span", {
-      className: cx((_cx8 = {}, _cx8[styles.visibilityHidden()] = !!loadingNode, _cx8))
-    }, children)))));
+    }, rootProps), 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() {
-    var _cx9, _cx10, _cx11;
+    var _this$emotion$cx7, _this$emotion$cx8, _this$emotion$cx9;
 
-    switch (this.props.size) {
-      case 'large':
-        return cx(styles.sizeLarge(this.theme), (_cx9 = {}, _cx9[styles.sizeLargeIE11(this.theme)] = isIE11 || isEdge, _cx9));
-
-      case 'medium':
-        return cx(styles.sizeMedium(this.theme), (_cx10 = {}, _cx10[styles.sizeMediumIE11(this.theme)] = isIE11 || isEdge, _cx10));
+    var styles = getStyles(this.emotion);
 
-      case 'small':
-      default:
-        return cx(styles.sizeSmall(this.theme), (_cx11 = {}, _cx11[styles.sizeSmallIE11(this.theme)] = isIE11 || isEdge, _cx11));
-    }
-  };
+    var _isTheme2022 = isTheme2022(this.theme);
 
-  _proto.getSizeIconClassName = function getSizeIconClassName() {
-    switch (this.props.size) {
+    switch (this.getProps().size) {
       case 'large':
-        return styles.iconLarge(this.theme);
+        return this.emotion.cx(styles.sizeLarge(this.theme), (_this$emotion$cx7 = {}, _this$emotion$cx7[styles.sizeLargeIE11(this.theme)] = isIE11 || isEdge, _this$emotion$cx7[styles.sizeLargeWithIcon(this.theme)] = !!this.props.icon, _this$emotion$cx7[styles.sizeLargeWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _this$emotion$cx7));
 
       case 'medium':
-        return styles.iconMedium(this.theme);
+        return this.emotion.cx(styles.sizeMedium(this.theme), (_this$emotion$cx8 = {}, _this$emotion$cx8[styles.sizeMediumIE11(this.theme)] = isIE11 || isEdge, _this$emotion$cx8[styles.sizeMediumWithIcon(this.theme)] = !!this.props.icon, _this$emotion$cx8[styles.sizeMediumWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _this$emotion$cx8));
 
       case 'small':
       default:
-        return styles.iconSmall(this.theme);
+        return this.emotion.cx(styles.sizeSmall(this.theme), (_this$emotion$cx9 = {}, _this$emotion$cx9[styles.sizeSmallIE11(this.theme)] = isIE11 || isEdge, _this$emotion$cx9[styles.sizeSmallWithIcon(this.theme)] = !!this.props.icon, _this$emotion$cx9[styles.sizeSmallWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _this$emotion$cx9));
     }
   };
 
   _proto.getSizeWrapClassName = function getSizeWrapClassName() {
-    switch (this.props.size) {
+    var styles = getStyles(this.emotion);
+
+    switch (this.getProps().size) {
       case 'large':
         return styles.wrapLarge(this.theme);
 
@@ -294,7 +380,7 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
   };
 
   return Button;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.__BUTTON__ = true, _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.displayName = 'Button', _class2.__BUTTON__ = true, _class2.defaultProps = {
   use: 'default',
   size: 'small',
   type: 'button'