@skbkontur/react-ui 0.0.0-0fe669bb2d → 0.0.0-0ffbe8b468

package/components/Autocomplete/locale/index/index.js

@@ -0,0 +1,8 @@
+import { LocaleHelper } from "../../../../lib/locale/LocaleHelper";
+import { componentsLocales as en_GB } from "../locales/en";
+import { componentsLocales as ru_RU } from "../locales/ru";
+export * from "../types";
+export var AutocompleteLocaleHelper = new LocaleHelper({
+  ru_RU: ru_RU,
+  en_GB: en_GB
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","AutocompleteLocaleHelper"],"mappings":"AAAA,SAASA,YAAT,QAA6B,kCAA7B;;AAEA,SAASC,iBAAiB,IAAIC,KAA9B,QAA2C,cAA3C;AACA,SAASD,iBAAiB,IAAIE,KAA9B,QAA2C,cAA3C;;;AAGA,cAAc,SAAd;;AAEA,OAAO,IAAMC,wBAAwB,GAAG,IAAIJ,YAAJ,CAAqC;AAC3EG,EAAAA,KAAK,EAALA,KAD2E;AAE3ED,EAAAA,KAAK,EAALA,KAF2E,EAArC,CAAjC","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { AutocompleteLocale } from './types';\n\nexport * from './types';\n\nexport const AutocompleteLocaleHelper = new LocaleHelper<AutocompleteLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/components/Autocomplete/locale/index/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/index.d.ts

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import { AutocompleteLocale } from './types';
+export * from './types';
+export declare const AutocompleteLocaleHelper: LocaleHelper<AutocompleteLocale>;

package/components/Autocomplete/locale/locales/en/en.js

@@ -0,0 +1,5 @@
+export var componentsLocales = {
+  enterValue: 'Start typing',
+  notFound: 'Nothing was found',
+  updateValue: 'Start typing or changing the value'
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","enterValue","notFound","updateValue"],"mappings":";;AAEA,OAAO,IAAMA,iBAAqC,GAAG;AACnDC,EAAAA,UAAU,EAAE,cADuC;AAEnDC,EAAAA,QAAQ,EAAE,mBAFyC;AAGnDC,EAAAA,WAAW,EAAE,oCAHsC,EAA9C","sourcesContent":["import { AutocompleteLocale } from '../types';\n\nexport const componentsLocales: AutocompleteLocale = {\n  enterValue: 'Start typing',\n  notFound: 'Nothing was found',\n  updateValue: 'Start typing or changing the value',\n};\n"]}

package/components/Autocomplete/locale/locales/en/package.json

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

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

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

package/components/Autocomplete/locale/locales/ru/package.json

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

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

@@ -0,0 +1,5 @@
+export var componentsLocales = {
+  enterValue: 'Начните вводить значение',
+  notFound: 'Ничего не найдено',
+  updateValue: 'Начните вводить или изменять значение'
+};

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

@@ -4,18 +4,30 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 
 import React from 'react';
-import { isReactUIComponent } from "../../../lib/utils";
-import { isIE11, isEdge } from "../../../lib/client";
+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 { 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 { Spinner } from "../../Spinner";
+import { LoadingIcon } from "../../../internal/icons2022/LoadingIcon";
 import { styles, activeStyles, globalClasses } from "../Button.styles";
+import { ButtonIcon, getButtonIconSizes } from "../ButtonIcon";
+import { useButtonArrow } from "../ButtonArrow";
+import { getInnerLinkTheme } from "../getInnerLinkTheme";
+/**
+ * @deprecated use SizeProp
+ */
+
 export var ButtonDataTids = {
-  root: 'Button__root'
+  root: 'Button__root',
+  spinner: 'Button__spinner'
 };
 export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Button, _React$Component);
@@ -109,13 +121,13 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
     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.renderMain = function renderMain() {
-    var _cx, _cx2, _cx7, _cx8;
+    var _cx2, _cx5, _cx6;
 
     var _this$props = this.props,
         corners = _this$props.corners,
@@ -126,7 +138,6 @@ 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,
         _noPadding = _this$props._noPadding,
@@ -137,24 +148,65 @@ 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;
+        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;
+        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),
+        wrapClassNameWithArrow = _useButtonArrow[0],
+        rootClassNameWithArrow = _useButtonArrow[1],
+        arrowNode = _useButtonArrow[2];
+
+    var isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use);
+    var rootClassName = '';
+
+    if (_isTheme2022) {
+      var trueDisabled = disabled || loading;
+      rootClassName = cx.apply(void 0, [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()] : [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;
+
+      rootClassName = cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.simulatedPress()] = 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));
+    }
+
     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: 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)),
+      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),
@@ -166,65 +218,64 @@ 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: cx((_cx2 = {}, _cx2[styles.wrap(this.theme)] = true, _cx2[wrapClassNameWithArrow] = true, _cx2[this.getSizeWrapClassName()] = true, _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) {
+    if ((!isFocused || isLink) && !isDisabled2022) {
       var _cx3;
 
       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))
       });
     }
 
+    var iconNode = icon && /*#__PURE__*/React.createElement(ButtonIcon, {
+      icon: icon,
+      size: size,
+      hasChildren: Boolean(children),
+      disabled: disabled || false,
+      loading: loading || false,
+      use: use
+    });
     var loadingNode = null;
 
     if (loading && !icon) {
+      var loadingIcon = _isTheme2022 ? /*#__PURE__*/React.createElement(LoadingIcon, {
+        size: size
+      }) : /*#__PURE__*/React.createElement(Spinner, {
+        caption: null,
+        dimmed: true,
+        type: "mini"
+      });
       loadingNode = /*#__PURE__*/React.createElement("div", {
+        "data-tid": ButtonDataTids.spinner,
         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.iconNoRightMargin()] = !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)
-      }));
+      }, loadingIcon);
     } // Force disable all props and features, that cannot be use with Link
 
 
     if (isLink) {
-      var _cx6;
+      var _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 = 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)] = disabled || loading, _cx4));
       Object.assign(wrapProps, {
         className: cx(styles.wrap(this.theme), styles.wrapLink()),
         style: {
@@ -232,7 +283,24 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
         }
       });
       rootProps.style.textAlign = undefined;
-      arrowNode = null;
+    }
+
+    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, iconNode, /*#__PURE__*/React.createElement("span", {
+      className: cx(globalClasses.text, (_cx6 = {}, _cx6[styles.visibilityHidden()] = !!loadingNode, _cx6))
+    }, children));
+
+    if (_isTheme2022 && isLink && !loading) {
+      captionNode = /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: getInnerLinkTheme(this.theme)
+      }, /*#__PURE__*/React.createElement(Link, {
+        focused: isFocused,
+        disabled: disabled,
+        icon: this.renderIcon2022(icon),
+        as: "span",
+        tabIndex: -1
+      }, children));
     }
 
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
@@ -240,48 +308,37 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
     }, this.props), /*#__PURE__*/React.createElement("span", wrapProps, /*#__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;
 
-  _proto.getSizeClassName = function getSizeClassName() {
-    var _cx9, _cx10, _cx11;
+      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]
+      });
+    }
 
-    switch (this.getProps().size) {
-      case 'large':
-        return cx(styles.sizeLarge(this.theme), (_cx9 = {}, _cx9[styles.sizeLargeIE11(this.theme)] = isIE11 || isEdge, _cx9));
+    return icon;
+  };
 
-      case 'medium':
-        return cx(styles.sizeMedium(this.theme), (_cx10 = {}, _cx10[styles.sizeMediumIE11(this.theme)] = isIE11 || isEdge, _cx10));
+  _proto.getSizeClassName = function getSizeClassName() {
+    var _cx7, _cx8, _cx9;
 
-      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.getProps().size) {
       case 'large':
-        return styles.iconLarge(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 styles.iconMedium(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 styles.iconSmall(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));
     }
   };