@alfalab/core-components 41.9.0-beta.0 → 41.9.0-beta.1

package/action-button/Component.js

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
-var coreComponentsSpinner = require('../spinner');
+var coreComponentsLoader = require('../loader');
 var hooks = require('@alfalab/hooks');
 var hooks$1 = require('./hooks.js');
 
@@ -14,21 +14,16 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
-
-var defaultColors = {"primary":"action-button__primary_1xexf","iconWrapper":"action-button__iconWrapper_1xexf","loader":"action-button__loader_1xexf","secondary":"action-button__secondary_1xexf"};
+var defaultColors = {"primary":"action-button__primary_xv0jj","iconWrapper":"action-button__iconWrapper_xv0jj","secondary":"action-button__secondary_xv0jj"};
 require('./default.css');
 
-var styles = {"component":"action-button__component_a8bi3","s":"action-button__s_a8bi3","disabled":"action-button__disabled_a8bi3","loading":"action-button__loading_a8bi3","iconWrapper":"action-button__iconWrapper_a8bi3","label":"action-button__label_a8bi3","loader":"action-button__loader_a8bi3","focused":"action-button__focused_a8bi3"};
+var styles = {"component":"action-button__component_rd3x0","s":"action-button__s_rd3x0","disabled":"action-button__disabled_rd3x0","loading":"action-button__loading_rd3x0","iconWrapper":"action-button__iconWrapper_rd3x0","label":"action-button__label_rd3x0","focused":"action-button__focused_rd3x0"};
 require('./index.css');
 
-var invertedColors = {"primary":"action-button__primary_1r3qx","iconWrapper":"action-button__iconWrapper_1r3qx","loader":"action-button__loader_1r3qx","secondary":"action-button__secondary_1r3qx"};
+var invertedColors = {"primary":"action-button__primary_q46jb","iconWrapper":"action-button__iconWrapper_q46jb","secondary":"action-button__secondary_q46jb"};
 require('./inverted.css');
 
-var staticColors = {"primary":"action-button__primary_vzgj3","iconWrapper":"action-button__iconWrapper_vzgj3","loader":"action-button__loader_vzgj3","secondary":"action-button__secondary_vzgj3"};
+var staticColors = {"primary":"action-button__primary_85tjd","iconWrapper":"action-button__iconWrapper_85tjd","secondary":"action-button__secondary_85tjd"};
 require('./static.css');
 
 var colorStyles = {
@@ -56,7 +51,7 @@ var ActionButton = React.forwardRef(function (_a, ref) {
         'data-test-id': dataTestId,
     };
     var buttonChildren = (React__default.default.createElement(React.Fragment, null,
-        React__default.default.createElement("span", { role: 'img', className: cn__default.default(styles.iconWrapper, colorStyles[colors].iconWrapper, styles[size], iconWrapperClassName) }, showLoader ? (React__default.default.createElement(coreComponentsSpinner.Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn__default.default(styles.loader, colorStyles[colors].loader) })) : (icon)),
+        React__default.default.createElement("span", { role: 'img', className: cn__default.default(styles.iconWrapper, colorStyles[colors].iconWrapper, styles[size], iconWrapperClassName) }, showLoader ? React__default.default.createElement(coreComponentsLoader.Loader, { dataTestId: 'loader' }) : icon),
         React__default.default.createElement("span", { className: styles.label }, children)));
     if (href) {
         return (React__default.default.createElement("a", tslib.__assign({ role: 'button', ref: mergeRefs__default.default([componentRef, ref]), href: href, "aria-disabled": disabled || loading }, componentProps, rest), buttonChildren));

package/action-button/cssm/Component.js

@@ -4,7 +4,7 @@ var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
-var coreComponentsSpinner = require('../../spinner/cssm');
+var coreComponentsLoader = require('../../loader/cssm');
 var hooks = require('@alfalab/hooks');
 var hooks$1 = require('./hooks.js');
 var defaultColors = require('./default.module.css');
@@ -22,11 +22,6 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
 var staticColors__default = /*#__PURE__*/_interopDefaultCompat(staticColors);
 
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
-
 var colorStyles = {
     default: defaultColors__default.default,
     inverted: invertedColors__default.default,
@@ -52,7 +47,7 @@ var ActionButton = React.forwardRef(function (_a, ref) {
         'data-test-id': dataTestId,
     };
     var buttonChildren = (React__default.default.createElement(React.Fragment, null,
-        React__default.default.createElement("span", { role: 'img', className: cn__default.default(styles__default.default.iconWrapper, colorStyles[colors].iconWrapper, styles__default.default[size], iconWrapperClassName) }, showLoader ? (React__default.default.createElement(coreComponentsSpinner.Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn__default.default(styles__default.default.loader, colorStyles[colors].loader) })) : (icon)),
+        React__default.default.createElement("span", { role: 'img', className: cn__default.default(styles__default.default.iconWrapper, colorStyles[colors].iconWrapper, styles__default.default[size], iconWrapperClassName) }, showLoader ? React__default.default.createElement(coreComponentsLoader.Loader, { dataTestId: 'loader' }) : icon),
         React__default.default.createElement("span", { className: styles__default.default.label }, children)));
     if (href) {
         return (React__default.default.createElement("a", tslib.__assign({ role: 'button', ref: mergeRefs__default.default([componentRef, ref]), href: href, "aria-disabled": disabled || loading }, componentProps, rest), buttonChildren));

package/action-button/cssm/default.module.css

@@ -36,10 +36,6 @@
     --action-button-secondary-base-bg-color: var(--color-light-bg-secondary);
     --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
     --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
-
-    /* spinner */
-    --action-button-spinner-primary-color: var(--color-light-graphic-primary-inverted);
-    --action-button-spinner-default-color: var(--color-light-graphic-primary);
 } .primary {
     color: var(--action-button-primary-base-color)
 } .primary .iconWrapper {
@@ -49,8 +45,6 @@
         background-color: var(--action-button-primary-hover-color);
     } .primary:active .iconWrapper {
         background-color: var(--action-button-primary-active-color);
-    } .primary .loader {
-        color: var(--action-button-spinner-primary-color);
     } .secondary {
     color: var(--action-button-secondary-base-color)
 } .secondary .iconWrapper {
@@ -60,6 +54,4 @@
         background-color: var(--action-button-secondary-hover-color);
     } .secondary:active .iconWrapper {
         background-color: var(--action-button-secondary-active-color);
-    } .secondary .loader {
-        color: var(--action-button-spinner-default-color);
     }

package/action-button/cssm/index.js

@@ -5,7 +5,7 @@ require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');
-require('../../spinner/cssm');
+require('../../loader/cssm');
 require('@alfalab/hooks');
 require('./hooks.js');
 require('./default.module.css');

package/action-button/cssm/index.module.css

@@ -18,7 +18,6 @@
 } :root {
     --focus-color: var(--color-light-border-link);
 } .component {
-    position: relative;
     display: inline-flex;
     flex-flow: column nowrap;
     align-items: center;
@@ -71,11 +70,6 @@
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-} .loader {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
 } .focused {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;

package/action-button/cssm/inverted.module.css

@@ -38,10 +38,6 @@
     --action-button-inverted-secondary-active-color: var(
         --color-light-bg-secondary-inverted-tint-20
     );
-
-    /* spinner */
-    --action-button-spinner-inverted-default-color: var(--color-light-graphic-primary-inverted);
-    --action-button-spinner-inverted-primary-color: var(--color-light-graphic-primary);
 } .primary {
     color: var(--action-button-inverted-primary-base-color)
 } .primary .iconWrapper {
@@ -51,8 +47,6 @@
         background-color: var(--action-button-inverted-primary-hover-color);
     } .primary:active .iconWrapper {
         background-color: var(--action-button-inverted-primary-active-color);
-    } .primary .loader {
-        color: var(--action-button-spinner-inverted-primary-color);
     } .secondary {
     color: var(--action-button-inverted-secondary-base-color)
 } .secondary .iconWrapper {
@@ -62,6 +56,4 @@
         background-color: var(--action-button-inverted-secondary-hover-color);
     } .secondary:active .iconWrapper {
         background-color: var(--action-button-inverted-secondary-active-color);
-    } .secondary .loader {
-        color: var(--action-button-spinner-inverted-default-color);
     }

package/action-button/cssm/static.module.css

@@ -28,22 +28,14 @@
     --action-button-static-secondary-base-color: var(--color-static-text-primary-dark);
     --action-button-static-secondary-base-icon-color: var(--color-static-graphic-dark);
     --action-button-static-secondary-base-bg-color: var(--color-static-bg-secondary-light);
-
-    /* spinner */
-    --action-button-spinner-static-primary-color: var(--color-static-graphic-light);
-    --action-button-spinner-static-secondary-color: var(--color-static-graphic-dark);
 } .primary {
     color: var(--action-button-static-primary-base-color)
 } .primary .iconWrapper {
         color: var(--action-button-static-primary-base-icon-color);
         background-color: var(--action-button-static-primary-base-bg-color);
-    } .primary .loader {
-        color: var(--action-button-spinner-static-primary-color);
     } .secondary {
     color: var(--action-button-static-secondary-base-color)
 } .secondary .iconWrapper {
         color: var(--action-button-static-secondary-base-icon-color);
         background-color: var(--action-button-static-secondary-base-bg-color);
-    } .secondary .loader {
-        color: var(--action-button-spinner-static-secondary-color);
     }

package/action-button/default.css

@@ -1,4 +1,4 @@
-/* hash: kcqvc */
+/* hash: 66u03 */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary-inverted: #121212;
@@ -37,30 +37,22 @@
     --action-button-secondary-base-bg-color: var(--color-light-bg-secondary);
     --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
     --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
-
-    /* spinner */
-    --action-button-spinner-primary-color: var(--color-light-graphic-primary-inverted);
-    --action-button-spinner-default-color: var(--color-light-graphic-primary);
-} .action-button__primary_1xexf {
+} .action-button__primary_xv0jj {
     color: var(--action-button-primary-base-color)
-} .action-button__primary_1xexf .action-button__iconWrapper_1xexf {
+} .action-button__primary_xv0jj .action-button__iconWrapper_xv0jj {
         color: var(--action-button-primary-base-icon-color);
         background-color: var(--action-button-primary-base-bg-color);
-    } .action-button__primary_1xexf:hover .action-button__iconWrapper_1xexf {
+    } .action-button__primary_xv0jj:hover .action-button__iconWrapper_xv0jj {
         background-color: var(--action-button-primary-hover-color);
-    } .action-button__primary_1xexf:active .action-button__iconWrapper_1xexf {
+    } .action-button__primary_xv0jj:active .action-button__iconWrapper_xv0jj {
         background-color: var(--action-button-primary-active-color);
-    } .action-button__primary_1xexf .action-button__loader_1xexf {
-        color: var(--action-button-spinner-primary-color);
-    } .action-button__secondary_1xexf {
+    } .action-button__secondary_xv0jj {
     color: var(--action-button-secondary-base-color)
-} .action-button__secondary_1xexf .action-button__iconWrapper_1xexf {
+} .action-button__secondary_xv0jj .action-button__iconWrapper_xv0jj {
         color: var(--action-button-secondary-base-icon-color);
         background-color: var(--action-button-secondary-base-bg-color);
-    } .action-button__secondary_1xexf:hover .action-button__iconWrapper_1xexf {
+    } .action-button__secondary_xv0jj:hover .action-button__iconWrapper_xv0jj {
         background-color: var(--action-button-secondary-hover-color);
-    } .action-button__secondary_1xexf:active .action-button__iconWrapper_1xexf {
+    } .action-button__secondary_xv0jj:active .action-button__iconWrapper_xv0jj {
         background-color: var(--action-button-secondary-active-color);
-    } .action-button__secondary_1xexf .action-button__loader_1xexf {
-        color: var(--action-button-spinner-default-color);
     }

package/action-button/esm/Component.js

@@ -2,25 +2,20 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useRef, Fragment } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { Spinner } from '../../spinner/esm';
+import { Loader } from '../../loader/esm';
 import { useFocus } from '@alfalab/hooks';
 import { useLoader } from './hooks.js';
 
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
-
-var defaultColors = {"primary":"action-button__primary_1xexf","iconWrapper":"action-button__iconWrapper_1xexf","loader":"action-button__loader_1xexf","secondary":"action-button__secondary_1xexf"};
+var defaultColors = {"primary":"action-button__primary_xv0jj","iconWrapper":"action-button__iconWrapper_xv0jj","secondary":"action-button__secondary_xv0jj"};
 require('./default.css');
 
-var styles = {"component":"action-button__component_a8bi3","s":"action-button__s_a8bi3","disabled":"action-button__disabled_a8bi3","loading":"action-button__loading_a8bi3","iconWrapper":"action-button__iconWrapper_a8bi3","label":"action-button__label_a8bi3","loader":"action-button__loader_a8bi3","focused":"action-button__focused_a8bi3"};
+var styles = {"component":"action-button__component_rd3x0","s":"action-button__s_rd3x0","disabled":"action-button__disabled_rd3x0","loading":"action-button__loading_rd3x0","iconWrapper":"action-button__iconWrapper_rd3x0","label":"action-button__label_rd3x0","focused":"action-button__focused_rd3x0"};
 require('./index.css');
 
-var invertedColors = {"primary":"action-button__primary_1r3qx","iconWrapper":"action-button__iconWrapper_1r3qx","loader":"action-button__loader_1r3qx","secondary":"action-button__secondary_1r3qx"};
+var invertedColors = {"primary":"action-button__primary_q46jb","iconWrapper":"action-button__iconWrapper_q46jb","secondary":"action-button__secondary_q46jb"};
 require('./inverted.css');
 
-var staticColors = {"primary":"action-button__primary_vzgj3","iconWrapper":"action-button__iconWrapper_vzgj3","loader":"action-button__loader_vzgj3","secondary":"action-button__secondary_vzgj3"};
+var staticColors = {"primary":"action-button__primary_85tjd","iconWrapper":"action-button__iconWrapper_85tjd","secondary":"action-button__secondary_85tjd"};
 require('./static.css');
 
 var colorStyles = {
@@ -48,7 +43,7 @@ var ActionButton = forwardRef(function (_a, ref) {
         'data-test-id': dataTestId,
     };
     var buttonChildren = (React.createElement(Fragment, null,
-        React.createElement("span", { role: 'img', className: cn(styles.iconWrapper, colorStyles[colors].iconWrapper, styles[size], iconWrapperClassName) }, showLoader ? (React.createElement(Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn(styles.loader, colorStyles[colors].loader) })) : (icon)),
+        React.createElement("span", { role: 'img', className: cn(styles.iconWrapper, colorStyles[colors].iconWrapper, styles[size], iconWrapperClassName) }, showLoader ? React.createElement(Loader, { dataTestId: 'loader' }) : icon),
         React.createElement("span", { className: styles.label }, children)));
     if (href) {
         return (React.createElement("a", __assign({ role: 'button', ref: mergeRefs([componentRef, ref]), href: href, "aria-disabled": disabled || loading }, componentProps, rest), buttonChildren));

package/action-button/esm/default.css

@@ -1,4 +1,4 @@
-/* hash: kcqvc */
+/* hash: 66u03 */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary-inverted: #121212;
@@ -37,30 +37,22 @@
     --action-button-secondary-base-bg-color: var(--color-light-bg-secondary);
     --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
     --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
-
-    /* spinner */
-    --action-button-spinner-primary-color: var(--color-light-graphic-primary-inverted);
-    --action-button-spinner-default-color: var(--color-light-graphic-primary);
-} .action-button__primary_1xexf {
+} .action-button__primary_xv0jj {
     color: var(--action-button-primary-base-color)
-} .action-button__primary_1xexf .action-button__iconWrapper_1xexf {
+} .action-button__primary_xv0jj .action-button__iconWrapper_xv0jj {
         color: var(--action-button-primary-base-icon-color);
         background-color: var(--action-button-primary-base-bg-color);
-    } .action-button__primary_1xexf:hover .action-button__iconWrapper_1xexf {
+    } .action-button__primary_xv0jj:hover .action-button__iconWrapper_xv0jj {
         background-color: var(--action-button-primary-hover-color);
-    } .action-button__primary_1xexf:active .action-button__iconWrapper_1xexf {
+    } .action-button__primary_xv0jj:active .action-button__iconWrapper_xv0jj {
         background-color: var(--action-button-primary-active-color);
-    } .action-button__primary_1xexf .action-button__loader_1xexf {
-        color: var(--action-button-spinner-primary-color);
-    } .action-button__secondary_1xexf {
+    } .action-button__secondary_xv0jj {
     color: var(--action-button-secondary-base-color)
-} .action-button__secondary_1xexf .action-button__iconWrapper_1xexf {
+} .action-button__secondary_xv0jj .action-button__iconWrapper_xv0jj {
         color: var(--action-button-secondary-base-icon-color);
         background-color: var(--action-button-secondary-base-bg-color);
-    } .action-button__secondary_1xexf:hover .action-button__iconWrapper_1xexf {
+    } .action-button__secondary_xv0jj:hover .action-button__iconWrapper_xv0jj {
         background-color: var(--action-button-secondary-hover-color);
-    } .action-button__secondary_1xexf:active .action-button__iconWrapper_1xexf {
+    } .action-button__secondary_xv0jj:active .action-button__iconWrapper_xv0jj {
         background-color: var(--action-button-secondary-active-color);
-    } .action-button__secondary_1xexf .action-button__loader_1xexf {
-        color: var(--action-button-spinner-default-color);
     }

package/action-button/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1q9yo */
+/* hash: 1h47j */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -18,8 +18,7 @@
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-} .action-button__component_a8bi3 {
-    position: relative;
+} .action-button__component_rd3x0 {
     display: inline-flex;
     flex-flow: column nowrap;
     align-items: center;
@@ -43,18 +42,18 @@
     -webkit-appearance: none;
             appearance: none;
     -webkit-tap-highlight-color: transparent
-} .action-button__component_a8bi3.action-button__s_a8bi3 {
+} .action-button__component_rd3x0.action-button__s_rd3x0 {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
-    } .action-button__disabled_a8bi3 {
+    } .action-button__disabled_rd3x0 {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
-} .action-button__loading_a8bi3 {
+} .action-button__loading_rd3x0 {
     cursor: auto;
     pointer-events: none;
-} .action-button__iconWrapper_a8bi3 {
+} .action-button__iconWrapper_rd3x0 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -63,21 +62,16 @@
     border-radius: var(--border-radius-circle);
     transition: background-color 0.2s ease;
     line-height: 0
-} .action-button__iconWrapper_a8bi3.action-button__s_a8bi3 {
+} .action-button__iconWrapper_rd3x0.action-button__s_rd3x0 {
         width: 48px;
         height: 48px;
-    } .action-button__label_a8bi3 {
+    } .action-button__label_rd3x0 {
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-} .action-button__loader_a8bi3 {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-} .action-button__focused_a8bi3 {
+} .action-button__focused_rd3x0 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/action-button/esm/index.js

@@ -3,6 +3,6 @@ import 'tslib';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
-import '../../spinner/esm';
+import '../../loader/esm';
 import '@alfalab/hooks';
 import './hooks.js';

package/action-button/esm/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1qs36 */
+/* hash: 1cm6a */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -39,30 +39,22 @@
     --action-button-inverted-secondary-active-color: var(
         --color-light-bg-secondary-inverted-tint-20
     );
-
-    /* spinner */
-    --action-button-spinner-inverted-default-color: var(--color-light-graphic-primary-inverted);
-    --action-button-spinner-inverted-primary-color: var(--color-light-graphic-primary);
-} .action-button__primary_1r3qx {
+} .action-button__primary_q46jb {
     color: var(--action-button-inverted-primary-base-color)
-} .action-button__primary_1r3qx .action-button__iconWrapper_1r3qx {
+} .action-button__primary_q46jb .action-button__iconWrapper_q46jb {
         color: var(--action-button-inverted-primary-base-icon-color);
         background-color: var(--action-button-inverted-primary-base-bg-color);
-    } .action-button__primary_1r3qx:hover .action-button__iconWrapper_1r3qx {
+    } .action-button__primary_q46jb:hover .action-button__iconWrapper_q46jb {
         background-color: var(--action-button-inverted-primary-hover-color);
-    } .action-button__primary_1r3qx:active .action-button__iconWrapper_1r3qx {
+    } .action-button__primary_q46jb:active .action-button__iconWrapper_q46jb {
         background-color: var(--action-button-inverted-primary-active-color);
-    } .action-button__primary_1r3qx .action-button__loader_1r3qx {
-        color: var(--action-button-spinner-inverted-primary-color);
-    } .action-button__secondary_1r3qx {
+    } .action-button__secondary_q46jb {
     color: var(--action-button-inverted-secondary-base-color)
-} .action-button__secondary_1r3qx .action-button__iconWrapper_1r3qx {
+} .action-button__secondary_q46jb .action-button__iconWrapper_q46jb {
         color: var(--action-button-inverted-secondary-base-icon-color);
         background-color: var(--action-button-inverted-secondary-base-bg-color);
-    } .action-button__secondary_1r3qx:hover .action-button__iconWrapper_1r3qx {
+    } .action-button__secondary_q46jb:hover .action-button__iconWrapper_q46jb {
         background-color: var(--action-button-inverted-secondary-hover-color);
-    } .action-button__secondary_1r3qx:active .action-button__iconWrapper_1r3qx {
+    } .action-button__secondary_q46jb:active .action-button__iconWrapper_q46jb {
         background-color: var(--action-button-inverted-secondary-active-color);
-    } .action-button__secondary_1r3qx .action-button__loader_1r3qx {
-        color: var(--action-button-spinner-inverted-default-color);
     }

package/action-button/esm/static.css

@@ -1,4 +1,4 @@
-/* hash: 1l13r */
+/* hash: 14nps */
 :root {
 } /* deprecated */ :root {
     --color-static-bg-primary-dark: #121212;
@@ -29,22 +29,14 @@
     --action-button-static-secondary-base-color: var(--color-static-text-primary-dark);
     --action-button-static-secondary-base-icon-color: var(--color-static-graphic-dark);
     --action-button-static-secondary-base-bg-color: var(--color-static-bg-secondary-light);
-
-    /* spinner */
-    --action-button-spinner-static-primary-color: var(--color-static-graphic-light);
-    --action-button-spinner-static-secondary-color: var(--color-static-graphic-dark);
-} .action-button__primary_vzgj3 {
+} .action-button__primary_85tjd {
     color: var(--action-button-static-primary-base-color)
-} .action-button__primary_vzgj3 .action-button__iconWrapper_vzgj3 {
+} .action-button__primary_85tjd .action-button__iconWrapper_85tjd {
         color: var(--action-button-static-primary-base-icon-color);
         background-color: var(--action-button-static-primary-base-bg-color);
-    } .action-button__primary_vzgj3 .action-button__loader_vzgj3 {
-        color: var(--action-button-spinner-static-primary-color);
-    } .action-button__secondary_vzgj3 {
+    } .action-button__secondary_85tjd {
     color: var(--action-button-static-secondary-base-color)
-} .action-button__secondary_vzgj3 .action-button__iconWrapper_vzgj3 {
+} .action-button__secondary_85tjd .action-button__iconWrapper_85tjd {
         color: var(--action-button-static-secondary-base-icon-color);
         background-color: var(--action-button-static-secondary-base-bg-color);
-    } .action-button__secondary_vzgj3 .action-button__loader_vzgj3 {
-        color: var(--action-button-spinner-static-secondary-color);
     }

package/action-button/index.css

@@ -1,4 +1,4 @@
-/* hash: 1q9yo */
+/* hash: 1h47j */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #0072ef; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -18,8 +18,7 @@
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-} .action-button__component_a8bi3 {
-    position: relative;
+} .action-button__component_rd3x0 {
     display: inline-flex;
     flex-flow: column nowrap;
     align-items: center;
@@ -43,18 +42,18 @@
     -webkit-appearance: none;
             appearance: none;
     -webkit-tap-highlight-color: transparent
-} .action-button__component_a8bi3.action-button__s_a8bi3 {
+} .action-button__component_rd3x0.action-button__s_rd3x0 {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
-    } .action-button__disabled_a8bi3 {
+    } .action-button__disabled_rd3x0 {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
-} .action-button__loading_a8bi3 {
+} .action-button__loading_rd3x0 {
     cursor: auto;
     pointer-events: none;
-} .action-button__iconWrapper_a8bi3 {
+} .action-button__iconWrapper_rd3x0 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -63,21 +62,16 @@
     border-radius: var(--border-radius-circle);
     transition: background-color 0.2s ease;
     line-height: 0
-} .action-button__iconWrapper_a8bi3.action-button__s_a8bi3 {
+} .action-button__iconWrapper_rd3x0.action-button__s_rd3x0 {
         width: 48px;
         height: 48px;
-    } .action-button__label_a8bi3 {
+    } .action-button__label_rd3x0 {
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-} .action-button__loader_a8bi3 {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-} .action-button__focused_a8bi3 {
+} .action-button__focused_rd3x0 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/action-button/index.js

@@ -5,7 +5,7 @@ require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');
-require('../spinner');
+require('../loader');
 require('@alfalab/hooks');
 require('./hooks.js');
 

package/action-button/inverted.css

@@ -1,4 +1,4 @@
-/* hash: 1qs36 */
+/* hash: 1cm6a */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-primary: #fff;
@@ -39,30 +39,22 @@
     --action-button-inverted-secondary-active-color: var(
         --color-light-bg-secondary-inverted-tint-20
     );
-
-    /* spinner */
-    --action-button-spinner-inverted-default-color: var(--color-light-graphic-primary-inverted);
-    --action-button-spinner-inverted-primary-color: var(--color-light-graphic-primary);
-} .action-button__primary_1r3qx {
+} .action-button__primary_q46jb {
     color: var(--action-button-inverted-primary-base-color)
-} .action-button__primary_1r3qx .action-button__iconWrapper_1r3qx {
+} .action-button__primary_q46jb .action-button__iconWrapper_q46jb {
         color: var(--action-button-inverted-primary-base-icon-color);
         background-color: var(--action-button-inverted-primary-base-bg-color);
-    } .action-button__primary_1r3qx:hover .action-button__iconWrapper_1r3qx {
+    } .action-button__primary_q46jb:hover .action-button__iconWrapper_q46jb {
         background-color: var(--action-button-inverted-primary-hover-color);
-    } .action-button__primary_1r3qx:active .action-button__iconWrapper_1r3qx {
+    } .action-button__primary_q46jb:active .action-button__iconWrapper_q46jb {
         background-color: var(--action-button-inverted-primary-active-color);
-    } .action-button__primary_1r3qx .action-button__loader_1r3qx {
-        color: var(--action-button-spinner-inverted-primary-color);
-    } .action-button__secondary_1r3qx {
+    } .action-button__secondary_q46jb {
     color: var(--action-button-inverted-secondary-base-color)
-} .action-button__secondary_1r3qx .action-button__iconWrapper_1r3qx {
+} .action-button__secondary_q46jb .action-button__iconWrapper_q46jb {
         color: var(--action-button-inverted-secondary-base-icon-color);
         background-color: var(--action-button-inverted-secondary-base-bg-color);
-    } .action-button__secondary_1r3qx:hover .action-button__iconWrapper_1r3qx {
+    } .action-button__secondary_q46jb:hover .action-button__iconWrapper_q46jb {
         background-color: var(--action-button-inverted-secondary-hover-color);
-    } .action-button__secondary_1r3qx:active .action-button__iconWrapper_1r3qx {
+    } .action-button__secondary_q46jb:active .action-button__iconWrapper_q46jb {
         background-color: var(--action-button-inverted-secondary-active-color);
-    } .action-button__secondary_1r3qx .action-button__loader_1r3qx {
-        color: var(--action-button-spinner-inverted-default-color);
     }

package/action-button/modern/Component.js

@@ -1,25 +1,20 @@
 import React, { forwardRef, useRef, Fragment } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { Spinner } from '../../spinner/modern';
+import { Loader } from '../../loader/modern';
 import { useFocus } from '@alfalab/hooks';
 import { useLoader } from './hooks.js';
 
-const getDataTestId = (dataTestId, element) => {
-    const elementPart = element ? `-${element.toLowerCase()}` : '';
-    return dataTestId ? `${dataTestId}${elementPart}` : undefined;
-};
-
-const defaultColors = {"primary":"action-button__primary_1xexf","iconWrapper":"action-button__iconWrapper_1xexf","loader":"action-button__loader_1xexf","secondary":"action-button__secondary_1xexf"};
+const defaultColors = {"primary":"action-button__primary_xv0jj","iconWrapper":"action-button__iconWrapper_xv0jj","secondary":"action-button__secondary_xv0jj"};
 require('./default.css');
 
-const styles = {"component":"action-button__component_a8bi3","s":"action-button__s_a8bi3","disabled":"action-button__disabled_a8bi3","loading":"action-button__loading_a8bi3","iconWrapper":"action-button__iconWrapper_a8bi3","label":"action-button__label_a8bi3","loader":"action-button__loader_a8bi3","focused":"action-button__focused_a8bi3"};
+const styles = {"component":"action-button__component_rd3x0","s":"action-button__s_rd3x0","disabled":"action-button__disabled_rd3x0","loading":"action-button__loading_rd3x0","iconWrapper":"action-button__iconWrapper_rd3x0","label":"action-button__label_rd3x0","focused":"action-button__focused_rd3x0"};
 require('./index.css');
 
-const invertedColors = {"primary":"action-button__primary_1r3qx","iconWrapper":"action-button__iconWrapper_1r3qx","loader":"action-button__loader_1r3qx","secondary":"action-button__secondary_1r3qx"};
+const invertedColors = {"primary":"action-button__primary_q46jb","iconWrapper":"action-button__iconWrapper_q46jb","secondary":"action-button__secondary_q46jb"};
 require('./inverted.css');
 
-const staticColors = {"primary":"action-button__primary_vzgj3","iconWrapper":"action-button__iconWrapper_vzgj3","loader":"action-button__loader_vzgj3","secondary":"action-button__secondary_vzgj3"};
+const staticColors = {"primary":"action-button__primary_85tjd","iconWrapper":"action-button__iconWrapper_85tjd","secondary":"action-button__secondary_85tjd"};
 require('./static.css');
 
 const colorStyles = {
@@ -45,7 +40,7 @@ const ActionButton = forwardRef(({ className, icon, children, href, size = 's',
         'data-test-id': dataTestId,
     };
     const buttonChildren = (React.createElement(Fragment, null,
-        React.createElement("span", { role: 'img', className: cn(styles.iconWrapper, colorStyles[colors].iconWrapper, styles[size], iconWrapperClassName) }, showLoader ? (React.createElement(Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn(styles.loader, colorStyles[colors].loader) })) : (icon)),
+        React.createElement("span", { role: 'img', className: cn(styles.iconWrapper, colorStyles[colors].iconWrapper, styles[size], iconWrapperClassName) }, showLoader ? React.createElement(Loader, { dataTestId: 'loader' }) : icon),
         React.createElement("span", { className: styles.label }, children)));
     if (href) {
         return (React.createElement("a", { role: 'button', ref: mergeRefs([componentRef, ref]), href: href, "aria-disabled": disabled || loading, ...componentProps, ...rest }, buttonChildren));