@alfalab/core-components 36.3.1 → 36.4.0

package/action-button/Component.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
@@ -7,12 +5,6 @@ var coreComponentsLoader = require('../loader');
 var hooks = require('@alfalab/hooks');
 var hooks$1 = require('./hooks.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -52,16 +44,16 @@ function __rest(s, e) {
     return t;
 }
 
-var defaultColors = {"primary":"action-button__primary_1spzj","iconWrapper":"action-button__iconWrapper_1spzj","secondary":"action-button__secondary_1spzj"};
+var defaultColors = {"primary":"action-button__primary_1fmz3","iconWrapper":"action-button__iconWrapper_1fmz3","secondary":"action-button__secondary_1fmz3"};
 require('./default.css');
 
-var styles = {"component":"action-button__component_1gyz5","s":"action-button__s_1gyz5","disabled":"action-button__disabled_1gyz5","loading":"action-button__loading_1gyz5","iconWrapper":"action-button__iconWrapper_1gyz5","label":"action-button__label_1gyz5","focused":"action-button__focused_1gyz5"};
+var styles = {"component":"action-button__component_698j9","s":"action-button__s_698j9","disabled":"action-button__disabled_698j9","loading":"action-button__loading_698j9","iconWrapper":"action-button__iconWrapper_698j9","label":"action-button__label_698j9","focused":"action-button__focused_698j9"};
 require('./index.css');
 
-var invertedColors = {"primary":"action-button__primary_1j2s4","iconWrapper":"action-button__iconWrapper_1j2s4","secondary":"action-button__secondary_1j2s4"};
+var invertedColors = {"primary":"action-button__primary_15zro","iconWrapper":"action-button__iconWrapper_15zro","secondary":"action-button__secondary_15zro"};
 require('./inverted.css');
 
-var staticColors = {"primary":"action-button__primary_1wzk8","iconWrapper":"action-button__iconWrapper_1wzk8","secondary":"action-button__secondary_1wzk8"};
+var staticColors = {"primary":"action-button__primary_1qny6","iconWrapper":"action-button__iconWrapper_1qny6","secondary":"action-button__secondary_1qny6"};
 require('./static.css');
 
 var colorStyles = {
@@ -81,20 +73,20 @@ var ActionButton = React.forwardRef(function (_a, ref) {
     var focused = hooks.useFocus(componentRef, 'keyboard')[0];
     var showLoader = hooks$1.useLoader(!!loading, LOADER_MIN_DISPLAY_INTERVAL).showLoader;
     var componentProps = {
-        className: cn__default['default'](styles.component, colorStyles[colors][view], styles[size], (_b = {},
+        className: cn(styles.component, colorStyles[colors][view], styles[size], (_b = {},
             _b[styles.focused] = focused,
             _b[styles.disabled] = disabled,
             _b[styles.loading] = showLoader,
             _b), className),
         '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(coreComponentsLoader.Loader, { dataTestId: 'loader' }) : icon),
-        React__default['default'].createElement("span", { className: styles.label }, children)));
+    var buttonChildren = (React.createElement(React.Fragment, null,
+        React.createElement("span", { role: 'img', className: cn(styles.iconWrapper, colorStyles[colors].iconWrapper, styles[size], iconWrapperClassName) }, showLoader ? React.createElement(coreComponentsLoader.Loader, { dataTestId: 'loader' }) : icon),
+        React.createElement("span", { className: styles.label }, children)));
     if (href) {
-        return (React__default['default'].createElement("a", __assign({ role: 'button', ref: mergeRefs__default['default']([componentRef, ref]), href: href, "aria-disabled": disabled || loading }, componentProps, rest), buttonChildren));
+        return (React.createElement("a", __assign({ role: 'button', ref: mergeRefs([componentRef, ref]), href: href, "aria-disabled": disabled || loading }, componentProps, rest), buttonChildren));
     }
-    return (React__default['default'].createElement("button", __assign({ ref: mergeRefs__default['default']([componentRef, ref]), 
+    return (React.createElement("button", __assign({ ref: mergeRefs([componentRef, ref]), 
         // eslint-disable-next-line react/button-has-type
         type: type, disabled: disabled || loading }, componentProps, rest), buttonChildren));
 });

package/action-button/cssm/Component.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
@@ -11,16 +9,6 @@ var styles = require('./index.module.css');
 var invertedColors = require('./inverted.module.css');
 var staticColors = require('./static.module.css');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
-var staticColors__default = /*#__PURE__*/_interopDefaultLegacy(staticColors);
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -61,9 +49,9 @@ function __rest(s, e) {
 }
 
 var colorStyles = {
-    default: defaultColors__default['default'],
-    inverted: invertedColors__default['default'],
-    static: staticColors__default['default'],
+    default: defaultColors,
+    inverted: invertedColors,
+    static: staticColors,
 };
 /**
  * Минимальное время отображения лоадера - 500мс,
@@ -77,20 +65,20 @@ var ActionButton = React.forwardRef(function (_a, ref) {
     var focused = hooks.useFocus(componentRef, 'keyboard')[0];
     var showLoader = hooks$1.useLoader(!!loading, LOADER_MIN_DISPLAY_INTERVAL).showLoader;
     var componentProps = {
-        className: cn__default['default'](styles__default['default'].component, colorStyles[colors][view], styles__default['default'][size], (_b = {},
-            _b[styles__default['default'].focused] = focused,
-            _b[styles__default['default'].disabled] = disabled,
-            _b[styles__default['default'].loading] = showLoader,
+        className: cn(styles.component, colorStyles[colors][view], styles[size], (_b = {},
+            _b[styles.focused] = focused,
+            _b[styles.disabled] = disabled,
+            _b[styles.loading] = showLoader,
             _b), className),
         '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(coreComponentsLoader.Loader, { dataTestId: 'loader' }) : icon),
-        React__default['default'].createElement("span", { className: styles__default['default'].label }, children)));
+    var buttonChildren = (React.createElement(React.Fragment, null,
+        React.createElement("span", { role: 'img', className: cn(styles.iconWrapper, colorStyles[colors].iconWrapper, styles[size], iconWrapperClassName) }, showLoader ? React.createElement(coreComponentsLoader.Loader, { dataTestId: 'loader' }) : icon),
+        React.createElement("span", { className: styles.label }, children)));
     if (href) {
-        return (React__default['default'].createElement("a", __assign({ role: 'button', ref: mergeRefs__default['default']([componentRef, ref]), href: href, "aria-disabled": disabled || loading }, componentProps, rest), buttonChildren));
+        return (React.createElement("a", __assign({ role: 'button', ref: mergeRefs([componentRef, ref]), href: href, "aria-disabled": disabled || loading }, componentProps, rest), buttonChildren));
     }
-    return (React__default['default'].createElement("button", __assign({ ref: mergeRefs__default['default']([componentRef, ref]), 
+    return (React.createElement("button", __assign({ ref: mergeRefs([componentRef, ref]), 
         // eslint-disable-next-line react/button-has-type
         type: type, disabled: disabled || loading }, componentProps, rest), buttonChildren));
 });

package/action-button/cssm/hooks.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 var useLoader = function (loading, timeout) {

package/action-button/cssm/index.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var Component = require('./Component.js');
 require('react');
 require('react-merge-refs');

package/action-button/default.css

@@ -33,29 +33,29 @@
     --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
     --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
 }
-.action-button__primary_1spzj {
+.action-button__primary_1fmz3 {
     color: var(--action-button-primary-base-color)
 }
-.action-button__primary_1spzj .action-button__iconWrapper_1spzj {
+.action-button__primary_1fmz3 .action-button__iconWrapper_1fmz3 {
         color: var(--action-button-primary-base-icon-color);
         background-color: var(--action-button-primary-base-bg-color);
     }
-.action-button__primary_1spzj:hover .action-button__iconWrapper_1spzj {
+.action-button__primary_1fmz3:hover .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-primary-hover-color);
     }
-.action-button__primary_1spzj:active .action-button__iconWrapper_1spzj {
+.action-button__primary_1fmz3:active .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-primary-active-color);
     }
-.action-button__secondary_1spzj {
+.action-button__secondary_1fmz3 {
     color: var(--action-button-secondary-base-color)
 }
-.action-button__secondary_1spzj .action-button__iconWrapper_1spzj {
+.action-button__secondary_1fmz3 .action-button__iconWrapper_1fmz3 {
         color: var(--action-button-secondary-base-icon-color);
         background-color: var(--action-button-secondary-base-bg-color);
     }
-.action-button__secondary_1spzj:hover .action-button__iconWrapper_1spzj {
+.action-button__secondary_1fmz3:hover .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-secondary-hover-color);
     }
-.action-button__secondary_1spzj:active .action-button__iconWrapper_1spzj {
+.action-button__secondary_1fmz3:active .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-secondary-active-color);
     }

package/action-button/esm/Component.js

@@ -44,16 +44,16 @@ function __rest(s, e) {
     return t;
 }
 
-var defaultColors = {"primary":"action-button__primary_1spzj","iconWrapper":"action-button__iconWrapper_1spzj","secondary":"action-button__secondary_1spzj"};
+var defaultColors = {"primary":"action-button__primary_1fmz3","iconWrapper":"action-button__iconWrapper_1fmz3","secondary":"action-button__secondary_1fmz3"};
 require('./default.css');
 
-var styles = {"component":"action-button__component_1gyz5","s":"action-button__s_1gyz5","disabled":"action-button__disabled_1gyz5","loading":"action-button__loading_1gyz5","iconWrapper":"action-button__iconWrapper_1gyz5","label":"action-button__label_1gyz5","focused":"action-button__focused_1gyz5"};
+var styles = {"component":"action-button__component_698j9","s":"action-button__s_698j9","disabled":"action-button__disabled_698j9","loading":"action-button__loading_698j9","iconWrapper":"action-button__iconWrapper_698j9","label":"action-button__label_698j9","focused":"action-button__focused_698j9"};
 require('./index.css');
 
-var invertedColors = {"primary":"action-button__primary_1j2s4","iconWrapper":"action-button__iconWrapper_1j2s4","secondary":"action-button__secondary_1j2s4"};
+var invertedColors = {"primary":"action-button__primary_15zro","iconWrapper":"action-button__iconWrapper_15zro","secondary":"action-button__secondary_15zro"};
 require('./inverted.css');
 
-var staticColors = {"primary":"action-button__primary_1wzk8","iconWrapper":"action-button__iconWrapper_1wzk8","secondary":"action-button__secondary_1wzk8"};
+var staticColors = {"primary":"action-button__primary_1qny6","iconWrapper":"action-button__iconWrapper_1qny6","secondary":"action-button__secondary_1qny6"};
 require('./static.css');
 
 var colorStyles = {

package/action-button/esm/default.css

@@ -33,29 +33,29 @@
     --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
     --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
 }
-.action-button__primary_1spzj {
+.action-button__primary_1fmz3 {
     color: var(--action-button-primary-base-color)
 }
-.action-button__primary_1spzj .action-button__iconWrapper_1spzj {
+.action-button__primary_1fmz3 .action-button__iconWrapper_1fmz3 {
         color: var(--action-button-primary-base-icon-color);
         background-color: var(--action-button-primary-base-bg-color);
     }
-.action-button__primary_1spzj:hover .action-button__iconWrapper_1spzj {
+.action-button__primary_1fmz3:hover .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-primary-hover-color);
     }
-.action-button__primary_1spzj:active .action-button__iconWrapper_1spzj {
+.action-button__primary_1fmz3:active .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-primary-active-color);
     }
-.action-button__secondary_1spzj {
+.action-button__secondary_1fmz3 {
     color: var(--action-button-secondary-base-color)
 }
-.action-button__secondary_1spzj .action-button__iconWrapper_1spzj {
+.action-button__secondary_1fmz3 .action-button__iconWrapper_1fmz3 {
         color: var(--action-button-secondary-base-icon-color);
         background-color: var(--action-button-secondary-base-bg-color);
     }
-.action-button__secondary_1spzj:hover .action-button__iconWrapper_1spzj {
+.action-button__secondary_1fmz3:hover .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-secondary-hover-color);
     }
-.action-button__secondary_1spzj:active .action-button__iconWrapper_1spzj {
+.action-button__secondary_1fmz3:active .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-secondary-active-color);
     }

package/action-button/esm/index.css

@@ -19,7 +19,7 @@
 :root {
     --focus-color: var(--color-light-border-link);
 }
-.action-button__component_1gyz5 {
+.action-button__component_698j9 {
     display: inline-flex;
     flex-flow: column nowrap;
     align-items: center;
@@ -44,21 +44,21 @@
             appearance: none;
     -webkit-tap-highlight-color: transparent
 }
-.action-button__component_1gyz5.action-button__s_1gyz5 {
+.action-button__component_698j9.action-button__s_698j9 {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
     }
-.action-button__disabled_1gyz5 {
+.action-button__disabled_698j9 {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
 }
-.action-button__loading_1gyz5 {
+.action-button__loading_698j9 {
     cursor: auto;
     pointer-events: none;
 }
-.action-button__iconWrapper_1gyz5 {
+.action-button__iconWrapper_698j9 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -68,18 +68,18 @@
     transition: background-color 0.2s ease;
     line-height: 0
 }
-.action-button__iconWrapper_1gyz5.action-button__s_1gyz5 {
+.action-button__iconWrapper_698j9.action-button__s_698j9 {
         width: 48px;
         height: 48px;
     }
-.action-button__label_1gyz5 {
+.action-button__label_698j9 {
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
-.action-button__focused_1gyz5 {
+.action-button__focused_698j9 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/action-button/esm/index.js

@@ -1,7 +1,7 @@
+export { ActionButton } from './Component.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
 import '../../loader/esm';
 import '@alfalab/hooks';
 import './hooks.js';
-export { ActionButton } from './Component.js';

package/action-button/esm/inverted.css

@@ -35,29 +35,29 @@
         --color-light-bg-secondary-inverted-tint-20
     );
 }
-.action-button__primary_1j2s4 {
+.action-button__primary_15zro {
     color: var(--action-button-inverted-primary-base-color)
 }
-.action-button__primary_1j2s4 .action-button__iconWrapper_1j2s4 {
+.action-button__primary_15zro .action-button__iconWrapper_15zro {
         color: var(--action-button-inverted-primary-base-icon-color);
         background-color: var(--action-button-inverted-primary-base-bg-color);
     }
-.action-button__primary_1j2s4:hover .action-button__iconWrapper_1j2s4 {
+.action-button__primary_15zro:hover .action-button__iconWrapper_15zro {
         background-color: var(--action-button-inverted-primary-hover-color);
     }
-.action-button__primary_1j2s4:active .action-button__iconWrapper_1j2s4 {
+.action-button__primary_15zro:active .action-button__iconWrapper_15zro {
         background-color: var(--action-button-inverted-primary-active-color);
     }
-.action-button__secondary_1j2s4 {
+.action-button__secondary_15zro {
     color: var(--action-button-inverted-secondary-base-color)
 }
-.action-button__secondary_1j2s4 .action-button__iconWrapper_1j2s4 {
+.action-button__secondary_15zro .action-button__iconWrapper_15zro {
         color: var(--action-button-inverted-secondary-base-icon-color);
         background-color: var(--action-button-inverted-secondary-base-bg-color);
     }
-.action-button__secondary_1j2s4:hover .action-button__iconWrapper_1j2s4 {
+.action-button__secondary_15zro:hover .action-button__iconWrapper_15zro {
         background-color: var(--action-button-inverted-secondary-hover-color);
     }
-.action-button__secondary_1j2s4:active .action-button__iconWrapper_1j2s4 {
+.action-button__secondary_15zro:active .action-button__iconWrapper_15zro {
         background-color: var(--action-button-inverted-secondary-active-color);
     }

package/action-button/esm/static.css

@@ -25,17 +25,17 @@
     --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);
 }
-.action-button__primary_1wzk8 {
+.action-button__primary_1qny6 {
     color: var(--action-button-static-primary-base-color)
 }
-.action-button__primary_1wzk8 .action-button__iconWrapper_1wzk8 {
+.action-button__primary_1qny6 .action-button__iconWrapper_1qny6 {
         color: var(--action-button-static-primary-base-icon-color);
         background-color: var(--action-button-static-primary-base-bg-color);
     }
-.action-button__secondary_1wzk8 {
+.action-button__secondary_1qny6 {
     color: var(--action-button-static-secondary-base-color)
 }
-.action-button__secondary_1wzk8 .action-button__iconWrapper_1wzk8 {
+.action-button__secondary_1qny6 .action-button__iconWrapper_1qny6 {
         color: var(--action-button-static-secondary-base-icon-color);
         background-color: var(--action-button-static-secondary-base-bg-color);
     }

package/action-button/hooks.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 
 var useLoader = function (loading, timeout) {

package/action-button/index.css

@@ -19,7 +19,7 @@
 :root {
     --focus-color: var(--color-light-border-link);
 }
-.action-button__component_1gyz5 {
+.action-button__component_698j9 {
     display: inline-flex;
     flex-flow: column nowrap;
     align-items: center;
@@ -44,21 +44,21 @@
             appearance: none;
     -webkit-tap-highlight-color: transparent
 }
-.action-button__component_1gyz5.action-button__s_1gyz5 {
+.action-button__component_698j9.action-button__s_698j9 {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
     }
-.action-button__disabled_1gyz5 {
+.action-button__disabled_698j9 {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
 }
-.action-button__loading_1gyz5 {
+.action-button__loading_698j9 {
     cursor: auto;
     pointer-events: none;
 }
-.action-button__iconWrapper_1gyz5 {
+.action-button__iconWrapper_698j9 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -68,18 +68,18 @@
     transition: background-color 0.2s ease;
     line-height: 0
 }
-.action-button__iconWrapper_1gyz5.action-button__s_1gyz5 {
+.action-button__iconWrapper_698j9.action-button__s_698j9 {
         width: 48px;
         height: 48px;
     }
-.action-button__label_1gyz5 {
+.action-button__label_698j9 {
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
-.action-button__focused_1gyz5 {
+.action-button__focused_698j9 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/action-button/index.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var Component = require('./Component.js');
 require('react');
 require('react-merge-refs');

package/action-button/inverted.css

@@ -35,29 +35,29 @@
         --color-light-bg-secondary-inverted-tint-20
     );
 }
-.action-button__primary_1j2s4 {
+.action-button__primary_15zro {
     color: var(--action-button-inverted-primary-base-color)
 }
-.action-button__primary_1j2s4 .action-button__iconWrapper_1j2s4 {
+.action-button__primary_15zro .action-button__iconWrapper_15zro {
         color: var(--action-button-inverted-primary-base-icon-color);
         background-color: var(--action-button-inverted-primary-base-bg-color);
     }
-.action-button__primary_1j2s4:hover .action-button__iconWrapper_1j2s4 {
+.action-button__primary_15zro:hover .action-button__iconWrapper_15zro {
         background-color: var(--action-button-inverted-primary-hover-color);
     }
-.action-button__primary_1j2s4:active .action-button__iconWrapper_1j2s4 {
+.action-button__primary_15zro:active .action-button__iconWrapper_15zro {
         background-color: var(--action-button-inverted-primary-active-color);
     }
-.action-button__secondary_1j2s4 {
+.action-button__secondary_15zro {
     color: var(--action-button-inverted-secondary-base-color)
 }
-.action-button__secondary_1j2s4 .action-button__iconWrapper_1j2s4 {
+.action-button__secondary_15zro .action-button__iconWrapper_15zro {
         color: var(--action-button-inverted-secondary-base-icon-color);
         background-color: var(--action-button-inverted-secondary-base-bg-color);
     }
-.action-button__secondary_1j2s4:hover .action-button__iconWrapper_1j2s4 {
+.action-button__secondary_15zro:hover .action-button__iconWrapper_15zro {
         background-color: var(--action-button-inverted-secondary-hover-color);
     }
-.action-button__secondary_1j2s4:active .action-button__iconWrapper_1j2s4 {
+.action-button__secondary_15zro:active .action-button__iconWrapper_15zro {
         background-color: var(--action-button-inverted-secondary-active-color);
     }

package/action-button/modern/Component.js

@@ -1,20 +1,20 @@
 import React, { forwardRef, useRef, Fragment } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
-import { useFocus } from '@alfalab/hooks';
 import { Loader } from '../../loader/modern';
+import { useFocus } from '@alfalab/hooks';
 import { useLoader } from './hooks.js';
 
-var defaultColors = {"primary":"action-button__primary_1spzj","iconWrapper":"action-button__iconWrapper_1spzj","secondary":"action-button__secondary_1spzj"};
+const defaultColors = {"primary":"action-button__primary_1fmz3","iconWrapper":"action-button__iconWrapper_1fmz3","secondary":"action-button__secondary_1fmz3"};
 require('./default.css');
 
-var styles = {"component":"action-button__component_1gyz5","s":"action-button__s_1gyz5","disabled":"action-button__disabled_1gyz5","loading":"action-button__loading_1gyz5","iconWrapper":"action-button__iconWrapper_1gyz5","label":"action-button__label_1gyz5","focused":"action-button__focused_1gyz5"};
+const styles = {"component":"action-button__component_698j9","s":"action-button__s_698j9","disabled":"action-button__disabled_698j9","loading":"action-button__loading_698j9","iconWrapper":"action-button__iconWrapper_698j9","label":"action-button__label_698j9","focused":"action-button__focused_698j9"};
 require('./index.css');
 
-var invertedColors = {"primary":"action-button__primary_1j2s4","iconWrapper":"action-button__iconWrapper_1j2s4","secondary":"action-button__secondary_1j2s4"};
+const invertedColors = {"primary":"action-button__primary_15zro","iconWrapper":"action-button__iconWrapper_15zro","secondary":"action-button__secondary_15zro"};
 require('./inverted.css');
 
-var staticColors = {"primary":"action-button__primary_1wzk8","iconWrapper":"action-button__iconWrapper_1wzk8","secondary":"action-button__secondary_1wzk8"};
+const staticColors = {"primary":"action-button__primary_1qny6","iconWrapper":"action-button__iconWrapper_1qny6","secondary":"action-button__secondary_1qny6"};
 require('./static.css');
 
 const colorStyles = {

package/action-button/modern/default.css

@@ -33,29 +33,29 @@
     --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
     --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
 }
-.action-button__primary_1spzj {
+.action-button__primary_1fmz3 {
     color: var(--action-button-primary-base-color)
 }
-.action-button__primary_1spzj .action-button__iconWrapper_1spzj {
+.action-button__primary_1fmz3 .action-button__iconWrapper_1fmz3 {
         color: var(--action-button-primary-base-icon-color);
         background-color: var(--action-button-primary-base-bg-color);
     }
-.action-button__primary_1spzj:hover .action-button__iconWrapper_1spzj {
+.action-button__primary_1fmz3:hover .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-primary-hover-color);
     }
-.action-button__primary_1spzj:active .action-button__iconWrapper_1spzj {
+.action-button__primary_1fmz3:active .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-primary-active-color);
     }
-.action-button__secondary_1spzj {
+.action-button__secondary_1fmz3 {
     color: var(--action-button-secondary-base-color)
 }
-.action-button__secondary_1spzj .action-button__iconWrapper_1spzj {
+.action-button__secondary_1fmz3 .action-button__iconWrapper_1fmz3 {
         color: var(--action-button-secondary-base-icon-color);
         background-color: var(--action-button-secondary-base-bg-color);
     }
-.action-button__secondary_1spzj:hover .action-button__iconWrapper_1spzj {
+.action-button__secondary_1fmz3:hover .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-secondary-hover-color);
     }
-.action-button__secondary_1spzj:active .action-button__iconWrapper_1spzj {
+.action-button__secondary_1fmz3:active .action-button__iconWrapper_1fmz3 {
         background-color: var(--action-button-secondary-active-color);
     }

package/action-button/modern/index.css

@@ -19,7 +19,7 @@
 :root {
     --focus-color: var(--color-light-border-link);
 }
-.action-button__component_1gyz5 {
+.action-button__component_698j9 {
     display: inline-flex;
     flex-flow: column nowrap;
     align-items: center;
@@ -44,21 +44,21 @@
             appearance: none;
     -webkit-tap-highlight-color: transparent
 }
-.action-button__component_1gyz5.action-button__s_1gyz5 {
+.action-button__component_698j9.action-button__s_698j9 {
         font-size: 14px;
         line-height: 20px;
         font-weight: 500;
     }
-.action-button__disabled_1gyz5 {
+.action-button__disabled_698j9 {
     opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
 }
-.action-button__loading_1gyz5 {
+.action-button__loading_698j9 {
     cursor: auto;
     pointer-events: none;
 }
-.action-button__iconWrapper_1gyz5 {
+.action-button__iconWrapper_698j9 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -68,18 +68,18 @@
     transition: background-color 0.2s ease;
     line-height: 0
 }
-.action-button__iconWrapper_1gyz5.action-button__s_1gyz5 {
+.action-button__iconWrapper_698j9.action-button__s_698j9 {
         width: 48px;
         height: 48px;
     }
-.action-button__label_1gyz5 {
+.action-button__label_698j9 {
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
-.action-button__focused_1gyz5 {
+.action-button__focused_698j9 {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/action-button/modern/index.js

@@ -1,7 +1,7 @@
+export { ActionButton } from './Component.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
-import '@alfalab/hooks';
 import '../../loader/modern';
+import '@alfalab/hooks';
 import './hooks.js';
-export { ActionButton } from './Component.js';