@alfalab/core-components 47.26.0-beta.1 → 48.0.0-beta.1

package/button/esm/index.js

@@ -2,11 +2,11 @@ export { Button } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
-import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import './components/base-button/Component.js';
 import 'react-merge-refs';
 import 'classnames';
+import '../../shared/esm';
 import '../../spinner/esm';
 import '@alfalab/hooks';
 import './mobile/Component.mobile.js';

package/button/esm/mobile/Component.mobile.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
 import React from 'react';
-import { CommonButtonProps } from '../typings';
-export declare const ButtonMobile: React.ForwardRefExoticComponent<CommonButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+import { CommonButtonProps } from "../typings";
+declare const ButtonMobile: React.ForwardRefExoticComponent<CommonButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonMobile };

package/button/esm/mobile/Component.mobile.js

@@ -7,13 +7,13 @@ import '../../../shared/esm';
 import '../../../spinner/esm';
 import '@alfalab/hooks';
 
-var defaultColors = {"primary":"button__primary_i5cb1","loader":"button__loader_i5cb1","secondary":"button__secondary_i5cb1","text":"button__text_i5cb1","ghost":"button__ghost_i5cb1","component":"button__component_i5cb1","loading":"button__loading_i5cb1","outlined":"button__outlined_i5cb1","tertiary":"button__tertiary_i5cb1","transparent":"button__transparent_i5cb1","link":"button__link_i5cb1"};
+var defaultColors = {"primary":"button__primary_1xhun","loader":"button__loader_1xhun","secondary":"button__secondary_1xhun","text":"button__text_1xhun","ghost":"button__ghost_1xhun","component":"button__component_1xhun","loading":"button__loading_1xhun","outlined":"button__outlined_1xhun","tertiary":"button__tertiary_1xhun","transparent":"button__transparent_1xhun","link":"button__link_1xhun"};
 require('./default.mobile.css');
 
-var invertedColors = {"primary":"button__primary_1qv2d","loader":"button__loader_1qv2d","secondary":"button__secondary_1qv2d","text":"button__text_1qv2d","ghost":"button__ghost_1qv2d","component":"button__component_1qv2d","loading":"button__loading_1qv2d","outlined":"button__outlined_1qv2d","tertiary":"button__tertiary_1qv2d","transparent":"button__transparent_1qv2d","link":"button__link_1qv2d"};
+var invertedColors = {"primary":"button__primary_k2svh","loader":"button__loader_k2svh","secondary":"button__secondary_k2svh","text":"button__text_k2svh","ghost":"button__ghost_k2svh","component":"button__component_k2svh","loading":"button__loading_k2svh","outlined":"button__outlined_k2svh","tertiary":"button__tertiary_k2svh","transparent":"button__transparent_k2svh","link":"button__link_k2svh"};
 require('./inverted.mobile.css');
 
-var styles = {"size-32":"button__size-32_n1bz0","size-40":"button__size-40_n1bz0","size-48":"button__size-48_n1bz0","size-56":"button__size-56_n1bz0","size-64":"button__size-64_n1bz0","size-72":"button__size-72_n1bz0"};
+var styles = {"size-32":"button__size-32_1erbg","size-40":"button__size-40_1erbg","size-48":"button__size-48_1erbg","size-56":"button__size-56_1erbg","size-64":"button__size-64_1erbg","size-72":"button__size-72_1erbg"};
 require('./mobile.css');
 
 var colorStyles = {

package/button/esm/mobile/default.mobile.css

@@ -129,45 +129,45 @@
 
     /* loader mobile */
     --button-spinner-primary-mobile-color: var(--color-light-neutral-translucent-1300-inverted);
-} .button__primary_i5cb1 {
+} .button__primary_1xhun {
     color: var(--button-primary-mobile-color);
     background-color: var(--button-primary-mobile-base-bg-color)
 } @media (hover: hover) {
-        .button__primary_i5cb1:hover {
+        .button__primary_1xhun:hover {
             background-color: var(--button-primary-mobile-hover-bg-color);
         }
-    } .button__primary_i5cb1:active {
+    } .button__primary_1xhun:active {
         background-color: var(--button-primary-mobile-active-bg-color);
-    } .button__primary_i5cb1 > .button__loader_i5cb1 {
+    } .button__primary_1xhun > .button__loader_1xhun {
         color: var(--button-spinner-primary-mobile-color);
-    } .button__secondary_i5cb1 {
+    } .button__secondary_1xhun {
     background-color: var(--button-secondary-mobile-base-bg-color)
-} .button__secondary_i5cb1:active {
+} .button__secondary_1xhun:active {
         background-color: var(--button-secondary-mobile-active-bg-color);
-    } .button__text_i5cb1:active {
+    } .button__text_1xhun:active {
         color: var(--button-text-mobile-active-color);
-    } .button__ghost_i5cb1:active {
+    } .button__ghost_1xhun:active {
         color: var(--button-ghost-mobile-active-color);
-    } .button__component_i5cb1[disabled].button__primary_i5cb1 {
+    } .button__component_1xhun[disabled].button__primary_1xhun {
         color: var(--button-primary-mobile-disabled-color);
         background-color: var(--button-primary-mobile-disabled-bg-color)
-    } .button__component_i5cb1[disabled].button__primary_i5cb1.button__loading_i5cb1 {
+    } .button__component_1xhun[disabled].button__primary_1xhun.button__loading_1xhun {
             background-color: var(--button-primary-mobile-base-bg-color);
-        } .button__component_i5cb1[disabled].button__secondary_i5cb1 {
+        } .button__component_1xhun[disabled].button__secondary_1xhun {
         color: var(--button-secondary-mobile-disabled-color);
         background-color: var(--button-secondary-mobile-disabled-bg-color);
-    } .button__component_i5cb1[disabled].button__outlined_i5cb1 {
+    } .button__component_1xhun[disabled].button__outlined_1xhun {
         color: var(--button-outlined-mobile-disabled-color);
         border-color: var(--button-outlined-mobile-disabled-border-color);
-    } .button__component_i5cb1[disabled].button__tertiary_i5cb1 {
+    } .button__component_1xhun[disabled].button__tertiary_1xhun {
         color: var(--button-tertiary-mobile-disabled-color);
         border-color: var(--button-tertiary-mobile-disabled-border-color);
-    } .button__component_i5cb1[disabled].button__transparent_i5cb1 {
+    } .button__component_1xhun[disabled].button__transparent_1xhun {
         color: var(--button-transparent-mobile-disabled-color);
-    } .button__component_i5cb1[disabled].button__link_i5cb1 {
+    } .button__component_1xhun[disabled].button__link_1xhun {
         color: var(--button-link-mobile-disabled-color);
-    } .button__component_i5cb1[disabled].button__text_i5cb1 {
+    } .button__component_1xhun[disabled].button__text_1xhun {
         color: var(--button-text-mobile-disabled-color);
-    } .button__component_i5cb1[disabled].button__ghost_i5cb1 {
+    } .button__component_1xhun[disabled].button__ghost_1xhun {
         color: var(--button-ghost-mobile-disabled-color);
     }

package/button/esm/mobile/index.d.ts

@@ -1,2 +1,2 @@
-export { ButtonMobile } from './Component.mobile';
-export type { CommonButtonProps as ButtonMobileProps } from '../typings';
+export { ButtonMobile } from "./Component.mobile";
+export type { CommonButtonProps as ButtonMobileProps } from "../typings";

package/button/esm/mobile/inverted.mobile.css

@@ -140,45 +140,45 @@
 
     /* loader mobile */
     --button-spinner-inverted-primary-mobile-color: var(--color-light-neutral-translucent-1300);
-} .button__primary_1qv2d {
+} .button__primary_k2svh {
     color: var(--button-inverted-primary-mobile-color);
     background-color: var(--button-inverted-primary-mobile-base-bg-color)
 } @media (hover: hover) {
-        .button__primary_1qv2d:hover {
+        .button__primary_k2svh:hover {
             background-color: var(--button-inverted-primary-mobile-hover-bg-color);
         }
-    } .button__primary_1qv2d:active {
+    } .button__primary_k2svh:active {
         background-color: var(--button-inverted-primary-mobile-active-bg-color);
-    } .button__primary_1qv2d > .button__loader_1qv2d {
+    } .button__primary_k2svh > .button__loader_k2svh {
         color: var(--button-spinner-inverted-primary-mobile-color);
-    } .button__secondary_1qv2d {
+    } .button__secondary_k2svh {
     background-color: var(--button-inverted-secondary-mobile-base-bg-color)
-} .button__secondary_1qv2d:active {
+} .button__secondary_k2svh:active {
         background-color: var(--button-inverted-secondary-mobile-active-bg-color);
-    } .button__text_1qv2d:active {
+    } .button__text_k2svh:active {
         color: var(--button-inverted-text-mobile-active-color);
-    } .button__ghost_1qv2d:active {
+    } .button__ghost_k2svh:active {
         color: var(--button-inverted-ghost-mobile-active-color);
-    } .button__component_1qv2d[disabled].button__primary_1qv2d {
+    } .button__component_k2svh[disabled].button__primary_k2svh {
         color: var(--button-inverted-primary-mobile-disabled-color);
         background-color: var(--button-inverted-primary-mobile-disabled-bg-color)
-    } .button__component_1qv2d[disabled].button__primary_1qv2d.button__loading_1qv2d {
+    } .button__component_k2svh[disabled].button__primary_k2svh.button__loading_k2svh {
             background-color: var(--button-inverted-primary-mobile-base-bg-color);
-        } .button__component_1qv2d[disabled].button__secondary_1qv2d {
+        } .button__component_k2svh[disabled].button__secondary_k2svh {
         color: var(--button-inverted-secondary-mobile-disabled-color);
         background-color: var(--button-inverted-secondary-mobile-disabled-bg-color);
-    } .button__component_1qv2d[disabled].button__outlined_1qv2d {
+    } .button__component_k2svh[disabled].button__outlined_k2svh {
         color: var(--button-inverted-outlined-mobile-disabled-color);
         border-color: var(--button-inverted-outlined-mobile-disabled-border-color);
-    } .button__component_1qv2d[disabled].button__tertiary_1qv2d {
+    } .button__component_k2svh[disabled].button__tertiary_k2svh {
         color: var(--button-inverted-tertiary-mobile-disabled-color);
         border-color: var(--button-inverted-tertiary-mobile-disabled-border-color);
-    } .button__component_1qv2d[disabled].button__transparent_1qv2d {
+    } .button__component_k2svh[disabled].button__transparent_k2svh {
         color: var(--button-inverted-transparent-mobile-disabled-color);
-    } .button__component_1qv2d[disabled].button__link_1qv2d {
+    } .button__component_k2svh[disabled].button__link_k2svh {
         color: var(--button-inverted-link-mobile-disabled-color);
-    } .button__component_1qv2d[disabled].button__text_1qv2d {
+    } .button__component_k2svh[disabled].button__text_k2svh {
         color: var(--button-inverted-text-mobile-disabled-color);
-    } .button__component_1qv2d[disabled].button__ghost_1qv2d {
+    } .button__component_k2svh[disabled].button__ghost_k2svh {
         color: var(--button-inverted-ghost-mobile-disabled-color);
     }

package/button/esm/mobile/mobile.css

@@ -110,16 +110,16 @@
     /* text mobile inverted */
 
     /* loader mobile */
-} .button__size-32_n1bz0 {
+} .button__size-32_1erbg {
     border-radius: var(--button-xxs-size-mobile-border-radius);
-} .button__size-40_n1bz0 {
+} .button__size-40_1erbg {
     border-radius: var(--button-xs-size-mobile-border-radius);
-} .button__size-48_n1bz0 {
+} .button__size-48_1erbg {
     border-radius: var(--button-s-size-mobile-border-radius);
-} .button__size-56_n1bz0 {
+} .button__size-56_1erbg {
     border-radius: var(--button-m-size-mobile-border-radius);
-} .button__size-64_n1bz0 {
+} .button__size-64_1erbg {
     border-radius: var(--button-l-size-mobile-border-radius);
-} .button__size-72_n1bz0 {
+} .button__size-72_1erbg {
     border-radius: var(--button-xl-size-mobile-border-radius);
 }

package/button/esm/shared/index.d.ts

@@ -1 +1 @@
-export { getButtonTestIds } from '../utils';
+export { getButtonTestIds } from "../utils";

package/button/esm/typings.d.ts

@@ -1,5 +1,5 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
-export declare type StyleColors = {
+type StyleColors = {
     default: {
         [key: string]: string;
     };
@@ -7,7 +7,7 @@ export declare type StyleColors = {
         [key: string]: string;
     };
 };
-export declare type ComponentProps = {
+type ComponentProps = {
     /**
      * Тип кнопки
      * @default secondary
@@ -91,7 +91,7 @@ export declare type ComponentProps = {
      */
     children?: ReactNode;
 };
-export declare type PrivateButtonProps = {
+type PrivateButtonProps = {
     /**
      * Основные стили компонента.
      */
@@ -103,15 +103,21 @@ export declare type PrivateButtonProps = {
      */
     colorStylesMap: StyleColors;
 };
-export declare type CommonButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
-export declare type ButtonProps = CommonButtonProps & {
+type CommonButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+type ButtonProps = CommonButtonProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
     /**
      * Значение по-умолчанию для хука useMatchMedia
+     * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
 };
+export { StyleColors, ComponentProps, PrivateButtonProps, CommonButtonProps, ButtonProps };

package/button/esm/utils.d.ts

@@ -1,4 +1,5 @@
-export declare function getButtonTestIds(dataTestId: string): {
+declare function getButtonTestIds(dataTestId: string): {
     button: string;
-    spinner: any;
+    spinner: string;
 };
+export { getButtonTestIds };

package/button/index.d.ts

@@ -1,2 +1,2 @@
-export { Button } from './Component.responsive';
-export type { ButtonProps } from './typings';
+export { Button } from "./Component.responsive";
+export type { ButtonProps } from "./typings";

package/button/mobile/Component.mobile.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
 import React from 'react';
-import { CommonButtonProps } from '../typings';
-export declare const ButtonMobile: React.ForwardRefExoticComponent<CommonButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+import { CommonButtonProps } from "../typings";
+declare const ButtonMobile: React.ForwardRefExoticComponent<CommonButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { ButtonMobile };

package/button/mobile/Component.mobile.js

@@ -8,13 +8,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var defaultColors = {"primary":"button__primary_i5cb1","loader":"button__loader_i5cb1","secondary":"button__secondary_i5cb1","text":"button__text_i5cb1","ghost":"button__ghost_i5cb1","component":"button__component_i5cb1","loading":"button__loading_i5cb1","outlined":"button__outlined_i5cb1","tertiary":"button__tertiary_i5cb1","transparent":"button__transparent_i5cb1","link":"button__link_i5cb1"};
+var defaultColors = {"primary":"button__primary_1xhun","loader":"button__loader_1xhun","secondary":"button__secondary_1xhun","text":"button__text_1xhun","ghost":"button__ghost_1xhun","component":"button__component_1xhun","loading":"button__loading_1xhun","outlined":"button__outlined_1xhun","tertiary":"button__tertiary_1xhun","transparent":"button__transparent_1xhun","link":"button__link_1xhun"};
 require('./default.mobile.css');
 
-var invertedColors = {"primary":"button__primary_1qv2d","loader":"button__loader_1qv2d","secondary":"button__secondary_1qv2d","text":"button__text_1qv2d","ghost":"button__ghost_1qv2d","component":"button__component_1qv2d","loading":"button__loading_1qv2d","outlined":"button__outlined_1qv2d","tertiary":"button__tertiary_1qv2d","transparent":"button__transparent_1qv2d","link":"button__link_1qv2d"};
+var invertedColors = {"primary":"button__primary_k2svh","loader":"button__loader_k2svh","secondary":"button__secondary_k2svh","text":"button__text_k2svh","ghost":"button__ghost_k2svh","component":"button__component_k2svh","loading":"button__loading_k2svh","outlined":"button__outlined_k2svh","tertiary":"button__tertiary_k2svh","transparent":"button__transparent_k2svh","link":"button__link_k2svh"};
 require('./inverted.mobile.css');
 
-var styles = {"size-32":"button__size-32_n1bz0","size-40":"button__size-40_n1bz0","size-48":"button__size-48_n1bz0","size-56":"button__size-56_n1bz0","size-64":"button__size-64_n1bz0","size-72":"button__size-72_n1bz0"};
+var styles = {"size-32":"button__size-32_1erbg","size-40":"button__size-40_1erbg","size-48":"button__size-48_1erbg","size-56":"button__size-56_1erbg","size-64":"button__size-64_1erbg","size-72":"button__size-72_1erbg"};
 require('./mobile.css');
 
 var colorStyles = {

package/button/mobile/default.mobile.css

@@ -129,45 +129,45 @@
 
     /* loader mobile */
     --button-spinner-primary-mobile-color: var(--color-light-neutral-translucent-1300-inverted);
-} .button__primary_i5cb1 {
+} .button__primary_1xhun {
     color: var(--button-primary-mobile-color);
     background-color: var(--button-primary-mobile-base-bg-color)
 } @media (hover: hover) {
-        .button__primary_i5cb1:hover {
+        .button__primary_1xhun:hover {
             background-color: var(--button-primary-mobile-hover-bg-color);
         }
-    } .button__primary_i5cb1:active {
+    } .button__primary_1xhun:active {
         background-color: var(--button-primary-mobile-active-bg-color);
-    } .button__primary_i5cb1 > .button__loader_i5cb1 {
+    } .button__primary_1xhun > .button__loader_1xhun {
         color: var(--button-spinner-primary-mobile-color);
-    } .button__secondary_i5cb1 {
+    } .button__secondary_1xhun {
     background-color: var(--button-secondary-mobile-base-bg-color)
-} .button__secondary_i5cb1:active {
+} .button__secondary_1xhun:active {
         background-color: var(--button-secondary-mobile-active-bg-color);
-    } .button__text_i5cb1:active {
+    } .button__text_1xhun:active {
         color: var(--button-text-mobile-active-color);
-    } .button__ghost_i5cb1:active {
+    } .button__ghost_1xhun:active {
         color: var(--button-ghost-mobile-active-color);
-    } .button__component_i5cb1[disabled].button__primary_i5cb1 {
+    } .button__component_1xhun[disabled].button__primary_1xhun {
         color: var(--button-primary-mobile-disabled-color);
         background-color: var(--button-primary-mobile-disabled-bg-color)
-    } .button__component_i5cb1[disabled].button__primary_i5cb1.button__loading_i5cb1 {
+    } .button__component_1xhun[disabled].button__primary_1xhun.button__loading_1xhun {
             background-color: var(--button-primary-mobile-base-bg-color);
-        } .button__component_i5cb1[disabled].button__secondary_i5cb1 {
+        } .button__component_1xhun[disabled].button__secondary_1xhun {
         color: var(--button-secondary-mobile-disabled-color);
         background-color: var(--button-secondary-mobile-disabled-bg-color);
-    } .button__component_i5cb1[disabled].button__outlined_i5cb1 {
+    } .button__component_1xhun[disabled].button__outlined_1xhun {
         color: var(--button-outlined-mobile-disabled-color);
         border-color: var(--button-outlined-mobile-disabled-border-color);
-    } .button__component_i5cb1[disabled].button__tertiary_i5cb1 {
+    } .button__component_1xhun[disabled].button__tertiary_1xhun {
         color: var(--button-tertiary-mobile-disabled-color);
         border-color: var(--button-tertiary-mobile-disabled-border-color);
-    } .button__component_i5cb1[disabled].button__transparent_i5cb1 {
+    } .button__component_1xhun[disabled].button__transparent_1xhun {
         color: var(--button-transparent-mobile-disabled-color);
-    } .button__component_i5cb1[disabled].button__link_i5cb1 {
+    } .button__component_1xhun[disabled].button__link_1xhun {
         color: var(--button-link-mobile-disabled-color);
-    } .button__component_i5cb1[disabled].button__text_i5cb1 {
+    } .button__component_1xhun[disabled].button__text_1xhun {
         color: var(--button-text-mobile-disabled-color);
-    } .button__component_i5cb1[disabled].button__ghost_i5cb1 {
+    } .button__component_1xhun[disabled].button__ghost_1xhun {
         color: var(--button-ghost-mobile-disabled-color);
     }

package/button/mobile/index.d.ts

@@ -1,2 +1,2 @@
-export { ButtonMobile } from './Component.mobile';
-export type { CommonButtonProps as ButtonMobileProps } from '../typings';
+export { ButtonMobile } from "./Component.mobile";
+export type { CommonButtonProps as ButtonMobileProps } from "../typings";

package/button/mobile/inverted.mobile.css

@@ -140,45 +140,45 @@
 
     /* loader mobile */
     --button-spinner-inverted-primary-mobile-color: var(--color-light-neutral-translucent-1300);
-} .button__primary_1qv2d {
+} .button__primary_k2svh {
     color: var(--button-inverted-primary-mobile-color);
     background-color: var(--button-inverted-primary-mobile-base-bg-color)
 } @media (hover: hover) {
-        .button__primary_1qv2d:hover {
+        .button__primary_k2svh:hover {
             background-color: var(--button-inverted-primary-mobile-hover-bg-color);
         }
-    } .button__primary_1qv2d:active {
+    } .button__primary_k2svh:active {
         background-color: var(--button-inverted-primary-mobile-active-bg-color);
-    } .button__primary_1qv2d > .button__loader_1qv2d {
+    } .button__primary_k2svh > .button__loader_k2svh {
         color: var(--button-spinner-inverted-primary-mobile-color);
-    } .button__secondary_1qv2d {
+    } .button__secondary_k2svh {
     background-color: var(--button-inverted-secondary-mobile-base-bg-color)
-} .button__secondary_1qv2d:active {
+} .button__secondary_k2svh:active {
         background-color: var(--button-inverted-secondary-mobile-active-bg-color);
-    } .button__text_1qv2d:active {
+    } .button__text_k2svh:active {
         color: var(--button-inverted-text-mobile-active-color);
-    } .button__ghost_1qv2d:active {
+    } .button__ghost_k2svh:active {
         color: var(--button-inverted-ghost-mobile-active-color);
-    } .button__component_1qv2d[disabled].button__primary_1qv2d {
+    } .button__component_k2svh[disabled].button__primary_k2svh {
         color: var(--button-inverted-primary-mobile-disabled-color);
         background-color: var(--button-inverted-primary-mobile-disabled-bg-color)
-    } .button__component_1qv2d[disabled].button__primary_1qv2d.button__loading_1qv2d {
+    } .button__component_k2svh[disabled].button__primary_k2svh.button__loading_k2svh {
             background-color: var(--button-inverted-primary-mobile-base-bg-color);
-        } .button__component_1qv2d[disabled].button__secondary_1qv2d {
+        } .button__component_k2svh[disabled].button__secondary_k2svh {
         color: var(--button-inverted-secondary-mobile-disabled-color);
         background-color: var(--button-inverted-secondary-mobile-disabled-bg-color);
-    } .button__component_1qv2d[disabled].button__outlined_1qv2d {
+    } .button__component_k2svh[disabled].button__outlined_k2svh {
         color: var(--button-inverted-outlined-mobile-disabled-color);
         border-color: var(--button-inverted-outlined-mobile-disabled-border-color);
-    } .button__component_1qv2d[disabled].button__tertiary_1qv2d {
+    } .button__component_k2svh[disabled].button__tertiary_k2svh {
         color: var(--button-inverted-tertiary-mobile-disabled-color);
         border-color: var(--button-inverted-tertiary-mobile-disabled-border-color);
-    } .button__component_1qv2d[disabled].button__transparent_1qv2d {
+    } .button__component_k2svh[disabled].button__transparent_k2svh {
         color: var(--button-inverted-transparent-mobile-disabled-color);
-    } .button__component_1qv2d[disabled].button__link_1qv2d {
+    } .button__component_k2svh[disabled].button__link_k2svh {
         color: var(--button-inverted-link-mobile-disabled-color);
-    } .button__component_1qv2d[disabled].button__text_1qv2d {
+    } .button__component_k2svh[disabled].button__text_k2svh {
         color: var(--button-inverted-text-mobile-disabled-color);
-    } .button__component_1qv2d[disabled].button__ghost_1qv2d {
+    } .button__component_k2svh[disabled].button__ghost_k2svh {
         color: var(--button-inverted-ghost-mobile-disabled-color);
     }

package/button/mobile/mobile.css

@@ -110,16 +110,16 @@
     /* text mobile inverted */
 
     /* loader mobile */
-} .button__size-32_n1bz0 {
+} .button__size-32_1erbg {
     border-radius: var(--button-xxs-size-mobile-border-radius);
-} .button__size-40_n1bz0 {
+} .button__size-40_1erbg {
     border-radius: var(--button-xs-size-mobile-border-radius);
-} .button__size-48_n1bz0 {
+} .button__size-48_1erbg {
     border-radius: var(--button-s-size-mobile-border-radius);
-} .button__size-56_n1bz0 {
+} .button__size-56_1erbg {
     border-radius: var(--button-m-size-mobile-border-radius);
-} .button__size-64_n1bz0 {
+} .button__size-64_1erbg {
     border-radius: var(--button-l-size-mobile-border-radius);
-} .button__size-72_n1bz0 {
+} .button__size-72_1erbg {
     border-radius: var(--button-xl-size-mobile-border-radius);
 }

package/button/modern/Component.responsive.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
 import React from 'react';
-import { ButtonProps } from './typings';
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+import { ButtonProps } from "./typings";
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { Button };

package/button/modern/Component.responsive.js

@@ -1,17 +1,16 @@
 import React, { forwardRef } from 'react';
-import { useMatchMedia } from '../../mq/modern';
-import { getComponentBreakpoint } from '../../shared/modern';
+import { useIsDesktop } from '../../mq/modern';
 import { ButtonDesktop } from './desktop/Component.desktop.js';
 import { ButtonMobile } from './mobile/Component.mobile.js';
 import './components/base-button/Component.js';
 import 'react-merge-refs';
 import 'classnames';
+import '../../shared/modern';
 import '../../spinner/modern';
 import '@alfalab/hooks';
 
-const Button = forwardRef(({ children, breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, ...restProps }, ref) => {
-    const query = `(min-width: ${breakpoint}px)`;
-    const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
+const Button = forwardRef(({ children, breakpoint, client, defaultMatchMediaValue = client === undefined ? undefined : client === 'desktop', ...restProps }, ref) => {
+    const isDesktop = useIsDesktop(breakpoint, defaultMatchMediaValue);
     const Component = isDesktop ? ButtonDesktop : ButtonMobile;
     return (React.createElement(Component, { ref: ref, ...restProps }, children));
 });

package/button/modern/components/base-button/Component.d.ts

@@ -1,8 +1,10 @@
+/// <reference types="react" />
 import React from 'react';
-import { CommonButtonProps, PrivateButtonProps } from '../../typings';
+import { CommonButtonProps, PrivateButtonProps } from "../../typings";
 /**
  * Минимальное время отображения лоадера - 500мс,
  * чтобы при быстрых ответах от сервера кнопка не «моргала».
  */
-export declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
-export declare const BaseButton: React.ForwardRefExoticComponent<(CommonButtonProps & PrivateButtonProps) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<(CommonButtonProps & PrivateButtonProps) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/button/modern/components/base-button/Component.js

@@ -5,13 +5,13 @@ import { getDataTestId } from '../../../../shared/modern';
 import { Spinner } from '../../../../spinner/modern';
 import { useFocus } from '@alfalab/hooks';
 
-const defaultColors = {"accent":"button__accent_zl0eg","loader":"button__loader_zl0eg","primary":"button__primary_zl0eg","secondary":"button__secondary_zl0eg","outlined":"button__outlined_zl0eg","tertiary":"button__tertiary_zl0eg","filled":"button__filled_zl0eg","transparent":"button__transparent_zl0eg","link":"button__link_zl0eg","text":"button__text_zl0eg","ghost":"button__ghost_zl0eg","component":"button__component_zl0eg","loading":"button__loading_zl0eg"};
+const defaultColors = {"accent":"button__accent_quvwr","loader":"button__loader_quvwr","primary":"button__primary_quvwr","secondary":"button__secondary_quvwr","outlined":"button__outlined_quvwr","tertiary":"button__tertiary_quvwr","filled":"button__filled_quvwr","transparent":"button__transparent_quvwr","link":"button__link_quvwr","text":"button__text_quvwr","ghost":"button__ghost_quvwr","component":"button__component_quvwr","loading":"button__loading_quvwr"};
 require('./default.css');
 
-const commonStyles = {"component":"button__component_1ltmv","hug":"button__hug_1ltmv","fill":"button__fill_1ltmv","hint":"button__hint_1ltmv","allowBackdropBlur":"button__allowBackdropBlur_1ltmv","secondary":"button__secondary_1ltmv","accent":"button__accent_1ltmv","primary":"button__primary_1ltmv","focused":"button__focused_1ltmv","loading":"button__loading_1ltmv","label":"button__label_1ltmv","addons":"button__addons_1ltmv","stretchText":"button__stretchText_1ltmv","loader":"button__loader_1ltmv","size-32":"button__size-32_1ltmv","iconOnly":"button__iconOnly_1ltmv","size-40":"button__size-40_1ltmv","size-48":"button__size-48_1ltmv","size-56":"button__size-56_1ltmv","size-64":"button__size-64_1ltmv","size-72":"button__size-72_1ltmv","withRightAddons":"button__withRightAddons_1ltmv","ghost":"button__ghost_1ltmv","text":"button__text_1ltmv","withLeftAddons":"button__withLeftAddons_1ltmv","link":"button__link_1ltmv","transparent":"button__transparent_1ltmv","block":"button__block_1ltmv","nowrap":"button__nowrap_1ltmv","rounded":"button__rounded_1ltmv"};
+const commonStyles = {"component":"button__component_15lsf","hug":"button__hug_15lsf","fill":"button__fill_15lsf","hint":"button__hint_15lsf","allowBackdropBlur":"button__allowBackdropBlur_15lsf","secondary":"button__secondary_15lsf","accent":"button__accent_15lsf","primary":"button__primary_15lsf","focused":"button__focused_15lsf","loading":"button__loading_15lsf","label":"button__label_15lsf","addons":"button__addons_15lsf","stretchText":"button__stretchText_15lsf","loader":"button__loader_15lsf","size-32":"button__size-32_15lsf","iconOnly":"button__iconOnly_15lsf","size-40":"button__size-40_15lsf","size-48":"button__size-48_15lsf","size-56":"button__size-56_15lsf","size-64":"button__size-64_15lsf","size-72":"button__size-72_15lsf","withRightAddons":"button__withRightAddons_15lsf","ghost":"button__ghost_15lsf","text":"button__text_15lsf","withLeftAddons":"button__withLeftAddons_15lsf","link":"button__link_15lsf","transparent":"button__transparent_15lsf","block":"button__block_15lsf","nowrap":"button__nowrap_15lsf","rounded":"button__rounded_15lsf"};
 require('./index.css');
 
-const invertedColors = {"accent":"button__accent_184mj","loader":"button__loader_184mj","primary":"button__primary_184mj","secondary":"button__secondary_184mj","outlined":"button__outlined_184mj","tertiary":"button__tertiary_184mj","filled":"button__filled_184mj","transparent":"button__transparent_184mj","link":"button__link_184mj","text":"button__text_184mj","ghost":"button__ghost_184mj","component":"button__component_184mj","loading":"button__loading_184mj"};
+const invertedColors = {"accent":"button__accent_zei2b","loader":"button__loader_zei2b","primary":"button__primary_zei2b","secondary":"button__secondary_zei2b","outlined":"button__outlined_zei2b","tertiary":"button__tertiary_zei2b","filled":"button__filled_zei2b","transparent":"button__transparent_zei2b","link":"button__link_zei2b","text":"button__text_zei2b","ghost":"button__ghost_zei2b","component":"button__component_zei2b","loading":"button__loading_zei2b"};
 require('./inverted.css');
 
 /* eslint-disable complexity */
@@ -88,7 +88,7 @@ const BaseButton = React.forwardRef(({ allowBackdropBlur, children, view = 'seco
             }) },
             children,
             showHint && React.createElement("span", { className: commonStyles.hint }, hint))),
-        showLoader && (React.createElement(Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn(commonStyles.loader, colorStyles[colors].loader, colorStylesMap[colors].loader, spinnerClassName) })),
+        showLoader && (React.createElement(Spinner, { preset: 24, dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn(commonStyles.loader, colorStyles[colors].loader, colorStylesMap[colors].loader, spinnerClassName) })),
         rightAddons && React.createElement("span", { className: commonStyles.addons }, rightAddons)));
     useEffect(() => {
         if (loading) {